/* ============================================================
   SUPRA v6 - Feuille de style principale
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --b50:#E6F1FB;--b100:#B5D4F4;--b200:#85B7EB;--b400:#378ADD;
  --b600:#185FA5;--b700:#0E4D8C;--b800:#0C447C;--b900:#042C53;
  --g50:#F8F9FC;--g100:#EEF1F6;--g200:#D8DDE8;--g300:#BCC3D0;
  --g400:#8892A4;--g500:#6B7280;--g600:#4A5568;--g700:#374151;--g800:#1E2533;
  --wh:#FFFFFF;
  --rd:#DC2626;--rd1:#FEE2E2;
  --gn:#16A34A;--gn1:#DCFCE7;
  --or:#F97316;--or1:#FFF7ED;
  --pu:#533AB7;--pu1:#EEEDFE;
  --sb-w:268px;
  --rsm:6px;--rmd:10px;--rlg:14px;
  --fm:'Syne',system-ui,sans-serif;
  --fmono:'IBM Plex Mono',monospace;
  --shcard:0 2px 8px rgba(24,95,165,.07),0 0 0 1px rgba(24,95,165,.08);
  --shmodal:0 24px 80px rgba(4,44,83,.2),0 0 0 1px rgba(24,95,165,.12);
}
/* ── THÈME ARDOISE (topbar gris-bleu, fond clair inchangé) ── */
[data-theme="ardoise"]{
  --b900:#1e2d3d;--b800:#26384a;--b700:#2f4458;--b600:#4a6580;
  --b400:#6f90b0;--b200:#a8c2d4;
}
/* ── THÈME NUIT (dark mode complet) ─────────────────────────── */
[data-theme="dark"]{
  --b900:#0d1117;--b800:#161b22;--b700:#1c2433;--b600:#4a8cc2;
  --b400:#6baed6;--b200:#9ecae1;
  --g50:#0d1117;--g100:#1a2233;--g200:#374151;--g300:#4b5563;
  --g400:#9ca3af;--g500:#b4bac6;--g600:#d1d5db;--g700:#e5e7eb;--g800:#f9fafb;
  --wh:#1f2937;
  --rd1:rgba(220,38,38,.15);--gn1:rgba(22,163,74,.15);
  --or1:rgba(249,115,22,.15);--pu1:rgba(83,58,183,.2);
  --b50:rgba(55,138,221,.1);--b100:rgba(55,138,221,.2);
  --pu:#a78bfa;--pu1:rgba(167,139,250,.15);
  --shcard:0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
  --shmodal:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);
}
/* Dans sidebar et topbar, --wh doit rester clair (texte sur fond sombre) */
[data-theme="dark"] .sb,
[data-theme="dark"] .topbar { --wh: #e2e8f0; }
/* Bloc iDRAC/Management */
[data-theme="dark"] .mgmt-block{background:rgba(74,140,194,.08);border-color:rgba(74,140,194,.22);--g300:#9ca3af}
/* ── THÈME MD SERVICE (anthracite + rouge cardinal) ─────────────── */
[data-theme="mdservice"]{
  --b900:#252829;--b800:#3e4346;--b700:#54585a;--b600:#cd2122;
  --b400:#e05555;--b200:#c8a8a8;
  --b50:#fff5f5;--b100:#fde0e0;
  --shcard:0 2px 8px rgba(205,33,34,.07),0 0 0 1px rgba(205,33,34,.08);
  --shmodal:0 24px 80px rgba(37,40,41,.25),0 0 0 1px rgba(205,33,34,.12);
}
[data-theme="mdservice"] .sb,
[data-theme="mdservice"] .topbar { --wh: #ece5e5; }
body{font-family:var(--fm);background:var(--g50);color:var(--g800);font-size:14px;min-height:100vh}

/* ── TOP BAR ──────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;height:44px;background:var(--b900);padding:0 20px;gap:24px;position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(181,212,244,.1)}
.topbar-brand{display:flex;align-items:center;gap:9px;min-width:calc(var(--sb-w) - 20px - 24px)}
.topbar-brand-ico{width:18px;height:18px;fill:none;stroke:var(--b200);stroke-width:2}
.topbar-brand-name{font-family:var(--fmono);font-size:13px;font-weight:600;color:var(--wh);letter-spacing:.06em}
.topbar-nav{display:flex;align-items:center;gap:2px;flex:1}
.topbar-link{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--rsm);color:rgba(181,212,244,.6);font-size:12px;font-weight:600;font-family:var(--fm);text-decoration:none;transition:all .15s;white-space:nowrap}
.topbar-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.topbar-link:hover{color:var(--wh);background:rgba(255,255,255,.08)}
.topbar-link.active{color:var(--wh);background:rgba(255,255,255,.12)}
.topbar-user{display:flex;align-items:center;gap:8px;margin-left:auto;cursor:pointer;padding:4px 8px 4px 4px;border-radius:var(--rmd);transition:background .15s;position:relative;outline:none;user-select:none}
.topbar-user:hover{background:rgba(255,255,255,.08)}
.topbar-avatar{width:28px;height:28px;border-radius:50%;background:var(--b600);border:1.5px solid var(--b400);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--wh);font-family:var(--fmono);flex-shrink:0}
.topbar-username{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);font-family:var(--fm);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-chevron{width:13px;height:13px;fill:none;stroke:rgba(181,212,244,.5);stroke-width:2;flex-shrink:0;transition:transform .2s}
.topbar-user:hover .topbar-chevron{stroke:rgba(181,212,244,.9)}
.topbar-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;width:200px;background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rmd);box-shadow:var(--shmodal);z-index:300;overflow:hidden}
.topbar-dropdown.open{display:block}
.tdd-info{padding:12px 14px 10px}
.tdd-nom{font-size:12px;font-weight:700;color:var(--g800);font-family:var(--fmono)}
.tdd-role{font-size:10px;color:var(--g400);margin-top:2px}
.tdd-sep{height:1px;background:var(--g100);margin:0}
.tdd-btn{display:flex;align-items:center;gap:9px;width:100%;padding:10px 14px;background:none;border:none;font-size:12px;font-weight:600;color:var(--rd);font-family:var(--fm);cursor:pointer;transition:background .12s;text-align:left}
.tdd-btn:hover{background:var(--rd1)}
.tdd-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.tdd-theme{padding:8px 14px;display:flex;align-items:center;justify-content:space-between}
.tdd-theme-lbl{font-size:11px;font-weight:600;color:var(--g600);font-family:var(--fm)}
.tdd-swatches{display:flex;gap:6px}
.theme-sw{width:20px;height:20px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;padding:0;outline:none;flex-shrink:0;transition:transform .12s,border-color .15s,box-shadow .15s}
.theme-sw:hover{transform:scale(1.18)}
.theme-sw.active{border-color:var(--b400);box-shadow:0 0 0 1.5px var(--g200)}

.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:calc(100vh - 44px)}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sb{background:var(--b900);display:flex;flex-direction:column;position:sticky;top:44px;height:calc(100vh - 44px);overflow:hidden}
.sb-head{padding:18px 14px 12px;border-bottom:1px solid rgba(181,212,244,.1)}
.logo{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.logo-icon{width:32px;height:32px;background:var(--b600);border:1.5px solid var(--b400);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.logo-text{font-family:var(--fmono);font-size:16px;font-weight:600;color:var(--wh);letter-spacing:.08em}
.logo-sub{font-size:10px;color:var(--b200);margin-top:1px;font-family:var(--fmono)}
.sb-search{width:100%;padding:7px 11px;border:1.5px solid rgba(181,212,244,.2);border-radius:var(--rmd);background:rgba(255,255,255,.07);color:var(--wh);font-size:12px;font-family:var(--fm);outline:none;transition:border .15s}
.sb-search::placeholder{color:var(--b200)}.sb-search:focus{border-color:rgba(181,212,244,.5)}
.sb-showall{display:inline-flex;align-items:center;gap:5px;margin:8px 10px 2px;padding:4px 10px 4px 8px;border:1px solid rgba(181,212,244,.18);border-radius:20px;background:transparent;color:rgba(181,212,244,.45);font-size:10px;font-family:var(--fmono);cursor:pointer;transition:all .15s;letter-spacing:.02em}
.sb-showall svg{width:11px;height:11px;flex-shrink:0}
.sb-showall:hover{border-color:rgba(181,212,244,.4);color:rgba(181,212,244,.8);background:rgba(181,212,244,.06)}
.sb-showall.active{border-color:rgba(181,212,244,.45);color:rgba(181,212,244,.9);background:rgba(181,212,244,.12)}
.sb-section{padding:10px 12px 4px;font-size:9px;font-weight:700;color:var(--b200);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;justify-content:space-between}
.sb-ibtn{background:none;border:1px solid rgba(181,212,244,.22);color:var(--b200);cursor:pointer;width:18px;height:18px;border-radius:4px;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .12s}
.sb-ibtn:hover{background:rgba(255,255,255,.1);border-color:rgba(181,212,244,.5);color:var(--wh)}
.sb-clients{flex:1;overflow-y:auto;padding:3px 6px;scrollbar-width:thin;scrollbar-color:rgba(181,212,244,.12) transparent}
.sb-clients::-webkit-scrollbar{width:3px}.sb-clients::-webkit-scrollbar-thumb{background:rgba(181,212,244,.18);border-radius:2px}
.cr{padding:8px 9px;border-radius:var(--rmd);cursor:pointer;display:flex;align-items:center;gap:9px;margin-bottom:2px;transition:background .12s;border:1.5px solid transparent}
.cr:hover{background:rgba(255,255,255,.07)}.cr.active{background:rgba(55,138,221,.2);border-color:rgba(55,138,221,.38)}
.cavatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--wh);flex-shrink:0;font-family:var(--fmono)}
.cname{font-size:12px;font-weight:600;color:var(--wh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fmono)}
.cmeta{font-size:10px;color:var(--b200);margin-top:1px;font-family:var(--fmono)}
.cacts{display:none;gap:2px;flex-shrink:0}.cr:hover .cacts,.cr.active .cacts{display:flex}
.cabt{background:none;border:none;color:rgba(181,212,244,.45);cursor:pointer;font-size:12px;padding:1px 3px;border-radius:3px;transition:color .12s;line-height:1}.cabt:hover{color:var(--wh)}
.csubnav{padding-left:12px;border-left:1px solid rgba(181,212,244,.1);margin:2px 0 2px 16px;display:none}.csubnav.open{display:block}
.sni{display:flex;align-items:center;gap:6px;padding:4px 7px;cursor:pointer;font-size:11px;font-weight:600;color:rgba(181,212,244,.55);border-radius:5px;transition:all .12s;margin-bottom:1px;font-family:var(--fmono)}
.sni:hover{background:rgba(255,255,255,.06);color:var(--b200)}.sni.active{background:rgba(55,138,221,.14);color:var(--b100)}
.sndot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.snct{margin-left:auto;font-size:9px;color:rgba(181,212,244,.35)}
.sb-foot{padding:8px 6px;border-top:1px solid rgba(181,212,244,.1)}
.sb-add{width:100%;padding:9px;border:1.5px dashed rgba(181,212,244,.28);border-radius:var(--rmd);background:none;color:var(--b200);cursor:pointer;font-size:12px;font-family:var(--fm);font-weight:600;display:flex;align-items:center;gap:6px;justify-content:center;transition:all .15s}
.sb-add:hover{background:rgba(255,255,255,.07);border-color:rgba(181,212,244,.5);color:var(--wh)}

/* ── MAIN ──────────────────────────────────────────────────── */
.main{display:flex;flex-direction:column;min-height:100vh}
.main-sticky-header{position:sticky;top:44px;z-index:50;background:var(--wh)}
.mh{padding:13px 22px 10px;background:var(--wh);border-bottom:1.5px solid var(--g100);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mh-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--wh);flex-shrink:0;font-family:var(--fmono)}
.mh-title{font-family:var(--fmono);font-size:15px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.dbpill{display:flex;align-items:center;gap:4px;font-size:10px;font-family:var(--fmono);padding:3px 9px;border-radius:20px;flex-shrink:0}
.dbpill.ok{background:rgba(22,163,74,.1);color:var(--gn);border:1px solid rgba(22,163,74,.2)}
.dbpill.err{background:var(--rd1);color:var(--rd);border:1px solid rgba(220,38,38,.2)}
.dbpill.loading{background:var(--g100);color:var(--g400);border:1px solid var(--g200)}
.dbdot{width:5px;height:5px;border-radius:50%;background:currentColor}
.ibtn{background:none;border:1.5px solid var(--g200);border-radius:var(--rsm);cursor:pointer;padding:5px 11px;color:var(--g600);font-size:12px;font-family:var(--fm);font-weight:600;display:flex;align-items:center;gap:5px;transition:all .12s;white-space:nowrap}
.ibtn:hover{background:var(--g50);border-color:var(--g300);color:var(--g800)}
.ibtn.prim{background:var(--b600);border-color:var(--b600);color:var(--wh)}.ibtn.prim:hover{background:var(--b700)}
.ibtn.danger:hover{background:var(--rd1);border-color:#FCA5A5;color:var(--rd)}
.ibtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}

/* Site tabs */
.site-tabs{display:flex;gap:2px;padding:8px 22px 0;background:var(--wh);overflow-x:auto;scrollbar-width:none}
.site-tabs::-webkit-scrollbar{display:none}
.stab{padding:6px 14px;border-radius:var(--rsm) var(--rsm) 0 0;cursor:pointer;font-size:11px;font-weight:600;color:var(--g400);border:1.5px solid transparent;border-bottom:none;background:var(--g100);font-family:var(--fm);transition:all .12s}
.stab:hover{background:var(--g50);color:var(--g600)}.stab.active{background:var(--wh);color:var(--b600);border-color:var(--g200)}

/* Type tabs */
.tabs{display:flex;gap:3px;padding:8px 22px;background:var(--wh);border-bottom:1.5px solid var(--g100);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:5px 11px;border-radius:var(--rsm);cursor:pointer;font-size:11px;font-weight:600;color:var(--g400);border:1.5px solid transparent;background:none;font-family:var(--fm);white-space:nowrap;display:flex;align-items:center;gap:4px;transition:all .12s}
.tab:hover{background:var(--g50);color:var(--g600)}.tab.active{background:var(--b50);color:var(--b600);border-color:var(--b100)}
.tabc{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:8px;font-size:9px;background:var(--g100);color:var(--g400);font-weight:700}
.tab.active .tabc{background:var(--b100);color:var(--b600)}
.tabc.alert{background:var(--rd);color:#fff}
.content{padding:16px 22px;flex:1}
.err-banner{background:var(--rd1);border:1.5px solid rgba(220,38,38,.2);border-radius:var(--rmd);padding:10px 14px;color:var(--rd);font-size:12px;margin-bottom:14px;display:none}.err-banner.show{display:block}

/* ── CARDS GRID ───────────────────────────────────────────── */
.type-section{margin-bottom:6px}
.type-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);font-family:var(--fmono);padding:5px 0 5px;border-bottom:1.5px solid var(--g200);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.group-toggle{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--g400);padding:2px;display:flex;align-items:center;border-radius:4px;transition:background .12s,color .12s}.group-toggle:hover{background:var(--g100);color:var(--g700)}.group-toggle svg{width:14px;height:14px}
.tsl-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.type-grid{display:grid;gap:10px}
.type-grid.col2{grid-template-columns:repeat(auto-fill,minmax(min(100%,540px),600px))}
.type-grid.col3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),360px))}

