body[data-sidebar=dark] .navbar-brand-box {
    background: #012771 !important;
}

/* body[data-sidebar=dark] .vertical-menu {
    background: #012771 !important;
} */

body[data-sidebar=dark] #sidebar-menu ul li a {
    color: #ffffff;
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 36px!important;
    user-select: none;
    -webkit-user-select: none;
}

dd::before {
    content: ': ';
}
/* ==========================================================================
   Premium header — frosted glass topbar + topnav (horizontal layout)
   Heights unchanged (70px topbar) so page offsets stay the same.
   ========================================================================== */
:root {
    --hdr-glass: rgba(255, 255, 255, .72);
    --hdr-glass-strong: rgba(255, 255, 255, .9);
    --hdr-border: rgba(15, 23, 42, .07);
    --hdr-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --hdr-text: #344054;
    --hdr-muted: #667085;
    --hdr-hover: rgba(15, 23, 42, .045);
    --hdr-accent: var(--theme-link, #556ee6);
    --hdr-accent-soft: rgba(var(--theme-primary-rgb, 85, 110, 230), .09);
    --hdr-radius: 10px;
    /* Subtle brand tint (blue -> indigo -> soft cyan), low alpha */
    --hdr-tint: linear-gradient(100deg, rgba(var(--theme-primary-rgb, 85, 110, 230), .16) 0%, rgba(124, 92, 242, .11) 45%, rgba(80, 165, 241, .13) 100%);
    /* Glossy sheen: bright top half fading out */
    --hdr-sheen: linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .15) 55%, rgba(255, 255, 255, 0) 100%);
    --hdr-gloss-edge: inset 0 1px 0 rgba(255, 255, 255, .95);
}

#page-topbar,
body[data-layout=horizontal][data-topbar=light] .topnav,
body[data-layout=horizontal] .topnav {
    background-color: var(--hdr-glass);
    background-image: var(--hdr-sheen), var(--hdr-tint);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
}

#page-topbar {
    box-shadow: var(--hdr-gloss-edge);
    border-bottom: 1px solid var(--hdr-border);
}

body[data-layout=horizontal] .topnav,
body[data-layout=horizontal][data-topbar=light] .topnav {
    /* slightly deeper tint so the two bars read as layers */
    background-image: var(--hdr-sheen), var(--hdr-tint), var(--hdr-tint);
    box-shadow: var(--hdr-gloss-edge), var(--hdr-shadow);
    border-bottom: 1px solid var(--hdr-border);
}

/* Header buttons: rounded, quiet hover instead of full-height grey block */
.navbar-header .header-item {
    height: 42px;
    margin: 0 2px;
    padding: 0 10px;
    border-radius: var(--hdr-radius);
    color: var(--hdr-muted);
    transition: background-color .15s ease, color .15s ease;
}

.navbar-header .header-item:hover,
.navbar-header .dropdown .show.header-item {
    background-color: var(--hdr-hover);
    color: var(--hdr-text);
}

.noti-icon i {
    color: var(--hdr-muted);
    font-size: 20px;
}

.noti-icon .badge {
    top: 4px;
    right: 2px;
    box-shadow: 0 0 0 2px #fff;
}

/* User chip */
#page-header-user-dropdown {
    padding: 0 10px 0 4px;
    color: var(--hdr-text);
    font-weight: 500;
}

.header-profile-user {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #f2f4f7;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hdr-border);
}

/* Dropdowns from the header: floating rounded panels */
#page-topbar .dropdown-menu {
    border: 1px solid var(--hdr-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
    padding: 6px;
    margin-top: 6px !important;
}

#page-topbar .dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: .5rem .75rem;
}

#page-topbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--hdr-hover);
}

