/* =============================================================
   THEMES — CSS custom properties pour mode sombre / clair
   ============================================================= */

:root {
  /* ── Backgrounds ── */
  --bg-page:    #15152e;
  --bg-card:    #1e1e3c;
  --bg-deep:    #16162e;
  --bg-chat:    #171732;
  --bg-viewer:  #0e0e24;
  --bg-hover:   #28284e;
  --bg-filter:  #12182b;

  /* ── Borders ── */
  --border:     #363660;
  --border-hi:  #464678;
  --border-mid: #2a2a50;
  --border-lo:  #1a1a36;

  /* ── Text ── */
  --text-white:     #ffffff;
  --text-body:      #e8e8f4;
  --text-primary:   #e0e0f0;
  --text-secondary: #c0c0d8;
  --text-muted2:    #9292b0;
  --text-muted:     #707095;
  --text-dim:       #5e5e88;
  --text-faint:     #4a4a72;

  /* ── Special ── */
  --filter-border:  rgba(255,255,255,0.07);
  --filter-label:   rgba(255,255,255,0.3);
  --table-hover:    rgba(255,255,255,0.02);
  --shadow-drop:    rgba(0,0,0,0.4);
  --shadow-card:    rgba(0,0,0,0.3);
  --shadow-viewer:  rgba(11,11,30,0.8);
  --scrollbar:      #363660;
}

html.light-theme {
  /* ── Backgrounds ── */
  --bg-page:    #f0f2fa;
  --bg-card:    #ffffff;
  --bg-deep:    #f5f7fc;
  --bg-chat:    #f8f9fc;
  --bg-viewer:  #e8ebf5;
  --bg-hover:   #eef0f8;
  --bg-filter:  #eef0f8;

  /* ── Borders ── */
  --border:     #d5d9ee;
  --border-hi:  #c5c9e0;
  --border-mid: #e4e8f5;
  --border-lo:  #edf0f8;

  /* ── Text ── */
  --text-white:     #1a1a3c;
  --text-body:      #1a1a3c;
  --text-primary:   #1a1a3c;
  --text-secondary: #3c3c62;
  --text-muted2:    #5858a0;
  --text-muted:     #6868a8;
  --text-dim:       #8888b8;
  --text-faint:     #a0a0c8;

  /* ── Special ── */
  --filter-border:  rgba(0,0,50,0.07);
  --filter-label:   rgba(0,0,50,0.45);
  --table-hover:    rgba(0,0,50,0.02);
  --shadow-drop:    rgba(0,0,50,0.12);
  --shadow-card:    rgba(0,0,50,0.08);
  --shadow-viewer:  rgba(240,242,250,0.9);
  --scrollbar:      #d5d9ee;
}

/* ── Logo adapté au thème clair ── */
html.light-theme .logo,
html.light-theme .logo-icon,
html.light-theme .logo-small {
  background-image: url('../images/Logo_Clair.png') !important;
}
/* Login page : logo blanc → noir en mode clair */
html.light-theme .login-right img {
  filter: invert(1);
}
/* Login page : panneau gauche — bleu clair en mode clair */
html.light-theme .login-left {
  background: linear-gradient(135deg, #4a7fd4 0%, #6fa3e8 45%, #3a8fcc 100%);
}

/* ── Theme toggle button (sidebar) ── */
.theme-toggle-btn {
  width: 100%;
  height: 38px;
  border-radius: 9px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0 12px;
  color: var(--text-dim);
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  gap: 11px;
}
.theme-toggle-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-secondary);
}
.theme-toggle-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar.collapsed .theme-toggle-btn {
  width: 44px;
  justify-content: center;
  padding: 0;
  margin: 0 auto 4px;
}
.sidebar.collapsed .theme-toggle-btn .theme-text { display: none; }