/* ================================================================
   J.I.T TAX CLIENT PORTAL
   Light + Dark Theme
   ================================================================ */


/* ================================================================
   BRAND + LIGHT THEME
   ================================================================ */

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --jit-navy: #0d1730;
    --jit-navy-2: #111d3b;
    --jit-teal: #20c7b5;
    --jit-teal-dark: #15a897;
    --jit-yellow: #ffc33d;
    --jit-orange: #ff8a3d;
    --jit-red: #f25555;
    --jit-blue: #2775e8;
    --jit-page: #f5f7fb;
    --jit-surface: #ffffff;
    --jit-surface-2: #fbfcfe;
    --jit-surface-3: #fafbfd;
    --jit-text: #101828;
    --jit-heading: #0d1730;
    --jit-muted: #667085;
    --jit-border: #e5e9f0;
    --jit-border-strong: #d5dae3;
    --jit-input-bg: #fbfcfe;
    --jit-input-text: #101828;
    --jit-input-placeholder: #98a2b3;
    --jit-shadow: 0 16px 48px rgba(13, 23, 48, .07);
    --jit-shadow-large: 0 20px 55px rgba(13, 23, 48, .10);
    --jit-shadow-small: 0 9px 28px rgba(13, 23, 48, .06);
    --jit-form-side: #f5f7fb;
    --jit-drop-zone: #fafbfd;
    --jit-hover: rgba(13, 23, 48, .025);
    --jit-navbar: #0d1730;
    --jit-footer: #0d1730;
    --jit-avatar: #0d1730;
    --jit-selected-icon: rgba(39, 117, 232, .09);
    --jit-selected-icon-text: #2775e8;
    --jit-success-text: #086f64;
    --jit-danger-bg: rgba(242, 85, 85, .08);
    --jit-danger-border: rgba(242, 85, 85, .23);
    --jit-danger-text: #b42318;
    /* Bootstrap alignment */

    --bs-body-bg: var(--jit-page);
    --bs-body-color: var(--jit-text);
    --bs-border-color: var(--jit-border);
    --bs-secondary-color: var(--jit-muted);
    --bs-tertiary-bg: var(--jit-surface-2);
}


/* ================================================================
   DARK THEME
   ================================================================ */

[data-bs-theme="dark"] {
    color-scheme: dark;
    --jit-navy: #0b1327;
    --jit-navy-2: #121f3d;
    --jit-teal: #2bd8c6;
    --jit-teal-dark: #42d9c9;
    --jit-yellow: #ffc94f;
    --jit-orange: #ff9b59;
    --jit-red: #ff7474;
    --jit-blue: #5c98f4;
    --jit-page: #0d111b;
    --jit-surface: #151b27;
    --jit-surface-2: #1a2130;
    --jit-surface-3: #111722;
    --jit-text: #edf2f7;
    --jit-heading: #f8fafc;
    --jit-muted: #9ba8ba;
    --jit-border: #2a3445;
    --jit-border-strong: #39465b;
    --jit-input-bg: #111722;
    --jit-input-text: #edf2f7;
    --jit-input-placeholder: #7f8da0;
    --jit-shadow: 0 16px 48px rgba(0, 0, 0, .30);
    --jit-shadow-large: 0 20px 55px rgba(0, 0, 0, .36);
    --jit-shadow-small: 0 9px 28px rgba(0, 0, 0, .25);
    --jit-form-side: #0f1520;
    --jit-drop-zone: #111722;
    --jit-hover: rgba(255, 255, 255, .025);
    --jit-navbar: #080e1d;
    --jit-footer: #080e1d;
    --jit-avatar: #222d44;
    --jit-selected-icon: rgba(92, 152, 244, .15);
    --jit-selected-icon-text: #77aaff;
    --jit-success-text: #66dfcf;
    --jit-danger-bg: rgba(255, 116, 116, .10);
    --jit-danger-border: rgba(255, 116, 116, .30);
    --jit-danger-text: #ff9696;
    /* Bootstrap alignment */

    --bs-body-bg: var(--jit-page);
    --bs-body-color: var(--jit-text);
    --bs-border-color: var(--jit-border);
    --bs-secondary-color: var(--jit-muted);
    --bs-tertiary-bg: var(--jit-surface-2);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: var(--jit-surface-2);
}


