/* =========================================
   STCLM – Premium UI (full rewrite)
   ========================================= */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;

  --text:#EAF0FF;
  --muted:rgba(234,240,255,.68);

  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.18);

  --primary1:#7C3AED;
  --primary2:#22D3EE;

  --danger1:#FF5D5D;
  --danger2:#DC2626;

  --shadow1: 0 10px 28px rgba(0,0,0,.35);
  --shadow2: 0 18px 60px rgba(0,0,0,.45);

  --ring: 0 0 0 3px rgba(34,211,238,.14);

  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --r-xs:10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ background: var(--bg0); }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: transparent;
  overflow-x:hidden;
  position:relative;
}

/* Fond global FIXE (anti bug scroll) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 85% -10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 620px at 50% 115%, rgba(124,58,237,.16), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.98; }

.no-scroll{ overflow:hidden; }

.container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px;
}

.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* =========================
   Layout
   ========================= */

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 860px){
  .row{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow1);
  padding:16px;
}

.service-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  padding:14px;
}

.sep{
  border:0;
  height:1px;
  background: rgba(255,255,255,.12);
  margin:14px 0;
}

/* =========================
   Typography
   ========================= */

h2{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.15px;
}
h3{
  margin:0 0 10px 0;
  font-size:15px;
  font-weight:900;
  letter-spacing:.12px;
}
p{ margin:0 0 10px 0; color:var(--muted); }

.small{
  font-size:12px;
  color:var(--muted);
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
}

/* =========================
   Topbar + Nav
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 9999;

  display:flex;
  align-items:center;
  gap:14px;

  padding:14px;
  margin-bottom:16px;

  border-radius: var(--r-lg);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow1);
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 220px;
}
.brand h1{
  margin:0;
  font-size:15px;
  font-weight:900;
}
.brand .sub{
  font-size:12px;
  color:var(--muted);
}

.nav{
  display:flex;
  gap:8px;
  flex:1;
}

/* Menu = mêmes boutons que dashboard, version compacte */
.topbar .nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 8px 12px;
  border-radius: var(--r-xs);

  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: var(--text);

  font-size:13px;
  font-weight: 850;
  letter-spacing:.12px;

  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.topbar .nav a:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
}

.topbar .nav a.active{
  border-color: rgba(124,58,237,.40);
  background: linear-gradient(135deg, rgba(124,58,237,.70), rgba(34,211,238,.22));
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

/* ✅ Seul Ajouter service = primaire tout le temps */
.topbar .nav a[href="add_entry.php"]{
  border-color: rgba(124,58,237,.40);
  background: linear-gradient(135deg, rgba(124,58,237,.88), rgba(34,211,238,.55));
}
.topbar .nav a[href="add_entry.php"]:hover{
  background: linear-gradient(135deg, rgba(124,58,237,.98), rgba(34,211,238,.65));
}

/* Icônes menu */
.topbar .nav a .icon{
  width:15px;
  height:15px;
  opacity:.95;
  display:inline-block;
}
.topbar .nav a .icon svg{
  width:15px; height:15px; display:block;
}
.topbar .nav a .icon svg path,
.topbar .nav a .icon svg polyline,
.topbar .nav a .icon svg line,
.topbar .nav a .icon svg rect{
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.userpill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}

/* Burger */
.burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#EAF0FF;
  margin:4px auto;
  border-radius:4px;
}

/* Drawer */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display:none;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.drawer.open{ display:block; }

.drawer-panel{
  position:absolute;
  right:14px;
  top:14px;
  width:min(92vw, 360px);
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: var(--shadow2);
}

.drawer-link{
  display:flex;
  align-items:center;
  gap:10px;

  margin-top:10px;
  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: var(--text);

  font-weight: 850;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.drawer-link:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
}

/* ✅ Ajouter service primaire aussi dans le drawer */
.drawer-link[href="add_entry.php"]{
  border-color: rgba(124,58,237,.40);
  background: linear-gradient(135deg, rgba(124,58,237,.88), rgba(34,211,238,.55));
}
.drawer-link[href="add_entry.php"]:hover{
  background: linear-gradient(135deg, rgba(124,58,237,.98), rgba(34,211,238,.65));
}

