:root{--pri:#1E4FD8;--pri-ink:#fff;--pri-soft:#E8EEFD;--acc:#F59E0B;--bg:#F4F6FA;--surf:#fff;--surf2:#F8FAFC;--ink:#0F172A;--mute:#58687D;--line:#E2E8F0;
--ok:#15803D;--okbg:#DCFCE7;--warn:#B45309;--warnbg:#FEF3C7;--bad:#B91C1C;--badbg:#FEE2E2;--infobg:#E2E8F0;--r:12px;--sh:0 1px 2px rgba(15,23,42,.05),0 6px 18px rgba(15,23,42,.06)}
html[data-theme=dark]{--pri:#7EA5FF;--pri-ink:#0A0E15;--pri-soft:#1A2846;--bg:#0A0E15;--surf:#121926;--surf2:#1A2232;--ink:#F2F5FA;--mute:#9EA9BB;--line:#232E44;
--ok:#72D69E;--okbg:#122C1D;--warn:#F2BA5C;--warnbg:#30260F;--bad:#FF8C82;--badbg:#331B1D;--infobg:#232E44;--sh:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);color-scheme:dark}
/* THEME-1 (owner 12 Nov, palette docs/coord/THEME-1.md): Dim = a softer dark; every dark-specific rule below also applies to dim */
html[data-theme=dim]{--pri:#93B4FF;--pri-ink:#0F1522;--pri-soft:#2F3E5E;--bg:#1E2532;--surf:#283142;--surf2:#313B4F;--ink:#E9EDF4;--mute:#B0BACB;--line:#3A4559;
--ok:#86DDAE;--okbg:#24412F;--warn:#F5C773;--warnbg:#463B22;--bad:#FFA197;--badbg:#4A2E30;--infobg:#3A4559;--sh:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.sb-gutter{scrollbar-gutter:stable}   /* SMOOTH-1 (class set in base.html when scrollbars take space): a scrollbar that comes and goes no longer shakes the page sideways */
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,sans-serif}
.mono,.mono input{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:-.01em}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:.2rem 0 .4rem;letter-spacing:-.02em}h2{font-size:1rem;margin:0 0 .9rem;letter-spacing:-.01em}
.muted{color:var(--mute)}.small{font-size:.82rem}.grow{flex:1}
.top{display:flex;align-items:center;gap:1rem;padding:.7rem 1.25rem;background:var(--surf);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:1.1rem;color:var(--ink)}.brand:hover{text-decoration:none}.bolt{color:var(--acc)}
.top nav{display:flex;gap:.25rem}.top nav a{padding:.4rem .8rem;border-radius:8px;color:var(--mute);font-weight:600}
.top nav a.on,.top nav a:hover{background:var(--pri-soft);color:var(--pri);text-decoration:none}
.who{color:var(--mute);font-size:.85rem}.top form{margin:0}
main{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 4rem}main.center{display:grid;min-height:100vh;place-items:center}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:1.25rem;margin-bottom:1rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);background:var(--surf);color:var(--ink);padding:.55rem 1rem;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.btn:hover{background:var(--surf2);text-decoration:none}.btn.primary{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}.btn.sm{padding:.3rem .65rem;min-height:32px;font-size:.85rem}.btn.big{padding:.75rem 1.4rem;font-size:1rem}.btn.block{width:100%}
.icon-btn{background:none;border:1px solid var(--line);border-radius:8px;width:36px;height:36px;color:var(--ink);cursor:pointer;font-size:1.1rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;width:100%;min-height:42px}
input:focus,select:focus,textarea:focus,.drop:focus{outline:2px solid var(--pri);outline-offset:1px;border-color:var(--pri)}
input[readonly]{background:var(--surf2);color:var(--mute)}input[type=checkbox],input[type=radio]{width:auto;min-height:0}
label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.85rem;color:var(--mute)}label>input,label>select,label>textarea{color:var(--ink);font-weight:400}
label.inline,.inline{flex-direction:row;align-items:center;gap:.4rem;display:inline-flex;font-weight:500}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.1rem;align-items:start}.span2{grid-column:span 2}
.fields+.fields{margin-top:1rem}
.f{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.f>.lt{font-weight:600;font-size:.85rem;line-height:1.3;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f>input,.f>select{height:44px}
.hint{font-size:.78rem;color:var(--mute);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;min-height:1.1em}
label.plain{display:inline;font-weight:500;font-size:.78rem;color:var(--mute)}
[hidden]{display:none!important}
@media(max-width:900px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fields{grid-template-columns:1fr}}
@media(max-width:560px){.span2{grid-column:span 1}main{padding:1rem .9rem 4rem}.who{display:none}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin-bottom:1rem}
.stat{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem;box-shadow:var(--sh);color:var(--ink);display:flex;flex-direction:column}
.stat:hover{text-decoration:none}.stat span{color:var(--mute);font-size:.8rem;font-weight:600}.stat b{font-size:1.8rem;letter-spacing:-.02em}
.stat.warn b{color:var(--warn)}.stat.bad b{color:var(--bad)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;padding:.9rem;align-items:flex-end}.filters>*{flex:1 1 150px;width:auto}.filters .f-q{flex:2 1 220px}.filters .btn{flex:0 0 auto}
.fl{min-width:0}.fl>span{font-size:.78rem}.clear-link{flex:0 0 auto;align-self:flex-end;display:inline-flex;align-items:center;min-height:40px;font-weight:600;padding:0 .4rem}
.list{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.row{display:grid;grid-template-columns:150px 1fr 150px 130px 110px;gap:1rem;align-items:center;color:var(--ink);padding:.9rem 1.1rem;margin:0;transition:border-color .15s,transform .15s}
.row:hover{text-decoration:none;border-color:var(--pri);transform:translateY(-1px)}
.r-id{font-weight:600;color:var(--pri)}.r-id small{display:block;color:var(--mute);font-family:"Plus Jakarta Sans",sans-serif;font-weight:500}
.r-main b{display:block}.r-th{display:flex;gap:6px;justify-content:flex-end}.r-th img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
@media(max-width:860px){.row{grid-template-columns:1fr 1fr;gap:.5rem .8rem}.r-main{grid-column:1/-1;order:3}.r-th{justify-content:flex-start;order:4;grid-column:1/-1}}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.chip{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--infobg);color:var(--mute);white-space:nowrap}
.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.amber{background:var(--warnbg);color:var(--warn)}.chip.bad{background:var(--badbg);color:var(--bad)}.chip.ok{background:var(--okbg);color:var(--ok)}
.chip.info{background:var(--infobg);color:var(--mute)}
.chip.frozen{background:#E0F2FE;color:#075985}html:is([data-theme=dark],[data-theme=dim]) .chip.frozen{background:rgba(56,189,248,.14);color:#7DD3FC}
.rep-frozen{align-self:flex-end;min-height:44px}
.depset{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;padding:.2rem 0}
.alert{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;border:1px solid var(--line)}.alert.bad{background:var(--badbg);color:var(--bad);border-color:transparent}.alert ul{margin:.3rem 0 0 1.1rem;padding:0}
.empty{color:var(--mute);padding:1rem;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin:0}.facts div{min-width:0}.facts .wide{grid-column:1/-1}
dt{color:var(--mute);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}dd{margin:.1rem 0 0;overflow-wrap:anywhere}
.map{width:100%;height:300px;border:0;border-radius:10px;margin-bottom:.8rem;background:var(--surf2)}
.photo{width:100%;max-height:380px;object-fit:contain;border-radius:10px;background:var(--surf2);margin-bottom:.8rem;display:block}
.history{list-style:none;margin:0;padding:0}.history li{padding:.5rem 0;border-bottom:1px solid var(--line)}.history li:last-child{border:0}.history .small{display:block}
.login{width:min(380px,92vw);display:flex;flex-direction:column;gap:1rem;padding:2rem}.login h1{margin:0}.login p{margin:-.6rem 0 0}.logo{font-size:2rem;color:var(--acc)}
.seg{display:inline-flex;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:1rem}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:.45rem 1.2rem;border-radius:8px;cursor:pointer;color:var(--mute);font-size:.9rem}.seg input:checked+label{background:var(--pri);color:var(--pri-ink)}
.seg input:focus-visible+label{outline:2px solid var(--pri)}
.err{color:var(--bad);font-weight:500}
.drops{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:700px){.drops{grid-template-columns:1fr}}
.drop{border:2px dashed var(--line);border-radius:var(--r);min-height:150px;display:grid;place-items:center;cursor:pointer;background:var(--surf2);padding:1rem;text-align:center;transition:border-color .15s,background .15s}
.drop:hover,.drop.over,.drop.active{border-color:var(--pri);background:var(--pri-soft)}.drop-empty{display:flex;flex-direction:column;gap:.2rem;color:var(--mute)}.drop-empty b{color:var(--ink)}
.drop-prev{display:none;align-items:center;gap:1rem;text-align:left}.drop.has .drop-empty{display:none}.drop.has .drop-prev{display:flex}.drop-prev img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.drop.busy{opacity:.6;pointer-events:none}
.actions{display:flex;gap:.8rem;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 40%);padding:1rem 0 .3rem}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem}.tabs a{padding:.5rem .9rem;border-radius:10px;color:var(--mute);font-weight:600;border:1px solid transparent}
.tabs a.on{background:var(--surf);border-color:var(--line);color:var(--pri);box-shadow:var(--sh)}.tabs a:hover{text-decoration:none;color:var(--ink)}
.tbl{display:flex;flex-direction:column;gap:.5rem}
/* table rows: header and data rows share one grid template (--cols per table), so columns line up */
.trow{display:grid;grid-template-columns:var(--cols,repeat(auto-fit,minmax(150px,1fr)));gap:.5rem .75rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--line)}
.rowf{display:contents}.trow>*,.rowf>*{min-width:0}.trow .checks{display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.trow>div:has(>input[type=checkbox]),.rowf>div:has(>input[type=checkbox]),.trow>div:has(>.btn),.rowf>div:has(>.btn),.trow>div:has(>.chip),.rowf>div:has(>.chip),.trow>div:has(>form.inl){display:flex;justify-content:center;align-items:center;text-align:center}
.trow.th{font-size:.75rem;font-weight:700;color:var(--mute);text-transform:uppercase;border-bottom:2px solid var(--line)}.trow.th>span{text-align:center}.trow.new{border:0;padding-top:1rem}
@media(max-width:700px){.trow.th{display:none}}
.inl{display:inline;margin:0}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.75rem 1.2rem;border-radius:12px;box-shadow:var(--sh);z-index:50;max-width:92vw;transition:opacity .4s}
.toast.warn{background:var(--warn);color:#fff}.toast.ok{background:var(--ok);color:#fff}html:is([data-theme=dark],[data-theme=dim]) .toast.ok{color:#04210F}html:is([data-theme=dark],[data-theme=dim]) .toast.warn{color:#1b1200}

.stat.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri) inset,var(--sh)}.stat:hover{border-color:var(--pri)}
.stat.flagged b{color:var(--warn)}.stat.unsynced b{color:var(--bad)}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.fchip{display:inline-flex;gap:.35rem;align-items:center;background:var(--pri-soft);color:var(--pri);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;font-weight:600}
.fchip:hover{text-decoration:none;filter:brightness(.95)}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap}
.toast a{color:inherit;text-decoration:underline;font-weight:700}
.btn.danger{border-color:var(--bad);color:var(--bad);background:transparent}.btn.danger:hover{background:var(--badbg)}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:100;padding:1rem}
.modal-card{background:var(--surf);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:1.5rem;width:min(420px,100%)}
.modal-card h2{font-size:1.15rem;margin:0 0 .4rem}.modal-card p{margin:0 0 1.2rem;color:var(--mute)}
.modal-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:560px){.sheetlink .lbl{display:none}}

.pd{font-size:.82rem;font-weight:600;margin-top:.15rem}.pd.ok{color:var(--ok)}.pd.warn{color:var(--warn)}.pd.mute{color:var(--mute)}
.datenote{display:block;line-height:1.35}.datenote.ok{color:var(--ok)}.datenote.warn{color:var(--warn);font-weight:600}
.datenote .btn{margin-top:.3rem}

.route{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}.route p{margin:.2rem 0 .5rem}
.inline-form{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}

.banner{background:var(--pri-soft);color:var(--pri);border:1px solid var(--pri);border-radius:var(--r);padding:.6rem 1rem;margin-bottom:1rem;font-weight:600}
.alert.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}