/* ── DEVICE CARD ──────────────────────────────────────────── */
.dc{border:1.5px solid var(--g200);border-radius:var(--rmd);background:var(--wh);box-shadow:var(--shcard);transition:box-shadow .15s,transform .12s;overflow:hidden;display:flex;flex-direction:column}
.dc:hover{box-shadow:0 4px 18px rgba(24,95,165,.1),0 0 0 1.5px rgba(55,138,221,.18);transform:translateY(-1px)}
.dc.is-vm{border-left:3.5px solid var(--pu)}.dc.is-phys{border-left:3.5px solid var(--b400)}
.dch{padding:7px 11px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .12s;flex-shrink:0}
.dch:hover{background:var(--g50)}
.dc-ico{flex-shrink:0;width:28px;display:flex;align-items:center;justify-content:center}
.type-ico{display:block;flex-shrink:0}
.dc-ico .type-ico{width:19px;height:19px}
.tab .type-ico{width:13px;height:13px}
.type-section-label .type-ico{width:11px;height:11px}
.dc-name{font-size:12px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fmono)}
.dc-badge{font-size:9px;padding:0 9px;border-radius:20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;flex-shrink:0;height:20px;display:inline-flex;align-items:center;justify-content:center}
.dc-vm-tag{font-size:9px;padding:0 5px;border-radius:3px;background:var(--pu1);color:var(--pu);font-weight:700;font-family:var(--fmono);flex-shrink:0;height:16px;display:inline-flex;align-items:center}
.dc-acts{display:flex;gap:4px;flex-shrink:0}
.chev{font-size:9px;color:var(--g300);transition:transform .18s;flex-shrink:0}.chev.open{transform:rotate(180deg)}
.dcb{padding:8px 11px;border-top:1.5px solid var(--g100);background:var(--g50);flex:1}