.drawer-link .icon{ width:16px; height:16px; display:inline-block; }
.drawer-link .icon svg{ width:16px; height:16px; display:block; }
.drawer-link .icon svg path,
.drawer-link .icon svg polyline,
.drawer-link .icon svg line,
.drawer-link .icon svg rect{
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width:920px){
  .nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .brand{ min-width: 0; }
}

/* =========================
   Forms
   ========================= */

label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:800;
  color: rgba(234,240,255,.75);
}

input, select, textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-weight:700;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

input[type="date"]{ color-scheme: dark; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(34,211,238,.35);
  box-shadow: var(--ring);
}

select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #EAF0FF 50%),
    linear-gradient(135deg, #EAF0FF 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 13px) 55%;
  background-size: 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}
option{
  background:#0B1020;
  color:#EAF0FF;
}

/* =========================
   Buttons (dashboard)
   ========================= */

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

button, .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 14px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border2);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: var(--text);

  font-size: 13px;
  font-weight: 850;
  letter-spacing: .12px;

  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  cursor:pointer;

  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

button:hover, .btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
}
button:active, .btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
button:focus-visible, .btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px rgba(34,211,238,.25), 0 10px 24px rgba(0,0,0,.32);
}

.btn.primary{
  border-color: rgba(124,58,237,.40);
  background: linear-gradient(135deg, rgba(124,58,237,.88), rgba(34,211,238,.55));
}
.btn.primary:hover{
  background: linear-gradient(135deg, rgba(124,58,237,.98), rgba(34,211,238,.65));
}

.btn.danger{
  border-color: rgba(255,93,93,.45);
  background: linear-gradient(135deg, rgba(255,93,93,.86), rgba(220,38,38,.62));
}
.btn.danger:hover{
  background: linear-gradient(135deg, rgba(255,93,93,.98), rgba(220,38,38,.72));
}

/* Icons inside buttons */
.btn .icon, button .icon{
  width: 16px;
  height: 16px;
  display:inline-block;
  opacity: .95;
  flex: 0 0 auto;
}
.btn .icon svg, button .icon svg{
  width:16px; height:16px; display:block;
}
.btn .icon svg path, .btn .icon svg polyline, .btn .icon svg line, .btn .icon svg rect,
button .icon svg path, button .icon svg polyline, button .icon svg line, button .icon svg rect{
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Compact on small screens */
@media (max-width:520px){
  button, .btn{
    padding: 9px 12px;
    font-size: 12.5px;
  }
  .btn .icon, button .icon{ width:15px; height:15px; }
  .btn .icon svg, button .icon svg{ width:15px; height:15px; }
}

/* =========================
   Alerts
   ========================= */

.ok, .err{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  margin:10px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.ok{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.22);
}
.err{
  background: rgba(255,93,93,.10);
  border-color: rgba(255,93,93,.22);
}
.err a{ text-decoration: underline; }

/* =========================
   Tables
   ========================= */

.table{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.table th, .table td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.table th{
  font-size:12px;
  color: rgba(234,240,255,.75);
  font-weight: 900;
  background: rgba(255,255,255,.04);
}
.table tr:hover td{ background: rgba(255,255,255,.03); }
.table tr:last-child td{ border-bottom:0; }

/* Centrage uniquement pour stats */
.stats .table th,
.stats .table td{ text-align:center; }
.stats .topcard{ padding:12px; border-radius:18px; }

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* =========================
   Historique responsive
   ========================= */

/* Desktop: table visible */
.hist-desktop{ display:block; }
.hist-mobile{ display:none; }

/* Mobile: cards visibles, table cachée */
@media (max-width: 820px){
  .hist-desktop{ display:none; }
  .hist-mobile{ display:block; }
}

.hist-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  margin-top: 12px;
}

.hist-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.hist-date{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .12px;
}

.hist-kind{
  margin-top: 4px;
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,240,255,.92);
}

