/* EASPC HR Management theme: navy sidebar, maroon accent, Oswald headings, Inter text (measured from the EASPC workshop app and website). */
/* Fonts are bundled (SIL Open Font License, see wwwroot/fonts/LICENSE-*.txt) so the app looks the same offline. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url("../fonts/oswald-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-display: swap;
    font-weight: 200 700;
    src: url("../fonts/oswald-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --maroon: #540006;
    --maroon-2: #6b0b13;
    --maroon-deep: #3a0308;
    --navy: #16222e;
    --navy-2: #131d27;
    --navy-3: #0f181f;
    --navy-box: #253849;
    --navy-border: #2e3b4b;
    --navy-line: rgba(255, 255, 255, .07);
    --bg: #f4f5f7;
    --card: #fff;
    --line: #e5e8ec;
    --th: #ecf0f3;
    --th-line: #dfe3e6;
    --ink: #14202b;
    --ink-2: #33414e;
    --muted: #6b7b85;
    --faint: #a4abb2;
    --ok: #1a6a41;
    --ok-bg: #e5f4ec;
    --ok-dot: #248357;
    --warn: #8a5a00;
    --warn-bg: #fdf1d6;
    --bad: #9b1c1c;
    --bad-bg: #fbe4e2;
    --info: #1f5a91;
    --info-bg: #e3edf8;
    --sidebar-w: 256px;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-head: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
    --shadow: 0 1px 2px rgba(20, 32, 43, .04), 0 10px 26px -14px rgba(20, 32, 43, .14);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font: 14px/1.55 var(--font-body);
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: radial-gradient(900px 420px at 16% -90px, #fff 0%, rgba(255, 255, 255, 0) 70%), var(--bg);
    /* Match the denser desktop appearance of Chrome at 80% browser zoom. */
    zoom: .8;
    width: 100%;
    min-height: 100vh;
}

a {
    color: var(--maroon);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

::selection {
    background: rgba(84, 0, 6, .18);
}

/* ───── sidebar ───── */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 45%, var(--navy-3) 100%);
    color: #abbcd0;
}

.brand {
    padding: 24px 22px 18px;
    border-bottom: 1px solid var(--navy-line);
}

.brand-logo {
    display: block;
    width: 132px;
    height: auto;
}

.brand-sub {
    margin-top: 13px;
    font: 500 11.5px/1 var(--font-head);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #bac5c1;
}

.side-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px 18px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #2a3a4a transparent;
}

    .side-nav::-webkit-scrollbar {
        width: 6px;
    }

    .side-nav::-webkit-scrollbar-thumb {
        background: #2a3a4a;
        border-radius: 8px;
    }

.nav-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    margin-top: 6px;
    border: 0;
    background: none;
    border-radius: 10px;
    font: 700 12px/1.2 var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #d2e3f3;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

    .nav-head:hover {
        background: rgba(255, 255, 255, .05);
        text-decoration: none;
        color: #fff;
    }

    .nav-head.direct {
        font: 500 14px/1.2 var(--font-body);
        letter-spacing: 0;
        text-transform: none;
        color: #c9d4df;
        margin-top: 0;
    }

        .nav-head.direct.active {
            background: linear-gradient(100deg, var(--maroon-2), var(--maroon));
            color: #fff;
            box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6);
        }

.nav-ico {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: #8b9ca4;
    flex: none;
}

    .nav-ico svg {
        width: 18px;
        height: 18px;
    }

.nav-head.active .nav-ico, .nav-head:hover .nav-ico, .nav-group.open > .nav-head .nav-ico {
    color: #d9e6f2;
}

.nav-head.direct.active .nav-ico {
    color: #fff;
}

.nav-label {
    flex: 1;
}

.chev::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    border-right: 1.8px solid #6f8194;
    border-bottom: 1.8px solid #6f8194;
    transform: rotate(-45deg);
    transition: transform .15s;
}

.nav-group.open > .nav-head .chev::before {
    transform: rotate(45deg);
    margin-top: -3px;
}

.nav-sub {
    display: none;
    padding: 2px 0 8px;
}

.nav-group.open > .nav-sub {
    display: block;
}

.nav-sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 42px;
    margin: 1px 0;
    border-radius: 10px;
    font-size: 13px;
    color: #abbcd0;
    text-decoration: none;
}

    .nav-sub a span:first-child {
        flex: 1;
    }

    .nav-sub a:hover {
        background: rgba(255, 255, 255, .05);
        color: #fff;
    }

    .nav-sub a.active {
        background: linear-gradient(100deg, var(--maroon-2), var(--maroon));
        color: #fff;
        font-weight: 600;
        box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6);
    }

.soon {
    font: 600 9px/1 var(--font-body);
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: #7f91a3;
}

.nav-sub a.active .soon {
    background: rgba(255, 255, 255, .16);
    color: #f1d5d7;
}

.side-foot {
    padding: 16px 18px 20px;
    border-top: 1px solid var(--navy-line);
}

.who {
    font-weight: 700;
    color: #fff;
    font-size: 13.5px;
}

.who-sub {
    color: #aeb7b6;
    font-size: 12px;
    margin: 2px 0 13px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3cbd80;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(60, 189, 128, .18);
}

.side-btn {
    display: block;
    text-align: center;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--navy);
    border: 1px solid var(--navy-line);
    color: #f8fcff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

    .side-btn:hover {
        background: #1c2b3a;
        text-decoration: none;
    }

/* ───── content ───── */
.content {
    margin-left: var(--sidebar-w);
    padding: 34px 44px 22px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-title {
    min-width: 0;
}

.eyebrow {
    font: 700 12px/1 var(--font-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 11px;
}

.page-head h1 {
    margin: 0;
    font: 700 36px/1.08 var(--font-head);
    color: var(--ink);
    letter-spacing: .005em;
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.menu-btn {
    display: none;
    border: 0;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    margin-bottom: 14px;
}

.page-foot {
    margin-top: 44px;
    padding: 20px 2px 6px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12.5px;
}

.flash {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid;
}

.flash-ok {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: #bfe3cc;
}

.flash-bad {
    background: var(--bad-bg);
    color: var(--bad);
    border-color: #f0c1bb;
}

.hint {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 14px;
    max-width: 980px;
}

.empty {
    background: #fff;
    border: 1px dashed #d3dae1;
    border-radius: 16px;
    padding: 34px 20px;
    text-align: center;
    color: var(--muted);
}

.divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 14px 0 18px;
}

/* ───── forms ───── */
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 28px 24px;
    box-shadow: var(--shadow);
    max-width: 1120px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px 24px;
}

.field label, label.lbl {
    display: block;
    font: 600 11.5px/1 var(--font-head);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 9px;
}

input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], input[type=file], select, textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    background: #fafbfd;
    font: inherit;
    color: var(--ink);
    transition: border-color .12s, box-shadow .12s, background .12s;
}

    input:hover, select:hover, textarea:hover {
        border-color: #cfd6de;
    }

    input:focus, select:focus, textarea:focus {
        outline: 0;
        border-color: var(--maroon);
        box-shadow: 0 0 0 3px rgba(84, 0, 6, .12);
        background: #fff;
    }

