:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:#0f172a; color:#e2e8f0;
       -webkit-text-size-adjust:100%; }
header { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
         padding:1rem 1.25rem; background:#1e293b; position:sticky; top:0; z-index:10;
         padding-top:max(1rem, env(safe-area-inset-top)); }
header h1 { font-size:1.05rem; margin:0; }
header nav { display:flex; align-items:center; gap:.9rem; font-size:.85rem; }
header a { color:#94a3b8; text-decoration:none; }
header a.active { color:#e2e8f0; font-weight:600; }
main { max-width:820px; margin:1.25rem auto; padding:0 1rem; display:grid; gap:1rem; }
.card { background:#1e293b; border-radius:14px; padding:1.1rem 1.25rem; }
.card h2 { font-size:.95rem; margin:.1rem 0 .8rem; color:#cbd5e1; }
.muted { color:#94a3b8; font-size:.85rem; }
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.b-ok { background:#14532d; color:#86efac; }
.b-warn { background:#7c2d12; color:#fdba74; }
.b-info { background:#334155; color:#cbd5e1; }
.incoming { background:#0f172a; border-left:3px solid #3b82f6; padding:.6rem .8rem; border-radius:8px;
            white-space:pre-wrap; margin:.5rem 0; }
textarea { width:100%; min-height:110px; padding:.6rem .7rem; border-radius:8px; border:1px solid #334155;
           background:#0f172a; color:#e2e8f0; font:inherit; font-size:.92rem; resize:vertical; }
.row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
button { border:0; border-radius:9px; padding:.6rem 1rem; cursor:pointer; font-size:.9rem; color:#fff;
         background:#2563eb; min-height:42px; }
button:hover { filter:brightness(1.1); }
button.ok { background:#16a34a; }
button.warn { background:#b45309; }
button.danger { background:#b91c1c; }
button.ghost { background:#334155; }
input[type=text], input[type=password] { width:100%; padding:.6rem .7rem; border-radius:8px;
           border:1px solid #334155; background:#0f172a; color:#e2e8f0; font-size:1rem; margin:.3rem 0 .8rem; }
label { font-size:.85rem; color:#94a3b8; }
.login { max-width:360px; margin:8vh auto; }
.empty { text-align:center; color:#64748b; padding:2rem 0; }
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:#1e293b;
         border:1px solid #334155; padding:.6rem 1rem; border-radius:8px; font-size:.85rem; opacity:0;
         transition:opacity .3s; pointer-events:none; z-index:20; }
#toast.show { opacity:1; }
/* Menu hamburger (mobile) */
.burger { display:none; background:#334155; color:#e2e8f0; border:0; border-radius:8px;
          font-size:1.25rem; line-height:1; padding:.3rem .65rem; cursor:pointer; min-height:40px; }
@media (max-width:760px){
  header { flex-wrap:wrap; }
  .burger { display:block; }
  header nav { display:none; order:3; width:100%; flex-direction:column; align-items:stretch;
               gap:0; margin-top:.6rem; font-size:.95rem; }
  header.open nav { display:flex; }
  header nav a { padding:.75rem .2rem; border-top:1px solid #334155; }
  header nav a.active { color:#e2e8f0; }
}

/* Sous-menu déroulant « Admin » */
.dropdown { position:relative; }
.dropbtn { color:#94a3b8; background:none; border:0; font:inherit; font-size:.85rem; cursor:pointer;
           padding:0; min-height:auto; display:inline-flex; align-items:center; gap:.25rem; }
.dropbtn:hover { filter:none; color:#e2e8f0; }
.dropbtn.active { color:#e2e8f0; font-weight:600; }
.dropmenu { display:none; position:absolute; right:0; top:calc(100% + .55rem); flex-direction:column;
            background:#1e293b; border:1px solid #334155; border-radius:10px; padding:.4rem; min-width:190px;
            box-shadow:0 10px 28px rgba(0,0,0,.45); z-index:30; }
.dropdown.open .dropmenu, .dropdown:hover .dropmenu { display:flex; }
.dropmenu a { padding:.6rem .65rem; border-radius:7px; white-space:nowrap; }
.dropmenu a:hover { background:#334155; color:#e2e8f0; }
.dropmenu a.active { color:#e2e8f0; font-weight:600; background:#334155; }
@media (max-width:760px){
  .dropdown { width:100%; }
  .dropbtn { width:100%; justify-content:space-between; padding:.75rem .2rem;
             border-top:1px solid #334155; font-size:.95rem; }
  .dropmenu { position:static; background:transparent; border:0; box-shadow:none; padding:0; min-width:0; }
  .dropdown:hover .dropmenu { display:none; }   /* pas d'ouverture au survol sur mobile */
  .dropdown.open .dropmenu { display:flex; }
  .dropmenu a { padding-left:1.4rem; border-top:1px solid #26344b; }
}

/* Tableaux .grid -> cartes empilées sur mobile */
@media (max-width:760px){
  table.grid, table.grid tbody, table.grid tr, table.grid td { display:block; width:100%; }
  table.grid thead { display:none; }
  table.grid tr { border:1px solid #26344b; border-radius:10px; margin-bottom:.8rem;
                  padding:.7rem .8rem; background:#172033; }
  table.grid td { border:0 !important; padding:.45rem 0; }
  table.grid td[data-label]::before { content: attr(data-label); display:block; color:#64748b;
      font-size:.68rem; text-transform:uppercase; letter-spacing:.3px; margin-bottom:.25rem; }
  table.grid .ucell, table.grid .logname { padding-bottom:.5rem; margin-bottom:.3rem; border-bottom:1px solid #26344b; }
  table.grid .ucell b, table.grid .logname b { font-size:1.05rem; }
  table.grid textarea { min-width:0 !important; width:100%; }
  table.grid input:not([type=checkbox]):not([type=radio]), table.grid select { width:100%; }
  table.grid .apts { flex-direction:column; gap:.55rem; }
  table.grid .apts label { font-size:.9rem; }
  table.grid .col-act { display:flex; gap:.5rem; }
  table.grid .col-act button { flex:1; width:auto; margin:0; }
  .tablewrap { overflow-x:visible; }
}

/* ---- Tableaux de listes soignés (« data table ») ---- */
table.dtable { width:100%; border-collapse:collapse; font-size:.9rem; }
table.dtable thead th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px;
    color:#64748b; font-weight:600; padding:.6rem .85rem; border-bottom:1px solid #223449; white-space:nowrap; }
table.dtable thead th.r, table.dtable td.r { text-align:right; }
table.dtable thead th.c, table.dtable td.c { text-align:center; }
table.dtable tbody td { padding:.7rem .85rem; border-top:1px solid #2b3a52; color:#cbd5e1; vertical-align:middle; }
table.dtable tbody tr:first-child td { border-top:0; }
table.dtable tbody tr:hover td { background:#152033; }
table.dtable td.name { font-weight:700; color:#e2e8f0; white-space:nowrap; }
table.dtable td.sub { color:#64748b; font-size:.82rem; white-space:nowrap; }
table.dtable td.cap { text-transform:capitalize; }
table.dtable td.strong { font-weight:700; color:#e2e8f0; }

.pill { display:inline-flex; align-items:center; gap:.3rem; padding:.16rem .6rem; border-radius:999px;
    font-size:.72rem; font-weight:600; line-height:1.5; white-space:nowrap; }
.pill-ok { background:#14532d; color:#86efac; }
.pill-info { background:#0b2545; color:#93c5fd; border:1px solid #1e3a5f; }
.pill-muted { background:#1e293b; color:#94a3b8; border:1px solid #334155; }
.pill-warn { background:#7c2d12; color:#fdba74; }
.pill-green { background:#052e16; color:#4ade80; border:1px solid #14532d; }
.cdot { width:9px; height:9px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:.45rem;
        box-shadow:0 0 0 3px rgba(255,255,255,.05); }

@media (max-width:700px){
  table.dtable, table.dtable tbody, table.dtable tr, table.dtable td { display:block; width:100%; }
  table.dtable thead { display:none; }
  table.dtable tr { border:1px solid #26344b; border-radius:10px; margin-bottom:.7rem;
                    padding:.55rem .8rem; background:#0f172a; }
  table.dtable td { border:0 !important; padding:.35rem 0; text-align:left !important; }
  table.dtable td[data-label]::before { content:attr(data-label) " : "; color:#64748b; font-weight:600;
      font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; }
  table.dtable td.name { font-size:1.02rem; padding-bottom:.35rem; }
  table.dtable td.name[data-label]::before { content:""; }
}

@media (max-width:600px){ main{ margin:.8rem auto; } .card{ padding:1rem; } }