/* =========================================================================
   TurboView
   Palette:  Cerulean #1A7D92 · Charcoal #365663 · Powder Blue #9EB5D6
             Aquamarine #34EBC3 · Gunmetal #202E3B
   Field-first: large touch targets, high contrast, sticky actions.
   ========================================================================= */
:root {
    --cerulean:#1A7D92; --cerulean-d:#14606f;
    --charcoal:#365663; --powder:#9EB5D6; --powder-l:#eef2f8;
    --aqua:#34EBC3; --aqua-d:#17c7a3; --gunmetal:#202E3B;

    --bg:#e9eef4; --surface:#ffffff; --surface-2:#f4f7fb;
    --border:#cdd9ea; --text:#202E3B; --text-muted:#4a6472;

    --ok:#1f9d55; --warn:#e08600; --danger:#d23b3b;
    --radius:14px;
    --shadow:0 1px 3px rgba(32,46,59,.12), 0 6px 20px rgba(32,46,59,.06);
    --font:system-ui,"Segoe UI",Roboto,Arial,sans-serif;

    --tap:56px;                 /* minimum touch target */
    --pad:clamp(14px,2.5vw,24px);
}
[data-theme="dark"] {
    /* matches the TurboView login: near-black with a blue cast */
    --bg:#05080e; --surface:#101c2b; --surface-2:#0b1520;
    --border:#22374f; --text:#e8eef4; --text-muted:#9fb4c6;
    --powder-l:#131f2c;
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] body {
    background:radial-gradient(130% 90% at 50% -10%, #0d1826 0%, #070c15 55%, #03060c 100%) fixed;
}
[data-theme="dark"] .topbar { background:#080e18; border-bottom:1px solid var(--border); }

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body {
    font-family:var(--font); background:var(--bg); color:var(--text);
    font-size:17px; line-height:1.55; -webkit-text-size-adjust:100%;
}
a { color:var(--cerulean); text-decoration:none; }
[data-theme="dark"] a { color:var(--aqua); }
h1 { font-size:1.5rem; margin:0 0 .3rem; }
h2 { font-size:1.2rem; margin:0 0 .6rem; }
h3 { font-size:1rem; margin:0 0 .5rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
p { margin:.4rem 0; }
small { color:var(--text-muted); }

/* ---------- top bar ---------- */
.topbar {
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; gap:1rem;
    background:var(--gunmetal); color:#fff;
    padding:.6rem var(--pad); min-height:64px;
}
.topbar .brand { order:1; display:flex; align-items:baseline; gap:.6rem; font-weight:700; min-width:0; color:#fff; }
.topbar .brand:hover { text-decoration:none; }
.topbar .brand-mark {
    font-weight:800; font-style:italic; font-size:1.2rem; letter-spacing:.01em;
    color:#fff; white-space:nowrap;
}
.topbar .brand-mark span { color:#2b9bf4; }
.topbar .brand .sub { font-weight:400; opacity:.7; font-size:.85rem; white-space:nowrap; }
.topbar nav { order:2; display:flex; gap:.25rem; flex-wrap:wrap; margin-left:auto; }
.topbar nav a {
    color:#cbd7e2; padding:.55rem .9rem; border-radius:10px; font-weight:600; font-size:.95rem;
    white-space:nowrap;
}
.topbar nav a.active, .topbar nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
.topbar-user { order:3; display:flex; align-items:center; gap:.4rem; flex:none; }
.topbar form.inline { margin:0; }
.iconbtn {
    background:rgba(255,255,255,.1); color:#fff; border:0; border-radius:10px;
    min-height:44px; padding:0 .8rem; font-size:1rem; cursor:pointer; white-space:nowrap;
}

/* tablet & down: page nav drops to its own full-width row so it never
   collides with / wraps under the brand */
@media (max-width:1024px) {
    .topbar {
        flex-wrap:wrap; gap:.5rem .75rem; padding:.55rem var(--pad); min-height:0;
    }
    .topbar .brand { order:1; flex:1 1 auto; }
    .topbar-user { order:2; margin-left:auto; }
    .topbar nav {
        order:3; width:100%; margin:0; gap:.4rem; flex-wrap:wrap;
    }
    .topbar nav a {
        padding:.55rem .95rem; font-size:1rem;
        background:rgba(255,255,255,.06);
    }
    .topbar nav a.active { background:var(--cerulean); color:#fff; }
}

/* phones: nav becomes a single scrollable strip; trim the brand */
@media (max-width:640px) {
    .topbar { gap:.5rem .6rem; padding:.5rem .75rem; }
    .topbar .brand { font-size:.95rem; }
    .topbar .brand img { height:24px; }
    .topbar .brand .sub { display:none; }
    .topbar nav {
        flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
        padding-bottom:2px; scrollbar-width:none;
    }
    .topbar nav::-webkit-scrollbar { display:none; }
    .topbar nav a { flex:0 0 auto; padding:.6rem .85rem; }
    .iconbtn { min-height:40px; padding:0 .7rem; }
}

/* ---------- layout ---------- */
.wrap { max-width:1100px; margin:0 auto; padding:var(--pad); }
.wrap.narrow { max-width:720px; }
.grid { display:grid; gap:var(--pad); }
.grid.cols-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:var(--pad);
}
.card + .card { margin-top:var(--pad); }
.card h2 { margin-top:0; }

/* ---------- buttons (wide, glove-friendly) ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:var(--tap); padding:0 1.4rem; border-radius:12px;
    font-size:1.05rem; font-weight:700; cursor:pointer;
    background:var(--cerulean); color:#fff; border:2px solid transparent; width:auto;
    transition:filter .12s ease;
}
.btn:hover { filter:brightness(1.06); text-decoration:none; }
.btn:active { filter:brightness(.94); }
.btn.block { width:100%; }
.btn.lg { min-height:66px; font-size:1.15rem; }
.btn.secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn.accent { background:var(--aqua); color:var(--gunmetal); }
.btn.danger { background:var(--danger); }
.btn.ghost { background:transparent; color:var(--cerulean); border-color:var(--cerulean); }
.btn[disabled] { opacity:.5; pointer-events:none; }

.actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.sticky-actions {
    position:sticky; bottom:0; z-index:30;
    background:var(--surface); border-top:1px solid var(--border);
    padding:var(--pad); display:flex; gap:.75rem; flex-wrap:wrap;
    margin:var(--pad) calc(-1 * var(--pad)) calc(-1 * var(--pad));
}

/* ---------- forms ---------- */
label { display:block; font-weight:600; margin:.9rem 0 .3rem; }
input,select,textarea {
    width:100%; min-height:var(--tap); padding:.7rem .9rem;
    font-size:1.05rem; font-family:inherit;
    border:2px solid var(--border); border-radius:12px;
    background:var(--surface); color:var(--text);
}
textarea { min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--cerulean); }
.check { display:flex; align-items:center; gap:.6rem; }
.check input { width:24px; height:24px; min-height:0; }
.row { display:flex; gap:1rem; flex-wrap:wrap; }
.row > * { flex:1 1 200px; }

/* ---------- task cards ---------- */
.tasklist { display:grid; gap:1rem; }
.taskcard {
    display:grid; grid-template-columns:92px 1fr; gap:1rem; align-items:center;
    background:var(--surface); border:1px solid var(--border);
    border-left:8px solid var(--charcoal); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:1.1rem 1.2rem;
}
/* cards with no thumbnail (supervisor dashboard lists) stack normally */
.taskcard.flat { display:block; grid-template-columns:none; }
.taskcard:hover { text-decoration:none; filter:brightness(1.01); }
.taskcard.p-high   { border-left-color:var(--warn); }
.taskcard.p-urgent { border-left-color:var(--danger); }
.taskcard .tc-thumb {
    width:92px; height:64px; border-radius:10px; overflow:hidden; flex:none;
    background:var(--surface-2); border:1px solid var(--border);
    display:grid; place-items:center;
}
.taskcard .tc-thumb img { width:94%; height:94%; object-fit:contain; }
@media (max-width:560px) {
    .taskcard { grid-template-columns:60px 1fr; gap:.75rem; }
    .taskcard.flat { grid-template-columns:none; }
    .taskcard .tc-thumb { width:60px; height:44px; }
    .taskcard .tc-title { font-size:1.05rem; }
}
.taskcard .tc-top { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.taskcard .tc-title { font-size:1.2rem; font-weight:700; color:var(--text); }
.taskcard .tc-meta { color:var(--text-muted); font-size:.95rem; margin-top:.3rem; display:flex; gap:1rem; flex-wrap:wrap; }
.taskcard .tc-meta b { color:var(--text); }

.pill {
    display:inline-block; padding:.25rem .7rem; border-radius:999px;
    font-size:.8rem; font-weight:800; color:#fff; white-space:nowrap;
    text-transform:uppercase; letter-spacing:.03em;
}
.ribbon {
    display:inline-block; background:var(--aqua); color:var(--gunmetal);
    font-weight:800; font-size:.75rem; padding:.2rem .6rem; border-radius:6px;
    text-transform:uppercase; letter-spacing:.04em;
}
.badge { display:inline-block; padding:.15rem .55rem; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); font-size:.85rem; font-weight:700; }
.badge.over { background:#fdecec; color:var(--danger); border-color:#f5c2c2; }

/* ---------- KPIs ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; }
.kpi { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:1rem; text-align:center; }
.kpi .n { font-size:1.9rem; font-weight:800; color:var(--cerulean); }
[data-theme="dark"] .kpi .n { color:var(--aqua); }
.kpi .l { color:var(--text-muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
/* clickable KPI / status tiles */
a.kpi { display:block; color:inherit; text-decoration:none; cursor:pointer; transition:transform .08s, box-shadow .12s, border-color .12s; }
a.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--cerulean); }
a.kpi:focus-visible { outline:2px solid var(--cerulean); outline-offset:2px; }

/* ---------- 360 viewer ---------- */
.viewer {
    position:relative; width:100%; aspect-ratio:4/3; background:transparent;
    border-radius:var(--radius); overflow:hidden; touch-action:none; user-select:none;
    border:0;
}
.viewer .vz { position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.viewer img.frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.viewer.zoomed { cursor:grab; }
.viewer .hint {
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
    background:rgba(0,0,0,.55); color:#fff; padding:.35rem .8rem; border-radius:999px; font-size:.85rem;
}
.viewer .pin {
    position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
    border-radius:50% 50% 50% 0; transform:rotate(-45deg) scale(var(--pinscale, 1));
    background:var(--danger); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.5);
    cursor:pointer;
}
.viewer .pin.sev-info { background:var(--cerulean); }
.viewer .pin.sev-warning { background:var(--warn); }
.viewer .pin.sev-critical { background:var(--danger); }
.viewer .pin b { transform:rotate(45deg); display:block; color:#fff; text-align:center; font-size:.8rem; line-height:28px; }
.viewer.armed { cursor:crosshair; outline:3px dashed var(--aqua); outline-offset:-3px; }

/* ---------- real 3D (glTF) viewer ---------- */
.viewer-3d model-viewer { width:100%; height:100%; display:block; --progress-bar-color: var(--aqua); }
.pin-hotspot {
    width:34px; height:34px; padding:0; margin:0; box-sizing:border-box;
    border-radius:50%; border:3px solid #fff;
    background:var(--danger); box-shadow:0 2px 6px rgba(0,0,0,.5);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:opacity .15s;
}
.pin-hotspot.sev-info { background:var(--cerulean); }
.pin-hotspot.sev-warning { background:var(--warn); }
.pin-hotspot.sev-critical { background:var(--danger); }
.pin-hotspot b { color:#fff; font-size:.8rem; font-weight:700; pointer-events:none; }
.pin-hotspot[data-visible="false"] { opacity:.25; pointer-events:none; }

/* auto-spin preview (task card) — no controls, no border, hugs the card corner */
.spin360 {
    float:right; width:44%; max-width:360px; min-height:190px;
    margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) .6rem 1.2rem;
    background:transparent; border:0;
    border-radius:0 var(--radius) 0 12px;
    overflow:hidden; pointer-events:none; flex:none;
}
.spin360 img { width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width:560px) { .spin360 { width:48%; min-height:150px; } }

.pin-row { display:flex; gap:.8rem; align-items:flex-start; padding:.8rem 0; border-top:1px solid var(--border); }
.pin-row .dot { width:18px; height:18px; border-radius:50%; margin-top:4px; flex:none; }
.thumbs { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.mediabox { display:inline-flex; flex-direction:column; gap:.25rem; align-items:flex-start; }
.mediabox audio { width:min(280px, 60vw); }
.mediabox video { width:min(280px, 60vw); border-radius:10px; background:#000; }
.mediabox .dl { font-size:.8rem; color:var(--text-muted); }
.thumbs img, .thumbs .m {
    width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:var(--surface-2);
    display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--text-muted);
}

/* Centre the confirm modal (still a <dialog>) in the viewport on every engine —
   some iOS WebKit builds otherwise position it in the document, off-screen. */
.tv-modal { position:fixed; inset:0; margin:auto; }

/* ---------- problem-point editor: inline panel below the 360 ---------- */
.pin-panel {
    border:1px solid var(--border); border-left:4px solid var(--cerulean);
    border-radius:12px; overflow:hidden; margin-bottom:1rem; background:var(--surface);
}
.pin-head {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.85rem 1.1rem; border-bottom:1px solid var(--border);
    background:var(--surface); flex:none;
}
.pin-head h2, .pin-head h3 { margin:0; font-size:1.05rem; }
.pin-x {
    border:0; background:transparent; color:var(--text-muted);
    font-size:1.5rem; line-height:1; cursor:pointer; padding:.1rem .45rem; border-radius:8px;
}
.pin-x:hover { background:var(--surface-2); color:var(--text); }
.pin-body { padding:1rem 1.15rem; }
.pin-body > label { display:block; font-weight:600; font-size:.9rem; margin:1rem 0 .35rem; }
.pin-body > label:first-child { margin-top:0; }
.pin-body input, .pin-body textarea, .pin-body select { width:100%; }
.pin-body textarea { min-height:88px; }
.pin-cap-label {
    font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted); margin:1.4rem 0 .55rem;
}
.cap-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.cap-row .btn { min-height:48px; padding:0 .5rem; font-size:.95rem; gap:.4rem; }
.cap-row .btn .ic { display:inline-flex; flex:none; }
.cap-row .btn .ic svg { width:18px; height:18px; display:block; }
.cam-box:not(:empty) { margin-top:.8rem; }
.cam-box video { width:100%; border-radius:10px; display:block; }
.tv-modal {
    border:0; padding:0; background:transparent;
    width:fit-content; max-width:min(92vw, 400px);
    height:fit-content; max-height:90vh; max-height:90dvh; overflow:auto;
}
.tv-modal::backdrop { background:rgba(12,18,24,.55); }
.tv-modal-box {
    background:var(--surface); color:var(--text);
    border-radius:var(--radius); padding:1.3rem 1.4rem;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.tv-modal-msg { margin:0 0 1.2rem; font-size:1rem; line-height:1.5; }
.tv-modal-actions { display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }
.tv-modal-actions .btn { min-width:96px; }

.ios-install {
    display:flex; align-items:center; gap:.6rem; justify-content:space-between;
    background:var(--surface); border:1px solid var(--line, #d5dee6);
    border-radius:var(--radius); padding:.6rem .9rem; margin-bottom:1rem; font-size:.92rem;
}
.ios-install button { background:none; border:0; font-size:1.3rem; line-height:1; cursor:pointer; color:inherit; }
#installApp { white-space:nowrap; }

.newreport-cta {
    display:flex; align-items:center; gap:1rem 1.2rem; flex-wrap:wrap;
    justify-content:space-between;
}
.newreport-cta > div { flex:1 1 260px; }
.newreport-cta b { display:block; margin-bottom:.15rem; }
.newreport-cta p { margin:0; }
.newreport-cta .btn { flex:none; }
@media (max-width:600px) {
    .newreport-cta .btn { width:100%; }
}

.camwrap { position:relative; }
.camwrap video { width:100%; border-radius:10px; display:block; background:#000; }
.rec-dot {
    position:absolute; top:.5rem; left:.5rem;
    background:rgba(210,59,59,.92); color:#fff;
    font-size:.78rem; font-weight:700; letter-spacing:.03em;
    padding:.15rem .5rem; border-radius:999px;
    animation:recPulse 1s steps(1) infinite;
}
@keyframes recPulse { 50% { opacity:.35; } }
.pin-actions {
    display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
    border-top:1px solid var(--border); background:var(--surface); flex:none;
    flex-wrap:wrap;
}
.pin-actions .btn { flex:0 0 auto; }

/* brief ring when a pin's editor opens, so you can see which one */
.viewer .pin.pulse { animation:pinPulse .9s ease-out 1; }
@keyframes pinPulse {
    0%   { box-shadow:0 0 0 0 rgba(52,235,195,.8); }
    100% { box-shadow:0 0 0 20px rgba(52,235,195,0); }
}

@media (max-width:560px) {
    .pin-actions .btn { flex:1 1 auto; }
    .pin-dialog {
        width:100%; max-width:100%; max-height:92vh;
        margin:0; position:fixed; inset:auto 0 0 0;
        border-radius:18px 18px 0 0;
    }
    .cap-row { grid-template-columns:1fr; }
    .cap-row .btn { min-height:54px; font-size:1.02rem; }
}
@media (prefers-reduced-motion:no-preference) {
    .pin-dialog[open] { animation:pinIn .18s ease both; }
    @keyframes pinIn { from { opacity:0; transform:translateY(10px); } }
}

/* ---------- misc ---------- */
.flash { padding:1rem var(--pad); border-radius:12px; margin-bottom:var(--pad); font-weight:600; }
.flash.ok { background:#e6f6ee; color:#12693a; border:1px solid #b7e2c9; }
.flash.error { background:#fdecec; color:#9a2020; border:1px solid #f2b8b8; }
table.data { width:100%; border-collapse:collapse; }
table.data th, table.data td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--border); }
table.data th { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }

/* wide tables scroll inside their own box, never the page body */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table.data { min-width:520px; }
@media (max-width:640px) {
    .card { overflow-x:auto; }               /* safety net for any other wide content */
    table.data th, table.data td { padding:.55rem .45rem; font-size:.92rem; white-space:nowrap; }
}
.muted { color:var(--text-muted); }
.stack > * + * { margin-top:1rem; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.95rem; }
details.collapse summary { cursor:pointer; font-weight:700; padding:.5rem 0; }

/* ---------- login (TurboView — black & blue) ---------- */
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:2rem 1.1rem; color:#eef3f8;
    background:#04070c;
    background:radial-gradient(120% 80% at 50% -10%, #0d1826 0%, #060a12 55%, #02040a 100%);
}
.login-wrap {
    width:100%; max-width:560px;
    display:flex; flex-direction:column; align-items:center; gap:1.6rem;
}
.login-hero {
    width:100%; height:auto; display:block;
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.6));
}
.login-card {
    width:100%; max-width:420px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(120,170,255,.16);
    border-radius:18px;
    padding:clamp(1.5rem,4vw,2.4rem);
    box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.login-card label { color:#9fb4c6; font-weight:600; font-size:.85rem; margin-top:1rem; }
.login-page input {
    background:rgba(255,255,255,.04);
    border:2px solid rgba(120,170,255,.18);
    color:#fff; border-radius:12px;
}
.login-page input:focus { border-color:#2b9bf4; box-shadow:0 0 0 3px rgba(43,155,244,.18); outline:none; }
.login-page input::placeholder { color:#6b7f8f; }
.login-page .btn { background:#2b9bf4; border-color:#2b9bf4; color:#04070c; }
.login-page .btn:hover { background:#43a9ff; }
.login-card .muted { color:#7b8b99; }
.login-card .muted b { color:#c6d2dc; }
.login-card .flash { margin-bottom:.6rem; }
@media (max-width:600px) {
    .login-wrap { gap:1.1rem; }
}

/* ---------- turbine render helpers ---------- */
.tb-thumb { width:76px; }
.tb-thumb .chip { width:76px; height:50px; border-radius:8px; background:var(--surface-2);
    border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; }
.tb-thumb .chip img { width:92%; height:92%; object-fit:contain; }

.turbine-preview { display:flex; align-items:center; gap:12px; margin:.2rem 0 .4rem;
    padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.turbine-preview img { width:120px; height:78px; object-fit:contain; flex:none; }
.turbine-preview small { color:var(--text-muted); }

/* ---------- empty state ---------- */
.empty-state { position:relative; overflow:hidden; border:1px dashed var(--border);
    border-radius:var(--radius); background:var(--surface-2); padding:2rem 1.6rem;
    min-height:150px; display:flex; flex-direction:column; justify-content:center; }
.empty-state img { position:absolute; right:-4%; top:50%; transform:translateY(-50%);
    width:44%; max-width:420px; opacity:.13; filter:grayscale(1); pointer-events:none; }
.empty-state h3 { position:relative; margin:0 0 .25rem; color:var(--text); font-size:1.05rem; }
.empty-state p { position:relative; margin:0; color:var(--text-muted); font-size:.92rem; max-width:44ch; }
body.dark .empty-state img,
[data-theme="dark"] .empty-state img { opacity:.2; filter:grayscale(1) brightness(1.7); }

/* ---------- priority alerts (supervisor dashboard) ---------- */
.priority-alarm {
    position:fixed; inset:0; z-index:200; display:grid; place-items:center;
    background:rgba(110,10,20,.55); backdrop-filter:blur(3px); padding:var(--pad);
}
.priority-alarm .pa-box {
    background:var(--surface); color:var(--text); border-radius:16px; border:3px solid var(--danger);
    max-width:520px; width:100%; padding:1.6rem 1.8rem; text-align:center;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.priority-alarm .pa-bang {
    width:56px; height:56px; border-radius:50%; background:var(--danger); color:#fff;
    font-size:2rem; font-weight:800; line-height:56px; margin:0 auto .8rem;
}
.priority-alarm h2 { margin:0 0 1rem; color:var(--danger); }
.priority-alarm ul { list-style:none; padding:0; margin:0 0 1.2rem; text-align:left; display:grid; gap:.7rem; }
.priority-alarm li { border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem; }
.priority-alarm li a { font-size:1.05rem; font-weight:600; }
.priority-alarm .pa-meta { display:block; margin-top:.35rem; font-size:.85rem; color:var(--text-muted); }
.priority-alarm .btn { width:100%; }

.priority-banner {
    background:#fbe9e9; color:#8a1f1f; border:1px solid #f0c2c2; border-left:5px solid var(--danger);
    border-radius:10px; padding:.7rem 1rem; margin:0 0 1rem; font-size:.95rem;
}
.priority-banner a { color:#8a1f1f; font-weight:600; }
[data-theme="dark"] .priority-banner { background:#3a1f22; color:#f3c9c9; border-color:#5a2c30; }

@media print {
    .topbar, .sticky-actions, .no-print, .priority-alarm { display:none !important; }
    body { background:#fff; font-size:12px; }
    .card { box-shadow:none; border:1px solid #999; break-inside:avoid; }
}

/* ---------- push-to-talk dock ---------- */
.ptt-dock {
    position:fixed; right:14px; bottom:14px; z-index:60;
    width:max-content; max-width:min(300px, calc(100vw - 28px));
    font-size:.95rem;
}
@media (max-width:640px) { .ptt-dock { right:10px; bottom:10px; left:auto; } }

.ptt-fab {
    border:0; cursor:pointer; border-radius:999px;
    padding:.7rem 1.05rem; font-weight:700; font-size:.95rem;
    background:var(--aqua); color:var(--gunmetal);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.ptt-fab.off { background:var(--surface-2); color:var(--text-muted); cursor:default; box-shadow:none; border:1px solid var(--border); }

.ptt-card {
    background:var(--surface); color:var(--text);
    border:1px solid var(--border); border-radius:14px;
    padding:.8rem .85rem; box-shadow:0 12px 34px rgba(0,0,0,.3);
    display:flex; flex-direction:column; gap:.55rem;
}
.ptt-incoming { border-color:var(--aqua); }
.ptt-head { font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.ptt-op {
    border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    border-radius:10px; padding:.5rem .7rem; text-align:left; cursor:pointer; font-weight:600;
}
.ptt-op[disabled] { opacity:.55; cursor:default; }

/* collapsible operators-online list */
.ptt-oplist { border:0; }
.ptt-oplist > summary {
    list-style:none; cursor:pointer; user-select:none;
    display:flex; align-items:center; gap:.5rem;
    font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-muted); padding:.15rem 0;
}
.ptt-oplist > summary::-webkit-details-marker { display:none; }
.ptt-oplist > summary::before {
    content:"▸"; font-size:.9em; transition:transform .15s; color:var(--text-muted);
}
.ptt-oplist[open] > summary::before { transform:rotate(90deg); }
.ptt-oplist .ptt-count {
    margin-left:auto; background:var(--cerulean); color:#fff;
    min-width:20px; height:20px; padding:0 6px; border-radius:999px;
    font-size:.72rem; line-height:20px; text-align:center; letter-spacing:0;
}
.ptt-oplist-body { display:flex; flex-direction:column; gap:.5rem; margin-top:.55rem; }

.ptt-line { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.ptt-dot { width:10px; height:10px; border-radius:50%; background:var(--text-muted); flex:none; }
.ptt-dot.ok { background:#1f9d55; }
.ptt-dot.warn { background:var(--warn); }
.ptt-dot.ring { background:var(--warn); animation:pttPulse 1s infinite; }
@keyframes pttPulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.ptt-speaking { font-size:.8rem; color:#1f9d55; font-weight:700; }

.ptt-talk {
    border:0; cursor:pointer; border-radius:12px;
    min-height:66px; font-size:1.05rem; font-weight:800; letter-spacing:.02em;
    background:var(--cerulean); color:#fff;
    touch-action:none; user-select:none; -webkit-user-select:none;
}
.ptt-talk.on { background:var(--danger); box-shadow:0 0 0 4px rgba(210,59,59,.25); }

.ptt-btns { display:flex; gap:.5rem; }
.ptt-btns .btn { flex:1; }
.ptt-dock .btn.block { width:100%; }

.ptt-toast {
    position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(8px);
    background:var(--gunmetal); color:#fff; padding:.55rem .9rem; border-radius:999px;
    font-size:.88rem; z-index:70; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.ptt-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media print { .ptt-dock, .ptt-toast { display:none !important; } }

/* PTT inline placement (operator tasks / supervisor dashboard) — bigger targets */
.ptt-slot { position:static; width:auto; max-width:560px; margin:0 0 1.4rem; }
.ptt-slot .ptt-fab, .ptt-slot .ptt-fab.off {
    width:100%; display:flex; justify-content:center;
    min-height:62px; font-size:1.05rem; border-radius:14px; padding:1rem 1.2rem;
}
.ptt-slot .ptt-card { box-shadow:var(--shadow); border-radius:var(--radius); padding:1rem 1.1rem; }
.ptt-slot .ptt-line { font-size:1.05rem; }
.ptt-slot .ptt-talk { min-height:112px; font-size:1.35rem; border-radius:16px; }
.ptt-slot .ptt-op { min-height:54px; font-size:1.02rem; }
.ptt-slot .ptt-btns .btn, .ptt-slot .btn.block { min-height:54px; font-size:1.05rem; }

/* floating dock (other pages): keep clear of sticky action bars on phones */
@media (max-width:640px) { .ptt-dock { bottom:88px; } }

/* PTT nav placement: compact pill in the top nav, for any page that has
   neither a page-level #pttSlot — keeps it out of the way of page content
   instead of floating over it. */
.ptt-navslot { position:static; width:max-content; max-width:min(280px, calc(100vw - 28px)); margin-left:auto; }
@media (max-width:640px) { .ptt-navslot { margin-left:0; } }

/* ============ chat ============ */
/* nav unread badge */
.nav-badge {
    display:inline-block; min-width:18px; height:18px; padding:0 5px; margin-left:.4rem;
    border-radius:999px; background:var(--danger); color:#fff;
    font-size:.72rem; font-weight:800; line-height:18px; text-align:center; vertical-align:middle;
}

/* broadcast banner */
.ann-banner {
    display:flex; align-items:center; gap:.6rem;
    background:linear-gradient(90deg,var(--cerulean),var(--charcoal)); color:#fff;
    padding:.7rem 1rem; border-radius:12px; margin:0 0 1rem;
    box-shadow:var(--shadow); font-weight:600;
}
.ann-banner .ann-ico { font-size:1.1rem; flex:none; }
.ann-banner .ann-body { flex:1; }
.ann-banner .ann-x {
    flex:none; background:rgba(255,255,255,.18); border:0; color:#fff;
    width:28px; height:28px; border-radius:8px; font-size:1.2rem; line-height:1; cursor:pointer;
}

/* toast (new message, app open) */
.chat-toast {
    position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(10px);
    max-width:min(420px,calc(100vw - 32px));
    background:var(--gunmetal); color:#fff; padding:.7rem 1rem; border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:80; cursor:pointer;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    display:flex; flex-direction:column; gap:.15rem;
}
.chat-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.chat-toast b { font-size:.9rem; }
.chat-toast span { font-size:.86rem; opacity:.85; }

/* chat page */
.chat-notify-ask { margin-bottom:1rem; }
.chat-card { padding:0; overflow:hidden; }
/* a definite height so .chat-msgs scrolls internally and the composer
   stays pinned at the bottom instead of being pushed off the page.
   Anchored to the viewport (minus the stuff above it) so the composer is
   reachable on short/tablet screens without scrolling the whole page. */
.chat-wrap {
    display:grid; grid-template-columns:240px 1fr;
    grid-template-rows:minmax(0, 1fr);        /* force the row to the fixed
                                                height so .chat-msgs scrolls
                                                instead of the row growing */
    height:600px;                              /* fallback for no dvh/min() */
    height:min(620px, calc(100dvh - 300px));
    min-height:320px;
}

/* announcement editor collapsed by default so it doesn't push the chat down */
.ann-collapse { padding:.6rem 1rem; }
.ann-collapse > summary {
    cursor:pointer; font-weight:700; font-size:1.05rem; list-style:none;
    display:flex; align-items:center; gap:.4rem;
}
.ann-collapse > summary::-webkit-details-marker { display:none; }
.ann-collapse > summary::before { content:"▸"; font-size:.8em; color:var(--text-muted); }
.ann-collapse[open] > summary::before { content:"▾"; }
.ann-collapse[open] > summary { margin-bottom:.6rem; }

.chat-list {
    border-right:1px solid var(--border); background:var(--surface-2);
    overflow-y:auto; padding:.5rem;
}
.chat-list-head {
    font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-muted); padding:.7rem .6rem .3rem;
}
.chat-peer {
    width:100%; display:flex; align-items:center; gap:.5rem;
    background:none; border:0; text-align:left; cursor:pointer;
    padding:.6rem .6rem; border-radius:10px; color:var(--text); font:inherit;
}
.chat-peer:hover { background:rgba(0,0,0,.05); }
.chat-peer.active { background:var(--cerulean); color:#fff; }
.chat-peer-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.chat-badge {
    flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--danger); color:#fff; font-size:.72rem; font-weight:800; line-height:18px; text-align:center;
}
.chat-peer.active .chat-badge { background:rgba(255,255,255,.3); }

.chat-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-head {
    display:flex; align-items:center; gap:.5rem;
    padding:.8rem 1rem; border-bottom:1px solid var(--border); font-size:1.05rem;
}
.chat-back { display:none; }
.chat-msgs {
    flex:1; min-height:0; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.5rem;
    background:var(--bg);
}
.chat-msg { display:flex; flex-direction:column; align-items:flex-start; max-width:78%; }
.chat-msg.mine { align-self:flex-end; align-items:flex-end; }
.chat-bubble {
    background:var(--surface); border:1px solid var(--border); color:var(--text);
    padding:.55rem .8rem; border-radius:14px; border-bottom-left-radius:4px;
    white-space:pre-wrap; word-break:break-word; line-height:1.35;
}
.chat-msg.mine .chat-bubble {
    background:var(--cerulean); border-color:var(--cerulean); color:#fff;
    border-radius:14px; border-bottom-right-radius:4px;
}
.chat-meta { font-size:.72rem; color:var(--text-muted); margin:.15rem .3rem 0; }

.chat-composer {
    display:flex; gap:.5rem; align-items:flex-end;
    padding:.7rem; border-top:1px solid var(--border); background:var(--surface);
}
.chat-composer textarea {
    flex:1; resize:none; min-height:44px; max-height:140px; padding:.6rem .8rem;
    border:1px solid var(--border); border-radius:12px; font:inherit; background:var(--surface-2); color:var(--text);
}
.chat-composer .btn { flex:none; min-height:44px; }

@media (max-width:720px) {
    .chat-wrap { grid-template-columns:1fr; height:auto; min-height:0; }
    .chat-wrap .chat-list { max-height:none; min-height:200px; }
    .chat-wrap .chat-main { display:none; }
    .chat-wrap.show-main .chat-list { display:none; }
    /* open conversation takes over the whole screen so the composer is
       always reachable at the bottom, messages scroll between */
    .chat-wrap.show-main .chat-main {
        display:flex;
        position:fixed; inset:0; z-index:50; background:var(--bg);
    }
    .chat-wrap.show-main .chat-head { background:var(--surface); }
    .chat-wrap.show-main .chat-composer { padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); }
    .chat-back { display:inline-flex; }
}