/* ==========================================================================
   dark-mode.css — #6.9
   --------------------------------------------------------------------------
   Polish pour le mode sombre. Les tokens sont déjà définis dans
   design-system.css (@media prefers-color-scheme ET [data-theme="dark"]).
   Ce fichier gère les cas limites : branding tenant, images, print.
   ========================================================================== */

/* ----- Mode sombre : adoucir la couleur primary du tenant ---------------- */
/* Une primary brune/terre (ex. Bellerive #6B4F2B) devient peu lisible sur fond
   sombre. On applique un léger éclaircissement via color-mix. */
[data-theme="dark"] {
  /* Si le tenant a défini --tenant-primary, on l'éclaircit légèrement pour
     le texte/icônes sur fond sombre. Les boutons gardent la primary telle quelle. */
  --c-primary-on-dark: color-mix(in srgb, var(--tenant-primary, #6B4F2B) 70%, #ffffff);
  --c-accent-on-dark:  color-mix(in srgb, var(--tenant-accent,  #2E7D5B) 70%, #ffffff);
}
[data-theme="dark"] .link-primary,
[data-theme="dark"] a:not(.btn):not(.tab):not(.pill):not(.card):not(.nav__item) {
  color: var(--c-primary-on-dark);
}

/* ----- Logos tenant sur fond sombre --------------------------------------- */
/* Si le logo est sombre (SVG avec couleurs fixes), on applique un fond clair
   subtil derrière lui pour garder la lisibilité. Le tenant peut aussi fournir
   un logo alternatif via `--tenant-logo-url-dark`. */
[data-theme="dark"] .tenant-logo {
  /* Préfère le logo dark si fourni */
  background-image: var(--tenant-logo-url-dark, var(--tenant-logo-url, none));
}
[data-theme="dark"] .tenant-logo-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-sm);
}

/* ----- Co-brand OFOORNO en dark : wordmark blanche ------------------------ */
[data-theme="dark"] .cobrand img.ofoorno-wordmark,
[data-theme="dark"] .cobrand svg.ofoorno-wordmark {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* ----- Images avec fond blanc dans documents ------------------------------ */
/* Par défaut, un fond blanc doux pour les images "contenus" (pas logos) */
[data-theme="dark"] .prose img,
[data-theme="dark"] .content img:not(.tenant-logo):not(.ofoorno-wordmark):not(.avatar) {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-sm);
}

/* ----- Scrollbars cohérentes en dark ------------------------------------- */
[data-theme="dark"] {
  scrollbar-color: var(--c-border) var(--c-bg);
}
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--c-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 6px;
  border: 3px solid var(--c-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-muted);
}

/* ----- Cartes KPI en dark : ombre plus douce ------------------------------ */
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
}
[data-theme="dark"] .card:hover {
  border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
}

/* ----- Tables en dark : alternance plus subtile --------------------------- */
[data-theme="dark"] .table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--c-bg-elev-1) 50%, transparent);
}
[data-theme="dark"] .table tbody tr:hover {
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg-elev-1));
}

/* ----- Inputs en dark : focus plus visible -------------------------------- */
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus {
  background: var(--c-bg-elev-1);
}

/* ----- Code blocks lisibles ---------------------------------------------- */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: #0f1115;
  color: #dce1e8;
  border-color: #22262d;
}

/* ----- Print : toujours en clair, peu importe le thème ------------------- */
@media print {
  :root,
  [data-theme="dark"] {
    --c-bg: #ffffff;
    --c-bg-elev-1: #ffffff;
    --c-bg-elev-2: #ffffff;
    --c-text: #000000;
    --c-text-muted: #333333;
    --c-border: #cccccc;
    color-scheme: light !important;
  }
  body { background: #fff !important; color: #000 !important; }
  img { filter: none !important; }
}

/* ----- Transition douce entre thèmes -------------------------------------- */
html {
  transition: background-color .2s ease, color .2s ease;
}
body, .card, .btn, .input, .select, .textarea, .tab, .pill, .table, .modal, .drawer, .toast {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  html, body, .card, .btn, .input, .select, .textarea, .tab, .pill, .table, .modal, .drawer, .toast {
    transition: none !important;
  }
}

/* ----- Bouton toggle thème (visuel) -------------------------------------- */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-text);
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover { background: var(--c-bg-elev-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }