/* =========================================================
   XPO86 EMPLOYER PORTAL
   CHEF'S TABLE VISUAL SYSTEM
   employer-styles.css
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {

    --bg-dark:
        #070707;

    --bg-deep:
        #0b0b0b;

    --bg-panel:
        #111111;

    --bg-panel-soft:
        #151515;

    --bg-panel-raised:
        #191919;

    --bg-input:
        #1c1c1c;

    --gold-accent:
        #d4af37;

    --gold-soft:
        #c7a43a;

    --gold-light:
        #ead17b;

    --gold-muted:
        rgba(212,175,55,.16);

    --red-accent:
        #c94b45;

    --red-soft:
        rgba(201,75,69,.10);

    --green-muted:
        #789582;

    --warning-muted:
        #ad9156;

    --text-light:
        #f2eee4;

    --text-primary:
        #e8e5dc;

    --text-secondary:
        #a19f99;

    --text-muted:
        #77756f;

    --text-faint:
        #575753;

    --border-dark:
        rgba(255,255,255,.08);

    --border-medium:
        rgba(255,255,255,.12);

    --border-gold:
        rgba(212,175,55,.30);

    --shadow-dark:
        rgba(0,0,0,.55);

    --radius-sm:
        6px;

    --radius-md:
        9px;

    --radius-lg:
        12px;
}


/* =========================================================
   2. RESET
   ========================================================= */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

    -webkit-tap-highlight-color:
        transparent;
}


html,
body {

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        var(--bg-dark);

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;
}


body {

    background:

        radial-gradient(
            circle at 45% -10%,
            rgba(212,175,55,.055),
            transparent 35%
        ),

        var(--bg-dark);
}


h1,
h2,
h3,
h4,
h5 {

    font-family:
        'Oswald',
        sans-serif;
}


button,
input,
select,
textarea {

    font-family:
        'Roboto',
        sans-serif;
}


.hidden {

    display:
        none !important;
}


/* =========================================================
   3. SCROLLBARS
   ========================================================= */

::-webkit-scrollbar {

    width:
        6px;

    height:
        6px;
}


::-webkit-scrollbar-track {

    background:
        transparent;
}


::-webkit-scrollbar-thumb {

    background:
        rgba(212,175,55,.28);

    border-radius:
        999px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        rgba(212,175,55,.48);
}


/* =========================================================
   4. LANDING GATEWAY
   ========================================================= */

#landing-view {

    display:
        none !important;
}


/* =========================================================
   5. MAIN APP
   ========================================================= */

#app-view {

    width:
        100vw;

    height:
        100dvh;

    display:
        flex;

    overflow:
        hidden;

    background:
        var(--bg-dark);
}


/* =========================================================
   6. SIDEBAR
   ========================================================= */

.sidebar {

    width:
        260px;

    min-width:
        260px;

    height:
        100dvh;

    position:
        relative;

    z-index:
        5000;

    display:
        flex;

    flex-direction:
        column;

    overflow-y:
        auto;

    background:

        linear-gradient(
            180deg,
            #0c0c0c 0%,
            #070707 100%
        );

    border-right:
        1px solid
        var(--border-dark);

    box-shadow:
        12px 0 35px
        rgba(0,0,0,.14);
}