/* Fields */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.f{display:flex;flex-direction:column;gap:3px}.f.full{grid-column:1/-1}
.fl{font-size:9px;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-family:var(--fmono)}
.fv{font-size:11px;display:flex;align-items:center;gap:5px;min-height:20px;color:var(--g700);font-family:var(--fmono);flex-wrap:wrap}
.fv.mono-box{background:var(--wh);padding:4px 8px;border-radius:var(--rsm);border:1.5px solid var(--g200);color:var(--b800)}

/* IP badge */
.ip-badge{display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:4px;font-size:10px;font-weight:600;background:var(--b50);color:var(--b800);font-family:var(--fmono);border:1px solid var(--b100)}
.ip-badge.muted{background:var(--g100);border-color:var(--g200);color:var(--g400)}

/* Garantie */
.guar-ok{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:4px;font-size:9px;font-weight:700;background:var(--gn1);color:var(--gn);font-family:var(--fmono)}
.guar-exp{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:4px;font-size:9px;font-weight:700;background:var(--rd1);color:var(--rd);font-family:var(--fmono)}
.guar-none{font-size:10px;color:var(--g400);font-family:var(--fmono)}

/* Lien constructeur */
.vendor-link{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--b600);font-family:var(--fmono);text-decoration:none;border:1px solid var(--b100);background:var(--b50);padding:1px 7px;border-radius:3px;transition:all .12s}
.vendor-link:hover{background:var(--b100)}
.vendor-link svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}

/* Roles */
.roles-wrap{display:flex;flex-wrap:wrap;gap:3px}
.rchip{font-size:9px;padding:1px 7px;border-radius:3px;background:var(--b50);color:var(--b600);font-weight:700;font-family:var(--fmono);border:1px solid var(--b100)}

/* VM IPs */
.vm-ips-wrap{display:flex;flex-wrap:wrap;gap:4px}

/* URLs */
.urls-block{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.url-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--fmono);color:var(--b600);background:var(--b50);border:1px solid var(--b100);padding:2px 9px;border-radius:4px;cursor:pointer;text-decoration:none;transition:all .12s}
.url-btn:hover{background:var(--b100)}
.url-btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}