.qr{background:#fff;padding:.6rem;border-radius:10px;width:min(220px,100%);margin:0 auto;line-height:0}.qr svg{width:100%;height:auto}
.keybox{display:block;margin-top:.3rem;padding:.5rem .7rem;background:var(--surf2);border:1px solid var(--line);border-radius:8px;word-break:break-all;letter-spacing:.06em}
.stack{display:flex;flex-direction:column;gap:.6rem}.login.enroll,.login.codes{width:min(440px,94vw)}
.codelist{list-style:none;margin:.2rem 0;padding:.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;background:var(--surf2);border:1px solid var(--line);border-radius:10px;letter-spacing:.04em}

/* header menu */
.top{min-height:56px}.brand{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.add-btn,.menu-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--ink);font:inherit;font-size:1.25rem;cursor:pointer;padding:0 .5rem}
.add-btn{background:var(--pri);border-color:var(--pri);color:var(--pri-ink);font-weight:700}.add-btn:hover{text-decoration:none;filter:brightness(1.08)}
.menu-btn:hover{background:var(--surf2)}.m-user{display:none;align-items:center;gap:.35rem;font-size:.8rem}
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pri);color:var(--pri-ink);font-size:.78rem;font-weight:700;flex:0 0 auto}
.add-btn:focus-visible,.menu-btn:focus-visible,.menu a:focus-visible,.menu button:focus-visible,.top a:focus-visible,.clear-link:focus-visible,.fchip:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.top nav.main-nav{display:none}
.menu-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60}
.menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--surf);border-left:1px solid var(--line);box-shadow:var(--sh);z-index:70;padding:.8rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;animation:menu-in .18s ease-out}
@keyframes menu-in{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.menu{animation:none}}
.menu hr{border:0;border-top:1px solid var(--line);margin:.4rem 0;width:100%}
.menu form{margin:0}
.menu-user{display:flex;align-items:center;gap:.6rem;padding:.3rem .4rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.menu-email{font-size:.82rem;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;padding:.5rem .7rem;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;width:100%;cursor:pointer}
a.mi:hover,button.mi:hover{background:var(--surf2);text-decoration:none}
.mi.on{background:var(--pri-soft);color:var(--pri)}
.mi-out{color:var(--bad)}.mi-out:hover{background:var(--badbg)!important}
.mi-theme{cursor:default}
.themeseg{display:inline-flex;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:3px}
.themeseg button{min-height:38px;min-width:52px;padding:0 .55rem;border:0;border-radius:8px;background:none;color:var(--mute);font:inherit;font-weight:600;cursor:pointer}
.themeseg button[aria-pressed=true]{background:var(--pri);color:var(--pri-ink)}
.mi-theme .themeseg{flex-wrap:nowrap;max-width:100%;flex:none}.themeseg button.ti{min-width:40px;width:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}.themeseg button.ti svg{display:block}   /* FIXES-13 (a): four icon buttons, 4 x 40 px, fit every menu width */
@media(min-width:768px){
  .top{padding:.5rem 1.25rem}.top nav.main-nav{display:flex}.add-btn,.m-burger,.mi-nav{display:none}.m-user{display:inline-flex}
  .menu-btn{padding:0 .6rem}.menu-overlay{background:transparent}
  .menu{top:60px;right:1.25rem;bottom:auto;left:auto;width:290px;max-height:calc(100vh - 72px);border:1px solid var(--line);border-radius:var(--r);animation:none}
  .page-head .btn.big{display:inline-flex}
}
@media(max-width:767px){
  .top{height:56px;padding:0 .8rem;gap:.5rem}
  .page-head .btn.big{display:none}
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .filters>*{flex:none}
  .f-q{grid-column:1}.f-go{grid-column:2}
  .clear-link{grid-column:1/-1;justify-self:start;padding:.3rem .2rem;min-height:44px;display:inline-flex;align-items:center}
  .filters select,.filters input,.filters .btn{min-height:44px}
  .filters input[type=date]{min-width:0}
  .stat,.btn{min-height:44px}
}

/* overflow hardening: grid/flex children may shrink, text wraps, inputs fill their cell */
.filters>*,.fields>*,.f,.fl,.trow>*,.rowf>*,.facts>*,.grid2>*,.drops>*,.stats>*,.row>*,.page-head>*,.inline-form>*{min-width:0}
.filters input,.filters select,.fields input,.fields select,.fields textarea,.f input,.f select,input[type=date],input[type=time],input[type=datetime-local]{width:100%;max-width:100%;min-width:0}
input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none}
.trow>*,.rowf>*,dd,.menu-email,.r-main,.chips,.facts div,.alert,.card h2,.keybox{overflow-wrap:anywhere}
.chips{max-width:100%}.chip{max-width:100%;white-space:normal}
.tabs{max-width:100%}.tabs a{min-height:44px;display:inline-flex;align-items:center}
.card,.alert,.banner,.tbl{max-width:100%;min-width:0}
main{min-width:0}
.mono{overflow-wrap:anywhere}
@media(max-width:767px){
  .tbl{min-width:0}
  .trow{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;padding:.7rem 0}
  .trow>*,.rowf>*{flex:0 0 auto;width:100%}
  .trow>.btn,.rowf>.btn,.trow>div:has(>.btn),.rowf>div:has(>.btn){width:auto;align-self:flex-start}
  .codelist{grid-template-columns:1fr}
}

/* photo rotation + gate pass panel */
.dropwrap{min-width:0;display:flex;flex-direction:column;gap:.4rem}
.rot-frame{position:relative;width:100%;height:380px;overflow:hidden;border-radius:10px;background:var(--surf2);margin-bottom:.8rem}
.rot-frame img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;margin:0;border:0;border-radius:0;transition:transform .15s}
@media(prefers-reduced-motion:reduce){.rot-frame img{transition:none}}
.rot-bar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.rot-bar .btn{min-width:44px;min-height:44px}
.rot-frame+.rot-bar{margin-top:-.2rem}
.tag{display:inline-block;font-size:.72rem;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:0 .5rem}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--pri);cursor:pointer;text-decoration:underline;min-height:0}
.linkbtn:disabled{opacity:.5;cursor:default}
.linkbtn:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
details.gp{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.5rem;color:var(--mute);font-size:.82rem}
details.gp>summary{cursor:pointer;font-size:.78rem;font-weight:600;color:var(--mute);list-style-position:inside;min-height:32px;display:flex;align-items:center}
details.gp>summary:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.gp-list{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1rem;margin:.4rem 0}
.gp-list>div{min-width:0}.gp-list dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);font-weight:600}
.gp-list dd{margin:0;color:var(--ink);font-size:.82rem;overflow-wrap:anywhere}
.gp-msg{margin:.4rem 0;color:var(--mute)}.gp-foot{margin:.4rem 0;font-size:.74rem;color:var(--mute)}
.gp-foot .linkbtn{font-size:.78rem;margin-left:.4rem}
.chip.soft{background:transparent;border:1px solid var(--line);color:var(--mute);font-weight:500;font-size:.68rem}
@media(max-width:560px){.gp-list{grid-template-columns:1fr}.rot-frame{height:300px}}
.gp-dup{margin:.4rem 0;padding:.4rem .6rem;border-radius:8px;background:var(--warnbg);color:var(--warn);font-size:.8rem;font-weight:600}.gp-dup a{color:inherit;text-decoration:underline}

.r-kva{white-space:nowrap}@media(max-width:359px){.r-kva{white-space:normal}}       /* 320 px phones: "200 KVA → 200 KVA" wraps instead of widening the page */
/* upload preview (large) + full-screen viewer */
.drops{grid-template-columns:1fr}
.drop.has{min-height:0;padding:.6rem 1rem;place-items:center start;cursor:default}
.drop.has .drop-prev{gap:.6rem}
.pv{min-width:0}
.rot-frame{cursor:zoom-in}
.rot-frame.lg{height:360px;margin-bottom:.4rem}
.rot-frame:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
@media(max-width:767px){.rot-frame.lg{height:300px}}
.viewer{position:fixed;inset:0;z-index:200;background:#05080f;display:flex;flex-direction:column}
.viewer-bar{display:flex;gap:.5rem;align-items:center;padding:.6rem .8rem;flex:0 0 auto;background:#0b1220;border-bottom:1px solid #25324d;flex-wrap:wrap}
.viewer-bar .vbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .8rem;border:1px solid #3a4a6b;border-radius:10px;background:#16213a;color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.viewer-bar .vbtn:hover{background:#1f2d50;text-decoration:none}.viewer-bar .vbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.viewer-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:default;user-select:none}
.viewer-stage.zoomed{cursor:grab}.viewer-stage.zoomed:active{cursor:grabbing}
.viewer-stage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center center;will-change:transform;-webkit-user-drag:none}
.viewer-stage img.anim{transition:transform .2s ease}
@media(prefers-reduced-motion:reduce){.viewer-stage img.anim{transition:none}}

/* photos card: installation (left) + gate pass (right) columns on desktop */
.photocols{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.photocols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 2rem;align-items:start}}
.pcol{min-width:0;display:flex;flex-direction:column;gap:.6rem}
.pdata{margin-top:.2rem}.pd-h{font-size:.82rem;font-weight:700;color:var(--mute);margin:.2rem 0 .7rem;display:flex;align-items:center;gap:.5rem}
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.fields.two{grid-template-columns:1fr}.fields.two .span2{grid-column:span 1}}
.f input[type=checkbox],.f input[type=radio],.filters input[type=checkbox]{width:auto;max-width:none;min-width:0;min-height:0;height:auto}
.hint label.plain{display:inline}
.gp-sum{font-weight:500;color:var(--ink);margin-left:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.gp>summary{gap:0}
details[open].gp>summary .gp-sum{display:none}

/* upload progress indicator (inside the drop zone) */
.up-ind{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--mute);font-weight:500;min-height:28px;transition:opacity .4s}
.up-ind.ok{color:var(--ok)}.up-ind.bad{color:var(--warn)}.up-ind.fade{opacity:0}
.up-ind .linkbtn{font-size:.85rem}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--pri);border-radius:50%;animation:trw-spin .8s linear infinite;flex:0 0 auto}
@keyframes trw-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--mute)}}
.drop.busy{opacity:1;pointer-events:none}.drop.busy .drop-empty{display:none}
.drop:not(.has) .up-ind:not([hidden]){margin-top:.3rem}.drop.has .up-ind{margin-left:.8rem}
.drop.has{display:flex;flex-wrap:wrap;align-items:center}
#savebtn:disabled{opacity:.6;cursor:not-allowed}

.hint.auto{font-size:.74rem}

/* continuous entry: header "+ Add job" (desktop), keep-depot checkbox under the form actions */
.top .hdr-add{display:none}
@media(min-width:768px){.top .hdr-add{display:inline-flex;min-height:44px;padding-top:0;padding-bottom:0}}       /* same look as the dashboard button, but never taller than the header's 44 px controls */
.keepbox{flex-basis:100%;font-size:.82rem;color:var(--mute);font-weight:500}
.actions{flex-wrap:wrap;align-items:center}

/* dashboard: "Entered by" line, live card (wide) / "N online" dropdown (narrow) */
.countline{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;position:relative;min-height:28px}
.byform{margin:0}.byform label{display:inline-flex;align-items:center;gap:.3rem;flex-direction:row;font-weight:500;font-size:.82rem;color:var(--mute)}
.byform select{width:auto;min-height:0;padding:.1rem .3rem;border:0;background:transparent;color:var(--mute);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:6px}
.byform select:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.r-id small.by{font-size:.7rem;margin-top:.1rem;cursor:pointer}.r-id small.by:hover{text-decoration:underline}.r-id small.by:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
.live-pill{display:none;align-items:center;gap:.35rem;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:999px;padding:.05rem .6rem;min-height:26px;color:var(--mute);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.live-pill:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.live-pop,.live-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:.8rem .9rem;font-size:.8rem;color:var(--mute)}
.live-pop{position:absolute;right:0;top:calc(100% + 6px);width:min(300px,92vw);z-index:20}
.live-card{display:none;position:absolute;left:100%;top:1.5rem;margin-left:20px;width:260px}
.live-title{font-size:.78rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.live-h{font-size:.7rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin:.6rem 0 .3rem}.live-body>.live-h:first-child{margin-top:0}
.live-u{display:flex;align-items:center;gap:.4rem;padding:.12rem 0;color:var(--ink)}
.live-av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pri-soft);color:var(--pri);font-size:.62rem;font-weight:700;flex:0 0 auto}
.live-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.live-you{margin-left:auto;font-size:.68rem;color:var(--mute)}
.live-none{color:var(--mute);font-style:italic;list-style:none}
.live-ev{list-style:none;margin:0;padding:0}.live-ev li{padding:.22rem 0;border-bottom:1px solid var(--line);line-height:1.35;overflow-wrap:anywhere}.live-ev li:last-child{border:0}
.live-who{color:var(--ink);font-weight:600}.live-t{display:block;font-size:.7rem;color:var(--mute)}
.uname{border-bottom:1px dotted var(--mute);cursor:help}
@media(min-width:1500px){
  main.dash{position:relative;margin-left:min(calc((100% - 1180px)/2),calc(100% - 1480px))}      /* keeps the 260 px card on screen without overlapping the container */
  main.dash .live-card{display:block}
}
@media(max-width:1499px){.live-pill{display:inline-flex}}
.live-ev a{white-space:nowrap}
.loadmore{display:flex;justify-content:center;margin:1.1rem 0 .4rem}.loadmore .btn{min-width:200px}

/* idle warning + draft restore prompt */
#idle-modal{z-index:300}
.draft-prompt{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.draft-prompt .btnrow{margin-left:auto}

/* users, read-only settings, delete modal */
fieldset.plain,fieldset.ro{border:0;padding:0;margin:0;min-width:0}
fieldset.ro .btn:not(.keep),fieldset.ro .linkbtn{display:none}
fieldset.ro input:disabled,fieldset.ro select:disabled,fieldset.ro textarea:disabled,fieldset.plain input:disabled,fieldset.plain select:disabled{opacity:.85;background:var(--surf2);color:var(--ink);cursor:default}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.4rem .9rem}
.newpw{display:inline-block;margin:.2rem .4rem;padding:.2rem .6rem;font-size:1rem;user-select:all;background:var(--surf);border:1px solid var(--line);border-radius:8px}
.roline{margin:0 0 .8rem}
#del-modal .modal-card input{margin:.2rem 0 1rem}