input[readonly] {
    background: #fafbfd;
    color: var(--ink);
    border-color: #e1e5ea;
}

input[readonly]:hover {
    border-color: #cfd6de;
}

input[readonly]:focus {
    background: #fff;
    color: var(--ink);
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background: #fafbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7b85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 16px;
}

    select:focus {
        background-color: #fff;
    }

textarea {
    min-height: 96px;
    resize: vertical;
}

input[type=file]::file-selector-button {
    border: 0;
    background: var(--navy);
    color: #fff;
    padding: 6px 12px;
    margin-right: 12px;
    border-radius: 8px;
    font: 600 12px var(--font-body);
    cursor: pointer;
}
/* Project-wide pill selectors for ordinary checkboxes */
.check, .inline-check {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

    .check input[type=checkbox], .inline-check input[type=checkbox] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 1px;
        height: 1px;
    }

    .check label, .inline-check span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 16px;
        border: 1px solid #d8dee5;
        border-radius: 11px;
        background: #fff;
        color: var(--ink);
        font: 700 13px/1 var(--font-body);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(20,32,43,.08);
        transition: .14s ease;
    }

    .check input[type=checkbox]:checked + label, .inline-check input[type=checkbox]:checked + span {
        background: var(--maroon);
        border-color: var(--maroon);
        color: #fff;
        box-shadow: 0 6px 14px rgba(84,0,6,.22);
    }

    .check input[type=checkbox]:focus-visible + label, .inline-check input[type=checkbox]:focus-visible + span {
        outline: 3px solid rgba(84,0,6,.14);
        outline-offset: 2px;
    }

    .check label:hover, .inline-check span:hover {
        border-color: #b8c2cc;
        background: #f7f9fb;
    }

    .check input[type=checkbox]:checked + label:hover, .inline-check input[type=checkbox]:checked + span:hover {
        background: #650008;
    }

.form-card .check {
    padding: 0;
    border: 0;
    background: transparent
}

.filters .check {
    align-self: flex-end;
    margin-top: 0;
}

.field label.setting-key {
    font: 600 13px/1.25 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 7px;
}

.field-error {
    color: var(--bad);
    font-size: 12.5px;
    display: block;
    margin-top: 5px;
}

.validation-summary-errors, .alert-bad {
    background: var(--bad-bg);
    color: var(--bad);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

.validation-summary-valid {
    display: none;
}

.form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
}

.field .hint, .form-grid .hint {
    display: block;
    margin: 6px 0 0;
    font-size: 12.5px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
    align-items: flex-end;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

    .filters .field {
        min-width: 160px;
        flex: 1 1 160px;
        max-width: 280px;
    }

    .filters .buttons {
        display: flex;
        gap: 10px;
        flex: none;
    }

    .filters .check {
        padding-top: 0;
        align-self: center;
        margin-top: 22px;
    }

/* ───── buttons ───── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    border: 1px solid #dbe0e6;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: 600 13.5px/1 var(--font-body);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 32, 43, .06);
    transition: background .12s, box-shadow .12s, transform .05s;
}

    .btn:hover {
        background: #f5f7f9;
        text-decoration: none;
    }

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background: linear-gradient(135deg, #62000a 0%, var(--maroon) 55%, #470004 100%);
    color: #fff;
    border-color: #470004;
    box-shadow: 0 8px 18px -8px rgba(84, 0, 6, .7);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #720010 0%, #5f0008 55%, #520005 100%);
    }

.filters .btn:not(.btn-primary), .btn-dark {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(22, 34, 46, .8);
}

    .filters .btn:not(.btn-primary):hover, .btn-dark:hover {
        background: #1f3040;
    }

.btn-danger {
    color: var(--bad);
    border-color: #efc9c9;
    background: #fff;
}

    .btn-danger:hover {
        background: #fdf1f1;
    }

.btn-light {
    background: #fff;
    color: var(--maroon);
    border-color: #fff;
}

    .btn-light:hover {
        background: #f7ecec;
    }

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    box-shadow: none;
}

    .btn-outline:hover {
        background: rgba(255, 255, 255, .1);
    }

.btn-sm {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 9px;
    box-shadow: none;
}

.inline {
    display: inline;
    margin: 0;
}

.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

    .row-actions.nowrap {
        flex-wrap: nowrap;
    }

/* ───── tables ───── */
.table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

table.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    padding: 14px 16px;
    background: var(--navy);
    border-bottom: 1px solid var(--navy-border);
    white-space: nowrap;
    font: 600 11.5px/1 var(--font-head);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.table td {
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
}

.table tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    background: #fafbfc;
}
/* Keep table action cells compact; prevents vertically stacked actions from making rows excessively tall. */
.table td:last-child:has(.row-actions) {
    width: 1%;
    white-space: nowrap;
}

    .table td:last-child:has(.row-actions) .row-actions {
        min-width: max-content;
    }

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table th.num {
    text-align: right;
}

.muted {
    color: var(--muted);
}

.mono {
    font: 12.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

    .pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: .82;
        flex: 0 0 6px;
    }

/* Positive state badges: compact, higher-contrast and visually intentional. */
.pill-ok,
.pill-success {
    background: #dfeee8;
    color: #0f6245;
    border: 1px solid #b7d9cb;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

.pill-ok::before,
.pill-success::before {
    content: "✓";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #176f50;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    opacity: 1;
    flex: 0 0 15px;
}

.pill-warn {
    background: var(--warn-bg);
    color: var(--warn);
}

.pill-bad {
    background: var(--bad-bg);
    color: var(--bad);
}

.pill-muted {
    background: #e9edf1;
    color: #455766;
    border: 1px solid #d2d9df;
}

.pill-info {
    background: var(--info-bg);
    color: var(--info);
}

/* ───── dashboard ───── */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 32px 36px 30px;
    margin-bottom: 22px;
    color: #fff;
    background: radial-gradient(640px 300px at 88% -10%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%), linear-gradient(118deg, #2c0306 0%, var(--maroon) 55%, #2a0305 100%);
    box-shadow: 0 22px 44px -22px rgba(84, 0, 6, .7);
}

    .hero .eyebrow {
        color: #f0b9bd;
    }

    .hero h2 {
        margin: 0 0 8px;
        font: 700 40px/1.05 var(--font-head);
        letter-spacing: .01em;
        text-transform: uppercase;
    }

    .hero p {
        margin: 0 0 22px;
        color: #ecd3d5;
        max-width: 600px;
    }

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.card {
    display: block;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 22px 18px 26px;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
}

    .card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: var(--navy);
    }

    .card.ok::before {
        background: var(--ok-dot);
    }

    .card.warn::before {
        background: #e0a526;
    }

    .card.bad::before {
        background: #c0392b;
    }

