/* ================================================================
   Time4cut - feuille de style commune
   Pensee pour : ecran vitrine lisible a 5 m, ecran tactile patron,
   telephone client. Sombre par defaut (moins fatigant en vitrine).
   ================================================================ */
:root{
  --bg:#0b0f14; --bg2:#121821; --card:#161e29; --line:#22303f;
  --txt:#eef4fb; --muted:#8ba0b6;
  --green:#22c55e; --green-d:#15803d;
  --red:#ef4444; --red-d:#b91c1c;
  --amber:#f59e0b; --blue:#38bdf8;
  --r:18px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#16202c 0%,var(--bg) 60%);
  color:var(--txt);font-family:var(--font);font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-variant-numeric:tabular-nums}
.hide{display:none !important}

/* --- briques --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.row{display:flex;gap:14px;align-items:center}
.col{display:flex;flex-direction:column;gap:14px}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--muted)}
.center{text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:14px;font-weight:600;background:#1d2836;border:1px solid var(--line)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px currentColor}
.badge{padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}

.btn{padding:14px 22px;border-radius:14px;background:#1d2836;border:1px solid var(--line);
  font-weight:700;font-size:16px;transition:.12s;display:inline-flex;align-items:center;gap:10px;justify-content:center}
.btn:hover{background:#243244}
.btn:active{transform:scale(.97)}
.btn.green{background:var(--green-d);border-color:var(--green)}
.btn.red{background:var(--red-d);border-color:var(--red)}
.btn.ghost{background:transparent}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:10px}
.btn.lg{padding:20px 30px;font-size:20px}

input,select{background:#0e141c;border:1px solid var(--line);color:var(--txt);
  padding:12px 14px;border-radius:12px;font-family:inherit;font-size:15px;width:100%}
label{font-size:13px;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid #1a2431}

/* --- la couleur de l'attente ---
   Vert, quoi qu'il arrive. Trois heures d'attente, ce n'est pas une panne :
   c'est un salon qui marche. Le vert dit « ca tourne, l'information est
   juste » — et c'est vrai a 5 min comme a 3 h. L'orange et le rouge
   disaient au client « n'y va pas », ce que personne n'a demande.
   Le rouge est reserve a la seule chose qui soit vraiment un probleme :
   la connexion perdue (.signal.ko sur la page du client).
   Les trois noms restent : c'est le serveur qui les envoie, et le jour ou
   une couleur doit revenir, elle se change ici, en une ligne. */
.lvl-free{--lvl:var(--green)}
.lvl-busy{--lvl:var(--green)}
.lvl-packed{--lvl:var(--green)}
.lvl-closed{--lvl:#64748b}

@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes flashg{0%{box-shadow:0 0 0 0 rgba(34,197,94,.9)}100%{box-shadow:0 0 0 60px rgba(34,197,94,0)}}
@keyframes flashr{0%{box-shadow:0 0 0 0 rgba(239,68,68,.9)}100%{box-shadow:0 0 0 60px rgba(239,68,68,0)}}
.pop{animation:pop .45s ease}
.flash-add{animation:flashg .7s ease-out}
.flash-remove{animation:flashr .7s ease-out}

/* --- bandeau hors ligne --- */
#offline{position:fixed;top:0;left:0;right:0;background:var(--red-d);color:#fff;
  padding:8px;text-align:center;font-weight:700;z-index:99;transform:translateY(-100%);transition:.3s}
#offline.on{transform:none}

/* ---------- administration ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs button{padding:11px 16px;font-weight:700;font-size:14px;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--txt);border-bottom-color:var(--green)}
.chart{position:relative;color:var(--muted)}
.chart-tip{position:absolute;top:6px;right:6px;background:#0b0f14;border:1px solid var(--line);
  color:var(--txt);font-size:13.5px;font-weight:700;padding:6px 11px;border-radius:8px;pointer-events:none}
.chart h4{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:2px}
.chart .sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-actif{background:rgba(34,168,107,.16);color:#3ecf8e}
.st-essai{background:rgba(56,189,248,.16);color:#7dd3fc}
.st-expire{background:rgba(176,133,31,.2);color:#e0b544}
.st-suspendu{background:rgba(208,90,99,.18);color:#f0868d}

/* ---------- tableau de fréquentation hebdomadaire ---------- */
.hm{overflow-x:auto;padding-bottom:4px}
.hmTable{border-collapse:separate;border-spacing:3px;width:100%;min-width:340px}
.hmTable th{padding:0;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:none;letter-spacing:0;border:0;text-align:center;white-space:nowrap}
.hmTable th.day{text-align:right;padding-right:8px;width:1%;font-size:12px}
.hmTable th.day.off{opacity:.45}
.hmTable td{padding:0;border:0}
.cell{height:26px;min-width:26px;border-radius:6px;background:#1b232c;
  transition:transform .1s;cursor:default}
.cell:hover{transform:scale(1.14)}
.cell.shut{background:repeating-linear-gradient(45deg,#39485a,#39485a 3px,#202b38 3px,#202b38 7px)}
.hmLeg{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
/* la legende expliquee en toutes lettres : sur un telephone, les petits carres
   de couleur ne suffisent pas, il faut la phrase en dessous */
.hmMode{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.hmMode b{color:var(--txt)}
.hmMode .l{display:flex;align-items:center;gap:8px;margin-top:7px}
.hmMode .l i{width:17px;height:14px;border-radius:4px;flex:none}
.hmMode .l i.shut{background:repeating-linear-gradient(45deg,#39485a,#39485a 3px,#202b38 3px,#202b38 7px)}
.hmLeg i{width:16px;height:12px;border-radius:3px;display:inline-block}
.hmLeg i.shut{background:repeating-linear-gradient(45deg,#39485a,#39485a 3px,#202b38 3px,#202b38 7px)}
.hmLeg .sep{margin-left:auto;display:flex;align-items:center;gap:5px}