.sidebar-header {

    min-height:
        76px;

    padding:
        18px 20px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    position:
        sticky;

    top:
        0;

    z-index:
        4;

    background:
        rgba(9,9,9,.97);

    border-bottom:
        1px solid
        var(--border-dark);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.sidebar-header h2 {

    margin:
        0;

    color:
        var(--gold-light);

    font-size:
        1.18rem;

    font-weight:
        900;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;
}


.close-menu-btn {

    display:
        none;

    border:
        0;

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        1.7rem;

    cursor:
        pointer;
}


.nav-group {

    padding:
        14px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}


.nav-label {

    padding:
        0 20px 8px;

    color:
        #5e5d59;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .64rem;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


.nav-item {

    min-height:
        42px;

    padding:
        0 19px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-left:
        2px solid
        transparent;

    color:
        #aaa8a1;

    cursor:
        pointer;

    font-size:
        .8rem;

    font-weight:
        500;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


.nav-item:hover {

    color:
        #e6e3da;

    background:
        rgba(255,255,255,.025);
}


.nav-item.active {

    color:
        var(--gold-light);

    background:
        rgba(212,175,55,.055);

    border-left-color:
        var(--gold-accent);
}


.nav-item.locked {

    color:
        #41413f;

    cursor:
        not-allowed;
}


.message-count {

    min-width:
        20px;

    height:
        20px;

    padding:
        0 6px;

    margin-left:
        auto;

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        999px;

    background:
        var(--gold-accent);

    color:
        #080808;

    font-size:
        .62rem;

    font-weight:
        900;
}


/* =========================================================
   7. MOBILE OVERLAY
   ========================================================= */

#mobile-overlay {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        4900;

    background:
        rgba(0,0,0,.68);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* =========================================================
   8. WORKSPACE
   ========================================================= */

.workspace {

    flex:
        1;

    min-width:
        0;

    height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        var(--bg-dark);
}


/* =========================================================
   9. TOPBAR
   ========================================================= */

.topbar {

    min-height:
        72px;

    padding:
        12px 22px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        rgba(11,11,11,.96);

    border-bottom:
        1px solid
        var(--border-dark);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.topbar-left {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.menu-toggle-btn {

    display:
        none;

    width:
        39px;

    height:
        39px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-sm);

    background:
        #121212;

    color:
        var(--gold-light);

    cursor:
        pointer;

    font-size:
        1.2rem;
}


.company-name {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        1.05rem;

    font-weight:
        700;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;
}


.plan-status {

    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        .64rem;

    font-weight:
        600;

    letter-spacing:
        .45px;

    text-transform:
        uppercase;
}


.universal-search-container {

    width:
        min(470px, 42vw);

    position:
        relative;
}


.search-icon {

    position:
        absolute;

    left:
        12px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #6d6c68;

    font-size:
        1rem;
}


.universal-search-input {

    width:
        100%;

    min-height:
        42px;

    padding:
        0 13px 0 38px;

    outline:
        none;

    border:
        1px solid
        var(--border-medium);

    border-radius:
        8px;

    background:
        #151515;

    color:
        var(--text-light);

    font-size:
        .84rem;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.universal-search-input::placeholder {

    color:
        #595955;
}


.universal-search-input:focus {

    border-color:
        rgba(212,175,55,.52);

    box-shadow:
        0 0 0 2px
        rgba(212,175,55,.055);
}


.topbar-actions {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.portal-home-link,
.topbar-actions a {

    color:
        #aaa8a1 !important;

    text-decoration:
        none;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .75rem !important;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.portal-home-link:hover,
.topbar-actions a:hover {

    color:
        var(--gold-light) !important;
}


.bell-alert {

    width:
        39px;

    height:
        39px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    position:
        relative;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        50%;

    background:
        #131313;

    color:
        #aaa8a1;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        color .18s ease;
}


.bell-alert:hover {

    color:
        var(--gold-light);

    border-color:
        var(--border-gold);
}


.bell-alert::after {

    content:
        '3';

    position:
        absolute;

    top:
        -3px;

    right:
        -3px;

    min-width:
        17px;

    height:
        17px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    background:
        var(--gold-accent);

    color:
        #090909;

    font-size:
        .56rem;

    font-weight:
        900;

    border:
        2px solid
        var(--bg-deep);
}


/* =========================================================
   10. SCROLL AREA
   ========================================================= */

.dashboard-scroll {

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.025),
            transparent 35%
        ),

        var(--bg-dark);
}


.view-section {

    display:
        none;

    width:
        100%;

    height:
        100%;

    padding:
        30px 30px 170px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .18s ease;

    color:
        var(--text-primary);

    background:
        transparent;
}


.view-section.active-view {

    display:
        block;

    opacity:
        1;

    visibility:
        visible;
}


/* =========================================================
   11. PAGE HEADERS
   ========================================================= */

.mc-header {

    margin-bottom:
        26px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        18px;

    flex-wrap:
        wrap;
}


.mc-title {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        clamp(
            1.95rem,
            4vw,
            2.55rem
        );

    font-weight:
        900;

    letter-spacing:
        .7px;

    line-height:
        1;

    text-transform:
        uppercase;
}


.mc-subtitle {

    margin:
        7px 0 0;

    color:
        var(--text-muted);

    font-size:
        .8rem;

    line-height:
        1.5;
}
/* =========================================================
   12. BUTTONS
   ========================================================= */

.btn-gold,
.btn-primary {

    min-height:
        40px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(212,175,55,.48);

    border-radius:
        7px;

    background:

        linear-gradient(
            110deg,
            #e5cb72 0%,
            #d4af37 55%,
            #a77a20 100%
        );

    color:
        #080808;

    cursor:
        pointer;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .75rem;

    font-weight:
        900;

    letter-spacing:
        .65px;

    text-transform:
        uppercase;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.btn-gold:hover,
.btn-primary:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 18px
        rgba(212,175,55,.12);
}


.btn-outline {

    min-height:
        39px;

    padding:
        0 14px;

    border:
        1px solid
        var(--border-medium);

    border-radius:
        7px;

    background:
        #141414;

    color:
        #b9b7b0;

    cursor:
        pointer;

    font-size:
        .75rem;

    font-weight:
        600;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.btn-outline:hover {

    color:
        var(--gold-light);

    border-color:
        var(--border-gold);

    background:
        #171717;
}


.btn-danger {

    min-height:
        39px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(201,75,69,.30);

    border-radius:
        7px;

    background:
        transparent;

    color:
        #d66e68;

    cursor:
        pointer;

    font-size:
        .75rem;

    font-weight:
        700;
}


.btn-danger:hover {

    background:
        rgba(201,75,69,.08);
}


.btn-success {

    min-height:
        39px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(120,149,130,.26);

    border-radius:
        7px;

    background:
        rgba(120,149,130,.07);

    color:
        #9cb3a3;

    cursor:
        pointer;

    font-size:
        .75rem;

    font-weight:
        700;
}


/* =========================================================
   13. KPI SYSTEM
   ========================================================= */

.kpi-grid {

    margin-bottom:
        30px;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px,1fr)
        );

    gap:
        14px;
}


.kpi-card {

    min-height:
        128px;

    padding:
        17px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-dark);

    border-left:
        3px solid
        #2e2e2c;

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(
            145deg,
            #131313,
            #101010
        );

    color:
        var(--text-primary);

    cursor:
        pointer;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.08);

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.kpi-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(212,175,55,.18);
}


.kpi-card.alert {

    border-left-color:
        var(--red-accent);
}


.kpi-card.success,
.kpi-card.warning,
.kpi-card.info {

    border-left-color:
        #363633;
}


.kpi-label {

    margin-bottom:
        9px;

    display:
        flex;

    align-items:
        center;

    color:
        var(--text-muted);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .85px;

    text-transform:
        uppercase;
}


.kpi-value {

    margin:
        0;

    color:
        var(--text-light) !important;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        2rem;

    font-weight:
        900;

    line-height:
        1;
}


.kpi-value span {

    color:
        var(--text-muted) !important;
}


.kpi-sub {

    margin-top:
        8px;

    display:
        block;

    color:
        var(--text-muted);

    font-size:
        .69rem;

    font-weight:
        500;
}


.kpi-sub.warning {

    color:
        #d4716b;
}


/* =========================================================
   14. STATUS DOTS
   ========================================================= */

.live-dot {

    width:
        7px;

    height:
        7px;

    margin-right:
        7px;

    display:
        inline-block;

    border-radius:
        50%;
}


.dot-green {

    background:
        var(--green-muted);

    box-shadow:
        0 0 7px
        rgba(120,149,130,.35);
}


.dot-yellow {

    background:
        var(--warning-muted);

    box-shadow:
        0 0 7px
        rgba(173,145,86,.30);
}


.dot-red {

    background:
        var(--red-accent);

    box-shadow:
        0 0 7px
        rgba(201,75,69,.35);
}


/* =========================================================
   15. GENERAL PANELS
   ========================================================= */

.corp-form-section,
.ats-panel-card,
.ai-banner,
.rv-card,
.interview-card,
.interview-dossier,
.dir-row,
.dir-dossier,
.ob-card,
.ob-dossier,
.labor-panel,
.requests-panel,
.trn-card,
.prep-tier,
.ticket-card,
.inv-card,
.validation-item,
.risk-item,
.compliance-card,
.action-card,
.module-toggle-card {

    border:
        1px solid
        var(--border-dark);

    background:
        var(--bg-panel);

    color:
        var(--text-primary);

    box-shadow:
        none;
}


.corp-form-section {

    margin-bottom:
        17px;

    padding:
        20px;

    border-radius:
        var(--radius-md);
}


.corp-form-section h3 {

    margin-bottom:
        18px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        var(--border-dark);

    color:
        var(--gold-light);

    font-size:
        .95rem;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}


/* =========================================================
   16. FORMS
   ========================================================= */

.input-group {

    margin-bottom:
        15px;
}


.input-group label {

    margin-bottom:
        6px;

    display:
        block;

    color:
        var(--text-muted);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


.corp-input,
.corp-select {

    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid
        var(--border-medium);

    border-radius:
        7px;

    outline:
        none;

    background:
        var(--bg-input);

    color:
        var(--text-light);

    font-size:
        .83rem;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.corp-input::placeholder {

    color:
        #555551;
}


.corp-input:focus,
.corp-select:focus {

    border-color:
        rgba(212,175,55,.48);

    box-shadow:
        0 0 0 2px
        rgba(212,175,55,.055);
}


option,
optgroup {

    background:
        #161616;

    color:
        var(--text-primary);
}


/* =========================================================
   17. AI BANNER
   ========================================================= */

.ai-banner {

    padding:
        17px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        14px;

    border-color:
        rgba(212,175,55,.20);

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(
            120deg,
            rgba(212,175,55,.06),
            rgba(255,255,255,.01)
        );
}


/* =========================================================
   18. NOTIFICATIONS
   ========================================================= */

.notif-layout {

    display:
        block;
}


.notif-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;
}


.notif-card {

    padding:
        17px;

    display:
        flex;

    gap:
        13px;

    border-left:
        3px solid
        #343431;

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.notif-card.priority-red {

    border-left-color:
        var(--red-accent);
}


.notif-card.priority-yellow,
.notif-card.priority-blue,
.notif-card.priority-green {

    border-left-color:
        #393936;
}


.notif-card.is-read {

    opacity:
        .55;
}


.notif-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #191919;

    color:
        var(--text-muted);

    font-size:
        1rem;
}


.priority-red .notif-icon {

    background:
        var(--red-soft);

    color:
        #d66f69;
}


.notif-content {

    flex:
        1;
}


.notif-content h4 {

    margin:
        0 0 5px;

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        .9rem;

    font-weight:
        700;

    text-transform:
        none;
}


.notif-desc {

    margin:
        0 0 11px;

    color:
        var(--text-muted);

    font-size:
        .76rem;

    line-height:
        1.5;
}


.notif-badge {

    margin-left:
        6px;

    padding:
        3px 7px;

    border-radius:
        999px;

    border:
        1px solid
        var(--border-dark);

    background:
        #181818;

    color:
        var(--text-muted);

    font-size:
        .56rem;

    font-weight:
        800;

    letter-spacing:
        .45px;

    text-transform:
        uppercase;
}


.priority-red .notif-badge {

    border-color:
        rgba(201,75,69,.22);

    background:
        var(--red-soft);

    color:
        #d97671;
}


.notif-actions {

    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;
}
/* =========================================================
   19. DAILY PRIORITIES
   ========================================================= */

.priority-summary-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        14px;

    margin-bottom:
        22px;
}


.priority-summary-card {

    padding:
        18px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.priority-progress-number {

    margin:
        10px 0;

    color:
        var(--gold-light);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        1.8rem;

    font-weight:
        900;
}


.priority-progress-track {

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #272725;
}


#progress-fill,
.progress-fill {

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            var(--gold-soft),
            var(--gold-accent)
        );

    border-radius:
        999px;

    transition:
        width .3s ease;
}


.priority-task {

    margin-bottom:
        10px;

    padding:
        14px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.priority-task .task-title {

    color:
        var(--text-primary);

    font-size:
        .83rem;
}


.priority-task-meta {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        .69rem;
}


.task-checkbox {

    width:
        17px;

    height:
        17px;

    margin-top:
        2px;

    accent-color:
        var(--gold-accent);

    cursor:
        pointer;
}


.high-priority {

    margin-top:
        4px;

    color:
        var(--gold-light);

    font-size:
        .64rem;

    font-weight:
        700;
}


/* =========================================================
   20. APPLICANT TRACKING
   ========================================================= */

.at-controls {

    margin-bottom:
        14px;

    padding:
        11px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.at-search-bar {

    flex:
        1;

    min-width:
        230px;
}


.at-filters {

    display:
        flex;

    gap:
        7px;

    flex-wrap:
        wrap;
}


.at-filters select {

    min-height:
        38px;

    padding:
        0 10px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        6px;

    background:
        #171717;

    color:
        var(--text-secondary);

    font-size:
        .7rem;
}


.at-pipeline {

    min-height:
        470px;

    padding-bottom:
        10px;

    display:
        flex;

    gap:
        12px;

    overflow-x:
        auto;

    overflow-y:
        hidden;
}


.at-column {

    min-width:
        285px;

    max-width:
        285px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        #0e0e0e;
}


.at-col-header {

    min-height:
        44px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border-dark);

    background:
        #141414;

    color:
        var(--text-secondary);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;
}


.at-col-count {

    min-width:
        22px;

    height:
        22px;

    padding:
        0 6px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        999px;

    background:
        #20201e;

    color:
        var(--text-muted);

    font-size:
        .6rem;
}


.at-col-body {

    min-height:
        390px;

    padding:
        10px;

    flex:
        1;

    transition:
        background .15s ease;
}


.at-col-body.drag-over {

    background:
        rgba(212,175,55,.045);
}


.at-card {

    margin-bottom:
        10px;

    padding:
        12px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        7px;

    background:
        #171717;

    cursor:
        grab;

    transition:
        transform .15s ease,
        opacity .15s ease,
        border-color .15s ease;
}


.at-card:hover {

    border-color:
        rgba(212,175,55,.20);
}


.at-card.dragging {

    opacity:
        .45;

    transform:
        scale(.98);
}


.at-card-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        8px;
}


.at-applicant-info {

    display:
        flex;

    gap:
        9px;
}


.at-avatar {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        #242422 !important;

    color:
        var(--gold-light) !important;

    font-size:
        .67rem;

    font-weight:
        800;
}


.at-details h4 {

    margin:
        0;

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        .82rem;

    text-transform:
        none;
}


.at-details p {

    margin:
        3px 0 0;

    color:
        var(--text-muted);

    font-size:
        .65rem;
}


.at-match-score {

    height:
        fit-content;

    padding:
        4px 7px;

    border:
        1px solid
        rgba(212,175,55,.22) !important;

    border-radius:
        999px;

    background:
        rgba(212,175,55,.055) !important;

    color:
        var(--gold-light) !important;

    font-size:
        .57rem;

    font-weight:
        700;
}


.at-ai-summary {

    margin-top:
        9px;

    padding:
        8px;

    border:
        1px solid
        var(--border-dark);

    border-left:
        2px solid
        rgba(212,175,55,.42);

    border-radius:
        5px;

    background:
        #121212;

    color:
        #7c7b76;

    font-size:
        .64rem;

    line-height:
        1.45;
}


/* =========================================================
   21. RESUME VAULT
   ========================================================= */

.rv-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px,1fr)
        );

    gap:
        14px;
}


