/* ---------- TOKENS ---------- */
:root{
  --deck:#EEF1EC; --card:#FFFFFF; --inset:#E3E8E2; --line:#CBD4CD;
  --ink:#141F19; --muted:#42544B; --dim:#68786F;
  --dal:#2E8B5A; --dal-soft:#DCEFE4;
  --jag:#E8A317; --jag-soft:#FBEFCF;
  --alert:#C7401F; --alert-soft:#F8DCD4;
  --kraft:#B8925A; --kraft-soft:#F1E7D6;
  --indicator:#101915; --indicator-ink:#7CF0A8;
  --display:'Saira Condensed','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:4px; --shadow:0 1px 2px rgba(22,34,27,.08);
}
[data-theme="dark"]{
  --deck:#101915; --card:#17231C; --inset:#0B1210; --line:#25352D;
  --ink:#E4EEE8; --muted:#9DB3A7; --dim:#7E948A;
  --dal:#3FA870; --dal-soft:rgba(63,168,112,.16);
  --jag:#FFB627; --jag-soft:rgba(255,182,39,.16);
  --alert:#E4572E; --alert-soft:rgba(228,87,46,.18);
  --kraft:#C9A46A; --kraft-soft:rgba(201,164,106,.16);
  --indicator:#05080B; --indicator-ink:#7CF0A8;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--deck);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;font-weight:600}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- SHELL ---------- */
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:10px 14px}
.brand{font-family:var(--display);font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.brand i{font-style:normal;color:var(--dal)}
.brand small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--dim);font-weight:400;margin-top:-2px}
.top .who{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:right;line-height:1.3}
.top .who b{display:block;color:var(--ink);font-weight:500}
.ver-top{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--dim);align-self:center}
.toggle{border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toggle:hover{border-color:var(--dal);color:var(--dal)}

.layout{display:grid;grid-template-columns:1fr;max-width:1180px;margin:0 auto}
nav.tabs{display:flex;gap:2px;overflow-x:auto;padding:8px 10px 0;border-bottom:1px solid var(--line);background:var(--deck);
  position:sticky;top:57px;z-index:4;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:.88rem;font-weight:600;
  color:var(--muted);text-decoration:none;padding:10px 11px;border-bottom:2px solid transparent;white-space:nowrap}
nav.tabs a.on{color:var(--dal);border-bottom-color:var(--dal)}
nav.tabs a .n{font-family:var(--mono);font-size:.6rem;color:var(--card);background:var(--alert);border-radius:8px;padding:1px 5px;margin-left:4px;vertical-align:2px}
main{padding:14px 14px 60px}
@media(min-width:900px){
  .layout{grid-template-columns:200px 1fr}
  nav.tabs{flex-direction:column;position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);border-bottom:0;border-right:1px solid var(--line);padding:14px 8px;overflow:auto}
  nav.tabs a{border-bottom:0;border-left:2px solid transparent;padding:8px 12px}
  nav.tabs a.on{border-left-color:var(--dal)}
  main{padding:22px 26px 80px}
}

