:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --border:#2b3444;
  --text:#e6edf3; --soft:#9aa7b8; --accent:#3b82f6; --accent2:#2563eb;
  --ok:#22c55e; --ko:#ef4444; --warn:#f59e0b; --radius:10px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f6fb; --panel:#ffffff; --panel2:#f0f3f9; --border:#dde3ee;
    --text:#0d1117; --soft:#5a6675; --shadow:0 6px 24px rgba(20,30,60,.10); }
}
*{ box-sizing:border-box; }

/* ---- Icônes SVG (assets/icons.js : copie de la banque du front) ----
 * 1em × 1em et currentColor : l'icône prend la taille et la couleur du texte
 * qui l'entoure. Dans un conteneur flex à `gap`, rien à ajouter ; hors flex,
 * --lead (icône puis texte) / --trail (texte puis icône) posent l'espacement. */
.saIcon{ display:inline-flex; flex:none; width:1em; height:1em; line-height:0;
  vertical-align:-0.15em; color:inherit; }
.saIcon svg{ display:block; width:100%; height:100%; }
.saIcon:empty{ display:none; }
.saIcon--lead{ margin-right:.4em; }
.saIcon--trail{ margin-left:.4em; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#app{ height:100vh; }
a{ color:var(--accent); text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }

/* ---- Login ---- */
.login-wrap{ display:grid; place-items:center; height:100vh; padding:24px; }
.login-card{ width:min(380px,100%); background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:28px; box-shadow:var(--shadow); }
.login-card h1{ margin:0 0 4px; font-size:20px; }
.login-card p{ margin:0 0 20px; color:var(--soft); font-size:13px; }
.login-card .brand{ font-size:30px; line-height:1; color:var(--accent); margin-bottom:10px; }

/* ---- Shell ---- */
.shell{ display:grid; grid-template-columns:238px 1fr; height:100vh; }
.side{ background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.side .logo{ padding:18px 20px; font-weight:700; font-size:16px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--border); }
.side nav{ padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.side nav a{ padding:10px 12px; border-radius:8px; color:var(--soft); font-weight:600; display:flex; gap:10px; align-items:center; }
.side nav a:hover{ background:var(--panel2); color:var(--text); }
.side nav a.active{ background:var(--accent); color:#fff; }
.side .logo .saIcon{ width:20px; height:20px; color:var(--accent); }
.side nav a .saIcon{ width:18px; height:18px; }
.side .foot{ padding:14px; border-top:1px solid var(--border); font-size:12px; color:var(--soft); }
.side .foot button{ margin-top:8px; width:100%; }
.main{ overflow:auto; padding:24px 28px; }
.page-h{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.page-h h2{ margin:0; font-size:20px; }
.page-h .sp{ flex:1; }
.crumb{ color:var(--soft); font-size:13px; margin-bottom:14px; }
.crumb a{ font-weight:600; }

/* ---- Controls ---- */
.btn{ background:var(--panel2); color:var(--text); border:1px solid var(--border);
  padding:8px 14px; border-radius:8px; font-weight:600; }
.btn:hover{ border-color:var(--accent); }
.btn.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.pri:hover{ background:var(--accent2); }
.btn.danger{ color:var(--ko); border-color:transparent; background:transparent; }
.btn.small{ padding:5px 10px; font-size:12.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.search{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border);
  border-radius:9px; padding:8px 12px; min-width:240px; }
.search input{ background:transparent; border:0; outline:none; color:var(--text); width:100%; }
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label{ font-size:12.5px; color:var(--soft); font-weight:600; }
.field input,.field select,.field textarea{ background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; color:var(--text); outline:none; }
.field textarea{ resize:vertical; min-height:84px; font:inherit; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr; } .shell{ grid-template-columns:1fr; } .side{ display:none; } }

/* ---- Cards ---- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px; }
.card h3{ margin:0 0 4px; font-size:15px; display:flex; align-items:center; gap:10px; }
.card .card-sub{ color:var(--soft); font-size:12.5px; margin:0 0 14px; }
.card-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-h .sp{ flex:1; }

/* ---- Lists ---- */
.list{ list-style:none; margin:0; padding:0; }
.row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border);
  border-radius:9px; margin-bottom:8px; background:var(--panel); }
.row:hover{ border-color:var(--accent); }
.row .grow{ flex:1; min-width:0; }
.row .title{ font-weight:600; }
.row .meta{ color:var(--soft); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.click{ cursor:pointer; }
.scroll{ max-height:60vh; overflow:auto; padding-right:4px; }
.sentinel{ height:1px; }
.empty,.loading{ color:var(--soft); text-align:center; padding:22px; }

/* ---- Badges ---- */
.badge{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.ok{ background:rgba(34,197,94,.16); color:var(--ok); }
.badge.ko{ background:rgba(239,68,68,.16); color:var(--ko); }
.badge.muted{ background:var(--panel2); color:var(--soft); }
.badge.warn{ background:rgba(245,158,11,.16); color:var(--warn); }
.badge.pri{ background:rgba(59,130,246,.16); color:var(--accent); }
.count{ color:var(--soft); font-size:13px; font-weight:600; }

/* ---- Toast + modal ---- */
.toasts{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:11px 14px; border-radius:8px; box-shadow:var(--shadow); max-width:360px; }
.toast.ok{ border-left-color:var(--ok); }
.toast.ko{ border-left-color:var(--ko); }
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:40; padding:20px; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px;
  width:min(560px,100%); box-shadow:var(--shadow); max-height:88vh; overflow:auto; }
.modal h3{ margin:0 0 14px; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.err{ color:var(--ko); font-size:13px; margin-top:8px; }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Ordered list editor (domaines / mnemonics) ---- */
.ole{ display:flex; flex-direction:column; gap:8px; }
.ole-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ole-row{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:6px 8px 6px 6px; }
.ole-row:first-child{ border-color:var(--accent); }
.ole-rank{ flex:none; min-width:30px; text-align:center; font-size:11px; font-weight:700; color:var(--soft);
  background:var(--panel2); border-radius:6px; padding:3px 6px; }
.ole-rank.ole-pref{ color:#fff; background:var(--accent); min-width:auto; }
.ole-val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.ole-actions{ flex:none; display:flex; gap:2px; }
.ole-btn{ background:transparent; border:1px solid var(--border); color:var(--text); border-radius:6px;
  width:26px; height:26px; line-height:1; padding:0; }
.ole-btn:hover:not(:disabled){ border-color:var(--accent); }
.ole-btn:disabled{ opacity:.3; cursor:not-allowed; }
.ole-del:hover:not(:disabled){ border-color:var(--ko); color:var(--ko); }
.ole-add{ display:flex; gap:8px; }
.ole-input{ flex:1; background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:8px 11px; color:var(--text); outline:none; }
.ole-input:focus{ border-color:var(--accent); }
.ole-empty{ color:var(--soft); font-size:12.5px; padding:6px 2px; }

/* ---- Tabs ---- */
.tabs-nav{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; }
.tab-btn{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--soft);
  font-weight:600; padding:10px 14px; display:flex; align-items:center; gap:7px; white-space:nowrap; margin-bottom:-1px; }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-btn .saIcon{ width:16px; height:16px; }
.tab-badge{ background:var(--panel2); color:var(--soft); border-radius:999px; font-size:11px; padding:1px 7px; font-weight:700; }
.tab-btn.active .tab-badge{ background:var(--accent); color:#fff; }

/* ---- Monogram avatar ---- */
.monogram{ flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9px;
  color:#fff; font-weight:700; line-height:1; text-transform:uppercase; }

/* ---- Styled select (filtres) ---- */
.std-select{ background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text);
  padding:8px 10px; outline:none; font-weight:600; }
.std-select:focus{ border-color:var(--accent); }

/* ---- Key/value grid (fiches) ---- */
.kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
@media (max-width:640px){ .kv-grid{ grid-template-columns:1fr; } }
.kv{ display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); min-width:0; }
.kv-k{ flex:none; width:130px; color:var(--soft); font-size:12.5px; }
.kv-v{ flex:1; min-width:0; overflow-wrap:anywhere; }
.kv-v.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }

/* ---- Detail header ---- */
.detail-head{ }
.detail-id{ display:flex; align-items:center; gap:14px; }
.detail-name{ font-size:18px; font-weight:700; overflow-wrap:anywhere; }
.detail-sub{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }

/* ---- Persistent save bar ---- */
.save-bar{ display:flex; align-items:center; gap:14px; position:sticky; bottom:0; margin-top:8px;
  padding:12px 2px; background:linear-gradient(to top, var(--bg) 70%, transparent); }

/* ---- Client logo + row bits ---- */
.client-logo{ flex:none; width:38px; height:38px; border-radius:9px; object-fit:contain;
  background:var(--panel2); border:1px solid var(--border); }
.row-badges{ display:flex; gap:6px; align-items:center; flex:none; }
.meta-loading{ opacity:.55; }
.field-input.input-err, .input-err{ border-color:var(--ko) !important; }
.field-hint{ font-size:11.5px; color:var(--soft); }

/* ---- Routines (monitoring cron) ---- */
.rt-chart{ width:100%; height:auto; display:block; }
.rt-legend{ display:flex; gap:12px; flex-wrap:wrap; }
.rt-leg{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--soft); }
.rt-dot{ width:10px; height:10px; border-radius:2px; display:inline-block; }

.rt-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; }
.rt-metric{ background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 10px; text-align:center; }
.rt-metric-v{ font-size:21px; font-weight:800; line-height:1.1; }
.rt-metric-l{ font-size:11px; color:var(--soft); margin-top:4px; }
.rt-metric.ok .rt-metric-v{ color:var(--ok); }
.rt-metric.ko .rt-metric-v{ color:var(--ko); }
.rt-metric.warn .rt-metric-v{ color:var(--warn); }

