@font-face{font-family:Roboto;font-weight:300;src:url(/static/fonts/roboto-300.woff) format("woff");font-display:swap}
@font-face{font-family:Roboto;font-weight:400;src:url(/static/fonts/roboto-400.woff) format("woff");font-display:swap}
@font-face{font-family:Roboto;font-weight:500;src:url(/static/fonts/roboto-500.woff) format("woff");font-display:swap}
@font-face{font-family:Roboto;font-weight:700;src:url(/static/fonts/roboto-700.woff) format("woff");font-display:swap}
/* Thème sombre = celui de Tactical RMM (Quasar) ; clair si l'appareil le demande */
:root{--bg:#121212;--hd:#424242;--card:#1d1d1d;--ink:#fff;--mut:#9e9e9e;--line:rgba(255,255,255,.12);--field:rgba(255,255,255,.07);--prim:#1976d2;--primhi:#3d8fe0;
 --pos:#21ba45;--neg:#c10015;--warn:#f2c037;--info:#31ccec;--sec:#26a69a;--acc:#ba68c8;--hover:rgba(255,255,255,.07);--rowalt:#212121}
html.light{--bg:#fff;--hd:#1976d2;--card:#fff;--ink:#212121;--mut:#757575;--line:rgba(0,0,0,.12);--field:rgba(0,0,0,.05);--primhi:#1565c0;--pos:#1b8a37;--warn:#c78a00;--sec:#00897b;--acc:#8e24aa;--hover:rgba(0,0,0,.05);--rowalt:#fafafa}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:var(--primhi);text-decoration:none}.grow{flex:1}.mut{color:var(--mut)}.sub{color:var(--mut);font-size:12.5px}.pos{color:var(--pos)}.warn{color:var(--warn)}
h1{font-size:20px;font-weight:400;margin:0}h2{font-size:15px;font-weight:500;margin:0 0 10px}
.ico{width:22px;height:22px;fill:currentColor;flex:none}
/* ── en-tête et menu (comme TRMM) ── */
.hd{height:50px;background:var(--hd);color:#fff;display:flex;align-items:center;padding:0 12px 0 14px;gap:12px;box-shadow:0 1px 5px rgba(0,0,0,.35);position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:14px;color:#fff}.logo .t{font-size:20px;font-weight:400}.logo .v{font:500 11px/1 Roboto;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:3px 6px;opacity:.85}
.usr{position:relative}.usr summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:2px;font-size:15px;padding:6px 8px;border-radius:4px}.usr summary::-webkit-details-marker{display:none}.usr summary:hover{background:rgba(255,255,255,.1)}
.usr .menu{position:absolute;right:0;top:100%;background:var(--card);color:var(--ink);min-width:170px;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.5);padding:4px 0;border:1px solid var(--line)}
.usr .menu form{margin:0}.usr .menu button{all:unset;display:block;width:100%;padding:9px 16px;cursor:pointer;box-sizing:border-box}.usr .menu button:hover{background:var(--hover)}
.mb{height:32px;background:var(--hd);display:flex;align-items:center;gap:2px;padding:0 10px;color:#fff;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:2}
.mb{overflow-x:auto;scrollbar-width:none}.mb a{white-space:nowrap;color:#fff;padding:4px 9px;border-radius:3px;font-size:14px;font-weight:500}.mb a:hover{background:rgba(255,255,255,.12)}.mb a.on{background:rgba(255,255,255,.2)}
.mb .per{display:flex;gap:2px}.mb .per a{font-weight:400;font-size:13px;padding:3px 8px}
/* ── arbre des appareils (colonne de gauche) ── */
.shell{display:flex;min-height:calc(100vh - 82px)}
.tree{width:210px;flex:none;border-right:1px solid var(--line);padding:8px 0;font-size:14px}
.tree a,.tree .cl,.tree .si{display:flex;align-items:center;gap:8px;padding:5px 12px;color:var(--ink)}
.tree .all{color:var(--primhi);gap:14px;padding:8px 12px 10px;line-height:1.25}.tree .all .ico{width:30px;height:30px}
.tree .cl{font-weight:500;margin-top:6px}.tree .cl .ico{color:var(--mut)}.tree .si{padding-left:42px;color:var(--mut);font-size:13px}
.tree .pc{padding-left:46px;border-left:3px solid transparent}.tree .pc .ico{width:18px;height:18px;color:var(--mut)}.tree .pc:hover{background:var(--hover)}.tree .pc.on{background:var(--hover);border-left-color:var(--prim);color:var(--primhi)}.tree .pc.on .ico{color:var(--primhi)}
main{flex:1;min-width:0;padding:12px 16px 28px}
.phead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
/* ── cartes / tableaux ── */
.panel,.kpi{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 16px}.panel{margin:0 0 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.kpi{display:flex;flex-direction:column;gap:1px;padding:10px 14px}.kpi .lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}.kpi b{font-size:22px;font-weight:400}.kpi b.mut{color:var(--mut)}.kpi small{font-size:14px;color:var(--mut)}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13.5px}
th{background:var(--bg);color:var(--ink);font-weight:500;text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#1d1d1d}.panel th{background:#262626}html.light th,html.light .panel th{background:#f5f5f5}
td{padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}tbody tr:nth-child(even) td{background:var(--rowalt)}tbody tr:hover td{background:var(--hover)}
.chip{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:500;border:1px solid var(--line)}
.chip.hibernation,.chip.veille{color:var(--warn);border-color:var(--warn)}.chip.éteint{color:var(--info);border-color:var(--info)}.chip.allumé{color:var(--neg);border-color:var(--neg)}.chip.estimé{color:var(--mut)}
.chip.ev-sleep{color:var(--warn);border-color:var(--warn)}.chip.ev-wake,.chip.ev-boot{color:var(--pos);border-color:var(--pos)}.chip.ev-shutdown,.chip.ev-shutdown-request{color:var(--info);border-color:var(--info)}.chip.ev-crash{color:var(--neg);border-color:var(--neg)}
.legend{font-size:12.5px;margin:8px 0 0;color:var(--mut)}.legend .k{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 6px 0 12px;vertical-align:-1px}.legend .k:first-child{margin-left:0}
.legend .k.bed{background:var(--acc);border-radius:50%}.legend .k.up{background:var(--pos);border-radius:50%}.legend .k.seg{background:var(--prim)}.legend .k.seg.est{background:var(--prim);opacity:.45}.legend .k.seg.sleep{background:var(--warn)}
.code{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin:8px 0 6px;font:13px/1.45 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-all;user-select:all}
code{font:12.5px ui-monospace,Consolas,monospace;background:var(--field);padding:1px 5px;border-radius:3px}
/* ── graphiques ── */
.chart{width:100%;height:auto;display:block}.chart .grid{stroke:var(--line);stroke-width:1}.chart .grid.mid{stroke:var(--mut);stroke-dasharray:3 3}
.chart .ax{fill:var(--mut);font-size:11px}.chart .ax.warn{fill:var(--warn)}
.chart .bar{fill:var(--prim)}.chart .bar.we{fill:var(--sec)}.chart .seg{fill:var(--prim)}.chart .seg.est{opacity:.45}.chart .seg.sleep{fill:var(--warn)}.chart .cell{fill:var(--prim)}
.chart .line{stroke-width:2;opacity:.6;fill:none}.chart .line.bed{stroke:var(--acc)}.chart .line.up{stroke:var(--pos)}
.chart .dot.bed{fill:var(--acc);stroke:var(--acc)}.chart .dot.up{fill:var(--pos);stroke:var(--pos)}.chart .dot.est{fill:var(--card);stroke-width:2}
/* ── page de connexion (réplique de celle de Tactical RMM) ── */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(90deg,#10131a 0%,#262c3d 48%,#0f1115 100%);color:#fff}
.lcard{width:432px;max-width:100%;background:#1d1d1d;border-radius:4px;padding:34px 16px 22px;box-shadow:0 1px 5px rgba(255,255,255,.2),0 2px 2px rgba(255,255,255,.14),0 3px 1px -2px rgba(255,255,255,.12);margin:0}
.lcard h1{text-align:center;font-size:34px;font-weight:400;line-height:1.2;margin:0 0 4px}.lsub{text-align:center;color:#9e9e9e;margin:0 0 22px;font-size:14px}
.field{position:relative;margin:0 0 36px}.field input{width:100%;height:56px;padding:22px 12px 6px;font:16px Roboto,sans-serif;color:#fff;background:rgba(255,255,255,.07);border:0;border-bottom:1px solid rgba(255,255,255,.4);border-radius:4px 4px 0 0;outline:0}
.field input:focus{border-bottom:2px solid var(--primhi);color:#fff}.field label{position:absolute;left:12px;top:18px;font-size:16px;color:rgba(255,255,255,.7);pointer-events:none;transition:all .12s}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:7px;font-size:12px}.field input:focus+label{color:var(--primhi)}
.btn{display:block;width:100%;height:36px;margin:0;background:#1976d2;color:#fff;border:0;border-radius:3px;font:500 14px Roboto,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.4)}.btn:hover{background:#3d8fe0}
.lerr{background:rgba(193,0,21,.18);border-left:3px solid var(--neg);padding:8px 12px;margin:0 0 20px;font-size:14px;border-radius:2px}
.lhint{color:#9e9e9e;font-size:13px;margin:-22px 0 18px}.lfoot{text-align:center;color:#757575;font-size:12px;margin:18px 0 0}
@media (max-width:860px){.shell{flex-direction:column}.tree{width:auto;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:0;padding:4px 6px}.tree .all{display:none}.tree .cl,.tree .si{display:none}.tree .pc{padding:6px 10px;border-left:0;border-bottom:3px solid transparent}.tree .pc.on{border-bottom-color:var(--prim)}main{padding:10px}.logo .t{font-size:17px}.mb{overflow-x:auto}}

.usr .menu a{display:block;padding:9px 16px;color:var(--ink)}.usr .menu a:hover{background:var(--hover)}
html.light body.login{background:linear-gradient(90deg,#10131a 0%,#262c3d 48%,#0f1115 100%)}
.kpis.flush{margin:8px 0 0}.kpi b.sm{font-size:16px;font-weight:500}.tbl.mt{margin-top:10px}td.wrap{white-space:normal}

.note{padding:9px 14px;border-radius:4px;margin:0 0 12px;border-left:3px solid var(--pos);background:var(--field)}.note.bad{border-left-color:var(--neg)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.inp{flex:1;min-width:180px;padding:8px 10px;font:inherit;color:var(--ink);background:var(--field);border:0;border-bottom:1px solid var(--mut);border-radius:4px 4px 0 0}
.btn2{font:500 13px Roboto,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:3px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.btn2:hover{background:var(--hover)}
.btn2.prim{background:var(--prim);border-color:var(--prim);color:#fff}.btn2.prim:hover{background:var(--primhi)}.btn2.sm{padding:3px 10px;font-size:12px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}.chk input{width:auto;margin:0}
.prot-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}.prot form,.prot-row form{margin:0}
td form{margin:0}