/* ==========================================================================
   QALIS NOVA — Thème clair (light mode)
   Chargé après style.css : surcharge les jetons et les zones encore sombres
   (barre latérale, connexion, notifications). Tous les sélecteurs sont
   préfixés par body.light-mode pour primer sur les couches existantes.
   ========================================================================== */

body.light-mode {
  --bg-primary: #f3f5f8;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fafbfc;
  --border-color: #e2e6ed;
  --border-highlight: #c8d1de;
  --text-primary: #18202f;
  --text-secondary: #566074;
  --text-muted: #8a93a4;
  --accent-cyan: #1f3a5f;
  --accent-blue: #2f5b8f;
  --accent-gradient: linear-gradient(135deg, #1f3a5f 0%, #2f5b8f 100%);

  --qn-ink: #18202f;
  --qn-ink-soft: #2a3448;
  --qn-gold: #c48a26;
  --qn-gold-soft: #fbf3e3;
  --qn-blue: #2f5b8f;
  --qn-blue-soft: #eaf1f9;
  --qn-surface-raised: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  --qn-focus-ring: 0 0 0 3px rgba(47, 91, 143, 0.16);

  --shadow-xs: 0 1px 2px rgba(24, 32, 47, 0.06);
  --shadow-sm: 0 1px 2px rgba(24, 32, 47, 0.05), 0 4px 12px -4px rgba(24, 32, 47, 0.08);
  --shadow-md: 0 2px 4px rgba(24, 32, 47, 0.04), 0 14px 34px -14px rgba(24, 32, 47, 0.2);
  --shadow-lg: 0 4px 10px rgba(24, 32, 47, 0.05), 0 28px 60px -24px rgba(24, 32, 47, 0.32);
  --shadow-main: var(--shadow-md);

  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(1100px 520px at 105% -8%, rgba(196, 138, 38, 0.09), transparent 62%),
    radial-gradient(900px 520px at -12% 108%, rgba(47, 91, 143, 0.08), transparent 60%),
    linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
  background-size: auto;
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Barre latérale
   -------------------------------------------------------------------------- */
body.light-mode .sidebar {
  color: var(--text-primary);
  background: linear-gradient(180deg, #ffffff 0%, #f9fafc 100%);
  border-right: 1px solid var(--border-color);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.8) inset, 8px 0 30px -18px rgba(24, 32, 47, 0.18);
}

body.light-mode .brand {
  border-color: var(--border-color);
}

/* Le logo est blanc : on le pose sur une tuile graphite pour garder le contraste */
body.light-mode .brand-logo {
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, #2a3448 0%, #121826 100%);
  box-shadow: 0 0 0 1px rgba(196, 138, 38, 0.35), 0 8px 18px -8px rgba(18, 24, 38, 0.6);
}

body.light-mode .brand-text h2 { color: var(--qn-ink); }
body.light-mode .brand-text p,
body.light-mode .brand-text > span { color: var(--text-muted); }
body.light-mode .brand-text .brand-activity { color: var(--qn-gold); }

body.light-mode .nav-item {
  position: relative;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.light-mode .nav-item i { color: #7b8597; }

body.light-mode .nav-item:hover {
  color: var(--qn-ink);
  background: #f1f4f8;
}

body.light-mode .nav-item.active {
  color: var(--qn-ink);
  font-weight: 650;
  background: var(--qn-surface-raised);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-color);
}

body.light-mode .nav-item.active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #d9a443 0%, var(--qn-gold) 100%);
}

body.light-mode .nav-item.active i { color: var(--qn-gold); }

body.light-mode .nav-item .badge {
  color: #fff;
  background: var(--qn-gold);
  box-shadow: 0 2px 6px -2px rgba(196, 138, 38, 0.7);
}

body.light-mode .nav-item .badge.secondary {
  color: var(--text-secondary);
  background: #edf0f5;
  box-shadow: none;
}

body.light-mode .user-card {
  background: var(--qn-surface-raised);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

body.light-mode .avatar {
  color: #fff;
  background: linear-gradient(145deg, #2a3448 0%, #121826 100%);
}

body.light-mode .user-info .name { color: var(--qn-ink); }
body.light-mode .user-info .role { color: var(--text-muted); }
body.light-mode .btn-logout { color: var(--text-muted); }
body.light-mode .btn-logout:hover { color: #c2410c; background: #fff4ed; }

/* --------------------------------------------------------------------------
   Zone principale
   -------------------------------------------------------------------------- */
body.light-mode .topbar {
  border-bottom-color: var(--border-color);
}

body.light-mode .page-eyebrow { color: var(--qn-gold); }
body.light-mode .page-title h1 { color: var(--qn-ink); }

body.light-mode .glass-panel,
body.light-mode .kpi-card,
body.light-mode .intervention-card,
body.light-mode .agenda-planning-wrapper {
  background: var(--qn-surface-raised);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}

body.light-mode .kpi-card {
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.light-mode .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

body.light-mode .kpi-card::before {
  background: linear-gradient(180deg, #d9a443 0%, var(--qn-gold) 100%);
}

body.light-mode .kpi-icon {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 47, 0.04);
}

body.light-mode .kpi-value { color: var(--qn-ink); }

body.light-mode .glass-panel { border-radius: 12px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
body.light-mode .btn {
  border-radius: 8px;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}

body.light-mode .btn:active { transform: translateY(1px); }

body.light-mode .btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #2c3649 0%, #18202f 100%);
  border: 1px solid #141b28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(24, 32, 47, 0.55);
}

body.light-mode .btn-primary:hover {
  background: linear-gradient(180deg, #364259 0%, #1e2739 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 20px -8px rgba(24, 32, 47, 0.55);
}

body.light-mode .btn-secondary {
  color: var(--qn-ink);
  background: var(--qn-surface-raised);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

body.light-mode .btn-secondary:hover {
  background: #f6f8fb;
  border-color: var(--border-highlight);
}

body.light-mode .btn-text { color: var(--qn-blue); }

/* --------------------------------------------------------------------------
   Formulaires et tableaux
   -------------------------------------------------------------------------- */
body.light-mode .input-field,
body.light-mode .select-field,
body.light-mode textarea {
  color: var(--text-primary);
  background: #ffffff;
  border: 1px solid #d8dee8;
  box-shadow: inset 0 1px 2px rgba(24, 32, 47, 0.04);
}

body.light-mode .input-field:focus,
body.light-mode .select-field:focus,
body.light-mode textarea:focus {
  border-color: var(--qn-blue);
  box-shadow: var(--qn-focus-ring);
  outline: none;
}

body.light-mode .data-table th {
  color: var(--text-secondary);
  background: linear-gradient(180deg, #fafbfc 0%, #f3f5f8 100%);
  border-bottom: 1px solid var(--border-color);
}

body.light-mode .data-table td { border-bottom-color: #edf0f4; }
body.light-mode .data-table tbody tr:hover { background: #f8fafc; }

/* --------------------------------------------------------------------------
   Modales et notifications
   -------------------------------------------------------------------------- */
body.light-mode .modal-backdrop {
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(4px);
}

body.light-mode .modal-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

body.light-mode .toast {
  color: var(--qn-ink);
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--qn-blue);
  box-shadow: var(--shadow-md);
}

body.light-mode .toast.success { border-left-color: var(--status-done); }
body.light-mode .toast.error { border-left-color: var(--status-urgent); }
body.light-mode .toast.warning { border-left-color: var(--qn-gold); }

/* --------------------------------------------------------------------------
   Écran de connexion
   -------------------------------------------------------------------------- */
body.light-mode #modal-login {
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(196, 138, 38, 0.16), transparent 65%),
    linear-gradient(180deg, #f8f9fb 0%, #e9edf3 100%);
}

body.light-mode .login-modal {
  color: var(--qn-ink);
  background: #ffffff !important;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

body.light-mode .login-logo {
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2a3448 0%, #121826 100%);
  box-shadow: 0 0 0 1px rgba(196, 138, 38, 0.35), 0 10px 22px -10px rgba(18, 24, 38, 0.6);
}

/* style.css force ces couleurs claires en !important : la surcharge doit faire de même */
body.light-mode .login-brand h2 { color: var(--qn-ink) !important; }
body.light-mode .login-subtitle { color: var(--text-secondary) !important; }
body.light-mode .login-modal label { color: var(--qn-ink-soft) !important; }

body.light-mode .login-modal .input-field {
  color: var(--qn-ink) !important;
  background: #f8fafc !important;
  border: 1px solid #d8dee8 !important;
}

body.light-mode .login-modal .input-field:focus {
  background: #ffffff !important;
  border-color: var(--qn-blue) !important;
  box-shadow: var(--qn-focus-ring) !important;
}

body.light-mode .login-modal .input-icon-wrapper i { color: var(--text-muted); }

body.light-mode .login-modal .btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #d4a046 0%, var(--qn-gold) 100%) !important;
  border: 1px solid #a8741c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 20px -10px rgba(196, 138, 38, 0.9);
}

/* --------------------------------------------------------------------------
   Reliquats du thème sombre (agenda de l'onglet Interventions)
   -------------------------------------------------------------------------- */
body.light-mode .agenda-table th {
  color: var(--text-secondary);
  background: #f6f8fb;
}

body.light-mode .agenda-table th.today-col { background: var(--qn-blue-soft); color: var(--qn-blue); }
body.light-mode .agenda-table td.today-cell { background: rgba(47, 91, 143, 0.035); }
body.light-mode .agenda-tech-col { background: #fafbfc; }

body.light-mode .agenda-card-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

body.light-mode .agenda-card-item:hover { background: var(--qn-blue-soft); }
body.light-mode .agenda-card-item .agenda-syndic { color: var(--qn-ink); }

body.light-mode ::selection { background: rgba(196, 138, 38, 0.22); }