/* office.css - v4.5: Monthly + Transport book (office address only), two-step sign-in, office menu. Theme tokens only. */

.ops-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ops-title{font-size:var(--fs-xl);font-weight:var(--h-fw);letter-spacing:-.01em;margin-right:6px}
.ops-head .grow{flex:1}
.stepper{display:inline-flex;align-items:center;border:var(--bw) solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.stepper button{border:none;background:none;padding:6px 9px;cursor:pointer;color:var(--muted2);display:inline-flex}
.stepper button:hover{color:var(--text);background:var(--surface2)}
.stepper .stepper-val{min-width:150px;text-align:center;font-weight:500;padding:0 6px;font-variant-numeric:tabular-nums}
.stepper input[type=date],.stepper input[type=month]{border:none;background:none;font:inherit;color:inherit;padding:4px 6px;min-width:150px;width:160px}

/* KPI strip */
.kstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--surface);margin-bottom:16px}
.kcell{padding:12px 16px;border-left:1px solid var(--border);min-width:0}
.kcell:first-child{border-left:none}
.kcell .k-l{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcell .k-v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:24px;line-height:1.15;margin-top:4px;white-space:nowrap}
.kcell .k-s{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.kcell.warn .k-v{color:var(--orange)} .kcell.bad .k-v{color:var(--red)} .kcell.good .k-v{color:var(--green)}
.kcell[data-go]{cursor:pointer} .kcell[data-go]:hover{background:var(--surface2)}

/* overview panels */
.ov-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.panel{border:var(--bw) solid var(--border);border-radius:var(--r);background:var(--surface);padding:16px;min-width:0}
.panel-t{font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel-t .muted{font-weight:400}
.panel.wide{grid-column:1/-1}
.hbar{display:grid;grid-template-columns:130px minmax(0,1fr) 170px;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs-sm)}
.hbar .bar-track{height:10px;background:var(--surface2);border-radius:2px;overflow:hidden}
.hbar .bar-fill{height:100%;background:var(--accent)}
.hbar .hb-v{text-align:right;white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.hbar .hb-n{color:var(--muted);font-size:var(--fs-xs)}
.dchart{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:8px;border-bottom:1px solid var(--border)}
.dchart .dc{flex:1;background:var(--accent);opacity:.85;min-height:1px;border-radius:2px 2px 0 0;position:relative}
.dchart .dc:hover{opacity:1}
.dchart .dc.sun{opacity:.35}
.daxis{display:flex;gap:3px;font-size:10px;color:var(--muted);margin-top:4px}
.daxis span{flex:1;text-align:center}

/* tables */
.ops-tbl{flex:1;min-height:0}
.ops-tbl td.r,.ops-tbl th.r{text-align:right}
.ops-tbl td.t-num{white-space:nowrap}
.ops-tbl td.c,.ops-tbl th.c{text-align:center}
.ops-tbl tbody tr{cursor:pointer}
.ops-tbl tbody tr.dim td{color:var(--muted);text-decoration:line-through}
.chip{display:inline-block;padding:0 6px;border:1px solid var(--border);border-radius:3px;font-family:var(--font-num);font-size:11px;line-height:18px;
  color:var(--muted2);background:var(--surface2);margin:1px 3px 1px 0;white-space:nowrap}
.chip.k-NEW{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-bd)}
.chip.k-EXTEND{color:var(--teal);background:var(--teal-bg);border-color:var(--teal-bd)}
.chip.k-TRANSPORTATION{color:var(--yellow);background:var(--yellow-bg);border-color:var(--yellow-bd)}
.chip.k-SERVICES,.chip.k-PARTS,.chip.k-BACKCHARGE{color:var(--guard);background:var(--guard-bg);border-color:var(--guard-bd)}
.paid{color:var(--green)} .part{color:var(--orange)} .unpaid{color:var(--red)} .unknown{color:var(--muted)}
.pdot::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.age-1{color:var(--orange);font-weight:600} .age-2{color:var(--red);font-weight:700}
.tfoot-row td{font-weight:600;background:var(--surface2)}
.aging{display:flex;height:14px;border-radius:3px;overflow:hidden;margin:6px 0 4px}
.aging span{display:block;height:100%}
.ag-current{background:var(--green-bd)} .ag-1-30{background:var(--yellow-bd)} .ag-31-60{background:var(--orange-bd)}
.ag-61-90{background:var(--red-bd);opacity:.7} .ag-90{background:var(--red-bd)}
.aglegend{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--muted2)}
.aglegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ── Transport day board ── */
.tp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;flex:1;min-height:0;overflow:auto;align-content:start}
.tp-col-h{display:flex;align-items:baseline;gap:8px;padding:0 2px 8px;border-bottom:2px solid var(--border-strong);margin-bottom:8px;
  position:sticky;top:0;background:var(--bg);z-index:2}