/* ================================================================
   BASE
   ================================================================ */

html,
body {
    min-height: 100%;
    overflow-x: hidden;
}


html {
    background: var(--jit-page);
}


body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--jit-text);
    background: var(--jit-page);
    transition: background-color .2s ease, color .2s ease;
}


main {
    color: var(--jit-text);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--jit-heading);
}


/* ================================================================
   NAVBAR
   ================================================================ */

.jit-navbar {
    background: var(--jit-navbar);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


.jit-logo {
    max-height: 52px;
    max-width: 170px;
    object-fit: contain;
    display: block;
}


.jit-fallback-logo {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: white;
}


.jit-slogan {
    color: #ffffff;
    font-size: .74rem;
    line-height: 1;
    margin-top: .15rem;
    white-space: nowrap;
    opacity: .92;
}


.secure-top {
    color: rgba(255, 255, 255, .75);
    font-size: .82rem;
}


    .secure-top i {
        color: var(--jit-teal);
    }


/* ================================================================
   THEME TOGGLE
   ================================================================ */

.theme-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}


    .theme-toggle:hover {
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .25);
        transform: translateY(-1px);
    }


    .theme-toggle:focus-visible {
        outline: 3px solid rgba(32, 199, 181, .25);
        outline-offset: 2px;
    }


    .theme-toggle i {
        font-size: 1.05rem;
    }


[data-bs-theme="dark"] .theme-toggle {
    color: var(--jit-yellow);
}


/* ================================================================
   LOGIN / OTP SHELL
   ================================================================ */

.portal-shell {
    min-height: calc(100vh - 79px);
}


/* ================================================================
   HERO
   ================================================================ */

.hero-side {
    background: radial-gradient( circle at 88% 12%, rgba(39, 117, 232, .34) 0, transparent 27% ), radial-gradient( circle at 15% 82%, rgba(32, 199, 181, .20) 0, transparent 27% ), var(--jit-navy);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}


    .hero-side::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        border: 54px solid rgba(255, 195, 61, .08);
        right: -110px;
        bottom: -95px;
    }


    .hero-side::after {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        border-radius: 30px;
        transform: rotate(24deg);
        background: rgba(242, 85, 85, .08);
        left: -42px;
        top: 125px;
    }


.hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
}


.hero-side h1,
.hero-side h2,
.hero-side h3,
.hero-side h4,
.hero-side h5,
.hero-side h6 {
    color: #ffffff;
}


/* ================================================================
   JIT KICKER
   ================================================================ */

.jit-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--jit-teal);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}


    .jit-kicker::before {
        content: "";
        width: 27px;
        height: 3px;
        border-radius: 99px;
        background: var(--jit-yellow);
    }


/* ================================================================
   HERO TYPOGRAPHY
   ================================================================ */

.hero-title {
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .98;
    font-size: clamp(3rem, 5.4vw, 5.4rem);
    margin: 1rem 0 1.25rem;
}


    .hero-title .accent {
        color: var(--jit-yellow);
    }


.hero-lead {
    color: rgba(255, 255, 255, .72);
    max-width: 560px;
    font-size: 1.08rem;
    line-height: 1.75;
}


/* ================================================================
   LOGIN FEATURES
   ================================================================ */

.feature-row {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    margin-top: 1.25rem;
}


.feature-icon {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color: var(--jit-navy);
    font-size: 1.15rem;
    background: var(--jit-teal);
}


.feature-row:nth-of-type(2) .feature-icon {
    background: var(--jit-yellow);
}


.feature-row:nth-of-type(3) .feature-icon {
    background: var(--jit-orange);
}


.feature-row strong {
    display: block;
    font-size: .95rem;
    color: #ffffff;
}


.feature-row span {
    color: rgba(255, 255, 255, .60);
    font-size: .82rem;
}


/* ================================================================
   LOGIN FORM SIDE
   ================================================================ */