/* Topnav links: dark text on glass, soft pill on hover/active */
@media (min-width: 992px) {
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link,
    body[data-layout=horizontal] .topnav .navbar-nav .nav-link {
        color: var(--hdr-muted);
        font-weight: 500;
        margin: 6px 2px;
        padding: .55rem .95rem;
        border-radius: var(--hdr-radius);
        transition: background-color .15s ease, color .15s ease;
    }

    .topnav .navbar-nav .nav-item:first-of-type .nav-link {
        padding-left: .95rem;
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus,
    body[data-layout=horizontal] .topnav .navbar-nav .nav-link:hover,
    body[data-layout=horizontal] .topnav .navbar-nav .nav-link:focus {
        background-color: var(--hdr-hover);
        color: var(--hdr-text);
    }

    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a,
    body[data-layout=horizontal] .topnav .navbar-nav .nav-link.active {
        background-color: var(--hdr-accent-soft);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(100deg, rgba(var(--theme-primary-rgb, 85, 110, 230), .14), rgba(124, 92, 242, .10));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(var(--theme-primary-rgb, 85, 110, 230), .12);
        color: var(--hdr-accent) !important;
    }

    .topnav .dropdown .dropdown-menu {
        border: 1px solid var(--hdr-border);
        border-radius: 12px;
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18);
        padding: 6px;
        margin-top: 2px;
    }

    .topnav .dropdown .dropdown-item {
        border-radius: 8px;
        padding: .5rem .85rem;
    }

    .topnav .dropdown .dropdown-item:hover {
        background-color: var(--hdr-hover);
    }
}

/* Mobile: menu panel needs more opacity for legibility */
@media (max-width: 991.98px) {
    body[data-layout=horizontal] .topnav {
        background-color: var(--hdr-glass-strong);
    }

    .topnav .navbar-nav .nav-link {
        color: var(--hdr-text);
        border-radius: var(--hdr-radius);
    }
}

/* Keyboard focus */
.navbar-header .header-item:focus-visible,
.topnav .nav-link:focus-visible,
.topnav .dropdown-item:focus-visible,
#page-topbar .dropdown-item:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 2px;
}

/* No blur support, or user asked for less transparency: solid surface */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #page-topbar,
    body[data-layout=horizontal] .topnav,
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: #fff;
        background-image: var(--hdr-tint);
    }
}

@media (prefers-reduced-transparency: reduce) {
    #page-topbar,
    body[data-layout=horizontal] .topnav,
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: #fff;
        background-image: var(--hdr-tint);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* --- Header: brand, tagline, user chip, active tab ----------------------- */
.hdr-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 1.25rem;
    background: transparent !important;
}

.hdr-logo {
    display: inline-flex;
    align-items: center;
}

.hdr-logo img {
    height: 34px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.hdr-company-logo {
    display: inline-flex;
    align-items: center;
}

/* Parts switched off in System settings > Header display (beats d-md-inline). */
.hdr-brand [hidden] {
    display: none !important;
}

/* Divider only between visible parts, so the first one shown never starts with a rule. */
.hdr-brand > :not([hidden]) ~ :is(.hdr-company-logo, .hdr-company-name, .hdr-tagline) {
    padding-left: 16px;
    border-left: 1px solid rgba(15, 23, 42, .12);
}

.hdr-company-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-ink, #1e293b);
    white-space: nowrap;
}

.hdr-company-logo img {
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.hdr-wordmark {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0f172a;
}

.hdr-tagline {
    color: var(--hdr-muted);
    font-size: 13px;
    white-space: nowrap;
}

.hdr-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--theme-ink, #3f4f9e);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hdr-border);
}

.hdr-user {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    margin: 0 6px 0 10px;
    text-align: left;
}

.hdr-user-name {
    color: var(--hdr-text);
    font-weight: 500;
}

.hdr-user-role {
    color: var(--hdr-muted);
    font-size: 12px;
    font-weight: 400;
}

#page-header-user-dropdown {
    display: inline-flex;
    align-items: center;
    height: 48px;
}