.tp-col-h b{font-size:var(--fs-lg)} .tp-col-h .muted{font-size:var(--fs-xs)}
.job{border:var(--bw) solid var(--border);border-radius:var(--r);background:var(--surface);padding:10px 12px;margin-bottom:8px;
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;position:relative}
.job.done{border-left:4px solid var(--green-bd)}
.job.not_done{border-left:4px solid var(--red-bd)}
.job.postpone,.job.moved{border-left:4px solid var(--orange-bd)}
.job.cancel{opacity:.55}
.job.cancel .job-co{text-decoration:line-through}
.job.moved{opacity:.6}
.job>*:not(.trip){grid-column:2}
.trip{grid-row:1/span 3;grid-column:1;width:30px;height:30px;border-radius:50%;border:var(--bw) solid var(--border-strong);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-weight:600;font-size:var(--fs-sm);background:var(--surface);color:var(--text);padding:0;cursor:pointer}
.trip.empty{border-style:dashed;color:var(--muted);font-weight:400}
.job-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.job-co{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 160px}
.job-doc{font-family:var(--font-num);font-size:var(--fs-xs);color:var(--muted2);cursor:pointer;text-decoration:underline dotted}
.job-site{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.job-ctl select{padding:4px 6px;font-size:var(--fs-sm);max-width:130px;min-width:88px}
.job-ctl select.suggest{font-style:italic;color:var(--muted2);border-style:dashed}
.job-ctl select.drv.locked{color:var(--red);font-weight:700;border-color:var(--red-bd)}
.tg{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:var(--bw) solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  font-size:var(--fs-xs);color:var(--muted);cursor:pointer;font-family:inherit}
.tg .ic{width:13px;height:13px}
.tg.on{color:var(--green);border-color:var(--green-bd);background:var(--green-bg)}
.tg.lock.on{color:var(--red);border-color:var(--red-bd);background:var(--red-bg)}
.tg:disabled{cursor:default}
.stbtns{display:inline-flex;border:var(--bw) solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.stbtns button{border:none;background:var(--surface);padding:4px 8px;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;font-family:inherit}
.stbtns button+button{border-left:1px solid var(--border)}
.stbtns button.on.s-done{background:var(--green-bg);color:var(--green);font-weight:600}
.stbtns button.on.s-not_done{background:var(--red-bg);color:var(--red);font-weight:600}
.stbtns button.on.s-postpone{background:var(--orange-bg);color:var(--orange);font-weight:600}
.stbtns button.on.s-cancel{background:var(--surface3);color:var(--text);font-weight:600}
.stbtns button:disabled{cursor:default}
.job-note{font-size:var(--fs-xs);color:var(--muted2);margin-top:2px}
.job-note b{color:var(--orange);font-weight:600}
.flag{font-size:11px;padding:0 6px;border-radius:3px;background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-bd);white-space:nowrap}
.flag.ac{background:var(--surface2);color:var(--muted);border-color:var(--border)}
.cost{font-family:var(--font-num);font-size:var(--fs-xs);color:var(--muted2)}

/* by-driver board */
.dboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;overflow:auto;align-content:start}
.dcol{border:var(--bw) solid var(--border);border-radius:var(--r);background:var(--surface)}
.dcol-h{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:8px}
.dcol-h b{font-size:var(--fs-lg)}
.dcol-h .pay{margin-left:auto;font-family:var(--font-num);color:var(--green)}
.dcol-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);font-size:var(--fs-sm);align-items:center}
.dcol-row:last-child{border-bottom:none}
.dcol-row .n{font-family:var(--font-num);color:var(--muted)}
.dcol-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcol-row .ok{color:var(--green)}

