:root{
  --bg:#f2f6ec; --surface:#ffffff; --surface2:#e9f0e0; --ink:#1b2c1f; --muted:#556658; --line:#d3ddc7;
  --hdr:#2d5431; --hdr-ink:#f4f9ee;
  --brand:#336a33; --brand-ink:#ffffff; --brand-soft:#dfeccf;
  --lime:#93ac13; --sun:#ecb701; --sun-soft:#fbf0bd; --sun-ink:#5a4600;
  --info:#395884; --info-soft:#dfe7f3;
  --bad:#b3372c; --bad-soft:#f8dedb;
  --wa:#178a49; --wa-ink:#ffffff; --focus:#395884;
  --shadow:0 1px 2px rgba(35,65,59,.08),0 8px 24px rgba(35,65,59,.07);
  --f-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1a12; --surface:#152519; --surface2:#1c3222; --ink:#e8f1e1; --muted:#9db29f; --line:#2a4331;
    --hdr:#12261a; --hdr-ink:#eaf3e2;
    --brand:#7dbb55; --brand-ink:#0d1a10; --brand-soft:#23402a;
    --lime:#b3cc3a; --sun:#f1c21f; --sun-soft:#3a3210; --sun-ink:#f6dc7b;
    --info:#8fb0e0; --info-soft:#1d2c44;
    --bad:#f08276; --bad-soft:#3c1f1c;
    --wa:#2fd06f; --wa-ink:#062412; --focus:#f1c21f;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1a12; --surface:#152519; --surface2:#1c3222; --ink:#e8f1e1; --muted:#9db29f; --line:#2a4331;
  --hdr:#12261a; --hdr-ink:#eaf3e2;
  --brand:#7dbb55; --brand-ink:#0d1a10; --brand-soft:#23402a;
  --lime:#b3cc3a; --sun:#f1c21f; --sun-soft:#3a3210; --sun-ink:#f6dc7b;
  --info:#8fb0e0; --info-soft:#1d2c44;
  --bad:#f08276; --bad-soft:#3c1f1c;
  --wa:#2fd06f; --wa-ink:#062412; --focus:#f1c21f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--f-body);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:18px;height:18px}
.num{font-variant-numeric:tabular-nums}

/* header */
.top{background:var(--hdr);color:var(--hdr-ink);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1080px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;flex:none;display:block}
.brand{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:1 1 auto}
.brand-name{font:700 20px/1.1 var(--f-display);letter-spacing:-.01em}
.brand-sub{font-size:13px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:var(--hdr-ink);border-radius:10px;padding:0 12px;min-height:44px;max-width:170px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.15}
.acct b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct span{font-size:12px;opacity:.8}

/* nav */
.tabs{display:flex;gap:4px}
.tab{background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;color:inherit}
.tab .badge{background:var(--bad);color:#fff;font:700 11px/1 var(--f-body);border-radius:99px;padding:3px 6px;min-width:18px;text-align:center}
.tabs.mob{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:20;color:var(--muted)}
.tabs.mob .tab{flex:1;flex-direction:column;gap:2px;font-size:12px;font-weight:600;padding:6px 2px;border-radius:12px;min-height:56px}
.tabs.mob .tab[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
.tabs.mob .tab .badge{position:absolute;top:2px;left:calc(50% + 6px)}
.tabs.desk{display:none}
@media (min-width:860px){
  body{padding-bottom:40px}
  .tabs.mob{display:none}
  .tabs.desk{display:flex;margin-right:8px}
  .tabs.desk .tab{padding:9px 12px;border-radius:10px;font-weight:600;color:rgba(255,255,255,.82);min-height:44px}
  .tabs.desk .tab[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff}
  .brand{flex:none}
  .tabs.desk{margin-left:auto}
}

/* layout */
main{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:18px 8px}
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.page-h h1{font-size:28px;line-height:1.1}
.page-h p{margin:2px 0 0;color:var(--muted)}
.grid2{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:860px){.grid2{grid-template-columns:1.5fr 1fr}}
.stack{display:flex;flex-direction:column;gap:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.panel>h2,.panel>.panel-h{padding:14px 16px 8px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel h2{font-size:18px}
.rows{list-style:none;margin:0;padding:0}
.rows>li{padding:12px 16px;border-top:1px solid var(--line)}
.rows>li:first-child{border-top:0}
.empty{padding:16px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--surface2)}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand);filter:brightness(1.08)}
.btn-wa{background:var(--wa);color:var(--wa-ink);border-color:var(--wa)}
.btn-wa:hover{background:var(--wa);filter:brightness(1.08)}
.btn-sm{min-height:38px;padding:0 12px;font-size:14px}
.btn-quiet{border-color:transparent;background:transparent;color:var(--brand)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:600px){.page-h>.actions{width:100%}.page-h>.actions .btn{flex:1 1 auto}}

/* status */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill-ok{background:var(--brand-soft);color:var(--brand)}
.pill-soon{background:var(--sun-soft);color:var(--sun-ink)}
.pill-late,.pill-down{background:var(--bad-soft);color:var(--bad)}
.pill-info{background:var(--info-soft);color:var(--info)}
.t-ok{color:var(--brand)}.t-soon{color:var(--sun-ink)}.t-late{color:var(--bad)}
.bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:99px;background:var(--brand)}
.bar.soon>span{background:var(--sun)}.bar.late>span{background:var(--bad)}

/* counters */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.counter{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.counter b{font:700 34px/1 var(--f-display);font-variant-numeric:tabular-nums}
.counter span{font-size:13px;color:var(--muted);font-weight:600}
.counter.c-late b{color:var(--bad)}.counter.c-soon b{color:var(--sun-ink)}.counter.c-down b{color:var(--info)}
.counter.zero b{color:var(--muted)}

/* task rows */
.trow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.trow .who-m{font-size:13px;color:var(--muted);font-weight:600}
.trow .what{font-weight:700}
.trow .when{font-size:14px;font-weight:600}
.trow .bar{grid-column:1/-1;margin-top:4px}
.tr2{grid-template-areas:"tl btn" "when btn" "bar bar";column-gap:12px;row-gap:2px}
.tr2 .tl{grid-area:tl}.tr2 .when{grid-area:when}.tr2 .tb{grid-area:btn}.tr2 .bar{grid-area:bar}

/* machine cards */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:0 14px;min-height:40px;cursor:pointer;font-weight:600}
.chip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.mgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.mopen{all:unset;box-sizing:border-box;cursor:pointer;padding:14px 16px 10px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center}
.mopen:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:14px}
.mglyph{grid-column:1;grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.mname{grid-column:2;grid-row:1;min-width:0;font:700 18px/1.15 var(--f-display)}
.msub{grid-column:2;grid-row:2;font-size:13px;color:var(--muted)}
.mhours{grid-column:3;grid-row:1/3;text-align:right;font:700 22px/1 var(--f-display)}
.mhours em{font:600 13px var(--f-body);font-style:normal;color:var(--muted);margin-left:2px}
.mbody{padding:0 16px 12px;display:flex;flex-direction:column;gap:8px}
.mnext{font-size:14px}
.mfoot{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line);margin-top:auto}

