/* NovaDialer — console. Aucun framework, aucune dependance CDN.
   Objectif tenu : moins de 40 Ko non compresses pour toute la console,
   la ou le dialer etudie charge 1,21 Mo pour un seul ecran. */
:root{
  --bg:#0a0c0f; --pan:#0f1318; --pan2:#141a20; --line:#212932;
  --tx:#e8edf2; --tx2:#93a0ac; --tx3:#5b6874;
  --ac:#4b9bff; --ok:#54c98a; --wa:#e0ae4d; --dn:#e2705a; --qu:#a98bd8;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
button{font:inherit;cursor:pointer}
code,.mono{font-family:var(--mono)}
[hidden]{display:none!important}

/* ---------- shell ---------- */
#shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
aside{background:var(--pan);border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.logo{font-size:17px;font-weight:680;letter-spacing:-.02em;padding:0 8px 4px}
.logo span{color:var(--ac)}
.sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);padding:0 8px 22px}
nav button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;color:var(--tx2);
  padding:8px 9px;border-radius:6px;font-size:13.5px;text-align:left;transition:.12s}
nav button:hover{background:var(--pan2);color:var(--tx)}
nav button.on{background:var(--pan2);color:var(--tx);box-shadow:inset 2px 0 0 var(--ac)}
nav button .d{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
.spacer{flex:1}
.who{font-size:12px;color:var(--tx3);padding:10px 9px;border-top:1px solid var(--line)}
.who b{color:var(--tx2);font-weight:600}
.who button{background:none;border:0;color:var(--tx3);padding:0;font-size:12px;text-decoration:underline}

main{padding:24px 30px 60px;min-width:0}
header.pg{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
header.pg h1{font-size:26px;font-weight:660;letter-spacing:-.025em}
header.pg p{color:var(--tx3);font-size:13px;margin-top:3px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- primitives ---------- */
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--pan);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.card h3{font-size:15px;font-weight:640;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.card .sm{font-size:12px;color:var(--tx3)}
.tile .n{font-size:27px;font-weight:660;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.tile .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-top:2px}
.tile .n.ok{color:var(--ok)} .tile .n.wa{color:var(--wa)} .tile .n.dn{color:var(--dn)}

input,select{background:var(--pan2);border:1px solid var(--line);color:var(--tx);
  padding:7px 10px;border-radius:6px;font:inherit;font-size:13px;outline:none}
input:focus,select:focus{border-color:#31536f}
input::placeholder{color:var(--tx3)}
.btn{background:var(--pan2);border:1px solid var(--line);color:var(--tx2);padding:6px 12px;
  border-radius:6px;font-size:12.5px;transition:.12s}
.btn:hover{color:var(--tx);border-color:#31536f}
.btn.p{background:#173556;border-color:#2a5580;color:#cfe3fb}
.btn.p:hover{background:#1d4269}
.btn.d{color:#e59182;border-color:#4a2a25}
.btn.d:hover{background:#3a1f1b}
.btn:disabled{opacity:.4;cursor:not-allowed}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);
  padding:0 10px 8px 0;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap;user-select:none}
th.s{cursor:pointer} th.s:hover{color:var(--tx2)}
th .ar{color:var(--ac)}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);color:var(--tx2);vertical-align:middle}
tr:hover td{background:#0d1116}
.tw{overflow-x:auto}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.pill.ok{color:var(--ok);border-color:#255741;background:#0f2119}
.pill.wa{color:var(--wa);border-color:#5a4622;background:#211a0e}
.pill.dn{color:var(--dn);border-color:#5c2f27;background:#221310}
.pill.qu{color:var(--qu);border-color:#4a3a63;background:#191428}
.pill.n{color:var(--tx3)}

.bar{height:4px;background:var(--pan2);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac)}
.bar i.ok{background:var(--ok)} .bar i.wa{background:var(--wa)} .bar i.dn{background:var(--dn)}

.gauge{position:relative;height:5px;background:var(--pan2);border-radius:3px;margin:7px 0 4px}
.gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ok)}
.gauge i.wa{background:var(--wa)} .gauge i.dn{background:var(--dn)}
.gauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dn);opacity:.85}

.empty{color:var(--tx3);text-align:center;padding:38px 0;font-size:13.5px}
.err{background:#241413;border:1px solid #5c2f27;color:#e9a99d;padding:9px 13px;border-radius:6px;font-size:13px;margin-bottom:14px}
.why{font-size:12px;color:var(--tx3);font-family:var(--mono);margin-top:6px}
.why b{color:var(--tx2);font-weight:500}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
#login .box{width:100%;max-width:330px}
#login h1{font-size:23px;font-weight:670;letter-spacing:-.025em;margin-bottom:4px}
#login p{color:var(--tx3);font-size:13px;margin-bottom:22px}
#login input{width:100%;margin-bottom:9px;padding:9px 11px}
#login .btn{width:100%;padding:9px;background:#173556;border-color:#2a5580;color:#cfe3fb}

/* ---------- modale ---------- */
.mask{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:var(--pan);border:1px solid var(--line);border-radius:10px;padding:20px 22px;max-width:520px;width:100%}
.modal h3{font-size:16px;font-weight:650;margin-bottom:10px}
.modal .b{font-size:13.5px;color:var(--tx2);margin-bottom:16px}
.modal .b b{color:var(--tx)}

@media(max-width:860px){#shell{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}nav{display:flex;gap:4px}.logo,.sub,.spacer,.who{display:none}main{padding:18px}}