/* Thème « Santé douce » (ALX-0038, repris de l'outil KIN) : fond vert d'eau
   apaisant, blocs blancs aux grands arrondis sans bordure, formes en pilule.
   Choisi à la création de l'outil (APP_THEME). Les couleurs réglables et leur
   valeur d'origine sont déclarées dans src/themes.js. Les règles propres à un
   module métier (planning, tournée) restent dans l'outil. */

:root {
  /* Couleur principale (boutons, liens, élément de menu actif) : vert soignant */
  --brand: #12805f;
  /* Couleur d'accent (indicateurs secondaires, mises en valeur) : corail doux */
  --accent: #e0774f;

  /* Polices : pile système par défaut, aucune requête externe */
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;

  /* Arrondis : 8px pour un rendu sobre, 14px pour un rendu plus doux */
  --radius: 18px;

  /* Densité : 1 = compacte (bureau), 1.2 = confortable (tablette, téléphone, terrain) */
  --density: 1;

  /* Santé douce : encre vert profond, fond vert d'eau, lignes très légères. */
  --ink: #0f3a30;
  --muted: #557269;
  --bg: #e4f4ee;
  --surface: #ffffff;
  --surface-2: #f2faf6;
  --line: #d6ebe2;
  --line-strong: #bcdccf;
  --halo-1: #d3efe4;
  --halo-2: #fbe9e1;
  --block-bg: var(--surface);
  --shadow-color: 15 70 54;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 5%), 0 4px 14px rgb(var(--shadow-color) / 6%);
  --shadow-md: 0 2px 6px rgb(var(--shadow-color) / 6%), 0 14px 34px rgb(var(--shadow-color) / 11%);
  --shadow-lg: 0 24px 64px rgb(var(--shadow-color) / 18%);
  --topbar-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2bb48a;
    --ink: #def3ea;
    --muted: #9cbcb1;
    --bg: #0b1d18;
    --surface: #12291f;
    --surface-2: #163127;
    --line: #21443a;
    --line-strong: #2d5749;
    --halo-1: #0f2c23;
    --halo-2: #2a1c16;
    --block-bg: var(--surface);
    --on-brand: #04241a;
  }
}

/* Composants, piste « santé douce » ---------------------------------------- */

/* En-tête : blanc translucide, sans trait ; marque ronde ; menu en pilules. */
.topbar { background: color-mix(in oklab, var(--surface) 72%, transparent); border-bottom: 0; box-shadow: 0 6px 24px rgb(var(--shadow-color) / 6%); }
.brand-mark { border-radius: 50%; background: var(--brand); box-shadow: 0 4px 12px color-mix(in oklab, var(--brand) 35%, transparent); }
.nav-link, .nav-item, .user-link, .tab, .filter-chip { border-radius: var(--radius-pill); }
.nav-link { padding: 8px 16px; font-weight: 560; }
.nav-link.is-active { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 12px color-mix(in oklab, var(--brand) 28%, transparent); }
.nav-link.is-active .icon { color: var(--on-brand); }
.nav-link.is-active::after { display: none; }
.nav-dropdown, .bell-panel { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Titres : plus présents, couleur de l'encre. */
h1 { font-weight: 750; letter-spacing: -0.025em; }

/* Blocs : blancs, grands arrondis, ombre verte très douce, sans bordure. */
.card, .stat, .tile { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-muted { background: color-mix(in oklab, var(--brand) 6%, var(--surface)); border: 1px dashed var(--line-strong); }
.tile::before { height: 6px; }
.stat-icon { border-radius: 50%; }

/* Boutons : pilules pleines, couleur unie. */
.btn { border-radius: var(--radius-pill); background: var(--brand); box-shadow: 0 4px 12px color-mix(in oklab, var(--brand) 25%, transparent); }
.btn-secondary { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover { background: color-mix(in oklab, var(--brand) 7%, var(--surface)); color: var(--brand-ink); }
.btn-ghost { box-shadow: none; background: transparent; }
.btn-danger { background: var(--danger); }
.btn-icon { border-radius: 50%; }

/* Pastilles et onglets en pilule ; onglets façon « segmenté ». */
.badge { border-radius: var(--radius-pill); }
.tabs { gap: 6px; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--surface-2); width: fit-content; max-width: 100%; }
.tab.is-active { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.tab.is-active::after { display: none; }

/* Champs : fond vert très pâle, arrondis. */
input:not([type="checkbox"], [type="radio"]), select, textarea { border-radius: calc(var(--radius) * 0.7); background: var(--surface-2); border-color: var(--line); }
input:focus, select:focus, textarea:focus { background: var(--surface); }

/* Tableaux : en-têtes vert d'eau. */
.table th { background: var(--surface-2); color: var(--muted); }

/* Fenêtres : très arrondies, sans bordure. */
.dialog { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Cloche : pastille corail. */
.bell-count { background: var(--accent); }