/* detail */
.back{margin-bottom:10px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px;padding:4px 16px 16px}
.meta dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.meta dd{margin:0;font-weight:600}
.bigcount{font:700 40px/1 var(--f-display)}
.bigcount em{font:600 16px var(--f-body);font-style:normal;color:var(--muted);margin-left:4px}

/* issues & logs */
.urg{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.u-haute{background:var(--bad)}.u-moyenne{background:var(--sun)}.u-basse{background:var(--info)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:0 12px;min-height:38px;cursor:pointer;font-size:14px;font-weight:600;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.irow{display:flex;flex-direction:column;gap:8px}
.irow .head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.irow .txt{margin:0}
.lrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
.lrow .cost{font-weight:700;text-align:right}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filters select{min-height:44px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:0 10px}
.costbars{list-style:none;margin:0;padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.costbars li{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;font-size:14px}
.costbars .bar{height:12px}
.costbars .bar>span{background:var(--info)}

/* forms & modal */
.scrim{position:fixed;inset:0;background:rgba(10,20,12,.55);z-index:40}
.sheet{position:fixed;z-index:41;left:0;right:0;bottom:0;background:var(--surface);color:var(--ink);border-radius:18px 18px 0 0;max-height:92%;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.3)}
@media (min-width:700px){.sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));border-radius:18px;max-height:88%}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.sheet-h h2{font-size:22px}
.x{border:0;background:var(--surface2);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1}
form .f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
form label,.lbl{font-weight:700;font-size:14px}
form .hint{font-size:13px;color:var(--muted)}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=url],select.fld,textarea{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:8px 12px}
textarea{min-height:96px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.err{color:var(--bad);font-weight:600;min-height:1.2em;margin:0 0 8px}
.radios{display:grid;gap:8px}
.radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--bg)}
.radio input{margin-top:4px;accent-color:var(--brand);width:18px;height:18px}
.radio b{display:block}
.radio:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.msgbox{white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.banner{border:1px solid var(--sun);background:var(--sun-soft);color:var(--sun-ink);border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.qrbox{display:grid;place-items:center;padding:14px;background:#fff;border-radius:12px;margin:8px 0}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;z-index:60;font-weight:600;max-width:calc(100% - 32px);text-align:center}
@media (min-width:860px){#toast{bottom:32px}}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px);opacity:.4}}@media(min-width:700px){.sheet{animation:none}}}

/* connexion */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));background:var(--hdr)}
.auth-card{width:min(420px,100%);background:var(--surface);color:var(--ink);border-radius:18px;padding:22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth-logo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:16px}
.auth-logo img{width:110px;height:110px}
.auth-logo h1{font-size:28px}
.auth-logo p{margin:0;color:var(--muted)}
.lnk{border:0;background:none;padding:0 0 0 6px;color:var(--brand);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.team-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.team-row select{min-height:44px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:0 10px}
.code{font:700 30px/1 var(--f-display);letter-spacing:.12em;padding:14px 16px;background:var(--bg);border:1px dashed var(--line);border-radius:12px;text-align:center}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.qrbox svg{width:220px;height:220px}
.sheet-h .x{flex:none}
@media print{
  body>*:not(#modal-root){display:none!important}
  .scrim,.x,.noprint{display:none!important}
  .sheet{position:static!important;transform:none!important;box-shadow:none!important;width:100%!important;max-height:none!important}
}