/* Identifiants */
.idents-block{margin-top:9px;border-top:1.5px solid var(--g200);padding-top:9px}
.idents-title{font-size:9px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.1em;font-family:var(--fmono);margin-bottom:6px}
.ident-row{display:flex;align-items:center;gap:5px;background:var(--wh);border:1px solid var(--g200);border-radius:var(--rsm);padding:5px 8px;margin-bottom:3px;font-family:var(--fmono);font-size:10px}
.ident-row:last-child{margin-bottom:0}
.ident-user{color:var(--b800);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident-pw{color:var(--g300);letter-spacing:.08em;flex-shrink:0;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident-note{color:var(--g400);font-size:9px;font-style:italic;flex-shrink:0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident-modif{color:var(--g400);font-size:8px;flex-shrink:0}
.eye-btn{background:none;border:none;cursor:pointer;color:var(--g300);padding:0;display:flex;flex-shrink:0;transition:color .12s}.eye-btn:hover{color:var(--g600)}
.eye-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.copy-ico{background:none;border:none;cursor:pointer;color:var(--g300);padding:0;display:flex;flex-shrink:0;transition:color .12s}.copy-ico:hover{color:var(--b600)}
.copy-ico svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}

/* Management */
.mgmt-block{margin-top:9px;border:1px solid rgba(55,138,221,.2);border-radius:var(--rsm);background:rgba(230,241,251,.45);padding:7px 10px}
.mgmt-title{font-size:9px;font-weight:700;color:var(--b600);text-transform:uppercase;letter-spacing:.1em;font-family:var(--fmono);margin-bottom:5px}

/* Interfaces */
.ifaces-toggle{background:none;border:none;cursor:pointer;font-size:10px;font-family:var(--fmono);color:var(--g400);padding:6px 0 2px;display:flex;align-items:center;gap:4px;transition:color .12s;width:100%;text-align:left}
.ifaces-toggle:hover{color:var(--g600)}
.ifaces-toggle svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s;flex-shrink:0}.ifaces-toggle.open svg{transform:rotate(90deg)}
.ift-wrap{overflow-x:auto;max-width:100%;padding-bottom:2px}
.ift{width:100%;min-width:540px;border-collapse:collapse;margin-top:5px;font-size:10px;font-family:var(--fmono)}
.ift th{font-size:8px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;padding:3px 6px;text-align:left;border-bottom:1.5px solid var(--g200)}
.ift td{padding:4px 6px;border-bottom:1px solid var(--g100);color:var(--g600)}.ift tr:last-child td{border-bottom:none}.ift tr:hover td{background:var(--b50)}
.ift input,.ift select{width:100%;min-width:72px;border:1px solid var(--g200);border-radius:4px;background:var(--wh);color:var(--g800);font-size:10px;font-family:var(--fmono);padding:3px 5px;outline:none}
.ift input:focus,.ift select:focus{border-color:var(--b400)}
.ift-actions{width:48px;text-align:right;white-space:nowrap}
.mini-edit,.mini-ok,.mini-cancel{border:1px solid var(--g200);background:var(--wh);color:var(--g400);border-radius:4px;cursor:pointer;font-size:10px;line-height:1;padding:3px 5px;margin-left:2px;transition:all .12s}
.mini-edit:hover{border-color:var(--b200);color:var(--b600);background:var(--b50)}
.mini-ok{color:var(--gn);border-color:rgba(22,163,74,.25)}
.mini-ok:hover{background:var(--gn1)}
.mini-cancel{color:var(--rd);border-color:rgba(220,38,38,.25)}
.mini-cancel:hover{background:var(--rd1)}
.ib{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:700;text-transform:uppercase}
.ib-actif{background:rgba(22,163,74,.1);color:var(--gn)}.ib-desactive{background:var(--g100);color:var(--g400)}

/* Techniciens badge */
.tech-wrap{display:flex;flex-wrap:wrap;gap:3px}
.tech-chip{font-size:9px;padding:2px 8px;border-radius:3px;background:var(--or1);color:var(--or);font-weight:600;font-family:var(--fmono);border:1px solid rgba(249,115,22,.2)}

/* ── VUE RÉSUMÉE CLIENT (overview) ─────────────────────────── */
.cov-wrap{padding:4px 0}
.cov-section-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--g400);font-family:var(--fmono);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.cov-section-btn{background:none;border:none;color:var(--b500);font-size:10px;font-weight:600;cursor:pointer;font-family:var(--fm);padding:0}
.cov-section-btn:hover{color:var(--b700)}
.cov-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:4px}
.cov-type-card{border:1.5px solid var(--cov-accent,#DDE1E8);border-radius:var(--rmd);padding:14px 12px;cursor:pointer;transition:box-shadow .15s,transform .1s;display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none}
.cov-type-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.1);transform:translateY(-1px)}
.cov-type-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.cov-type-ico svg{width:22px;height:22px}
.cov-type-count{font-size:22px;font-weight:800;font-family:var(--fmono);line-height:1}
.cov-type-label{font-size:10px;font-weight:600;text-align:center}
.cov-msg-card{border:1.5px solid var(--g200);border-radius:var(--rmd);background:var(--wh);padding:14px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:box-shadow .15s}
.cov-msg-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.08)}
.cov-msg-ico svg{width:20px;height:20px;color:var(--g400);flex-shrink:0}
.cov-msg-body{flex:1;display:flex;flex-direction:column;gap:5px}
.cov-msg-row{display:flex;align-items:baseline;gap:8px;font-size:12px}
.cov-msg-lbl{font-size:10px;font-weight:600;color:var(--g400);font-family:var(--fmono);min-width:72px;flex-shrink:0}
.cov-msg-val{color:var(--g700);font-weight:500;display:flex;flex-wrap:wrap;gap:4px}
.cov-domain{font-size:10px;font-family:var(--fmono);background:var(--b50);color:var(--b700);padding:1px 7px;border-radius:4px;border:1px solid var(--b100)}
.cov-msg-empty{font-size:11px;color:var(--g400);font-family:var(--fmono);font-style:italic}
.cov-msg-loading{font-size:11px;color:var(--g400);font-family:var(--fmono)}
.cov-empty{font-size:11px;color:var(--g400);font-family:var(--fmono)}
.cov-link{background:none;border:none;color:var(--b500);font-size:11px;cursor:pointer;font-family:var(--fm);padding:0}