.form-side {
    background: radial-gradient( circle at 80% 20%, rgba(32, 199, 181, .08), transparent 35% ), var(--jit-form-side);
    transition: background-color .2s ease;
}


.form-wrap {
    width: min(100%, 540px);
}


/* ================================================================
   PORTAL CARD
   ================================================================ */

.portal-card {
    background: var(--jit-surface);
    color: var(--jit-text);
    border: 1px solid var(--jit-border);
    border-radius: 1.35rem;
    box-shadow: var(--jit-shadow-large);
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}


.portal-card-top {
    height: 6px;
    background: linear-gradient( 90deg, var(--jit-teal) 0 30%, var(--jit-yellow) 30% 55%, var(--jit-orange) 55% 78%, var(--jit-blue) 78% 100% );
}


.portal-card-body {
    padding: 2rem;
}


.card-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(32, 199, 181, .12);
    color: var(--jit-teal-dark);
    font-size: 1.45rem;
    margin-bottom: 1.2rem;
}


.portal-card h2 {
    font-weight: 800;
    letter-spacing: -.025em;
    font-size: 1.8rem;
    color: var(--jit-heading);
}


.muted {
    color: var(--jit-muted) !important;
}


/* ================================================================
   FORMS
   ================================================================ */

.form-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--jit-text);
}


.jit-input-group {
    border: 1px solid var(--jit-border);
    background: var(--jit-input-bg);
    border-radius: .9rem;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}


    .jit-input-group:focus-within {
        border-color: var(--jit-teal);
        box-shadow: 0 0 0 .22rem rgba(32, 199, 181, .12);
        background: var(--jit-surface);
    }


    .jit-input-group .input-group-text {
        border: 0;
        background: transparent;
        color: var(--jit-input-placeholder);
        padding-left: 1rem;
    }


    .jit-input-group .form-control {
        border: 0;
        box-shadow: none;
        background: transparent;
        color: var(--jit-input-text);
        min-height: 56px;
        padding-left: .25rem;
    }


        .jit-input-group .form-control::placeholder {
            color: var(--jit-input-placeholder);
            opacity: 1;
        }


/* ================================================================
   STANDARD BOOTSTRAP FORM CONTROLS
   ================================================================ */

.form-control,
.form-select {
    background-color: var(--jit-input-bg);
    color: var(--jit-input-text);
    border-color: var(--jit-border);
}


    .form-control:focus,
    .form-select:focus {
        color: var(--jit-input-text);
        background-color: var(--jit-input-bg);
        border-color: var(--jit-teal);
        box-shadow: 0 0 0 .2rem rgba(32, 199, 181, .12);
    }


    .form-control::placeholder {
        color: var(--jit-input-placeholder);
    }


.input-group-text {
    color: var(--jit-muted);
    background: var(--jit-surface-2);
    border-color: var(--jit-border);
}


/* ================================================================
   BUTTONS
   ================================================================ */

.btn-jit {
    border: 0;
    border-radius: .9rem;
    min-height: 56px;
    color: var(--jit-navy);
    font-weight: 800;
    background: var(--jit-yellow);
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}


    .btn-jit:hover {
        background: #ffd05d;
        color: var(--jit-navy);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(255, 195, 61, .24);
    }


.btn-jit-dark {
    background: var(--jit-navy);
    color: #ffffff;
}


    .btn-jit-dark:hover {
        background: var(--jit-navy-2);
        color: #ffffff;
    }


[data-bs-theme="dark"] .btn-jit-dark {
    background: var(--jit-yellow);
    color: #0d1730;
}


    [data-bs-theme="dark"] .btn-jit-dark:hover {
        background: #ffd568;
        color: #0d1730;
    }


/* ================================================================
   PRIVACY
   ================================================================ */

.privacy-strip {
    border-top: 1px solid var(--jit-border);
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    color: var(--jit-muted);
    font-size: .76rem;
    display: flex;
    gap: .55rem;
}


    .privacy-strip i {
        color: var(--jit-teal-dark);
    }


/* ================================================================
   STAGES
   ================================================================ */

.stage {
    display: none;
}


    .stage.active {
        display: block;
    }


/* ================================================================
   OTP
   ================================================================ */