.rv-card {

    padding:
        17px;

    border-radius:
        var(--radius-md);

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.rv-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(212,175,55,.22);
}


.rv-header {

    padding-bottom:
        11px;

    margin-bottom:
        11px;

    display:
        flex;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border-dark);
}


.rv-header h4 {

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        .88rem;

    text-transform:
        none;
}


.rv-role {

    margin-top:
        4px;

    color:
        var(--gold-light);

    font-size:
        .63rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.rv-meta {

    color:
        var(--text-muted);

    font-size:
        .69rem;

    line-height:
        1.55;
}


.rv-actions {

    margin-top:
        13px;

    display:
        flex;

    gap:
        8px;
}


/* =========================================================
   22. INTERVIEWS
   ========================================================= */

.interview-grid {

    display:
        grid;

    grid-template-columns:
        320px minmax(0,1fr);

    gap:
        14px;
}


.interview-list-col {

    min-width:
        0;
}


.interview-card {

    margin-bottom:
        10px;

    overflow:
        hidden;

    border-left:
        3px solid
        #323230;

    border-radius:
        var(--radius-md);

    cursor:
        pointer;
}


.interview-card.status-confirmed {

    border-left-color:
        #687d6e;
}


.interview-card.status-reschedule {

    border-left-color:
        var(--red-accent);
}


.interview-card-inner {

    display:
        flex;
}


.interview-time {

    min-width:
        95px;

    padding:
        16px 12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-right:
        1px solid
        var(--border-dark);

    background:
        #151515;

    color:
        var(--gold-light);
}


.interview-time .time {

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        1.1rem;
}


.interview-details {

    flex:
        1;

    padding:
        16px;
}


.interview-details h4 {

    margin:
        0;

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        .85rem;

    text-transform:
        none;
}


.interview-details p {

    margin:
        5px 0 0;

    color:
        var(--text-muted);

    font-size:
        .68rem;
}


.status-badge {

    margin-left:
        5px;

    padding:
        3px 6px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        999px;

    background:
        #1a1a18;

    color:
        #84827c;

    font-size:
        .54rem;

    text-transform:
        uppercase;
}


.interview-dossier,
.dir-dossier {

    overflow:
        hidden;

    border-radius:
        var(--radius-md);
}


.dossier-header {

    padding:
        18px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--border-dark);

    background:

        linear-gradient(
            140deg,
            #161616,
            #101010
        ) !important;

    color:
        var(--text-light);
}