a.card:hover {
    text-decoration: none;
    border-color: #d3d9e0;
    box-shadow: 0 1px 2px rgba(20, 32, 43, .05), 0 16px 30px -16px rgba(20, 32, 43, .22);
}

.card .figure {
    font: 600 40px/1.05 var(--font-head);
    color: var(--ink);
}

.card .label {
    margin-top: 9px;
    font: 500 11.5px/1.35 var(--font-head);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.cards-sm {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

    .cards-sm .card {
        padding: 14px 18px 12px 24px;
    }

        .cards-sm .card .figure {
            font-size: 30px;
        }

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin: -4px 0 20px;
}

.tab {
    padding: 11px 18px;
    margin-bottom: -1px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}

    .tab:hover {
        color: var(--ink);
        text-decoration: none;
    }

    .tab.active {
        color: var(--maroon);
        border-bottom-color: var(--maroon);
    }

.pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.steps {
    margin: 6px 0 0;
    padding-left: 20px;
}

    .steps li {
        margin: 5px 0;
    }

.kv {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 0;
}

    .kv dt {
        padding: 14px 20px;
        font: 600 11.5px/1.4 var(--font-head);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink);
        background: var(--th);
        border-bottom: 1px solid var(--th-line);
    }

    .kv dd {
        margin: 0;
        padding: 13px 20px;
        border-bottom: 1px solid #eef0f3;
    }

        .kv dt:last-of-type, .kv dd:last-of-type {
            border-bottom: 0;
        }

.notice {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid #e0a526;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    color: var(--ink-2);
}

    .notice.good {
        border-left-color: var(--ok-dot);
    }

    .notice strong {
        color: var(--ink);
    }

code {
    background: #eef1f4;
    border: 1px solid #e1e5ea;
    color: var(--ink);
    padding: 1px 7px;
    border-radius: 6px;
    font: 12.5px ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

@media (max-width: 960px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
    }

        .sidebar.show {
            transform: none;
            box-shadow: 12px 0 40px rgba(0, 0, 0, .35);
        }

    .content {
        margin-left: 0;
        padding: 18px 16px 18px;
    }

    .menu-btn {
        display: inline-block;
    }

    .page-head h1 {
        font-size: 30px;
    }

    .kv {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 20px 18px;
    }
}

@media print {
    .sidebar, .menu-btn, .page-actions, .page-foot {
        display: none;
    }

    .content {
        margin: 0;
        padding: 0;
    }
}

/* ============================================================
   COMMON EASPC GOOGLE LOGIN PAGE
   ============================================================ */
.account-page {
    min-height: 100vh;
    background: #eef2f5;
}

.account-page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.account-card {
    width: 100%;
    max-width: 450px;
    padding: 2.5rem 2.25rem 2.35rem;
    background: #fff;
    border: 1px solid rgba(22, 35, 47, .12);
    border-top: 5px solid var(--maroon);
    border-radius: 24px;
    box-shadow: 0 28px 75px rgba(22, 35, 47, .15);
    text-align: center;
}

.account-logo {
    display: block;
    width: min(260px, 82%);
    height: auto;
    max-height: 110px;
    object-fit: contain;
    margin: 0 auto .45rem;
}

.account-subtitle {
    margin: 0 0 1.55rem;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.account-alert {
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(84, 0, 6, .14);
    border-radius: 12px;
    background: rgba(84, 0, 6, .05);
    color: var(--maroon);
    text-align: left;
    font-size: .88rem;
    line-height: 1.45;
}

.google-login-button {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-top: .35rem;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 11px;
    background: var(--maroon);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(84, 0, 6, .18);
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

    .google-login-button:hover,
    .google-login-button:focus {
        background: var(--maroon-deep);
        color: #fff;
        text-decoration: none;
        box-shadow: 0 12px 28px rgba(84, 0, 6, .24);
    }

    .google-login-button:active {
        transform: translateY(1px);
    }

    .google-login-button:focus-visible {
        outline: 3px solid rgba(84, 0, 6, .20);
        outline-offset: 3px;
    }

    .google-login-button svg {
        flex: 0 0 auto;
    }

@media (max-width: 575.98px) {
    .account-page-shell {
        padding: 1rem;
    }

    .account-card {
        padding: 2rem 1.4rem 1.9rem;
        border-radius: 18px;
    }

    .account-logo {
        width: min(230px, 85%);
    }
}


/* Always-open navigation + desktop sidebar collapse */
.brand-link {
    display: block;
    text-decoration: none;
    color: inherit
}

    .brand-link:hover {
        text-decoration: none
    }

.nav-head-static {
    cursor: default
}

.nav-group > .nav-sub {
    display: block !important
}

.nav-group > .nav-head .chev {
    display: none
}

.sidebar-collapse-btn {
    position: fixed;
    z-index: 90;
    left: calc(var(--sidebar-w) - 21px);
    top: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: #22384b;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    font: 600 30px/1 var(--font-body);
    cursor: pointer;
    transition: left .2s,transform .2s
}

    .sidebar-collapse-btn span {
        display: block;
        transform: translateY(-1px)
    }

body.sidebar-collapsed .sidebar {
    transform: translateX(-100%)
}

body.sidebar-collapsed .content {
    margin-left: 0
}

body.sidebar-collapsed .sidebar-collapse-btn {
    left: 10px
}

    body.sidebar-collapsed .sidebar-collapse-btn span {
        transform: rotate(180deg) translateY(1px)
    }

.page-head-right {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto
}

.user-menu {
    position: relative
}

    .user-menu summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(20,32,43,.06);
        font-weight: 650;
        color: var(--ink)
    }

        .user-menu summary::-webkit-details-marker {
            display: none
        }

.user-menu-popover {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 100;
    width: 230px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(20,32,43,.16)
}

.user-menu-email {
    font-size: 12px;
    color: var(--muted);
    overflow-wrap: anywhere;
    padding: 2px 4px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 9px
}

.user-menu-popover button {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 10px 12px;
    background: var(--navy);
    color: #fff;
    font: 650 13px var(--font-body);
    cursor: pointer
}

@media(max-width:960px) {
    .sidebar-collapse-btn {
        display: none
    }

    .page-head-right {
        gap: 6px
    }

    .user-menu-name {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.sidebar, .content {
    transition: transform .2s,margin-left .2s
}

.sidebar-collapse-btn {
    transition: left .2s,transform .2s
}

/* ============================================================
   2026 unified shell + modern forms + shared EASPC dialogs
   ============================================================ */
.sidebar-collapse-btn {
    top: 28px;
    left: calc(var(--sidebar-w) - 16px);
    width: 32px;
    height: 32px;
    font-size: 22px;
    border-width: 1px;
    box-shadow: 0 5px 14px rgba(0,0,0,.2)
}

    .sidebar-collapse-btn span {
        transform: translateY(-1px)
    }

body.sidebar-collapsed .sidebar-collapse-btn {
    left: 12px
}

@media(min-width:961px) {
    .page {
        padding-left: 0
    }
}

.sidebar-user-menu {
    position: relative;
    margin: 0 14px 14px
}

    .sidebar-user-menu summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 13px;
        background: #fff;
        color: var(--ink);
        box-shadow: 0 7px 20px rgba(0,0,0,.14);
        font-weight: 750
    }

        .sidebar-user-menu summary::-webkit-details-marker {
            display: none
        }

.sidebar-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sidebar-user-popover {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 160;
    padding: 12px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0,0,0,.28)
}

    .sidebar-user-popover .user-menu-email {
        padding: 2px 5px 10px;
        color: var(--muted);
        border-bottom: 1px solid var(--line);
        font-size: 12px;
        overflow-wrap: anywhere
    }

    .sidebar-user-popover button {
        width: 100%;
        margin-top: 10px;
        padding: 10px 12px;
        border: 0;
        border-radius: 10px;
        background: var(--navy);
        color: #fff;
        font-weight: 750;
        cursor: pointer
    }

/* Modern form controls */
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], input[type=file], select, textarea {
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--ink);
    box-shadow: inset 0 1px 1px rgba(20,32,43,.025);
    transition: border-color .15s,box-shadow .15s,background .15s
}

    input:hover, select:hover, textarea:hover {
        border-color: #b9c4cf;
        background: #fff
    }

    input:focus, select:focus, textarea:focus {
        border-color: var(--maroon);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(84,0,6,.09)
    }

