:root{
  --bg:#f4f6f9; --panel:#fff; --line:#dde2ea; --text:#1d2633; --muted:#6b7686;
  --brand:#0b5cad; --ok:#2e9e4f; --warn:#e0a100; --minor:#e07b00; --major:#d4451f; --crit:#c0182b;
  --unk:#8a94a3; --off:#b8bfca; --pause:#2f6fd6;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.4 "Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.hidden{display:none!important}
.muted{color:var(--muted)} .pad{padding:16px}
button{font:inherit;cursor:pointer;border:0;border-radius:6px;padding:7px 14px;background:var(--brand);color:#fff}
button.ghost{background:transparent;color:#fff;border:1px solid #ffffff66}
button.small{padding:4px 10px;font-size:13px}
button.grey{background:#e6eaf0;color:var(--text)}
input{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b5cad,#083b70)}
.login-box{background:#fff;padding:32px;border-radius:12px;width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px #0004}
.login-box label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.brand{font-weight:700;font-size:18px;color:#fff;white-space:nowrap}
.brand span{font-weight:400;opacity:.8}
.brand.big{color:var(--brand);font-size:22px;text-align:center;margin-bottom:8px}
.err{color:var(--crit);min-height:1em;margin:0}

/* header */
.top{display:flex;align-items:center;gap:20px;padding:10px 18px;background:#0b3d73;color:#fff;flex-wrap:wrap}
.top-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.top-right .muted{color:#ffffffaa;font-size:12px}
#search{width:240px;border:0}
.counters{display:flex;gap:6px}
.cnt{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;font-weight:600;font-size:13px;color:#fff}

/* pending agents */
.pending{margin:12px 18px 0;background:#fff7e0;border:1px solid #f0d27a;border-radius:8px;padding:10px 14px}
.pending h3{margin:0 0 8px;font-size:15px}
.pend-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid #f0e2b0}
.pend-row:first-of-type{border-top:0}
.pend-row .name{font-weight:600;min-width:180px}
.pend-row .actions{margin-left:auto;display:flex;gap:8px}

/* tabs */
.tabs{display:flex;gap:4px;padding:12px 18px 0}
.tabs button{background:transparent;color:var(--muted);border-radius:6px 6px 0 0;padding:8px 16px}
.tabs button.active{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 -1px 0 var(--line) inset}
.tabs b{background:var(--crit);color:#fff;border-radius:9px;padding:0 7px;font-size:12px}
.tabs b:empty{display:none}

.split{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:0;margin:0 18px 18px;background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px;min-height:calc(100vh - 170px)}
#tab-alarms{margin:0 18px 18px;background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px}

/* tree */
.tree{border-right:1px solid var(--line);overflow:auto;max-height:calc(100vh - 170px)}
.grp{border-bottom:1px solid var(--line)}
.grp-head{display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:600;cursor:pointer;background:#f9fafc}
.grp-head .caret{width:12px;color:var(--muted)}
.grp-head .sum{margin-left:auto;display:flex;gap:4px}
.grp-head.sub{background:#fff;padding-left:26px;font-weight:600;border-top:1px solid #f0f2f5}
.group .dev{padding-left:48px}
.drop{outline:2px dashed var(--brand);outline-offset:-2px;background:#eef4fb}
.tree-actions{padding:10px 12px}
.detail h4{margin:18px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dev{padding:6px 12px 6px 32px;cursor:pointer;border-top:1px solid #f0f2f5}
.dev-line{display:flex;align-items:center;gap:8px}
.chips-row{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 1px 19px}
.chip{font-size:11px;line-height:16px;padding:0 6px;border-radius:3px;color:#fff;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.chip.bad{background:var(--crit)} .chip.ok{background:var(--ok)} .chip.unk{background:var(--unk)} .chip.pause{background:var(--pause)}
.vgroup>.grp-head{color:var(--muted)}
.group .group>.grp-head.sub{padding-left:calc(26px + var(--depth,0) * 16px)}
.group .group .dev{padding-left:calc(48px + var(--depth,0) * 16px)}
.head-acts{display:inline-flex;gap:4px;margin-left:8px;opacity:0;transition:opacity .15s}
.grp-head:hover .head-acts{opacity:1}
.mini{font-size:11px;padding:1px 7px;border-radius:4px;background:#e6eaf0;color:var(--text);font-weight:600}
.mini:hover{background:var(--brand);color:#fff}
.icon-btn.danger{color:var(--crit)}
.pausebox{background:#e8f0fd;border-left:4px solid var(--pause);padding:8px 12px;border-radius:4px;margin:-6px 0 14px;font-size:13px}
@media (hover:none){.head-acts{opacity:1}}
.dev:hover{background:#eef4fb} .dev.sel{background:#dcebfa}
.dev .ip{color:var(--muted);font-size:12px;margin-left:auto}
.dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.pill{min-width:22px;text-align:center;border-radius:9px;padding:0 6px;font-size:12px;color:#fff;font-weight:600}

/* detail */
.detail{padding:18px;overflow:auto;max-height:calc(100vh - 170px)}
.detail h2{margin:0 0 4px;display:flex;align-items:center;gap:10px}
.facts{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);margin-bottom:16px;font-size:13px}
.sensors{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.sensor{border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:6px;padding:9px 11px;background:#fff}
.sensor .sname{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sensor .sval{font-size:19px;font-weight:600;margin-top:2px}
.sensor .sts{font-size:11px;color:var(--muted)}

/* alarms */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
th{color:var(--muted);font-weight:600;background:#f9fafc}

dialog{border:0;border-radius:10px;padding:22px;width:min(460px,92vw);box-shadow:0 12px 40px #0005}
dialog::backdrop{background:#0b1a2e88}
dialog h3{margin:0 0 14px}
dialog label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);margin-bottom:12px}
dialog input,dialog select,dialog textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;color:var(--text)}
dialog textarea{min-height:70px;resize:vertical}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips label{flex-direction:row;align-items:center;gap:4px;margin:0;padding:5px 10px;border:1px solid var(--line);border-radius:14px;cursor:pointer;color:var(--text)}
.chips input{margin:0}
.icon-btn{background:transparent;color:var(--brand);padding:2px 6px;font-size:13px}
.icon-btn:hover{background:#eef4fb}
.acts{white-space:nowrap}
.tag{font-size:11px;padding:1px 7px;border-radius:9px;background:#e6eaf0;color:var(--muted)}
.tag.ack{background:#e3efff;color:var(--brand)}
/* mur des sondes */
#tab-probes{margin:0 18px 18px;background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:14px;min-height:calc(100vh - 170px)}
#tab-probes:fullscreen{margin:0;border-radius:0;background:#0f1b2d;padding:20px;overflow:auto}
#tab-probes:fullscreen .probe-bar{display:none}
.probe-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.probe-bar input[type=search]{width:240px}
.probe-bar select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
.probe-bar .chk{display:flex;align-items:center;gap:5px;font-size:13px}
.probe-bar #wallBtn{margin-left:auto}
.probes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.probe{background:#fff;border:1px solid var(--line);border-top:5px solid var(--ok);border-radius:8px;padding:10px 12px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.probe:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0b3d7322}
.probe.bad{border-top-color:var(--crit);background:#fff5f5}
.probe.off{border-top-color:var(--crit);background:var(--crit);color:#fff;animation:pulse 1.6s infinite}
.probe.off .probe-sub,.probe.off .muted{color:#ffffffcc}
.probe.warn{border-top-color:var(--warn)}
.probe.unk{border-top-color:var(--unk)}
.probe.bad{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #c0182b55}50%{box-shadow:0 0 0 6px #c0182b00}}
.probe-top{display:flex;align-items:flex-start;gap:8px}
.probe-icon{font-size:22px;line-height:1}
.probe-name{font-weight:700;font-size:14px;flex:1;min-width:0;overflow-wrap:anywhere}
.probe-sub{font-weight:400;font-size:12px;color:var(--muted)}
.probe-state{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.probe.bad .probe-state{color:var(--crit)} .probe.warn .probe-state{color:var(--minor)} .probe.ok .probe-state{color:var(--ok)}
.probe-counts{display:flex;gap:4px;align-items:center;margin-top:8px;flex-wrap:wrap}
.chip.warnc{background:var(--warn)}
.small{font-size:12px}
.probe-alerts{margin:8px 0 0;padding-left:16px;font-size:12px;line-height:1.5}
.probe.off .probe-alerts{color:#fff}
#tab-probes:fullscreen .probe:not(.off){background:#16263d;border-color:#24364f;color:#e8eef7}
#tab-probes:fullscreen .probe.bad:not(.off){background:#3a1520}
#tab-probes:fullscreen .probe-sub{color:#9fb0c6}
/* écran mural (?mur) */
.probes-ok{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.probes-ok:empty{display:none}
.okpill{background:var(--ok);color:#fff;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:600}
.okpill b{background:#ffffff33;border-radius:8px;padding:0 6px;margin-left:4px;font-weight:700}
.okpill.empty{background:var(--unk)}
body.wall{background:#0b1626}
body.wall .top,body.wall .tabs,body.wall #pending,body.wall .probe-bar{display:none!important}
body.wall #tab-probes{margin:0;border:0;border-radius:0;background:#0b1626;min-height:100vh;padding:18px 22px}
.wall-head{display:flex;align-items:center;gap:24px;margin-bottom:16px;color:#e8eef7}
.wall-head .brand{font-size:24px}
.wall-counters{display:flex;gap:8px}
.wall-counters .cnt{font-size:18px;padding:6px 14px;border-radius:18px}
.wall-clock{margin-left:auto;text-align:right;font-size:20px;text-transform:capitalize}
.wall-clock small{display:block;font-size:12px;color:#8fa3bd;text-transform:none}
body.wall .probes{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
body.wall .probe:not(.off){background:#13243a;border-color:#22385a;color:#e8eef7}
body.wall .probe.bad:not(.off){background:#3a1520;border-color:#6b1d2b}
body.wall .probe.warn{background:#2f2a14}
body.wall .probe-name{font-size:17px}
body.wall .probe-sub,body.wall .muted{color:#9fb0c6}
body.wall .probe-alerts{font-size:14px}
body.wall .okpill{font-size:15px;padding:7px 12px}
.disp-err{position:fixed;top:0;left:0;right:0;background:var(--crit);color:#fff;text-align:center;padding:10px;font-weight:700;z-index:99}
.dtype{font-size:13px;width:18px;text-align:center}
.vend{font-style:italic;color:#3a4a5e}
.vend-sm{color:var(--muted);font-size:11px}
.ai-out{background:#f6f9fd;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.55;max-height:60vh;overflow:auto}
.ai-out ul{margin:4px 0;padding-left:20px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #b8c7da;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
dialog:has(.ai-out){width:min(640px,94vw)}
.toast{position:fixed;bottom:20px;right:20px;background:#1d2633;color:#fff;padding:10px 16px;border-radius:8px;box-shadow:0 4px 18px #0005;max-width:420px}

@media (max-width:800px){
  .top{gap:8px 10px;padding:8px 12px}
  .brand{font-size:16px}
  .counters{margin-left:auto}
  .top-right{margin-left:0;width:100%;gap:6px}
  #search{flex:1;min-width:0;width:auto}
  #refreshInfo{display:none}
  #logout{padding:7px 10px}
  .tabs{padding:8px 10px 0}
  .split,#tab-alarms{margin:0 8px 8px}
  .split{grid-template-columns:1fr;min-height:0}
  .tree{border-right:0;border-bottom:1px solid var(--line);max-height:55vh}
  .detail{max-height:none}
  .pending{margin:8px 8px 0}
  .pend-row{flex-wrap:wrap}
  .pend-row .name{min-width:0}
  .sensors{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  table{display:block;overflow-x:auto}
  .dev .ip{display:none}
}

/* analyse automatique dans la fiche équipement */
.ana { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line, #d8dee8); border-left: 4px solid #2f6fd6; border-radius: 8px; background: var(--card, #fff); font-size: 13px; }
.ana-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ana-line { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 3px 0; line-height: 1.4; }

/* onglet Config et déclencheurs */
.config { max-width: 1100px; }
.config h3 { margin: 22px 0 6px; }
table.cfg { border-collapse: collapse; width: 100%; font-size: 13px; }
table.cfg th, table.cfg td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line, #d8dee8); }
.sensor { position: relative; }
.sgear { position: absolute; top: 4px; right: 4px; opacity: .45; }
.sensor:hover .sgear { opacity: 1; }
.trig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line, #d8dee8); font-size: 13px; }
.trig-row input, .trig-row select { width: auto; margin: 0; }

#dlg:has(.trig-row), #dlg:has(#trigAdd) { width: min(780px, 96vw); max-width: 96vw; }


.grp-head.sel { background: rgba(47,111,214,.14); }
.grp-list tr[data-node] { cursor: pointer; }
.grp-list tr[data-node]:hover { background: rgba(47,111,214,.08); }
.caret { cursor: pointer; padding: 0 4px; }


a.btnlink { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--accent, #2f6fd6); color: #fff; text-decoration: none; margin-right: 8px; }
a.btnlink:hover { filter: brightness(1.1); }


a.displink { word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }


.vmstag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: rgba(47,111,214,.12); color: #2f6fd6; font-size: 11px; font-weight: 600; white-space: nowrap; }
.vmsbox { margin: 8px 0 12px; padding: 8px 10px; border: 1px dashed var(--line, #d8dee8); border-radius: 8px; font-size: 13px; }
.vmsbox .icon-btn { margin-left: 8px; }


/* historique des capteurs et journal */
.sensor[data-hist] { cursor: pointer; }
.sensor[data-hist]:hover { box-shadow: 0 0 0 2px rgba(47,111,214,.35); }
.histsvg { width: 100%; height: auto; max-height: 260px; }
.histsvg .hgrid { stroke: var(--line, #d8dee8); stroke-width: 1; }
.histsvg .hlab { font-size: 10px; fill: #6b7686; }
.histsvg .hline { fill: none; stroke: #2f6fd6; stroke-width: 1.6; stroke-linejoin: round; }
.histsvg .hthr { stroke: #d33; stroke-width: 1; stroke-dasharray: 5 4; }
.histsvg .hthrl { fill: #d33; }
.journal td { vertical-align: top; }
.nowrap { white-space: nowrap; }
#dlg:has(.histsvg) { width: min(780px, 96vw); max-width: 96vw; }