.add-dev-btn{width:100%;border:2px dashed var(--g200);border-radius:var(--rlg);padding:13px;background:var(--wh);color:var(--g400);cursor:pointer;font-size:12px;font-family:var(--fm);font-weight:600;display:flex;align-items:center;gap:7px;justify-content:center;transition:all .15s;margin-top:8px}
.add-dev-btn:hover{background:var(--b50);border-color:var(--b200);color:var(--b600)}
.add-dev-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.splash{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;flex:1;padding:80px;color:var(--g400);text-align:center}
.splash-ico{font-size:48px;opacity:.12}.splash-txt{font-size:14px;font-weight:600;font-family:var(--fmono)}
.empty{text-align:center;padding:50px 20px;color:var(--g400)}
.spin{width:20px;height:20px;border:2px solid var(--g200);border-top-color:var(--b400);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODALS ─────────────────────────────────────────────────── */
.ov{display:none;position:fixed;inset:0;background:rgba(4,44,83,.45);z-index:1000;backdrop-filter:blur(3px);overflow-y:auto;padding:20px}
.ov.open{display:flex;align-items:flex-start;justify-content:center}
.modal{background:var(--wh);border-radius:var(--rlg);border:1.5px solid var(--g200);width:100%;max-width:600px;margin:auto;box-shadow:var(--shmodal)}
.modal.sm{max-width:460px}.modal.conf{max-width:400px}.modal.lg{max-width:700px}
.mh2{padding:15px 20px 12px;border-bottom:1.5px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.mh2 h2{font-size:14px;font-weight:700;letter-spacing:-.01em;font-family:var(--fmono)}
.mclose{background:none;border:none;color:var(--g400);cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;border-radius:4px}.mclose:hover{color:var(--g800)}
.mbody{padding:18px 20px;max-height:75vh;overflow-y:auto}
.mfoot{padding:12px 20px;border-top:1.5px solid var(--g100);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:var(--wh)}

/* ── FORMS ──────────────────────────────────────────────────── */
.fsec{margin-bottom:14px}
.fsec-t{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g400);margin-bottom:7px;padding-bottom:5px;border-bottom:1.5px solid var(--g100);font-family:var(--fmono)}
.frow{display:grid;gap:9px;margin-bottom:9px}
.frow.c2{grid-template-columns:1fr 1fr}.frow.c3{grid-template-columns:1fr 1fr 1fr}.frow.c4{grid-template-columns:1fr 1fr 1fr 1fr}.frow.c1{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:9px;font-weight:700;color:var(--g600);letter-spacing:.06em;text-transform:uppercase;font-family:var(--fmono)}
.fg input,.fg select,.fg textarea{width:100%;padding:8px 11px;border:1.5px solid var(--g200);border-radius:var(--rmd);color:var(--g800);font-size:12px;font-family:var(--fm);outline:none;transition:border .12s;background:var(--wh)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--b400);box-shadow:0 0 0 3px rgba(55,138,221,.1)}
.fg textarea{resize:vertical;min-height:60px}
.fg .em{font-size:10px;color:var(--rd);margin-top:2px;display:none}.fg.err input,.fg.err select,.fg.err textarea{border-color:var(--rd)}.fg.err .em{display:block}
.hint{font-size:10px;color:var(--g400);margin-top:2px;font-family:var(--fmono)}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.topt{background:var(--g50);border:2px solid var(--g200);border-radius:var(--rmd);padding:9px 4px;text-align:center;cursor:pointer;transition:all .12s}
.topt:hover{border-color:var(--g300)}.topt.sel{border-color:var(--b400);background:var(--b50)}
.topt .ico{font-size:18px;display:block;margin-bottom:3px}.topt .lbl{font-size:9px;font-weight:700;color:var(--g400);font-family:var(--fmono)}.topt.sel .lbl{color:var(--b600)}
.pww{position:relative;display:flex;align-items:center}.pww input{padding-right:70px}
.pwbs{position:absolute;right:4px;display:flex;gap:3px}
.pwb{background:var(--wh);border:1px solid var(--g200);color:var(--g400);padding:2px 7px;border-radius:4px;cursor:pointer;font-size:10px;font-family:var(--fmono);transition:all .12s;white-space:nowrap}.pwb:hover{border-color:var(--b200);color:var(--b600)}
.role-area{background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rmd);min-height:38px;padding:3px 6px;cursor:text;display:flex;flex-wrap:wrap;gap:3px;align-items:center;transition:border .12s}
.role-area:focus-within{border-color:var(--b400);box-shadow:0 0 0 3px rgba(55,138,221,.1)}
.role-area input{background:none;border:none;outline:none;color:var(--g800);font-size:11px;font-family:var(--fmono);flex:1;min-width:70px;padding:2px 4px}
.rchip-rm{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;background:var(--b50);color:var(--b600);font-family:var(--fmono);border:1px solid var(--b100)}
.rchip-rm .rx{cursor:pointer;opacity:.4;margin-left:2px;font-size:11px;line-height:1}.rchip-rm .rx:hover{opacity:1;color:var(--rd)}
.rdrop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--wh);border:1.5px solid var(--g200);border-radius:var(--rmd);z-index:50;display:none;max-height:170px;overflow-y:auto;box-shadow:0 8px 24px rgba(4,44,83,.12)}.rdrop.open{display:block}
.ropt{padding:6px 11px;font-size:11px;font-family:var(--fmono);color:var(--g600);cursor:pointer}.ropt:hover{background:var(--b50);color:var(--b600)}.ropt .rc{font-size:9px;color:var(--g400);margin-left:4px}

/* Generic row items (URLs, techniciens, VM IPs, identifiants dans form) */
.row-item{display:flex;align-items:center;gap:5px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--rsm);padding:5px 8px;margin-bottom:4px}
.row-item input,.row-item select,.row-item textarea{background:var(--wh);border:1px solid var(--g200);color:var(--g800);padding:4px 7px;border-radius:4px;font-size:11px;font-family:var(--fmono);outline:none;transition:border .12s}
.row-item input:focus,.row-item select:focus{border-color:var(--b400)}
.row-item .ri-label{width:120px;flex-shrink:0}.row-item .ri-val{flex:1}
.uitem-role{font-size:9px;color:var(--g400);padding:1px 4px;background:var(--g100);border-radius:2px}
.url-open-btn{color:var(--b400);display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.url-open-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.row-del{background:none;border:none;color:var(--g300);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;transition:color .12s;flex-shrink:0}.row-del:hover{color:var(--rd)}
.row-edit{background:none;border:none;color:var(--g300);cursor:pointer;font-size:12px;padding:0 2px;line-height:1;transition:color .12s;flex-shrink:0}.row-edit:hover{color:var(--b600)}
.add-row-btn{background:none;border:1.5px dashed var(--g200);color:var(--g400);padding:6px 10px;border-radius:var(--rmd);cursor:pointer;font-size:11px;font-family:var(--fmono);width:100%;text-align:left;transition:all .15s}.add-row-btn:hover{border-color:var(--b200);color:var(--b600);background:var(--b50)}

/* Interface form */
.iform{background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--rsm);padding:7px;margin-bottom:5px}
.iform .irow{display:grid;gap:4px;align-items:center}
.iform input,.iform select{background:var(--wh);border:1px solid var(--g200);color:var(--g800);padding:4px 7px;border-radius:4px;font-size:10px;font-family:var(--fmono);width:100%;outline:none}.iform input:focus,.iform select:focus{border-color:var(--b400)}
.pnum{color:var(--g400);font-size:9px;font-family:var(--fmono);text-align:center;font-weight:700}
.idel{background:none;border:none;color:var(--g300);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;transition:color .12s;flex-shrink:0}.idel:hover{color:var(--rd)}