.form-card .check {
    padding: 10px 12px;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fafbfc
}

.settings-section-break {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 16px;
    color: var(--navy);
    font: 800 18px/1.1 var(--font-head);
    letter-spacing: .04em;
    text-transform: uppercase
}

    .settings-section-break:before, .settings-section-break:after {
        content: "";
        height: 1px;
        background: #d8dfe6;
        flex: 1
    }

    .settings-section-break:before {
        max-width: 22px
    }

/* Native dialogs inherit the global body zoom. Compensate their dimensions by 1/.8 = 1.25 so they keep the intended visual size. */
.easpc-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(1100px,calc(125vw - 35px));
    width: 100%
}

    .easpc-dialog::backdrop {
        background: rgba(12,23,34,.58);
        backdrop-filter: blur(2px)
    }

.easpc-dialog-card {
    overflow: hidden;
    border: 1px solid #dfe5ea;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(8,20,30,.35)
}

.easpc-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line)
}

    .easpc-dialog-head h2 {
        margin: 4px 0 0;
        font: 800 28px/1.1 var(--font-head);
        color: var(--navy)
    }

.easpc-dialog-close {
    border: 0;
    background: #eef2f5;
    color: var(--navy);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer
}

.easpc-dialog-body {
    padding: 22px 24px;
    max-height: 90vh;
    overflow: auto
}

    .easpc-dialog-body .form-card {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: transparent
    }

.easpc-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 20px
}

.easpc-modal-loading {
    padding: 28px;
    color: var(--muted)
}

.easpc-alert-dialog {
    max-width: 650px
}

.easpc-delete-dialog {
    max-width: 775px
}

    .easpc-delete-dialog #easpcDeleteExpected {
        color: var(--maroon)
    }

@media(max-width:960px) {
    .sidebar-user-menu {
        margin: 0 12px 12px
    }

    .page {
        padding-left: 18px
    }

    .sidebar-collapse-btn {
        display: none
    }
}

.inline-check {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0 !important;
    font: 600 13px/1.3 var(--font-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-2) !important;
    cursor: pointer;
}

    .inline-check input[type=checkbox] {
        flex: 0 0 20px;
    }

/* Employee details + nested modal workflow */
.easpc-child-crud-dialog {
    max-width: min(1025px,calc(125vw - 50px));
    z-index: 220
}

    .easpc-child-crud-dialog::backdrop {
        background: rgba(10,20,30,.34);
        backdrop-filter: blur(1px)
    }

.modal-content-card {
    display: block
}

.employee-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px 18px
}

    .employee-detail-grid > div {
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fafbfc;
        display: flex;
        flex-direction: column;
        gap: 5px
    }

.detail-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.employee-related-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.employee-related-head h3, .modal-list-head h3 {
    margin: 3px 0 0;
    font: 800 20px/1.15 var(--font-head);
    color: var(--navy)
}

.employee-related-actions, .modal-list-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap
}

.modal-table-wrap {
    max-height: 48vh
}

.modal-list-head {
    margin-bottom: 14px
}

@media(max-width:680px) {
    .employee-detail-grid {
        grid-template-columns: 1fr
    }
}

/* Parent-module directory sub-tabs */
.directory-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff
}

    .directory-tabs a {
        padding: 9px 14px;
        border-radius: 10px;
        color: var(--muted);
        font-weight: 700;
        font-size: 13px;
        text-decoration: none
    }

        .directory-tabs a:hover {
            background: #f3f6f8;
            color: var(--navy);
            text-decoration: none
        }

        .directory-tabs a.active {
            background: var(--navy);
            color: #fff;
            box-shadow: 0 6px 16px rgba(17,34,49,.16)
        }
/* Employee document file thumbnails */
.document-file-thumb {
    display: inline-flex;
    width: 58px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: #f7f9fb;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(20,32,43,.08);
    vertical-align: middle
}

    .document-file-thumb:hover {
        border-color: #b8c2cc;
        box-shadow: 0 4px 12px rgba(20,32,43,.14);
        text-decoration: none
    }

    .document-file-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.document-file-tile {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--navy)
}

.document-file-icon {
    font-size: 18px;
    line-height: 1
}

