/* Shared styles for Emploi & Logement queue app */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --muted:#475569;
  --border:#e2e8f0;
  --blue:#2563eb;
  --cyan:#0ea5e9;
  --green:#16a34a;
  --gray:#64748b;
  --red:#ef4444;
  --amber:#f59e0b;
}

*{ box-sizing:border-box; }
body{ font-family: Arial, sans-serif; background:var(--bg); margin:0; padding:20px; }
h1{
  text-align:center; margin:0 0 10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:1.4rem; flex-wrap:wrap;
}
.logo{ height:46px; }
@media (max-width:600px){ h1{ font-size:1.15rem; } .logo{ height:38px; } }

.container{ max-width:1500px; margin:auto; background:var(--card); padding:16px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1); }

/* Top nav (separate files) */

.section{ margin-top:14px; padding:14px; border-radius:10px; }
.wait{ background:#f8fafc; }
.council{ background:#ecfeff; border:2px solid #22d3ee; }
.trash{ background:#fff7ed; border:2px dashed #fb923c; }
.stats{ background:#eff6ff; }
.history{ background:#f1f5f9; border:1px solid #cbd5e1; }
.advisor{ background:#fdf4ff; border:1px solid #f5d0fe; }
.superv{ background:#f0fdf4; border:1px solid #bbf7d0; }

.form-group{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select{ padding:8px; border-radius:10px; border:1px solid #cbd5e1; font-size:14px; }
.hint{ font-size:12px; color:var(--muted); margin-top:6px; }
.small{ font-size:12px; color:var(--muted); }

.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; margin-top:10px; }
th, td{ padding:10px; text-align:center; border-bottom:1px solid #e5e7eb; vertical-align:top; }
th{ background:var(--blue); color:#fff; }

.person-line{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:10px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08); margin:8px 0;
}
.person-left{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.person-name{ font-weight:800; }
.wait-time{ font-size:12px; color:var(--muted); }
.alert{ color:#dc2626; font-weight:800; }

.badge{ font-size:12px; padding:2px 8px; border-radius:999px; background:#e2e8f0; color:#334155; }
.badge-depot{ background:#dcfce7; color:#166534; }
.badge-left{ background:#fee2e2; color:#991b1b; }
.badge-seat{ background:#dbeafe; color:#1e40af; }
.badge-test{ background:#fef3c7; color:#92400e; border:1px solid #f59e0b; }

button{ padding:8px 11px; border-radius:10px; border:none; cursor:pointer; font-size:12px; color:#fff; font-weight:800; }
button:hover{ filter:brightness(0.95); }
.btn-primary{ background:var(--blue); }
.btn-council{ background:var(--cyan); }
.btn-restore{ background:var(--green); }
.btn-neutral{ background:var(--gray); }
.btn-danger{ background:var(--red); }
.btn-subtle{
  background:transparent; color:#6b7280;
  padding:6px 10px;
  border:1px solid rgba(107,114,128,.35);
  border-radius:999px;
  font-size:12px; font-weight:800;
}
.btn-subtle:hover{ background:rgba(107,114,128,.08); filter:none; }

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
.stat-card{ background:#fff; padding:12px; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); text-align:center; }
.stat-card strong{ display:block; margin-bottom:6px; }

.toggle{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(107,114,128,.35);
  background:#fff;
}
.toggle input{ transform:scale(1.1); }
.test-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Advisor layout */
.advisor-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:12px; margin-top:10px; }
@media (max-width:1000px){ .advisor-grid{ grid-template-columns:1fr; } }
.advisor-card{ background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.bigcall{ background:var(--green); padding:14px 14px; border-radius:14px; font-size:14px; width:100%; }

/* Supervision */
.svc-ok{ color:var(--green); font-weight:900; }
.svc-warn{ color:var(--amber); font-weight:900; }
.svc-bad{ color:var(--red); font-weight:900; }
.charts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; margin-top:12px; }
.chart-card{ background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.chart-title{ font-weight:900; margin:0 0 8px; color:#0f172a; }

/* History tabs */
.tabs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tab-btn{
  background:#e2e8f0; color:#0f172a; border:none; border-radius:999px;
  padding:7px 12px; cursor:pointer; font-size:12px; font-weight:900;
}
.tab-btn.active{ background:#0f172a; color:#fff; }
.tab-panel{ display:none; margin-top:10px; }
.tab-panel.active{ display:block; }
.history-table th, .events-table th{ background:#334155; }

/* Recipients */
.recipients-box{
  margin-top:10px; padding:12px; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.recipient-row{
  display:flex; gap:10px; align-items:center;
  padding:6px 8px; border-radius:10px; border:1px solid #e2e8f0;
  margin:6px 0; background:#fff;
}
.recipient-row .spacer{ margin-left:auto; }
.recipient-row input[type="checkbox"]{ transform:scale(1.1); }

/* Mobile cards for wait table */
@media (max-width: 900px){
  #waitTable thead{ display:none; }
  #waitTable, #waitTable tbody, #waitTable tr, #waitTable td{ display:block; width:100%; }
  #waitTable tr{
    background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px;
    margin:12px 0; box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  #waitTable td{ text-align:left; border:none; padding:8px 0; }
  #waitTable td:nth-child(1)::before{ content:"Bloc : "; font-weight:800; color:#334155; }
  #waitTable td:nth-child(2)::before{ content:"En attente : "; font-weight:800; color:#334155; }
  #waitTable td:nth-child(3)::before{ content:"Temps estimé : "; font-weight:800; color:#334155; }
  #waitTable td:nth-child(4)::before{ content:"Personnes : "; font-weight:800; color:#334155; display:block; margin-bottom:6px; }
  #waitTable td:nth-child(4){ padding-top:10px; }

  .person-line{ flex-direction:column; align-items:stretch; gap:10px; }
  .person-actions{ display:flex; gap:10px; width:100%; }
  .person-actions button{ flex:1; }
}