/* Swatches */
.swatches{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.sw{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .12s}.sw.sel{border-color:var(--g800);transform:scale(1.18)}

/* Confirm */
.conf-ico{font-size:28px;margin-bottom:10px;text-align:center}
.conf-msg{font-size:13px;color:var(--g700);margin-bottom:4px;text-align:center;font-weight:600}
.conf-sub{font-size:11px;color:var(--g400);text-align:center;font-family:var(--fmono)}

/* Buttons */
.btn{padding:8px 18px;border-radius:var(--rmd);font-family:var(--fm);font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .12s}
.btn.prim{background:var(--b600);color:var(--wh)}.btn.prim:hover{background:var(--b700)}.btn.prim:disabled{background:var(--g200);color:var(--g400);cursor:not-allowed}
.btn.sec{background:none;border:1.5px solid var(--g200);color:var(--g600)}.btn.sec:hover{background:var(--g50);border-color:var(--g300)}
.btn.dng{background:none;border:1.5px solid rgba(220,38,38,.3);color:var(--rd)}.btn.dng:hover{background:var(--rd1)}

/* Export */
.export-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.export-opt{border:1.5px solid var(--g200);border-radius:var(--rmd);padding:13px;cursor:pointer;text-align:center;transition:all .15s}
.export-opt:hover{border-color:var(--b200);background:var(--b50)}.export-opt.sel{border-color:var(--b400);background:var(--b50)}
.export-opt .eico{font-size:22px;margin-bottom:5px}.export-opt .etit{font-size:12px;font-weight:700;color:var(--g700)}.export-opt .esub{font-size:10px;color:var(--g400);margin-top:2px;font-family:var(--fmono)}
.exp-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--g700);padding:5px 0;cursor:pointer}.exp-check input{width:14px;height:14px;cursor:pointer}

/* Toast */
.toast{position:fixed;top:58px;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--gn1);color:var(--gn);border:1px solid rgba(22,163,74,.25);padding:9px 18px;border-radius:var(--rmd);font-size:12px;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:all .22s;font-family:var(--fm);white-space:nowrap;box-shadow:0 4px 16px rgba(22,163,74,.12)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.err{background:var(--rd1);color:var(--rd);border-color:rgba(220,38,38,.25);box-shadow:0 4px 16px rgba(220,38,38,.1)}
@keyframes slideup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── SUPERVISION ────────────────────────────────────────────── */
.sv-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}
.sv-section{margin-bottom:18px}
.sv-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--g400);font-family:var(--fmono);padding:5px 0 5px;border-bottom:1.5px solid var(--g200);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sv-host{border:1.5px solid var(--g200);border-radius:var(--rmd);background:var(--wh);box-shadow:var(--shcard);transition:box-shadow .15s;overflow:hidden;display:flex;flex-direction:column}
.sv-host:hover{box-shadow:0 4px 18px rgba(24,95,165,.1),0 0 0 1.5px rgba(55,138,221,.18)}
.sv-host-head{padding:9px 12px;display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--g100);background:var(--g50)}
.sv-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sv-status.online{background:var(--gn)}
.sv-status.warning{background:var(--or)}
.sv-status.offline{background:var(--rd)}
.sv-status.unknown{background:var(--g300)}
.sv-hostname{font-size:12px;font-weight:700;font-family:var(--fmono);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--g800)}
.sv-mode-badge{font-size:8px;padding:1px 6px;border-radius:3px;font-weight:700;font-family:var(--fmono);flex-shrink:0;text-transform:uppercase;letter-spacing:.05em}
.sv-mode-badge.agent{background:var(--b50);color:var(--b600);border:1px solid var(--b100)}
.sv-mode-badge.snmp{background:var(--pu1);color:var(--pu);border:1px solid rgba(83,58,183,.2)}
.sv-mode-badge.collector{background:var(--g100);color:var(--g600);border:1px solid var(--g200);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-agent-ver{font-size:8px;padding:1px 5px;border-radius:3px;font-weight:600;font-family:var(--fmono);border:1px solid;flex-shrink:0;letter-spacing:.02em}
.sv-host-acts{display:flex;gap:3px;flex-shrink:0}
.sv-host-body{padding:10px 12px;flex:1}
.sv-metric{display:grid;grid-template-columns:50px 1fr minmax(70px,auto);align-items:center;gap:7px;margin-bottom:6px}
.sv-metric:last-of-type{margin-bottom:0}
.sv-metric-lbl{font-size:9px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;font-family:var(--fmono)}
.sv-bar-wrap{height:6px;background:var(--g100);border-radius:3px;overflow:hidden}
.sv-bar{height:100%;border-radius:3px;transition:width .3s}
.sv-bar.ok{background:var(--gn)}
.sv-bar.warn{background:var(--or)}
.sv-bar.crit{background:var(--rd)}
.sv-bar.none{background:var(--g300)}
.sv-metric-val{font-size:10px;font-family:var(--fmono);color:var(--g600);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-disks{margin-top:8px;border-top:1px solid var(--g100);padding-top:8px}
.sv-disk{display:grid;grid-template-columns:minmax(90px,130px) 1fr minmax(70px,auto);align-items:center;gap:7px;margin-bottom:5px}
.sv-disk:last-child{margin-bottom:0}
.sv-disk-lbl{font-size:9px;font-family:var(--fmono);color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-disk-fs{font-size:7px;color:var(--g300);margin-left:3px;font-family:var(--fmono);vertical-align:middle}
.sv-host-foot{padding:7px 12px;border-top:1px solid var(--g100);background:var(--g50);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px}
.sv-uptime{font-size:9px;font-family:var(--fmono);color:var(--g400)}
.sv-firmware{font-size:9px;font-family:var(--fmono);color:var(--g400)}
.sv-fw-link{color:var(--b500);text-decoration:none;margin-left:2px}.sv-fw-link:hover{color:var(--b700)}
.sv-vol-dot{font-size:7px;vertical-align:middle;line-height:1}
.sv-vol-dot.ok{color:var(--gn)}.sv-vol-dot.err{color:var(--rd)}.sv-vol-dot.warn{color:var(--or)}
.sv-temps{margin-top:6px;border-top:1px solid var(--g100);padding-top:6px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.sv-temp{font-size:9px;font-family:var(--fmono);color:var(--g500)}
.sv-temp.warm{color:var(--or)}.sv-temp.hot{color:var(--rd)}
.sv-temp.ok{color:var(--gn)}.sv-temp.warn{color:var(--or)}.sv-temp.err{color:var(--rd);font-weight:600}
#sv-refresh-btn.spin .sv-refresh-ico{animation:sv-spin .8s linear infinite}
@keyframes sv-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sv-services{margin-top:8px;border-top:1px solid var(--g100);padding-top:8px;display:flex;flex-direction:column;gap:3px}
.sv-service{display:flex;align-items:center;gap:6px;font-size:9px;font-family:var(--fmono);color:var(--g500)}
.sv-service-dot{font-size:8px;line-height:1;color:var(--g300);flex-shrink:0}
.sv-service-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-service-state{flex-shrink:0;text-align:right}
.sv-service.ok .sv-service-dot,.sv-service.ok .sv-service-state{color:var(--gn)}
.sv-service.warn .sv-service-dot,.sv-service.warn .sv-service-state{color:var(--or)}
.sv-service.err .sv-service-dot,.sv-service.err .sv-service-state{color:var(--rd);font-weight:600}
.sv-temp-sep{font-size:9px;color:var(--g300);font-family:var(--fmono)}
.sv-crumb{flex:1;display:flex;align-items:center;gap:7px;font-family:var(--fmono);font-size:13px;min-width:0;flex-wrap:wrap}
.sv-crumb-link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:13px;color:var(--g400);font-weight:600}
.sv-crumb-link:hover{color:var(--g800);text-decoration:underline}
.sv-crumb-cur{font-weight:700;color:var(--g800)}
.sv-crumb-sep{color:var(--g300);font-weight:400}
.sv-lastseen{font-size:9px;font-family:var(--fmono);color:var(--g400)}
.sv-lastseen.online{color:var(--gn)}
.sv-lastseen.warning{color:var(--or)}
.sv-lastseen.offline{color:var(--rd)}
.sv-ip{font-size:9px;font-family:var(--fmono);color:var(--g400);margin-top:1px}
.sv-no-data{font-size:11px;color:var(--g300);font-family:var(--fmono);padding:18px 0;text-align:center}
.sv-client-pill{font-size:8px;padding:1px 7px;border-radius:20px;font-weight:700;font-family:var(--fmono);color:#fff;flex-shrink:0;white-space:nowrap}
.sv-collectors-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.sv-collector-card{border:1.5px solid var(--g200);border-radius:var(--rmd);background:var(--wh);box-shadow:var(--shcard);padding:14px;cursor:pointer;transition:all .15s}
.sv-collector-card:hover{box-shadow:0 4px 18px rgba(24,95,165,.1);border-color:rgba(55,138,221,.3)}
.sv-collector-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sv-collector-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;font-family:var(--fmono);align-items:center}

/* ── RECAP TABLE ──────────────────────────────────────────── */
.sv-recap-wrap{overflow-x:auto;margin:0 -2px}
.sv-recap-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--fmono)}
.sv-recap-table thead th{padding:7px 10px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g400);border-bottom:1.5px solid var(--g200);background:var(--g50);white-space:nowrap}
.sv-recap-table tbody td{padding:7px 10px;border-bottom:1px solid var(--g100);vertical-align:middle;white-space:nowrap}
.sv-recap-table tbody tr:hover td{background:var(--g50)}
.sv-recap-table thead .rcap-th-icon{text-align:center;width:58px}
.rcap-metric-cell{text-align:center}
.rcap-host-cell{min-width:120px}
.rcap-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:46px}
.rcap-bar-wrap{width:46px;height:4px;background:var(--g100);border-radius:2px;overflow:hidden}
.rcap-bar{height:100%;border-radius:2px;transition:width .3s}
.rcap-bar.ok{background:var(--gn)}.rcap-bar.warn{background:var(--or)}.rcap-bar.crit{background:var(--rd)}.rcap-bar.none{background:var(--g300);width:0}
.rcap-pct{font-size:9px;font-family:var(--fmono);font-weight:600}
.rcap-pct.ok{color:var(--gn)}.rcap-pct.warn{color:var(--or)}.rcap-pct.crit{color:var(--rd)}.rcap-pct.none{color:var(--g300)}