.document-file-ext {
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1
}



/* In-app document preview */
.document-preview-modal {
    width: min(100%, 1225px);
}

.document-preview-head {
    margin-bottom: 14px;
}

.document-preview-frame-wrap {
    width: 100%;
    min-height: 700px;
    border: 1px solid var(--easpc-border);
    border-radius: 14px;
    overflow: hidden;
    background: #f7f8f9;
}

.document-preview-frame {
    display: block;
    width: 100%;
    height: min(87.5vh, 950px);
    min-height: 700px;
    border: 0;
    background: #fff;
}

.document-preview-image {
    display: block;
    max-width: 100%;
    max-height: min(87.5vh, 950px);
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 720px) {
    .document-preview-frame-wrap,
    .document-preview-frame {
        min-height: 420px;
    }
}

/* Upload progress state */
.easpc-upload-progress {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(2px);
    border-radius: inherit
}

.easpc-upload-progress-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    font-weight: 800;
    color: var(--navy)
}

.easpc-upload-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e2e7ec;
    border-top-color: var(--maroon);
    border-radius: 50%;
    animation: easpc-spin .75s linear infinite
}

@keyframes easpc-spin {
    to {
        transform: rotate(360deg)
    }
}

.form-card[data-upload-form], .modal-content-card:has(form[data-upload-form]) {
    position: relative
}

.contract-form-card {
    max-width: none;
    width: 100%
}

.contract-form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

@media(max-width:760px) {
    .contract-form-grid {
        grid-template-columns: 1fr
    }
}

/* Consistent table action icon system. */
.icon-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7dee5;
    background: #fff;
    color: #273746;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 34px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .icon-action svg {
        width: 17px;
        height: 17px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .icon-action-image {
        width: 17px;
        height: 17px;
        display: block;
        object-fit: contain;
        flex: 0 0 17px;
    }

    .icon-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(16,31,45,.10);
    }

/* Global table-action palette: solid theme navy for normal actions and deep maroon for destructive actions. */
.icon-action,
.icon-action-view,
.icon-action-download,
.icon-action-edit,
.icon-action-access,
.icon-action-history,
.icon-action-create,
.icon-action-approve,
.icon-action-payment,
.icon-action-preview,
.icon-action-print {
    color: #fff;
    border-color: var(--navy-3);
    background: var(--navy);
    box-shadow: 0 4px 10px rgba(15, 24, 31, .18);
}

.icon-action-renew,
.icon-action-delete,
.icon-action-cancel,
.icon-action-reject {
    color: #fff;
    border-color: var(--maroon-deep);
    background: var(--maroon);
    box-shadow: 0 4px 10px rgba(84, 0, 6, .18);
}

.icon-action:hover,
.icon-action-view:hover,
.icon-action-download:hover,
.icon-action-edit:hover,
.icon-action-access:hover,
.icon-action-history:hover,
.icon-action-create:hover,
.icon-action-approve:hover,
.icon-action-payment:hover,
.icon-action-preview:hover,
.icon-action-print:hover {
    color: #fff;
    background: var(--navy-3);
    border-color: var(--navy-3);
    box-shadow: 0 6px 14px rgba(15, 24, 31, .24);
}

.icon-action-renew:hover,
.icon-action-delete:hover,
.icon-action-cancel:hover,
.icon-action-reject:hover {
    color: #fff;
    background: var(--maroon-deep);
    border-color: var(--maroon-deep);
    box-shadow: 0 6px 14px rgba(58, 3, 8, .24);
}

/* Small inline icons added to normal site buttons inherit the button theme color. */
.easpc-btn-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Company form: application assignment pills match the project control language. */
.pill-select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pill-select {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.pill-select > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.pill-select > span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid #d8dee5;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: 700 13px/1 var(--font-body);
    box-shadow: 0 1px 3px rgba(20,32,43,.08);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.pill-select:hover > span {
    border-color: var(--navy-border);
    background: #f5f8fa;
}

.pill-select > input[type="checkbox"]:checked + span {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    box-shadow: 0 6px 14px rgba(84,0,6,.20);
}

.pill-select > input[type="checkbox"]:focus-visible + span {
    outline: 3px solid rgba(84,0,6,.14);
    outline-offset: 2px;
}

/* Company sequence modal content: keep controls compact and consistent inside the popup. */
.easpc-dialog .company-sequence-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.easpc-dialog .company-sequence-card .table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* Employee document edit file layout */
.document-upload-field,
.current-document-field {
    align-self: start;
}

.current-document-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.document-current-thumb {
    display: inline-flex;
    width: 118px;
    height: 86px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #f7f9fb;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(20,32,43,.10);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.document-current-thumb:hover {
    border-color: var(--maroon);
    box-shadow: 0 6px 18px rgba(20,32,43,.16);
    transform: translateY(-1px);
    text-decoration: none;
}

.document-current-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 860px) {
    .document-upload-field {
        grid-column: span 1;
    }

    .current-document-field {
        grid-column: span 1;
    }
}


/* Document history modal */
.document-history-card {
    gap: 16px;
}

.document-history-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--maroon);
    border-radius: 10px;
    background: #f8fafb;
}

.document-history-summary strong {
    color: var(--navy);
    font-size: 14px;
}

.document-history-table-wrap {
    border: 1px solid #d8e0e6;
    border-radius: 12px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 3px 12px rgba(17,34,49,.06);
}

.document-history-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.document-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 12px;
    background: var(--navy);
    color: #fff;
    border-bottom: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.document-history-table thead th:first-child { border-radius: 10px 0 0 0; }
.document-history-table thead th:last-child { border-radius: 0 10px 0 0; }

.document-history-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid #e6ebef;
    vertical-align: middle;
    color: #1d2b36;
    font-size: 13px;
}