.dossier-avatar {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #232321 !important;

    color:
        var(--gold-light) !important;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .9rem;

    font-weight:
        900;
}


.dossier-content {

    padding:
        18px;
}


.dossier-section {

    padding:
        14px !important;

    border:
        1px solid
        var(--border-dark) !important;

    border-radius:
        7px !important;

    background:
        #141414 !important;

    color:
        var(--text-secondary) !important;
}


.dossier-section h5 {

    margin-bottom:
        8px;

    color:
        var(--text-muted);

    font-size:
        .65rem;

    text-transform:
        uppercase;
}


/* =========================================================
   23. EMPLOYEE DIRECTORY
   ========================================================= */

.dir-grid {

    display:
        grid;

    grid-template-columns:
        340px minmax(0,1fr);

    gap:
        14px;
}


.dir-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.dir-row {

    padding:
        13px;

    display:
        flex;

    gap:
        11px;

    align-items:
        center;

    border-left:
        3px solid
        transparent;

    border-radius:
        var(--radius-md);

    cursor:
        pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}


.dir-row:hover {

    border-left-color:
        rgba(212,175,55,.35);

    background:
        #141414;
}


.dir-row.active {

    border-left-color:
        var(--gold-accent);

    background:
        rgba(212,175,55,.045);
}