/* commission grid */
.cgrid td,.cgrid th{padding:6px 4px;text-align:center;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-xs)}
.cgrid td:first-child,.cgrid th:first-child{text-align:left;padding-left:12px;font-family:var(--font-sans);font-size:var(--fs-sm);position:sticky;left:0;background:var(--surface);z-index:1}
.cgrid th.sun{color:var(--red)}
.cgrid td.t1{background:var(--green-bg)} .cgrid td.t2{background:var(--green-bd);color:var(--text)} .cgrid td.t3{background:var(--green);color:var(--accent-fg)}
.cgrid td.tot{font-weight:600;background:var(--surface2)}
.cgrid tbody tr{cursor:default}

/* settings */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.set-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.set-row input,.set-row select{padding:5px 8px;font-size:var(--fs-sm);min-width:0}
.set-row input.w-s{width:70px} .set-row input.grow{flex:1}

@media (max-width:900px){
  .kstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kcell:nth-child(4){border-left:none}
  .kcell:nth-child(n+4){border-top:1px solid var(--border)}
  .ov-grid,.tp-cols{grid-template-columns:minmax(0,1fr)}
  .hbar{grid-template-columns:96px minmax(0,1fr) 92px}
  .stepper .stepper-val{min-width:110px}
  #tp-dayctl:not([hidden]){display:flex;width:100%;gap:8px;align-items:center}
  #tp-dayctl .stepper{flex:1;justify-content:space-between}
  #tp-dayctl input[type=date]{flex:1;min-width:0;width:auto}
}
@media print{
  .topbar,.htabs,.ops-head button,.job-ctl select,.stbtns,.tg{display:none!important}
  .tp-cols{overflow:visible}
}

/* two-step sign-in */
.login-steps .ls3{display:none}
#login.on-mfa .login-steps .ls3{display:block;border-top-color:var(--pmp-blue,var(--accent));color:var(--ink,var(--text))}
#login.on-mfa .login-steps .ls2{border-top-color:#2E8B62;color:var(--muted)}
#login-form3 ol{margin:6px 0 0;padding-left:20px}
#login-form3 ol li{margin:2px 0}
.mfa-setup{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mfa-setup img{width:176px;height:176px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px}
.mfa-setup code{font-family:var(--font-num);font-size:13px;letter-spacing:.06em;word-break:break-all;color:var(--text)}
.mfa-code{font-family:var(--font-num);font-size:26px;letter-spacing:.35em;text-align:center;padding:10px 12px}

/* account menu: office */
.menu-note{font-size:var(--fs-xs);color:var(--muted);padding:2px 8px 6px;line-height:1.4}
.menu-check{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.menu-check input{margin-top:3px}
a.menu-item{display:block;text-decoration:none;color:inherit}

/* classic pages */
.classic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.classic-card{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:14px 16px;border:var(--bw) solid var(--border);border-radius:var(--r);
  background:var(--surface);text-decoration:none;color:var(--text)}
.classic-card .ic{grid-row:1/span 2;width:22px;height:22px;color:var(--accent)}
.classic-card span{font-size:var(--fs-sm);color:var(--muted)}
.classic-card:hover{border-color:var(--accent)}