/* Layout: wall-mounted tablet kiosk in Dorodvand's own colours. Charcoal ground like the logo, cream type, root-gold on everything you can tap. Deliberately one dark theme. */
:root{
  --bg:#161712; --surface:#1f211a; --surface-2:#292b23; --line:#3a3d33; --ink:#efe7d3; --muted:#a59f8b;
  --accent:#c9a465; --accent-2:#e2c48e; --accent-ink:#17180f;
  --go:#8bd3a5; --go-bg:#1c3325; --stop:#ee8b73; --stop-bg:#3d2119; --warn:#ebc374; --warn-bg:#3a3119;
  --info:#8db8e3; --info-bg:#1b2a38;
  --brand-bg:#161712; --brand-fg:#efe7d3; --brand-muted:#a59f8b;
  --display:'Cormorant Garamond','Vazirmatn','Noto Sans JP',Georgia,serif;
  --body:'Manrope','Vazirmatn','Noto Sans JP',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.brandbar{background:var(--brand-bg);color:var(--brand-fg)}
.top-inner{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:12px 8px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.brandrow{display:flex;gap:16px;align-items:center;min-width:0}
.mark{height:80px;width:auto;flex:none}
.brandtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.word{height:22px;width:auto;max-width:100%;align-self:flex-start;opacity:.92}
.site-name{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.2vw,38px);line-height:1;letter-spacing:.01em;text-wrap:balance;color:var(--brand-fg)}
.site-addr{font-size:13px;color:var(--brand-muted);letter-spacing:.02em}
.clock{display:flex;gap:16px;align-items:center}
.clock .t{font-family:var(--mono);font-size:clamp(28px,4vw,38px);font-weight:500;line-height:1;color:var(--brand-fg);text-align:right}
.clock .d{font-size:13px;color:var(--brand-muted);text-align:right}
.count-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:6px 12px;border-radius:12px;border:1px solid var(--accent);color:var(--accent-2);background:transparent;white-space:nowrap}
.count-pill b{font-family:var(--display);font-size:30px;line-height:.95;color:var(--accent-2)}
.count-pill span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hazard{height:2px;background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent)}
nav.tabs{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:10px 12px;display:flex;gap:6px;overflow-x:auto}
nav.tabs button{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);font-weight:700;font-size:16px;color:var(--muted)}
nav.tabs button svg{width:22px;height:22px;flex:none}
nav.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

main{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:18px 64px}
.panel{display:flex;flex-direction:column;gap:18px}
h2{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.05;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1;margin:0}
.label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);font-weight:700}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.danger{color:var(--stop);border-color:var(--stop);background:transparent}
.btn.small{min-height:40px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg button{min-height:46px;padding:0 16px;border:0;background:transparent;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}

input[type=text],input[type=search],input[type=number],input[type=date],input[type=time],input[type=month],input[type=tel],select,textarea{min-height:50px;width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{min-height:96px;resize:vertical}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.grid-form .wide{grid-column:1/-1}
.box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}

/* Language row */
.langbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.langbar button{min-height:46px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;font-weight:600;font-size:16px;color:var(--muted)}
.langbar button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-2);background:var(--surface)}
.tapname{font-size:clamp(36px,5.5vw,52px)}