.dir-avatar {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #222220 !important;

    color:
        var(--gold-light) !important;

    font-size:
        .7rem;

    font-weight:
        800;
}


.dir-info {

    min-width:
        0;

    flex:
        1;
}


.dir-info h4 {

    margin:
        0;

    color:
        var(--text-primary);

    font-family:
        'Roboto',
        sans-serif;

    font-size:
        .82rem;

    text-transform:
        none;
}


.dir-info p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        .64rem;
}


.badge {

    padding:
        3px 6px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        999px;

    background:
        #181818 !important;

    color:
        var(--text-muted) !important;

    font-size:
        .54rem;

    font-weight:
        700;
}


.badge-issue {

    border-color:
        rgba(201,75,69,.22);

    color:
        #d16d67 !important;
}


.critical-text {

    color:
        #d16d67 !important;
}
/* =========================================================
   24. MESSAGES
   ========================================================= */

.msg-workspace {

    min-height:
        620px;

    display:
        grid;

    grid-template-columns:
        220px 300px minmax(0,1fr);

    overflow:
        hidden;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.msg-sidebar {

    padding:
        15px;

    overflow-y:
        auto;

    border-right:
        1px solid
        var(--border-dark);

    background:
        #101010;
}


.msg-section-title {

    margin-bottom:
        8px;

    color:
        #5f5e5a;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.msg-folder {

    min-height:
        37px;

    padding:
        0 9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-radius:
        6px;

    color:
        #8d8b85;

    cursor:
        pointer;

    font-size:
        .72rem;
}


.msg-folder:hover {

    background:
        #151515;
}


.msg-folder.active {

    background:
        rgba(212,175,55,.055);

    color:
        var(--gold-light);
}


.msg-list {

    overflow-y:
        auto;

    border-right:
        1px solid
        var(--border-dark);

    background:
        #121212;
}


.msg-list-header {

    padding:
        13px;

    border-bottom:
        1px solid
        var(--border-dark);

    background:
        #111111;
}


.msg-filter {

    padding:
        4px 8px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        999px;

    background:
        #181818;

    color:
        #6e6d68;

    cursor:
        pointer;

    font-size:
        .58rem;
}


.msg-filter.active {

    border-color:
        rgba(212,175,55,.25);

    color:
        var(--gold-light);
}


.msg-card {

    padding:
        13px;

    display:
        flex;

    gap:
        10px;

    border-bottom:
        1px solid
        var(--border-dark);

    cursor:
        pointer;

    background:
        transparent;

    transition:
        background .15s ease;
}


.msg-card:hover,
.msg-card.selected {

    background:
        #171717;
}


.msg-card.unread {

    border-left:
        2px solid
        var(--gold-accent);

    background:
        rgba(212,175,55,.035);
}


.msg-card-avatar {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        #222220 !important;

    color:
        var(--gold-light) !important;

    font-size:
        .66rem;

    font-weight:
        800;
}


.msg-card-content {

    min-width:
        0;

    flex:
        1;
}


.msg-card-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        7px;

    color:
        var(--text-primary);

    font-size:
        .75rem;
}


.msg-time {

    color:
        #65645f;

    font-size:
        .6rem;
}


.msg-role {

    margin-top:
        2px;

    color:
        #676661;

    font-size:
        .61rem;
}


.msg-preview {

    margin-top:
        5px;

    overflow:
        hidden;

    color:
        #8b8984;

    font-size:
        .68rem;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.msg-tags {

    margin-top:
        6px;
}


.msg-tag {

    padding:
        3px 6px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        999px;

    background:
        #171717 !important;

    color:
        #77756f !important;

    font-size:
        .52rem;

    font-weight:
        700;
}


.msg-tag.red {

    border-color:
        rgba(201,75,69,.22);

    color:
        #d06a64 !important;
}


.msg-panel {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    background:
        #101010;
}


.msg-panel-header {

    min-height:
        68px;

    padding:
        13px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-bottom:
        1px solid
        var(--border-dark);

    background:
        #111111;
}


.msg-history {

    flex:
        1;

    padding:
        18px;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    background:
        #0d0d0d;
}


.msg-system {

    align-self:
        center;

    padding:
        5px 9px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        999px;

    background:
        #151515;

    color:
        #66655f;

    font-size:
        .58rem;

    text-align:
        center;
}


.msg-bubble {

    max-width:
        72%;

    padding:
        11px 13px;

    border-radius:
        9px;

    font-size:
        .72rem;

    line-height:
        1.5;
}


.msg-bubble.received {

    align-self:
        flex-start;

    border:
        1px solid
        var(--border-dark);

    background:
        #171717;

    color:
        #c6c3ba;
}


.msg-bubble.sent {

    align-self:
        flex-end;

    border:
        1px solid
        rgba(212,175,55,.17);

    background:
        rgba(212,175,55,.08);

    color:
        #ddd8cc;
}


.msg-sender,
.msg-status {

    margin-bottom:
        4px;

    color:
        #6d6b65;

    font-size:
        .57rem;
}


.msg-status {

    margin:
        5px 0 0;

    text-align:
        right;
}


.msg-composer {

    padding:
        13px;

    border-top:
        1px solid
        var(--border-dark);

    background:
        #111111;
}


.msg-composer textarea {

    width:
        100%;

    height:
        72px;

    padding:
        10px;

    resize:
        none;

    outline:
        none;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        7px;

    background:
        #181818;

    color:
        var(--text-primary);
}


.msg-composer-actions {

    margin-top:
        8px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        8px;
}


/* =========================================================
   25. GENERIC MODULE GRIDS
   ========================================================= */

.module-card-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px,1fr)
        );

    gap:
        13px;
}


.module-card {

    padding:
        17px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.module-card h3 {

    margin:
        0;

    color:
        var(--text-primary);

    font-size:
        .85rem;

    font-weight:
        700;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;
}


.module-card p {

    margin:
        9px 0 13px;

    color:
        var(--text-muted);

    font-size:
        .71rem;

    line-height:
        1.5;
}


/* =========================================================
   26. SETTINGS
   ========================================================= */

.xpo-settings {

    width:
        100%;

    max-width:
        1160px;

    margin:
        0 auto;
}


.settings-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        14px;
}


.settings-card {

    padding:
        19px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(
            145deg,
            #131313,
            #101010
        );
}


.settings-card.full {

    grid-column:
        1 / -1;
}


.settings-card-header {

    margin-bottom:
        15px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;
}


.settings-card-title {

    color:
        var(--text-light);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .92rem;

    font-weight:
        700;

    letter-spacing:
        .75px;

    text-transform:
        uppercase;
}


.settings-card-description {

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        .68rem;

    line-height:
        1.45;
}


.plan-chip {

    padding:
        4px 8px;

    border:
        1px solid
        rgba(212,175,55,.24);

    border-radius:
        999px;

    background:
        rgba(212,175,55,.055);

    color:
        var(--gold-light);

    font-size:
        .57rem;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.setting-row {

    min-height:
        58px;

    padding:
        12px 0;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        14px;

    border-top:
        1px solid
        var(--border-dark);
}


.setting-row:first-of-type {

    border-top:
        0;
}


.setting-main {

    flex:
        1;

    min-width:
        0;
}


.setting-title {

    color:
        var(--text-primary);

    font-size:
        .77rem;

    font-weight:
        600;
}


.setting-text {

    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        .66rem;

    line-height:
        1.45;
}


.setting-input,
.setting-select {

    width:
        100%;

    min-height:
        41px;

    margin-top:
        7px;

    padding:
        0 11px;

    outline:
        none;

    border:
        1px solid
        var(--border-medium);

    border-radius:
        7px;

    background:
        #181818;

    color:
        var(--text-primary);

    font-size:
        .74rem;
}


.setting-select {

    width:
        auto;

    min-width:
        160px;
}


.setting-input:focus,
.setting-select:focus {

    border-color:
        rgba(212,175,55,.45);
}


.setting-switch,
.toggle-switch {

    width:
        43px;

    height:
        23px;

    flex:
        0 0 43px;

    position:
        relative;
}


.setting-switch input,
.toggle-switch input {

    width:
        0;

    height:
        0;

    opacity:
        0;
}


.setting-slider,
.slider {

    position:
        absolute;

    inset:
        0;

    border-radius:
        999px;

    background:
        #333330;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.setting-slider::before,
.slider::before {

    content:
        "";

    position:
        absolute;

    width:
        17px;

    height:
        17px;

    left:
        3px;

    top:
        3px;

    border-radius:
        50%;

    background:
        #77756f;

    transition:
        .2s ease;
}


.setting-switch
input:checked
+
.setting-slider,
.toggle-switch
input:checked
+
.slider {

    background:
        rgba(212,175,55,.22);

    box-shadow:
        inset 0 0 0 1px
        rgba(212,175,55,.22);
}


.setting-switch
input:checked
+
.setting-slider::before,
.toggle-switch
input:checked
+
.slider::before {

    transform:
        translateX(20px);

    background:
        var(--gold-light);
}


.subscription-box {

    padding:
        17px;

    border:
        1px solid
        rgba(212,175,55,.19);

    border-radius:
        8px;

    background:

        linear-gradient(
            125deg,
            rgba(212,175,55,.055),
            rgba(255,255,255,.008)
        );
}


.subscription-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;
}


.subscription-name {

    color:
        var(--gold-light);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        1.18rem;

    font-weight:
        900;

    letter-spacing:
        .55px;

    text-transform:
        uppercase;
}


.subscription-price {

    color:
        var(--text-light);

    font-size:
        1.3rem;

    font-weight:
        800;
}


.subscription-price span {

    color:
        var(--text-muted);

    font-size:
        .65rem;

    font-weight:
        400;
}


.subscription-data {

    margin-top:
        14px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        9px;
}


.subscription-stat {

    padding:
        10px;

    border:
        1px solid
        var(--border-dark);

    border-radius:
        7px;

    background:
        rgba(0,0,0,.16);
}


.subscription-stat-label {

    color:
        #5d5c58;

    font-size:
        .55rem;

    font-weight:
        800;

    letter-spacing:
        .6px;

    text-transform:
        uppercase;
}


.subscription-stat-value {

    margin-top:
        4px;

    color:
        #d1cec5;

    font-size:
        .72rem;

    font-weight:
        600;
}


.settings-actions {

    margin-top:
        14px;

    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;
}


.settings-danger {

    border-color:
        rgba(201,75,69,.15);
}


.settings-danger
.settings-card-title {

    color:
        #d06d67;
}


.settings-save-message {

    display:
        none;

    margin-top:
        14px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(212,175,55,.20);

    border-radius:
        7px;

    background:
        rgba(212,175,55,.05);

    color:
        var(--gold-light);

    font-size:
        .7rem;
}


/* =========================================================
   27. NEEDS ATTENTION
   ========================================================= */

.needs-attention {

    margin:
        15px 0;

    padding:
        14px;

    border:
        1px solid
        rgba(201,75,69,.15);

    border-left:
        3px solid
        var(--red-accent);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-panel);
}


