/* ====== Palette & thèmes ====== */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --border: #e5e7eb;
    --text: #0f172a;
    --text-muted: #475569;
    --primary: #9147ff;
    --primary-contrast: #ffffff;
    --ok: #16a34a;
    --warn: #f59e0b;
    --err: #ef4444;
    --soft: #eef2ff;
    --ring: rgba(145,71,255,.35);
    color-scheme: light;
  }
  
  /* Auto (par défaut) : suit l’OS SI aucun data-theme n’est forcé */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1117;
      --surface: #131826;
      --surface-2: #0b0f1a;
      --border: #2b3245;
      --text: #e5e7eb;
      --text-muted: #94a3b8;
      --primary: #a970ff;
      --primary-contrast: #0b0f1a;
      --ok: #22c55e;
      --warn: #f59e0b;
      --err: #ef4444;
      --soft: #1b2031;
      --ring: rgba(169,112,255,.45);
      color-scheme: dark;
    }
  }
  
  /* Forces */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="light"] :root, [data-theme="light"] {
    --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9; --border:#e5e7eb; --text:#0f172a; --text-muted:#475569;
    --primary:#9147ff; --primary-contrast:#ffffff; --ok:#16a34a; --warn:#f59e0b; --err:#ef4444; --soft:#eef2ff; --ring:rgba(145,71,255,.35);
  }
  [data-theme="dark"] { color-scheme: dark; }
  [data-theme="dark"] :root, [data-theme="dark"] {
    --bg:#0f1117; --surface:#131826; --surface-2:#0b0f1a; --border:#2b3245; --text:#e5e7eb; --text-muted:#94a3b8;
    --primary:#a970ff; --primary-contrast:#0b0f1a; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --soft:#1b2031; --ring:rgba(169,112,255,.45);
  }


  
  /* ====== Base ====== */
  html, body { background: var(--bg); color: var(--text); }
  a { color: var(--primary); }
  .small { color: var(--text-muted); }
  
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-top:10px;}
  .list-item { background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; padding: .6rem .7rem; display:flex; gap:.6rem; align-items:center; }
  .empty { color: var(--text-muted); background: var(--surface-2); border: 1px dashed var(--border); padding:.7rem; border-radius:.5rem; }
  
  /* Inputs */
  .admin-input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="datetime-local"], select, textarea {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: .5rem; padding: .55rem .7rem; outline: none;
  }
  .admin-input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--ring); border-color: var(--primary); }
  
  /* Boutons */
  .btn { background: var(--primary); color: var(--primary-contrast); border: 1px solid var(--primary); border-radius: .5rem; padding: .5rem .8rem; cursor:pointer; }
  .btn:hover { filter: brightness(1.05); }
  .btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
  .btn.danger { background: var(--err); border-color: var(--err); color:#fff; }
  .btn.warning { background: var(--warn); border-color: var(--warn); color:#111; }
  .btn[disabled] { opacity:.6; cursor:not-allowed; }
  
  /* Badges / onglets / table */
  .badge { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding:.2rem .45rem; border-radius:.5rem; font-weight:600; }
  .badge.admin { border-color: var(--primary); }
  
  .tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); }
  .tab { padding:.45rem .7rem; border:1px solid transparent; border-radius:.5rem .5rem 0 0; background: transparent; cursor:pointer; }
  .tab.active { background: var(--surface); border-color: var(--border) var(--border) transparent var(--border); }
  
  .table { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; border-collapse: separate; border-spacing: 0; width: 100%; }
  .table th, .table td { border-bottom: 1px solid var(--border); padding: .6rem .7rem; }
  .table thead th { background: var(--surface-2); color: var(--text); }
  
  /* Switch */
  .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-2); transition: .2s; border-radius: 24px; border:1px solid var(--border);}
  .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 2px; background-color: var(--surface); transition: .2s; border-radius: 50%; box-shadow: 0 1px 1px rgba(0,0,0,.2); }
  input:checked + .slider { background-color: rgba(145,71,255,.22); border-color: var(--primary); }
  input:checked + .slider:before { transform: translateX(20px); }
  
  /* Messages */
  .rs-message-box { padding: 12px; border-radius: 8px; margin-bottom: 16px; color: var(--text); background: var(--surface-2); border:1px solid var(--border); }
  .rs-message-box.success { background: #0b7a2022; border-color: #15803d; color: var(--text); }
  .rs-message-box.error { background: #7f1d1d22; border-color: #991b1b; color: #fff; }
  
  /* Bouton de thème (petit, rond) */
  .theme-toggle.btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; font-weight:700; }
  