/* ============================================================
   theme.css — Smilo palette: orange (#ff6e16) + dark gray (#232323)
   ============================================================ */

/* Dark theme */
[data-theme="dark"] {
  --bg: #1a1a1a;
  --bg2: #232323;
  --surface: #2a2a2a;
  --surface2: #333333;
  --border: #3a3a3a;
  --border2: #4a4a4a;
  --text: #f5f5f5;
  --text2: #b8b8b8;
  --text3: #7a7a7a;
  --card: #232323;
  --input: #2a2a2a;
  --sh: 0 2px 16px rgba(0, 0, 0, .5);
  --sh2: 0 8px 40px rgba(0, 0, 0, .7);
  --fc-bg: var(--bg2);
  --fc-border: var(--border);
  --fc-today: rgba(255, 110, 22, .12);
}

/* Light theme (DEFAULT for Smilo) */
[data-theme="light"] {
  --bg: #f7f7f8;
  --bg2: #ffffff;
  --surface: #f3f4f6;
  --surface2: #e5e7eb;
  --border: #e5e7eb;
  --border2: #d1d5db;
  --text: #232323;
  --text2: #4b5563;
  --text3: #6b7280;
  --card: #ffffff;
  --input: #ffffff;
  --sh: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --sh2: 0 10px 30px rgba(0, 0, 0, .12);
  --fc-bg: #ffffff;
  --fc-border: #e5e7eb;
  --fc-today: rgba(255, 110, 22, .08);
}

/* Accent colors — Smilo brand */
:root {
  /* Primary brand = orange Smilo */
  --teal: #ff6e16;              /* kept as --teal var name for backward compat; value = orange */
  --teal-dark: #e55a00;
  --teal-soft: #fff0e6;
  --primary: #ff6e16;
  --primary-dark: #e55a00;
  --primary-soft: #fff0e6;
  --dark: #232323;

  /* Secondary accents */
  --blue: #3b82f6;
  --amber: #eab308;             /* warm yellow (avoids clash with orange) */
  --red: #ef4444;
  --green: #22c55e;
  --purple: #a855f7;
  --pink: #ec4899;
  --orange: #ff6e16;            /* alias of --primary for consistency */

  --r: 9px;
  --r2: 14px;
  --r3: 20px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', serif;
}

/* Status colors for tags — adapted per theme */
[data-theme="dark"] .tag.tag-green { color: var(--green); }
[data-theme="dark"] .tag.tag-blue { color: var(--blue); }
[data-theme="dark"] .tag.tag-amber { color: var(--amber); }
[data-theme="dark"] .tag.tag-red { color: var(--red); }
[data-theme="dark"] .tag.tag-teal { color: var(--teal); }
[data-theme="dark"] .tag.tag-purple { color: var(--purple); }

/* ── Form controls: brand-coloured checkboxes & radios ──────────
 * accent-color tints the native checkmark/radio dot to match the
 * Smilo orange. Without this, browsers use OS defaults — on Windows
 * it's blue, on some Mac/Linux themes it can render fuchsia/purple.
 * Single line, modern, and works everywhere except IE11.
 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* ── v1.2.47 — Logo cabinet en mode sombre ──────────────────────
 *
 * Problème : un logo cabinet à fond transparent (PNG/JPG avec alpha)
 * monochrome foncé (ex: crâne noir, texte gris) devient invisible
 * en mode sombre. C'est inhérent au format choisi par l'admin, on ne
 * peut pas le résoudre côté affichage sans dégrader la lisibilité.
 *
 * Solution : on ajoute un fond blanc subtil avec un peu de padding
 * et border-radius UNIQUEMENT en dark mode, comme le font Stripe,
 * Linear, Notion pour afficher les logos clients dans leurs
 * dashboards. Universel (marche pour les logos monochromes ET
 * colorés), simple, et l'admin n'a pas à préparer 2 versions.
 *
 * Le sélecteur [data-cabinet-logo="1"] est posé par logo.js sur
 * l'<img> rendu par Logo.cabinet() — pas sur le logo Smilo par
 * défaut (qui est un SVG inline). Donc cette règle ne touche QUE
 * les logos custom uploadés par les cabinets.
 */
[data-theme="dark"] img[data-cabinet-logo="1"] {
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  /* Compense le padding ajouté pour rester sur la même hauteur visuelle */
  box-sizing: content-box;
}