.needs-attention-title {

    color:
        #d16c66;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}


/* =========================================================
   28. TABLES
   ========================================================= */

.ledger-table,
.staff-table,
.audit-table {

    width:
        100%;

    border-collapse:
        collapse;

    color:
        var(--text-secondary);

    font-size:
        .72rem;
}


.ledger-table th,
.staff-table th,
.audit-table th {

    padding:
        11px 10px;

    border-bottom:
        1px solid
        var(--border-medium);

    color:
        var(--text-muted);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .55px;

    text-align:
        left;

    text-transform:
        uppercase;
}


.ledger-table td,
.staff-table td,
.audit-table td {

    padding:
        12px 10px;

    border-bottom:
        1px solid
        var(--border-dark);

    color:
        var(--text-secondary);
}

/* =========================================================
   29. MODALS
   ========================================================= */

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        15px;

    background:
        rgba(0,0,0,.74);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


.modal-overlay.hidden {

    display:
        none !important;
}


.modal-card,
.custom-dialog {

    width:
        100%;

    max-width:
        520px;

    max-height:
        86dvh;

    overflow-y:
        auto;

    padding:
        24px;

    border:
        1px solid
        var(--border-medium);

    border-top:
        2px solid
        rgba(212,175,55,.58);

    border-radius:
        11px;

    background:

        linear-gradient(
            145deg,
            #151515,
            #101010
        );

    color:
        var(--text-primary);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.58);
}


.custom-dialog h2,
.custom-dialog h3,
.modal-card h2,
.modal-card h3 {

    margin-bottom:
        14px;

    color:
        var(--gold-light);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        1.3rem;

    font-weight:
        800;

    letter-spacing:
        .6px;

    text-transform:
        uppercase;
}


.custom-dialog p {

    margin-bottom:
        20px;

    color:
        var(--text-secondary);

    font-size:
        .77rem;

    line-height:
        1.55;
}


.dialog-actions {

    margin-top:
        18px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;

    flex-wrap:
        wrap;
}


/* =========================================================
   30. SCHEDULE
   ========================================================= */

.schedule-layout,
.tc-layout,
.pr-layout,
.trn-layout,
.log-layout,
.chk-layout,
.mt-layout,
.inv-layout,
.ledger-layout,
.labor-split,
.pl-split,
.reports-split,
.locations-split,
.departments-split,
.integrations-split,
.security-split {

    display:
        grid;

    gap:
        16px;

    align-items:
        start;
}


.schedule-layout {

    grid-template-columns:
        minmax(0,1fr) 280px;
}


.tc-layout {

    grid-template-columns:
        minmax(0,2fr) minmax(260px,1fr);
}


.pr-layout {

    grid-template-columns:
        330px minmax(0,1fr);
}


.trn-layout {

    grid-template-columns:
        minmax(0,2fr) minmax(260px,1fr);
}


.log-layout {

    grid-template-columns:
        minmax(0,2.4fr) minmax(260px,1fr);
}


.chk-layout,
.mt-layout,
.inv-layout {

    grid-template-columns:
        minmax(0,2fr) minmax(260px,1fr);
}


.ledger-layout {

    grid-template-columns:
        minmax(0,2.5fr) minmax(260px,1fr);
}


.labor-split {

    grid-template-columns:
        minmax(0,2fr) minmax(260px,1.2fr);
}


.pl-split,
.locations-split,
.departments-split,
.integrations-split,
.security-split {

    grid-template-columns:
        1fr 1.2fr;
}


.reports-split {

    grid-template-columns:
        1.4fr 1fr;
}


/* =========================================================
   31. MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    .sidebar {

        position:
            fixed;

        left:
            0;

        top:
            0;

        transform:
            translateX(-100%);

        transition:
            transform .24s ease;
    }


    .sidebar.active-sidebar,
    .sidebar.open {

        transform:
            translateX(0);
    }


    .close-menu-btn,
    .menu-toggle-btn {

        display:
            block;
    }


    #mobile-overlay.show {

        display:
            block;
    }


    .universal-search-container {

        width:
            100%;

        max-width:
            none;

        order:
            3;
    }


    .topbar {

        padding:
            11px 14px;

        flex-wrap:
            wrap;
    }


    .view-section {

        padding:
            22px 16px 150px;
    }


    .priority-summary-grid,
    .settings-grid {

        grid-template-columns:
            1fr;
    }


    .settings-card.full {

        grid-column:
            auto;
    }


    .subscription-data {

        grid-template-columns:
            1fr;
    }


    .setting-row {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .setting-select {

        width:
            100%;
    }


    .interview-grid,
    .dir-grid,
    .schedule-layout,
    .tc-layout,
    .pr-layout,
    .trn-layout,
    .log-layout,
    .chk-layout,
    .mt-layout,
    .inv-layout,
    .ledger-layout,
    .labor-split,
    .pl-split,
    .reports-split,
    .locations-split,
    .departments-split,
    .integrations-split,
    .security-split {

        grid-template-columns:
            1fr;
    }


    .msg-workspace {

        grid-template-columns:
            190px minmax(0,1fr);
    }


    .msg-panel {

        min-height:
            520px;

        grid-column:
            1 / -1;
    }
}


@media (max-width: 650px) {

    .topbar {

        min-height:
            64px;

        gap:
            9px;
    }


    .company-name {

        max-width:
            190px;

        overflow:
            hidden;

        font-size:
            .83rem;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .plan-status {

        font-size:
            .56rem;
    }


    .topbar-actions a {

        display:
            none;
    }


    .view-section {

        padding:
            19px 12px 140px;
    }


    .mc-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .mc-title {

        font-size:
            1.85rem;
    }


    .kpi-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            8px;
    }


    .kpi-card {

        min-height:
            110px;

        padding:
            13px;
    }


    .kpi-value {

        font-size:
            1.55rem;
    }


    .msg-workspace {

        display:
            block;
    }


    .msg-sidebar {

        display:
            none;
    }


    .msg-list {

        max-height:
            330px;

        border-right:
            0;
    }


    .msg-panel {

        margin-top:
            10px;
    }


    .msg-bubble {

        max-width:
            87%;
    }


    .at-search-bar {

        min-width:
            100%;
    }


    .subscription-top {

        flex-direction:
            column;
    }
}


/* =========================================================
   XPO86 EMPLOYER PORTAL — ACTIVE LIGHT THEME
   Current employer.html only. Vault upgrade files stay untouched.
   ========================================================= */

