:root{
  --navy:#1E1464; --blue:#0014DC; --blue-2:#3A4BFF; --ink:#23232D; --muted:#6B6F80; --line:#E3E5EE;
  --bg:#F3F4F8; --card:#FFFFFF; --tint:#EEF1FB; --ok:#1B7A3A; --ok-bg:#E2F5E8; --warn:#9A5B00; --warn-bg:#FFF1D6;
  --bad:#B42318; --bad-bg:#FDE7E5; --radius:14px; --shadow:0 1px 2px rgba(20,20,60,.06),0 4px 16px rgba(20,20,60,.06);
}
*{box-sizing:border-box} html,body{margin:0}
body{font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button{font:inherit;cursor:pointer} input,select,textarea{font:inherit;color:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--navy);color:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.topbar .brand .drop{width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center}
.topbar .note{opacity:.7;font-size:12px;margin-right:auto}
.switch{display:flex;background:rgba(255,255,255,.12);border-radius:10px;padding:3px}
.switch button{border:0;background:transparent;color:#fff;padding:6px 14px;border-radius:8px;font-weight:600}
.switch button.on{background:#fff;color:var(--navy)}
.stage{display:flex;justify-content:center;padding:28px 16px 60px}
/* ---------- field (supervisor) page: phone layout by default, wide layout on a PC ---------- */
.phone{width:100%;max-width:1000px;background:var(--bg);position:relative;display:flex;flex-direction:column}
.app-head{background:var(--navy);color:#fff;padding:16px 18px 18px}
.app-head .small{font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.6px}
.app-head h1{font-size:20px;margin:2px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14)}
.scroll{padding:14px 14px 20px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1}
.field{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;outline:none}
.field:focus{border-color:var(--blue)}
.seg{display:flex;background:var(--tint);border-radius:10px;padding:3px}
.seg button{flex:1;border:0;background:transparent;padding:9px;border-radius:8px;font-weight:600;color:var(--muted)}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#jshow button{white-space:nowrap;padding:9px 14px}
@media (max-width:767px){#jshow{flex:1 1 100%;order:3}}
.btn{border:0;border-radius:12px;padding:14px 16px;font-weight:700;background:var(--blue);color:#fff;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--tint);color:var(--navy)}
.btn.small{width:auto;padding:8px 12px;font-size:13px;border-radius:9px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{border-radius:10px;padding:8px 0;text-align:center;font-size:12px;background:var(--tint);color:var(--muted);border:1.5px solid transparent}
.day b{display:block;font-size:15px;color:var(--ink)}
.day.ok{background:var(--ok-bg);color:var(--ok)} .day.miss{background:var(--bad-bg);color:var(--bad)}
.day.today{border-color:var(--blue)} .day.sel{outline:2px solid var(--navy);outline-offset:1px}
.engine{border:1.5px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
.engine.err{border-color:var(--bad);background:#FFFBFA} .engine.warn{border-color:#E8A23A;background:#FFFCF5}
.engine .name{font-weight:700} .engine .sub{font-size:12px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:6px;margin-top:10px}
.qty button{width:44px;height:44px;border-radius:10px;border:0;background:var(--tint);color:var(--navy);font-size:20px;font-weight:700}
.qty input{flex:1;height:44px;text-align:center;font-size:20px;font-weight:700;border:1.5px solid var(--line);border-radius:10px;outline:none;min-width:0}
.qty input:focus{border-color:var(--blue)}
.qty .unit{font-weight:700;color:var(--muted);width:20px}
.zero{border:0;background:none;color:var(--blue);font-weight:600;font-size:13px;padding:6px 0 0}
.msg{font-size:13px;margin-top:8px;padding:7px 10px;border-radius:8px}
.msg.err{background:var(--bad-bg);color:var(--bad)} .msg.warn{background:var(--warn-bg);color:var(--warn)}
.comment{margin-top:8px}
.bottom{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 14px 16px;display:flex;gap:12px;align-items:center}
.bottom .tot{font-size:12px;color:var(--muted)} .bottom .tot b{display:block;font-size:20px;color:var(--ink)}
.fixed{display:flex;gap:8px}
.pill{font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;background:var(--tint);color:var(--navy)}
.big-ok{text-align:center;padding:40px 10px}
.big-ok .circle{width:84px;height:84px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 16px;font-size:42px}
table{width:100%;border-collapse:collapse}
.sum td{padding:7px 0;border-bottom:1px solid var(--line)} .sum td:last-child{text-align:right;font-weight:700}
.sheet-bg{position:fixed;inset:0;background:rgba(20,20,40,.45);display:flex;align-items:flex-end;z-index:5}
.sheet{background:#fff;border-radius:20px 20px 0 0;padding:18px;width:100%;max-height:85%;overflow:auto}
@media (min-width:768px){
  .phone{border-radius:18px;box-shadow:var(--shadow)}
  .app-head{border-radius:18px 18px 0 0;padding:20px 28px} .app-head h1{font-size:24px}
  .scroll{padding:20px 28px 24px}
  #engines{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} #engines .engine{margin:0}
  .home-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .bottom{border-radius:0 0 18px 18px;padding:14px 28px}
  .sheet-bg{align-items:center;justify-content:center} .sheet{max-width:520px;border-radius:18px}
}
/* ---------- office ---------- */
.office{width:100%;max-width:1920px}
@media (min-width:1200px){ .stage{padding-left:28px;padding-right:28px} }
.tabs{display:flex;gap:4px;margin-bottom:16px}
.tabs button{border:0;background:transparent;padding:9px 16px;border-radius:10px;font-weight:600;color:var(--muted)}
.tabs button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi .v{font-size:28px;font-weight:800;color:var(--navy)} .kpi .k{font-size:13px;color:var(--muted)}
.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.grid th{text-align:left;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:10px;border-bottom:1px solid var(--line);background:#FAFBFD}
.grid td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.grid tr:hover td{background:#FAFBFF}
.dots{display:flex;gap:4px} .dot{width:14px;height:14px;border-radius:4px;background:var(--line)}
.dot.ok{background:#3DBE6A} .dot.miss{background:#F0645A}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.miss{background:var(--bad-bg);color:var(--bad)} .badge.warn{background:var(--warn-bg);color:var(--warn)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--tint);border-radius:10px;padding:10px 12px;font-family:Consolas,monospace;font-size:13px;word-break:break-all}
.wa{white-space:pre-wrap;background:#E7F8EE;border-radius:10px;padding:12px;font-size:13px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;z-index:50;display:none}
.muted{color:var(--muted)} .right{text-align:right}
h2{font-size:18px;margin:0 0 10px;color:var(--navy)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.check{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer}
.check span:first-of-type{flex:1;font-weight:600}
.check.on{border-color:var(--blue);background:var(--tint)}
.check input{width:18px;height:18px;accent-color:var(--blue)}
@media (max-width:767px){
  .stage{padding:0}
  .topbar{padding:10px 12px;gap:8px} .topbar .note{display:none} .switch button{padding:6px 10px;font-size:13px}
  .office{padding:12px} .kpis{grid-template-columns:1fr 1fr} .kpi .v{font-size:22px}
  .two,.formgrid{grid-template-columns:1fr}
  .tabs{overflow-x:auto} .card > .row{flex-wrap:wrap}
  /* tables become one card per row; each cell shows its column name */
  .grid thead{display:none}
  .grid tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .grid td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:3px 0;text-align:right}
  .grid td::before{content:attr(data-l);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;text-align:left}
  .grid td[data-l=""]::before{content:none}
  .grid td .field{max-width:60%}
}
/* ---------- real app extras ---------- */
.topbar .who{font-size:13px;opacity:.85;margin-left:auto}
.day.off{opacity:.4;cursor:not-allowed}
.loading{padding:40px;text-align:center;color:var(--muted)}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
input.bad{border-color:var(--bad)!important}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.scrollbox{max-height:600px;overflow:auto}
.tablewrap{overflow-x:auto}
.acts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.acts:empty{display:none}
@media (max-width:767px){ .scrollbox,.tablewrap{max-height:none;overflow:visible} .acts{justify-content:flex-start} .topbar .who{display:none} .office > .row > .tabs{flex-basis:100%;order:2;flex-wrap:nowrap} .tabs button{white-space:nowrap;flex-shrink:0;padding:8px 12px} }
/* add-new box on the New job form */
.addbox{margin-top:12px;padding:12px;border:1.5px dashed var(--blue);border-radius:12px;background:var(--tint)}
/* Today: status colours per job (red = missed yesterday + today, orange = pending today, green = reported) */
.grid.status tr.st-late td{background:#FDECEA} .grid.status tr.st-pend td{background:#FFF4E0} .grid.status tr.st-ok td{background:#EEF9F1}
.grid.status tr td:first-child{border-left:5px solid transparent}
.grid.status tr.st-late td:first-child{border-left-color:#D92D20} .grid.status tr.st-pend td:first-child{border-left-color:#F59E0B} .grid.status tr.st-ok td:first-child{border-left-color:#22A559}
.grid.status tr:hover td{filter:brightness(.98)}
.stat{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.stat.late{background:#D92D20;color:#fff} .stat.pend{background:#F59E0B;color:#fff} .stat.ok{background:#22A559;color:#fff}
.legend{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.legend.late{background:#FDECEA;color:#B42318} .legend.pend{background:#FFF4E0;color:#9A5B00} .legend.ok{background:#EEF9F1;color:#1B7A3A}
@media (max-width:767px){
  .grid.status tr{border-radius:12px;margin-bottom:8px;padding:8px 10px;border-left:6px solid transparent}
  .grid.status tr td, .grid.status tr td:first-child{background:transparent;border-left:0}
  .grid.status tr.st-late{background:#FDECEA;border-left-color:#D92D20} .grid.status tr.st-pend{background:#FFF4E0;border-left-color:#F59E0B} .grid.status tr.st-ok{background:#EEF9F1;border-left-color:#22A559}
}

/* ---------- statistics ---------- */
.filters .frow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:10px}
.flt{display:flex;flex-direction:column;gap:4px;min-width:150px}
.flt > span{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.flt .field{padding:8px 10px} .flt .seg button{padding:7px 12px}
.kpis5{grid-template-columns:repeat(5,1fr)} .kpi .v small{font-size:14px;font-weight:600;color:var(--muted)}
.chartbox{position:relative;width:100%;min-height:220px} .chartbox svg{display:block}
.tip{position:absolute;display:none;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px 10px;font-size:12px;min-width:150px;z-index:3}
.tip .tt{display:flex;align-items:center;gap:6px;margin-top:3px} .tip .tt b{margin-left:auto}
.tip i,.legend-row i,.hbar i,.dot-i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.dot-i{margin-right:6px;vertical-align:-1px}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;margin:4px 0 8px} .legend-row span{display:flex;align-items:center;gap:6px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:13px}
.hbar .hl{display:flex;align-items:center;gap:6px;min-width:0} .hbar .hl span{overflow-wrap:anywhere;line-height:1.25}
.hbar .ht{height:12px;background:var(--tint);border-radius:4px;overflow:hidden} .hbar .hf{height:100%;border-radius:4px}
.hbar .hv{font-weight:700;text-align:right;min-width:52px}
@media (max-width:1100px){ .kpis5{grid-template-columns:repeat(3,1fr)} .three{grid-template-columns:1fr 1fr} }
@media (max-width:767px){ .kpis5{grid-template-columns:1fr 1fr} .three{grid-template-columns:1fr} .flt{min-width:0;flex:1 1 100%} .flt .seg{width:100%} .filters .frow{gap:8px} .filters .frow > .btn{flex:1} }