/* =====================================================
   USER DASHBOARD
===================================================== */

.portal-dashboard-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 110px;
}


/* FILTER */

.portal-dashboard-filter {
    margin-bottom: 14px;
    padding: 14px;

    border: 1px solid #eee;
    border-radius: 14px;

    background: #fff;
}

.portal-dashboard-filter-heading {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;
}

.portal-dashboard-filter-heading > i {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(92,45,145,.08);
    color: var(--primary-color);
}

.portal-dashboard-filter-heading strong,
.portal-dashboard-filter-heading small {
    display: block;
}

.portal-dashboard-filter-heading strong {
    font-size: 14px;
}

.portal-dashboard-filter-heading small {
    margin-top: 1px;

    color: #999;

    font-size: 14px;
}

.portal-dashboard-filter-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-filter-grid label {
    display: block;

    margin-bottom: 4px;

    color: #777;

    font-size: 14px;
}

.portal-dashboard-dropdown {
    width: 100%;
    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 10px;

    border: 1px solid #ddd;
    border-radius: 9px;

    background: #fff;
    color: #555;

    font-size: 14px;

    text-align: right;
}

.portal-dashboard-dropdown span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.portal-dashboard-dropdown i {
    color: var(--primary-color);
}

.portal-dashboard-filter .dropdown-menu {
    width: 100%;
    text-align: right;
}


/* HERO */

.portal-dashboard-hero {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 9px;
    padding: 15px;

    border: 1px solid #eee;
    border-radius: 16px;

    background: #fff;

    box-shadow: 0 4px 18px rgba(0,0,0,.035);
}

.portal-dashboard-user-photo {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #f8f9fa;
}

.portal-dashboard-user-photo img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    border-radius: 50% !important;
}

.portal-dashboard-user-info {
    flex: 1;
    min-width: 0;
}

.portal-dashboard-eyebrow {
    display: block;

    margin-bottom: 2px;

    color: var(--primary-color);

    font-size: 14px;
    font-weight: 600;
}

.portal-dashboard-user-info h2 {
    margin: 0;

    font-size: 18px;
    font-weight: 800;
}

.portal-dashboard-membership-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    margin-top: 7px;
}

.portal-dashboard-membership-badges span {
    padding: 4px 7px;

    border-radius: 7px;

    background: #f8f9fa;
    color: #666;

    font-size: 14px;
}


/* OVERALL */

.portal-dashboard-overall {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;

    margin-bottom: 14px;
}

.portal-dashboard-overall > div {
    padding: 10px 5px;

    border: 1px solid #eee;
    border-radius: 10px;

    background: #fff;

    text-align: center;
}

.portal-dashboard-overall strong,
.portal-dashboard-overall span {
    display: block;
}

.portal-dashboard-overall strong {
    color: #333;

    font-size: 17px;
    font-weight: 800;
}

.portal-dashboard-overall span {
    margin-top: 2px;

    color: #888;

    font-size: 14px;
}


/* SECTION */

.portal-dashboard-section {
    margin-bottom: 14px;
    padding: 14px;

    border: 1px solid #eee;
    border-radius: 15px;

    background: #fff;

    box-shadow: 0 4px 16px rgba(0,0,0,.025);
}

.portal-dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 13px;
    padding-bottom: 11px;

    border-bottom: 1px solid #eee;
}

.portal-dashboard-section-title > span {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(92,45,145,.08);
    color: var(--primary-color);
}

.portal-dashboard-section-title h4 {
    margin: 0;

    font-size: 16px;
    font-weight: 700;
}

.portal-dashboard-section-title small {
    display: block;

    margin-top: 2px;

    color: #999;

    font-size: 14px;
}


/* MEMBERSHIPS */

.portal-dashboard-memberships {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-membership {
    padding: 10px;

    border-radius: 10px;

    background: #f8f9fa;
}

.portal-dashboard-membership > strong {
    display: block;

    margin-bottom: 6px;

    font-size: 14px;
}

.portal-dashboard-membership > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.portal-dashboard-membership span {
    padding: 4px 6px;

    border-radius: 7px;

    background: #fff;
    color: #777;

    font-size: 14px;
}


/* ROLE */

.portal-dashboard-role-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-role-card {
    padding: 10px;

    border-radius: 10px;

    background: #f8f9fa;
}

.portal-dashboard-role-card h5 {
    margin-bottom: 8px;

    font-size: 16px;
    font-weight: 700;
}

.portal-dashboard-role-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
}