/* brand (Ayukshit Fleet Ops) */
.brand{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.brand-mark{width:28px;height:28px;flex:0 0 auto}.brand-short{display:none}
@media(max-width:767px){.brand-full{display:none}.brand-short{display:inline}}
.logo .logo-mark{width:56px;height:56px;display:block}
/* header alert bell (AyukOps app alerts) */
.bell-wrap{position:relative;flex:none}
.bell-btn{position:relative;display:inline-grid;place-items:center;padding:0;width:44px;height:44px;border-radius:10px;background:var(--surf)}
.bell-btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:.66rem;font-weight:700;line-height:18px;text-align:center;box-sizing:border-box}
.bell-pop{position:absolute;right:0;top:calc(100% + 8px);width:min(330px,calc(100vw - 24px));background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);z-index:30;padding:.65rem .75rem}
.bell-head{display:flex;gap:.8rem;align-items:center;font-size:.8rem}
.bell-head b{margin-right:auto;font-size:.85rem}
.bell-list{list-style:none;margin:.5rem 0 0;padding:0;max-height:60vh;overflow-y:auto}
.bell-i{border-top:1px solid var(--line);font-size:.82rem}
.bell-i a{display:block;padding:.45rem 0;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.bell-i.unread a{font-weight:600}
.bell-i.unread a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pri);margin-right:.4rem;vertical-align:middle}
.bell-i time{display:block;color:var(--mute);font-size:.72rem;font-weight:400}
.live-via{margin-left:.35rem;font-size:.66rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.bell-pop{position:fixed;left:12px;right:12px;top:62px;width:auto}}
/* R1.2: job lock checkbox (dashboard rows + job page) and the creator's phone chip */
.lockbox{display:flex;flex-direction:row;align-items:center;gap:.3rem;margin-top:.3rem;font-family:"Plus Jakarta Sans",sans-serif;font-size:.72rem;font-weight:600;color:var(--mute);cursor:pointer;width:max-content}
.lockbox input{margin:0;width:16px;height:16px;accent-color:var(--pri);cursor:pointer}.lockbox input:disabled{cursor:default}
.lockbox.on{color:var(--ink)}.lockbox.big{margin:0;font-size:.9rem;padding:.4rem .2rem}
.lockbox input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.phone-chip{display:inline-flex;align-items:center;gap:.25rem;margin-top:.3rem;padding:.18rem .6rem;border-radius:999px;background:var(--pri);color:var(--pri-ink);font-family:"Plus Jakarta Sans",sans-serif;font-size:.78rem;font-weight:700;white-space:nowrap;cursor:pointer;width:max-content;max-width:100%}
.phone-chip:hover{text-decoration:none;filter:brightness(1.08)}.phone-chip:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
p .phone-chip{margin:0 .15rem;vertical-align:middle}
.btn.is-disabled{opacity:.55;cursor:not-allowed;filter:none}
/* R2: Reports page */
.rep-form{align-items:end}
.rep-bar{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.rep-counts{display:flex;flex-wrap:wrap;gap:.4rem .9rem}.rc{color:var(--mute);font-size:.88rem}.rc b{color:var(--ink);font-size:1.05rem}.rc.bad b{color:var(--bad)}
.rep-fix{border-color:var(--bad)}.rep-fix h2{color:var(--bad)}
.rep-fixlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.rep-fixlist li{display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center;padding:.45rem 0;border-top:1px solid var(--line)}
.rep-sec-head{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}.rep-sec-head h2{margin:0}
.rep-t1{text-align:center;font-weight:700;text-decoration:underline;margin:.8rem 0 .2rem}.rep-t2{text-align:center;font-weight:700;margin:.2rem 0 .4rem}
.rep-t3{font-size:.8rem;font-weight:600;color:var(--mute);margin:.2rem 0 .6rem}
.rep-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
.rtable{border-collapse:collapse;width:100%;font-size:.82rem}.rtable th,.rtable td{border:1px solid var(--line);padding:.35rem .5rem;vertical-align:middle;text-align:left}
.rtable th{background:var(--pri-soft);color:var(--ink);font-weight:700;font-size:.75rem;min-width:70px}
.rtable td.num,.rtable th.num{text-align:right;font-variant-numeric:tabular-nums}.rtable td.sl{text-align:center}.rtable .nowrap{white-space:nowrap}
.rtable tfoot td{font-weight:700;background:var(--surf2)}.rtable .rep-flags{min-width:120px}.rtable .rep-flags .chip{margin:.08rem 0}
.rtable td.sl .rep-edit{display:block;font-size:.7rem;font-weight:600;white-space:nowrap;margin-top:.2rem}
.rep-fix-act{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;margin:.2rem 0 .8rem;padding:.6rem .8rem;border-radius:10px;background:var(--surf2)}
/* R2.1: dashboard job card (desktop: ID + date | by + phone, centred | place ... ; lock in the top-right corner; mobile: compact) */
:root{--ph-bg:#FFF7ED;--ph-ink:#C2410C;--ph-line:#FED7AA}
html:is([data-theme=dark],[data-theme=dim]){--ph-bg:rgba(245,158,11,.14);--ph-ink:#FBBF24;--ph-line:rgba(245,158,11,.35)}
.phone-chip{display:inline-flex;align-items:center;gap:.3rem;margin:0;padding:calc(.12rem - 1px) .55rem;border-radius:999px;background:var(--ph-bg);color:var(--ph-ink);border:1px solid var(--ph-line);
  font-family:"Plus Jakarta Sans",sans-serif;font-size:.72rem;font-weight:700;line-height:inherit;white-space:nowrap;cursor:pointer;width:max-content;max-width:100%}
.phone-chip:hover{filter:none;text-decoration:none;border-color:var(--ph-ink)}.phone-chip svg{flex:none}
p .phone-chip{margin:0 .15rem;vertical-align:middle}
#joblist .row{grid-template-columns:130px 150px minmax(0,1fr) 150px 130px 110px;position:relative}
.r-by{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.3rem;min-width:0}
.r-by .by{font-size:.78rem;font-weight:500;color:var(--mute);cursor:pointer;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.r-by .by:hover{text-decoration:underline}.r-by .by:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
.r-date-m{display:none}
.lockbox.corner{position:absolute;top:.45rem;right:.75rem;margin:0;font-size:.7rem;z-index:1}
#joblist .r-th{padding-top:.6rem}
@media(max-width:860px){
  #joblist .row{grid-template-columns:1fr 1fr;gap:.3rem .8rem;padding:.7rem .9rem}
  #joblist .r-id{grid-column:1/-1;order:1;padding-right:5.5rem}#joblist .r-id .r-date{display:none}
  #joblist .r-by{grid-column:1/-1;order:2;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:.2rem .5rem}
  #joblist .r-date-m{display:inline;font-size:.78rem;color:var(--mute);font-weight:500}
  #joblist .r-date-m+.by::before{content:"· ";color:var(--mute)}
  #joblist .r-kva{order:3}#joblist .r-veh{order:3;text-align:right}
  #joblist .row{grid-template-columns:minmax(0,1fr) auto}
  #joblist .r-main{order:4;grid-column:1}#joblist .r-th{order:4;grid-column:2;padding-top:0;align-self:start;justify-content:flex-end;gap:4px}
  #joblist .r-th img{width:40px;height:40px}
  .lockbox.corner{top:.7rem;right:.9rem}
}
/* place + "Depot · Subdivision" start where the chip labels start (chip side padding .55rem) */
#joblist .r-main>b,#joblist .r-main>.muted{display:block;padding-left:.55rem}
/* public install page /app (mobile first) */
main.inst{max-width:760px}
.inst-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;margin:.2rem 0 1rem}.inst-brand .brand-mark{width:32px;height:32px}
.inst-hero{text-align:center;padding:1.6rem 1.2rem}.inst-hero h1{margin:.6rem 0 .1rem}.inst-sub{margin:0 0 .8rem}
.inst-icon{border-radius:22px;box-shadow:var(--sh)}
.inst-ver{font-weight:600;margin:.2rem 0 1rem}
.inst-dl{font-size:1.15rem;padding:.9rem 1.6rem;min-height:56px;width:min(100%,340px);border-radius:14px}
.inst-sha{margin-top:1rem;font-size:.72rem;display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;align-items:center}
.inst-sha code{font-family:"JetBrains Mono",monospace;overflow-wrap:anywhere;word-break:break-all;color:var(--mute);user-select:all;max-width:100%}
.inst-grid{display:grid;gap:1rem}@media(min-width:700px){.inst-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}
.inst-steps ol{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.inst-steps li,.inst-act{display:flex;gap:.8rem;align-items:flex-start}.inst-steps li p,.inst-act p{margin:.2rem 0 0;font-size:.9rem}
.inst-steps li p[lang=hi],.inst-act p[lang=hi]{color:var(--mute)}
.inst-steps li{counter-increment:s}.inst-steps li>div>b::before{content:counter(s) ". "}
.inst-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--pri-soft);color:var(--pri)}.inst-ic svg{width:24px;height:24px}
.inst-act{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.inst-qr{text-align:center}.inst-qrbox{display:inline-block;background:#fff;padding:10px;border-radius:12px;border:1px solid var(--line)}
.inst-qrbox svg{display:block;width:180px;height:180px}
.share-msg{white-space:pre-wrap;font-size:.8rem;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin:0;overflow-wrap:anywhere}
/* Settings section nav: one row of groups (dropdowns) on wide screens, one select on phones */
.snav{margin-bottom:1rem}
.snav-row{display:flex;gap:.3rem;align-items:center;flex-wrap:nowrap}
.snav-g{position:relative}
.snav-btn,.snav-a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.5rem .9rem;border-radius:10px;border:1px solid transparent;background:none;
  color:var(--mute);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.snav-btn:hover,.snav-a:hover{color:var(--ink);text-decoration:none}
.snav-btn.on,.snav-a.on{background:var(--surf);border-color:var(--line);color:var(--pri);box-shadow:var(--sh)}
.snav-btn[aria-expanded=true]{color:var(--ink);background:var(--surf);border-color:var(--line)}
.snav-btn:focus-visible,.snav-a:focus-visible,.snav-menu a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.snav-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:200px;background:var(--surf);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);
  padding:.35rem;display:flex;flex-direction:column}
.snav-menu a{padding:.55rem .75rem;border-radius:8px;color:var(--ink);font-weight:500;white-space:nowrap}
.snav-menu a:hover,.snav-menu a:focus{background:var(--surf2);text-decoration:none}
.snav-menu a.on{color:var(--pri);background:var(--pri-soft);font-weight:600}
.snav-sel{display:none;margin:0}.snav-sel .fl{width:100%}
@media(max-width:639.98px){.snav-row{display:none}.snav-sel{display:block}}
@media(min-width:640px) and (max-width:819.98px){.snav-row{gap:.1rem;flex-wrap:wrap}.snav-btn,.snav-a{padding:.45rem .35rem;font-size:.84rem;gap:.25rem}}
.inst-guide{margin:.7rem 0 0}.inst-guide-btn{flex-direction:column;gap:.05rem;white-space:normal;text-align:center;line-height:1.35;width:min(100%,340px);min-height:56px;
  border-radius:14px;font-weight:600;background:transparent;border:2px solid var(--pri);color:var(--pri)}
.inst-guide-btn:hover{background:var(--pri-soft)}
.inst-guide-btn [lang=hi]{font-size:.9rem;font-weight:500}
/* Settings -> System -> App rollout */
.ro-range{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-end;margin:.6rem 0}
.ro-custom{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-end;margin:0 0 0 .4rem}.ro-custom .fl{width:150px}
.ro-fun .trow>div{text-align:left}.ro-n{font-size:1.15rem;font-weight:700}
.ro-bar{display:block;height:10px;width:var(--w);min-width:2px;border-radius:0 4px 4px 0;background:var(--pri)}
.ro-l{display:none}.ro-chk{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;min-height:40px;flex:0 0 auto}
.ro-legend{display:flex;gap:1rem;margin:0 0 .4rem;color:var(--mute)}.ro-legend span{display:inline-flex;align-items:center;gap:.35rem}
.ro-k{display:inline-block;width:10px;height:10px;border-radius:2px}
.ro-k.app,.ro-app{background:#1E4FD8}.ro-k.apk,.ro-apk{background:#D97706}
html:is([data-theme=dark],[data-theme=dim]) .ro-k.app,html:is([data-theme=dark],[data-theme=dim]) .ro-app{background:#5B7FE8}
html:is([data-theme=dark],[data-theme=dim]) .ro-k.apk,html:is([data-theme=dark],[data-theme=dim]) .ro-apk{background:#C27A0A}
.ro-max{margin-left:auto}
.ro-bars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));height:160px;border-bottom:1px solid var(--line);align-items:end}
.ro-day{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;padding:0 1px}.ro-day:hover{background:var(--surf2)}
.ro-day span{display:block;width:min(40%,10px);border-radius:4px 4px 0 0}
.ro-ticks{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));font-size:.72rem;color:var(--mute);margin:.25rem 0 .6rem}
.ro-ticks span{white-space:nowrap;text-align:center;overflow:visible;display:flex;justify-content:center}.ro-ticks span:first-child{justify-content:flex-start}.ro-ticks span:last-child{justify-content:flex-end}
.ro-fun .trow.th>span{text-align:left}.ro-chk{flex-direction:row!important}
@media(max-width:700px){.ro-l{display:inline;color:var(--mute)}.ro-fun .ro-s{display:inline-block;width:auto;margin-right:.8rem}.ro-span{display:none}
  .ro-custom{margin:0}.ro-custom .fl{width:auto;flex:1 1 130px}}