.document-history-table tbody tr:last-child td { border-bottom: 0; }
.document-history-table tbody tr:hover td { background: #fafbfc; }

.document-history-table th:nth-child(1), .document-history-table td:nth-child(1) { width: 76px; }
.document-history-table th:nth-child(2), .document-history-table td:nth-child(2),
.document-history-table th:nth-child(3), .document-history-table td:nth-child(3) { width: 105px; }
.document-history-table th:nth-child(4), .document-history-table td:nth-child(4) { width: 120px; }
.document-history-table th:nth-child(5), .document-history-table td:nth-child(5) { width: 88px; text-align: center; }
.document-history-table th:nth-child(7), .document-history-table td:nth-child(7) { width: 120px; }
.document-history-table th:nth-child(8), .document-history-table td:nth-child(8) { width: 118px; }

.history-version {
    display: inline-flex;
    min-width: 34px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 7px;
    background: #e9eef2;
    color: var(--navy);
    font-weight: 850;
}

.history-document-number { font-weight: 700; }
.history-file-cell .document-file-thumb { margin: 0 auto; }

.history-created { white-space: nowrap; }
.history-created span, .history-created small { display: block; }
.history-created small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.history-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.history-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.history-status-current { background: #e7f3ed; color: #176b45; }
.history-status-superseded { background: #edf1f4; color: #556674; }

/* Vehicle form select: force the browser control and popup into the light project theme. */
.themed-select,
select.themed-select {
    color-scheme: light;
    background-color: #fafbfd !important;
    color: var(--ink) !important;
    border-color: #d8e0e8 !important;
}

select.themed-select option {
    background: #fff;
    color: var(--ink);
}

select.themed-select:focus {
    background-color: #fff !important;
    border-color: var(--maroon) !important;
}

.vehicle-detail-grid .vehicle-detail-notes {
    grid-column: 1 / -1;
}

.vehicle-documents-inline .document-list-table {
    margin-top: 12px;
}

/* Larger detail modals + four-column detail layouts */
.easpc-dialog.details-modal-dialog {
    width: min(96vw, 1430px);
    max-width: min(1430px, 96vw);
}

.detail-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-grid-four .detail-span-four,
.vehicle-detail-grid .vehicle-detail-notes {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .detail-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .detail-grid-four {
        grid-template-columns: 1fr;
    }
}


/* Renewal/payment modals: show history in the same dialog without crowding the form. */
.renew-history-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.renew-history-section .section-head { margin-bottom: 10px; }
.renew-history-section .section-head h3 { margin: 2px 0 0; font-size: 18px; }
.compact-history-table { min-width: 760px; }
.compact-history-table td, .compact-history-table th { vertical-align: middle; }

/* ------------------------------------------------------------
   Shared modal footer alignment + theme colors
   ------------------------------------------------------------ */
.easpc-dialog .form-actions,
.easpc-dialog .easpc-dialog-actions {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.easpc-dialog .form-actions .btn,
.easpc-dialog .easpc-dialog-actions .btn {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(15, 32, 48, .14);
}

.easpc-dialog .form-actions .btn.easpc-modal-action-primary,
.easpc-dialog .easpc-dialog-actions .btn.easpc-modal-action-primary {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
}

.easpc-dialog .form-actions .btn.easpc-modal-action-primary:hover,
.easpc-dialog .easpc-dialog-actions .btn.easpc-modal-action-primary:hover {
    background: #0b1a27 !important;
    border-color: #0b1a27 !important;
    color: #fff !important;
}

.easpc-dialog .form-actions .btn.easpc-modal-action-exit,
.easpc-dialog .easpc-dialog-actions .btn.easpc-modal-action-exit {
    background: var(--maroon) !important;
    border-color: var(--maroon) !important;
    color: #fff !important;
}

.easpc-dialog .form-actions .btn.easpc-modal-action-exit:hover,
.easpc-dialog .easpc-dialog-actions .btn.easpc-modal-action-exit:hover {
    background: #560007 !important;
    border-color: #560007 !important;
    color: #fff !important;
}

.easpc-dialog .form-actions .btn .easpc-btn-icon,
.easpc-dialog .easpc-dialog-actions .btn .easpc-btn-icon {
    color: currentColor;
    stroke: currentColor;
}

/* ===== Shared modal header status toggle ===== */
.modal-header-action-source {
    display: none !important;
}

.easpc-dialog-head-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.easpc-dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    font-size: .78rem;
    font-weight: 800;
    color: var(--navy);
}

.modal-status-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modal-status-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--maroon);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: background .16s ease, box-shadow .16s ease;
}

.modal-status-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.24);
    transition: transform .16s ease;
}

.modal-status-toggle.is-active .modal-status-track {
    background: var(--navy);
}

.modal-status-toggle.is-active .modal-status-track::after {
    transform: translateX(20px);
}

.modal-status-toggle.is-inactive .modal-status-text {
    color: var(--maroon);
}

.modal-status-toggle:focus-within .modal-status-track {
    box-shadow: 0 0 0 3px rgba(20, 39, 55, .14);
}

/* All document thumbnails use the same size as the Edit Document current-file preview. */
.document-file-thumb,
.document-current-thumb {
    width: 118px !important;
    height: 86px !important;
    border-radius: 12px !important;
}

/* ===== Searchable employee dropdown: Document Browser ===== */
.document-browser-search .document-employee-picker-field {
    flex: 1 1 520px;
    max-width: 620px;
}

.searchable-dropdown {
    position: relative;
}

.searchable-dropdown-input {
    padding-right: 46px !important;
}

.searchable-dropdown-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 42px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid #e1e5ea;
    border-radius: 0 11px 11px 0;
    background: transparent;
    color: #6b7b85;
    cursor: pointer;
}

.searchable-dropdown-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.searchable-dropdown.is-open .searchable-dropdown-toggle svg {
    transform: rotate(180deg);
}

.searchable-dropdown-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 310px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #d9e0e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(20, 32, 43, .16);
}

.searchable-dropdown-option {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: 500 13.5px/1.35 var(--font-body);
    text-align: left;
    cursor: pointer;
}

.searchable-dropdown-option:hover,
.searchable-dropdown-option.is-active,
.searchable-dropdown-option[aria-selected="true"] {
    background: #f1f4f7;
}

.searchable-dropdown-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 13px;
}

/* ========================================================================
   Modal consistency fixes
   ======================================================================== */

/* Inputs with no explicit type are text controls in HTML, but input[type=text]
   does not match them. Style them exactly like the rest of the site. */
input:not([type]) {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--ink);
    font: inherit;
    box-shadow: inset 0 1px 1px rgba(20,32,43,.025);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

input:not([type]):hover {
    border-color: #b9c4cf;
    background: #fff;
}

input:not([type]):focus {
    outline: 0;
    border-color: var(--maroon);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(84,0,6,.09);
}

/* Directory create/edit popups use the same spacing and control treatment as
   standard site forms, regardless of which directory is being edited. */
.easpc-dialog.directory-modal-dialog {
    width: min(94vw, 1180px);
    max-width: min(1180px, 94vw);
}

.easpc-dialog.directory-modal-dialog .easpc-dialog-body {
    padding: 24px 28px;
}

.easpc-dialog.directory-modal-dialog .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 24px;
    align-items: end;
}

.easpc-dialog.directory-modal-dialog .choice-pill {
    align-self: center;
}