/* ── MESSAGERIE ───────────────────────────────────────────── */
.tab-msg{border-left:1.5px solid var(--g200);margin-left:4px;padding-left:11px}
.msg-panel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));padding-top:4px}
.msg-card{border:1.5px solid var(--g200);border-radius:var(--rmd);background:var(--wh);box-shadow:var(--shcard);overflow:hidden}
.msg-card-header{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1.5px solid var(--g100);background:var(--g50)}
.msg-card-ico{font-size:15px;flex-shrink:0}
.msg-card-title{font-size:11px;font-weight:700;font-family:var(--fmono);color:var(--g600);flex:1}
.msg-card-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.msg-card-footer{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1.5px solid var(--g100);background:var(--g50)}
.msg-card-editing{border-color:var(--b200)}
.msg-edit-btn{padding:3px 7px;margin-left:auto}
.msg-edit-btn svg{width:11px;height:11px;flex-shrink:0}
.msg-panel-full{grid-column:1/-1}
.msg-empty{font-size:11px;color:var(--g400);font-family:var(--fmono);padding:8px 0}
.msg-notes-pre{margin:0;font-family:var(--fmono);font-size:11px;color:var(--g700);white-space:pre-wrap;word-break:break-word;line-height:1.6}
.msg-notes-ta{width:100%;min-height:110px;padding:10px 12px;border:1.5px solid var(--g200);border-radius:var(--rmd);font-family:var(--fmono);font-size:11px;color:var(--g800);background:var(--wh);resize:vertical;outline:none;transition:border .12s;box-sizing:border-box;line-height:1.6}
.msg-notes-ta:focus{border-color:var(--b400);box-shadow:0 0 0 3px rgba(55,138,221,.1)}
.msg-loading{padding:40px;text-align:center;color:var(--g400);font-family:var(--fmono);font-size:12px}

