/* ============================================================================
 * SACAI corporate theme — Staff CRM
 * ----------------------------------------------------------------------------
 * The Staff CRM runs a DIFFERENT template (CreativeLayers) to the Admin and
 * Documents CRMs (Sneat), so none of those selectors apply here — but all three
 * share ONE palette. Keep this in step with the admin's:
 *     assets/css/menu-theme-sacai.css   (sidebar/navbar)
 *     assets/css/login-theme-sacai.css  (auth pages)
 *
 * Loaded LAST (after css/style.css and css/custom.css) so these rules win.
 *
 * The stock template hard-codes its own near-miss blue (#254091 / #1F2B55) plus
 * a stray #003c78 on the Access Card button; all are unified to the SACAI
 * palette below, so Staff / Admin / Documents finally use one identical blue.
 *
 * The menu logo (sacai-logo-white.png) is a WHITE, transparent-background mark,
 * so it is only ever placed on blue — the dashboard header and the login band.
 * ==========================================================================*/

:root {
    --sacai-blue:     #2E51A3;   /* royal / corporate blue */
    --sacai-blue-mid: #21386F;
    --sacai-navy:     #17245A;   /* deep navy              */
    --sacai-green:    #1FA84C;   /* brand green (accent)   */
}

/* ============================================================================
 * 1. Palette unification — retire the stock #254091 / #1F2B55
 * ==========================================================================*/

.btn-thm-primary,
.btn-thm-primary:active {
    background-color: var(--sacai-blue);
    border-color: var(--sacai-blue);
    color: #ffffff;
}
.btn-thm-primary:hover,
.btn-thm-primary:focus {
    background-color: var(--sacai-navy);
    border-color: var(--sacai-navy);
    color: #ffffff;
}
.txt-thm-primary {
    color: var(--sacai-blue);
}

/* Secondary action, beside a primary one (e.g. "Save and Continue Later"
   next to "Submit Registration"). The template's own .btn-thm-secondary is a
   dark grey that reads as disabled next to SACAI blue, so it is restyled as a
   blue outline: clearly a button, clearly not the main action. Same size and
   shape as .btn-thm-primary. */
.btn-thm-secondary,
.btn-thm-secondary:active {
    background-color: #ffffff;
    border: 1.5px solid var(--sacai-blue);
    color: var(--sacai-blue);
}
.btn-thm-secondary:hover,
.btn-thm-secondary:focus {
    background-color: #EAF0FB;
    border-color: var(--sacai-navy);
    color: var(--sacai-navy);
}

/* Avatar dropdown (top-right) */
.user_setting .dropdown-menu .dropdown-item.active,
.user_setting .dropdown-menu .dropdown-item.active span,
.user_setting .dropdown-menu .dropdown-item:hover,
.user_setting .dropdown-menu .dropdown-item:hover span {
    background-color: var(--sacai-blue);
    color: #ffffff;
}

/* ============================================================================
 * 2. Left sidebar — stays a light panel; only the pill is restyled
 * ==========================================================================*/

.dashboard_sidebar_list .sidebar_list_item a:hover,
.dashboard_sidebar_list .sidebar_list_item a:active,
.dashboard_sidebar_list .sidebar_list_item a:focus,
.dashboard_sidebar_list .sidebar_list_item a.-is-active,
.dashboard_sidebar_list .submenu .submenu-item a.-is-active {
    background-color: var(--sacai-blue);
    color: #ffffff;
}

/* Green marker on the ACTIVE item only — not on hover — mirroring the green
   accent bar on the admin sidebar's active item. */
.dashboard_sidebar_list .sidebar_list_item a.-is-active,
.dashboard_sidebar_list .submenu .submenu-item a.-is-active {
    box-shadow: inset 3px 0 0 0 var(--sacai-green);
}

/* ============================================================================
 * 3. Dashboard header — corporate blue (desktop + mobile bars)
 * ==========================================================================*/