.otp-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .45rem;
    width: 100%;
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}


.otp-box {
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 0;
    border: 1px solid var(--jit-border);
    border-radius: .75rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    outline: none;
    color: var(--jit-input-text);
    background: var(--jit-input-bg);
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}


    .otp-box:focus {
        border-color: var(--jit-teal);
        box-shadow: 0 0 0 .22rem rgba(32, 199, 181, .12);
        background: var(--jit-surface);
    }


/* ================================================================
   DEMO HINT
   ================================================================ */

.demo-hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    background: rgba(255, 195, 61, .16);
    color: #8a6100;
    font-size: .74rem;
    font-weight: 700;
    padding: .45rem .75rem;
}


[data-bs-theme="dark"] .demo-hint {
    color: var(--jit-yellow);
    background: rgba(255, 201, 79, .10);
}


/* ================================================================
   DASHBOARD
   ================================================================ */

.dashboard-wrap {
    max-width: 920px;
    margin: 0 auto;
}


.dash-header h1 {
    font-weight: 800;
    color: var(--jit-heading);
    letter-spacing: -.045em;
    font-size: clamp(2.25rem, 4vw, 4rem);
}


/* ================================================================
   CLIENT PILL
   ================================================================ */

.client-pill {
    background: var(--jit-surface);
    color: var(--jit-text);
    border: 1px solid var(--jit-border);
    border-radius: 1rem;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    box-shadow: var(--jit-shadow-small);
    transition: background-color .2s ease, border-color .2s ease;
}


.client-avatar {
    width: 42px;
    height: 42px;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    background: var(--jit-avatar);
    color: var(--jit-yellow);
    font-weight: 800;
}


.client-pill small {
    color: var(--jit-muted);
}


.client-pill .btn {
    color: var(--jit-muted);
}


    .client-pill .btn:hover {
        color: var(--jit-text);
    }


/* ================================================================
   UPLOAD PANEL
   ================================================================ */

.upload-panel {
    background: var(--jit-surface);
    color: var(--jit-text);
    border: 1px solid var(--jit-border);
    border-radius: 1.35rem;
    box-shadow: var(--jit-shadow);
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease;
}


.upload-panel-header {
    padding: 1.5rem 1.5rem 1rem;
}


.upload-panel-body {
    padding: 0 1.5rem 1.5rem;
}


/* ================================================================
   SECURE BADGE
   ================================================================ */

.secure-badge {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .45rem .72rem;
    border-radius: 999px;
    color: #087a6d;
    background: rgba(32, 199, 181, .12);
    font-size: .74rem;
    font-weight: 800;
}


[data-bs-theme="dark"] .secure-badge {
    color: #7aebdd;
    background: rgba(43, 216, 198, .12);
}


/* ================================================================
   UPLOAD CHOICES
   ================================================================ */

.upload-choice {
    width: 100%;
    text-align: left;
    border: 1px solid var(--jit-border);
    background: var(--jit-surface);
    color: var(--jit-text);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}


    .upload-choice:hover {
        border-color: var(--jit-teal);
        background: var(--jit-surface-2);
        transform: translateY(-1px);
    }


    .upload-choice .text-secondary {
        color: var(--jit-muted) !important;
    }


.choice-icon {
    width: 47px;
    height: 47px;
    border-radius: .85rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--jit-navy);
}


.choice-camera {
    background: rgba(255, 195, 61, .25);
}


.choice-files {
    background: rgba(32, 199, 181, .18);
}


.upload-choice small {
    color: var(--jit-muted);
}


/* ================================================================
   DROP ZONE
   ================================================================ */

.drop-zone {
    border: 2px dashed var(--jit-border-strong);
    background: var(--jit-drop-zone);
    color: var(--jit-text);
    min-height: 185px;
    border-radius: 1.15rem;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.4rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}


    .drop-zone:hover,
    .drop-zone.dragging,
    .drop-zone.drag-over {
        border-color: var(--jit-teal);
        background: rgba(32, 199, 181, .055);
    }


[data-bs-theme="dark"] .drop-zone:hover,
[data-bs-theme="dark"] .drop-zone.dragging,
[data-bs-theme="dark"] .drop-zone.drag-over {
    background: rgba(43, 216, 198, .07);
}


