/* ==== Dark theme base (no light switch) ==== */
:root { color-scheme: dark;
  --bg:#0f172a; --card:#111827; --txt:#e5e7eb; --muted:#94a3b8; --accent:#22c55e; --border:#1f2937; --btn:#0b1220;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto}

/* Layout */
.container{max-width:980px;margin:24px auto;padding:0 16px}
.topbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.topbar a{color:var(--txt);text-decoration:none}
.brand{font-weight:700}
.who{margin-left:8px;margin-right:4px;font-size:14px;color:var(--muted)}

/* Cards, forms, controls */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.label{display:block;margin-bottom:6px;color:var(--muted)}
.input,.select{padding:10px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--txt);width:100%;font:16px/1.2 inherit}
.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--btn);color:var(--txt);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#07210f;font-weight:600}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.flash{padding:10px;border-radius:10px;margin-bottom:12px}
.flash.ok{background:rgba(34,197,94,.15);border:1px solid var(--accent);color:var(--txt)}
.flash.err{background:rgba(239,68,68,.15);border:1px solid #ef4444;color:var(--txt)}

/* Nav icons (inline SVG) */
.nav-icons{display:flex;align-items:center;gap:10px}
a.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;text-decoration:none}
a.icon:hover{background:rgba(255,255,255,.06)}
a.icon:focus{outline:2px solid var(--accent);outline-offset:2px}
.svg-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.svg-icon svg{display:block}

/* Dashboard specifics */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}
.grid > .card{text-align:center}
.grid > .card .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.grid > .card .input{text-align:center}
.grid > .card small{display:block;text-align:center}
.edit-panel{margin-top:8px}
.input.error{border-color:#ef4444;box-shadow:inset 0 0 0 2px rgba(239,68,68,.15)}

/* ===== Responsive fixes ===== */
@media (max-width: 768px){
  body{overflow-x:hidden;-webkit-text-size-adjust:100%}
  .container{padding-left:12px;padding-right:12px;margin:16px auto}
  .who{display:none}
  .card{padding:14px;border-radius:10px}
  .grid{gap:10px}
  .actions{flex-direction:column;align-items:center}
  .actions .btn,.actions .input,.actions .select{width:100%;max-width:420px}
  a.icon{width:44px;height:44px}
}


@media (max-width: 420px){
  .brand{font-size:16px}
}

/* Phone hard override: 1 carte par ligne */
@media (max-width: 600px) {
  .container { max-width: 100%; padding: 0 12px; }
  .grid { grid-template-columns: 1fr !important; gap: 10px; }
  .actions { flex-direction: column; align-items: center; }
  .actions .btn, .actions .input, .actions .select { width: 100%; max-width: 420px; }
  .card { margin: 12px auto; }
}

/* === Étire les items du grid par défaut === */
.grid { justify-items: stretch; align-items: stretch; }

/* === Mobile: 1 carte = pleine largeur === */
@media (max-width: 600px) {
  .container { max-width: 100%; padding: 0 12px; }

  .grid {
    grid-template-columns: 1fr !important;   /* 1 colonne */
    justify-items: stretch !important;       /* étire l'item dans la colonne */
    align-items: stretch !important;
    gap: 12px;
  }

  .grid > .card {
    width: 100% !important;
    max-width: none !important;              /* neutralise un éventuel max-width */
    margin-left: 0 !important;               /* évite le centrage */
    margin-right: 0 !important;
    justify-self: stretch !important;        /* ceinture + bretelles */
  }

  /* Spécial login: écrase le style inline (max-width:420px; margin:auto;) */
  .card[style*="max-width"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Onglets catégories */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:9999px;border:1px solid var(--border);background:var(--btn);color:var(--txt);text-decoration:none}
.tab:hover{background:rgba(255,255,255,.06)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#06110a;font-weight:600}

/* Mobile: tabs full width si besoin */
@media (max-width:600px){
  .tabs{justify-content:center}
  .tab{flex:1 0 auto; min-width:120px}
}