.hist-details{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.hist-line{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-top: 8px;
  line-height: 1.35;
  font-size: 12.5px;
  color: rgba(234,240,255,.86);
}

.hist-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* bouton détail un peu plus compact dans la card */
.hist-detail-btn{
  padding: 9px 12px;
  font-size: 12.5px;
}

.hist-empty{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}

/* Modal (si tu ne l’avais pas déjà) */
.modal{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.open{ display:flex; }
.modal-panel{
  width: min(92vw, 560px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 14px;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.modal-body{ line-height: 1.5; }

/* =========================
   Historique – Cards (desktop + mobile)
   ========================= */

.history-grid{
  display:grid;
  grid-template-columns: 1fr 1fr; /* bureau: 2 colonnes */
  gap: 12px;
  margin-top: 12px;
}

.history-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
}

.history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.history-date{
  font-weight: 950;
  letter-spacing: .12px;
  margin-top: 2px;
}

.history-kind{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.history-details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px;
}

.history-line{
  font-size: 12.5px;
  color: rgba(234,240,255,.86);
  line-height: 1.45;
  padding: 6px 6px;
  border-radius: 10px;
}

.history-line + .history-line{
  border-top: 1px solid rgba(255,255,255,.08);
}

.history-actions{
  margin-top: 12px;
}

/* Desktop: pas de bouton Détail */
.mobile-only{ display:none; }

/* Responsive */
@media (max-width: 980px){
  .history-grid{ grid-template-columns: 1fr; } /* 1 colonne */
}

/* Mobile: bouton Détail visible + actions compactes */
@media (max-width: 820px){
  .mobile-only{ display:inline-flex; }
  .history-actions .btn{
    padding: 9px 12px;
    font-size: 12.5px;
  }
}

/* Stats détaillées : centrer le contenu des tables, sans casser le reste */
.detailed .table th,
.detailed .table td{
  text-align: center;
}

/* =========================
   Stats détaillées : layout compact + tables centrées
   ========================= */

.detailed{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.detailed .card{ padding: 12px; }
.detailed .service-card{ padding: 10px; border-radius: 16px; }

.detailed h2{ font-size: 16px; }
.detailed h3{ font-size: 14px; }

/* =========================
   Accordéons (stats détaillées)
   ========================= */

.acc{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.acc > summary{ list-style:none; }
.acc > summary::-webkit-details-marker{ display:none; }

.acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.acc-left{ display:flex; align-items:baseline; gap:10px; }
.acc-sub{
  font-size: 12px;
  color: rgba(234,240,255,.65);
  font-weight: 800;
}

.acc-chevron{
  display:inline-flex;
  width: 32px;
  height: 32px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .16s ease;
  opacity: .9;
}

.acc[open] .acc-chevron{ transform: rotate(180deg); }

.acc-body{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Table compacte + centrée dans la page stats détaillées */
.detailed .table th,
.detailed .table td{
  text-align: center;
  padding: 8px 6px;
  font-size: 12.5px;
}

/* Large écran : plus de colonnes */
@media (min-width: 1400px){
  .detailed{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* =========================
   Stats détaillées : résumé vertical + 3 cadres en grille
   ========================= */

.detailed-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* Compact uniquement dans ces 3 cadres */
.detailed{
  padding: 12px;
}
.detailed h2{ font-size: 16px; }
.detailed .table th,
.detailed .table td{
  text-align: center;
  padding: 8px 6px;
  font-size: 12.5px;
}

/* Accordéons (sans "x éléments") */
.acc{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  overflow: hidden;
}
.acc > summary{ list-style:none; }
.acc > summary::-webkit-details-marker{ display:none; }

.acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.acc-left{ display:flex; align-items:baseline; gap:10px; }

.acc-chevron{
  display:inline-flex;
  width: 32px;
  height: 32px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .16s ease;
  opacity: .9;
}
.acc[open] .acc-chevron{ transform: rotate(180deg); }

.acc-body{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* =========================
   Stats détaillées : grille + tailles différentes
   ========================= */

.detailed-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr; /* Bus plus large */
  gap: 12px;
  align-items: start; /* évite que SB/Lignes “s'étirent” comme Bus */
}

@media (max-width: 1100px){
  .detailed-grid{ grid-template-columns: 1fr; }
}

/* Compact uniquement dans ces 3 cadres */
.detailed{ padding: 12px; }
.detailed h2{ font-size: 16px; }

/* SB + Lignes plus "courts" visuellement (moins d'air) */
.detailed-compact .acc{ margin-top: 8px; }
.detailed-compact .acc-head{ padding: 9px 10px; }
.detailed-compact .acc-body{ padding: 8px; }

/* Tables centrées dans stats détaillées */
.detailed .table th,
.detailed .table td{
  text-align:center;
  padding: 8px 6px;
  font-size: 12.5px;
}

/* Accordéons */
.acc{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  overflow:hidden;
}
.acc > summary{ list-style:none; }
.acc > summary::-webkit-details-marker{ display:none; }

.acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.acc-chevron{
  display:inline-flex;
  width: 32px;
  height: 32px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .16s ease;
  opacity:.9;
}
.acc[open] .acc-chevron{ transform: rotate(180deg); }

.acc-body{
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* =========================
   Badges type de jour
   ========================= */
.badge-day{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
  border:1px solid transparent;
}

.badge-day.ROUGE{
  background:rgba(239,68,68,.15);
  color:#fecaca;
  border-color:rgba(239,68,68,.35);
}

.badge-day.ORANGE{
  background:rgba(249,115,22,.18);
  color:#fed7aa;
  border-color:rgba(249,115,22,.35);
}

.badge-day.JAUNE_GRIS{
  background:rgba(234,179,8,.18);
  color:#fde68a;
  border-color:rgba(234,179,8,.35);
}

.badge-day.BLANC{
  background:rgba(226,232,240,.25);
  color:#f8fafc;
  border-color:rgba(226,232,240,.45);
}

/* =========================
   STATS DÉTAILLÉES
   ========================= */

.detailed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* Desktop */
@media (min-width: 900px) {
  .detailed-grid {
    grid-template-columns: 2fr 1.5fr 1.5fr;
    align-items: start;
  }
}

/* Cartes spécifiques */
.card.detailed {
  padding: 14px 16px;
}

.card.detailed h2 {
  margin-bottom: 10px;
}

/* Bus = carte plus large */
.card.detailed-bus {
  grid-column: span 2;
}

@media (max-width: 899px) {
  .card.detailed-bus {
    grid-column: span 1;
  }
}

/* =========================
   ACCORDÉON
   ========================= */

.acc {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}

.acc[open] {
  background: rgba(255,255,255,0.05);
}

.acc-head {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.acc-head::-webkit-details-marker {
  display: none;
}

.acc-chevron {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.acc[open] .acc-chevron {
  transform: rotate(180deg);
}

/* Contenu */
.acc-body {
  padding: 10px 12px 12px;
}

/* =========================
   TABLES COMPACTES
   ========================= */

.card.detailed .table {
  margin-top: 6px;
}

.card.detailed .table th,
.card.detailed .table td {
  text-align: center;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.card.detailed .table th:first-child,
.card.detailed .table td:first-child {
  text-align: left;
}

/* Mobile : ultra lisible */
@media (max-width: 600px) {
  .card.detailed .table th,
  .card.detailed .table td {
    font-size: 0.8rem;
    padding: 6px;
  }
}

.checkgrid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.checkpill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.checkpill input{
  transform: scale(1.05);
}

.checkpill span{
  font-weight:700;
  letter-spacing:.2px;
}

.checkline label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  width:100%;
}

.acc{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.acc > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
.acc > summary::-webkit-details-marker{ display:none; }
.acc .acc-title{ font-weight:800; }
.acc .acc-meta{ font-size:12px; opacity:.75; white-space:nowrap; }
.acc .acc-body{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.acc .chev{ width:18px;height:18px;opacity:.85;transition:transform .18s ease; }
.acc[open] .chev{ transform:rotate(180deg); }

.acc{border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;user-select:none}
.acc>summary::-webkit-details-marker{display:none}
.acc .acc-title{font-weight:800}
.acc .acc-meta{font-size:12px;opacity:.75;white-space:nowrap}
.acc .acc-body{padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.08)}
.acc .chev{width:18px;height:18px;opacity:.85;transition:transform .18s ease}
.acc[open] .chev{transform:rotate(180deg)}

/* Fold (cadre déroulant) */
.fold {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary:after {
  content: "▾";
  opacity: .8;
}
.fold[open] > summary:after {
  content: "▴";
}
.fold-body {
  padding: 12px 14px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}


/* =========================================================
   PREMIUM TABS (sous-onglets)
   - look "glass" cohérent avec les cards
   - actif: halo + soulignement + léger gradient
   - responsive + accessibilité clavier
   ========================================================= */

.tabs{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  padding: 10px;
  border-radius: 16px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  /* effet "premium" */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* petit éclat subtil en haut (option premium) */
.tabs::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(1200px 120px at 10% 0%,
    rgba(255,255,255,.10),
    transparent 60%);
  opacity: .9;
}

.tabs .tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 14px;

  text-decoration: none;
  color: inherit;

  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 6px 16px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    opacity .14s ease;
}

.tabs .tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.tabs .tab:active{
  transform: translateY(0px);
  opacity: .92;
}

/* Indicateur "premium" (soulignement animé) */
.tabs .tab::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 99px;
  background: transparent;
  transform: scaleX(.25);
  transform-origin: center;
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

/* Actif */
.tabs .tab.active{
  background: linear-gradient(180deg,
    rgba(110,168,255,.22),
    rgba(110,168,255,.08));
  border-color: rgba(110,168,255,.45);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(110,168,255,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.tabs .tab.active::after{
  background: linear-gradient(90deg,
    rgba(110,168,255,.95),
    rgba(163,210,255,.75));
  transform: scaleX(1);
  opacity: 1;
}

/* Focus clavier */
.tabs .tab:focus{ outline: none; }
.tabs .tab:focus-visible{
  border-color: rgba(110,168,255,.70);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 3px rgba(110,168,255,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Mobile : onglets en pills + meilleure densité */
@media (max-width: 640px){
  .tabs{
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
  }
  .tabs .tab{
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
  }
  .tabs .tab::after{
    left: 14px;
    right: 14px;
    bottom: 6px;
  }
}

/* Option: si tu as des icônes <span class="icon"> déjà, on les harmonise */
.tabs .tab .icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  opacity: .9;
}
.tabs .tab.active .icon{ opacity: 1; }

/* =========================
   DASHBOARD BUTTONS
   ========================= */

.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--card-bg, #1f2937);
  color: var(--text-main, #fff);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: 
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.dash-btn .icon {
  width: 20px;
  height: 20px;
}

.dash-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.04);
}

/* Bouton principal */
.dash-btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(255,255,255,.15);
}

.dash-btn.primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Bouton avertissement (signalement) */
.dash-btn.warn {
  background: linear-gradient(135deg, #92400e, #78350f);
}

.dash-btn.warn:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
}

/* Mobile */
@media (max-width: 640px) {
  .dash-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* =====================================================
   FIX ICONES SVG (boutons dashboard / onglets)
   ===================================================== */
.icon svg{
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.icon svg path,
.icon svg circle,
.icon svg rect,
.icon svg line,
.icon svg polyline,
.icon svg polygon{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon svg *{
  fill: none !important;
}

.icon svg *{
  fill: none !important;
}

/* =====================================================
   DESIGN SYSTEM — BOUTONS (global)
   Colle tout en bas de assets/style.css
   ===================================================== */

/* Base : s’applique à tous les boutons */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  -webkit-appearance:none;
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);

  color: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;

  text-decoration:none;
  cursor:pointer;
  user-select:none;

  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    opacity .12s ease;
}

/* Hover + Active */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{
  transform: translateY(0px) scale(.99);
  box-shadow: none;
}

/* Focus visible (clavier) */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 0 6px rgba(99,102,241,.25);
}

/* Disabled */
.btn[disabled],
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* Variantes */
.btn.primary,
button.primary{
  background: rgba(99,102,241,.22);
  border-color: rgba(99,102,241,.35);
}
.btn.primary:hover,
button.primary:hover{
  background: rgba(99,102,241,.30);
  border-color: rgba(99,102,241,.45);
}

.btn.danger,
button.danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.30);
}
.btn.danger:hover,
button.danger:hover{
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.40);
}

/* Tailles */
.btn.small,
button.small{
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.btn.block,
button.block,
input[type="submit"].block{
  width: 100%;
}

/* Icônes dans les boutons (évite les gros logos noirs) */
.btn .icon,
button .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

.btn .icon svg,
button .icon svg{
  width: 18px;
  height: 18px;
  display:block;
  flex-shrink:0;
}

.btn .icon svg path,
.btn .icon svg circle,
.btn .icon svg rect,
.btn .icon svg line,
.btn .icon svg polyline,
.btn .icon svg polygon,
button .icon svg path,
button .icon svg circle,
button .icon svg rect,
button .icon svg line,
button .icon svg polyline,
button .icon svg polygon{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   FORCE — Uniformisation boutons (plus spécifique)
   A coller TOUT en bas de assets/style.css
   ===================================================== */

/* Cible boutons + liens utilisés comme boutons */
.grid .btn,
.grid .actions a,
.grid .actions button,
.grid button,
.grid input[type="submit"],
.grid input[type="button"],
.grid input[type="reset"]{
  -webkit-appearance:none !important;
  appearance:none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding: 10px 14px !important;
  border-radius: 12px !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;

  color: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  text-decoration:none !important;
  cursor:pointer !important;
  user-select:none !important;

  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    opacity .12s ease !important;
}

.grid .btn:hover,
.grid .actions a:hover,
.grid .actions button:hover,
.grid button:hover,
.grid input[type="submit"]:hover,
.grid input[type="button"]:hover,
.grid input[type="reset"]:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}

.grid .btn:active,
.grid .actions a:active,
.grid .actions button:active,
.grid button:active,
.grid input[type="submit"]:active,
.grid input[type="button"]:active,
.grid input[type="reset"]:active{
  transform: translateY(0px) scale(.99) !important;
  box-shadow: none !important;
}

.grid .btn:focus-visible,
.grid .actions a:focus-visible,
.grid .actions button:focus-visible,
.grid button:focus-visible,
.grid input[type="submit"]:focus-visible,
.grid input[type="button"]:focus-visible,
.grid input[type="reset"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 0 6px rgba(99,102,241,.25) !important;
}

/* Variantes */
.grid .btn.primary,
.grid .actions a.primary,
.grid .actions button.primary,
.grid button.primary{
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(99,102,241,.35) !important;
}
.grid .btn.primary:hover,
.grid .actions a.primary:hover,
.grid .actions button.primary:hover,
.grid button.primary:hover{
  background: rgba(99,102,241,.30) !important;
  border-color: rgba(99,102,241,.45) !important;
}

.grid .btn.danger,
.grid .actions a.danger,
.grid .actions button.danger,
.grid button.danger{
  background: rgba(239,68,68,.16) !important;
  border-color: rgba(239,68,68,.30) !important;
}
.grid .btn.danger:hover,
.grid .actions a.danger:hover,
.grid .actions button.danger:hover,
.grid button.danger:hover{
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.40) !important;
}

/* Icônes dans boutons */
.grid .btn .icon,
.grid .actions a .icon,
.grid button .icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:.9 !important;
}
.grid .btn .icon svg,
.grid .actions a .icon svg,
.grid button .icon svg{
  width: 18px !important;
  height: 18px !important;
  display:block !important;
  flex-shrink:0 !important;
}
.grid .btn .icon svg * ,
.grid .actions a .icon svg * ,
.grid button .icon svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* =========================
   Tables responsive (mobile)
   ========================= */

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}

/* évite que la table force le layout */
.table{
  width:100%;
  border-collapse:collapse;
}

/* table reports : on limite la casse sur mobile */
.table-reports{
  min-width: 720px; /* desktop OK, mobile scroll propre */
}

/* Sur mobile : card + scroll propre, pas de débordement visuel */
@media (max-width: 720px){
  .card{
    overflow:hidden; /* empêche le “dépassement” */
  }
  .table-wrap{
    margin-left:-12px;   /* optionnel : colle mieux aux bords du card */
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
  }
}

/* =========================
   Reports (mobile cards)
   ========================= */

.report-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.report-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.report-date{
  font-size:18px;
  font-weight:800;
  line-height:1.1;
}

.report-bus{
  text-align:right;
  min-width:72px;
}

.report-busnum{
  font-size:18px;
  font-weight:900;
  line-height:1.1;
}

.report-reason{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.report-reason-txt{
  margin-top:6px;
  font-weight:700;
  line-height:1.35;
  word-break: break-word;
}

.report-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* sécurité anti-débordement mobile */
@media (max-width: 720px){
  .card{ overflow:hidden; }
}

/* =========================
   REPORTS ULTRA (mobile)
   ========================= */

.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:720px){
  .card{ overflow:hidden; } /* anti débordement mobile */
}

.report-grid-ultra{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.report-card-ultra{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

.report-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.report-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.report-bus-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  line-height:1;
  background: rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.28);
}

.report-reason-ultra{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  font-weight:800;
  line-height:1.35;
  word-break: break-word;
}

.report-actions-ultra{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Responsive helpers (FIX)
   ========================= */
.desktop-only{ display:block; }
.mobile-only{ display:none; }

@media (max-width: 720px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:block !important; }
}

/* =====================================================
   PATCH SAFE — ne touche pas au thème, juste fixes
   (à coller tout en bas de assets/style.css)
   ===================================================== */

/* 1) Anti débordement horizontal global */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* 2) Les cards / grids ne doivent jamais dépasser */
.container, .grid, .card { max-width: 100%; }

/* 3) Tables : scroll propre quand nécessaire (mobile) */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{ width:100%; }

/* 4) Dans Historique > Signalements :
      cacher l'ancienne table sur mobile si tu utilises les cards */
@media (max-width: 720px){
  .hist-desktop{ display:none !important; }
  .hist-mobile{ display:block !important; }
}

/* 5) Fix icônes SVG (évite les gros logos noirs) */
.icon svg{
  width: 18px;
  height: 18px;
  display:block;
}
.icon svg path,
.icon svg circle,
.icon svg rect,
.icon svg line,
.icon svg polyline,
.icon svg polygon{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   GRID 2 COLONNES (dashboard)
   ========================= */
.grid.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* Mobile : 1 colonne */
@media (max-width: 900px){
  .grid.two{
    grid-template-columns: 1fr;
  }
}

/* Mobile topbar: garder seulement le titre + burger */
@media (max-width: 920px){
  .topbar{
    justify-content: space-between;
  }
  .brand .sub{ display:none !important; } /* au cas où */
}

/* Drawer user block */
.drawer-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  margin-bottom: 10px;
}

/* bouton logout dans drawer en rouge */
.drawer-link.danger{
  border-color: rgba(255,93,93,.45);
  background: linear-gradient(135deg, rgba(255,93,93,.86), rgba(220,38,38,.62));
}
.drawer-link.danger:hover{
  background: linear-gradient(135deg, rgba(255,93,93,.98), rgba(220,38,38,.72));
}

/* =========================
   Bouton icône seule + Tooltip animé
   ========================= */

.btn.icon-only{
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}

/* force l’icône à être visible même si icon() renvoie juste un svg */
.btn.icon-only .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
}

.btn.icon-only .icon svg{
  width:18px;
  height:18px;
  display:block;
}

/* sécurité : stroke en currentColor */
.btn.icon-only .icon svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tooltip */
.tip{ position:relative; }

.tip::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-6px);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  color: var(--text);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  white-space: nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
}

.tip::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(100% + 4px);
  transform: translateX(-50%) translateY(-6px);
  width:10px;
  height:10px;
  background: rgba(0,0,0,.55);
  border-left:1px solid rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
  transform: translateX(-50%) rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition: opacity .14s ease;
  z-index: 99998;
}

.tip:hover::after,
.tip:hover::before{
  opacity:1;
}
.tip:hover::after{
  transform: translateX(-50%) translateY(0);
}

/* Force view (Dev) */
.force-desktop .mobile-only { display:none !important; }
.force-desktop .desktop-only { display:block !important; }

.force-mobile .desktop-only { display:none !important; }
.force-mobile .mobile-only { display:block !important; }