/* ---- Users page (U1): two cards ① Details / ② Sign-in & app as steps (new) or tabs; panes share one grid cell so switching never moves the page */
.ustep-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;min-height:44px}
.ustep-tabs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;min-width:0}
.ustep-tab{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .9rem;border-radius:10px;border:1px solid transparent;background:none;color:var(--mute);font:inherit;font-weight:600;cursor:pointer}
.ustep-tab[aria-selected=true]{background:var(--surf);border-color:var(--line);color:var(--pri);box-shadow:var(--sh)}
.ustep-tab:hover{color:var(--ink)}.ustep-tab[aria-selected=true]:hover{color:var(--pri)}
.ustep-tab[aria-disabled=true]{cursor:default;opacity:.6}.ustep-tab[aria-disabled=true]:hover{color:var(--mute)}
.ustep-tab:focus-visible,.ustep-arrow:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.ustep-n{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid currentColor;font-size:.78rem;line-height:1}
.ustep-tab[aria-selected=true] .ustep-n{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.ustep-sep{color:var(--mute)}
.ustep-arrow{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--line);background:var(--surf);color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer}
.ustep-arrow:hover:not(:disabled){background:var(--surf2)}.ustep-arrow:disabled{opacity:.4;cursor:default}
.upanes{display:grid;overflow-x:clip;margin:0 -6px;padding:0 6px 8px}
.upane{grid-area:1/1;align-self:start;margin-bottom:0;min-width:0;transition:transform .25s ease,opacity .25s ease,visibility 0s}
.upanes[data-tab=details] #pane-signin{transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
.upanes[data-tab=signin] #pane-details{transform:translateX(calc(-100% - 24px));opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
@media(prefers-reduced-motion:reduce){.upane,.upanes[data-tab] .upane{transition:none!important}}
.ufields{gap:.35rem 1.1rem}.ufields>.f>.lt{display:block}
.uhint{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;min-height:2.4em;font-size:.78rem;line-height:1.2;color:var(--mute)}
.ferr{color:var(--bad);font-weight:600}.ferr:empty{display:none}
.req{color:var(--bad)}
.f input[aria-invalid=true],.f select[aria-invalid=true]{border-color:var(--bad)}
.ph-in{display:flex;align-items:stretch;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surf);overflow:hidden}
.ph-in:focus-within{outline:2px solid var(--pri);outline-offset:-1px}
.ph-in:has(input[aria-invalid=true]){border-color:var(--bad)}
.ph-cc{display:inline-flex;align-items:center;padding:0 .7rem;background:var(--surf2);border-right:1px solid var(--line);color:var(--mute);font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
.ph-in input{border:0;border-radius:0;height:100%;min-height:0;flex:1;min-width:0;outline:0;background:transparent}
.ph>#u-phone-intl{height:44px}
.ph-switch{font-size:.78rem;white-space:nowrap;margin-left:auto}
.acards-wrap{margin:.9rem 0 0}.acards-wrap>legend{padding:0;margin-bottom:.9rem;font-weight:600;font-size:.85rem;color:var(--mute)}
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.acard{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.85rem .9rem .75rem;border:1.5px solid var(--line);border-radius:12px;background:var(--surf);cursor:pointer;color:var(--ink);font-weight:500;transition:border-color .15s,background-color .15s}
.acard:hover{border-color:var(--mute)}
.acard.on,.acard:has(.acard-cb:checked){border-color:var(--pri);background:var(--pri-soft)}
.acard:has(.acard-cb:focus-visible){outline:2px solid var(--pri);outline-offset:2px}
.acard:has(.acard-cb:disabled){cursor:not-allowed;opacity:.65}
.acard-cb{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.acard-badge{position:absolute;top:-.65rem;left:.75rem;padding:.05rem .5rem;border-radius:999px;background:var(--okbg);color:var(--ok);font-size:.7rem;font-weight:700;border:1px solid var(--ok);visibility:hidden;white-space:nowrap}
.acard.on .acard-badge,.acard:has(.acard-cb:checked) .acard-badge{visibility:visible}
.acard:has(.acard-cb:not(:checked)) .acard-badge{visibility:hidden}
.acard-t{font-weight:700;font-size:.95rem}.acard-d{font-size:.78rem;color:var(--mute)}
.vhead-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:1.2rem 0 .5rem;flex-wrap:wrap}
.vhead-row .lt{font-weight:600;font-size:.85rem;color:var(--mute)}
.vbox{height:12.5rem;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;background:var(--surf2)}
.vgroup+.vgroup{margin-top:.7rem}.vgroup-h{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:.3rem}
.vbox-empty{margin:0;padding:.3rem 0}
.ufoot{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.ustep .btn[aria-busy=true]{position:relative;color:transparent!important}
.ustep .btn[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--pri-ink);border-top-color:transparent;animation:uspin .7s linear infinite}
.ustep .btn:not(.primary)[aria-busy=true]::after{border-color:var(--ink);border-top-color:transparent}
@keyframes uspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ustep .btn[aria-busy=true]::after{animation:none;border-top-color:var(--mute)}}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sbox{border:1px solid var(--line);border-radius:12px;padding:1rem;min-width:0}.sbox h3{font-size:.92rem;margin:0 0 .5rem}
.slater{margin-top:1rem}
#signin-body .btn:disabled{opacity:.5;cursor:not-allowed}#signin-body .btn:disabled:hover{background:var(--surf)}
.sline{margin:0 0 .7rem;overflow-wrap:anywhere}
.slot{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;min-height:5.2rem;padding:.6rem .75rem;margin-bottom:.8rem;border:1px dashed var(--line);border-radius:10px;background:var(--surf2)}
.slot .newpw{margin:0;font-size:1.15rem;letter-spacing:.06em}
.slot-l{font-weight:600;font-size:.82rem;color:var(--mute)}.slot-n{flex-basis:100%;font-size:.78rem;color:var(--mute)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .9rem;margin:0 0 .8rem;font-size:.86rem}
.kv>div{display:contents}.kv dt{color:var(--mute)}.kv dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:860px){.sgrid{grid-template-columns:1fr}}
@media(max-width:440px){.ustep-bar{gap:.35rem}.ustep-tabs{flex-wrap:nowrap;gap:.15rem}.ustep-sep{display:none}.ustep-tab{padding:.45rem .45rem;gap:.3rem;font-size:.9rem;white-space:nowrap}.ustep-arrow{width:40px;height:40px;flex-basis:40px}}
@media(max-width:640px){.acards{gap:.5rem}.acard{padding:.8rem .55rem .65rem}.acard-d{display:none}.acard-t{font-size:.85rem}.ustep-tab{padding:.5rem .6rem}}
/* header with the Users / Attendance links (U1): 768-1099 px tablets get the short brand + tighter links so nothing overflows */
@media(min-width:768px) and (max-width:1099.98px){
  .top:has(.main-nav a:nth-child(4)) .brand-full{display:none}.top:has(.main-nav a:nth-child(4)) .brand-short{display:inline}
  .top nav.main-nav:has(a:nth-child(4)) a{padding:.4rem .55rem}
  .top:has(.main-nav a:nth-child(6)) .hdr-add{display:none}.top:has(.main-nav a:nth-child(6)) .add-btn{display:inline-flex}
  .top:has(.main-nav a:nth-child(6)){gap:.6rem}.top nav.main-nav:has(a:nth-child(6)) a{padding:.4rem .45rem}   /* O1: + Overview = 6 links: the round + instead */
  .top:has(.main-nav a:nth-child(7)){gap:.45rem}.top nav.main-nav:has(a:nth-child(7)) a{padding:.4rem .3rem;font-size:.88rem}   /* V2.0: + Vehicles = 7 links */
}
/* ---- Users list (U2): chips with counts, search + Depot / Role, rows -> compact cards on phones */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.uchips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
.uchip{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--mute);font-weight:600;font-size:.88rem;white-space:nowrap}
.uchip:hover{text-decoration:none;color:var(--ink);border-color:var(--mute)}
.uchip.on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.uchip:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.uchip-n{display:inline-block;min-width:2.1ch;padding:0 .35rem;border-radius:999px;background:var(--surf2);color:var(--ink);font-size:.78rem;text-align:center;font-variant-numeric:tabular-nums}
.uchip.on .uchip-n{background:rgba(255,255,255,.22);color:inherit}
.ufilters{display:grid;grid-template-columns:minmax(0,1fr) 200px 200px;gap:.6rem;margin-bottom:1rem}
.ufilters label{display:block}.ufilters input,.ufilters select{height:44px}
.ulist{padding:.4rem 1rem}
.ul-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:.75rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line);font-size:.86rem}
.ul-row[data-href]{cursor:pointer}.ul-row[data-href]:hover{background:var(--surf2)}.ul-name a{color:inherit}
.ul-row>*{min-width:0;overflow-wrap:anywhere}
.ul-head{border-top:0;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:.5rem 0}
#ul-rows>.ul-row:first-child{border-top:1px solid var(--line)}
.ul-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-ok{color:var(--ok);font-weight:700}
.ul-off{margin-top:.15rem;line-height:1.3}
.ul-act{text-align:right}
.ul-empty{padding:2rem 0 1.6rem;text-align:center;color:var(--mute);border-top:1px solid var(--line)}.ul-empty p{margin:0 0 .4rem}
@media(max-width:860px){.ufilters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.uf-q{grid-column:1/-1}}
@media(max-width:700px){
  .uchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -.9rem .75rem;padding:0 .9rem 2px;scroll-padding:0 .9rem}.uchips::-webkit-scrollbar{display:none}
  .ulist{padding:.2rem .9rem}.ul-head{display:none}
  .ul-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name ph" "meta meta" "last app" "st st";gap:.25rem .6rem;padding:.75rem 0}
  .ul-phone{grid-area:ph;text-align:right}.ul-team{display:none}.ul-role .chip{padding:0;border:0;background:none;color:inherit;font-weight:400}
  #ul-rows>.ul-row:first-child{border-top:0}
  .ul-name{grid-area:name}.ul-act{grid-area:act}.ul-last{grid-area:last;font-size:.82rem}.ul-app{grid-area:app;text-align:right;font-size:.82rem}
  .ul-role{grid-area:meta;font-size:.82rem;color:var(--mute)}.ul-role::after{content:" · " attr(data-depot)}
  .ul-title,.ul-depot,.ul-status{display:none}.ul-status.is-off{display:block;grid-area:st}
}
.ob-card{width:min(480px,94vw)}.ob-card .f{margin-top:.6rem}.ob-card input{height:44px}
.uhist{list-style:none;margin:0;padding:0;font-size:.86rem}.uhist li+li{margin-top:.5rem}
.ul-row.ul-stale{opacity:.45}
/* ---- O1 Overview (/overview). Categorical slots s1..s6 = divisions / depots in id order (dataviz reference palette, validated light + dark); s0 = other */
:root{--s0:#94A3B8;--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300}
html:is([data-theme=dark],[data-theme=dim]){--s0:#64748B;--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#008300}
.s0{background:var(--s0)}.s1{background:var(--s1)}.s2{background:var(--s2)}.s3{background:var(--s3)}.s4{background:var(--s4)}.s5{background:var(--s5)}.s6{background:var(--s6)}
.ov-head{align-items:center}.ov-head h1{margin-bottom:0}.ov-upd{margin:0;display:flex;align-items:center;gap:.35rem}.ov-upd time{font-variant-numeric:tabular-nums}
.ov-per{display:flex;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.ov-per a{padding:.4rem .8rem;border-radius:8px;color:var(--mute);font-weight:600;font-size:.88rem;white-space:nowrap}
.ov-per a.on{background:var(--pri);color:var(--pri-ink)}.ov-per a:hover{text-decoration:none}.ov-per a:not(.on):hover{color:var(--ink)}
.ov-range{margin:-.4rem 0 .9rem}
.ov-kpis{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
.ov-kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:.85rem 1rem;color:var(--ink);display:flex;flex-direction:column;min-width:0;min-height:112px;transition:border-color .15s}
.ov-kpi:hover{text-decoration:none;border-color:var(--pri)}
.ov-k-l{color:var(--mute);font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-kpi b{font-size:1.6rem;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ov-kpi b small{font-size:.9rem;color:var(--mute);font-weight:600}
.ov-kpi b.mono{font-size:1.45rem}
.ov-k-s{font-size:.76rem;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-kpi.warn b{color:var(--warn)}.ov-kpi.bad b{color:var(--bad)}
.ov-d{font-weight:700}.ov-d.up{color:var(--ok)}.ov-d.down{color:var(--bad)}
@media(max-width:1100px){.ov-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.ov-kpis>:last-child:nth-child(odd){grid-column:1/-1}.ov-kpi{min-height:100px;padding:.75rem .85rem}.ov-kpi b{font-size:1.4rem}.ov-kpi b.mono{font-size:1.2rem}}
.ov-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}.ov-sec-h h2{margin:0}
.ov-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.4rem;flex:0 0 auto;vertical-align:baseline}
.ov-ready{display:flex;flex-direction:column}
.ov-rr{display:grid;grid-template-columns:minmax(0,1.4fr) .6fr 1fr .7fr 1.2fr 1.2fr 1.1fr;gap:.8rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.ov-rh{border-top:0;color:var(--mute);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding-top:0}
.ov-rdiv{display:flex;align-items:center;font-weight:600;min-width:0}.ov-rl{display:none}.ov-bad{color:var(--bad);font-weight:700}
.ov-pc{display:flex;align-items:center;gap:.45rem}.ov-pc>span:last-child{min-width:3.2em;text-align:right;font-size:.85rem}
.ov-pbar{flex:1;height:8px;border-radius:999px;background:var(--surf2);border:1px solid var(--line);overflow:hidden;min-width:40px}.ov-pbar>span{display:block;height:100%;background:var(--ok);border-radius:999px}
.ov-pbar.fz>span{background:#0EA5E9}
@media(max-width:760px){.ov-rh{display:none}.ov-rr{grid-template-columns:1fr 1fr;gap:.35rem .8rem;padding:.7rem 0}.ov-rr>.ov-rdiv{grid-column:1/-1}.ov-rr>span:last-child{grid-column:1/-1}.ov-rl{display:inline;color:var(--mute);font-size:.78rem;font-weight:600}}
.ov-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem}@media(max-width:900px){.ov-two{grid-template-columns:1fr}}
.ov-two>.card{margin-bottom:1rem}
.ov-legend{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.8rem;color:var(--mute);margin-bottom:.6rem;min-height:1.3em}.ov-legend>span{display:inline-flex;align-items:center}
.ov-bars{position:relative;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;align-items:stretch;height:170px;border-bottom:1px solid var(--line);padding-top:1.1rem}
.ov-ymax{position:absolute;top:0;left:0;line-height:1}
.ov-bars::before{content:"";position:absolute;left:0;right:0;top:1.1rem;border-top:1px dashed var(--line)}
.ov-day{min-height:0;display:flex;align-items:flex-end;justify-content:center;border-radius:4px 4px 0 0;outline-offset:1px}
.ov-day:hover,.ov-day:focus-visible{background:var(--surf2)}
.ov-stack{width:min(100%,18px);display:flex;flex-direction:column;gap:2px;border-radius:4px 4px 0 0;overflow:hidden;min-height:0}.ov-stack>span{min-height:2px}
.ov-day.today .ov-stack{box-shadow:0 0 0 2px var(--surf),0 0 0 3px var(--ink)}
.ov-xax{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;text-align:center;margin-top:.25rem;font-variant-numeric:tabular-nums}
.ov-tbl{margin-top:.6rem}.ov-tbl summary{cursor:pointer;color:var(--pri);font-weight:600}
.ov-table{width:100%;border-collapse:collapse;margin-top:.5rem;font-variant-numeric:tabular-nums}.ov-table th,.ov-table td{text-align:right;padding:.25rem .4rem;border-bottom:1px solid var(--line)}.ov-table th:first-child,.ov-table td:first-child{text-align:left}
.ov-tbl{overflow-x:auto}
.ov-tip{position:fixed;z-index:40;background:var(--surf);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh);border-radius:10px;padding:.5rem .7rem;font-size:.8rem;pointer-events:none;max-width:260px}
.ov-map{position:relative;height:280px;border-radius:10px;background:var(--surf2);border:1px solid var(--line);overflow:hidden;z-index:0}
.ov-map-empty{position:absolute;inset:0;display:grid;place-items:center;z-index:500;pointer-events:none;text-align:center;padding:1rem}
.ov-map.has-map .ov-map-empty{background:color-mix(in srgb,var(--surf) 55%,transparent)}
html:is([data-theme=dark],[data-theme=dim]) .ov-map .leaflet-tile-pane{filter:brightness(.7) contrast(1.15) saturate(.8)}
.ov-map .leaflet-control-attribution{font-size:10px}
.ov-pins{list-style:none;margin:.6rem 0 0;padding:0;max-height:9.5rem;overflow-y:auto}.ov-pins li a{display:flex;align-items:center;gap:.2rem;padding:.25rem 0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem;margin-bottom:0}.ov-cards>.card{margin-bottom:0}
.ov-part+.ov-part,#ov-extras{margin-top:1rem}#ov-feed{margin-top:1rem}
.ov-c h2{margin-bottom:.6rem}
.ov-li{display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,.8fr) auto auto;gap:.6rem;align-items:center;padding:.4rem 0;border-top:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.ov-li:first-of-type{border-top:0}.ov-li:hover{text-decoration:none;background:var(--surf2)}
.ov-li-n{display:flex;align-items:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ov-li-n>.small{overflow:hidden;text-overflow:ellipsis}
.ov-li>b{text-align:right}.ov-prev{text-align:right;white-space:nowrap}
.ov-li:not(:has(.ov-mbar)){grid-template-columns:minmax(0,1fr) auto auto}
.ov-mbar{display:block;height:8px;border-radius:999px;background:var(--surf2);overflow:hidden}.ov-mbar>span{display:block;height:100%;border-radius:999px}
.ov-foot{margin:.5rem 0 0}
.ov-feed{list-style:none;margin:0;padding:0}.ov-feed li{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.5rem;align-items:baseline;padding:.45rem 0;border-top:1px solid var(--line)}.ov-feed li:first-child{border-top:0}
.ov-fi{text-align:center;color:var(--mute)}.ov-f-check_in{color:var(--ok)}.ov-ft{min-width:0;overflow-wrap:anywhere}.ov-feed time{white-space:nowrap}
.ov-fab{position:fixed;right:1.25rem;bottom:1.25rem;width:56px;height:56px;border-radius:50%;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 6px 18px rgba(15,23,42,.25);z-index:20}
.ov-fab:hover{text-decoration:none;filter:brightness(1.08)}
main.ov{padding-bottom:6rem}
/* PW1: password strength / match hints (app/static/pw.js) */
.pw-hint.ok{color:var(--ok)}.pw-hint.bad{color:var(--bad)}.pw-hint.warn{color:var(--warn)}
/* A1: job status chip + assignee chips (dashboard cards, job page), Assign dialog, notifications toggle, role chip */
.chip.st-started{background:var(--infobg);color:var(--mute)}.chip.st-assigned{background:var(--pri-soft);color:var(--pri)}
.chip.st-in_progress{background:var(--warnbg);color:var(--warn)}.chip.st-submitted{background:var(--okbg);color:var(--ok)}
.chip.st-locked{background:var(--infobg);color:var(--ink)}
.asg-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}
.chip.asg{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.asg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.asg-list{list-style:none;margin:.5rem 0;padding:0;max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.asg-list li{border-top:1px solid var(--line)}.asg-list li:first-child{border-top:0}
.asg-list .asg-dep{padding:.35rem .7rem;font-size:.75rem;font-weight:700;color:var(--mute);background:var(--surf2);text-transform:uppercase;letter-spacing:.03em}
.asg-list label{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;cursor:pointer;flex-direction:row;font-weight:500;min-width:0}
.asg-list label span.nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asg-list input{width:auto;min-height:0;margin:0}
.duty{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--line);flex:none}.duty.on{background:var(--ok)}
.asg-search{width:100%}
.role-chip{display:inline-block;margin-top:.3rem;padding:.08rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--pri-soft);color:var(--pri)}
.push-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .2rem 0;border-top:1px solid var(--line);margin-top:.35rem;font-size:.82rem}
.push-row .linkbtn{white-space:nowrap}
.team-list{list-style:none;margin:0;padding:0}.team-list li{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-top:1px solid var(--line)}
.team-list li:first-child{border-top:0}.team-list .nm{flex:1;min-width:0}
.menu-id{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.menu-id .menu-email{max-width:100%}
#asg-modal{grid-template-columns:minmax(0,1fr)}#asg-modal .modal-card{min-width:0;justify-self:center}#asg-modal .asg-list li,#asg-modal .asg-list label{min-width:0}

/* B1 task-based assignment: task checkboxes under a ticked person in the Assign dialog */
.asg-list .asg-tasks{display:flex;flex-wrap:wrap;gap:.2rem .7rem;padding:0 .7rem .5rem 2.4rem}
.asg-list .asg-tasks label{padding:.1rem 0;font-size:.85rem;font-weight:400;gap:.3rem}
/* B1 dashboard: "Clear all" chip after the filter chips */
.fchip.fchip-clear{background:transparent;border:1px dashed currentColor;padding:calc(.2rem - 1px) calc(.7rem - 1px)}
/* B1 overview: period switch + date picker (one day or from–to) */
.ov-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}
.ov-dates{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-width:0}
.ov-dates input[type=date]{width:auto;min-width:0;max-width:10.5rem;padding:.3rem .45rem;font-size:.85rem}
.ov-dates.on input[type=date]{border-color:var(--pri)}
/* M1 area master: job form Block search + read-only chain, area line on cards / job page, Settings -> Areas tree */
.f .blockq{margin-bottom:.35rem}
.chain{display:block;padding:.45rem 0;font-size:.86rem;line-height:1.45;color:var(--mute);overflow-wrap:anywhere}
.arealine{font-size:.78rem;color:var(--mute);overflow-wrap:anywhere;line-height:1.35}
.arealine b{font-weight:600;color:var(--ink)}
.atree{list-style:none;margin:0;padding:0}.atree ul{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:1px dashed var(--line)}
.atree li{margin:.12rem 0}.atree details>summary{cursor:pointer;list-style:none;padding:.18rem 0}.atree details>summary::-webkit-details-marker{display:none}
.atree summary::before{content:"▸";display:inline-block;width:1em;color:var(--mute)}.atree details[open]>summary::before{content:"▾"}
.anode{display:inline-flex;flex-wrap:wrap;gap:.35rem;align-items:center}.anode .lv{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--mute);min-width:2.6rem}
.anode.off .nm{text-decoration:line-through;color:var(--mute)}.anode .link{font-size:.75rem}
.anode .acts{display:inline-flex;gap:.25rem}.atree .leaf{padding-left:1em}
.atools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}.atools input[type=search]{max-width:260px}
.r-area{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* W1-A Users views (List · Teams · By depot) and the Teams cards */
.uviews{margin-bottom:.75rem}.useg{padding:.45rem 1.1rem;border-radius:8px;color:var(--mute);font-size:.9rem;font-weight:600}.useg:hover{text-decoration:none;color:var(--ink)}
.useg.on{background:var(--pri);color:var(--pri-ink)}.useg:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.ul-group+.ul-group{margin-top:.6rem}.ul-gh{font-size:.82rem;margin:.6rem 0 .2rem;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.tgroup{margin-bottom:1.4rem}.tg-h{font-size:1.05rem;margin:0 0 .6rem;display:flex;gap:.6rem;align-items:baseline}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:.9rem}.tcard{margin:0;padding:1rem}
.tc-h{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;margin-bottom:.4rem}.tc-h h3,.tc-new h3{margin:0;font-size:1rem}
.tm-list{list-style:none;margin:0;padding:0}.tm{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;padding:.45rem 0;border-top:1px solid var(--line);font-size:.86rem}
.tm:first-child{border-top:0}.tm-nm{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}.tm-ph,.tm-app{white-space:nowrap}
.tm-acts{display:flex;flex-wrap:wrap;gap:.3rem;width:100%;padding-left:1.1rem}.tm-acts select{height:32px;max-width:12rem}.tm-none{padding:.4rem 0}
.tc-tools{margin-top:.6rem}.tc-tools>summary{list-style:none}.tc-tools>summary::-webkit-details-marker{display:none}
.tc-forms{display:grid;gap:.5rem;margin-top:.5rem}.tc-forms .inline-form{margin-top:0}.tc-forms input,.tc-forms select{min-width:0;max-width:100%}
.tc-add fieldset{border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;margin:0}.tc-pick{display:grid;gap:.2rem;max-height:14rem;overflow:auto;margin:.3rem 0 .5rem}
.tloose{margin-top:.9rem;padding:1rem}.tloose h3{margin:0 0 .3rem}
/* W1-B dashboard: sort switch, "Added by / Edited by" lines, assignee phones; job page "Who does what"; names that open the person page */
.sortsw{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.15rem .35rem;font-size:.8rem;min-width:0}
.sortsw-l{color:var(--mute)}
.sortsw a{padding:.08rem .5rem;border-radius:999px;color:var(--mute);font-weight:600;white-space:nowrap}
.sortsw a.on{background:var(--pri-soft);color:var(--pri)}
.sortsw a:hover{text-decoration:none;color:var(--ink)}
.r-by .by .by-t{white-space:nowrap}
.r-by .by-ed{opacity:.85}
@media(max-width:860px){            /* phone card stays compact: date · by <name> · phone chip on one line, "Edited by" on the next */
  #joblist .r-by .by-add .by-w,#joblist .r-by .by-add .by-tw{display:none}
  #joblist .r-by .by-ed{order:5;flex-basis:100%;font-size:.72rem;line-height:1.15;margin-top:-.1rem}
}
.uname.plink{color:inherit;cursor:pointer}
.uname.plink:hover{text-decoration:none;border-bottom-style:solid;border-bottom-color:currentColor}.plink:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
.asg-p{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem;max-width:100%;min-width:0}
.asg-p .phone-chip{margin:0}
.who-table{display:flex;flex-direction:column}
.who-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.6fr) minmax(0,2fr) minmax(0,1.3fr);gap:.4rem .8rem;align-items:center;padding:.45rem .3rem;border-top:1px solid var(--line)}
.who-row.who-head{border-top:0;font-size:.75rem;font-weight:700;color:var(--mute);text-transform:uppercase}
.who-row>*{min-width:0}.who-ppl{display:flex;flex-wrap:wrap;gap:.3rem}
.who-row .pd{margin:0}
.who-row.who-none{background:var(--warnbg);border-radius:8px}
.who-nobody{color:var(--warn);font-weight:600;font-size:.85rem}
@media(max-width:700px){
  .who-row{grid-template-columns:minmax(0,1fr) auto;padding:.6rem .4rem}
  .who-row.who-head{display:none}
  .who-ppl,.who-last{grid-column:1/-1}
}
.asg-scope{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:.4rem 0 0;min-height:1.2rem}
/* V2.0 vehicle module (VA): board grid, vehicle page readings, report */
.veh-nav{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:0 0 .6rem}
.veh-grid th,.veh-grid td{text-align:center;min-width:76px}.veh-grid tbody th{text-align:left;min-width:130px;white-space:nowrap}
.veh-grid thead th.today{background:var(--pri);color:var(--pri-ink)}
.vc .vst{display:inline-block;font-size:.68rem;font-weight:700;border-radius:999px;padding:.02rem .4rem;margin-top:.15rem}
.vc-ok .vst{background:var(--okbg);color:var(--ok)}.vc-flagged .vst{background:var(--badbg);color:var(--bad)}
.vc-missing{background:var(--badbg)}.vc-missing .vst{color:var(--bad)}.vc-pending .vst,.vc-due .vst{background:var(--warnbg);color:var(--warn)}
.vc-offroad{background:var(--surf2)}.vc-offroad .vst,.vc-not_expected .vst,.vc-future .vst{color:var(--mute)}
.vc .vk{color:var(--mute)}
.veh-stats b.bad{color:var(--bad)}
.veh-form{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;margin-top:.7rem}.veh-form .fl{min-width:0;flex:1 1 9rem}.veh-form .fl.wide{flex-basis:100%}
.veh-form h3{flex-basis:100%;margin:0}
.veh-more{margin-top:.8rem}.veh-more>summary{cursor:pointer;font-weight:600;color:var(--pri);min-height:32px;display:flex;align-items:center}
.veh-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem .9rem;align-items:end}
.veh-readings{display:flex;flex-direction:column}
.vr{display:flex;gap:.8rem;padding:.7rem 0;border-top:1px solid var(--line);min-width:0}.vr:first-child{border-top:0}
.vr.voided{opacity:.55}.vr.voided .vr-val{text-decoration:line-through}.vr-pending{background:var(--warnbg);border-radius:8px;padding-left:.5rem;padding-right:.5rem}
.vr-photo{flex:none;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}.vr-photo img{border-radius:6px;display:block;width:96px;height:auto}
.vr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.vr-act{display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin-top:.2rem}.vr-act form{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.vr-act input{width:auto;min-width:0;max-width:11rem;flex:1 1 7rem;padding:.3rem .45rem;font-size:.85rem}
.veh-rep td.num,.veh-rep th.num{text-align:right;min-width:2.6rem}.veh-rep .vmiss{color:var(--bad);font-weight:700}.veh-rep .vpend{color:var(--warn);font-weight:700}
.veh-rep tbody th{white-space:nowrap}
@media(max-width:600px){.vr{flex-direction:column}.vr-photo{flex-direction:row;align-items:center}}

/* V20.1 Overview money hidden like a bank app: ₹ •••••• until "Show ₹" (overview.js) */
.mny-v{display:none}
.mny-show .mny-v{display:inline}
.mny-show .mny-h{display:none}
.mny-h{letter-spacing:.04em;white-space:nowrap}
.ov-money{display:inline-flex;align-items:center;gap:6px;flex:none}

/* ---------------------------------------------------------------- C1 crew attendance + avatars (VA): new pages only; avatars only where a user has one */
.av-sm{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle;flex:0 0 auto}
.av-lg{width:44px;height:44px;border-radius:50%;object-fit:cover;vertical-align:middle}
.crew-ubox .crew-urow{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding:.4rem 0;border-top:1px solid var(--line)}
.crew-ubox .crew-urow:first-of-type{border-top:0}.crew-ubox .crew-urow>*{min-width:0}
.crew-tbox{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.5rem}.crew-tbox h4{margin:0 0 .3rem}
.crew-takers,.crew-geo{margin:.35rem 0;display:flex;flex-wrap:wrap;gap:.25rem .6rem;align-items:center}.crew-tk{white-space:nowrap}.crew-tk.on{font-weight:600}
.crew-tk form.inl{display:inline}.crew-geo-f{flex-wrap:wrap}.crew-rad{width:6.5rem}
.crew-ph{display:flex;gap:.3rem;flex-wrap:wrap}.crew-ph img{border-radius:6px;object-fit:cover;display:block}
.crew-checks .chip{margin:.1rem 0}
.crew-pics{display:flex;flex-wrap:wrap;gap:1rem}.crew-pics figure{margin:0;min-width:0}.crew-pics img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff}
.crew-sig{object-fit:contain}
.crew-consent{white-space:pre-line;background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin:.5rem 0;font-size:.9rem;max-width:72ch}
.crew-sigbox{margin-top:.8rem;display:flex;flex-direction:column;gap:.4rem;max-width:620px}
.crew-sigbox canvas{width:100%;max-width:600px;height:auto;aspect-ratio:600/220;border:2px dashed var(--line);border-radius:10px;background:#fff;touch-action:none}
.crew-mhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem}
.crew-cal{display:flex;flex-direction:column}.crew-day{padding:.45rem 0;border-bottom:1px solid var(--line)}.crew-day:last-child{border:0}
.crew-dh{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}.crew-dh img{border-radius:5px;object-fit:cover;vertical-align:middle}
.crew-dform{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-top:.4rem}.crew-dform .fl{flex:1 1 110px}.crew-dform .crew-reason{flex:3 1 220px}
.crew-form .fields{margin-bottom:.8rem}.crew-edit{margin-top:.8rem}.crew-edit form{margin-top:.5rem}.crew-photo-f{margin-top:.6rem;flex-wrap:wrap}
.crew-photo-f input[type=file],.crew-form input[type=file]{max-width:100%}
.crew-code{white-space:nowrap}.crew-checks .crew-by{display:block}

