/* FixDesk — mobile-first field-tool UI */
:root{
  --blue:#1d4ed8; --blue-dark:#1e40af;
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#f3f4f6; --card:#ffffff;
  --amber:#b45309; --amber-bg:#fef3c7;
  --green:#15803d; --green-bg:#dcfce7;
  --red:#b91c1c; --red-bg:#fee2e2;
  --purple:#7e22ce; --purple-bg:#f3e8ff;
  --gray:#4b5563; --gray-bg:#f3f4f6;
  --radius:12px; --tap:48px;
  --shadow:0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.45;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
a{color:var(--blue); text-decoration:none}
a:active{color:var(--blue-dark)}
h1{font-size:1.35rem; margin:.5rem 0 .75rem}
h2{font-size:1.1rem; margin:1rem 0 .5rem}
h3{font-size:1rem; margin:.75rem 0 .4rem}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50; background:#0f172a; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .8rem; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:.45rem; color:#fff; font-weight:700}
.brand-icon{font-size:1.2rem}
.brand-name{font-size:1.02rem; letter-spacing:.01em}
.topbar-right{display:flex; align-items:center; gap:.5rem}
.user-chip{display:flex; align-items:center; gap:.4rem; font-size:.85rem}
.role-badge{
  background:#334155; color:#e2e8f0; border-radius:999px; padding:.1rem .55rem;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.role-badge.role-admin{background:#7f1d1d; color:#fecaca}
.role-badge.role-engineer{background:#1e3a8a; color:#bfdbfe}
.role-badge.role-technician{background:#14532d; color:#bbf7d0}
.role-badge.role-viewer{background:#3f3f46; color:#e4e4e7}
.icon-btn{
  background:#1e293b; color:#fff; border:1px solid #334155; border-radius:10px;
  min-width:var(--tap); min-height:40px; font-size:1.2rem; cursor:pointer;
}
.menu-wrap{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  min-width:190px; overflow:hidden; z-index:60;
}
.menu button{display:block; width:100%; text-align:left; background:none; border:0;
  padding:.8rem 1rem; font-size:.95rem; cursor:pointer}
.menu button:active{background:var(--bg)}

/* Side nav (desktop) */
.sidenav{display:none}

/* Bottom nav (mobile) */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff;
  border-top:1px solid var(--line); display:flex;
  padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 8px rgba(0,0,0,.06);
}
.bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.5rem .1rem .55rem; color:var(--muted); font-size:.68rem; font-weight:600;
  min-height:60px; justify-content:center;
}
.bottomnav a .nav-ico{font-size:1.25rem; line-height:1}
.bottomnav a.active{color:var(--blue)}

/* Main view */
.view{padding:.8rem .8rem 1.2rem; max-width:1100px; margin:0 auto}
@media(min-width:900px){
  body{padding-bottom:0}
  .bottomnav{display:none}
  .sidenav{
    display:flex; gap:.25rem; background:#fff; border-bottom:1px solid var(--line);
    padding:.35rem .8rem; position:sticky; top:52px; z-index:40; overflow-x:auto;
  }
  .sidenav a{
    padding:.55rem .9rem; border-radius:999px; color:var(--muted); font-weight:600;
    font-size:.9rem; white-space:nowrap;
  }
  .sidenav a.active{background:#dbeafe; color:var(--blue-dark)}
  .view{padding:1.2rem}
}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.9rem; margin-bottom:.8rem}
.card h2:first-child,.card h3:first-child{margin-top:0}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; font-size:.92rem}
.kv dt{color:var(--muted); font-weight:600}
.kv dd{margin:0; word-break:break-word}
.muted{color:var(--muted)} .small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em}

/* Pills */
.pill{display:inline-block; border-radius:999px; padding:.18rem .65rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap}
.st-new{background:#dbeafe; color:#1d4ed8}
.st-in_progress{background:var(--amber-bg); color:var(--amber)}
.st-waiting{background:var(--purple-bg); color:var(--purple)}
.st-escalated{background:var(--red-bg); color:var(--red)}
.st-resolved{background:var(--green-bg); color:var(--green)}
.st-closed{background:var(--gray-bg); color:var(--gray)}
.pr-P1{background:var(--red); color:#fff}
.pr-P2{background:#ea580c; color:#fff}
.pr-P3{background:#ca8a04; color:#fff}
.pr-P4{background:#9ca3af; color:#1f2937}
.diff-apprentice{background:#dcfce7; color:#15803d}
.diff-technician{background:#dbeafe; color:#1d4ed8}
.diff-engineer{background:#f3e8ff; color:#7e22ce}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--radius); padding:.65rem 1.1rem; font-size:.95rem; font-weight:600;
  cursor:pointer; min-height:var(--tap); text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff}
.btn-primary:active{background:var(--blue-dark)}
.btn-danger{background:var(--red); border-color:var(--red); color:#fff}
.btn-green{background:var(--green); border-color:var(--green); color:#fff}
.btn-big{width:100%; font-size:1.1rem; padding:1rem}
.btn-sm{min-height:36px; padding:.35rem .7rem; font-size:.85rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0}

/* Forms */
label{display:block; font-weight:600; font-size:.88rem; margin:.7rem 0 .3rem}
input[type=text],input[type=tel],input[type=number],input[type=password],
input[type=email],input[type=date],input[type=datetime-local],select,textarea{
  width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:.7rem .8rem;
  font-size:1rem; background:#fff; min-height:var(--tap); font-family:inherit;
}
textarea{min-height:120px; resize:vertical}
textarea.tall{min-height:170px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue)}
.hint{font-size:.8rem; color:var(--muted); margin-top:.25rem}
.field-row{display:grid; gap:0 .7rem}
@media(min-width:700px){ .field-row.two{grid-template-columns:1fr 1fr} .field-row.three{grid-template-columns:1fr 1fr 1fr} }

/* Chips (select-one groups) */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0}
.chip{
  border:2px solid #cbd5e1; background:#fff; border-radius:999px;
  padding:.55rem 1rem; font-weight:700; font-size:.92rem; cursor:pointer; min-height:var(--tap);
}
.chip[aria-pressed=true]{border-color:var(--blue); background:#dbeafe; color:var(--blue-dark)}
.chip.multi[aria-pressed=true]{border-color:var(--green); background:var(--green-bg); color:var(--green)}

/* Autocomplete */
.ac-wrap{position:relative}
.ac-list{
  position:absolute; z-index:70; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  max-height:260px; overflow:auto;
}
.ac-item{padding:.7rem .9rem; border-bottom:1px solid var(--line); cursor:pointer; font-size:.95rem}
.ac-item:last-child{border-bottom:0}
.ac-item:active{background:#eff6ff}
.ac-item .sub{display:block; font-size:.78rem; color:var(--muted)}

/* Tables → cards on mobile */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:.9rem; background:#fff}
.tbl th,.tbl td{text-align:left; padding:.6rem .55rem; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{background:#f8fafc; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.tbl tr:active td{background:#eff6ff}

/* Incident cards (mobile list) */
.inc-card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem; margin-bottom:.6rem; color:var(--ink); box-shadow:var(--shadow)}
.inc-card .row1{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.35rem}
.inc-card .sym{font-weight:600; margin:.25rem 0}
.inc-card .meta{font-size:.8rem; color:var(--muted)}

/* Timeline */
.timeline{list-style:none; margin:.5rem 0; padding:0}
.timeline li{border-left:3px solid var(--line); padding:.1rem 0 .9rem .9rem; position:relative}
.timeline li::before{content:""; position:absolute; left:-7px; top:4px; width:11px; height:11px;
  border-radius:50%; background:#9ca3af}
.timeline li.nt-call_update::before{background:var(--blue)}
.timeline li.nt-troubleshooting::before{background:var(--amber)}
.timeline li.nt-status_change::before{background:var(--purple)}
.timeline li.nt-system::before{background:#9ca3af}
.timeline .ntype{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.timeline .nbody{white-space:pre-wrap; margin:.25rem 0}
.timeline .nmeta{font-size:.78rem; color:var(--muted)}

/* Article */
.safety-box{background:#fff7ed; border:2px solid #f97316; border-radius:var(--radius);
  padding:.9rem; margin:.8rem 0}
.safety-box h3{color:#9a3412; margin-top:0}
.steps{margin:.3rem 0; padding-left:1.4rem}
.steps li{margin-bottom:.45rem; white-space:pre-wrap}
.feedback-box{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
@media(min-width:700px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.7rem; text-align:center}
.stat .num{font-size:1.5rem; font-weight:800}
.stat .lbl{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}

/* Tabs */
.tabs{display:flex; gap:.4rem; overflow-x:auto; margin-bottom:.8rem; padding-bottom:.2rem}
.tabs button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:.55rem 1rem;
  font-weight:700; font-size:.9rem; white-space:nowrap; cursor:pointer; min-height:44px}
.tabs button.active{background:var(--blue); border-color:var(--blue); color:#fff}

/* Filters */
.filters{display:grid; gap:.5rem; grid-template-columns:1fr 1fr; margin-bottom:.7rem}
.filters .full{grid-column:1/-1}
@media(min-width:700px){.filters{grid-template-columns:repeat(4,1fr)} .filters .full{grid-column:auto}}

/* Modal */
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:flex;
  align-items:flex-end; justify-content:center}
@media(min-width:700px){.modal-back{align-items:center}}
.modal{background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:640px;
  max-height:92vh; overflow:auto; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
@media(min-width:700px){.modal{border-radius:16px}}
.modal h2{margin-top:0}

/* Toast */
#toast-root{position:fixed; left:50%; transform:translateX(-50%); bottom:90px; z-index:200;
  display:flex; flex-direction:column; gap:.4rem; align-items:center; width:min(92vw,480px)}
.toast{background:#111827; color:#fff; border-radius:10px; padding:.7rem 1rem; font-size:.9rem;
  box-shadow:var(--shadow); width:100%; text-align:center}
.toast.err{background:#7f1d1d}

/* Loading / empty */
.spinner{padding:2rem; text-align:center; color:var(--muted)}
.empty{padding:2rem 1rem; text-align:center; color:var(--muted); background:#fff;
  border:1px dashed var(--line); border-radius:var(--radius)}
.err-box{background:var(--red-bg); border:1px solid #fca5a5; color:#7f1d1d; border-radius:var(--radius);
  padding:.8rem; margin-bottom:.8rem}

/* Login */
.login-wrap{max-width:420px; margin:8vh auto 0}
.login-wrap .brand-big{text-align:center; font-size:1.6rem; font-weight:800; margin-bottom:1rem}
.demo-hint{background:#eff6ff; border:1px solid #bfdbfe; border-radius:var(--radius);
  padding:.7rem .9rem; font-size:.85rem; margin-top:.8rem; color:#1e3a8a}

/* KB home */
.kb-hero{text-align:center; padding:1.2rem .5rem .6rem}
.kb-search{display:flex; gap:.5rem; margin:.6rem 0}
.kb-search input{flex:1; font-size:1.1rem; padding:.9rem 1rem}
.kb-result{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem; margin-bottom:.6rem; color:var(--ink)}
.kb-result .code{font-size:.75rem; color:var(--muted)}
.kb-result .title{font-weight:700; margin:.15rem 0}
.kb-result .meta{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.78rem; color:var(--muted)}

/* Utility */
.row-between{display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap}
.mt{margin-top:.8rem} .mb{margin-bottom:.8rem}
.timer{font-variant-numeric:tabular-nums; font-weight:700}
.elapsed-big{font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums}
.divider{border:0; border-top:1px solid var(--line); margin:.9rem 0}

/* Print: article only */
@media print{
  .no-print, .topbar, .sidenav, .bottomnav, #toast-root, #modal-root, .menu-wrap{display:none !important}
  body{padding:0; background:#fff; font-size:12pt}
  .view{max-width:none; padding:0}
  .card{box-shadow:none; border:0; padding:0; margin-bottom:1em}
  a{color:#000; text-decoration:none}
  .safety-box{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Deltas 2026-10-11: sync badge, status pills, outcome pills, print article */
.sync-badge{display:inline-block; background:var(--amber-bg); color:var(--amber);
  border-radius:999px; padding:.18rem .65rem; font-size:.75rem; font-weight:700; white-space:nowrap}
.st-draft{background:#e2e8f0; color:#475569}
.st-verified{background:#dbeafe; color:#1d4ed8}
.st-published{background:var(--green-bg); color:var(--green)}
.st-archived{background:var(--gray-bg); color:var(--gray)}
.oc-pending{background:var(--amber-bg); color:var(--amber)}
.oc-passed{background:var(--green-bg); color:var(--green)}
.oc-failed{background:var(--red-bg); color:var(--red)}
.oc-skipped{background:var(--gray-bg); color:var(--gray)}
.failed-reminder{background:var(--red-bg); border-left:4px solid var(--red);
  border-radius:var(--radius); padding:.7rem .9rem; margin:.6rem 0}
#print-article{display:none}
.btn-picked{outline:3px solid var(--blue); outline-offset:2px}
.draft-notice{background:var(--amber-bg); color:var(--amber); border-radius:var(--radius);
  padding:.7rem .9rem; margin:.6rem 0; font-weight:600}
@media print{
  body > *:not(#print-article){display:none !important}
  #print-article{display:block !important}
}

/* ============ Phase 2 additions (2026-10-11) ============ */

/* Offline badge in the top bar */
.net-badge{display:inline-block; background:#7f1d1d; color:#fecaca;
  border-radius:999px; padding:.18rem .65rem; font-size:.75rem; font-weight:700; white-space:nowrap}

/* Report KPI grid (denser than .stat-grid for 5 cards) */
.kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
@media(min-width:700px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.kpi-grid{grid-template-columns:repeat(5,1fr)}}
.kpi-grid .stat{padding:.55rem}

/* Horizontal bars (FCR miss causes) */
.hbar{display:grid; grid-template-columns:130px 1fr 70px; gap:.6rem; align-items:center; margin:.45rem 0}
.hbar-lbl{font-size:.85rem; font-weight:600}
.hbar-track{background:var(--gray-bg); border-radius:999px; height:14px; overflow:hidden}
.hbar-fill{background:var(--blue); height:100%; border-radius:999px; min-width:2px}
.hbar-val{font-size:.85rem; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* Volume chart: stacked CSS bars */
.vchart{display:flex; align-items:flex-end; gap:.5rem; overflow-x:auto; padding:.5rem 0; min-height:170px}
.vbar-col{flex:1 0 52px; display:flex; flex-direction:column; align-items:center; gap:.25rem}
.vbar{display:flex; flex-direction:column-reverse; width:100%; max-width:44px; border-radius:6px 6px 0 0; overflow:hidden; background:var(--gray-bg)}
.vbar-seg{width:100%}
.vbar-total{font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums}
.vbar-lbl{font-size:.72rem; color:var(--muted)}
.legend{display:flex; flex-wrap:wrap; gap:.8rem; font-size:.82rem}
.legend-item{display:inline-flex; align-items:center; gap:.35rem}
.legend-swatch{display:inline-block; width:12px; height:12px; border-radius:3px}

/* Pareto cumulative bar */
.pareto-bar{width:90px; height:8px; background:var(--gray-bg); border-radius:999px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:.4rem}
.pareto-fill{background:var(--green); height:100%}

/* Photo attachments */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.5rem 0}
@media(min-width:700px){.photo-grid{grid-template-columns:repeat(4,1fr)}}
.photo-thumb{position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.photo-thumb img{display:block; width:100%; height:96px; object-fit:cover}
.photo-meta{font-size:.68rem; color:var(--muted); padding:.25rem .4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.photo-del{position:absolute; top:4px; right:4px; min-height:32px; padding:.15rem .55rem}
input[type=file]{width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:.55rem .7rem;
  font-size:.92rem; background:#fff; min-height:var(--tap)}

/* Escalation cards */
.esc-card{border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .8rem; margin-bottom:.6rem; background:#fff}
.esc-overdue{border-color:var(--red); box-shadow:0 0 0 2px var(--red-bg)}
a.inc-card.esc-overdue{border-color:var(--red)}
.esc-open{background:#dbeafe; color:#1d4ed8}
.esc-awaiting{background:var(--amber-bg); color:var(--amber)}
.esc-closed{background:var(--gray-bg); color:var(--gray)}

/* Offline mode banner */
.offline-banner{background:var(--amber-bg); border:1px solid #f59e0b; color:#92400e;
  border-radius:var(--radius); padding:.7rem .9rem; margin:.6rem 0; font-size:.9rem}

/* Versioning banner (editor) */
.version-banner{background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a;
  border-radius:var(--radius); padding:.7rem .9rem; margin:.6rem 0; font-size:.9rem}

/* Version snapshot (read-only) */
.version-snap{background:#f8fafc}

/* Review queue reason chips */
.reason-low_feedback{background:var(--red-bg); color:var(--red)}
.reason-stale{background:var(--amber-bg); color:var(--amber)}
.reason-never_used{background:var(--gray-bg); color:var(--gray)}