.drop-circle {
    width: 58px;
    height: 58px;
    margin: 0 auto .8rem;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--jit-navy);
    color: var(--jit-yellow);
    font-size: 1.35rem;
}


/* ================================================================
   SELECTED FILES
   ================================================================ */

.selected-file {
    border: 1px solid var(--jit-border);
    border-radius: .85rem;
    padding: .75rem;
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .55rem;
    background: var(--jit-surface);
}


.selected-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--jit-border);
}


    .selected-file-row:last-child {
        border-bottom: 0;
    }


.selected-file-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--jit-selected-icon);
    color: var(--jit-selected-icon-text);
    font-size: 1.25rem;
}


.selected-file small {
    color: var(--jit-muted);
}


.selected-file-original {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jit-muted) !important;
}


.file-rename-input {
    font-weight: 600;
    color: var(--jit-input-text);
    background: var(--jit-input-bg);
    border-color: var(--jit-border);
}


    .file-rename-input:focus {
        color: var(--jit-input-text);
        background: var(--jit-input-bg);
        border-color: var(--jit-teal);
        box-shadow: 0 0 0 .18rem rgba(32, 199, 181, .12);
    }


.selected-file-row .input-group-text {
    background: var(--jit-surface-2);
    color: var(--jit-muted);
    border-color: var(--jit-border);
}


/* ================================================================
   DOCUMENT SECTION
   ================================================================ */

.doc-section {
    background: var(--jit-surface);
    color: var(--jit-text);
    border: 1px solid var(--jit-border);
    border-radius: 1.35rem;
    box-shadow: var(--jit-shadow);
    transition: background-color .2s ease, border-color .2s ease;
}


.doc-row {
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: .9rem 0;
    border-top: 1px solid var(--jit-border);
}


.doc-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    background: rgba(32, 199, 181, .11);
    color: var(--jit-teal-dark);
}


.status-ok {
    color: var(--jit-success-text);
    font-weight: 800;
    font-size: .77rem;
}


.doc-date {
    font-size: .72rem;
    color: var(--jit-muted);
}


.empty-doc-icon {
    background: rgba(32, 199, 181, .10) !important;
    color: var(--jit-teal-dark) !important;
}


/* ================================================================
   BADGES
   ================================================================ */

.badge.text-bg-light,
.text-bg-light {
    background-color: var(--jit-surface-2) !important;
    color: var(--jit-text) !important;
}


.badge.border {
    border-color: var(--jit-border) !important;
}


/* ================================================================
   ALERTS
   ================================================================ */

.alert {
    border-radius: .9rem;
}


.alert-success {
    border-color: rgba(32, 199, 181, .28);
    background: rgba(32, 199, 181, .10);
    color: var(--jit-success-text);
}


.alert-danger {
    border-color: var(--jit-danger-border);
    background: var(--jit-danger-bg);
    color: var(--jit-danger-text);
}


[data-bs-theme="dark"] .alert-success {
    background: rgba(43, 216, 198, .10);
    border-color: rgba(43, 216, 198, .25);
}


/* ================================================================
   VALIDATION
   ================================================================ */

.validation-summary-errors,
.field-validation-error {
    color: var(--jit-red);
}


.text-danger {
    --bs-text-opacity: 1;
    color: var(--jit-red) !important;
}


/* ================================================================
   LINKS
   ================================================================ */

a {
    transition: color .15s ease;
}


.btn-link {
    color: var(--jit-blue);
}


[data-bs-theme="dark"] .btn-link {
    color: #7ba9ff;
}


/* ================================================================
   TRUST FOOTER AREA
   ================================================================ */

.trust-footer {
    color: var(--jit-muted);
    font-size: .75rem;
}


    .trust-footer i {
        color: var(--jit-teal-dark);
    }


/* ================================================================
   FOOTER
   ================================================================ */

.portal-footer {
    background: var(--jit-footer);
    color: rgba(255, 255, 255, .58);
    font-size: .75rem;
    padding: 1rem 0;
}