.rt-warn{ background:rgba(245,158,11,.14); color:var(--warn); border:1px solid rgba(245,158,11,.4);
  border-radius:var(--radius); padding:9px 11px; font-size:13px; font-weight:650; margin-bottom:10px; }

.rt-infras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.rt-infra{ border:1px solid var(--border); border-radius:var(--radius); padding:10px 11px; background:var(--panel2); }
.rt-infra-h{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.rt-nodes{ display:flex; flex-direction:column; gap:6px; }
.rt-node{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:12.5px; }
.rt-node-ip{ font-weight:700; font-family:ui-monospace,monospace; }
.rt-node-host{ color:var(--soft); font-family:ui-monospace,monospace; font-size:11.5px; }
.rt-node-meta{ color:var(--soft); font-size:11px; margin-left:auto; }

.rt-hbars{ display:flex; flex-direction:column; gap:7px; }
.rt-hbar{ display:flex; align-items:center; gap:8px; }
.rt-hbar-label{ width:170px; font-size:12px; font-family:ui-monospace,monospace; text-align:right;
  color:var(--soft); flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt-hbar-track{ flex:1; background:var(--panel2); border-radius:5px; height:16px; overflow:hidden; }
.rt-hbar-fill{ height:100%; background:var(--accent); border-radius:5px; min-width:2px; }
.rt-hbar-val{ width:46px; font-size:12px; font-weight:700; text-align:right; }

.rt-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:820px){ .rt-two{ grid-template-columns:1fr; } .rt-hbar-label{ width:110px; } }

.rt-pill{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px;
  border:1px solid var(--soft); background:transparent; white-space:nowrap; }

.rt-detail{ display:flex; flex-direction:column; gap:12px; }
.rt-sql{ border-top:1px solid var(--border); padding-top:10px; }
.rt-sql-h{ font-weight:700; font-size:13px; margin-bottom:8px; }
.rt-sql-row{ background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:6px; }
.rt-sql-q{ display:flex; gap:6px; }
.rt-sql-q code{ font-family:ui-monospace,monospace; font-size:12px; white-space:pre-wrap; word-break:break-word; }
.rt-sql-n{ color:var(--soft); flex:none; }
.rt-sql-meta{ color:var(--soft); font-size:11px; margin-top:3px; }
.rt-sql-params{ background:var(--bg); border-radius:6px; padding:6px 8px; font-size:11.5px; margin:5px 0 0;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,monospace; }
.rt-extra{ border-top:1px solid var(--border); padding-top:10px; }
.rt-modal-list .list{ max-height:58vh; overflow:auto; }

/* ---- Audit · détail d'une alerte de sécurité / rétro-ingénierie ---- */
.modal:has(.rev-detail){ width:min(880px,100%); }
.rev-detail{ display:flex; flex-direction:column; gap:12px; }
.rev-sec{ border:1px solid var(--border); border-radius:9px; background:var(--panel2); overflow:hidden; }
.rev-sec-h{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-weight:700; font-size:13px;
  background:var(--bg); border-bottom:1px solid var(--border); }
.rev-sec-h.click{ cursor:pointer; user-select:none; }
.rev-caret{ color:var(--soft); font-size:11px; width:12px; }
.rev-sec-b{ padding:10px 12px; }
.rev-kvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
@media (max-width:640px){ .rev-kvgrid{ grid-template-columns:1fr; } }
.rev-kv{ display:flex; gap:10px; padding:3px 0; min-width:0; align-items:baseline; }
.rev-k{ color:var(--soft); font-size:12px; flex:none; min-width:118px; }
.rev-v{ font-size:12.5px; word-break:break-word; overflow-wrap:anywhere; }
.rev-json{ background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:9px 11px; margin:6px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-height:340px; overflow:auto; }
.rev-sec .rev-sec{ margin-top:8px; }

/* --- Paramètres > Notifications push : un bloc par plateforme (enum SQL) --- */
.push-list{ display:flex; flex-direction:column; gap:14px; }
.push-plat{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 14px 4px; }
.push-plat > .card-h:first-child strong{ font-size:14px; }
.push-meta{ color:var(--soft); font-size:12.5px; margin:-4px 0 12px; overflow-wrap:anywhere; }
.push-note{ color:var(--warn); font-size:12.5px; margin:-4px 0 12px; }
.push-plat textarea{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; min-height:120px; }
.push-plat .card-h{ flex-wrap:wrap; }

/* --- Fiche client > Crédits SMS (dotations super-admin) ------------------- */
.sms-card .kv-v{ font-weight:600; font-variant-numeric:tabular-nums; }
.sms-list{ margin:4px 0 0; max-height:220px; overflow:auto; }
.sms-line{ display:flex; gap:10px; align-items:baseline; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12.5px; }
.sms-line:last-child{ border-bottom:0; }
.sms-n{ flex:none; min-width:78px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.sms-n.pos{ color:var(--ok); }
.sms-n.neg{ color:var(--ko); }
.sms-when{ flex:none; color:var(--soft); }
.sms-why{ color:var(--soft); overflow-wrap:anywhere; }
.sms-form{ display:grid; grid-template-columns:190px 1fr auto; gap:10px; align-items:end;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
@media (max-width:640px){ .sms-form{ grid-template-columns:1fr; } }