/* ════════════════════════════════════════════════════════════
   Superior Safety Solutions — Client Portal surface
   Source of truth: docs/DesignSystem.md
   ─ TOKENS block mirrors crm/assets/css/app.css — keep in sync ─
   Portal shell (sidebar 214px etc.) lands in M9; public-page card
   styles here serve M4's quote approval + M10's QR verify.
   ════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
/* Palette "1a — Amber hi-vis" (client-chosen 2026-07-31) — see app.css
   header comment. --navy is the SURFACE color, not ink; plain ink/body
   text is hardcoded #14171C throughout this file. */
: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;

    --success: #2E7D46;
    --danger: #C7451A;
    --warning: #B8860B;
    --info: #1E6DA8;

    --bg-app: #EDEFF3;
    --border: #DDE3EC;
    --border-input: #C3CCD9;
    --muted: #566578;
    --on-navy-soft: #C4D0E0;

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

::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 {
    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; }

.ss-hazard--card { height: 8px; background: repeating-linear-gradient(-45deg, var(--accent) 0 16px, var(--night) 16px 32px); }

/* Public card (quote approval, pay, verify): 412px mobile-first */
.ss-public-card {
    max-width: 412px; margin: 0 auto;
    background: #fff; border: 1px solid var(--border); border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(11, 36, 71, .22);
}
.ss-public-head { background: var(--navy); color: #fff; padding: 20px 22px 22px; }
.ss-public-head .ss-kicker {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent-soft);
}
.ss-public-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: uppercase; }
.ss-public-body { padding: 18px 22px 22px; }

.ss-logo-tile {
    width: 38px; height: 38px;
    background: var(--paper); border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ss-logo-tile img { width: 30px; height: 30px; }

.btn { font-weight: 600; border-radius: 10px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary { background: var(--cta); border-color: var(--cta); color: #14171C; font-weight: 700; font-size: 17px; min-height: 54px; }
.btn-primary:hover, .btn-primary:focus { background: var(--cta-hover); border-color: var(--cta-hover); color: #14171C; }
.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; }

.form-control { border: 1.5px solid var(--border-input); border-radius: 8px; min-height: 50px; font-size: 16px; color: #14171C; }
.form-control:focus { border-color: var(--steel); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }
.form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.ss-totals-box { background: var(--paper); border: 1px solid #E4E9F0; border-radius: 8px; padding: 14px 16px; }

/* ── Authenticated portal shell (design §4.2: sidebar 214px) ── */
.ss-papp { display: flex; min-height: 100vh; }
.ss-psidebar {
    width: 214px; flex: none;
    background: var(--night); color: var(--on-navy-soft);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.ss-hazard { height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--night) 14px 28px); }
.ss-pbrand { display: flex; align-items: center; gap: 10px; padding: 14px 12px; }
.ss-pkicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--accent-soft); }
.ss-pcompany { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; line-height: 1.1; }
.ss-pnav { flex: 1; padding: 8px 10px; overflow-y: auto; }
.ss-pitem {
    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-pitem:hover, .ss-pitem.is-active { color: #fff; background: var(--navy-hover); }
.ss-pitem.is-active { font-weight: 600; }
.ss-puser { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-top: 1px solid var(--navy-hover); }
.ss-avatar {
    width: 32px; height: 32px; 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-puser-name { color: #fff; font-size: 13px; font-weight: 600; }

.ss-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-app); }
.ss-pheader {
    height: 56px; flex: none;
    background: #fff; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; padding: 0 18px;
    position: sticky; top: 0; z-index: 40;
}
.ss-pheader-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; }
.ss-pcontent { padding: 24px 26px; }

.ss-icon-btn {
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--border); border-radius: 6px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: var(--slate); cursor: pointer;
}
.ss-icon-btn:hover { border-color: var(--link); color: var(--link); }
.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: 7px 11px; color: var(--slate); text-decoration: none; }
.ss-lang-pill a.is-active { background: var(--navy); color: #fff; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; font-size: 21px; }

.ss-ham { display: none; }
@media (max-width: 860px) {
    .ss-psidebar { display: none; }
    .ss-ham { display: flex; }
    .ss-pcontent { padding: 16px 14px; }
    .ss-drawer-overlay { position: fixed; inset: 0; z-index: 84; background: rgba(7, 26, 53, .55); display: none; }
    .ss-papp.drawer-open .ss-drawer-overlay { display: block; }
    .ss-papp.drawer-open .ss-psidebar {
        display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 85;
        width: 240px; height: 100%; box-shadow: 6px 0 24px rgba(7, 26, 53, .4);
    }
}
.ss-trust-footer {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
    text-align: center;
}