/* MyTasks — styles communs à l'application (MyTasks.html) et à l'aide (help/*.html) :
   couleurs et thèmes, typographie de base, quelques composants partagés (boutons, étiquettes, texte secondaire). */

/* couleurs : en mode « Système » (aucun attribut data-theme sur <html>), le clair ci-dessous et le sombre du
   @media suivent la préférence du système ; les 9 autres modes d'apparence (paramètres de l'application) posent
   data-theme="…" sur <html>, et leurs règles, plus précises, l'emportent */
:root{
  color-scheme:light;   /* fait passer les contrôles natifs (select, input, ascenseurs…) en clair : sinon leur fond reste blanc en thème sombre */
  --bg:#f4f5f7;--surface:#fff;--surface2:#f9fafb;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;
  --primary:#2563eb;--primary-d:#1d4ed8;--danger:#dc2626;--ok:#16a34a;--warn:#d97706;
  --ok-bg:#dcfce7;--ok-fg:#15803d;--ok-border:#bbf7d0;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
}
/* thème : en mode « Système » (aucune variable posée en ligne par JS), le clair ci-dessus et le sombre ci-dessous suivent prefers-color-scheme ;
   les 10 modes d'apparence des paramètres posent leurs variables (et color-scheme) directement sur <html style="--bg:…">, toujours prioritaire sur ces règles */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--bg:#0f172a;--surface:#1e293b;--surface2:#273449;--text:#e5e7eb;--muted:#94a3b8;--border:#334155;--primary:#3b82f6;--primary-d:#60a5fa;--shadow:0 1px 3px rgba(0,0,0,.4);
    --ok-bg:#14532d;--ok-fg:#bbf7d0;--ok-border:#166534}
}

/* modes d'apparence (paramètres › Autres paramètres › Apparence) — color-scheme fait suivre les contrôles natifs */
:root[data-theme="light"]{color-scheme:light;--bg:#f4f5f7;--surface:#fff;--surface2:#f9fafb;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--primary:#2563eb;--primary-d:#1d4ed8;--danger:#dc2626;--ok-bg:#dcfce7;--ok-fg:#15803d;--ok-border:#bbf7d0;--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0f172a;--surface:#1e293b;--surface2:#273449;--text:#e5e7eb;--muted:#94a3b8;--border:#334155;--primary:#3b82f6;--primary-d:#60a5fa;--danger:#f87171;--ok-bg:#14532d;--ok-fg:#bbf7d0;--ok-border:#166534;--shadow:0 1px 3px rgba(0,0,0,.4)}
:root[data-theme="midnight"]{color-scheme:dark;--bg:#0b1220;--surface:#111a2e;--surface2:#182544;--text:#e2e8f0;--muted:#8ea1c2;--border:#233150;--primary:#5b8def;--primary-d:#7aa2f7;--danger:#f87171;--ok-bg:#0f3d2e;--ok-fg:#86efac;--ok-border:#155e46;--shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="slate"]{color-scheme:dark;--bg:#12171c;--surface:#1a2129;--surface2:#212a34;--text:#e5e9ec;--muted:#8a97a3;--border:#2c3843;--primary:#2dd4bf;--primary-d:#5eead4;--danger:#f87171;--ok-bg:#0d3d38;--ok-fg:#5eead4;--ok-border:#115e56;--shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="forest"]{color-scheme:light;--bg:#f3f6f2;--surface:#fff;--surface2:#eef4ec;--text:#1f2a1f;--muted:#5b6b5a;--border:#d7e3d3;--primary:#2f8f46;--primary-d:#256f37;--danger:#c0392b;--ok-bg:#dcfce7;--ok-fg:#166534;--ok-border:#bbf7d0;--shadow:0 1px 3px rgba(0,0,0,.08)}
:root[data-theme="sunset"]{color-scheme:light;--bg:#fbf3ee;--surface:#fff;--surface2:#fdece1;--text:#3a2a22;--muted:#8a6a58;--border:#f0d9c8;--primary:#e2673d;--primary-d:#c9552e;--danger:#c0392b;--ok-bg:#dcfce7;--ok-fg:#15803d;--ok-border:#bbf7d0;--shadow:0 1px 3px rgba(0,0,0,.08)}
:root[data-theme="violet"]{color-scheme:dark;--bg:#160f23;--surface:#1e1533;--surface2:#271c42;--text:#ece7f7;--muted:#a394c2;--border:#352a52;--primary:#a78bfa;--primary-d:#c4b5fd;--danger:#fb7185;--ok-bg:#1e3a2e;--ok-fg:#86efac;--ok-border:#2d5c47;--shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="contrast"]{color-scheme:light;--bg:#ffffff;--surface:#ffffff;--surface2:#efefef;--text:#000000;--muted:#333333;--border:#000000;--primary:#0000ee;--primary-d:#00008b;--danger:#b30000;--ok-bg:#e6f4ea;--ok-fg:#00441b;--ok-border:#000000;--shadow:0 0 0 1px #000}
:root[data-theme="sepia"]{color-scheme:light;--bg:#f4ecd8;--surface:#fbf6ea;--surface2:#efe4c8;--text:#3b2f1e;--muted:#7a6a4f;--border:#e0d3ad;--primary:#8a5a2b;--primary-d:#6e4720;--danger:#a13d2a;--ok-bg:#e4ecd3;--ok-fg:#4d6b2f;--ok-border:#c9d8ab;--shadow:0 1px 3px rgba(0,0,0,.12)}

/* base */
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.spacer{flex:1}
.dt{color:var(--muted);font-size:12px}

/* boutons */
.btn{border:1px solid var(--border);background:var(--surface);padding:7px 14px;border-radius:7px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:3px 9px;font-size:12px}

/* étiquettes */
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:11px;padding:1px 7px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.tag.due{color:var(--text)}.tag.late{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.tag.today{background:#fef3c7;color:#92400e;border-color:#fde68a}