/**
 * CBITS brand theme — primary colors and component overrides.
 * Load after template stylesheets so sidebar and button overrides win.
 */
:root {
    --cbits-primary: #2fa77a;
    --cbits-primary-dark: #268f66;
    --cbits-primary-light: #d4f0e6;
    --cbits-green: #2fa77a;
    --cbits-primary-gradient: linear-gradient(135deg, #2fa77a 0%, #268f66 100%);

    /* Riho admin template (legacy typo preserved) */
    --theme-deafult: var(--cbits-primary);
    --theme-default: 47, 167, 122;

    /* Bootstrap */
    --bs-primary: var(--cbits-primary);
    --bs-primary-rgb: 47, 167, 122;

    /* Admin / invigilator */
    --inv-teal: var(--cbits-primary);
    --inv-teal-light: var(--cbits-primary-light);
    --inv-teal-muted: var(--cbits-primary-dark);

    /* Practice portal */
    --pp-primary: var(--cbits-primary);
    --pp-primary-dark: var(--cbits-primary-dark);
    --pp-primary-light: var(--cbits-primary-light);

    /* Candidate exam surfaces */
    --pcbt-teal: var(--cbits-primary);
    --csub-teal: var(--cbits-primary);
    --review-teal: var(--cbits-primary);
    --err-primary: var(--cbits-primary);

    /* Bootstrap danger */
    --cbits-danger: #dc3545;
    --cbits-danger-dark: #bb2d3b;
    --bs-danger: var(--cbits-danger);

    /* Shared button hover timing */
    --cbits-btn-transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, transform 0.22s ease, opacity 0.22s ease;

    /* Card elevation — layered ambient + depth */
    --cbits-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --cbits-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.07);
    --cbits-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.09);
    --cbits-shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.05), 0 18px 44px rgba(15, 23, 42, 0.11);
    --cbits-shadow-hover: 0 4px 10px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.12);
    --cbits-shadow-primary-glow: 0 6px 20px rgba(47, 167, 122, 0.16);
    --cbits-card-transition: box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;
    --sch-shadow: var(--cbits-shadow-sm);
    --pp-shadow: var(--cbits-shadow-sm);
}

/* Primary actions — gradient fill */
.btn-primary,
.btn-primary:focus,
.btn-primary:not([disabled]):not(.disabled).active,
.dt-ext .dataTables_wrapper button.dt-button.btn-primary,
.dt-ext .dataTables_wrapper div.dt-button.btn-primary,
.dt-ext .dataTables_wrapper a.dt-button.btn-primary,
.dropdown .dropdown-toggle.btn-primary,
.sch-primary-action-btn,
.csub-btn,
.pp-btn-primary,
.pp-cta-btn {
    background: var(--cbits-primary-gradient) !important;
    border-color: var(--cbits-primary-dark) !important;
    color: #fff !important;
    filter: brightness(1);
    transition: var(--cbits-btn-transition) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:not([disabled]):not(.disabled).active:hover,
.btn-primary:not([disabled]):not(.disabled).active:focus,
.btn-primary:not([disabled]):not(.disabled).active:active,
.sch-primary-action-btn:hover,
.csub-btn:hover,
.pp-btn-primary:hover,
.pp-cta-btn:hover {
    background: var(--cbits-primary-gradient) !important;
    border-color: var(--cbits-primary-dark) !important;
    color: #fff !important;
    filter: brightness(0.9);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--cbits-primary) !important;
    border-color: var(--cbits-primary) !important;
    opacity: 0.65;
}

.btn-outline-primary {
    border-color: var(--cbits-primary) !important;
    color: var(--cbits-primary) !important;
    background-color: transparent !important;
    transition: var(--cbits-btn-transition) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--cbits-primary) !important;
    background-image: none !important;
    border-color: var(--cbits-primary-dark) !important;
    color: #fff !important;
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus {
    color: var(--cbits-primary) !important;
}

.bg-primary,
.badge-primary,
.badge.badge-primary {
    background-color: var(--cbits-primary) !important;
}

.border-primary,
.border-l-primary,
.border-r-primary {
    border-color: var(--cbits-primary) !important;
}