.portal-dashboard-role-stats > div {
    padding: 6px;

    border-radius: 7px;

    background: #fff;

    text-align: center;
}

.portal-dashboard-role-stats span,
.portal-dashboard-role-stats strong {
    display: block;
}

.portal-dashboard-role-stats span {
    color: #999;

    font-size: 14px;
}

.portal-dashboard-role-stats strong {
    margin-top: 2px;

    font-size: 14px;
}


/* BEST BY ROLE */

.portal-dashboard-best-roles {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-best-role {
    padding: 10px;

    border-radius: 10px;

    background: #f8f9fa;
}

.portal-dashboard-best-role > span {
    display: block;

    margin-bottom: 5px;

    color: #888;

    font-size: 14px;
}

.portal-dashboard-best-role > strong {
    display: block;

    font-size: 14px;
}

.portal-dashboard-best-role > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    margin-top: 7px;
}

.portal-dashboard-best-role > div > span {
    padding: 4px 6px;

    border-radius: 7px;

    background: #fff;
    color: #777;

    font-size: 14px;
}


/* ACCOUNT BEST */

.portal-dashboard-account-best {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-account-best-card {
    padding: 11px;

    border-radius: 10px;

    background: #f8f9fa;
}

.portal-dashboard-account-best-card > span {
    display: block;

    color: #888;

    font-size: 14px;
}

.portal-dashboard-account-best-card h4 {
    margin: 4px 0 9px;

    font-size: 16px;
    font-weight: 700;
}

.portal-dashboard-account-best-data {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
}

.portal-dashboard-account-best-data > div {
    padding: 6px;

    border-radius: 7px;

    background: #fff;
}

.portal-dashboard-account-best-data span,
.portal-dashboard-account-best-data strong {
    display: block;
}

.portal-dashboard-account-best-data span {
    color: #999;

    font-size: 14px;
}

.portal-dashboard-account-best-data strong {
    margin-top: 2px;

    color: #444;

    font-size: 14px;
}


/* TABS */

.portal-dashboard-tabs {
    margin-bottom: 10px;
    padding: 5px;

    border-radius: 11px;

    background: #f7f7f8;
}

.portal-dashboard-tabs .nav {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
}

.portal-dashboard-tabs .nav-item {
    margin: 0;
}

.portal-dashboard-tabs .nav-link {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 0 !important;
    border-radius: 8px;

    color: #777;

    font-size: 14px;
    font-weight: 600;
}

.portal-dashboard-tabs .nav-link.active {
    background: #fff;
    color: var(--primary-color);

    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.portal-dashboard-tabs .nav-link span {
    min-width: 20px;

    padding: 2px 5px;

    border-radius: 20px;

    background: rgba(92,45,145,.07);

    font-size: 14px;
}

.portal-dashboard-tab-content {
    margin-top: 8px;
}


/* NOTIFICATIONS */

.portal-dashboard-notifications {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.portal-dashboard-notification {
    padding: 9px;

    border: 1px solid #eee;
    border-radius: 9px;

    background: #fff;
}

.portal-dashboard-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    margin-bottom: 6px;
}

.portal-dashboard-channel,
.portal-dashboard-notification-status {
    padding: 4px 6px;

    border-radius: 20px;

    font-size: 14px;
    font-weight: 600;
}

.portal-dashboard-channel {
    background: #f8f9fa;
    color: #666;
}

.portal-dashboard-channel.email {
    background: rgba(0,123,255,.08);
    color: #2768b2;
}

.portal-dashboard-channel.sms {
    background: rgba(255,193,7,.10);
    color: #8a6d00;
}

.portal-dashboard-channel.whatsapp {
    background: rgba(40,167,69,.09);
    color: #27843c;
}

.portal-dashboard-notification-status.seen {
    background: rgba(40,167,69,.08);
    color: #27843c;
}

.portal-dashboard-notification-status.unseen {
    background: rgba(220,53,69,.07);
    color: #b22b39;
}

.portal-dashboard-notification p {
    margin: 0 0 6px;

    color: #555;

    font-size: 14px;
    line-height: 1.7;
}

.portal-dashboard-notification > small {
    color: #999;

    font-size: 14px;
}


/* EMPTY */

.portal-dashboard-no-data,
.portal-dashboard-empty {
    padding: 14px 10px;

    border-radius: 8px;

    background: #fafafa;
    color: #999;

    font-size: 14px;

    text-align: center;
}


/* MOBILE */

@media (max-width: 767.98px) {

    .portal-dashboard-page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .portal-dashboard-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .portal-dashboard-hero {
        padding: 12px;
    }

    .portal-dashboard-user-photo {
        flex-basis: 56px;

        width: 56px;
        height: 56px;
    }

    .portal-dashboard-user-info h2 {
        font-size: 18px;
    }

    .portal-dashboard-overall {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .portal-dashboard-memberships {
        grid-template-columns: 1fr;
    }

    .portal-dashboard-role-grid {
        grid-template-columns: 1fr;
    }

    .portal-dashboard-best-roles {
        grid-template-columns: 1fr;
    }

    .portal-dashboard-account-best {
        grid-template-columns: 1fr;
    }

    .portal-dashboard-notifications {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   DASHBOARD HORSES
===================================================== */

.portal-dashboard-horses-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.portal-dashboard-horse-card {
    min-width: 0;

    padding: 10px;

    border: 1px solid #eee;
    border-radius: 10px;

    background: #fff;
}


/* HEAD */

.portal-dashboard-horse-head {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;
}

.portal-dashboard-horse-number {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(92,45,145,.07);
    color: var(--primary-color);

    font-size: 14px;
    font-weight: 700;
}

.portal-dashboard-horse-title {
    flex: 1;
    min-width: 0;
}

.portal-dashboard-horse-title strong,
.portal-dashboard-horse-title small {
    display: block;
}

.portal-dashboard-horse-title strong {
    overflow: hidden;

    color: #333;

    font-size: 14px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-dashboard-horse-title small {
    margin-top: 1px;

    color: #999;

    font-size: 14px;
}

.portal-dashboard-horse-rating {
    flex: 0 0 auto;

    min-width: 50px;

    padding: 5px 7px;

    border-radius: 8px;

    background: rgba(23,162,184,.07);

    text-align: center;
}

.portal-dashboard-horse-rating span,
.portal-dashboard-horse-rating strong {
    display: block;
}

.portal-dashboard-horse-rating span {
    color: #888;

    font-size: 14px;
}

.portal-dashboard-horse-rating strong {
    margin-top: 1px;

    color: #167587;

    font-size: 14px;
}


/* STATS */

.portal-dashboard-horse-stats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;

    margin-bottom: 7px;
}

.portal-dashboard-horse-stats > div {
    padding: 6px;

    border-radius: 7px;

    background: #f8f9fa;

    text-align: center;
}

.portal-dashboard-horse-stats span,
.portal-dashboard-horse-stats strong {
    display: block;
}

.portal-dashboard-horse-stats span {
    color: #999;

    font-size: 14px;
}

.portal-dashboard-horse-stats strong {
    margin-top: 2px;

    color: #444;

    font-size: 14px;
}


/* INFO */

.portal-dashboard-horse-info {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
}

.portal-dashboard-horse-info > div {
    min-width: 0;

    padding: 6px;

    border-radius: 7px;

    background: #fafafa;
}

.portal-dashboard-horse-info > div.full {
    grid-column: 1 / -1;
}

.portal-dashboard-horse-info span,
.portal-dashboard-horse-info strong {
    display: block;
}

.portal-dashboard-horse-info span {
    color: #999;

    font-size: 14px;
}

.portal-dashboard-horse-info span i {
    margin-left: 3px;

    color: var(--primary-color);
}

.portal-dashboard-horse-info strong {
    margin-top: 2px;

    overflow: hidden;

    color: #555;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* MOBILE */

@media (max-width: 767.98px) {

    .portal-dashboard-horses-list {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   LEFT ACTIONS
===================================================== */

.portal-navbar-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* MENU */

.portal-navbar-menu-button {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,.08) !important;
    color: #fff !important;

    font-size: 15px !important;
}


/* MIDAN */

.portal-navbar-midan {
    min-height: 42px;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 11px !important;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;

    background: rgba(255,255,255,.08);
    color: #fff !important;

    font-size: 14px;
    font-weight: 600;
}

.portal-navbar-midan i {
    font-size: 14px;
}


/* =====================================================
   USER AREA
===================================================== */

.portal-navbar-user-area {
    display: flex;
    align-items: center;
    gap: 4px;
}

.portal-navbar-user {
    position: relative;
}

.portal-navbar-profile-dropdown {
    width: 230px;

    right: 0 !important;
    left: auto !important;

    overflow: hidden;

    padding: 0 !important;

    border: 1px solid #eee !important;
    border-radius: 13px !important;

    background: #fff;

    box-shadow: 0 8px 28px rgba(0,0,0,.10) !important;
}