/*
 * JSC Complaints & Petitions — Admin Login v38 visual override
 * 2026-09-17
 *
 * Purpose:
 * - Apply the approved JSC staff-portal login presentation without changing HESK auth logic.
 * - Beat legacy/global CSS by loading last, using a login-only namespace and deliberate specificity.
 * - Keep username chevron DOWN while closed and UP only while the dropdown is open.
 * - Keep password text adjacent to the lock icon and contained inside the field.
 */

html.jsc-login-html body.jsc-login-page {
    --jsc-v38-green: #006b4f;
    --jsc-v38-green-deep: #004c3a;
    --jsc-v38-green-dark: #003d31;
    --jsc-v38-gold: #d6aa38;
    --jsc-v38-cream: #f4f0e7;
    --jsc-v38-ink: #173d37;
    --jsc-v38-muted: #5e7477;
}

/* ===== LOGIN CANVAS ===== */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage {
    grid-template-columns: 56% 44% !important;
    background: var(--jsc-v38-cream) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before {
    width: 56% !important;
    background-image: url('../img/jsc-admin-login-bg.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::after {
    background: linear-gradient(90deg,
        rgba(0,52,40,.12) 0%,
        rgba(0,52,40,.12) 38%,
        rgba(0,52,40,.22) 49%,
        rgba(244,240,231,.53) 56%,
        rgba(244,240,231,.88) 66%,
        rgba(244,240,231,.98) 78%,
        rgba(244,240,231,1) 100%) !important;
}

/* Left visual panel: improve legibility while retaining the photograph. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero-overlay {
    background: linear-gradient(90deg,
        rgba(0,42,33,.78) 0%,
        rgba(0,52,40,.61) 52%,
        rgba(0,52,40,.18) 100%) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero-content {
    max-width: 680px !important;
    padding-bottom: 28px !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero h1 {
    text-shadow: 0 3px 18px rgba(0,0,0,.26) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero h1 strong {
    color: #f3c84f !important;
}

/* Added vision/quote ribbon from the approved mock-up. */
html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: min(590px, 92%) !important;
    margin-top: 30px !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(214,170,56,.55) !important;
    border-radius: 10px !important;
    background: linear-gradient(100deg, rgba(0,53,40,.67), rgba(0,73,55,.38)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote-mark {
    flex: 0 0 auto !important;
    color: #f2c64b !important;
    font-family: Georgia, serif !important;
    font-size: 44px !important;
    line-height: .8 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote em {
    display: block !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
}

/* ===== RIGHT LOGIN CARD ===== */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel {
    padding: 30px 36px 30px 16px !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
    width: min(550px, 100%) !important;
    max-width: 550px !important;
    padding: 29px 38px 24px !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg,
        rgba(255,255,255,.76) 0%,
        rgba(255,253,246,.69) 48%,
        rgba(229,240,233,.60) 100%) !important;
    box-shadow: 0 28px 68px rgba(0,47,36,.18), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand {
    margin-bottom: 18px !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand img {
    width: 225px !important;
    margin-bottom: 9px !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand h2 {
    color: #073e34 !important;
    font-size: 22px !important;
}

/* Slight opacity requested specifically for the STAFF PORTAL area. */
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-title {
    display: block !important;
    width: calc(100% - 8px) !important;
    margin: 14px auto 0 !important;
    padding: 10px 12px 4px !important;
    box-sizing: border-box !important;
    border-radius: 10px 10px 0 0 !important;
    background: rgba(0,107,79,.075) !important;
    color: var(--jsc-v38-green) !important;
    letter-spacing: .31em !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-portal-subtitle {
    display: block !important;
    width: calc(100% - 8px) !important;
    margin: 0 auto 10px !important;
    padding: 2px 12px 10px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 10px 10px !important;
    background: rgba(0,107,79,.075) !important;
    color: #536c72 !important;
}

/* ===== FORM CONTROLS ===== */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card label {
    color: #173d37 !important;
    font-weight: 700 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='text'],
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='password'],
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input {
    min-height: 55px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(0,107,79,.24) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(229,241,234,.50)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.83), 0 5px 18px rgba(0,55,43,.045) !important;
    color: #244740 !important;
}

/* Username: create a real left icon lane and reserve a right chevron lane. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 54px 0 49px !important;
    overflow: visible !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input .item {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input .item::before {
    position: absolute !important;
    left: 17px !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

/* Closed = DOWN chevron. This rule intentionally replaces Selectize's legacy triangle. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input::after {
    content: '' !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    right: 18px !important;
    width: 8px !important;
    height: 8px !important;
    margin: -6px 0 0 0 !important;
    border: 0 !important;
    border-right: 2px solid #66807c !important;
    border-bottom: 2px solid #66807c !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    transition: transform .16s ease, margin .16s ease, border-color .16s ease !important;
}

/* Open = UP chevron. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input.dropdown-active::after {
    margin-top: -2px !important;
    border-right-color: var(--jsc-v38-green) !important;
    border-bottom-color: var(--jsc-v38-green) !important;
    transform: rotate(225deg) !important;
}

/* Keep dropdown exactly below and the same width as username field. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-dropdown {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 5px !important;
    border: 1px solid rgba(214,170,56,.65) !important;
    border-radius: 9px !important;
    background: rgba(250,250,246,.97) !important;
    box-shadow: 0 17px 38px rgba(0,45,35,.18) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-dropdown .option {
    position: relative !important;
    min-height: 43px !important;
    padding: 11px 16px 11px 48px !important;
    line-height: 21px !important;
}

/* Simple user glyph inside every dropdown row; no overlap with username text. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-dropdown .option::before {
    content: '' !important;
    position: absolute !important;
    left: 17px !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M4.5 21c.8-4.1 3.1-6.2 7.5-6.2s6.7 2.1 7.5 6.2'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-dropdown .option.selected::before {
    filter: brightness(0) invert(1) !important;
}

/* Password: lock | password | eye. Password content starts immediately after lock lane. */
html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap::before {
    left: 17px !important;
    z-index: 3 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap::after {
    content: '' !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 48px !important;
    top: 11px !important;
    bottom: 11px !important;
    width: 1px !important;
    background: rgba(0,107,79,.14) !important;
    pointer-events: none !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap input#regInputPassword {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 55px !important;
    padding: 0 54px 0 61px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    letter-spacing: .06em !important;
    text-indent: 0 !important;
    overflow: hidden !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-password-toggle {
    top: 0 !important;
    right: 0 !important;
    width: 51px !important;
    height: 55px !important;
    z-index: 4 !important;
    border-radius: 0 9px 9px 0 !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-password-toggle:hover {
    background: rgba(214,170,56,.08) !important;
    color: var(--jsc-v38-green) !important;
}

/* Focus/hover polish. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='text']:hover,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='password']:hover,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input:hover {
    border-color: rgba(214,170,56,.88) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='text']:focus,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='password']:focus,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input.focus,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .selectize-control.single .selectize-input.dropdown-active {
    border-color: var(--jsc-v38-green) !important;
    box-shadow: 0 0 0 3px rgba(0,107,79,.105), 0 8px 22px rgba(0,67,51,.07) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-button {
    min-height: 48px !important;
    border-radius: 7px !important;
    background: linear-gradient(100deg, #006b4f, #007b5a) !important;
    box-shadow: 0 11px 25px rgba(0,89,65,.16) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-button:hover {
    background: linear-gradient(100deg, #005e46, #006e51) !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-authorized-note {
    margin-top: 11px !important;
    text-align: center !important;
    color: #6a7d80 !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) and (min-width: 901px) {
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage {
        grid-template-columns: 53% 47% !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before {
        width: 53% !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote {
        width: 94% !important;
    }
}

@media (max-width: 900px) {
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage {
        display: block !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before {
        width: 100% !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel {
        padding: 28px 18px 42px !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-hero-quote {
        display: none !important;
    }
}

@media (max-width: 560px) {
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
        padding: 25px 20px 23px !important;
        border-radius: 15px !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand img {
        width: 205px !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand h2 {
        font-size: 19px !important;
    }
    html.jsc-login-html body.jsc-login-page .jsc-admin-portal-title {
        letter-spacing: .23em !important;
    }
}

/* =====================================================================
   JSC v39 — deterministic username dropdown + runtime UI-control values
   2026-09-17
   ===================================================================== */
html.jsc-login-html body.jsc-login-page .jsc-ui-hidden {
    display: none !important;
}

/* Keep the photograph visible behind BOTH columns. This specifically removes
   the legacy white/right-side block while retaining a tunable soft tint. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage {
    height: auto !important;
    min-height: 680px !important;
    overflow: hidden !important;
    background: #063f34 !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-backdrop {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    background: url('../img/jsc-admin-login-bg.png') center center / cover no-repeat !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,
        rgba(0,49,38,.10) 0%,
        rgba(0,49,38,.12) 47%,
        rgba(244,240,231,.08) 60%,
        rgba(244,240,231,var(--jsc-ui-right-tint-opacity, .18)) 100%) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero-overlay {
    background: linear-gradient(90deg,
        rgba(0,42,33,var(--jsc-ui-hero-overlay-opacity, .72)) 0%,
        rgba(0,52,40,.56) 55%,
        rgba(0,52,40,.12) 100%) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel {
    background: rgba(246,242,234,var(--jsc-ui-panel-opacity, .08)) !important;
    backdrop-filter: blur(1.5px) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
    max-height: none !important;
    overflow: visible !important;
    background: linear-gradient(145deg,
        rgba(255,255,255,var(--jsc-ui-card-opacity, .84)) 0%,
        rgba(255,253,246,var(--jsc-ui-card-opacity, .84)) 50%,
        rgba(229,240,233,var(--jsc-ui-card-opacity, .84)) 100%) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-title,
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-subtitle {
    background: rgba(0,107,79,var(--jsc-ui-portal-strip-opacity, .08)) !important;
}

/* The v39 picker is not Selectize. It is intentionally anchored inside the
   username field wrapper so no library can position its menu beside the card. */
html.jsc-login-html body.jsc-login-page .jsc-user-picker {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 80 !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__trigger {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) 48px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 55px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9d8cc !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg,rgba(255,255,255,.72),rgba(229,241,234,.58)) !important;
    color: #29484f !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-align: left !important;
    font: inherit !important;
    box-sizing: border-box !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__trigger:hover {
    border-color: rgba(214,170,56,.88) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker.is-open .jsc-user-picker__trigger,
html.jsc-login-html body.jsc-login-page .jsc-user-picker__trigger:focus-visible {
    border-color: #006b4f !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(0,107,79,.105),0 8px 22px rgba(0,67,51,.07) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__icon {
    height: 33px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid rgba(0,107,79,.14) !important;
    color: #00765a !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__icon svg,
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option-icon svg {
    width: 21px !important;
    height: 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__value {
    display: block !important;
    min-width: 0 !important;
    padding: 0 15px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}
/* CLOSED = down chevron */
html.jsc-login-html body.jsc-login-page .jsc-user-picker__chevron {
    position: relative !important;
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    margin: -5px auto 0 !important;
    border-right: 2px solid #78968d !important;
    border-bottom: 2px solid #78968d !important;
    transform: rotate(45deg) !important;
    transition: transform .16s ease,margin .16s ease !important;
}
/* OPEN = up chevron */
html.jsc-login-html body.jsc-login-page .jsc-user-picker.is-open .jsc-user-picker__chevron {
    margin-top: 5px !important;
    transform: rotate(225deg) !important;
    border-color: #006b4f !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(214,170,56,.72) !important;
    border-radius: 9px !important;
    background: rgba(250,250,246,.985) !important;
    box-shadow: 0 17px 38px rgba(0,45,35,.20) !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__menu[hidden] {
    display: none !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: grid !important;
    grid-template-columns: 31px minmax(0,1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: #29484f !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option:hover,
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option:focus-visible {
    outline: 0 !important;
    background: #eef7f2 !important;
    color: #005f48 !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option.is-selected {
    background: #00785a !important;
    color: #fff !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option-icon {
    display: flex !important;
    align-items: center !important;
    color: currentColor !important;
}

/* Password lane remains deterministic: lock | password | eye. */
html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap input#regInputPassword {
    padding-left: 61px !important;
    padding-right: 57px !important;
    text-indent: 0 !important;
}

@media (max-width: 900px) {
    html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
        overflow: visible !important;
    }
}


/* v40 quick patch: searchable + scrollable username dropdown */
html.jsc-login-html body.jsc-login-page .jsc-user-picker__menu {
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__search-wrap {
    position: sticky !important; top: 0 !important; z-index: 2 !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px !important; background: #f7faf8 !important;
    border-bottom: 1px solid rgba(0,120,90,.14) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__search-icon {
    width: 25px !important; text-align: center !important; color: #00785a !important; font-size: 20px !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__search {
    width: 100% !important; height: 38px !important; margin: 0 !important; padding: 7px 11px !important;
    border: 1px solid #b8d9ce !important; border-radius: 7px !important; outline: 0 !important;
    background: #fff !important; color: #29484f !important; font: inherit !important; box-sizing: border-box !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__search:focus {
    border-color: #00785a !important; box-shadow: 0 0 0 3px rgba(0,120,90,.10) !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__options {
    max-height: 235px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable !important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__option[hidden] { display: none !important; }
html.jsc-login-html body.jsc-login-page .jsc-user-picker__empty {
    padding: 18px 16px !important; text-align: center !important; color: #71827d !important; font-size: 13px !important;
}


/* =====================================================================
   JSC v40.3 — single-source login photograph fix
   The v38/v39 cascade defined the same photograph twice: once on
   .jsc-admin-login-stage::before and again on .jsc-admin-login-backdrop.
   Keep ONLY the dedicated backdrop layer. This prevents the photograph
   from appearing as a second/offset image beneath the login panel/card.
   ===================================================================== */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

html.jsc-login-html body.jsc-login-page .jsc-admin-login-backdrop {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('../img/jsc-admin-login-bg.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* The right login region is a translucent treatment, never a second image. */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card {
    background-image: none !important;
}

/* =====================================================================
   JSC v40.4 — approved single-background + true glass-card login design
   2026-09-17
   - One photograph only across the login canvas
   - Right region is transparent/tint only, never another image
   - Card opacity controls the actual glass card, not an opaque white sheet
   - Runtime Login Designer variables control layout and brand values
   ===================================================================== */
html.jsc-login-html body.jsc-login-page {
    --jsc-v38-green: var(--jsc-ui-green, #006b4f);
    --jsc-v38-gold: var(--jsc-ui-gold, #d6aa38);
    --jsc-v38-cream: var(--jsc-ui-cream, #f4f0e7);
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage {
    display:grid!important;
    grid-template-columns:var(--jsc-ui-hero-width,64%) calc(100% - var(--jsc-ui-hero-width,64%))!important;
    position:relative!important;
    min-height:720px!important;
    background:#063f34!important;
    overflow:hidden!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before{content:none!important;display:none!important;background:none!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-backdrop{
    position:absolute!important;inset:0!important;z-index:0!important;display:block!important;
    background-image:var(--jsc-ui-bg-image,url('../img/jsc-admin-login-bg.png'))!important;
    background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::after{
    content:''!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
    background:linear-gradient(90deg,rgba(0,36,29,.18) 0%,rgba(0,36,29,.12) 55%,rgba(244,240,231,var(--jsc-ui-right-tint-opacity,.10)) 100%)!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel{position:relative!important;z-index:2!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero-overlay{
    background:linear-gradient(90deg,rgba(0,38,30,var(--jsc-ui-hero-overlay-opacity,.62)) 0%,rgba(0,45,35,.52) 68%,rgba(0,45,35,.10) 100%)!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel{
    background:rgba(244,240,231,var(--jsc-ui-panel-opacity,0))!important;
    background-image:none!important;
    padding:34px 32px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card{
    width:min(var(--jsc-ui-card-width,520px),100%)!important;max-width:var(--jsc-ui-card-width,520px)!important;
    padding:30px 34px 25px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:var(--jsc-ui-card-radius,18px)!important;
    background:rgba(18,35,31,var(--jsc-ui-card-opacity,.34))!important;
    background-image:none!important;
    box-shadow:0 26px 70px rgba(0,25,20,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
    backdrop-filter:blur(var(--jsc-ui-card-blur,16px)) saturate(115%)!important;
    -webkit-backdrop-filter:blur(var(--jsc-ui-card-blur,16px)) saturate(115%)!important;
    overflow:visible!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand img{
    display:block!important;width:min(var(--jsc-ui-logo-width,225px),82%)!important;max-height:105px!important;object-fit:contain!important;
    margin:0 auto 8px!important;filter:none!important;opacity:1!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-card-brand h2{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.34)!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-title,
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-subtitle{
    background:rgba(0,107,79,var(--jsc-ui-portal-strip-opacity,.72))!important;color:#fff!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-portal-title{color:#fff!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card label,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card .checkbox-custom-label,
html.jsc-login-html body.jsc-login-page .jsc-admin-authorized-note,
html.jsc-login-html body.jsc-login-page .jsc-admin-card-motto{color:rgba(255,255,255,.92)!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card a{color:#f2c64b!important}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__trigger,
html.jsc-login-html body.jsc-login-page .jsc-admin-password-wrap input#regInputPassword,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='text'],
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card input[type='password']{
    background:rgba(10,29,25,.34)!important;border-color:rgba(255,255,255,.70)!important;color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__value{color:#fff!important}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__icon{color:#fff!important;border-right-color:rgba(255,255,255,.22)!important}
html.jsc-login-html body.jsc-login-page .jsc-user-picker__chevron{border-color:rgba(255,255,255,.72)!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-password-icon,
html.jsc-login-html body.jsc-login-page .jsc-admin-password-toggle{color:#fff!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-button{
    background:linear-gradient(90deg,var(--jsc-ui-green,#006b4f),#008563)!important;color:#fff!important;
    border-color:rgba(255,255,255,.55)!important;box-shadow:0 12px 26px rgba(0,47,36,.22)!important;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero h1 strong{color:var(--jsc-ui-gold,#d6aa38)!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-eyebrow{color:#f1cb57!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-hero-copy:empty{display:none!important}

@media(max-width:900px){
 html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage{display:block!important;min-height:100vh!important}
 html.jsc-login-html body.jsc-login-page .jsc-admin-login-hero{min-height:42vh!important}
 html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel{padding:24px 16px 38px!important}
 html.jsc-login-html body.jsc-login-page .jsc-admin-login-card{width:min(560px,100%)!important}
}

/* JSC v40.5 — HI-RES SINGLE BACKGROUND FULL-COVER FIX */
html.jsc-login-html body.jsc-login-page .jsc-admin-login-backdrop {
 background-image:url('../img/jsc-admin-login-bg-hires.png')!important;
 background-size:cover!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
 image-rendering:auto!important;
 transform:translateZ(0);
 backface-visibility:hidden;
}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-stage::before{content:none!important;display:none!important;background:none!important;background-image:none!important}
html.jsc-login-html body.jsc-login-page .jsc-admin-login-panel,
html.jsc-login-html body.jsc-login-page .jsc-admin-login-card{background-image:none!important}