.easpc-dialog.directory-modal-dialog .form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* Branch sequence popup: make it read like a normal website modal rather than
   a page/card embedded inside a dialog. */
.easpc-dialog.sequence-modal-dialog {
    width: min(95vw, 1320px);
    max-width: min(1320px, 95vw);
}

.easpc-dialog.sequence-modal-dialog .easpc-dialog-body {
    padding: 24px 28px;
}

.easpc-dialog.sequence-modal-dialog .company-sequence-card {
    margin: 0 0 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16,31,45,.06);
}

.easpc-dialog.sequence-modal-dialog .company-sequence-card > .muted {
    margin: 0;
    padding: 17px 20px;
    border-left: 4px solid var(--navy);
    background: #fafbfd;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.easpc-dialog.sequence-modal-dialog .company-sequence-card .table-wrap {
    margin: 0;
    border-top: 1px solid var(--line);
}

.easpc-dialog.sequence-modal-dialog .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

.easpc-dialog.sequence-modal-dialog .form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .easpc-dialog.sequence-modal-dialog .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .easpc-dialog.sequence-modal-dialog .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Document previews get a purpose-built large dialog. Keep the modal itself
   fixed to the viewport and let the document scale inside it, rather than
   creating a second vertical scrollbar around the preview. */
.easpc-dialog.document-preview-dialog {
    width: min(97vw, 1600px);
    max-width: min(1600px, 97vw);
}

