/* Charte commune à toute l'application depuis la refonte : la couleur ne sert qu'à dire un état.
     vert = disponible · ambre = attention · rouge = enregistrement ou problème · bleu = envoi ou attente. */
  :root { --f-title:'Barlow Semi Condensed','Barlow',system-ui,sans-serif; --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; --f-data:'Barlow',system-ui,sans-serif; --f-code:'Azeret Mono',ui-monospace,'SF Mono',Menlo,monospace; --lsk:.3; --r:6px; --rs:5px; }
  /* Mêmes teintes que les écrans de la refonte (rack.css) : ardoise, rouge d'enregistrement, bleu d'envoi, vert disponible, ambre attention. */
  :root[data-theme="dark"] {
    --bg:#1a2130; --surface:#232c3d; --surface2:#2c374b; --border:#3a4760; --border2:#4a5874;
    --text:#e9edf4; --muted:#95a2ba; --accent:#e9edf4; --accent-ink:#10151f;
    --green:#5fd08a; --amber:#f2b347; --red:#f0443a; --blue:#5bb6ff;
    --key:0 1px 0 rgba(0,0,0,.25); --lift:none;
  }
  :root[data-theme="light"] {
    --bg:#e6e9ee; --surface:#f7f8fa; --surface2:#e9ecf1; --border:#bcc5d2; --border2:#a9b4c4;
    --text:#182030; --muted:#5a667c; --accent:#182030; --accent-ink:#ffffff;
    --green:#1c8a4b; --amber:#a96a00; --red:#d2281f; --blue:#1470c4;
    --key:0 1px 0 rgba(0,0,0,.08); --lift:none;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:var(--f-body); background:var(--bg); color:var(--text); font-size:13.5px; font-variant-numeric:tabular-nums; }
  .mono { font-family:var(--f-code); }
  h1,h2,h3 { font-family:var(--f-title); letter-spacing:calc(.05em * var(--lsk)); }
  .m { color:var(--muted); } .g { color:var(--green); } .a { color:var(--amber); } .r { color:var(--red); } .b { color:var(--blue); }

  .topbar { height:50px; display:flex; align-items:center; gap:14px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--border2); position:sticky; top:0; z-index:10; }
  .logo { font-family:var(--f-title); font-weight:700; font-size:17px; letter-spacing:calc(.14em * var(--lsk)); text-transform:uppercase; display:flex; align-items:center; gap:9px; }
  .logo .sq { width:12px; height:12px; border-radius:2px; background:var(--accent); }
  .ver { font-size:11.5px; color:var(--muted); }
  .right { margin-left:auto; display:flex; align-items:center; gap:8px; }
  .tb { font-family:var(--f-data); font-size:12.5px; border:1px solid var(--border2); border-radius:var(--rs); background:var(--surface2); padding:5px 9px; cursor:pointer; color:var(--text); box-shadow:var(--key); }
  .tb b { font-weight:600; } .tb span { color:var(--muted); }

  .shell { display:flex; }
  .side { width:210px; flex:none; padding:12px 8px; border-right:1px solid var(--border2); background:var(--surface); min-height:calc(100vh - 50px); position:sticky; top:50px; align-self:flex-start; }
  .side a { display:flex; align-items:center; gap:10px; padding:7px 11px; color:var(--muted); text-decoration:none; font-family:var(--f-title); font-size:14.5px; font-weight:600; letter-spacing:calc(.08em * var(--lsk)); text-transform:uppercase; border-radius:var(--rs); cursor:pointer; }
  .side a:hover { color:var(--text); background:var(--surface2); }
  .side a.on, .side a.on:hover { color:var(--accent-ink); background:var(--accent); }
  .side .sep { font-size:10.5px; color:var(--muted); margin:14px 11px 5px; letter-spacing:calc(.12em * var(--lsk)); text-transform:uppercase; }
  .main { flex:1; padding:18px 20px 70px; max-width:1500px; min-width:0; }

  .phead { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
  .phead h1 { font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:calc(.1em * var(--lsk)); }
  .phead .sub { color:var(--muted); font-size:12.5px; }
  .phead .actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

  .btn { font-family:var(--f-title); font-size:14px; font-weight:600; letter-spacing:calc(.09em * var(--lsk)); text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border2); border-radius:var(--rs); background:var(--surface2); color:var(--text); padding:6px 13px; cursor:pointer; box-shadow:var(--key); }
  .btn:hover { border-color:var(--accent); }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn.danger { color:var(--red); } .btn.danger:hover { border-color:var(--red); }
  .btn.sm { font-size:12.5px; padding:3px 9px; }
  .btn.rec { color:var(--red); } .btn.rec:hover { border-color:var(--red); }
  .btn.big { font-size:15.5px; padding:9px 18px; }
  .btn.armed { background:var(--red); border-color:var(--red); color:#fff; }
  .btn i.dot { width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.2s infinite; }
  @keyframes pulse { 50% { opacity:.3; } }

  .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--lift); margin-bottom:14px; }
  .panel .ph { font-family:var(--f-title); font-size:14px; font-weight:700; letter-spacing:calc(.14em * var(--lsk)); text-transform:uppercase; display:flex; align-items:center; padding:9px 13px; border-bottom:1px solid var(--border); gap:9px; flex-wrap:wrap; }
  .panel .ph .cnt { margin-left:auto; font-family:var(--f-data); font-size:11.5px; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; display:flex; gap:8px; align-items:center; }
  .panel .pbody { padding:12px 13px; }
  .kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px; }
  .kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--lift); padding:12px 14px; }
  .kpi .lab { font-family:var(--f-title); font-size:12px; font-weight:700; letter-spacing:calc(.14em * var(--lsk)); text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
  .kpi .val { font-size:24px; font-weight:600; } .kpi .det { font-size:11.5px; color:var(--muted); margin-top:4px; }

  table { width:100%; border-collapse:collapse; font-size:12.5px; }
  th { text-align:left; padding:6px 13px; color:var(--muted); font-weight:500; font-size:11px; border-bottom:1px solid var(--border2); letter-spacing:calc(.08em * var(--lsk)); text-transform:uppercase; }
  td { padding:7px 13px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tr.grp td { background:var(--surface2); font-family:var(--f-title); font-weight:700; text-transform:uppercase; letter-spacing:calc(.14em * var(--lsk)); font-size:12.5px; }
  tr.sel td { background:var(--surface2); font-weight:600; }
  td.y { color:var(--green); text-align:center; } td.n { color:var(--border2); text-align:center; } td.p { text-align:center; color:var(--muted); }

  .led { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; vertical-align:-1px; margin-right:6px; }
  .led.g { background:var(--green); } .led.a { background:var(--amber); } .led.r { background:var(--red); animation:pulse 1.2s infinite; } .led.b { background:var(--blue); } .led.off { background:var(--border2); }
  .pill { font-family:var(--f-title); font-size:12px; font-weight:700; letter-spacing:calc(.1em * var(--lsk)); color:var(--text); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-transform:uppercase; }
  .pill::before { content:""; width:8px; height:8px; border-radius:50%; flex:none; background:var(--c, var(--border2)); }
  .pill.live { --c:var(--red); } .pill.ok { --c:var(--green); } .pill.wait { --c:var(--blue); } .pill.warn { --c:var(--amber); } .pill.off { color:var(--muted); }
  .role { font-family:var(--f-title); font-size:11.5px; font-weight:700; letter-spacing:calc(.12em * var(--lsk)); text-transform:uppercase; border:1px solid var(--border2); border-radius:var(--rs); padding:1px 7px; color:var(--muted); }

  .fields { display:grid; grid-template-columns:repeat(4, 1fr); gap:11px 14px; } .fields .w2 { grid-column:span 2; }
  .field label { display:block; font-family:var(--f-title); font-size:12px; font-weight:700; letter-spacing:calc(.12em * var(--lsk)); text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .field input, .field select, input.cell { width:100%; font-family:var(--f-code); font-size:13px; background:var(--bg); border:1px solid var(--border2); border-radius:var(--rs); color:var(--text); padding:7px 10px; }
  .field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
  .field .hint { font-size:11px; color:var(--muted); margin-top:3px; }
  input.cell { padding:4px 8px; }
  .keys { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .key { font-family:var(--f-title); font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:calc(.09em * var(--lsk)); padding:6px 12px; border:1px solid var(--border2); border-radius:var(--rs); background:var(--surface2); color:var(--text); cursor:pointer; box-shadow:var(--key); }
  .key.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; } .check input { accent-color:var(--accent); width:15px; height:15px; }

  .segs { display:inline-flex; gap:3px; vertical-align:middle; }
  .segs i { width:15px; height:15px; border-radius:2px; display:inline-block; border:1px solid var(--border2); background:var(--bg); }
  .segs i.ok { background:var(--green); border-color:var(--green); } .segs i.up { background:var(--amber); border-color:var(--amber); animation:pulse 1.2s infinite; } .segs i.rec { border-color:var(--red); }
  .segs i.dl { cursor:pointer; } .segs i.dl:hover { outline:2px solid var(--accent); }
  .prog { display:inline-block; width:150px; height:8px; border-radius:4px; background:var(--bg); border:1px solid var(--border2); vertical-align:middle; overflow:hidden; margin-right:8px; }
  .prog i { display:block; height:100%; background:var(--green); }

  .flow { display:flex; align-items:stretch; flex-wrap:wrap; gap:0; margin-bottom:10px; }
  .flow .n { flex:1; min-width:140px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:9px 12px; font-size:12.5px; line-height:1.5; }
  .flow .n b { display:block; font-family:var(--f-title); text-transform:uppercase; letter-spacing:calc(.12em * var(--lsk)); font-size:13.5px; margin-bottom:2px; }
  .flow .n.site { border-left:3px solid var(--blue); }
  .flow .ar { display:flex; align-items:center; padding:0 7px; color:var(--muted); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .tree { font-family:var(--f-code); font-size:12.5px; line-height:1.95; } .tree div[class^=l] { color:var(--muted); } .tree b { color:var(--text); font-weight:500; }
  .l1 { padding-left:18px; } .l2 { padding-left:36px; } .l3 { padding-left:54px; } .l4 { padding-left:72px; }

  .login { max-width:340px; margin:26px auto; } .login .field { margin-bottom:11px; }
  @media (max-width:980px) {
    .shell { flex-direction:column; }
    .side { width:auto; min-height:0; position:static; display:flex; flex-wrap:wrap; gap:4px; border-right:none; border-bottom:1px solid var(--border2); align-self:stretch; }
    .side .sep { display:none; } .side a { padding:6px 10px; font-size:13.5px; }
    .panel { overflow-x:auto; }
  }
  @media (max-width:980px) { .kpis, .fields { grid-template-columns:1fr 1fr; } .two { grid-template-columns:1fr; } }

/* --- Application additions (not in the mock-up) --- */
.hidden { display:none !important; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
.msg { font-size:12.5px; padding:8px 11px; border-radius:var(--rs); border:1px solid var(--border2); margin:8px 0; }
.msg.err { color:var(--red); border-color:var(--red); } .msg.ok { color:var(--green); border-color:var(--green); } .msg.warn { color:var(--amber); border-color:var(--amber); }
.secret { font-family:var(--f-code); font-size:13.5px; background:var(--bg); border:1px dashed var(--border2); border-radius:var(--rs); padding:8px 10px; user-select:all; word-break:break-all; }
.empty { color:var(--muted); padding:18px 13px; font-size:12.5px; }
.btn:disabled, .key:disabled { opacity:.45; cursor:not-allowed; }
.link { color:var(--text); cursor:pointer; text-decoration:underline; text-underline-offset:3px; background:none; border:none; font:inherit; }
.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.recbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.recbar input { max-width:240px; }
.bigstate { font-family:var(--f-title); font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:calc(.1em * var(--lsk)); display:flex; align-items:center; gap:8px; }
.alert { color:var(--red); font-weight:600; } .tag { font-family:var(--f-title); font-size:11px; font-weight:700; text-transform:uppercase; border:1px solid var(--border2); border-radius:var(--rs); padding:0 5px; color:var(--muted); margin-left:6px; }
dialog { background:var(--surface); color:var(--text); border:1px solid var(--border2); border-radius:var(--r); padding:0; max-width:520px; width:calc(100% - 30px); }
dialog::backdrop { background:rgba(0,0,0,.55); }
dialog .pbody .field { margin-bottom:11px; }
td.num, th.num { text-align:right; }
tr.clickable { cursor:pointer; } tr.clickable:hover td { background:var(--surface2); }