/* ============================================================================
 * SACAI corporate theme — Candidate Portal
 * ----------------------------------------------------------------------------
 * Ported from the Staff CRM's css/theme-sacai.css (same CreativeLayers
 * template), which shares ONE palette with the Admin and Documents CRMs. When
 * the palette changes, change it in all of them:
 *     staff.sacai.co.za/css/theme-sacai.css
 *     admin: assets/css/menu-theme-sacai.css + assets/css/login-theme-sacai.css
 *
 * Loaded LAST (after css/style.css and css/custom.css) so these rules win.
 *
 * Differences from the Staff copy: the staff-only Access Card / Scanner header
 * buttons are left out, and the candidate header's cart icon, cart badge and
 * mobile profile icon are restyled for the blue bar instead (section 3c).
 *
 * The menu logo (company_logo_menu) 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);
}
/* Staff changed this in its style.css (#D1D3D4 -> #333): white text on the
   stock light grey was barely readable. Done here so style.css stays stock. */
.btn-thm-secondary {
    background-color: #333;
}

/* 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. They're replaced in the markup with a Font Awesome burger,
   styled white here. */
.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;
}

/* ============================================================================
 * 3c. Candidate header widgets — cart + mobile profile icon
 * ----------------------------------------------------------------------------
 * style.css colours .header_right_widgets a with --headings-color (dark), which
 * disappears on the blue bar. The cart badge was the stock #254091 blue
 * (custom.css), so on the blue header it becomes brand green to stand out.
 * ==========================================================================*/

/* Direct children only — the avatar dropdown's Profile/Logout links also live
   inside .header_right_widgets and must stay dark on their white menu. */
header.dashboard_header .header_right_widgets > ul > li > a {
    color: #ffffff;
}
header.dashboard_header .header_right_widgets > ul > li > a:hover {
    color: rgba(255, 255, 255, 0.75);
}
.cart-count-badge {
    background: var(--sacai-green);
    color: #ffffff;
}
.mobilie_header_nav .mobile_menu_bar a .fa-user-circle {
    color: #ffffff;
}

/* ============================================================================
 * 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. It's set in TWO
 * places in style.css (.mm-navbar and the more specific .mm-panel_has-navbar
 * .mm-navbar), 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 / register / forgot-password pages
 * (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 + 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. 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);
}
/* A link styled as the filled primary button (e.g. "Email me a new code" on the
   pending-account screen) matches the rules above too, which made it blue text
   on a blue button. Keep its label white in every state. */
.sacai-login-card a.btn-thm-primary,
.sacai-login-card a.btn-thm-primary:hover,
.sacai-login-card a.btn-thm-primary:focus {
    color: #ffffff;
}

/* "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 (a transparent bottom border, so it
   doesn't sit under the icon or shift the text when it appears). */
.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;
}