/* ================================================================
   BOOTSTRAP UTILITY FIXES FOR DARK MODE
   ================================================================ */

[data-bs-theme="dark"] .bg-white {
    background-color: var(--jit-surface) !important;
}


[data-bs-theme="dark"] .bg-light {
    background-color: var(--jit-surface-2) !important;
}


[data-bs-theme="dark"] .text-dark {
    color: var(--jit-text) !important;
}


[data-bs-theme="dark"] .text-secondary {
    color: var(--jit-muted) !important;
}


[data-bs-theme="dark"] .border {
    border-color: var(--jit-border) !important;
}


[data-bs-theme="dark"] .shadow-sm {
    box-shadow: var(--jit-shadow-small) !important;
}


/* ================================================================
   AUTOFILL FIX
   ================================================================ */

[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--jit-input-text);
    -webkit-box-shadow: 0 0 0 1000px var(--jit-input-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}


/* ================================================================
   SELECTION
   ================================================================ */

::selection {
    background: rgba(32, 199, 181, .28);
    color: var(--jit-text);
}


/* ================================================================
   SCROLLBAR
   ================================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--jit-border-strong) var(--jit-page);
}


::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


::-webkit-scrollbar-track {
    background: var(--jit-page);
}


::-webkit-scrollbar-thumb {
    background: var(--jit-border-strong);
    border-radius: 20px;
    border: 2px solid var(--jit-page);
}


    ::-webkit-scrollbar-thumb:hover {
        background: var(--jit-muted);
    }


/* ================================================================
   HELPERS
   ================================================================ */

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


/* ================================================================
   TABLE SUPPORT
   ================================================================ */

.table {
    --bs-table-color: var(--jit-text);
    --bs-table-bg: var(--jit-surface);
    --bs-table-border-color: var(--jit-border);
    --bs-table-striped-bg: var(--jit-surface-2);
    --bs-table-hover-bg: var(--jit-hover);
    color: var(--jit-text);
}


.table-light {
    --bs-table-bg: var(--jit-surface-2);
    --bs-table-color: var(--jit-text);
    --bs-table-border-color: var(--jit-border);
}


/* ================================================================
   MODAL SUPPORT
   ================================================================ */

.modal-content {
    background: var(--jit-surface);
    color: var(--jit-text);
    border-color: var(--jit-border);
}


.modal-header,
.modal-footer {
    border-color: var(--jit-border);
}


/* ================================================================
   CARDS
   ================================================================ */

.card {
    background: var(--jit-surface);
    color: var(--jit-text);
    border-color: var(--jit-border);
}


.card-header,
.card-footer {
    background: var(--jit-surface);
    border-color: var(--jit-border);
}


/* ================================================================
   RESPONSIVE - TABLET
   ================================================================ */

@media (max-width: 991.98px) {

    .portal-shell {
        min-height: auto;
    }


    .hero-side {
        min-height: auto;
    }


    .hero-content {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }


    .form-side {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}


/* ================================================================
   RESPONSIVE - PHONE
   ================================================================ */

@media (max-width: 575.98px) {

    .jit-logo {
        max-height: 42px;
        max-width: 140px;
    }


    .secure-top span {
        display: none;
    }


    .hero-title {
        font-size: 3.05rem;
    }


    .portal-card-body {
        padding: 1.35rem;
    }


    .otp-boxes {
        gap: .28rem;
        max-width: 100%;
    }


    .otp-box {
        height: 48px;
        border-radius: .62rem;
        font-size: 1.05rem;
    }


    .upload-panel-header,
    .upload-panel-body,
    .doc-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }


    .status-ok {
        white-space: nowrap;
    }


    .doc-row {
        gap: .55rem;
    }


    .selected-file-row {
        gap: 9px;
    }


    .selected-file-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }


    .theme-toggle {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
}


/* ================================================================
   RESPONSIVE - VERY SMALL PHONE
   ================================================================ */

@media (max-width: 380px) {

    .portal-card-body {
        padding: 1.1rem;
    }


    .otp-boxes {
        gap: .2rem;
    }


    .otp-box {
        height: 44px;
        border-radius: .55rem;
        font-size: 1rem;
    }
}