.easpc-dialog.document-preview-dialog .easpc-dialog-card {
    height: min(94vh, 1100px);
    display: flex;
    flex-direction: column;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-head {
    flex: 0 0 auto;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 18px 22px 20px;
}

.easpc-dialog.document-preview-dialog .document-preview-modal {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.easpc-dialog.document-preview-dialog .document-preview-head {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

.easpc-dialog.document-preview-dialog .document-preview-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.easpc-dialog.document-preview-dialog .document-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.easpc-dialog.document-preview-dialog .document-preview-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.easpc-dialog.document-preview-dialog .form-actions {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ========================================================================
   Unified checkbox pills
   Keep every ordinary checkbox consistent with the application's pill-select
   control. Header Active/Inactive switches remain the dedicated toggle style.
   ======================================================================== */
.choice-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    cursor: pointer;
    align-self: end;
}

.choice-pill > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.choice-pill > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #d8dee5;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: 700 13px/1 var(--font-body);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(20,32,43,.08);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.choice-pill:hover > span {
    border-color: var(--navy-border);
    background: #f5f8fa;
}

.choice-pill > input[type="checkbox"]:checked + span {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    box-shadow: 0 6px 14px rgba(84,0,6,.20);
}

.choice-pill > input[type="checkbox"]:checked + span::before {
    content: "✓";
    margin-right: 7px;
    font-size: 12px;
    font-weight: 900;
}

.choice-pill > input[type="checkbox"]:focus-visible + span {
    outline: 3px solid rgba(84,0,6,.14);
    outline-offset: 2px;
}

/* Directory forms should read like the rest of the site: equal controls,
   aligned pills, and a clean footer rather than browser-default checkboxes. */
.easpc-dialog.directory-modal-dialog .form-card {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.easpc-dialog.directory-modal-dialog .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 24px;
    align-items: end;
}

.easpc-dialog.directory-modal-dialog .choice-pill {
    min-height: 46px;
    align-items: center;
    align-self: end;
}

.easpc-dialog.directory-modal-dialog .choice-pill > span {
    min-height: 46px;
    min-width: 165px;
}

.easpc-dialog.directory-modal-dialog .field .hint {
    margin-top: 7px;
}

@media (max-width: 900px) {
    .easpc-dialog.directory-modal-dialog .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .easpc-dialog.directory-modal-dialog .form-grid {
        grid-template-columns: 1fr;
    }

    .easpc-dialog.directory-modal-dialog .choice-pill,
    .easpc-dialog.directory-modal-dialog .choice-pill > span {
        width: 100%;
    }
}

/* ========================================================================
   Application-wide selectable pills + themed dropdowns
   ======================================================================== */

/* Native select remains the form value source; the visible control below is
   fully themed so option hover/selection is consistent across browsers. */
.easpc-native-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.easpc-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.easpc-select-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 1px rgba(20,32,43,.025);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.easpc-select-trigger:hover {
    border-color: #b9c4cf;
    background: #fff;
}

.easpc-select.is-open .easpc-select-trigger,
.easpc-select-trigger:focus-visible {
    outline: 0;
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px rgba(84,0,6,.12);
    background: #fff;
}

.easpc-select-trigger:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.easpc-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.easpc-select-chevron {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: #687987;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}

.easpc-select.is-open .easpc-select-chevron {
    transform: rotate(180deg);
}

.easpc-select-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid #d8dee5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(20,32,43,.18);
}

.easpc-select-option {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 9px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    font: 600 13.5px/1.3 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.easpc-select-option + .easpc-select-option {
    margin-top: 3px;
}

.easpc-select-option:hover,
.easpc-select-option.is-keyboard-active,
.easpc-select-option.is-selected {
    background: var(--maroon);
    color: #fff;
}

.easpc-select-option:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Application-wide selectable pills: same rectangular pill language as the
   reference controls, with maroon hover and selected states. */
.pill-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    width: 100%;
    align-items: stretch;
}

.pill-select {
    display: flex;
    width: 100%;
    min-width: 0;
}

.pill-select > span,
.choice-pill > span,
.check label,
.inline-check span {
    min-height: 48px;
    width: 100%;
    justify-content: flex-start;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid #d8dee5;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(20,32,43,.09);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.pill-select:hover > span,
.choice-pill:hover > span,
.check label:hover,
.inline-check span:hover {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    box-shadow: 0 6px 14px rgba(84,0,6,.18);
}

.pill-select > input[type="checkbox"]:checked + span,
.choice-pill > input[type="checkbox"]:checked + span,
.check input[type=checkbox]:checked + label,
.inline-check input[type=checkbox]:checked + span {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff;
    box-shadow: 0 6px 14px rgba(84,0,6,.22);
}

@media (max-width: 780px) {
    .pill-select-grid {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    }
}

/* ========================================================================
   Modal form alignment
   Keep every control in a modal aligned from the top of its grid cell. Hints,
   validation text, or taller controls must not push neighboring fields down.
   Standalone checkbox/pill controls receive the same label-height offset as a
   normal field so their control box starts on the same horizontal line as the
   inputs/selects beside them.
   ======================================================================== */
.easpc-dialog .form-grid {
    align-items: start;
}

.easpc-dialog .form-grid > .field,
.easpc-dialog .form-grid > .select-field {
    align-self: start;
    min-width: 0;
}

.easpc-dialog .form-grid > .choice-pill,
.easpc-dialog .form-grid > .check,
.easpc-dialog .form-grid > .inline-check,
.easpc-dialog .form-grid > .pill-select {
    align-self: start;
    margin-top: 25px;
}

/* Directory modals previously bottom-aligned each grid cell. Override that so
   fields with hints (for example Alert Threshold) do not shift other inputs. */
.easpc-dialog.directory-modal-dialog .form-grid,
.easpc-dialog.sequence-modal-dialog .form-grid {
    align-items: start;
}

.easpc-dialog.directory-modal-dialog .choice-pill,
.easpc-dialog.directory-modal-dialog .check,
.easpc-dialog.directory-modal-dialog .inline-check,
.easpc-dialog.directory-modal-dialog .pill-select {
    align-self: start;
}

@media (max-width: 620px) {
    .easpc-dialog .form-grid > .choice-pill,
    .easpc-dialog .form-grid > .check,
    .easpc-dialog .form-grid > .inline-check,
    .easpc-dialog .form-grid > .pill-select {
        margin-top: 0;
    }
}

/* Global button sizing: compact text buttons use the same visual dimensions as primary page actions (e.g. Add Branch). */
.btn-sm {
    min-height: 40px;
    padding: 0 20px;
    font-size: 13.5px;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(20, 32, 43, .06);
}

.btn-sm.btn-primary {
    box-shadow: 0 8px 18px -8px rgba(84, 0, 6, .7);
}

.filters .btn-sm:not(.btn-primary),
.page-actions .btn-sm:not(.btn-primary),
.section-actions .btn-sm:not(.btn-primary) {
    min-height: 40px;
    padding-inline: 20px;
}

/* Larger document viewer: use almost the full viewport so scanned bills and
   other attachments are readable without wasting space around the preview. */
.easpc-dialog.document-preview-dialog {
    width: min(99vw, 1800px);
    max-width: min(1800px, 99vw);
}

.easpc-dialog.document-preview-dialog .easpc-dialog-card {
    height: 97vh;
    max-height: 97vh;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-body {
    padding: 14px 18px 16px;
}

.easpc-dialog.document-preview-dialog .document-preview-head {
    margin-bottom: 8px;
}

.easpc-dialog.document-preview-dialog .document-preview-frame-wrap {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.easpc-dialog.document-preview-dialog .document-preview-image,
.easpc-dialog.document-preview-dialog .document-preview-frame {
    width: 100%;
    height: 100%;
}

/* Edit Bill shows the existing attachment exactly like other document
   thumbnails. File replacement/removal is intentionally available only when
   adding a new bill. */
.bill-current-file-row {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Group related form pills into a compact row instead of spreading them across
   the full modal grid. Used by all document-type and bill-type forms. */
.easpc-dialog .form-grid > .form-pill-row,
.form-grid > .form-pill-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(180px, 220px);
    gap: 12px;
    align-items: start;
    justify-content: start;
    margin-top: 4px;
}

.easpc-dialog .form-grid > .form-pill-row.form-pill-row-two,
.form-grid > .form-pill-row.form-pill-row-two {
    grid-template-columns: repeat(2, minmax(180px, 220px));
}

.form-pill-row .choice-pill,
.form-pill-row .pill-select,
.form-pill-row .check,
.form-pill-row .inline-check {
    margin: 0 !important;
    width: 100%;
    align-self: start;
}

.form-pill-row .choice-pill > span,
.form-pill-row .pill-select > span,
.form-pill-row .check > span,
.form-pill-row .inline-check > span {
    width: 100%;
    justify-content: flex-start;
}

@media (max-width: 560px) {
    .easpc-dialog .form-grid > .form-pill-row.form-pill-row-two,
    .form-grid > .form-pill-row.form-pill-row-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .easpc-dialog .form-grid > .form-pill-row,
    .form-grid > .form-pill-row {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
}

/* Duplicate document/bill guard shown inside add/edit modals. */
.duplicate-record-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(104, 0, 8, .18);
    border-left: 4px solid var(--maroon);
    border-radius: 12px;
    background: rgba(104, 0, 8, .045);
}

.duplicate-record-warning > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.duplicate-record-warning strong {
    color: var(--maroon);
    font-weight: 800;
}

.duplicate-record-warning span {
    color: var(--muted);
    line-height: 1.4;
}

.duplicate-record-warning .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .duplicate-record-warning {
        align-items: stretch;
        flex-direction: column;
    }
    .duplicate-record-warning .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Document preview dialogs live inside the application's 80% page zoom.
   Compensate for that zoom so the viewer is actually almost full-screen
   visually, rather than only ~80% of the viewport. */
.easpc-dialog.document-preview-dialog {
    width: min(123.75vw, 2250px);
    max-width: min(2250px, 123.75vw);
}

.easpc-dialog.document-preview-dialog .easpc-dialog-card {
    height: 121.25vh;
    max-height: 121.25vh;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-body {
    min-height: 0;
    overflow: hidden;
    padding: 12px 16px 14px;
}

.easpc-dialog.document-preview-dialog .document-preview-modal {
    height: 100%;
    min-height: 0;
}

.easpc-dialog.document-preview-dialog .document-preview-frame-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}


/* Final document-preview sizing/layout.
   The application body is rendered at zoom: .8, so these dimensions are
   intentionally 1.25x the desired visual viewport size. Keep the dialog
   inset from the screen edges and let the preview consume all remaining
   vertical space instead of being capped by the generic 90vh modal body. */
.easpc-dialog.document-preview-dialog {
    width: min(120vw, 2000px);
    max-width: min(2000px, 120vw);
    margin: auto;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-card {
    height: 117.5vh;
    max-height: 117.5vh;
    display: flex;
    flex-direction: column;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-head {
    flex: 0 0 auto;
}

.easpc-dialog.document-preview-dialog .easpc-dialog-body {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
}

.easpc-dialog.document-preview-dialog .document-preview-modal {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.easpc-dialog.document-preview-dialog .document-preview-head {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.easpc-dialog.document-preview-dialog .document-preview-frame-wrap {
    flex: 1 1 0;
    width: 100%;
    height: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
}

.easpc-dialog.document-preview-dialog .document-preview-frame,
.easpc-dialog.document-preview-dialog .document-preview-image {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    border: 0;
}

.easpc-dialog.document-preview-dialog .document-preview-image {
    object-fit: contain;
}

.easpc-dialog.document-preview-dialog .form-actions {
    flex: 0 0 auto;
    margin-top: 10px;
    padding-top: 10px;
}