/* ---------- PHONE LAYOUT (v0.6.9): stop the header, picker and board from running off the right edge ---------- */
@media(max-width:640px){
  /* header wraps to two rows instead of overflowing; brand left, toggles right, picker full-width below */
  .top{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .brand{font-size:1.15rem;flex:1 1 auto;min-width:0}
  .top .toggle{flex:0 0 auto}
  .top .who{margin-left:0;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;order:9}
  .top .who .role{flex:1 1 auto;min-width:0;max-width:none}
  #todayLabel{white-space:nowrap;flex:0 0 auto}
  /* the role/user picker: full width, big enough to tap, never clipped */
  select.role{width:100%;max-width:100%;box-sizing:border-box}
  /* section headers: title and actions stack, actions don't shove off-screen */
  .sec-head h2{font-size:1.3rem}
  .sec-head .act{margin-left:0;flex:1 1 100%}
  .sec-head .act .btn{flex:1 1 auto}
  /* dispatch board + stat grids already stack (1fr) on narrow; make sure nothing forces width */
  .board,.grid{width:100%}
  .board .col,.job,.card{min-width:0;max-width:100%;box-sizing:border-box}
  /* long order text wraps on spaces/slashes instead of one word per line */
  .job,.row .a,.row .b,.card{overflow-wrap:anywhere;word-break:normal}
  /* stat numbers shrink a touch so 4-up doesn't overflow */
  .stat .v{font-size:1.5rem}
  main{padding:12px 12px 72px}
}
@media(max-width:400px){
  /* very narrow phones: 2-up stat grid instead of forcing 4 across */
  .g4{grid-template-columns:1fr 1fr}
  .brand small{font-size:.54rem}
}

/* sections: stacked without JS, tabbed with JS */
section{padding-bottom:36px;margin-bottom:36px;border-bottom:1px dashed var(--line)}
html.js section{display:none;border-bottom:0;margin-bottom:0}
html.js section.active{display:block}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h2{font-size:1.5rem}
.sec-head .eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sec-head .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- PIECES ---------- */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.card h3{font-size:1.05rem;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.card h3 .meta{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:none;color:var(--dim);font-weight:400}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.stat .v{font-family:var(--mono);font-size:1.5rem;font-weight:600;line-height:1}
.stat .l{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.stat.warn .v{color:var(--alert)}.stat.good .v{color:var(--dal)}.stat.jag .v{color:var(--jag)}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-weight:600;font-size:.8rem;background:var(--card)}
.btn.primary{background:var(--dal);border-color:var(--dal);color:#fff}
.btn.jag{background:var(--jag);border-color:var(--jag);color:#16221B}
.btn.big{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;padding:16px 22px;width:100%;justify-content:center;letter-spacing:.04em}
.btn.ghost{color:var(--muted)}

.tag{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:2px 6px;color:var(--muted);white-space:nowrap}
.tag.dal{color:var(--dal);border-color:var(--dal);background:var(--dal-soft)}
.tag.jag{color:#7a5306;border-color:var(--jag);background:var(--jag-soft)}
[data-theme="dark"] .tag.jag{color:var(--jag)}
.tag.alert{color:var(--alert);border-color:var(--alert);background:var(--alert-soft)}
.tag.kraft{color:#7a5a2a;border-color:var(--kraft);background:var(--kraft-soft)}
[data-theme="dark"] .tag.kraft{color:var(--kraft)}

.row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .id{font-family:var(--mono);font-weight:600;font-size:.85rem;min-width:64px;color:var(--dal)}
.row .body{flex:1;min-width:0}
.row .a{font-size:.85rem;font-weight:500}
.row .b{font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-top:2px}
.row .r{font-family:var(--mono);font-weight:600;white-space:nowrap;text-align:right;font-size:.85rem}
.row .r small{display:block;font-weight:400;color:var(--dim);font-size:.6rem}

table{width:100%;border-collapse:collapse;font-size:.82rem}
th{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);font-weight:500}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono)}
td.hot{color:var(--alert);font-weight:600}

label.f{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:10px 0 4px}
.in{width:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);padding:10px;font:inherit;color:var(--ink)}
.in.mono{font-family:var(--mono);font-size:1.05rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font-size:.78rem;background:var(--card);font-weight:500}
.chip.on{border-color:var(--dal);background:var(--dal-soft);color:var(--dal)}
.chip .q{font-family:var(--mono);color:var(--dim);font-size:.65rem;margin-left:4px}

/* signature: the ticket */
.ticket{background:var(--card);border:1px solid var(--line);border-radius:var(--r);position:relative;padding:14px 16px;
  font-family:var(--mono);box-shadow:var(--shadow)}
.ticket:before,.ticket:after{content:"";position:absolute;left:0;right:0;height:8px;
  background:radial-gradient(circle at 4px 4px,var(--deck) 3px,transparent 3.5px) 0 0/12px 8px repeat-x}
.ticket:before{top:-1px}.ticket:after{bottom:-1px;transform:rotate(180deg)}
.ticket .th{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:8px}
.ticket .th b{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;font-weight:600;letter-spacing:.03em}
.ticket .th span{font-size:.62rem;color:var(--dim)}
.ticket .ln{display:flex;justify-content:space-between;font-size:.78rem;padding:3px 0}
.ticket .ln span:first-child{color:var(--muted)}
.ticket .tot{border-top:2px solid var(--ink);margin-top:8px;padding-top:8px;display:flex;justify-content:space-between;font-weight:600;font-size:1.05rem}
.ticket .tot small{font-size:.6rem;color:var(--dim);font-weight:400;display:block}

/* signature: the indicator */
.indicator{background:var(--indicator);border-radius:var(--r);padding:14px 18px;color:var(--indicator-ink);font-family:var(--mono);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;box-shadow:inset 0 0 0 1px rgba(124,240,168,.15)}
.indicator .w{font-size:2.6rem;font-weight:600;letter-spacing:.04em;line-height:1}
.indicator .w small{font-size:.9rem;font-weight:400;margin-left:6px;opacity:.7}
.indicator .st{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65;text-align:right;line-height:1.5}

/* dispatch board */
.board{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.board{grid-template-columns:repeat(4,1fr)}}
.col h3{font-size:.95rem;color:var(--muted);margin-bottom:8px}
.job{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--dal);border-radius:var(--r);padding:10px;margin-bottom:8px;font-size:.8rem}
.job.jag{border-left-color:var(--jag)}
.job .id{font-family:var(--mono);font-weight:600;color:var(--dal)}
.job .c{font-weight:600;margin:2px 0}
.job .m{font-family:var(--mono);font-size:.62rem;color:var(--muted)}

/* phone frame */
.phone{max-width:300px;margin:0 auto;background:var(--indicator);border-radius:22px;padding:12px 10px;color:#D7E2DB;font-size:.8rem}
.phone .scr{background:#17231C;border-radius:14px;padding:12px;min-height:300px}
.phone .stop{border-bottom:1px solid #25352D;padding:8px 0}
.phone .stop b{display:block;font-family:var(--display);text-transform:uppercase;font-size:1rem;font-weight:600}
.phone .stop span{font-family:var(--mono);font-size:.62rem;color:#7A8F84}
.phone .sig{margin-top:10px;border:1px dashed #3FA870;border-radius:6px;height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.62rem;color:#3FA870;letter-spacing:.1em}

/* hours grid */
.hours{overflow-x:auto}
.hours table{min-width:560px}
.hours td.n{font-weight:500}
.hours td.ed{color:var(--jag);font-weight:600;position:relative}
.hours td.ed:after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--jag)}
.photo{background:var(--kraft-soft);border:1px dashed var(--kraft);border-radius:var(--r);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7a5a2a;font-family:var(--mono);font-size:.68rem;text-align:center;padding:14px}
[data-theme="dark"] .photo{color:var(--kraft)}
.photo b{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.03em}
.hist{font-family:var(--mono);font-size:.66rem;color:var(--muted);border-left:2px solid var(--jag);padding:4px 10px;margin-top:10px}

/* bars */
.bar{height:8px;background:var(--inset);border-radius:2px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--dal)}
.bar i.jag{background:var(--jag)}.bar i.alert{background:var(--alert)}

.note{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:8px}
.due{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.due:last-child{border-bottom:0}
.due .d{font-family:var(--mono);font-weight:600;min-width:58px;font-size:.85rem}
.due .d small{display:block;font-weight:400;font-size:.58rem;color:var(--dim)}
.due .t{flex:1}.due .t small{display:block;font-family:var(--mono);font-size:.62rem;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){section.active{animation:in .18s ease-out}@keyframes in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}}
:focus-visible{outline:2px solid var(--jag);outline-offset:2px}

/* ---------- APP ADDITIONS ---------- */
.hidden{display:none!important}
.role{border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--ink);font:inherit;font-size:.78rem;padding:6px 8px}
select.in{appearance:none}
textarea.in{min-height:64px;resize:vertical}
.in:focus{outline:2px solid var(--jag);outline-offset:1px;border-color:var(--dal)}
.f-row{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:600px){.f-row{grid-template-columns:1fr 1fr}.f-row.three{grid-template-columns:1fr 1fr 1fr}}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:5px 9px;font-size:.72rem}
.btn.danger{color:var(--alert);border-color:var(--alert)}
.row.click{cursor:pointer}.row.click:hover{background:var(--inset)}
.row.sel{background:var(--dal-soft)}
.empty{font-family:var(--mono);font-size:.7rem;color:var(--dim);padding:18px;text-align:center;border:1px dashed var(--line);border-radius:var(--r)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--card);font-family:var(--mono);font-size:.72rem;padding:10px 16px;border-radius:var(--r);z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.25)}
[data-theme="dark"] .toast{background:var(--dal);color:#06120b}
.modal-bg{position:fixed;inset:0;background:rgba(10,18,14,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:700px){.modal-bg{align-items:center;padding:20px}}
.modal{background:var(--card);border:1px solid var(--line);border-radius:10px 10px 0 0;width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:16px;box-shadow:0 -6px 30px rgba(0,0,0,.3)}
@media(min-width:700px){.modal{border-radius:8px}}
.modal h3{font-size:1.2rem;margin-bottom:8px}
.modal .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.modal .acts .btn{flex:1;justify-content:center}
.sigpad{border:1px dashed var(--dal);border-radius:var(--r);background:var(--card);width:100%;height:150px;touch-action:none;display:block}
.sig-img{max-width:220px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.kv{display:flex;justify-content:space-between;font-size:.8rem;padding:4px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}.kv span:first-child{color:var(--muted)}
.hours td input{width:56px;text-align:right;font-family:var(--mono);border:1px solid transparent;background:transparent;color:var(--ink);padding:4px;border-radius:3px;font-size:.85rem}
.hours td input:focus{border-color:var(--dal);background:var(--inset);outline:0}
.hours td.locked input{color:var(--dim)}
.hours th.today,.hours td.today{background:var(--dal-soft)}
.badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--alert);margin-left:6px;vertical-align:middle}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.total-line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:1.1rem;font-weight:600;border-top:2px solid var(--ink);padding-top:8px;margin-top:8px}
.ticket .sigline{border-top:1px solid var(--ink);margin-top:26px;padding-top:4px;font-size:.6rem;color:var(--dim)}
.big-sub{font-family:var(--mono);font-size:.62rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.warn-box{border:1px solid var(--alert);background:var(--alert-soft);border-radius:var(--r);padding:10px;font-size:.8rem;margin-top:10px}
.ok-box{border:1px solid var(--dal);background:var(--dal-soft);border-radius:var(--r);padding:10px;font-size:.8rem;margin-top:10px}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.footer-note{font-family:var(--mono);font-size:.6rem;color:var(--dim);text-align:center;padding:30px 0 10px}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%;padding:0}
  .ticket:before,.ticket:after{display:none}
}