/* Worker tiles */
.workers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{min-height:132px;text-align:start;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:10px}
.tile:active{transform:scale(.985)}
.tile-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mono{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:21px;color:var(--accent-2);background:var(--surface-2);flex:none}
.tile .n{font-weight:800;font-size:20px;line-height:1.15;overflow-wrap:anywhere}
.tile .c{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.tile.on{border-color:var(--go);background:linear-gradient(180deg,var(--go-bg),var(--surface) 80%)}
.tile.on .mono{border-color:var(--go);color:var(--go)}
.tile.away{border-color:var(--warn)}
.pill{font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.on .pill{background:var(--go);color:var(--accent-ink)}
.away .pill{background:var(--warn-bg);color:var(--warn)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.chip.go{background:var(--go-bg);color:var(--go)} .chip.stop{background:var(--stop-bg);color:var(--stop)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.acc{background:var(--accent);color:var(--accent-ink)}

.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.item{display:flex;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);min-width:0}
.item:first-child{border-top:0}
.item .main{flex:1;min-width:0}
.item .title{font-weight:700;overflow-wrap:anywhere}
.item .sub{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.item.flag{box-shadow:inset 4px 0 0 var(--stop)}
.item.warnflag{box-shadow:inset 4px 0 0 var(--warn)}
.empty{padding:26px 16px;color:var(--muted);text-align:center}

.roll{width:58px;height:58px;border-radius:var(--r);border:2px solid var(--line);background:var(--surface-2);font-size:26px;font-weight:800;flex:none;color:var(--accent-ink)}
.roll[aria-pressed="true"]{background:var(--go);border-color:var(--go)}
.rollbar{background:var(--stop-bg);color:var(--stop);border:1px solid var(--stop);border-radius:var(--r);padding:14px 18px;font-family:var(--display);font-size:28px;font-weight:700}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-top:1px solid var(--line);white-space:nowrap}
th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;border-top:0;background:var(--surface-2)}
td.r,th.r{text-align:right}
tr.wk td{background:var(--surface-2);font-weight:700}
tr.click{cursor:pointer} tr.click:hover td{background:var(--bg)}
details summary::-webkit-details-marker{display:none}

/* Sheet */
#sheet{position:fixed;inset:0;z-index:50;background:rgba(8,9,6,.72);display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 16px 24px;overflow-y:auto}
.sheet-card{width:100%;max-width:560px;background:var(--surface);border-radius:22px;border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:16px}
.pin-dots{display:flex;gap:16px;justify-content:center;padding:8px 0}
.pin-dots span{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent)}
.pin-dots span.f{background:var(--accent)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:ltr}
.pad button{min-height:72px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);font-family:var(--mono);font-size:30px;font-weight:500}
.pad button:active{background:var(--accent);color:var(--accent-ink)}
.done{border-radius:18px;padding:32px 22px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.done.in{background:var(--go-bg);color:var(--go);border:1px solid var(--go)}
.done.out{background:var(--surface-2);color:var(--accent-2);border:1px solid var(--accent)}
.done .big{font-family:var(--body);font-weight:800;font-size:60px;line-height:1;letter-spacing:.02em}
.done .who{font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink)}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.check input{width:28px;height:28px;flex:none;margin:0;accent-color:var(--accent)}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:var(--r);font-weight:700;max-width:calc(100% - 32px)}
#toast.bad{background:var(--stop);color:var(--accent-ink)}
.banner{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);border-radius:var(--r);padding:12px 14px;font-weight:600}
.subtabs{display:flex;gap:8px;flex-wrap:wrap}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}
@media (max-width:560px){.mark{height:60px}.word{height:17px}nav.tabs button span{display:none}nav.tabs button{padding:0 12px}}
@media (prefers-reduced-motion:no-preference){.tile,.btn,nav.tabs button,.langbar button{transition:background-color .15s,border-color .15s,transform .1s}}
.bigact{min-height:130px;border-radius:20px;border:0;font-family:var(--body);font-weight:800;font-size:48px;letter-spacing:.03em;width:100%}
.bigact.in{background:var(--go);color:var(--accent-ink)}
.bigact.out{background:var(--accent);color:var(--accent-ink)}
.stillin{border:2px solid var(--warn);background:var(--warn-bg);color:var(--warn);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.badge{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--stop);color:var(--accent-ink);font-size:13px;display:inline-grid;place-items:center}
.me{display:flex;flex-direction:column;gap:12px;border:1px solid var(--accent);border-radius:18px;padding:18px;background:var(--surface)}
.me .n{font-family:var(--display);font-weight:700;font-size:34px;line-height:1}
.busy{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(8,9,6,.6);color:var(--ink);font-weight:700;font-size:20px}
.foot{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 40px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.login{max-width:420px;margin:40px auto}

/* ---------- v2 layout ---------- */
.langbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--brand-fg);font-weight:700;font-size:14px}
.langbtn svg{width:18px;height:18px;color:var(--accent-2)}
.langgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.langgrid button{min-height:60px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);font-weight:700;font-size:19px}
.langgrid button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-2)}

.today{display:grid;grid-template-columns:auto 1fr;gap:10px}
.today button{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;text-align:start}
.today button b{font-family:var(--display);font-size:28px;color:var(--go);line-height:1}
.today button svg{width:22px;height:22px;color:var(--accent-2);flex:none}

#matPeek{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.peek{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.pk{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);min-width:0}
.pk:first-child{border-top:0}
.pkn{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:900px){.board{grid-template-columns:1fr}}
.bcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.bhead{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:4px 2px}
.bhead b{margin-inline-start:auto;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--surface-2);display:grid;place-items:center;font-size:14px}
.bhead .dot{width:10px;height:10px;border-radius:50%}
.dot.warn{background:var(--warn)} .dot.acc{background:var(--accent)} .dot.go{background:var(--go)}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:inset 4px 0 0 var(--line)}
.mcard.s-requested{box-shadow:inset 4px 0 0 var(--warn)}
.mcard.s-ordered{box-shadow:inset 4px 0 0 var(--accent)}
.mcard.s-delivered{box-shadow:inset 4px 0 0 var(--go);opacity:.8}
.mcard.urgent{border-color:var(--stop)}
.mtop{display:flex;gap:12px;align-items:flex-start}
.mq{font-size:24px;font-weight:600;line-height:1;display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 8px;border-radius:10px;background:var(--surface-2)}
.mq span{font-family:var(--body);font-size:11px;color:var(--muted);margin-top:3px}
.mname{font-weight:800;font-size:17px;line-height:1.25;overflow-wrap:anywhere;padding-top:2px}
.msub{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.msub b{color:var(--accent-2)}
.mact{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.empty.small{padding:16px;border:1px dashed var(--line);border-radius:14px;font-size:14px}

/* phones: tabs move to a bottom bar within thumb reach */
@media (max-width:760px){
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;max-width:none;background:var(--bg);border-top:1px solid var(--line);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:4px;overflow:visible}
  nav.tabs button{flex:1 1 0;flex-direction:column;gap:3px;min-height:58px;padding:4px 2px;font-size:11px;border:0;background:transparent;border-radius:12px}
  nav.tabs button span{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  nav.tabs button svg{width:24px;height:24px}
  nav.tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--accent-2)}
  main{padding-bottom:110px}
  .foot{padding-bottom:110px}
  .top-inner{padding-block:10px 8px}
  .clock .d{display:none}
  .langbtn span{display:none}
  .langbtn{padding:0 11px}
  .today{grid-template-columns:1fr}
}

.dot.info{background:var(--info)} .chip.info{background:var(--info-bg);color:var(--info)}
.mcard.s-ordered{box-shadow:inset 4px 0 0 var(--info)}
.msub b{color:var(--info)}