/* --- Dashboard (sized to the app's 13px base) ---------------------------- */
body[data-layout-size=boxed] {
    background-color: var(--theme-background, #f4f6fb);
}

/* Same 1300px centred box as the header (1276 + page padding); 8px inset lines up with the logo */
.dash-wrap {
    max-width: 1276px;
    margin: 0 auto;
    padding: 0 8px 24px;
}

.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.dash-eyebrow {
    margin: 0 0 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dash-title {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dash-subtitle {
    margin: 0;
    color: #475467;
    font-size: 13px;
}

.dash-hero-art {
    flex: 0 0 auto;
    width: 220px;
    height: auto;
    color: var(--theme-link, #6f86d6);
}

@media (max-width: 991.98px) {
    .dash-hero-art {
        display: none;
    }
}

.dash-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -16px rgba(15, 23, 42, .16);
}

/* Profile card */
.profile-card {
    overflow: hidden;
}

.profile-banner {
    min-height: 96px;
    padding: 16px 20px;
    color: #fff;
    background-color: var(--theme-ink, #3f51a3);
    background-image: none;
}

.profile-app {
    font-size: 16px;
    font-weight: 600;
}

.profile-tagline {
    font-size: 12px;
    opacity: 1;
}

.profile-body {
    padding: 0 20px 20px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-bottom: 12px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .3);
    background: var(--theme-ink, #3f4f9e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
}

.profile-role {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--theme-primary-rgb, 85, 110, 230), .1);
    color: var(--theme-link, #3f51b5);
    font-size: 12px;
    font-weight: 500;
}

.profile-card hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: none;
    opacity: 1;
}

.profile-btn,
.module-launch {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.profile-btn i,
.module-launch i {
    font-size: 16px;
}

.profile-btn {
    background-color: var(--theme-link, #4056b5);
    border-color: var(--theme-link, #4056b5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px -6px rgba(64, 86, 181, .7);
}

.profile-btn:hover {
    background-color: var(--theme-link, #36499e);
    border-color: var(--theme-link, #36499e);
}

/* Module card */
.module-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.module-card:hover {
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 16px 32px -12px rgba(15, 23, 42, .18);
}

.module-card-banner {
    position: relative;
    height: 160px;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.module-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.module-card:hover .module-card-img {
    transform: scale(1.05);
}

.module-card-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75px;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 0) 0%, 
        rgba(15, 23, 42, 0.4) 35%, 
        rgba(15, 23, 42, 0.85) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.module-card-bottom-content,
.module-card-header-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    z-index: 2;
    pointer-events: none;
}

.module-category-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 6px;
}

.module-card-bottom-content .module-name,
.module-card-header-content .module-name {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.module-card-bottom-content .module-desc,
.module-card-header-content .module-desc {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.module-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px 18px 18px;
}

.module-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.module-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--theme-soft, #eef1fb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.module-logo img {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}

.min-w-0 {
    min-width: 0;
}

.module-name {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
}

.module-desc {
    margin: 2px 0 0;
    color: #667085;
    font-size: 12px;
}

.module-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.module-stats > div {
    padding: 0 10px;
    border-left: 1px solid rgba(15, 23, 42, .08);
}

.module-stats > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.module-stats dt {
    margin-bottom: 2px;
    color: #667085;
    font-size: 12px;
    font-weight: 400;
}

.module-stats dd {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.module-stats dd::before {
    content: none;
}

.stat-total { color: #0f172a; }
.stat-new { color: #4056b5; }
.stat-pending { color: #d97706; }
.stat-approved { color: #15803d; }

.module-launch {
    margin-top: auto;
    background-color: var(--theme-soft, #e8ecfb);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 60%);
    color: var(--theme-link, #3446a0);
    transition: background-color .15s ease, color .15s ease;
}

.module-launch:hover,
.module-launch:focus-visible {
    background-color: var(--theme-border, #dbe1f9);
    color: var(--theme-link, #26357f);
}

.module-launch:focus-visible,
.profile-btn:focus-visible {
    outline: 2px solid var(--hdr-accent);
    outline-offset: 2px;
}

/* --- Topnav: palette primary background with readable white labels (desktop) --- */
/* Opaque colours, so it also holds up where blur/transparency is off. Placed last to win over the glass rules above. */
@media (min-width: 992px) {
    body[data-layout=horizontal] .topnav,
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: var(--theme-primary, #3a4c9f);
        background-image: none;
        border-bottom: 1px solid rgba(15, 23, 42, .18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px -12px rgba(30, 41, 99, .55);
    }

    body[data-layout=horizontal] .topnav .navbar-nav .nav-link,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
        color: #fff;
    }

    body[data-layout=horizontal] .topnav .navbar-nav .nav-link:hover,
    body[data-layout=horizontal] .topnav .navbar-nav .nav-link:focus,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus {
        background-color: rgba(255, 255, 255, .08);
        color: #fff;
    }

    body[data-layout=horizontal] .topnav .navbar-nav .nav-link.active,
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a {
        background-color: rgba(255, 255, 255, .08);
        background-image: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
        color: #fff !important;
    }

    body[data-layout=horizontal] .topnav .nav-link:focus-visible {
        outline-color: #fff;
    }
}

/* --- Buttons: global glass / glossy treatment ------------------------------
   Layers a sheen over each variant's own background colour, adds a top
   highlight and a soft tinted shadow. Excludes header icon buttons and links. */
.btn:not(.header-item):not(.btn-link) {
    --btn-glow: 15, 23, 42;
    border-radius: 8px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .02) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(var(--btn-glow), .12);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary, .btn-outline-primary { --btn-glow: var(--theme-primary-rgb, 85, 110, 230); }
.btn-secondary, .btn-outline-secondary { --btn-glow: 116, 120, 141; }
.btn-success, .btn-outline-success { --btn-glow: 52, 195, 143; }
.btn-danger, .btn-outline-danger { --btn-glow: 244, 106, 106; }
.btn-warning, .btn-outline-warning { --btn-glow: 241, 180, 76; }
.btn-info, .btn-outline-info { --btn-glow: 80, 165, 241; }
.btn-dark, .btn-outline-dark { --btn-glow: 52, 58, 64; }

.btn:not(.header-item):not(.btn-link):hover {
    filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(var(--btn-glow), .16);
}

.btn:not(.header-item):not(.btn-link):active,
.btn:not(.header-item):not(.btn-link).active {
    filter: brightness(.97);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(255, 255, 255, .08) 100%);
    box-shadow: inset 0 1px 2px rgba(var(--btn-glow), .16);
}

.btn:not(.header-item):not(.btn-link):focus-visible {
    outline: 2px solid rgba(var(--btn-glow), .9);
    outline-offset: 2px;
}

.btn:not(.header-item):not(.btn-link):disabled,
.btn:not(.header-item):not(.btn-link).disabled {
    filter: none;
    background-image: none;
    box-shadow: none;
}

/* Light and outline buttons: frosted surface instead of a flat fill */
.btn-light:not(.header-item) {
    background-color: rgba(255, 255, 255, .7);
    border-color: rgba(15, 23, 42, .1);
    color: #344054 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(15, 23, 42, .06);
}

.btn-light:not(.header-item):hover,
.btn-light:not(.header-item):focus {
    background-color: rgba(255, 255, 255, .92);
    border-color: rgba(15, 23, 42, .14);
    color: #1d2939 !important;
}

.btn-outline-light:not(.header-item),
.btn-outline-secondary:not(.header-item) {
    color: #1e293b !important;
    border-color: #d0d5dd !important;
    background-color: #ffffff !important;
}

.btn-outline-light:not(.header-item):hover,
.btn-outline-light:not(.header-item):focus,
.btn-outline-light:not(.header-item):active,
.btn-outline-secondary:not(.header-item):hover,
.btn-outline-secondary:not(.header-item):focus,
.btn-outline-secondary:not(.header-item):active {
    color: var(--theme-link, #556ee6) !important;
    border-color: var(--theme-link, #556ee6) !important;
    background-color: var(--theme-soft, #eef1fd) !important;
}

.btn-outline-light:not(.header-item):hover i,
.btn-outline-secondary:not(.header-item):hover i {
    color: var(--theme-link, #556ee6) !important;
}

[class*="btn-outline-"]:not(.header-item) {
    background-color: #ffffff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Coloured outline buttons: the white base above outranks Bootstrap's solid hover fill,
   which left white text on white. Hover is a soft tint with dark tone text instead. */
.btn-outline-danger:not(.header-item):is(:hover, :focus, :active, .active) { background-color: #fef2f2; border-color: #f46a6a; color: #b91c1c; }
.btn-outline-success:not(.header-item):is(:hover, :focus, :active, .active) { background-color: #f0fdf4; border-color: #34c38f; color: #15803d; }
.btn-outline-warning:not(.header-item):is(:hover, :focus, :active, .active) { background-color: #fffbeb; border-color: #f1b44c; color: #b45309; }
.btn-outline-info:not(.header-item):is(:hover, :focus, :active, .active) { background-color: #eff6ff; border-color: #50a5f1; color: #1d4ed8; }
.btn-outline-dark:not(.header-item):is(:hover, :focus, :active, .active) { background-color: #f1f5f9; border-color: #343a40; color: #1e293b; }

/* Warning text on the amber fill needs contrast */
.btn-warning {
    color: #3d2a00;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #2b1d00;
}

@media (prefers-reduced-transparency: reduce) {
    .btn-light:not(.header-item),
    [class*="btn-outline-"]:not(.header-item) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .btn-light:not(.header-item) {
        background-color: #fff;
    }
}

/* --- Header: loan module switcher ---------------------------------------- */
.mod-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hdr-text);
    max-width: 260px;
}

.mod-switch-btn > .bx {
    font-size: 18px;
    color: var(--hdr-accent);
}

.mod-switch-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
    text-align: left;
}

.mod-switch-caption {
    font-size: 11px;
    color: var(--hdr-muted);
}

.mod-switch-name {
    font-size: 13px;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-topbar .mod-switch-menu {
    width: 280px;
}

.mod-switch-list {
    max-height: 60vh;
    overflow-y: auto;
}

#page-topbar .mod-switch-menu .dropdown-item.is-current {
    color: var(--hdr-accent);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mod-switch-name {
        max-width: 110px;
    }
}

.mod-global-btn.is-current {
    background-color: var(--theme-soft, #eef1fd);
}

.mod-global-btn.is-current .mod-switch-name {
    color: var(--hdr-accent);
}

@media (max-width: 575.98px) {
    .mod-global-btn .mod-switch-label {
        display: none;
    }
}

.fd-hdr-count {
    margin-left: 4px;
    font-size: 11px;
    color: #1e293b;
    background: #fde68a;
}

/* System settings > Header display: miniature of the top-bar brand row */
.hdr-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
}

.hdr-preview__part {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.hdr-preview__part.has-rule {
    padding-left: 12px;
    border-left: 1px solid rgba(15, 23, 42, .12);
}

.hdr-preview__part img {
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.hdr-preview__part img.is-small {
    height: 22px;
}

.hdr-preview__part strong {
    color: var(--theme-ink, #1e293b);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* System settings: brand parts x (Header, Sign-in) switch grid */
.brand-switches {
    width: 100%;
    font-size: 13px;
}

.brand-switches th,
.brand-switches td {
    padding: 6px 0;
    vertical-align: middle;
}

.brand-switches thead th {
    padding-top: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    width: 64px;
}

.brand-switches thead th:first-child {
    width: auto;
}

.brand-switches tbody th {
    font-weight: 500;
    color: var(--theme-ink, #1e293b);
}

.brand-switches tbody tr + tr > * {
    border-top: 1px solid #f1f5f9;
}

.brand-switches td .form-check {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    min-height: 0;
}

.brand-switches td .form-check-input {
    float: none;
    margin: 0;
}