/* R3: Attendance header actions, check-in geofence page, map picker, Settings check-in places, dashboard downloads, crash reports */
.att-acts,.dash-dl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.gf-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.gf-h h2{margin:0}
.gf-add{margin-top:.8rem;flex-wrap:wrap}
.gf-add input[name=name]{flex:1 1 14rem}
.gf-ll{flex:1 1 12rem}
.gf-rad{width:6rem}
.gf-llrow{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.gf-llrow input{flex:1 1 11rem;min-width:0}
.gf-uform{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.gf-uform .fl{flex:1 1 14rem}
.geopick-card{width:min(760px,calc(100vw - 2rem));max-width:none}
.geopick-map{height:min(60vh,460px);width:100%;border-radius:8px;border:1px solid var(--line)}
.ce-row{border-bottom:1px solid var(--line);padding:.5rem 0}
.ce-row summary{cursor:pointer;list-style:revert}
.ce-msg{margin:.2rem 0 0;overflow-wrap:anywhere}
.ce-stack{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem;max-height:24rem;overflow:auto;background:var(--surf2);padding:.5rem;border-radius:6px}
.gf-places .trow.th>span{text-align:left}.gf-places .trow>div{justify-content:flex-start;text-align:left}
/* R4: selfies + places per duty (Attendance page, person page) */
.att-evrow{grid-column:1/-1}
.att-ev{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center;margin-top:.25rem}
.att-sf{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--mute);font-size:.7rem;line-height:1.1}
.att-sf img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.att-pl{color:var(--mute)}.att-far{color:var(--bad,#b91c1c);font-weight:600}
/* ---------------------------------------------------------------- V2.1 vehicles (VA): sub-nav, refill steps + photos, QR box */
.veh21-nav{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0 0 .7rem}.veh21-nav a{font-weight:600}.veh21-nav a[aria-current]{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pri)}
.rf-steplist{display:flex;flex-wrap:wrap;gap:.4rem .9rem;list-style:none;padding:0;margin:0 0 .8rem}.rf-steplist li{color:var(--mute)}.rf-steplist li.done{color:var(--ok)}
.rf-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}.rf-ph{margin:0;min-width:0}.rf-ph img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block}
.rf-ph figcaption{margin-top:.25rem;overflow-wrap:anywhere}
.rf-qrbox{display:flex;justify-content:center;align-items:flex-start}.rf-qrbox img{max-width:100%;height:auto;background:#fff;padding:6px;border-radius:8px}
#veh-doc-badges{margin:0 0 .8rem}
.rep-recon{flex-basis:100%;margin:0;color:var(--mute)}.rep-recon b{color:var(--ink)}

/* ---------------------------------------------------------------- W2 People + Attendance */
.pn-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.pn-opt{display:flex;flex-direction:column;gap:.3rem;color:inherit}.pn-opt:hover{text-decoration:none;background:var(--surf2)}
.ul-worker .ul-status .rv-acts{margin-top:.3rem}
.ul-row.is-pending{box-shadow:inset 3px 0 0 var(--warn,#b7791f);padding-left:.5rem}
.rv-acts{display:flex;flex-wrap:wrap;gap:.35rem;align-items:flex-start}
.rv-rej>summary,.rv-ask>summary{list-style:none;cursor:pointer;display:inline-flex}.rv-rej>summary::-webkit-details-marker,.rv-ask>summary::-webkit-details-marker{display:none}
.rv-rej[open],.rv-ask[open]{flex-basis:100%}.rv-rej .inline-form,.rv-ask .inline-form{margin-top:.35rem}.rv-rej input,.rv-ask input,.rv-ask select{min-width:0;max-width:100%}
.rv-w{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line)}.rv-wt{flex:1 1 180px;min-width:0}
.att-rnav{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0 0 .8rem}
.att-mhead{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.att-mwrap{overflow-x:auto;padding:.4rem}.att-grid{border-collapse:collapse;font-size:.8rem;width:100%}
.att-grid th,.att-grid td{padding:.25rem .2rem;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.att-grid .att-n{position:sticky;left:0;z-index:1;background:var(--surf);text-align:left;min-width:128px;max-width:170px;white-space:normal;font-weight:600;padding-right:.5rem}
.att-grid td.num{font-variant-numeric:tabular-nums}.att-grid .wknd{background:var(--surf2)}
.att-c{display:inline-block;min-width:1.3em;border-radius:4px;font-weight:700;text-align:center}
.att-c.t-full{color:var(--ok)}.att-c.t-half{color:var(--warn,#b7791f)}.att-c.t-absent{color:var(--bad)}.att-c.t-off,.att-c.t-open{color:var(--mute)}
.sa-sec{margin:1rem 0}.sa-cdep{border-top:1px solid var(--line);padding:.6rem 0}.sa-team{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;list-style:none}
.sa-cons{margin:.4rem 0}.crew-tkl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem}
.sa-cdep .crew-geo-f{flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:.35rem;width:auto}.sa-cdep .crew-geo-f select{width:auto;min-width:7rem}.sa-cdep .crew-geo-f input[type=number]{width:5.5rem}
.sa-team .tm-nm{flex:1 1 220px;min-width:0}
@media(min-width:861px){.ufilters:has(#uf-type){grid-template-columns:minmax(0,1fr) 170px 170px 170px}}
@media(min-width:640px) and (max-width:699.98px){.snav-btn,.snav-a{padding:.45rem .3rem}}  /* R5's Reports item: six nav items must still fit at 640 px */
/* W2b Users -> Teams + Attendance: depot tabs, team cards, summary row, side drawer, Add user wizard */
.dtabs{display:flex;gap:.3rem;overflow-x:auto;margin:0 0 .9rem;padding-bottom:.2rem;scrollbar-width:thin}
.dtabs a{flex:none;display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.3rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--surf);color:var(--mute);font-weight:600;font-size:.88rem}
.dtabs a:hover{text-decoration:none;color:var(--ink)}.dtabs a.on{background:var(--pri-soft);border-color:var(--pri);color:var(--pri)}
.dt-n{font-size:.75rem;font-weight:700;background:var(--surf2);border-radius:999px;padding:0 .4rem;color:var(--mute)}
.tcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-items:start}
.tgroup{margin-bottom:1.1rem}.tg-h{margin:0 0 .5rem}
.tcard{min-width:0}.tcard[open]{grid-column:span 2}
.tcard>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:.35rem}.tcard>summary::-webkit-details-marker{display:none}
.tcard>summary:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
.tc-s .tc-h{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.tc-s h3{margin:0;font-size:.98rem;overflow-wrap:anywhere}
.tc-none{border-style:dashed}.tc-over{outline:2px dashed var(--pri);outline-offset:2px;background:var(--pri-soft)}
.tc-avs{display:flex;flex-wrap:wrap;gap:.2rem}.tc-avs .av-sm{width:26px;height:26px}
.av-i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--pri-soft);color:var(--pri);font-size:.68rem;font-weight:700}.av-more{background:var(--surf2);color:var(--mute)}
.tc-counts b{font-weight:700}.tcard ul.tm-list{margin-top:.6rem}.tm[draggable=true]{cursor:grab}.tm-drag{opacity:.45}.tm-w .rv-acts{display:inline-flex;flex-wrap:wrap;gap:.3rem;margin-left:.3rem}
.tc-tk{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line)}.tc-tk h4{margin:0 0 .3rem}.tk-list{list-style:none;margin:0 0 .4rem;padding:0;font-size:.86rem}.tk-list li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.15rem 0}
.tc-cover{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-end;margin-top:.4rem}.tc-cover .fl{min-width:130px}.tk-add select,.tc-cover select{min-width:0;max-width:100%}
.tm-err{margin-bottom:.6rem}
@media(max-width:620px){.tcard[open]{grid-column:auto}}
.att-pf{align-items:flex-end}.att-period{margin:0;padding:0;border:0}.att-period .seg{margin:0}.att-period .seg label{padding:.45rem .8rem}.att-q{min-width:180px}
.att-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin:0 0 .9rem}
.att-t{display:flex;flex-direction:column;gap:.05rem;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;color:var(--ink);min-width:0}.att-t:hover{text-decoration:none}
.att-t b{font-size:1.25rem;line-height:1.2}.att-t span{font-size:.78rem;color:var(--mute)}.att-t.is-bad b{color:var(--bad)}.att-t.is-warn b{color:var(--warn)}
@media(max-width:560px){.att-sum{grid-template-columns:repeat(3,minmax(0,1fr))}}
.att-viewsw{margin:-.4rem 0 .7rem}.att-viewsw a[aria-current]{font-weight:700;color:var(--ink)}
.atcard{display:flex;flex-direction:column;gap:.25rem;margin:0;padding:.85rem;color:var(--ink);min-width:0}.atcard:hover{text-decoration:none;border-color:var(--pri)}.atcard:focus-visible{outline:2px solid var(--pri);outline-offset:2px}.atcard.is-none{border-style:dashed}
.ac-h{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.ac-h b{overflow-wrap:anywhere}.ac-n{display:flex;gap:.7rem;font-weight:700}.ac-ok{color:var(--ok)}.ac-bad{color:var(--bad)}.ac-half{color:var(--warn)}.ac-leave{color:var(--mute)}
.att-back{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:90}.att-back[hidden],.att-drawer[hidden]{display:none}
.att-drawer{position:fixed;top:0;right:0;bottom:0;width:min(920px,100%);background:var(--surf);border-left:1px solid var(--line);box-shadow:var(--sh);z-index:91;overflow-y:auto;padding:1rem 1.1rem 2rem;outline:none}
body.att-noscroll{overflow:hidden}
.ad-head{display:flex;justify-content:space-between;gap:.7rem;align-items:flex-start;margin-bottom:.6rem}.ad-head h2{margin:0}.ad-x{flex:none;min-width:44px;min-height:44px}.ad-acts{margin-bottom:.7rem}
.ad-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}.ad-t{border-collapse:collapse;width:100%;min-width:760px;font-size:.86rem}
.ad-t th,.ad-t td{padding:.45rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.ad-t thead th{font-size:.76rem;color:var(--mute);font-weight:600;background:var(--surf2)}.ad-t tbody th{font-weight:500}
.ad-t tbody tr:last-child>*{border-bottom:0}.ad-who{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center}.ad-ev .att-ev{margin:0}
.ad-p{border-bottom:1px solid var(--line);padding:.45rem 0}.ad-p>summary{cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;align-items:center;min-height:44px}.ad-pn{display:inline-flex;gap:.55rem;font-weight:600}
.ua-step[hidden]{display:none}.ua-step h2{outline:none}.ua .seg{margin-bottom:.4rem}.ua-take{margin:.7rem 0 .2rem}.ua-opt{margin:.7rem 0}.ua-opt>summary{list-style:none}.ua-opt>summary::-webkit-details-marker{display:none}
.ua-cam video,.ua-cam img{display:block;width:100%;max-width:320px;border-radius:10px;margin-bottom:.4rem;background:var(--surf2)}.ua-cam video[hidden],.ua-cam img[hidden]{display:none}.ua-file{margin-top:.4rem}
.att-period .seg{position:relative}.att-period .seg input,.ua .seg input{width:1px;height:1px;min-width:0;padding:0;margin:0;left:0;top:0}
.tm-move{display:inline-flex;gap:.3rem;align-items:center}.tm-move select{width:auto;max-width:150px;min-height:32px;padding:.15rem .4rem;font-size:.82rem}.tm-js .tm-move button{display:none}.tm-acts{display:inline-flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-left:auto}.tm-acts .btn.sm{min-height:32px}
.att-pf .att-period{grid-column:1/-1;flex:1 0 100%;width:100%}.ad-t td.mono{white-space:nowrap}
.ua label.lt{flex-direction:row;gap:.25rem;display:inline-flex}.ua .seg{display:inline-flex;width:max-content;max-width:100%}.ua fieldset.f{margin:0;padding:0;border:0}
.tc-new>summary{cursor:pointer;font-weight:600;color:var(--pri);min-height:32px;display:flex;align-items:center}.tc-new .tc-forms{margin-top:.5rem}

/* N1: Enable sound, urgent bar, driver search rows */
.snd-btn{position:fixed;left:16px;bottom:16px;z-index:40;white-space:nowrap;box-shadow:var(--sh)}
.urgent-bar{background:var(--badbg);color:var(--bad);border-bottom:1px solid var(--bad);padding:.45rem .9rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.drv-row{padding:.3rem 0;border-bottom:1px solid var(--line)}.msg-unread{font-weight:500}
.push-row.sw-row{justify-content:flex-start;gap:.35rem}.push-row.sw-row+.push-row.sw-row{border-top:0;margin-top:0}
/* R7 Vehicles filter chips */
.vf{display:grid;gap:.45rem}
.vf-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.vf-l{font-size:.78rem;color:var(--mute);min-width:3.4rem}
.vf-chip{display:inline-flex;cursor:pointer}
.vf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.vf-chip span{padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem}
.vf-chip input:checked+span{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.vf-chip input:focus-visible+span{outline:2px solid var(--pri);outline-offset:1px}
.vf input[type=search]{max-width:220px}
.rf-void td,.rf-void th{text-decoration:line-through}
.rf-void .chip{text-decoration:none}
/* P-A2 People (React pilot: /people, /people/add, /person/{id}); new classes only, the base style is unchanged */
.pp-bar{display:grid;grid-template-columns:minmax(0,2fr) repeat(6,minmax(0,1fr));gap:.6rem;margin-bottom:.8rem}
.pp-bar label{display:block}.pp-bar input,.pp-bar select{height:44px;width:100%}
.pp-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .8rem}
.ul-row.pp-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr)}
.ul-row.pp-row.is-off{opacity:.7}
.pp-foot{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}
.ptabs{display:flex;flex-wrap:wrap;margin:0 0 1rem;overflow-x:auto}
.ppane[hidden]{display:none}
.pt-list{list-style:none;margin:0 0 .8rem;padding:0}
.pt-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) auto;gap:.6rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line)}
.pt-rights{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.ok-text{color:var(--ok,#1f7a3a)}
.pp-steps{display:flex;flex-wrap:wrap;gap:.3rem .9rem;list-style:none;padding:0;margin:0 0 .6rem;font-size:.8rem;color:var(--mute)}
.pp-steps li.on{color:var(--ink);font-weight:600}.pp-steps li.done::before{content:"✓ "}
.pp-choice{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.pp-choice .btn{height:auto;padding:1rem;text-align:left;white-space:normal;line-height:1.35}
.pp-wiz fieldset label.inline,.pp-wiz #pw-takes label{display:flex;gap:.5rem;align-items:center;margin:.35rem 0}
.pp-wiz .fl{display:grid;gap:.25rem;margin:.5rem 0}.pp-wiz .fl input,.pp-wiz .fl select{height:44px}
.pp-nav{margin-top:1rem;justify-content:space-between}
@media(max-width:860px){.pp-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pp-bar .uf-q{grid-column:1/-1}
  .ul-row.pp-row{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .6rem;padding:.75rem 0}.ul-row.pp-row.ul-head{display:none}
  .pt-item{grid-template-columns:1fr}.pp-choice{grid-template-columns:1fr}}
/* P-B check-in places (web/people/src/Places.tsx, PersonLocations.tsx) */
.pl-h{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;justify-content:space-between}
.pl-list{list-style:none;margin:0 0 .8rem;padding:0}
.pl-item{padding:.6rem 0;border-top:1px solid var(--line)}
.pl-item.pl-old{opacity:.7}
.pl-top{display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:baseline;min-width:0}
.pl-top a{overflow-wrap:anywhere}
.pl-form{display:grid;gap:.5rem;margin:.6rem 0;padding:.7rem;border:1px solid var(--line);border-radius:10px;max-width:560px}
.pl-form .fl{display:grid;gap:.25rem}.pl-form .fl input{height:44px;min-width:0;width:100%}
.pl-rad input{max-width:10rem}
.pl-map{height:300px;border-radius:10px;border:1px solid var(--line)}
.pl-log{list-style:none;margin:.4rem 0;padding:0}
.pl-log li{padding:.35rem 0;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline}
.pl-log li.pl-undone{opacity:.6}
.pl-range{display:flex;gap:.6rem;flex-wrap:wrap}.pl-range .fl{display:grid;gap:.15rem}
.pl-changes{margin-top:.6rem}
.tc-places{margin:.4rem 0 0}
@media(max-width:860px){.tbl.pl-pts .trow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.tbl.pl-pts .trow.th{display:none}}

/* UX-1: the People area in one place (tabs, compact team cards, side panel, gear) */
.top-area{display:none}
@media(max-width:767px){.top-area{display:inline;font-weight:700;font-size:.95rem;margin-left:.1rem;color:var(--ink);white-space:nowrap}}
.hub-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin-bottom:.75rem}
.hub-tabs{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid var(--line);flex:1 1 auto;min-width:0}
.hub-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:.55rem .7rem;font:inherit;font-weight:600;color:var(--mute);cursor:pointer;min-height:44px}
.hub-tab[aria-selected=true]{color:var(--pri);border-bottom-color:var(--pri)}
.hub-acts{display:flex;gap:.4rem;flex-wrap:wrap}
.hub-gear{min-width:44px;font-size:1.05rem}
.hub-badge{display:inline-block;margin-left:.3rem;padding:0 .4rem;border-radius:999px;background:#E8590C;color:#fff;font-size:.72rem;font-weight:700;line-height:1.35rem}
.pp-chiprow{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.tb-card{padding:.55rem .75rem;margin-bottom:.45rem}
.tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .7rem}
.tb-name{appearance:none;border:0;background:none;padding:.2rem 0;font:inherit;font-weight:700;color:inherit;cursor:pointer;text-align:left;min-height:32px}
.tb-lead{color:#0B7285;font-weight:600}
.tb-sw{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem}
.tb-sw label{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--mute)}
.tb-sw select{font:inherit;font-size:.8rem;padding:.15rem .25rem;min-height:30px;max-width:120px}
.tb-line{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;font-size:.85rem;margin-top:.15rem}
.tb-place{appearance:none;border:0;background:none;padding:.15rem 0;font:inherit;color:var(--pri);cursor:pointer;text-decoration:underline;min-height:28px}
.tb-menu{position:absolute;z-index:40;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);min-width:260px;max-width:calc(100vw - 24px);max-height:320px;overflow:auto;padding:.25rem}
.tb-menu h4{margin:.4rem .5rem .15rem;font-size:.72rem;color:var(--mute);font-weight:700;text-transform:uppercase}
.tb-menu button{display:block;width:100%;appearance:none;border:0;background:none;text-align:left;padding:.4rem .5rem;font:inherit;font-size:.88rem;border-radius:6px;cursor:pointer;min-height:36px}
.tb-menu button:hover,.tb-menu button:focus-visible{background:var(--surf2)}
.tb-body{margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}
.tb-mem{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;padding:.2rem 0;font-size:.9rem}
.tb-mem select{font:inherit;font-size:.8rem;max-width:160px;min-height:30px}
.chip.orange{background:#FFE8CC;color:#B94A00;border-color:#FFD8A8}
:root:is([data-theme=dark],[data-theme=dim]) .chip.orange{background:#5C3200;color:#FFD8A8;border-color:#7A4400}
:root:is([data-theme=dark],[data-theme=dim]) .tb-lead{color:#66D9E8}
.tb-sect{margin:.55rem 0 .2rem;font-size:.82rem;color:var(--mute);font-weight:700}
.tb-grp{margin:.6rem 0 .25rem;font-size:.82rem;color:var(--mute);font-weight:700}
.sp-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:70}
.sp{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:var(--surf);box-shadow:var(--sh);z-index:71;display:flex;flex-direction:column}
.sp-h{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.sp-h h2{margin:0;font-size:1.05rem}
.sp-b{flex:1;overflow:auto;padding:.7rem .9rem}
.dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--surf);border-radius:var(--r);box-shadow:var(--sh);z-index:71;padding:.9rem}
.dlg h2{margin:0 0 .5rem;font-size:1.02rem}
.ap-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0}
.ap-p{border-bottom:1px solid var(--line);padding:.4rem 0}
.ap-sum{display:flex;flex-wrap:wrap;gap:.1rem .6rem;font-size:.82rem}
.ap-days{display:flex;flex-wrap:wrap;gap:3px;margin-top:.35rem}
.ap-d{min-width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--surf);font:inherit;font-size:.72rem;cursor:pointer;padding:0}
.ap-d.full{background:#D3F9D8}.ap-d.half{background:#FFF3BF}.ap-d.absent{background:#FFE3E3}.ap-d.off{background:var(--surf2)}.ap-d.rv{outline:2px solid #E8590C;outline-offset:-2px}
:root:is([data-theme=dark],[data-theme=dim]) .ap-d.full{background:#1B4332}:root:is([data-theme=dark],[data-theme=dim]) .ap-d.half{background:#5C4A00}:root:is([data-theme=dark],[data-theme=dim]) .ap-d.absent{background:#5C1A1A}
.ap-det{margin-top:.4rem;padding:.5rem;background:var(--surf2);border-radius:8px;font-size:.85rem}
.ap-det img{width:96px;height:96px;object-fit:cover;border-radius:6px}
.as-depot{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.as-depot b{flex:1 1 120px}
.rv-sec{margin-bottom:.8rem}
.rv-li{padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.rv-form{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.25rem}
.rv-form input{min-width:120px;flex:1 1 140px}
.wz-sig{width:100%;height:150px;border:1px solid var(--line);border-radius:8px;background:#fff;touch-action:none}
.wz-photo{max-width:180px;border-radius:8px;display:block;margin:.3rem 0}
@media(max-width:767px){.sp{width:100vw}.tb-sw{margin-left:0;width:100%}}
button.uchip{font-family:inherit}
.tb-body .inline-form{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.25rem 0}
.tb-body .inline-form select,.tb-body .inline-form input{width:auto;flex:1 1 170px;max-width:300px;min-height:34px;font-size:.88rem;padding:.2rem .4rem}
.tb-body .inline-form input[type=date]{flex:0 1 150px}
.tb-mem .tb-sw{flex-wrap:nowrap}
@media(max-width:767px){.tb-mem .tb-sw{flex-wrap:wrap}}
/* P2 photo link card */
.lp-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.lp-links{display:grid;gap:.5rem;margin:.6rem 0}
.lp-link{border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:.55rem .7rem;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;margin-top:.6rem}
.lp-ph{border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:.5rem;min-width:0}
.lp-ph img{width:100%;height:150px;object-fit:cover;border-radius:6px;display:block}
.lp-steps{display:grid;gap:.3rem;margin:.5rem 0}
.lp-out{width:100%;min-height:9rem;font:inherit}
.lp-pin{font-size:1.6rem;font-weight:700;letter-spacing:.2em}
.lp-log{overflow-wrap:anywhere}
/* PERM-1: per-person permissions */
.grant-rows{display:grid;gap:.5rem;margin:.6rem 0}
.grant-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.grant-row .grant-l{flex:1 1 16rem;min-width:0}
.grant-row select{max-width:100%}
.chip.grant-granted{background:var(--okbg);color:var(--ok)}
.chip.grant-revoked{background:var(--badbg);color:var(--bad)}
.chip.grant-default_no,.chip.grant-never{opacity:.65}
#pm-table th,#pm-table td,#pm-table .chip{white-space:nowrap}
/* UI-1: checkbox rows: box on the left, label on the same line, the whole row tappable (>= 44 px), even spacing */
label.ck{display:flex;flex-direction:row;align-items:center;gap:.65rem;min-height:44px;padding:.1rem .35rem;margin:0;border-radius:8px;cursor:pointer;font-weight:500;font-size:.92rem;color:var(--ink);line-height:1.3}
label.ck.small{font-size:.85rem}
@media(hover:hover){label.ck:hover{background:var(--surf2)}}
label.ck>input[type=checkbox],label.ck>input[type=radio]{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--pri);cursor:pointer}
label.ck:has(>input:disabled){cursor:default;opacity:.75}
.ck-list{display:grid;gap:2px;margin:.35rem 0}
.ck-list.cols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:1rem}
.lp-steps.ck-list{margin:.4rem 0 .7rem}
.lp-steps #pl-other{margin:0 0 .3rem 2.2rem;width:calc(100% - 2.2rem)}
.pp-wiz #pw-takes label.ck,.pp-wiz fieldset label.ck{margin:0}
label.ck.ck-cell{justify-content:center;padding:0}
.ck-narrow{display:none}
@media(max-width:860px){label.ck.ck-cell{justify-content:flex-start;padding:.1rem .35rem}.ck-narrow{display:inline}}
/* UI-1: attendance day chips: one size, the mark centred and readable */
.ap-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px;margin-top:.4rem}
.ap-d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;width:100%;height:46px;border-radius:8px;line-height:1}
.ap-d .ap-dn{font-size:.7rem;color:var(--mute)}
.ap-d .ap-dm{font-size:1.05rem;font-weight:700;min-height:1.05rem}
.ap-d.full .ap-dm{color:#2B8A3E}.ap-d.absent .ap-dm{color:#C92A2A}.ap-d.half .ap-dm{color:#A86A00}
:root:is([data-theme=dark],[data-theme=dim]) .ap-d.full .ap-dm{color:#8CE99A}:root:is([data-theme=dark],[data-theme=dim]) .ap-d.absent .ap-dm{color:#FFA8A8}:root:is([data-theme=dark],[data-theme=dim]) .ap-d.half .ap-dm{color:#FFE066}
/* UI-1: permissions card: label and its state on one line; Who can do what filters on one baseline */
.grant-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .6rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--line)}
.grant-row:first-child{border-top:0}
.grant-row select{grid-column:1/-1}
@media(min-width:861px){.grant-row{grid-template-columns:minmax(0,1fr) auto minmax(12rem,16rem)}.grant-row select{grid-column:auto}}
.pm-filter{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end}
.pm-filter label.inline{flex-direction:column;align-items:stretch;gap:.2rem}
.pm-filter select,.pm-filter .btn{height:42px;min-height:42px}
/* UI-1: bell rows: mark one read without opening it */
.bell-i{display:flex;align-items:flex-start;gap:.3rem}
.bell-i a{flex:1 1 auto;min-width:0}
.bell-rd{flex:0 0 auto;width:32px;height:32px;margin-top:.3rem;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--mute);cursor:pointer;font:inherit;font-size:.85rem;line-height:1}
.bell-rd:hover{color:var(--pri);border-color:var(--pri)}
.msg-actions{display:flex;justify-content:flex-end;margin-bottom:.5rem}
/* UI-1 (owner 11 Nov): People hub tabs stay on ONE line; on a narrow screen they scroll sideways, never wrap */
.hub-tabs{position:relative;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hub-tab{flex:0 0 auto;white-space:nowrap}
/* LIVE-1 live toasts: fixed overlay (never moves the page), colour per type */
:root{--lt-amber:#D97706;--lt-amberbg:#FFFBEB;--lt-red:#DC2626;--lt-redbg:#FEF2F2;--lt-blue:#2563EB;--lt-bluebg:#EFF6FF;--lt-green:#059669;--lt-greenbg:#ECFDF5;--lt-purple:#7C3AED;--lt-purplebg:#F5F3FF;--lt-grey:#64748B;--lt-greybg:#F8FAFC}
html:is([data-theme=dark],[data-theme=dim]){--lt-amber:#FBBF24;--lt-amberbg:#2A1F08;--lt-red:#F87171;--lt-redbg:#2E1214;--lt-blue:#60A5FA;--lt-bluebg:#0F1D38;--lt-green:#34D399;--lt-greenbg:#0B2A20;--lt-purple:#A78BFA;--lt-purplebg:#1F1736;--lt-grey:#94A3B8;--lt-greybg:#1A2230}
.lvt-stack{position:fixed;top:64px;right:12px;width:340px;max-width:calc(100vw - 24px);z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.lvt-stack[hidden]{display:none}
.lvt-stack.open{max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain}
.lvt-stack>*{pointer-events:auto}
.lvt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 32px;background:var(--surf);color:var(--ink);border:1px solid var(--line);border-left:6px solid var(--lt-c);border-radius:10px;box-shadow:var(--sh),0 8px 24px rgba(15,23,42,.18);flex:0 0 auto}
.lvt-amber{--lt-c:var(--lt-amber);background:var(--lt-amberbg)}.lvt-red{--lt-c:var(--lt-red);background:var(--lt-redbg)}.lvt-blue{--lt-c:var(--lt-blue);background:var(--lt-bluebg)}
.lvt-green{--lt-c:var(--lt-green);background:var(--lt-greenbg)}.lvt-purple{--lt-c:var(--lt-purple);background:var(--lt-purplebg)}.lvt-grey{--lt-c:var(--lt-grey);background:var(--lt-greybg)}
.chip.purple{background:#F5F3FF;color:#6D28D9}html:is([data-theme=dark],[data-theme=dim]) .chip.purple{background:rgba(167,139,250,.14);color:#C4B5FD}
.lvt-main.lvt-nolink{cursor:pointer}.lvt-main.lvt-nolink:hover .lvt-t{text-decoration:none}
.lvt-main{display:flex;flex-direction:column;gap:2px;padding:8px 4px 8px 10px;color:inherit;text-decoration:none;min-width:0}
.lvt-main:hover .lvt-t{text-decoration:underline}
.lvt-l{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--lt-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvt-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvt-s{font-size:.85rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lvt-s b{color:var(--ink)}.lvt-skip{color:var(--lt-c)}
.lvt-x{width:32px;height:32px;margin:4px 2px 0 0;border:0;background:none;color:var(--mute);font-size:1rem;cursor:pointer;border-radius:8px}.lvt-x:hover{background:var(--line);color:var(--ink)}
.lvt-ths{grid-column:1/-1;display:flex;gap:6px;padding:0 10px 8px;height:64px}
.lvt-th{display:block;width:56px;height:56px;flex:0 0 56px;border-radius:6px;overflow:hidden;background:var(--line)}.lvt-th img{width:56px;height:56px;object-fit:cover;display:block}
.lvt-bar{display:flex;gap:8px;justify-content:flex-end}
.lvt-more,.lvt-all{font:inherit;font-size:.8rem;font-weight:700;border:1px solid var(--line);background:var(--surf);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer;box-shadow:var(--sh)}
@media (max-width:640px){.lvt-stack{top:60px;left:8px;right:8px;width:auto;max-width:none}}
/* LIVE-1 reading page */
.rd-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem}
@media (max-width:820px){.rd-grid{grid-template-columns:minmax(0,1fr)}}
.rd-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--surf2);border-radius:8px;display:block}
.rd-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1rem;margin:0}.rd-dl dt{color:var(--mute);font-size:.85rem}.rd-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.rd-big{font-size:1.5rem;font-weight:800}
.veh-grid tr.veh-dep th{background:var(--surf2);text-align:left;font-size:.9rem;padding:.45rem .6rem;position:sticky;left:0}.veh-who{color:var(--mute);white-space:nowrap}.vc-r{color:inherit;text-decoration:none;display:block}.vc-r:hover{text-decoration:underline}
.veh-dep-h{list-style:none;margin:.6rem 0 .1rem;border:0}
.att-rm{margin:.35rem 0 0 .2rem;padding:.35rem .6rem;border-left:3px solid var(--line);background:var(--surf2);border-radius:6px}.att-rm-t{white-space:pre-line}.att-rm-r{margin-top:.2rem}.att-rm-e,.att-rm-h{display:inline-block;margin-left:.4rem}
.al-card{overflow-x:auto;padding:0}.al-t{width:100%;border-collapse:collapse;font-size:.92rem}.al-t th,.al-t td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.al-t th{font-size:.75rem;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* THEME-1: print stays light whatever the theme */
@media print{html[data-theme]{--pri:#1E4FD8;--pri-ink:#fff;--pri-soft:#E8EEFD;--acc:#F59E0B;--bg:#F4F6FA;--surf:#fff;--surf2:#F8FAFC;--ink:#0F172A;--mute:#58687D;--line:#E2E8F0;
--ok:#15803D;--okbg:#DCFCE7;--warn:#B45309;--warnbg:#FEF3C7;--bad:#B91C1C;--badbg:#FEE2E2;--infobg:#E2E8F0;--r:12px;--sh:0 1px 2px rgba(15,23,42,.05),0 6px 18px rgba(15,23,42,.06);color-scheme:light}}
/* TASK-1 (VA): task ageing (level 1 light red, 2 red, 3 dark red) + the timeline */
.task-row.age-1{box-shadow:inset 4px 0 0 #FCA5A5}.task-row.age-2{box-shadow:inset 4px 0 0 #EF4444}.task-row.age-3{box-shadow:inset 4px 0 0 #991B1B}
.chip.age-1{background:#FEE2E2;color:#991B1B}.chip.age-2{background:#FCA5A5;color:#7F1D1D}.chip.age-3{background:#991B1B;color:#fff}
html[data-theme=dark] .chip.age-1{background:rgba(248,113,113,.15);color:#FCA5A5}html[data-theme=dark] .chip.age-2{background:rgba(239,68,68,.35);color:#FEE2E2}
.task-tl{list-style:none;margin:0;padding:0}.task-tl>li{border-left:2px solid var(--line);padding:.3rem 0 .7rem .8rem;margin-left:.3rem;position:relative}
.task-tl>li::before{content:"";position:absolute;left:-6px;top:.55rem;width:10px;height:10px;border-radius:50%;background:var(--mute)}
.task-tl>li.k-sent::before,.task-tl>li.k-received::before{background:var(--pri)}.task-tl>li.k-raise_issue::before{background:var(--bad)}.task-tl>li.k-done::before{background:var(--ok)}
.task-photos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}.task-photos img{width:88px;height:88px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.task-people li{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.2rem 0}
/* PERM-2: every right a switch, grouped */
.grant-g{border:1px solid var(--line);border-radius:10px;padding:.4rem .8rem .6rem;margin:0 0 .7rem;min-width:0}.grant-g legend{font-weight:700;padding:0 .3rem}
.grant-g .grant-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.1rem .9rem}
.grant-g .grant-row{display:flex;flex-direction:row;align-items:center;gap:.5rem;border-top:0;padding:0;font-weight:500;color:var(--ink);min-height:36px}.grant-g .grant-row.is-flipped{font-weight:700}
/* FIXES-13 (c): Attendance header in three rows: A = period · 📅 · search · Teams|List · Export ▾; B = summary cards (= filters); C = depot chips + Sort */
.att-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0 0 .6rem}.att-bar .ap-chips{margin:0}
.att-cal{display:inline-flex;flex-direction:row;align-items:center;gap:.3rem;font-weight:600;color:var(--mute);flex:none}.att-cal>span{display:inline-block;width:1.25em;text-align:center;flex:none}.att-cal input{width:9.75rem;min-width:0;flex:none}.att-cal input[type=month]{width:9rem}   /* fixed sizes: the row never moves when the value or the emoji font arrives */
.att-qi{flex:1 1 11rem;min-width:8rem;max-width:18rem}
.xmenu{position:relative}.xmenu>summary{list-style:none;cursor:pointer}.xmenu>summary::-webkit-details-marker{display:none}
.xmenu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;min-width:11rem;background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);padding:.3rem}
.xmenu-pop a{padding:.55rem .7rem;border-radius:8px;color:var(--ink);font-weight:600;white-space:nowrap}.xmenu-pop a:hover{background:var(--surf2);text-decoration:none}
@media(max-width:560px){.xmenu-pop{right:auto;left:0}}
button.att-t{font:inherit;text-align:left;cursor:pointer}button.att-tb:hover{border-color:var(--pri)}.att-t.on{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri);background:var(--pri-soft)}
.att-row3{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;margin:0 0 .6rem}.att-row3 .ap-chips{margin:0}
.att-row3{flex-wrap:nowrap}.att-row3>.ap-chips{flex:1 1 auto;min-width:0}
/* FIXES-13 (d): 💬 Remark on each day row of the person page */
.att-rmadd{display:inline-block;margin-left:.3rem}.att-rmadd>summary{list-style:none;cursor:pointer;display:inline}.att-rmadd>summary::-webkit-details-marker{display:none}
.att-rmadd[open]{display:block;margin:.35rem 0 0}.att-rmform{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.att-rmform input[name=text]{flex:1 1 14rem;min-width:0}
@media(max-width:560px){#att-row3 .ap-chips{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}#att-row3 .uchip{flex:none}#att-row3{flex-wrap:wrap}}   /* FIXES-13: depot chips = one sideways-scrolling line on a phone */
/* G-round fix (owner 14 Nov): People → Attendance List: sortable headers + Sort / Clear */
/* owner 14 Nov 12:32: the shared Sort + Clear (ui.tsx SortBar): on the chip row, right, centred, chip height (40 px); a full line under the chips on a phone */
.sortbar{display:flex;flex-direction:row;align-items:center;gap:.5rem;flex:none;margin-left:auto;min-height:40px}
.sortbar>label{display:inline-flex;flex-direction:row;align-items:center;margin:0;font-weight:600;font-size:.85rem;color:var(--mute)}
.sortbar select{width:auto;height:40px;min-height:40px;padding-top:0;padding-bottom:0;border-radius:999px}
.sortbar .sb-clear{display:inline-flex;align-items:center;min-height:40px;padding:0 .25rem;white-space:nowrap;font-size:.88rem}
@media(max-width:560px){.sortbar{flex:1 1 100%;margin-left:0}.sortbar select{flex:1 1 auto;min-width:0}}
.al-t th{padding:0}.al-sort{all:unset;box-sizing:border-box;display:block;width:100%;padding:.45rem .6rem;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;white-space:nowrap}
.al-sort:hover{color:var(--ink)}.al-sort:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}.al-t th[aria-sort="ascending"],.al-t th[aria-sort="descending"]{color:var(--ink)}
/* ATT-MARK: "Mark present" in the Attendance List (and person pages) */
.al-t th.al-act,.al-t td.al-act{width:9.5rem;min-width:9.5rem;text-align:right}.al-t td.al-act{padding-top:.25rem;padding-bottom:.25rem}.al-mark{white-space:nowrap}
.al-t tbody td{height:2.75rem}.al-markrow td{background:var(--surf2);white-space:normal}
.mark-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .8rem}.mark-form>b{flex:1 1 100%}.mark-form label{flex:0 0 auto}.mark-form .mf-why{flex:1 1 14rem}
.mark-form input,.mark-form select{min-height:2.4rem}.mark-form .mf-btns{display:flex;gap:.4rem;align-items:center}
.mark-wrap{margin:.2rem 0 .8rem}.mark-pp>summary{list-style:none;display:inline-flex}.mark-pp>summary::-webkit-details-marker{display:none}.mark-pp[open]>summary{margin-bottom:.5rem}
.mark-pp .mark-form{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:.75rem}.mark-done{display:inline-block;margin:.3rem 0 0}