#app-view {
    background: #f5f6f8 !important;
    color: #1f2933 !important;
}

#app-view .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e4e7eb !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.04) !important;
}

#app-view .sidebar-header {
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #eceff2 !important;
}

#app-view .sidebar-header h2 {
    color: #8a6518 !important;
}

#app-view .nav-group {
    border-bottom-color: #eef0f2 !important;
}

#app-view .nav-label {
    color: #8b9198 !important;
}

#app-view .nav-item {
    color: #4c5560 !important;
}

#app-view .nav-item:hover {
    color: #171a1d !important;
    background: #f7f8f9 !important;
}

#app-view .nav-item.active {
    color: #72520f !important;
    background: #fff8e4 !important;
    border-left-color: #d4af37 !important;
}

#app-view .nav-item.locked {
    color: #a3a8ae !important;
}

#app-view .workspace,
#app-view .dashboard-scroll,
#app-view .view-section {
    background: #f5f6f8 !important;
    color: #1f2933 !important;
}

#app-view .topbar {
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #e4e7eb !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.04) !important;
}

#app-view .company-name,
#app-view .mc-title,
#app-view h1,
#app-view h2,
#app-view h3,
#app-view h4,
#app-view h5 {
    color: #20252a !important;
}

#app-view .plan-status,
#app-view .mc-subtitle,
#app-view .kpi-sub,
#app-view .rv-meta,
#app-view .setting-text,
#app-view .settings-card-description,
#app-view .notif-desc,
#app-view .at-details p {
    color: #6f7780 !important;
}

#app-view .universal-search-input,
#app-view .corp-input,
#app-view .corp-select,
#app-view input,
#app-view textarea,
#app-view select {
    background: #ffffff !important;
    color: #20252a !important;
    border-color: #dfe3e7 !important;
}

#app-view .universal-search-input::placeholder,
#app-view .corp-input::placeholder,
#app-view textarea::placeholder {
    color: #9aa1a9 !important;
}

#app-view option,
#app-view optgroup {
    background: #ffffff !important;
    color: #20252a !important;
}

#app-view .kpi-card,
#app-view .corp-form-section,
#app-view .ats-panel-card,
#app-view .rv-card,
#app-view .interview-card,
#app-view .interview-dossier,
#app-view .dir-row,
#app-view .dir-dossier,
#app-view .labor-panel,
#app-view .requests-panel,
#app-view .settings-card,
#app-view .priority-summary-card,
#app-view .priority-task,
#app-view .notif-card,
#app-view .trn-card,
#app-view .prep-tier,
#app-view .ticket-card,
#app-view .inv-card,
#app-view .validation-item,
#app-view .risk-item,
#app-view .compliance-card,
#app-view .action-card,
#app-view .module-toggle-card {
    background: #ffffff !important;
    color: #20252a !important;
    border-color: #e2e6ea !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.035) !important;
}

#app-view .kpi-value,
#app-view .kpi-value span {
    color: #20252a !important;
}

#app-view .ai-banner {
    background: #fff9e8 !important;
    color: #20252a !important;
    border-color: rgba(212,175,55,.32) !important;
}

#app-view .btn-outline {
    background: #ffffff !important;
    color: #424a52 !important;
    border-color: #d7dce1 !important;
}

#app-view .btn-outline:hover {
    background: #fff8e4 !important;
    color: #72520f !important;
    border-color: rgba(212,175,55,.55) !important;
}

#app-view .bell-alert,
#app-view .menu-toggle-btn {
    background: #ffffff !important;
    color: #72520f !important;
    border-color: #dfe3e7 !important;
}

#app-view .at-controls {
    background: #ffffff !important;
    border-color: #e2e6ea !important;
}

#app-view .at-column {
    background: #f8f9fb !important;
    border-color: #e2e6ea !important;
}

#app-view .at-col-header {
    background: #ffffff !important;
    color: #5e6670 !important;
    border-bottom-color: #e2e6ea !important;
}

#app-view .at-col-count {
    background: #f0f2f4 !important;
    color: #626a73 !important;
}

#app-view .at-card {
    background: #ffffff !important;
    color: #20252a !important;
    border-color: #e2e6ea !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.035) !important;
}

#app-view .at-avatar,
#app-view .dir-avatar,
#app-view .dossier-avatar {
    background: #fff5d6 !important;
    color: #7c5a13 !important;
    border: 1px solid #ecd999 !important;
}

#app-view .at-ai-summary,
#app-view .dossier-section {
    background: #f8f9fb !important;
    color: #5f6872 !important;
    border-color: #e6e9ec !important;
}

#app-view .rv-header {
    border-bottom-color: #e5e8eb !important;
}

#app-view .rv-header h4 {
    color: #20252a !important;
}

#app-view .rv-role {
    color: #8a6518 !important;
}

#app-view .dossier-header {
    background: linear-gradient(135deg,#fff9e8,#ffffff) !important;
    color: #20252a !important;
    border-bottom-color: #e2e6ea !important;
}

#app-view .msg-workspace,
#app-view .msg-sidebar,
#app-view .msg-list,
#app-view .msg-list-header,
#app-view .msg-card {
    background: #ffffff !important;
    color: #20252a !important;
    border-color: #e2e6ea !important;
}

#app-view .msg-card:hover,
#app-view .msg-card.selected,
#app-view .msg-folder:hover,
#app-view .msg-folder.active {
    background: #fff8e4 !important;
}

#app-view .resume-directory-state {
    background: #ffffff !important;
    color: #5f6872 !important;
    border-color: #e2e6ea !important;
}

#app-view #jobPublishStatus[data-state="success"] {
    color: #2f6b46 !important;
}

#app-view #jobPublishStatus[data-state="error"] {
    color: #a33e39 !important;
}

#app-view #jobPublishStatus[data-state="pending"] {
    color: #72520f !important;
}