/* Look and feel copied from mock-up v2 (carwash_mockup_v2.html), plus login and a few extras at the bottom. */
:root{
  --bg:#eef1f4; --surface:#ffffff; --raised:#f6f8fa; --ink:#14202c; --mute:#5d6b79; --line:#dde3ea;
  --accent:#1d5f6e; --accent-soft:#e1eef1;
  --ok:#23845a; --ok-soft:#dcf1e6; --warn:#b97a00; --warn-soft:#fbefd2; --bad:#c23b31; --bad-soft:#fbe2df;
  --font:"Commissioner","Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);font-variant-numeric:tabular-nums;padding-bottom:84px}
button{font-family:inherit}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px}
.top-in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{font-weight:800;font-size:17px} .brand small{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.example{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.clock{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
.clock b{color:var(--ink);font-size:15px}
.mini{border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:8px;padding:4px 8px;font:600 12px var(--font);cursor:pointer}
main{max-width:760px;margin:0 auto;padding:16px;display:grid;gap:14px}
h1{font-size:20px;margin:0} .note{color:var(--mute);font-size:13px;margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.panel h2{margin:0 0 6px;font-size:16px}
label.f{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--mute);margin-top:10px}
select,input,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--ink);font:15px var(--font)}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.seg.four{grid-template-columns:repeat(2,1fr)} @media(min-width:560px){.seg.four{grid-template-columns:repeat(4,1fr)}}
.seg button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 6px;font-weight:600;font-size:13.5px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.slot{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink)}
.slot small{display:block;font-weight:500;font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.taken,.slot.past{background:#e3e7eb;color:#9aa5b0;cursor:not-allowed;border-color:#e3e7eb}
.slot.taken small{color:#8f9aa5}
.slot.sel{background:var(--accent);border-color:var(--accent);color:#fff} .slot.sel small{color:#d7ecf0}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--mute);font-size:12px;margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.banner{border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600}
.b-bad{background:var(--bad-soft);color:var(--bad)} .b-warn{background:var(--warn-soft);color:var(--warn)} .b-ok{background:var(--ok-soft);color:var(--ok)}
.primary{width:100%;border:0;border-radius:12px;min-height:50px;background:var(--accent);color:#fff;font:800 16px var(--font);cursor:pointer;margin-top:14px}
.primary:disabled{background:#b9c3cc;cursor:not-allowed}
.list .row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.list .row:last-child{border-bottom:0}
.t{font-weight:800} .meta{color:var(--mute);font-size:12.5px}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.p-bad{background:var(--bad-soft);color:var(--bad)} .p-warn{background:var(--warn-soft);color:var(--warn)} .p-ok{background:var(--ok-soft);color:var(--ok)} .p-acc{background:var(--accent-soft);color:var(--accent)} .p-mute{background:var(--raised);color:var(--mute)}
/* washer */
.now{border:2px solid var(--accent);border-radius:16px;padding:16px;background:var(--surface);display:grid;gap:8px}
.now .tag{color:var(--accent);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.now .code{font-size:30px;font-weight:800;line-height:1.1}
.now .car{font-size:17px;font-weight:600} .now .why{color:var(--mute);font-size:14px}
.timer{font-size:40px;font-weight:800;color:var(--accent);line-height:1}
.big{border:0;border-radius:16px;min-height:76px;font:800 24px var(--font);color:#fff;cursor:pointer;letter-spacing:.04em;width:100%}
.big.start{background:var(--ok)} .big.stop{background:var(--bad)}
.big:focus-visible,.primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.qbtn{border:0;border-radius:10px;padding:10px 12px;font:800 13px var(--font);color:#fff;background:var(--ok);cursor:pointer}
.qbtn:disabled{background:#b9c3cc;cursor:not-allowed}
.ghost{width:100%;border:1px dashed var(--mute);background:transparent;color:var(--ink);border-radius:12px;min-height:46px;font:700 14px var(--font);cursor:pointer}
/* management */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px;min-width:0}
.tile .lbl{color:var(--mute);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tile .bigN{font-size:30px;font-weight:800;line-height:1.1} .tile .sub{color:var(--mute);font-size:12.5px}
.tl{position:relative;height:30px;background:var(--raised);border-radius:8px;margin-top:4px;overflow:hidden}
.tl span{position:absolute;top:4px;bottom:4px;border-radius:5px}
.tl .bk{background:#c9dde2} .tl .dn{background:var(--ok)} .tl .ip{background:var(--accent)} .tl .gap{background:repeating-linear-gradient(45deg,var(--bad-soft) 0 5px,#f4c5bf 5px 10px);top:0;bottom:0;border-radius:0}
.tl .nowl{position:absolute;top:0;bottom:0;width:2px;background:var(--bad)}
.tlrow{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:center;margin-top:6px;font-size:12px;color:var(--mute);font-weight:600}
.axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-left:86px;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--mute);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:6px 4px;border-bottom:1px solid var(--line)}
td{padding:7px 3px;border-bottom:1px solid var(--line);vertical-align:top}
.scroll{overflow-x:auto}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;height:130px;margin-top:8px}
.bar{text-align:center;line-height:1.25;display:grid;gap:3px;align-items:end;justify-items:center;font-size:11.5px;color:var(--mute);height:100%;grid-template-rows:1fr auto}
.bar .pair{display:flex;gap:3px;align-items:end;height:100%}
.bar .pair i{display:block;width:14px;border-radius:4px 4px 0 0}
/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:6}
.tabs button{border:0;background:transparent;color:var(--mute);font:700 12.5px var(--font);padding:6px 2px;border-radius:10px;cursor:pointer;display:grid;justify-items:center;gap:2px}
.tabs button span{font-size:20px;line-height:1}
.tabs button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;z-index:9;max-width:90vw}
footer{color:var(--mute);font-size:12px}
/* ---- additions for the real app ---- */
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.rolepill{background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:12px;padding:4px 10px;border-radius:999px}
.login{max-width:420px;margin:8vh auto 0;padding:16px;display:grid;gap:14px}
.login .panel{padding:18px}
.login .seg{grid-template-columns:repeat(3,1fr)}
.pin{font-size:26px;letter-spacing:.3em;text-align:center;font-weight:800}
.err{color:var(--bad);font-weight:700;font-size:14px;min-height:20px;margin:8px 0 0}
.daypick{display:flex;gap:8px;align-items:center}
.daypick select{flex:1}
.linkbtn{border:0;background:transparent;color:var(--accent);font:700 13px var(--font);cursor:pointer;padding:4px 0;text-decoration:underline}
.cancel{border:1px solid var(--line);background:var(--surface);color:var(--bad);border-radius:8px;padding:3px 8px;font:700 11.5px var(--font);cursor:pointer;margin-top:4px}
.right{display:grid;justify-items:end;gap:2px}
.exbadge{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.tabs.n1{display:none} .tabs.n2{grid-template-columns:repeat(2,1fr)}
body.nologin{padding-bottom:0}
.export{display:inline-block;margin-top:8px;color:var(--accent);font-weight:700;font-size:13px}
.offline{background:var(--bad);color:#fff;text-align:center;font-size:13px;font-weight:700;padding:6px}
/* car search box */
.carq{margin-top:4px}
.carres{display:grid;gap:6px;margin-top:6px}
.hit{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font:600 14px var(--font);color:var(--ink);cursor:pointer}
.hit:hover{border-color:var(--accent)}
.chosen{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-top:4px;font-size:14.5px}
.newcar{border:1px dashed var(--accent);border-radius:12px;padding:10px 12px;background:var(--raised)}
.newcar h3{margin:0;font-size:14.5px}
.addbtn{width:100%;margin-top:10px;background:var(--accent)}
.kind{font-size:11px;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:1px 5px;margin-left:4px}
/* ===================== v2: settings, corrections, several bays, accessories ===================== */
.top-in{max-width:760px}
body.wide main,body.wide .top-in{max-width:1180px}
.demobar{background:repeating-linear-gradient(135deg,var(--warn-soft) 0 12px,#f7e6bd 12px 24px);color:var(--warn);font-weight:700;font-size:12.5px;text-align:center;padding:6px 12px}
.extag{display:inline-block;background:var(--warn-soft);color:var(--warn);font-weight:800;font-size:10px;letter-spacing:.06em;padding:1px 6px;border-radius:6px;vertical-align:1px}
.login .seg.roles{grid-template-columns:repeat(2,1fr)}
.login .seg.roles button:last-child{grid-column:1/-1}
.login .hint{margin-top:8px}
.tabs.n4{grid-template-columns:repeat(4,1fr)} .tabs.n5{grid-template-columns:repeat(5,1fr)}
.tabs.n5 button{font-size:11.5px}
@media(min-width:980px){.tabs{justify-content:center;grid-template-columns:repeat(5,130px)!important}.tabs.n2{grid-template-columns:repeat(2,150px)!important}}
.cols{display:grid;gap:14px;min-width:0}
@media(min-width:980px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.cols.detail{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:760px){.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile.t-bad{border-color:var(--bad);background:var(--bad-soft)} .tile.t-bad .bigN{color:var(--bad)}
.tile.t-ok .bigN{color:var(--ok)}
.slot.part{background:var(--accent-soft)} .slot.part small{color:var(--accent)}
.now.next{border-style:dashed}
.inline{display:flex;gap:8px;margin-top:8px}
.wide-btn{background:var(--accent);width:100%;margin-top:8px}
.qbtn.dark{background:var(--ink)}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.center{display:block;margin:8px auto 0}
.danger{color:var(--bad)}
.hint{display:block;font-weight:500;color:var(--mute);font-size:12px}
h2.sp{margin-top:18px}
/* timeline axis with real hours */
.axis{position:relative;height:16px;display:block}
.axis span{position:absolute;transform:translateX(-50%)}
.axis span:first-child{transform:none}
.axis span:last-child{transform:translateX(-100%)}
tr.fixing td{background:var(--warn-soft)}
/* correction window */
.sheet{position:fixed;inset:0;background:rgba(20,32,44,.45);z-index:20;display:grid;place-items:end center;padding:12px}
@media(min-width:700px){.sheet{place-items:center}}
.sheet-in{width:100%;max-width:480px;max-height:92vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.opts{display:grid;gap:6px;margin-top:10px}
.opt{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.opt small{display:block;color:var(--mute);font-size:12.5px}
.opt[aria-pressed="true"]{border:2px solid var(--accent);background:var(--accent-soft)}
/* settings */
.toggle{display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer}
.toggle input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.toggle small{display:block;color:var(--mute);font-size:12.5px;font-weight:500}
/* accessories */
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.addnew{background:var(--accent);white-space:nowrap;padding:12px 14px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar select{width:auto;flex:none}
.seg.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.seg.chips button{padding:8px 12px}
.alerts{display:grid;gap:4px}
.alertline{all:unset;cursor:pointer;font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:2px}
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ocard{display:grid;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.ocard:hover{border-color:var(--accent)}
.ocard.late{border:2px solid var(--bad)} .ocard.ready{border:2px solid var(--ok)}
.otop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.otop h2{margin:0}
.prog{height:6px;background:var(--raised);border-radius:999px;overflow:hidden}
.prog span{display:block;height:100%;background:var(--ok);border-radius:999px}
.alerttxt{color:var(--bad);font-weight:700;font-size:12.5px}
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px}
.ilist li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center}
.ilist li i{width:10px;height:10px;border-radius:50%;background:#c3ccd5}
.ilist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ilist li em{font-style:normal;color:var(--mute);font-size:11.5px}
.ilist .st-ordered i{background:var(--warn)} .ilist .st-received i,.ilist .st-fitted i{background:var(--accent)} .ilist .st-checked i{background:var(--ok)}
.ilist li.mine span{font-weight:800}
.backbtn{justify-self:start;text-decoration:none;font-size:14px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:10px 0 0}
.info dt{color:var(--mute);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.info dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.notes{background:var(--raised);border-radius:10px;padding:8px 10px;margin:10px 0 0;font-size:14px}
.readybox{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.readybox .btns{margin:0}
.items{display:grid;gap:10px;margin-top:6px}
.item{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:8px}
.item.late{border:2px solid var(--bad);background:#fff8f7}
.ihead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.steps li{border-radius:10px;background:var(--raised);padding:6px 6px;font-size:11px;line-height:1.3;border:1px solid var(--line);min-width:0}
.steps li b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.steps li small{color:var(--mute);font-size:10.5px}
.steps li.done{background:var(--ok-soft);border-color:#b9e2cb} .steps li.done b{color:var(--ok)}
.steps li.next{border:2px dashed var(--accent)}
.stepbtn{width:100%;min-height:48px;font-size:15px}
.tools{display:flex;gap:14px;flex-wrap:wrap}
.undo,.subform{border:1px dashed var(--accent);border-radius:12px;padding:10px 12px;background:var(--raised)}
.subform h3{margin:0;font-size:14.5px}
.ghost{margin-top:10px}
.lines{display:grid;gap:10px;margin-top:8px}
.line{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:10px}
.lnum{font-weight:800;color:var(--mute);padding-top:10px}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lgrid [data-lf=description]{grid-column:1/-1}
.lgrid .seg{grid-column:1/-1}
.lgrid [data-lf=supplier]{grid-column:1/-1}
@media(min-width:980px){.lgrid{grid-template-columns:2fr 1fr 1fr}.lgrid [data-lf=description]{grid-column:auto}}
.seg.mini2 button{padding:7px 6px}
.seg.three{grid-template-columns:1fr} @media(min-width:560px){.seg.three{grid-template-columns:repeat(3,1fr)}}
.brand .sub{font-weight:600;color:var(--mute);font-size:13px}
@media(max-width:520px){.brand .sub{display:none}}
/* ===================== v3 polish (Claude, Oct 27): calmer, clearer, phone first =====================
   - sentence case labels instead of small tracked capitals; one divided KPI strip instead of 4 boxes
   - outline SVG tab icons (no emoji), active tab by colour + a top mark
   - compact two-row header on phones; flat example bar (no stripes)
   - minutes column right-aligned with the target in grey; visible keyboard focus everywhere */
:root{--ink:#111c26;--mute:#566371;--line:#e1e6eb}
body{font-size:15px}
h1{font-size:22px;letter-spacing:-.01em}
.panel h2{font-size:16px;font-weight:700}
/* header: name + date on the left, time over role/exit on the right (2 rows, no wrapping) */
.top{padding:10px 16px}
.top-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand clock" "brand who";align-items:center;gap:4px 12px}
.brand{grid-area:brand;min-width:0}
.clock{grid-area:clock;justify-self:end}
.who{grid-area:who;justify-self:end}
@media(min-width:760px){.top-in{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand clock who";gap:16px}}
.rolepill{font-weight:700}
.mini{min-height:30px;padding:4px 10px}
/* example data: one flat notice, not a striped band */
.demobar{background:var(--warn-soft);border-bottom:1px solid #f0dca6;font-weight:600}
/* small labels in sentence case */
.tile .lbl,th,.now .tag,.info dt{text-transform:none;letter-spacing:0}
.tile .lbl{font-size:13px;font-weight:600}
.now .tag{font-size:13px}
.info dt{font-size:12.5px;font-weight:600}
th{font-size:12px;font-weight:600}
/* KPIs: one container split by hairlines, not four floating boxes */
.tiles{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tile{border:0;border-radius:0;padding:14px 16px}
.tile.t-bad{border:0}
.tile .bigN{font-size:28px;font-weight:700;letter-spacing:-.01em}
.tile .sub b{font-weight:700}
/* report table: minutes right-aligned, target in grey, flagged ones as a red pill */
td.num,th.num{text-align:right;white-space:nowrap}
.of{color:var(--mute);font-size:11.5px;margin-left:1px}
td .pill{display:inline-block}
/* bottom tabs: outline icons, active = accent colour + a 3px mark on top */
.tabs{padding-top:0}
.tabs button{position:relative;padding:9px 2px 6px;border-radius:0;gap:3px;font-weight:600}
.tabs button svg{display:block}
.tabs button[aria-selected="true"]{background:transparent;color:var(--accent);font-weight:800}
.tabs button[aria-selected="true"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.tabs button:hover{color:var(--ink)}
/* keyboard focus that can be seen on every control */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tabs button:focus-visible{outline-offset:-3px}
/* pressing feels like pressing (no movement for people who turn motion off) */
@media (prefers-reduced-motion:no-preference){
  .big,.primary,.qbtn,.slot,.seg button,.tabs button{transition:transform .08s ease,background-color .15s ease,color .15s ease}
  .big:active,.primary:active:not(:disabled),.qbtn:active:not(:disabled),.slot:active:not(:disabled),.seg button:active{transform:scale(.98)}
}
.finds{margin:0;padding-left:18px;display:grid;gap:4px}
#tQuick{white-space:nowrap}
/* ===================== v4: services (Ms. Kleri's list), washer day schedule ===================== */
.login .seg.roles.even button:last-child{grid-column:auto}
/* reasons: 2 per row on phones (the 5th spans), 5 across on wide screens */
.seg.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.reasons button:last-child{grid-column:1/-1}
@media(min-width:980px){.seg.reasons{grid-template-columns:repeat(3,minmax(0,1fr))}.seg.reasons button:last-child{grid-column:auto}}
.seg.reasons button{min-height:48px;line-height:1.25}
.incl{margin:10px 0 0;padding:10px 12px;background:var(--accent-soft);border-radius:10px;font-size:14px}
.incl b{color:var(--accent)}
.extras{border:0;margin:0;padding:0;display:grid;gap:6px}
.extras legend{padding:0;margin:10px 0 4px}
.chk{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font-weight:600;font-size:14.5px}
.chk input{width:22px;height:22px;margin:0;accent-color:var(--accent)}
.chk small{color:var(--mute);font-weight:600;font-size:13px}
.chk:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.chk:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding:10px 0 2px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.total b{color:var(--ink);font-size:18px;white-space:nowrap}
.f .hint{display:block;font-weight:500}
/* services shown in lists and on the washer's cards */
.svc{font-weight:700;font-size:13.5px;color:var(--ink);margin-top:1px}
.todo{font-size:18px;font-weight:800;line-height:1.3;color:var(--ink);padding:8px 10px;background:var(--raised);border-radius:10px}
.todo span{font-weight:600;color:var(--mute);font-size:15px}
/* washer: whole day in one list */
#wSched .sum{margin:-2px 0 6px}
#wSched .row.done{opacity:.62}
#wSched .row.cur{background:var(--accent-soft);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:10px}
#wSched .t{line-height:1.15}
.extras legend{font-size:13px;font-weight:600;color:var(--mute)}
/* ===================== v5: friendlier booking (Oct 27) ===================== */
/* day: Σήμερα / Αύριο / next day as one-tap buttons, other days from the list */
.daypick{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:560px){.daypick{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:stretch}}
.seg.days{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg.days button{min-height:46px;font-size:15px}
/* confirmation after booking */
.donecard{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-weight:500;line-height:1.45}
.donecard b{font-size:16px}
.donecard small{font-weight:500;opacity:.9}
.donecard .mini{flex:none;background:var(--surface);color:var(--ok);border-color:#b9e2cb;min-height:40px}
/* the booking bar: always in reach of the thumb on phones, above the tabs */
.bookbar{display:grid;gap:8px;margin-top:14px}
.bookbar .primary{margin-top:0}
.bb-sum{display:grid;gap:1px;font-size:13px;color:var(--mute);min-width:0}
.bb-sum b{color:var(--ink);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:979px){
  body.hasbar{padding-bottom:180px}
  .bookbar{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:5;margin:0;padding:10px 16px;background:var(--surface);border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;align-items:center;box-shadow:0 -4px 16px rgba(17,28,38,.06)}
  .bookbar .primary{min-height:48px;padding:0 16px;width:auto;max-width:56vw;font-size:15px}
}
/* washer list: a bit more air, finished rows quieter */
#wSched .row{padding:11px 0}
@media(max-width:979px){body.hasbar .toast{bottom:150px}}
/* a role with one screen has no tab bar: the booking bar then sits at the very bottom */
@media(max-width:979px){body:has(.tabs.n1) .bookbar,body:has(#tabs[hidden]) .bookbar{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  body.hasbar:has(.tabs.n1){padding-bottom:120px}}
/* header: on small phones show the date only (the hours are on the booking screen) */
@media(max-width:420px){.brand .hrs{display:none}}
.bb-sum span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===================== v6: next free time, new-booking alert (Oct 27) ===================== */
.nextfree{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:12px;border-radius:12px;background:var(--ok-soft);color:var(--ok)}
.nextfree span{display:grid;font-size:13px;font-weight:600}
.nextfree b{font-size:17px;color:var(--ink)}
.nextfree .qbtn{min-height:44px;white-space:nowrap}
.newbook{border:2px solid var(--accent);background:var(--accent-soft);border-radius:16px;padding:14px 16px;display:grid;gap:10px}
.newbook h2{margin:0;font-size:18px;color:var(--accent)}
.newbook .nb{background:var(--surface);border-radius:10px;padding:10px 12px;font-size:15px}
.newbook .qbtn{min-height:48px;font-size:15px}
.tabs button .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center}
/* ===================== v7: the mock-up's blue look (Stefanos, Oct 27) =====================
   Same colours as dashboard_example_v2 in dark mode: deep blue-grey ground, light-blue accent.
   Text on accent/green fills is dark (readable); big start/stop buttons keep white on a deeper fill. */
:root{
  --bg:#0f161d; --surface:#17212b; --raised:#1d2935; --ink:#e8eef4; --mute:#9fb0bf; --line:#2a3846;
  --accent:#5fb4c4; --accent-soft:#183843; --on-accent:#08151b;
  --ok:#4cc38a; --ok-soft:#163a2a; --warn:#e4ad3c; --warn-soft:#3c3015; --bad:#ef7b70; --bad-soft:#41201d;
  --slot-off:#121b24; --booked:#2c5866; --gap:#5a2a26;
  color-scheme:dark;
}
body{background:var(--bg);color:var(--ink)}
.top,.tabs{background:var(--surface);border-color:var(--line)}
.panel,.tile,.slot,.seg button,.hit,.opt,.chk,.item{background:var(--surface)}
select,input,textarea{background:var(--raised);border-color:var(--line);color:var(--ink)}
input::placeholder{color:#7f91a2}
/* fills in the accent or green carry dark text */
.seg button[aria-pressed="true"],.slot.sel,.primary,.wide-btn,.addnew,.addbtn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.slot.sel small{color:#0d3440}
.qbtn{background:var(--ok);color:#06210f}
.qbtn.dark{background:var(--raised);color:var(--ink);border:1px solid var(--line)}
.primary:disabled,.qbtn:disabled{background:#26323f;color:#7d8e9e}
.big.start{background:#23885a;color:#fff}
.big.stop{background:#c8463c;color:#fff}
.slot.taken,.slot.past{background:var(--slot-off);color:#5f7182;border-color:transparent}
.slot.taken small,.slot.past small{color:#5f7182}
.slot.part{background:var(--accent-soft)}
.tl .bk{background:var(--booked)}
.tl .gap{background:repeating-linear-gradient(45deg,var(--bad-soft) 0 5px,var(--gap) 5px 10px)}
.toast{background:#e8eef4;color:#0f161d}
.demobar{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid #5a4a1f}
.donecard .mini{background:var(--surface);color:var(--ok);border-color:#2f5a43}
.legend i{border-color:var(--line)}
.bookbar{background:var(--surface);border-color:var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.sheet{background:rgba(5,9,13,.7)}
.now{background:var(--surface)}
.todo{background:var(--raised)}
.mini{background:var(--raised);color:var(--ink);border-color:var(--line)}
.tabs button[aria-selected="true"]{color:var(--accent)}
/* a little more polish: calmer type colour for notes, clearer headings */
h1{color:#f2f6fa}
.note,.meta{color:var(--mute)}
.panel h2{color:#f2f6fa}
/* ===================== v8: simpler day line in the report (Oct 27) ===================== */
#dayLine .daysum{margin:0 0 10px;color:var(--ink);font-size:14.5px}
#dayLine .daysum b{font-weight:800}
.tl.one{margin-top:0;background:var(--raised)}
.tl .blk{position:absolute;border-radius:6px;overflow:hidden;display:flex;align-items:center;padding:0 6px}
.tl .blk.dn{background:var(--ok)} .tl .blk.ip{background:var(--accent)}
.tl .blk em{font-style:normal;font-size:11.5px;font-weight:700;color:#06210f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl .blk.ip em{color:var(--on-accent)}
.tl .lost{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--bad-soft) 0 6px,var(--gap) 6px 12px);border-left:2px solid var(--bad);border-right:2px solid var(--bad)}
.axis.one{margin-left:0}
.lostkey{background:repeating-linear-gradient(45deg,var(--bad-soft) 0 3px,var(--gap) 3px 6px)!important;border:1px solid var(--bad)!important}
.seg.wdays{grid-template-columns:repeat(7,minmax(0,1fr))}.seg.wdays button{padding:10px 2px}
.carx{color:var(--mute);font-weight:600;font-size:13px}
.mini.help{min-width:34px;font-weight:800;font-size:15px}.helpsteps{margin:10px 0 0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.45}
/* ===================== v9: LIGHT theme for sunlight (Stefanos, Oct 29) =====================
   The wash area is half outdoors: dark screens are hard to read in bright light. Light ground, very dark text
   (contrast 12:1+), strong filled buttons with white text. The mock-up's deep blue stays in the top bar and
   accents, so it is still the same app. Replaces the v7 dark look (kept above for reference). */
:root{
  --bg:#eef2f5; --surface:#ffffff; --raised:#f4f7f9; --ink:#0d1720; --mute:#46525e; --line:#cfd8e0;
  --accent:#0e5a6b; --accent-soft:#dcedf1; --on-accent:#ffffff;
  --ok:#1b7446; --ok-soft:#d9f1e3; --warn:#7a4f00; --warn-soft:#fbefcf; --bad:#b0261d; --bad-soft:#fbe0dc;
  --slot-off:#e6ebef; --booked:#a9cbd5; --gap:#f0c2bb;
  color-scheme:light;
}
body{background:var(--bg);color:var(--ink);font-size:16px}
/* the top bar keeps the mock-up's deep blue */
.top{background:#0f161d;border-color:#0f161d;color:#e8eef4}
.top .brand,.top .clock b{color:#fff}
.top .brand small,.top .brand .sub,.top .clock{color:#b9c7d3}
.top .rolepill{background:#18323c;color:#8fd3e0}
.top .mini{background:#1d2935;color:#e8eef4;border-color:#2f3f4e}
.demobar{background:#fbefcf;color:#5c3c00;border-bottom:1px solid #e8d4a0}
.tabs{background:#fff;border-top:1px solid var(--line)}
.tabs button{color:#46525e}
.tabs button[aria-selected="true"]{color:var(--accent)}
h1,.panel h2{color:var(--ink)}
.note,.meta{color:var(--mute)}
.panel,.tile,.slot,.seg button,.hit,.opt,.chk,.item,.now{background:var(--surface)}
.panel{border-color:var(--line)}
select,input,textarea{background:#fff;border:1.5px solid #b8c4cf;color:var(--ink)}
input::placeholder{color:#6b7783}
/* filled buttons: white text on strong colours */
.seg button[aria-pressed="true"],.slot.sel,.primary,.wide-btn,.addnew,.addbtn{background:var(--accent);border-color:var(--accent);color:#fff}
.slot.sel small{color:#d6eef3}
.qbtn{background:var(--ok);color:#fff}
.qbtn.dark{background:#fff;color:var(--ink);border:1.5px solid #b8c4cf}
.primary:disabled,.qbtn:disabled{background:#d5dde4;color:#56626e}
.big.start{background:#1b7446;color:#fff}
.big.stop{background:#b0261d;color:#fff}
.seg button{border:1.5px solid #b8c4cf}
.slot{border:1.5px solid #b8c4cf}
.slot.taken,.slot.past{background:var(--slot-off);color:#7a8691;border-color:transparent}
.slot.taken small,.slot.past small{color:#7a8691}
.chk{border:1.5px solid #b8c4cf}
.chk input{accent-color:var(--accent)}
.toast{background:#0d1720;color:#fff}
.donecard .mini{background:#fff;color:var(--ok);border-color:#a9d8bd}
.bookbar{background:#fff;border-color:var(--line);box-shadow:0 -6px 18px rgba(13,23,32,.10)}
.todo{background:var(--accent-soft)}
.mini{background:#fff;color:var(--ink);border-color:#b8c4cf}
.tl .blk em{color:#fff} .tl .blk.ip em{color:#fff}
.nextfree{background:var(--ok-soft);color:var(--ok)}
.newbook{background:var(--accent-soft);border-color:var(--accent)}
.newbook .nb{background:#fff}
.carx{color:var(--mute)}
.sheet{background:rgba(13,23,32,.55)}
#wSched .row.cur{background:var(--accent-soft)}
.login{margin-top:4vh}.loginpic{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;border-radius:18px}
.caricon{width:40px;height:18px;flex:none;vertical-align:-3px;margin-right:6px}.caricon.big{width:64px;height:28px;vertical-align:-4px;margin-right:10px}.hit{display:flex;align-items:center;gap:4px}.now .code{display:flex;align-items:center}