header.dashboard_header {
    background: linear-gradient(90deg,
                var(--sacai-blue) 0%,
                var(--sacai-navy) 100%) !important;
    box-shadow: 0 2px 10px rgba(23, 36, 90, 0.15);
}
/* Soften the hairline rule the template draws under the nav row */
header.dashboard_header .menu_bdrt1 {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Mobile header bar */
.mobilie_header_nav .mobile-menu .header,
.mobilie_header_nav .mobile_menu_bar {
    background: linear-gradient(90deg,
                var(--sacai-blue) 0%,
                var(--sacai-navy) 100%) !important;
}

/* Sidebar-toggle + mobile burger. The stock dark-nav-icon.svg / mobile-dark-nav-
   icon.svg have an OPAQUE background, so no CSS filter can recolour them for the
   blue header (brightness(0)+invert(1) just yields a white square). They're
   replaced in the markup with a Font Awesome burger, styled white here.
   Font Awesome is already loaded and in use in this header (fa-id-card, fa-qrcode). */
.dashboard_sidebar_toggle_icon,
.dashboard_sidebar_toggle_icon i,
.mobilie_header_nav .mobile_menu_bar .menubar,
.mobilie_header_nav .mobile_menu_bar .menubar i {
    color: #ffffff !important;
    font-size: 22px;
    line-height: 1;
}
.dashboard_sidebar_toggle_icon:hover i,
.mobilie_header_nav .mobile_menu_bar .menubar:hover i {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Header action buttons now sit ON the blue, so their inline background colours
   are overridden here (hence !important — an inline style would otherwise win).
   Access Card becomes a frosted-white button; Scanner keeps a distinct action
   colour, promoted to the SACAI brand green. */
.header-action-btn[data-bs-target="#downloadAccessCardModal"],
.mobile-action-icon[data-bs-target="#downloadAccessCardModal"] {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff !important;
}
.header-action-btn[data-bs-target="#downloadAccessCardModal"]:hover,
.mobile-action-icon[data-bs-target="#downloadAccessCardModal"]:hover {
    background: #ffffff !important;
    color: var(--sacai-blue) !important;
}
.header-action-btn[href*="/scan"],
.mobile-action-icon[href*="/scan"] {
    background: var(--sacai-green) !important;
    color: #ffffff !important;
}

/* ============================================================================
 * 3b. Mobile slide-out menu (mmenu) — the "Menu" title bar
 * ----------------------------------------------------------------------------
 * The template tints this bar rgba(235, 103, 83, 0.07): a 7% coral over white,
 * which composites to the #FEF4F3 that devtools reports (there is no such hex
 * in the source — don't go looking for it). It's set in TWO places,
 * style.css:8637 (.mm-navbar) and style.css:9042 (.mm-panel_has-navbar
 * .mm-navbar) — the latter is more specific, so both are matched below.
 * The title colour comes from --headings-color, so it needs its own override.
 * ==========================================================================*/

.mm-navbar,
.mm-panel_has-navbar .mm-navbar {
    background-color: var(--sacai-blue) !important;
    border-bottom: 3px solid var(--sacai-green) !important;  /* brand green accent */
    color: #ffffff !important;
}
.mm-navbar__title,
.mm-navbar__title > span,
.mm-navbar a {
    color: #ffffff !important;
}
/* mmenu draws its back/forward chevrons as CSS borders on ::before/::after */
.mm-navbar .mm-btn::before,
.mm-navbar .mm-btn::after {
    border-color: #ffffff !important;
}

/* ============================================================================
 * 4. Login page
 * (body carries .sacai-login-page, so none of this leaks into the dashboard)
 * ==========================================================================*/

.sacai-login-page {
    background: linear-gradient(160deg,
                var(--sacai-blue) 0%,
                var(--sacai-blue-mid) 55%,
                var(--sacai-navy) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}
.sacai-login-page .our-compare {
    background: transparent !important;
}

/* The card. The stock p20/p50 + p30-sm padding classes are dropped from the
   markup and the padding is set here instead, so it's a single known value that
   the blue band can cancel with a negative margin (below). The values match
   ud-custom-spacing.css: 20px desktop, 30px at ≤767.98px. */
.sacai-login-card {
    overflow: hidden;                 /* clips the band to the card's 12px radius */
    border: 0;
    padding: 20px;
    box-shadow: 0 18px 45px rgba(23, 36, 90, 0.35) !important;
}
@media (max-width: 767.98px) {
    .sacai-login-card {
        padding: 30px;
    }
}

/* Blue band. The negative margin cancels the card's padding so the band bleeds
   to the card's edges — which means the band can live anywhere inside the card
   without the markup having to be re-nested. Keep these margins in step with the
   card padding above. */
.sacai-login-card .sacai-login-header {
    margin: -20px -20px 20px -20px;
    background: linear-gradient(135deg,
                var(--sacai-blue) 0%,
                var(--sacai-navy) 100%);
    border-bottom: 3px solid var(--sacai-green);   /* brand green accent rule */
    padding: 1.75rem 1.5rem;
    text-align: center;
}
@media (max-width: 767.98px) {
    .sacai-login-card .sacai-login-header {
        margin: -30px -30px 25px -30px;
    }
}
.sacai-login-card .sacai-login-brand {
    display: inline-block;
    line-height: 0;
}
.sacai-login-card .sacai-login-header img {
    height: 78px;
    max-width: 100%;
}

.sacai-login-card h3 {
    color: var(--sacai-navy);
}
.sacai-login-card .form-control:focus {
    border-color: var(--sacai-blue);
    box-shadow: 0 0 0 0.15rem rgba(46, 81, 163, 0.18);
}
.sacai-login-card a:not(.btn) {
    color: var(--sacai-blue);
}
.sacai-login-card a:not(.btn):hover,
.sacai-login-card a:not(.btn):focus {
    color: var(--sacai-navy);
}

/* "Forgot Password?" link, right-aligned under the password field. Colour is
   inherited from the .sacai-login-card a rules above; this only handles the
   icon alignment and the hover underline. The underline is a transparent
   bottom border rather than text-decoration so it doesn't sit under the icon
   and doesn't shift the text when it appears. Base `a` in style.css already
   transitions `all`, so the border-color fade comes for free. */
.sacai-login-card .sacai-forgot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.sacai-login-card .sacai-forgot-link:hover,
.sacai-login-card .sacai-forgot-link:focus {
    border-bottom-color: var(--sacai-navy);
}
.sacai-login-card .sacai-forgot-link i {
    font-size: 15px;
    line-height: 1;
}