/* ============================================================
   QCDESK — Design tokens
   Dark mode flat, maquette claude.ai/design.
   - Pas de pont dynamic branding (settings.primaryColor neutralisé).
   - Accent de base fixé à indigo-600 (#4f46e5), hi indigo-500, lo indigo-800.
   - --project-accent est une surcouche posée sur une vue projet
     (cf. mécanisme data-project-accent + style inline dans les templates).
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg-0: #0b0f1a;
  --bg-1: #10172a;
  --bg-2: #172038;
  --bg-3: #1f2a47;
  --bg-4: #f4f6fb;
  --bg-sidebar: #070b16;
  --bg-topbar: #0a0f1c;
  --bg-main: #0c1120;
  --border: #2d3340;
  --border-strong: #5c6474;
  --divider: #262c37;

  /* ---------- Text ---------- */
  --text-0: #f4f6fb;
  --text-1: #c9d0e0;
  --text-2: #8690a8;
  --text-3: #5a6480;
  --text-on-accent: #ffffff;

  --text-0-inverted: #0a0a0c;
  --text-1-inverted: #2d3340;
  --text-2-inverted: #5c6474;
  --text-3-inverted: #8a93a6;
  --text-on-accent-inverted: #ffffff;

  /* ---------- Accent principal (indigo) ---------- */
  --accent-h: 245;
  --accent: oklch(62% 0.22 var(--accent-h));
  --accent-hi: oklch(70% 0.22 var(--accent-h));
  --accent-lo: oklch(52% 0.20 var(--accent-h));
  --accent-glow: oklch(62% 0.22 var(--accent-h) / 0.45);
  --accent-chip: oklch(62% 0.22 var(--accent-h) / 0.15);

  /* ---------- Marque (logo + nom dans la topbar) ----------
     Pilote le stroke du chevron du logo et la couleur du nom de l'app.
     Dark : blanc (le bleu du SVG disparaîtrait sur fond sombre).
     Light : bleu de marque (voir tokens-light.css). */
  --brand-mark: #ffffff;

  /* ---------- Accent projet ----------
     Par défaut, aligné sur l'accent principal.
     Dans une vue projet, on override via l'inline style :
       <main class="project-scope" style="--project-accent: #ec4899;">
     Cette var pilote .project-scope .btn-primary, .tab.active, .ticket-ref, etc.
  */
  --project-accent: var(--accent);
  --project-accent-hi: var(--accent-hi);
  --project-accent-lo: var(--accent-lo);
  --project-accent-glow: var(--accent-glow);
  --project-accent-chip: var(--accent-chip);

  /* ---------- Palette sémantique flat ---------- */
  --c-red:      #e5484d;
  --c-red-lo:   #3b1517;
  --c-orange:   #f59e0b;
  --c-orange-lo:#3a230a;
  --c-yellow:   #eab308;
  --c-yellow-lo:#342807;
  --c-green:    #22c55e;
  --c-green-lo: #0f2e1c;
  --c-teal:     #14b8a6;
  --c-teal-lo:  #0b2a28;
  --c-blue:     #3b82f6;
  --c-blue-lo:  #12213e;
  --c-indigo:   #6366f1;
  --c-indigo-lo:#1b1d3a;
  --c-purple:   #a855f7;
  --c-purple-lo:#231237;
  --c-pink:     #ec4899;
  --c-pink-lo:  #331022;
  --c-gray:     #64748b;
  --c-gray-lo:  #1a2233;

  /* ---------- Teintes de fond (panneaux, alertes) ----------
     En sombre on interpole en `srgb` et NON en `oklch` : --bg-1 est un quasi-noir
     légèrement bleuté, et oklch tire alors la teinte vers le bleu (le warning vire au
     mauve/brun). srgb mélange canal par canal → la teinte reste franche. ~30 % = fond
     teinté lisible avec un texte blanc. (Le thème clair redéfinit ces tokens en oklch
     pour conserver ses pastels — cf. tokens-light.css.) */
  --tint-blue:   color-mix(in srgb, var(--c-blue)   30%, var(--bg-1));
  --tint-purple: color-mix(in srgb, var(--c-purple) 30%, var(--bg-1));
  --tint-green:  color-mix(in srgb, var(--c-green)  30%, var(--bg-1));
  --tint-orange: color-mix(in srgb, var(--c-orange) 30%, var(--bg-1));
  --tint-red:    color-mix(in srgb, var(--c-red)    30%, var(--bg-1));
  --tint-teal:   color-mix(in srgb, var(--c-teal)   30%, var(--bg-1));
  --tint-accent: color-mix(in srgb, var(--accent)   30%, var(--bg-1));

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow (flat, consigne user ≤15 %) ---------- */
  --shadow-alpha: 0.15;

  /* ---------- Typographie ---------- */
  --font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* ---------- Neutralisation du dynamic branding Symfony ----------
     On remplace les vars --color-* de base.html.twig (pilotées par
     settings.*) par les tokens dark fixes. Le coloris picker reste
     fonctionnel côté admin mais ne repeint pas le thème. */
  --color-bg: var(--bg-0);
  --color-primary: var(--accent);
  --color-secondary: var(--bg-sidebar);
  --color-accent: var(--accent-hi);
  --color-text: var(--text-0);
  --color-text-secondary: var(--text-2);
  --color-border: var(--border);
  --color-hover: var(--bg-2);
  --color-active-bg: color-mix(in oklch, var(--accent) 18%, transparent);
  --color-menu-icon-inactive: var(--text-3);
  --color-menu-border-active: var(--accent);

  /* ---------- Pont Bootstrap ---------- */
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--text-0);
  --bs-primary: var(--accent);
  --bs-border-color: var(--border);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-link-color: var(--accent-hi);
  --bs-link-hover-color: var(--text-0);
  --bs-secondary-bg: var(--bg-2);
  --bs-tertiary-bg: var(--bg-3);
}

/* ============================================================
   Helpers shadow colorée
   Usage : style="--glow: var(--c-red);" class="glow"
   ============================================================ */
.glow {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--glow) 22%, transparent),
    0 8px 24px -6px color-mix(in oklch, var(--glow) calc(var(--shadow-alpha) * 90%), transparent),
    0 2px 6px -1px color-mix(in oklch, var(--glow) calc(var(--shadow-alpha) * 50%), transparent);
}
.glow-sm {
  box-shadow:
    0 2px 8px -2px color-mix(in oklch, var(--glow) calc(var(--shadow-alpha) * 70%), transparent);
}
.glow-lg {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--glow) 28%, transparent),
    0 16px 40px -8px color-mix(in oklch, var(--glow) calc(var(--shadow-alpha) * 95%), transparent),
    0 4px 12px -2px color-mix(in oklch, var(--glow) calc(var(--shadow-alpha) * 60%), transparent);
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  background: var(--bg-topbar);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14.5px;
  line-height: 1.5;
}

/* Grain accent subtil en arrière-plan */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at -10% -20%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(800px 450px at 115% 120%, color-mix(in oklch, var(--c-purple) 6%, transparent), transparent 55%);
  z-index: 0;
}
body > * { position: relative; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ============================================================
   Utilitaires
   ============================================================ */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.uppercase-xs {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
}

/* ============================================================
   Scope projet : --project-accent pilote accent/hi/lo/glow/chip
   locaux. Appliqué sur un conteneur racine (main ou wrapper).
   Les composants qui veulent "suivre le projet" utilisent
   var(--project-accent) au lieu de var(--accent).
   ============================================================ */
.project-scope {
  --project-accent-hi: color-mix(in oklch, var(--project-accent) 82%, white);
  --project-accent-lo: color-mix(in oklch, var(--project-accent) 72%, black);
  --project-accent-glow: color-mix(in oklch, var(--project-accent) 45%, transparent);
  --project-accent-chip: color-mix(in oklch, var(--project-accent) 18%, transparent);
}

/* ============================================================
   Variant "modern" (port exact de la maquette claude.ai/design)
   Palette plus neutre (sans teinte bleutée) + radii plus bolders.
   Appliqué sur <html data-variant="modern">.
   ============================================================ */
[data-variant="modern"] {
  --bg-0: #0a0a0c;
  --bg-1: #14141a;
  --bg-2: #1c1c25;
  --bg-3: #272733;
  /* topbar + sidebar partagent la même couleur, unifiées visuellement */
  --bg-sidebar: #050507;
  --bg-topbar: #050507;
  --bg-main: #0d0d10;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 32px;
}

/* ============================================================
   Bordures : off (port exact de la maquette)
   Les cards/stats/kanban-col/cr-item/sprint-card perdent leur
   border visible pour un look flat.
   ============================================================ */
[data-borders="off"] .card,
[data-borders="off"] .stat,
[data-borders="off"] .stat-v2,
[data-borders="off"] .stat-card,
[data-borders="off"] .descriptor,
[data-borders="off"] .kanban-col,
[data-borders="off"] .kanban-column,
[data-borders="off"] .cr-item,
[data-borders="off"] .sprint-card,
[data-borders="off"] .backlog-sprint,
[data-borders="off"] .backlog-toolbar,
[data-borders="off"] .ticket-drawer,
[data-borders="off"] .mt-table-wrapper,
[data-borders="off"] .mf-header-card,
[data-borders="off"] .mf-section,
[data-borders="off"] .hero-card,
[data-borders="off"] .project-card,
[data-borders="off"] .fav-card,
[data-borders="off"] .progress-card,
[data-borders="off"] .member-filter .member-dot-add {
  border-color: transparent !important;
}

/* Séparateurs internes des tables/rows : transparents */
[data-borders="off"] .tickets-table thead th,
[data-borders="off"] .tickets-table tbody td,
[data-borders="off"] .ticket-drawer-row,
[data-borders="off"] .sprint-head,
[data-borders="off"] .backlog-sprint__header,
[data-borders="off"] .card .card-header,
[data-borders="off"] .notif-head,
[data-borders="off"] .ql-toolbar.ql-snow,
[data-borders="off"] .ql-container.ql-snow,
[data-borders="off"] .modal-header,
[data-borders="off"] .modal-footer {
  border-color: transparent !important;
}

/* Pour conserver un peu de lisibilité quand les bordures tombent,
   on renforce très légèrement le contraste des surfaces secondaires. */
[data-borders="off"] .card .card-header,
[data-borders="off"] .sprint-head,
[data-borders="off"] .backlog-sprint__header,
[data-borders="off"] .notif-head {
  background: transparent;
}