/* ── DOMAINES / DNS CARD ──────────────────────────────────── */
.dns-domain-list{display:flex;flex-direction:column;gap:8px}
.dns-domain-block{border:1.5px solid var(--g150,#eaecf0);border-radius:var(--rsm);background:var(--g50);overflow:hidden}
.dns-domain-row{display:flex;align-items:center;gap:10px;padding:8px 10px}
.dns-records{display:flex;flex-direction:column;gap:1px;padding:0 10px 8px;background:var(--g50)}
.dns-rec{display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:4px;background:var(--wh);border:1px solid var(--g100)}
.dns-rec+.dns-rec{margin-top:4px}
.dns-rec-label{font-family:var(--fmono);font-size:10px;font-weight:700;color:var(--g600);flex-shrink:0;min-width:52px}
.dns-rec-sel{font-weight:400;color:var(--g400)}
.dns-rec-val{font-family:var(--fmono);font-size:10px;color:var(--g700);word-break:break-all;line-height:1.5;flex:1}
.dns-rec-missing{color:var(--g400);font-style:italic}
.dns-rec-ko{background:#fef2f2;border-color:#fecaca}
.dns-rec-copy{flex-shrink:0;align-self:center}
.dns-domain-info{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.dns-domain-name{font-family:var(--fmono);font-size:12px;font-weight:700;color:var(--g800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-whois-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dns-registrar{font-size:10px;color:var(--g600);background:var(--g100);font-family:var(--fmono);padding:1px 6px;border-radius:3px;font-weight:500}
.dns-expiry{font-size:10px;font-family:var(--fmono);font-weight:600;padding:1px 5px;border-radius:3px}
.dns-exp-ok{background:#dcfce7;color:#15803d}
.dns-exp-soon{background:#fef9c3;color:#92400e}
.dns-exp-warn{background:#fee2e2;color:#b91c1c}
.dns-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.dns-checked{font-size:10px;color:var(--g400);font-style:italic}
.dns-changed-pill{font-size:10px;font-weight:700;color:#92400e;background:#fef9c3;border:1px solid #fde68a;padding:1px 7px;border-radius:10px;cursor:pointer;white-space:nowrap}
.dns-changed-pill:hover{background:#fde68a}
.dns-domain-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.dns-badges{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.dns-badge{font-family:var(--fmono);font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:3px;white-space:nowrap;cursor:default}
.dns-badge.dns-ok{background:#dcfce7;color:#15803d}
.dns-badge.dns-ko{background:#fee2e2;color:#b91c1c}
.dns-badge.dns-idle{background:var(--g100);color:var(--g400)}
.dns-sel{font-weight:400;opacity:.75}
.dns-check-btn{padding:4px 7px;flex-shrink:0}
.dns-details-toggle{display:inline-flex;align-items:center;gap:4px;background:var(--g100);border:1px solid var(--g200);border-radius:5px;padding:3px 8px;cursor:pointer;font-size:10px;font-weight:700;font-family:var(--fmono);color:var(--g600);letter-spacing:.03em;flex-shrink:0;white-space:nowrap}
.dns-details-toggle:hover{color:var(--b500,#2b7cd3);border-color:var(--b500,#2b7cd3)}
.dns-details-toggle.open{background:#E6F1FB;color:#0C447C;border-color:#bcdcfa}
.dns-details-caret{display:inline-block;transition:transform .12s;font-size:9px}
.dns-details-toggle.open .dns-details-caret{transform:rotate(90deg)}
.dns-check-all-btn{font-size:11px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px}
.dns-err-msg{font-size:10px;color:#b91c1c;font-family:var(--fmono)}
.dns-edit-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.dns-edit-input{flex:1;padding:6px 10px;border:1.5px solid var(--g200);border-radius:var(--rsm);font-family:var(--fmono);font-size:12px;color:var(--g800);background:var(--wh);outline:none;transition:border .12s}
.dns-edit-input:focus{border-color:var(--b400);box-shadow:0 0 0 3px rgba(55,138,221,.1)}
.dns-edit-input.err{border-color:var(--rd);background:var(--rd1)}
.dns-edit-input.err:focus{box-shadow:0 0 0 3px rgba(220,38,38,.12)}
@keyframes dns-spin{to{transform:rotate(360deg)}}
/* Zone DNS complète */
.dns-zone-toggle-row{margin-top:6px}
.dns-zone-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:4px 2px;cursor:pointer;font-size:10px;font-weight:700;font-family:var(--fmono);color:var(--g600);letter-spacing:.03em}
.dns-zone-toggle:hover{color:var(--b500,#2b7cd3)}
.dns-zone-caret{display:inline-block;transition:transform .12s;font-size:9px}
.dns-zone-caret.open{transform:rotate(90deg)}
.dns-zone-count{background:var(--g100);color:var(--g500);border-radius:8px;padding:0 6px;font-weight:600}
.dns-zone-wrap{margin-top:6px;overflow-x:auto}
.dns-zone-table{width:100%;border-collapse:collapse;font-family:var(--fmono);font-size:10px}
.dns-zone-table th{text-align:left;color:var(--g500);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-bottom:1px solid var(--g150,#eaecf0)}
.dns-zone-table td{padding:4px 8px;border-bottom:1px solid var(--g100);vertical-align:top}
.dns-zone-type{font-weight:700;color:var(--b600,#1d5fa3);white-space:nowrap}
.dns-zone-name{color:var(--g600);word-break:break-all}
.dns-zone-val{color:var(--g800);word-break:break-all;line-height:1.5;position:relative}
.dns-zone-copy{margin-left:6px;vertical-align:middle;opacity:.6}
.dns-zone-copy:hover{opacity:1}
.dns-zone-empty{font-size:10px;color:var(--g400);font-style:italic;padding:4px 2px}
.dns-zone-loading{font-size:10px;color:var(--g500);font-style:italic;padding:6px 2px}
.dns-mx-pri{color:var(--g400);font-weight:700}

/* ── VAULTWARDEN CARD ─────────────────────────────────────── */
.vw-search-row{display:flex;gap:8px;align-items:center}
.vw-search-input{flex:1;padding:6px 10px;border:1.5px solid var(--g200);border-radius:var(--rsm);font-family:var(--fmono);font-size:11px;color:var(--g800);background:var(--wh);outline:none;transition:border .12s}
.vw-search-input:focus{border-color:var(--b400)}
.vw-search-btn{flex-shrink:0;padding:5px 14px;font-size:11px}
.vw-error{font-size:11px;color:#b91c1c;font-family:var(--fmono);padding:6px 10px;background:#fef2f2;border-radius:var(--rsm);border:1px solid #fecaca}
.vw-item{border:1.5px solid var(--g100);border-radius:var(--rsm);padding:10px 12px;display:flex;flex-direction:column;gap:5px;background:var(--g50)}
.vw-item-name{font-size:11px;font-weight:700;font-family:var(--fmono);color:var(--g700);margin-bottom:2px}
.vw-item-row{display:flex;align-items:center;gap:6px}
.vw-item-label{font-size:10px;color:var(--g400);font-family:var(--fmono);width:38px;flex-shrink:0}
.vw-item-val{font-size:11px;color:var(--g800);flex:1;word-break:break-all}
.vw-pw{font-family:var(--fmono);background:var(--wh);padding:2px 7px;border-radius:var(--rsm);border:1.5px solid var(--g200)}