/* Charte graphique VS INFOTECH : couleurs, themes clair / sombre et elements de marque,
   partages par le portail, les tickets et l'audit. Source unique des couleurs : les
   style.css de chaque page n'ont plus de couleur de marque, seulement ces variables.
   A charger APRES le style.css de la page.
   Couleurs mesurees sur le logo : Cobalt #3262AE, Ecran #327DC1, Ciel #329BD8,
   Vert Atelier #6AA734, Citron #B3C920, Encre #231916. */

/* ---- Theme sombre (defaut) ---- */
:root {
  color-scheme: dark;
  --bg: #0f1c2b;
  --panel: #16283b;
  --panel-2: #1b3350;
  --border: #27405a;
  --text: #eaf1f8;
  --muted: #9db0c2;
  --accent: #329bd8;
  --accent-hover: #4aaae2;
  --on-accent: #0f1c2b;   /* texte sur un fond --accent (contraste 5,6) */
  --link: #7dbbea;
  --ok: #8fcb4a;
  --warn: #f2c14e;
  --danger: #ff8a8a;
  /* Statuts des tickets : Nouveau, En cours, Pause, Bloque, Termine */
  --s-open: #329bd8;
  --s-in_progress: #5f8fd6;
  --s-paused: #4ba3a3;
  --s-blocked: #e0a100;
  --s-closed: #6aa734;
  /* Filet « Orbite » du logo */
  --orbit: linear-gradient(90deg, #b3c920 0%, #6aa734 32%, #327dc1 68%, #329bd8 100%);
  --font-display: "Exo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

/* ---- Theme clair ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7fb;
  --panel: #ffffff;
  --panel-2: #e7f0f8;
  --border: #d5e0ea;
  --text: #231916;
  --muted: #5b6b7a;
  --accent: #3262ae;      /* Cobalt : texte blanc dessus (contraste 6,0) */
  --accent-hover: #2a5494;
  --on-accent: #ffffff;
  --link: #3262ae;
  --ok: #3f7d1a;
  --warn: #8a5a00;
  --danger: #b4232a;
  --s-in_progress: #3262ae;
  --s-paused: #2d6e6e;
}

/* ---- Marque ---- */
h1, h2, h3, .brand { font-family: var(--font-display); }

/* Symbole (fichier logo-mark.png, fond blanc) a cote du nom, dans les barres */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; flex: none; display: block; }
.brand-page { color: var(--muted); font-weight: 600; letter-spacing: 0; }

/* Logo complet de l'ecran de connexion : deux fichiers, un par theme.
   logo.png (fond blanc, texte fonce) en clair ; logo-light.png (fond transparent, texte blanc) en sombre. */
.login-logo { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 18px; }
.login-logo.logo-for-light { display: none; border-radius: 8px; }
:root[data-theme="light"] .login-logo.logo-for-light { display: block; }
:root[data-theme="light"] .login-logo.logo-for-dark { display: none; }

/* Filet degrade de 3 px : en haut de la fenetre de connexion et de la barre laterale,
   sous la barre du haut (en fond, pour garder les bordures et les angles arrondis) */
.login-box, .sidebar { background-image: var(--orbit); background-size: 100% 3px; background-repeat: no-repeat; background-position: top; }
.topbar { background-image: var(--orbit); background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom; }

/* ---- Statuts du portail : pastille de couleur + libelle (jamais la couleur seule) ---- */
.status-badge { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.status-badge::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--sc, var(--muted)); }
.status-badge.open { --sc: var(--s-open); }
.status-badge.in_progress { --sc: var(--s-in_progress); }
.status-badge.paused { --sc: var(--s-paused); }
.status-badge.blocked { --sc: var(--s-blocked); }
.status-badge.closed { --sc: var(--s-closed); }

/* ---- Colonnes du tableau des tickets ---- */
.board-col { border-top: 3px solid var(--sc, var(--border)); }
.board-col[data-status="open"] { --sc: var(--s-open); }
.board-col[data-status="in_progress"] { --sc: var(--s-in_progress); }
.board-col[data-status="paused"] { --sc: var(--s-paused); }
.board-col[data-status="blocked"] { --sc: var(--s-blocked); }
.board-col[data-status="closed"] { --sc: var(--s-closed); }

/* ---- Focus clavier visible ---- */
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Ombres et voiles (dependent du theme) ---- */
:root[data-theme="light"] .modal-overlay { background: rgba(15, 28, 43, 0.45); }
:root[data-theme="light"] .toast { box-shadow: 0 6px 20px rgba(15, 28, 43, 0.18); }