/* ════════════════════════════════════════════════════════════
   Superior Safety OS — Admin/Trainer surface
   Source of truth: docs/DesignSystem.md (do not invent values)
   ─ TOKENS block is mirrored in portal/assets/css/portal.css ─
   ════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
/* Palette "1a — Amber hi-vis" (client-chosen 2026-07-31, see Superior
   Safety OS design brief/THEMING.md). --navy is the SURFACE color
   (sidebar, headers, dark cards) — NOT ink; plain ink/body text is
   hardcoded #14171C throughout this file, it does not use a token. */
:root {
    --navy: #0B2447;
    --night: #071A35;
    --accent: #FFB100;
    --accent-soft: #FFB100;
    --cta: #FFB100;
    --cta-hover: #E89E00;
    --steel: #10708C;
    --link: #10708C;
    --slate: #3C4A5F;
    --navy-hover: #16305A;

    --paper: #F7F9FC;

    /* Semantic — identical in every theme, per THEMING.md. */
    --success: #2E7D46;
    --danger: #C7451A;
    --warning: #B8860B;
    --info: #1E6DA8;

    --bg-app: #EDEFF3;
    --bg-track: #E6EAF0;
    --bg-disabled: #F2F4F8;
    --border: #DDE3EC;
    --border-input: #C3CCD9;
    --muted: #566578;
    --on-navy-soft: #C4D0E0;
    --on-navy-muted: #8194ad;
    --danger-hover: #A93712;
    --success-glyph: #3EC76B;

    --font-body: 'Barlow', system-ui, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --shadow-card-hover: 0 3px 10px rgba(11, 36, 71, .14);
    --shadow-dropdown: 0 16px 40px rgba(11, 36, 71, .2);
    --shadow-modal: 0 24px 60px rgba(7, 26, 53, .4);
    --shadow-toast: 0 12px 30px rgba(7, 26, 53, .35);
}

::selection { background: var(--accent); color: #14171C; }

body {
    font-family: var(--font-body);
    background: var(--bg-app);
    color: #14171C;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .ss-display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.mono { font-family: var(--font-mono); }

a { color: var(--link); text-decoration: none; }
a:hover { color: #14171C; }

:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    font-size: 21px;
}

/* Hazard stripe utility */
.ss-hazard { height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--night) 14px 28px); }
.ss-hazard--card { height: 8px; background: repeating-linear-gradient(-45deg, var(--accent) 0 16px, var(--night) 16px 32px); }

/* Mono eyebrow */
.ss-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
}