.ribbon-primary {
    background: var(--cbits-primary-gradient) !important;
}

/* Sidebar — light text on green background; never use primary green for link labels */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    background: var(--cbits-primary-gradient) !important;
}

.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link span,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list > a.sidebar-title {
    color: #fff !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li .nav-sub-childmenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .mega-menu-container .mega-box .link-section .submenu-content li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .mega-menu-container .mega-box .link-section .submenu-content li a {
    color: rgba(255, 255, 255, 0.82) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li .nav-sub-childmenu li a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li .nav-sub-childmenu li a.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li .nav-sub-childmenu li a.active {
    color: #fff !important;
}

.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-list > a.sidebar-title.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu::before {
    background: rgba(255, 255, 255, 0.35) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a::after,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a::after {
    border-left-color: rgba(255, 255, 255, 0.4) !important;
    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a::before {
    background: rgba(255, 255, 255, 0.5) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a.active::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content > li .sidebar-submenu li a.active::before {
    background: #fff !important;
}

.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .according-menu i,
.page-wrapper .sidebar-wrapper .sidebar-main .sidebar-links li .according-menu i {
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-wrapper .sidebar-wrapper .sidebar-main-title h6.lan-1,
.page-wrapper .sidebar-wrapper .sidebar-main-title h6 {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* SweetAlert2 — confirm/submit = primary, cancel = danger */
.swal2-popup .swal2-styled.swal2-confirm {
    background: var(--cbits-primary-gradient) !important;
    border-color: var(--cbits-primary-dark) !important;
    color: #fff !important;
    filter: brightness(1);
    transition: var(--cbits-btn-transition) !important;
}

.swal2-popup .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(47, 167, 122, 0.35) !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
    background-color: var(--cbits-danger) !important;
    border-color: var(--cbits-danger) !important;
    color: #fff !important;
    filter: brightness(1);
    transition: var(--cbits-btn-transition) !important;
}

.swal2-popup .swal2-styled.swal2-cancel:hover {
    background-color: var(--cbits-danger) !important;
    border-color: var(--cbits-danger) !important;
    filter: brightness(0.92);
}

/* Smooth hover transitions — app-wide buttons */
.btn,
.btn-sm,
.btn-lg,
.sch-modal-btn,
.sch-modal-link-btn,
.sch-primary-action-btn,
.sch-dt-btn,
.sch-compose-btn,
.sch-bulk-action-btn,
.sch-row-action-btn,
.sch-nav-pill,
.inv-dt-btn,
.inv-btn-refresh,
.pp-btn,
.pp-row-btn,
.pp-dash-action-btn,
.pp-catalog-search-btn,
.pp-catalog-filter-btn,
.dt-buttons .btn,
.dt-buttons button,
.swal2-popup .swal2-styled {
    transition: var(--cbits-btn-transition) !important;
}

.btn-danger,
.sch-modal-btn-cancel,
.swal2-popup .swal2-styled.swal2-cancel {
    transition: var(--cbits-btn-transition) !important;
}

.sch-modal-btn-primary {
    transition: var(--cbits-btn-transition) !important;
}

.sch-modal-btn-cancel:hover:not(:disabled) {
    filter: brightness(0.92);
}

.sch-modal-btn-primary:hover:not(:disabled) {
    filter: brightness(0.92);
}

.sch-modal-btn-success:hover:not(:disabled) {
    filter: brightness(0.92);
}

.sch-modal-btn-warning:hover:not(:disabled) {
    filter: brightness(0.97);
}

.sch-modal-btn-outline:hover:not(:disabled) {
    filter: brightness(0.98);
}

.btn-danger:hover:not(:disabled):not(.disabled),
.btn-danger:focus:not(:disabled):not(.disabled) {
    filter: brightness(0.92);
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    filter: brightness(0.9);
}

.pp-btn:hover:not(:disabled) {
    transition: var(--cbits-btn-transition) !important;
}

/* ── App shell header + profile menu (admin, agent, practice) ── */
.cbits-shell-header.page-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.cbits-shell-header .header-wrapper .nav-right > ul {
    gap: 0.35rem;
}

.cbits-shell-header .header-wrapper .nav-right > ul > li.profile-nav {
    padding: 0;
    background: transparent !important;
    border-radius: 0;
}

.cbits-shell-header .header-wrapper .nav-right > ul > li.profile-nav.onhover-dropdown:hover {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.cbits-shell-header .header-wrapper .nav-right > ul > li .mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: var(--cbits-btn-transition);
}

.cbits-shell-header .header-wrapper .nav-right > ul > li .mode:hover {
    border-color: rgba(47, 167, 122, 0.45);
    background: var(--cbits-primary-light);
}

.cbits-header-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.55rem 0.28rem 0.28rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: var(--cbits-btn-transition);
}

.cbits-header-profile-trigger:hover,
.profile-nav.onhover-dropdown:hover .cbits-header-profile-trigger,
.profile-nav.onhover-dropdown.is-open .cbits-header-profile-trigger {
    border-color: var(--cbits-primary);
    background: var(--cbits-primary-light);
    box-shadow: 0 0 0 1px rgba(47, 167, 122, 0.18), 0 4px 12px rgba(47, 167, 122, 0.1);
}

.cbits-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cbits-primary-light);
    border: 1px solid rgba(47, 167, 122, 0.2);
}

.cbits-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cbits-header-avatar--initials {
    background: var(--cbits-primary-gradient);
    border-color: transparent;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cbits-header-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 0.82rem;
}

.cbits-header-avatar--menu {
    width: 44px;
    height: 44px;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.cbits-shell-header .header-wrapper .nav-right > ul > li.profile-nav.cbits-header-profile {
    position: relative;
}

.cbits-header-profile-meta {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 168px;
    line-height: 1.2;
}

.cbits-header-profile-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cbits-header-profile-role {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
    white-space: nowrap;
}

.cbits-header-profile-chevron {
    font-size: 0.85rem;
    color: #64748b;
    transition: transform 0.2s ease, color 0.2s ease;
}

.profile-nav.onhover-dropdown:hover .cbits-header-profile-chevron,
.profile-nav.onhover-dropdown.is-open .cbits-header-profile-chevron {
    color: var(--cbits-primary);
    transform: rotate(180deg);
}

.cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown {
    width: min(300px, calc(100vw - 1.5rem)) !important;
    min-width: 0 !important;
    max-width: min(300px, calc(100vw - 1.5rem));
    top: calc(100% + 10px);
    left: auto !important;
    right: 0;
    z-index: 1055;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 16px 40px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    box-sizing: border-box;
}

.cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-menu.onhover-show-div,
.cbits-shell-header .profile-nav.onhover-dropdown.is-open .cbits-header-profile-menu.onhover-show-div,
.cbits-shell-header .profile-nav.onhover-dropdown .cbits-header-profile-menu.onhover-show-div.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.cbits-header-profile-menu.profile-dropdown::before,
.cbits-header-profile-menu.profile-dropdown::after,
.cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-menu.onhover-show-div::before,
.cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-menu.onhover-show-div::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

.cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown li,
.cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown li:last-child {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: #fff;
}

.cbits-header-profile-menu-head {
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.cbits-header-profile-menu-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.9rem;
}

.cbits-header-profile-menu-identity {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.2rem;
}

.cbits-header-profile-menu-identity strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbits-header-profile-menu-email {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbits-header-profile-menu-role {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cbits-primary);
    background: var(--cbits-primary-light);
    border-radius: 999px;
    line-height: 1.2;
}

.cbits-header-profile-menu-head + li .cbits-header-profile-menu-link {
    margin-top: 0.35rem;
}

.cbits-header-profile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.15rem 0.45rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.cbits-header-profile-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.cbits-header-profile-menu-icon i {
    font-size: 1.05rem;
    line-height: 1;
}

.cbits-header-profile-menu-label {
    line-height: 1.25;
}

.cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:hover,
.cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:focus {
    background: #f8fafc;
    color: var(--cbits-primary);
}

.cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:hover .cbits-header-profile-menu-icon,
.cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:focus .cbits-header-profile-menu-icon {
    background: var(--cbits-primary-light);
    color: var(--cbits-primary);
}

.cbits-header-profile-menu li:not(.cbits-header-profile-menu-head) a svg {
    display: none;
}

.cbits-header-profile-menu-logout {
    border-top: 1px solid #eef2f6 !important;
    margin-top: 0.25rem !important;
    padding-bottom: 0.35rem !important;
    background: #fff !important;
}

.cbits-header-profile-menu-logout .cbits-header-profile-menu-link {
    margin-top: 0.35rem;
    color: #64748b;
}

.cbits-header-profile-menu-link--danger .cbits-header-profile-menu-icon {
    background: #fef2f2;
    color: #b42318;
}

.cbits-header-profile-menu-logout .cbits-header-profile-menu-link:hover,
.cbits-header-profile-menu-logout .cbits-header-profile-menu-link:focus {
    background: #fef2f2;
    color: #991b1b;
}

.cbits-header-profile-menu-logout .cbits-header-profile-menu-link:hover .cbits-header-profile-menu-icon,
.cbits-header-profile-menu-logout .cbits-header-profile-menu-link:focus .cbits-header-profile-menu-icon {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 991.98px) {
    .cbits-shell-header .cbits-header-profile-chevron {
        display: none !important;
    }

    .cbits-shell-header .cbits-header-profile-trigger {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        gap: 0;
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        background: #fff;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        box-shadow: none !important;
        outline: none;
    }

    .cbits-shell-header .cbits-header-profile-trigger .cbits-header-avatar {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 50%;
    }

    .cbits-shell-header .cbits-header-profile-trigger:hover,
    .cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-trigger,
    .cbits-shell-header .profile-nav.onhover-dropdown.is-open .cbits-header-profile-trigger {
        background: #fff;
        border-color: var(--cbits-primary);
        box-shadow: none !important;
    }

    .cbits-shell-header .profile-nav.onhover-dropdown.is-open .cbits-header-profile-trigger .cbits-header-avatar--initials,
    .cbits-shell-header .cbits-header-profile-trigger:focus-visible .cbits-header-avatar--initials {
        filter: brightness(0.97);
    }

    .cbits-shell-header .header-wrapper .nav-right > ul > li.profile-nav.cbits-header-profile.onhover-dropdown:hover,
    .cbits-shell-header .header-wrapper .nav-right > ul > li.profile-nav.cbits-header-profile.is-open {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 15px !important;
        left: auto !important;
        min-width: min(280px, calc(100vw - 1.25rem));
        max-width: calc(100vw - 1.25rem);
        width: auto !important;
    }

    /* Theme responsive.css requires hover + .active on small screens — shell uses .active / .is-open only */
    .cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-menu.onhover-show-div:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (max-width: 575.98px) {
    .cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown {
        min-width: 0;
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem) !important;
        right: 0.5rem !important;
    }

    .cbits-header-profile-menu-user {
        padding: 0.9rem 0.85rem 0.85rem;
    }

    .cbits-header-profile-menu-link {
        margin-inline: 0.35rem;
    }
}

body.dark-only .cbits-shell-header.page-header {
    background: #22242b;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.dark-only .cbits-shell-header .header-wrapper .nav-right > ul > li .mode {
    background: #2a2d36;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-only .cbits-shell-header .header-wrapper .nav-right > ul > li .mode:hover {
    background: rgba(47, 167, 122, 0.14);
    border-color: rgba(47, 167, 122, 0.45);
}

body.dark-only .cbits-header-profile-trigger {
    background: #2a2d36;
    border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 991.98px) {
    body.dark-only .cbits-shell-header .cbits-header-profile-trigger {
        background: #2a2d36;
        border-color: rgba(255, 255, 255, 0.12);
    }

    body.dark-only .cbits-shell-header .cbits-header-profile-trigger:hover,
    body.dark-only .cbits-shell-header .profile-nav.onhover-dropdown:hover .cbits-header-profile-trigger,
    body.dark-only .cbits-shell-header .profile-nav.onhover-dropdown.is-open .cbits-header-profile-trigger {
        background: #2a2d36;
        border-color: var(--cbits-primary);
        box-shadow: none !important;
    }
}

body.dark-only .cbits-header-profile-trigger:hover,
body.dark-only .profile-nav.onhover-dropdown:hover .cbits-header-profile-trigger,
body.dark-only .profile-nav.onhover-dropdown.is-open .cbits-header-profile-trigger {
    background: rgba(47, 167, 122, 0.14);
    border-color: var(--cbits-primary);
    box-shadow: 0 0 0 1px rgba(47, 167, 122, 0.25);
}

body.dark-only .cbits-header-profile-name {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-only .cbits-header-profile-role,
body.dark-only .cbits-header-profile-chevron {
    color: #98a6ad;
}

body.dark-only .cbits-header-profile-menu.profile-dropdown {
    background: #22242b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

body.dark-only .cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown li,
body.dark-only .cbits-shell-header.page-header .header-wrapper .nav-right .cbits-header-profile-menu.profile-dropdown li:last-child {
    background: #22242b;
}

body.dark-only .cbits-header-profile-menu-head {
    background: #22242b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .cbits-header-profile-menu-identity strong {
    color: #fff;
}

body.dark-only .cbits-header-profile-menu-email {
    color: #98a6ad;
}

body.dark-only .cbits-header-profile-menu-role {
    background: rgba(47, 167, 122, 0.16);
    color: #6ee7a8;
}

body.dark-only .cbits-header-profile-menu-link {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-only .cbits-header-profile-menu-icon {
    background: rgba(255, 255, 255, 0.06);
    color: #98a6ad;
}

body.dark-only .cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:hover,
body.dark-only .cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:focus {
    background: rgba(255, 255, 255, 0.04);
    color: var(--cbits-primary);
}

body.dark-only .cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:hover .cbits-header-profile-menu-icon,
body.dark-only .cbits-header-profile-menu li:not(.cbits-header-profile-menu-head):not(.cbits-header-profile-menu-logout) .cbits-header-profile-menu-link:focus .cbits-header-profile-menu-icon {
    background: rgba(47, 167, 122, 0.16);
    color: var(--cbits-primary);
}

body.dark-only .cbits-header-profile-menu-logout {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    background: #22242b !important;
}

body.dark-only .cbits-header-profile-menu-link--danger .cbits-header-profile-menu-icon {
    background: rgba(220, 53, 69, 0.12);
    color: #f87171;
}

body.dark-only .cbits-header-profile-menu-logout .cbits-header-profile-menu-link:hover,
body.dark-only .cbits-header-profile-menu-logout .cbits-header-profile-menu-link:focus {
    background: rgba(220, 53, 69, 0.1);
    color: #fca5a5;
}

body.dark-only .cbits-header-profile-menu-logout .cbits-header-profile-menu-link:hover .cbits-header-profile-menu-icon,
body.dark-only .cbits-header-profile-menu-logout .cbits-header-profile-menu-link:focus .cbits-header-profile-menu-icon {
    background: rgba(220, 53, 69, 0.18);
    color: #fca5a5;
}

/* ── Card elevation (admin, practice, agent shells) ── */
.page-body .sch-topbar,
.page-body .inv-topbar,
.page-body .sch-form-panel,
.page-body .sch-detail-panel,
.page-body .sch-comp-section-card,
.page-body .sch-tc-item-body,
.page-body .sch-tc-actions-panel,
.page-body .sch-dash-metric,
.page-body .sch-stat-chip,
.page-body .inv-stat-chip,
.page-body .sch-bulk-action-btn,
.page-body .pp-dash-panel,
.page-body .pp-dash-topbar,
.page-body .pp-checkout-summary,
.page-body .pp-card,
.page-body .pp-stat-chip,
.page-body .pp-streak-banner,
.page-body .pp-bonus-banner,
.page-body .pp-quest-banner,
.page-body .pp-achievement-banner,
.page-body .pp-challenge-banner,
.page-body .pp-mastery-banner,
.page-body .pp-gamification-card,
.page-body .pp-today-primary,
.page-body .pp-today-progress,
.page-body .pp-today-progress-card,
.page-body .pp-purchase-card,
.page-body .pp-product-card,
.page-body .pp-lb-hero,
.page-body .pp-lb-row,
.page-body .pp-leaderboard-you,
.page-body .card {
    box-shadow: var(--cbits-shadow-sm);
    transition: var(--cbits-card-transition);
}

.page-body .sch-table-wrap,
.page-body .sch-dash-chart-panel,
.page-body .sch-dash-progress,
.page-body .sch-dash-more-stats,
.page-body .pp-lb-podium-card__panel {
    box-shadow: var(--cbits-shadow-md);
    transition: var(--cbits-card-transition);
}

.page-body .sch-stat-chip:hover,
.page-body .sch-dash-metric:hover,
.page-body .inv-stat-chip:hover {
    box-shadow: var(--cbits-shadow-hover);
    transform: translateY(-2px);
    border-color: rgba(47, 167, 122, 0.22);
}

.page-body .sch-dash-action-card {
    box-shadow: var(--cbits-shadow-sm);
    transition: var(--cbits-card-transition);
}

.page-body .sch-dash-action-card:hover {
    box-shadow: var(--cbits-shadow-primary-glow);
    transform: translateY(-2px);
    border-color: rgba(47, 167, 122, 0.28);
}

.page-body .sch-topbar:hover,
.page-body .inv-topbar:hover,
.page-body .pp-dash-topbar:hover {
    box-shadow: var(--cbits-shadow-md);
    border-color: rgba(47, 167, 122, 0.12);
}

.page-body .sch-table-wrap:hover,
.page-body .sch-form-panel:hover,
.page-body .sch-dash-chart-panel:hover,
.page-body .pp-dash-panel:hover {
    box-shadow: var(--cbits-shadow-lg);
    border-color: rgba(47, 167, 122, 0.14);
}

.page-body .card:hover {
    box-shadow: var(--cbits-shadow-md);
    border-color: rgba(47, 167, 122, 0.12);
}

.page-body .pp-dash-row {
    transition: var(--cbits-card-transition);
}

.page-body .pp-dash-row:hover {
    box-shadow: var(--cbits-shadow-hover);
    transform: translateY(-1px);
}

.page-body .pp-streak-banner:hover,
.page-body .pp-bonus-banner:hover,
.page-body .pp-quest-banner:hover,
.page-body .pp-achievement-banner:hover,
.page-body .pp-challenge-banner:hover,
.page-body .pp-mastery-banner:hover,
.page-body .pp-gamification-card:hover,
.page-body .pp-today-primary:hover,
.page-body .pp-today-progress-card:hover,
.page-body .pp-purchase-card:hover,
.page-body .pp-product-card:hover,
.page-body .pp-lb-row:hover,
.page-body .pp-card:hover {
    box-shadow: var(--cbits-shadow-hover);
    transform: translateY(-1px);
}

.page-body .pp-lb-hero:hover {
    box-shadow: var(--cbits-shadow-lg);
    border-color: rgba(47, 167, 122, 0.18);
}

.page-body .pp-lb-podium-card__panel:hover {
    box-shadow: var(--cbits-shadow-lg);
    transform: translateY(-2px);
}

.page-body .pp-lb-row--you {
    box-shadow: var(--cbits-shadow-sm), 0 0 0 1px rgba(47, 167, 122, 0.18);
}

.page-body .pp-lb-row--you:hover {
    box-shadow: var(--cbits-shadow-hover), 0 0 0 1px rgba(47, 167, 122, 0.28);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .page-body .sch-stat-chip:hover,
    .page-body .sch-dash-metric:hover,
    .page-body .inv-stat-chip:hover,
    .page-body .sch-dash-action-card:hover,
    .page-body .pp-dash-row:hover,
    .page-body .pp-streak-banner:hover,
    .page-body .pp-bonus-banner:hover,
    .page-body .pp-quest-banner:hover,
    .page-body .pp-achievement-banner:hover,
    .page-body .pp-challenge-banner:hover,
    .page-body .pp-mastery-banner:hover,
    .page-body .pp-gamification-card:hover,
    .page-body .pp-today-primary:hover,
    .page-body .pp-today-progress-card:hover,
    .page-body .pp-lb-row:hover,
    .page-body .pp-lb-row--you:hover,
    .page-body .pp-lb-podium-card__panel:hover,
    .page-body .pp-card:hover {
        transform: none;
    }
}

body.dark-only {
    --cbits-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
    --cbits-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34), 0 1px 3px rgba(0, 0, 0, 0.26);
    --cbits-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.28);
    --cbits-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.3);
    --cbits-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.28);
    --cbits-shadow-primary-glow: 0 6px 22px rgba(47, 167, 122, 0.22);
    --sch-shadow: var(--cbits-shadow-sm);
    --pp-shadow: var(--cbits-shadow-sm);
}

body.dark-only .page-body .sch-topbar,
body.dark-only .page-body .inv-topbar,
body.dark-only .page-body .sch-form-panel,
body.dark-only .page-body .sch-table-wrap,
body.dark-only .page-body .sch-detail-panel,
body.dark-only .page-body .sch-comp-section-card,
body.dark-only .page-body .sch-stat-chip,
body.dark-only .page-body .sch-dash-metric,
body.dark-only .page-body .sch-dash-chart-panel,
body.dark-only .page-body .sch-dash-action-card,
body.dark-only .page-body .pp-dash-panel,
body.dark-only .page-body .pp-dash-topbar,
body.dark-only .page-body .pp-card,
body.dark-only .page-body .pp-stat-chip,
body.dark-only .page-body .pp-streak-banner,
body.dark-only .page-body .pp-bonus-banner,
body.dark-only .page-body .pp-quest-banner,
body.dark-only .page-body .pp-achievement-banner,
body.dark-only .page-body .pp-challenge-banner,
body.dark-only .page-body .pp-mastery-banner,
body.dark-only .page-body .pp-gamification-card,
body.dark-only .page-body .pp-today-primary,
body.dark-only .page-body .pp-today-progress,
body.dark-only .page-body .pp-today-progress-card,
body.dark-only .page-body .pp-purchase-card,
body.dark-only .page-body .pp-product-card,
body.dark-only .page-body .pp-lb-hero,
body.dark-only .page-body .pp-lb-row,
body.dark-only .page-body .pp-leaderboard-you,
body.dark-only .page-body .card {
    box-shadow: var(--cbits-shadow-sm) !important;
}

body.dark-only .page-body .pp-lb-podium-card__panel {
    box-shadow: var(--cbits-shadow-md) !important;
}

body.dark-only .page-body .pp-lb-row--you {
    box-shadow: var(--cbits-shadow-sm), 0 0 0 1px rgba(47, 167, 122, 0.22) !important;
}

body.dark-only .page-body .sch-table-wrap,
body.dark-only .page-body .sch-dash-chart-panel {
    box-shadow: var(--cbits-shadow-md) !important;
}

body.dark-only .page-body .sch-stat-chip:hover,
body.dark-only .page-body .sch-dash-metric:hover,
body.dark-only .page-body .sch-dash-action-card:hover,
body.dark-only .page-body .pp-dash-row:hover,
body.dark-only .page-body .pp-streak-banner:hover,
body.dark-only .page-body .pp-bonus-banner:hover,
body.dark-only .page-body .pp-quest-banner:hover,
body.dark-only .page-body .pp-achievement-banner:hover,
body.dark-only .page-body .pp-challenge-banner:hover,
body.dark-only .page-body .pp-mastery-banner:hover,
body.dark-only .page-body .pp-gamification-card:hover,
body.dark-only .page-body .pp-today-primary:hover,
body.dark-only .page-body .pp-today-progress-card:hover,
body.dark-only .page-body .pp-purchase-card:hover,
body.dark-only .page-body .pp-product-card:hover,
body.dark-only .page-body .pp-lb-row:hover,
body.dark-only .page-body .pp-lb-row--you:hover,
body.dark-only .page-body .pp-card:hover {
    box-shadow: var(--cbits-shadow-hover) !important;
}

body.dark-only .page-body .pp-lb-hero:hover,
body.dark-only .page-body .pp-lb-podium-card__panel:hover {
    box-shadow: var(--cbits-shadow-lg) !important;
}

body.dark-only .page-body .sch-table-wrap:hover,
body.dark-only .page-body .pp-dash-panel:hover {
    box-shadow: var(--cbits-shadow-lg) !important;
}