/* Placard chips */
.ss-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 2px;
    background: var(--navy); color: var(--accent-soft);
}
.ss-chip--outline { background: #fff; color: #14171C; border: 1px solid var(--link); }
.ss-chip--amber { background: var(--accent); color: #14171C; }

/* Chips used as links (filter pills): beat the global a/a:hover colors */
a.ss-chip { text-decoration: none; }
a.ss-chip:hover { background: var(--navy-hover); color: #fff; }
.ss-chip.is-active,
a.ss-chip.is-active:hover { background: var(--accent); color: #14171C; }

/* ── BOOTSTRAP OVERRIDES: buttons ───────────────────────────── */
.btn { font-weight: 600; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-sm { min-height: 34px; font-size: 13px; }

.btn-primary { background: var(--cta); border-color: var(--cta); color: #14171C; }
.btn-primary:hover, .btn-primary:focus { background: var(--cta-hover); border-color: var(--cta-hover); color: #14171C; }

.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }

.btn-outline-primary, .btn-outline-secondary {
    background: #fff; color: #14171C; border: 1.5px solid var(--link);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--paper); color: #14171C; border-color: var(--link); }

.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-outline-danger { color: var(--danger); border: 1.5px solid #E7C3B7; background: #fff; }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn-ghost { background: transparent; color: #14171C; border: none; }
.btn-ghost:hover { background: var(--bg-app); }

.btn:disabled, .btn.disabled { background: var(--border); border-color: var(--border); color: var(--muted); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
    border: 1.5px solid var(--border-input);
    border-radius: 5px;
    min-height: 44px;
    color: #14171C;
    font-size: 15px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--steel);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}
.form-control.is-invalid { border-color: var(--danger); background-color: #FDF3F0; }
.form-control.is-valid { border-color: var(--success); background-color: #F1F8F3; }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-text { color: var(--muted); }
.form-check-input { width: 18px; height: 18px; }
.form-check-input:checked { background-color: #14171C; border-color: #14171C; }

/* ── Cards / KPI ────────────────────────────────────────────── */
.card { border: 1px solid var(--border); border-radius: 8px; }
.card-header { background: #fff; border-bottom: 1px solid var(--bg-app); font-weight: 600; }

.ss-kpi {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 18px 20px; border-top: 3px solid var(--steel);
}
.ss-kpi .ss-kpi-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ss-kpi .ss-kpi-value { font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1.1; }
.ss-kpi .ss-kpi-sub { font-size: 12px; color: var(--muted); }
.ss-kpi--warning { border-top-color: var(--warning); }
.ss-kpi--danger { border-top-color: var(--danger); }
.ss-kpi--navy { background: var(--navy); border-color: var(--navy); border-top-color: var(--accent); color: #fff; }
.ss-kpi--navy .ss-kpi-label { color: var(--accent-soft); }
.ss-kpi--navy .ss-kpi-sub { color: var(--on-navy-soft); }

/* ── Tables (navy header) ───────────────────────────────────── */
.ss-table { margin-bottom: 0; }
.ss-table thead th {
    background: var(--navy); color: var(--paper);
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    padding: 12px 16px; border: none;
    position: sticky; top: 0; z-index: 1;
}
.ss-table tbody td { padding: 12px 16px; font-size: 14px; border-color: var(--bg-app); vertical-align: middle; }
.ss-table tbody td:first-child { font-weight: 600; }
.ss-table tbody tr:hover { background: var(--paper); }
.ss-table .num { text-align: right; font-family: var(--font-mono); }
.ss-table-footer {
    padding: 12px 16px; background: var(--paper);
    border-top: 1px solid var(--bg-app);
    font-size: 12px; color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
}

/* Table → stacked cards on mobile */
@media (max-width: 768px) {
    .ss-table-collapse thead { display: none; }
    .ss-table-collapse tbody tr {
        display: block; border: 1px solid var(--border); border-radius: 6px;
        padding: 8px 14px; margin: 10px; background: var(--paper);
    }
    .ss-table-collapse tbody td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 6px 0; }
    .ss-table-collapse tbody td[data-label]::before {
        content: attr(data-label);
        font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
        text-transform: uppercase; color: var(--muted); align-self: center;
    }
    /* Action cells with no data-label (or an empty one) have nothing to pair
       against — right-align their contents instead of spreading to opposite
       edges of the stacked card. */
    .ss-table-collapse tbody td:not([data-label]),
    .ss-table-collapse tbody td[data-label=""] {
        justify-content: flex-end; gap: 8px;
    }

    .ss-company-employee-row { flex-wrap: wrap; }
    .ss-company-employee-row > .flex-shrink-0 { flex-basis: 100%; justify-content: flex-end; margin-top: 6px; }
}

/* ── Status badges (full matrix — docs/DesignSystem.md §2.4) ── */
.ss-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 3px; line-height: 1.2;
    white-space: nowrap;
}
.ss-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.ss-badge--draft    { background: #EDEFF3; color: var(--slate); border: 1px solid var(--border-input); }
.ss-badge--sent     { background: #E7F0F8; color: #1E6DA8; }
.ss-badge--viewed   { background: #E5F5FA; color: #0F7591; }
.ss-badge--approved { background: #E8F4EC; color: #2E7D46; }
.ss-badge--declined { background: #FBEDE8; color: #C7451A; }
.ss-badge--expired-quote { background: #F3EEE3; color: #8A6D1A; }

.ss-badge--scheduled   { background: #E7F0F8; color: #1E6DA8; }
.ss-badge--in-progress { background: #FFF4D6; color: #8A6D1A; }
.ss-badge--completed   { background: #E8F4EC; color: #2E7D46; }
.ss-badge--invoiced    { background: #EAE6F2; color: #5B4B8A; }
.ss-badge--paid        { background: var(--navy); color: var(--accent-soft); } /* brand-tied, not semantic — matches docs/DesignSystem.md §7 */

.ss-badge--valid    { background: #E8F4EC; color: #2E7D46; }
.ss-badge--expiring { background: #FFF4D6; color: #8A6D1A; }
.ss-badge--expiring .dot { background: #B8860B; }
.ss-badge--expired  { background: #FBEDE8; color: #C7451A; }

.ss-badge--active   { background: #E8F4EC; color: #2E7D46; }
.ss-badge--inactive,
.ss-badge--neutral  { background: #EDEFF3; color: var(--slate); }
.ss-badge--new      { background: #E7F0F8; color: #1E6DA8; }
.ss-badge--warning  { background: #FFF4D6; color: #8A6D1A; }
.ss-badge--danger   { background: #FBEDE8; color: #C7451A; }

/* ── Empty / loading / error states ─────────────────────────── */
.ss-empty { text-align: center; padding: 48px 24px; }
.ss-empty .ss-empty-icon {
    width: 60px; height: 60px; margin: 0 auto 16px;
    border: 2px dashed var(--border-input); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--border-input); font-size: 24px;
}
.ss-empty h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.ss-empty p { font-size: 14px; color: var(--slate); max-width: 320px; margin: 0 auto 18px; }

.ss-skeleton {
    height: 14px; border-radius: 4px;
    background: linear-gradient(90deg, #EDEFF3 25%, #E2E6ED 50%, #EDEFF3 75%);
    background-size: 200% 100%;
    animation: ssShimmer 1.3s ease-in-out infinite;
}
@keyframes ssShimmer { to { background-position: -100% 0; } }
@keyframes ssSpin { to { transform: rotate(360deg); } }
@keyframes ssToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ss-error-banner {
    background: #FBEDE8; border: 1px solid #E6C4B8; border-left: 3px solid var(--danger);
    border-radius: 6px; padding: 14px 16px;
    display: flex; gap: 12px; align-items: center;
}

/* ── Toast ──────────────────────────────────────────────────── */
.ss-toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 10px; }
.ss-toast {
    background: var(--navy); color: #fff;
    padding: 13px 16px; border-radius: 6px;
    border-left: 4px solid var(--success);
    box-shadow: var(--shadow-toast);
    animation: ssToastIn .25s ease;
    display: flex; gap: 10px; align-items: center; font-size: 14px;
    max-width: 360px;
}
.ss-toast--error { border-left-color: var(--danger); }
@media (max-width: 768px) { .ss-toast-region { left: 12px; right: 12px; } .ss-toast { max-width: none; } }

/* ── App shell: sidebar + topbar ────────────────────────────── */
.ss-app { display: flex; min-height: 100vh; }

.ss-sidebar {
    width: 236px; flex: none;
    background: var(--night); color: var(--on-navy-soft);
    display: flex; flex-direction: column;
    transition: width .2s ease;
    position: sticky; top: 0; height: 100vh;
}
.ss-app.is-collapsed .ss-sidebar { width: 72px; }

.ss-side-brand { cursor: pointer; }
.ss-side-brand .ss-brand-row { display: flex; align-items: center; gap: 10px; padding: 14px 12px; }
.ss-logo-tile {
    width: 38px; height: 38px; flex: none;
    background: var(--paper); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.ss-logo-tile img { width: 30px; height: 30px; }
.ss-brand-text { min-width: 0; }
.ss-brand-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--accent-soft); }
.ss-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; text-transform: uppercase; line-height: 1; }
.ss-app.is-collapsed .ss-brand-text { display: none; }

.ss-side-nav { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.ss-side-section {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: #61789b;
    padding: 14px 12px 6px;
}
.ss-app.is-collapsed .ss-side-section { padding: 0; margin: 10px 0 8px; border-top: 1px solid var(--navy-hover); height: 0; overflow: hidden; }

.ss-side-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 6px;
    font-size: 14px; font-weight: 500; color: var(--on-navy-soft);
    text-decoration: none;
}
.ss-side-item:hover { color: #fff; background: var(--navy-hover); }
.ss-side-item.is-active { color: #fff; background: var(--navy-hover); font-weight: 600; }
.ss-side-item .material-symbols-outlined { font-size: 21px; flex: none; }
.ss-side-item .ss-side-badge {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 10px;
    background: var(--accent); color: #14171C;
    padding: 1px 6px; border-radius: 8px;
}
.ss-app.is-collapsed .ss-side-item { justify-content: center; padding: 10px 0; }
.ss-app.is-collapsed .ss-side-item .ss-side-label,
.ss-app.is-collapsed .ss-side-item .ss-side-badge { display: none; }

.ss-side-user {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 12px; border-top: 1px solid var(--navy-hover);
}
.ss-avatar {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--accent); color: #14171C;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.ss-side-user .ss-user-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.15; }
.ss-side-user .ss-user-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--on-navy-muted); text-transform: uppercase; }
.ss-app.is-collapsed .ss-side-user > div:not(.ss-avatar) { display: none; }

.ss-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ss-topbar {
    height: 60px; flex: none;
    background: #fff; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 40;
}
.ss-topbar .ss-search { flex: 1; max-width: 420px; position: relative; }
.ss-topbar .ss-search input {
    width: 100%; min-height: 38px;
    padding: 8px 12px 8px 36px;
    border: 1.5px solid var(--border); border-radius: 6px;
    background: var(--paper); font-size: 14px; color: #14171C;
}
.ss-topbar .ss-search input:focus { border-color: var(--steel); outline: none; }
.ss-topbar .ss-search .material-symbols-outlined {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 19px;
}
.ss-icon-btn {
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--border); border-radius: 6px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: var(--slate); position: relative; cursor: pointer;
}
.ss-icon-btn .ss-dot {
    position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); border: 1.5px solid #fff;
}
.ss-icon-btn:hover { border-color: var(--link); color: var(--link); }
.ss-icon-btn-danger { color: var(--danger); }
.ss-icon-btn-danger:hover { border-color: var(--danger-hover); color: var(--danger-hover); }

/* Topbar search dropdown (grouped results) */
.ss-search-drop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-dropdown);
    max-height: 420px; overflow-y: auto; padding: 6px 0;
}
.ss-search-group {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    padding: 8px 14px 4px;
}
.ss-search-item {
    display: block; padding: 8px 14px; text-decoration: none; color: #14171C;
}
.ss-search-item:hover, .ss-search-item.is-focus { background: var(--paper); color: #14171C; }
.ss-search-item .ss-search-label { font-weight: 600; font-size: 14px; }
.ss-search-item .ss-search-sub { font-size: 12px; color: var(--muted); }
.ss-search-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.ss-search-all {
    display: block; text-align: center; padding: 9px 14px;
    font-size: 13px; font-weight: 600; color: var(--steel);
    border-top: 1px solid var(--bg-app); text-decoration: none;
}
.ss-search-all:hover { color: #14171C; }

/* Bootstrap pagination + tabs on-palette */
.pagination { --bs-pagination-color: #14171C; --bs-pagination-hover-color: #14171C;
    --bs-pagination-active-bg: var(--navy); --bs-pagination-active-border-color: var(--navy);
    --bs-pagination-focus-color: #14171C; }
.nav-tabs .nav-link { color: var(--slate); }
.nav-tabs .nav-link:hover { color: var(--link); }
.nav-tabs .nav-link.active { color: var(--link); font-weight: 600; }

.ss-lang-pill { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--paper); }
.ss-lang-pill a {
    font-size: 12px; font-weight: 600; padding: 8px 12px;
    color: var(--slate); text-decoration: none;
}
.ss-lang-pill a.is-active { background: var(--navy); color: #fff; }

.ss-content { padding: 28px 32px; }

.ss-ham { display: none; }

/* Mobile: sidebar becomes a drawer */
@media (max-width: 991px) {
    .ss-sidebar { display: none; }
    .ss-ham { display: flex; }
    .ss-content { padding: 18px 16px; }

    .ss-drawer-overlay {
        position: fixed; inset: 0; z-index: 84;
        background: rgba(7, 26, 53, .55);
        display: none;
    }
    .ss-app.drawer-open .ss-drawer-overlay { display: block; }
    .ss-app.drawer-open .ss-sidebar {
        display: flex;
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 85;
        width: 250px; height: 100%;
        box-shadow: 6px 0 24px rgba(7, 26, 53, .4);
    }
}

/* ── Auth (login/forgot/reset) card ─────────────────────────── */
.ss-auth-card {
    max-width: 428px; margin: 0 auto;
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 14px 44px rgba(11, 36, 71, .18);
}
.ss-auth-head { background: var(--navy); color: #fff; padding: 24px 30px 22px; }
.ss-auth-head .ss-logo-tile { width: 44px; height: 44px; }
.ss-auth-head .ss-logo-tile img { width: 34px; height: 34px; }
.ss-auth-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; text-transform: uppercase; line-height: 1.1; }
.ss-auth-sub { font-size: 13px; color: var(--on-navy-soft); }
.ss-auth-body { padding: 24px 30px 26px; }

/* ── Kanban (job board) ─────────────────────────────────────── */
.ss-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.ss-kanban-col {
    width: 230px; flex: none;
    background: var(--bg-track); border-radius: 8px;
    max-height: 70vh; display: flex; flex-direction: column;
}
.ss-kanban-col.is-over { outline: 2px dashed var(--cta); outline-offset: -2px; }
.ss-kanban-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--link);
}
.ss-kanban-count { background: #fff; border-radius: 8px; font-size: 11px; padding: 1px 7px; }
.ss-kanban-cards { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.ss-kanban-card {
    display: block;
    background: #fff; border: 1px solid var(--border);
    border-left: 3px solid #14171C; border-radius: 6px;
    padding: 11px 12px; font-size: 14px;
    color: #14171C; text-decoration: none;
}
.ss-kanban-card:hover { box-shadow: var(--shadow-card-hover); color: #14171C; }
.ss-kanban-card.is-dragging { opacity: .4; }

/* Timeline (quote/invoice detail) */
.ss-timeline { list-style: none; margin: 0; padding: 0; }
.ss-timeline li { position: relative; padding: 0 0 18px 26px; }
.ss-timeline li::before {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--success);
}
.ss-timeline li:not(:last-child)::after {
    content: ""; position: absolute; left: 5.5px; top: 18px; bottom: 0;
    width: 2px; background: var(--success);
}
.ss-timeline .when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }