/*
  tokens.css — le seul endroit où vivent les valeurs (§6.1 du guide).

  Source unique et définitive : specs/014-frontend-application/KostKat_Design_System_Web.md
  (Design System Web KostKat — remplace toute valeur antérieure). Les noms de variables --kk-*
  sont conservés à l'identique (consommés par base.css, utilities.css, telerik-overrides.css et
  tous les composants Razor sous KostKat.WebApp.Client) : seules les VALEURS changent.
  Toute modification visuelle se fait ici, jamais dans un composant.
*/

:root {
  /* ---- Palette primitive (Design System Web KostKat, §2-4) ---- */
  --kk-primary: #0756eb;
  --kk-primary-hover: #0a4ed1;
  --kk-primary-light: #e7f0ff;
  --kk-navy: #021939;
  --kk-navy-secondary: #0a244c;
  --kk-white: #ffffff;
  --kk-gold-500: #d8ab1f; /* DS — niveau de service « Pro », absent du design system */
  --kk-purple: #7b5ce1;   /* graphiques uniquement — jamais de texte/statut */

  /* Dégradé des actions principales (bouton « + » de la barre mobile, pagination) : défini une
     seule fois pour que ces boutons ne puissent pas diverger de couleur. */
  --kk-gradient-action: linear-gradient(145deg, #2765ff, #6437ec);
  /* Bandeau primaire des cartes Web et des modales Mobile : même signature bleue partout. */
  --kk-gradient-primary-header:
    radial-gradient(circle at 69% 25%, rgba(111, 218, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 62%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    linear-gradient(112deg, #2d3ddd 0%, #3f49df 48%, #6659e7 100%);
  --kk-chart-neutral: #bfc8d8;

  /* ---- Couleurs sémantiques ---- */
  --kk-color-brand: var(--kk-primary);
  --kk-color-brand-hover: var(--kk-primary-hover);
  --kk-color-on-brand: var(--kk-white);
  --kk-color-accent: var(--kk-primary);
  --kk-color-on-accent: var(--kk-white);
  --kk-color-accent-text: var(--kk-primary);
  --kk-color-canvas: #f8f9fc;
  --kk-color-surface: #f9f9f9;
  --kk-color-text: #080a18;
  --kk-color-text-muted: #343c4f;
  --kk-color-text-subtle: #7b8794;
  /* Texte explicatif / information métier : bleu de la charte, distinct des métadonnées neutres. */
  --kk-color-text-information: var(--kk-primary);
  --kk-color-border: #ecf2fa;
  --kk-color-border-subtle: #ecf2fa;
  --kk-color-border-strong: #d7dee8; /* séparateurs de grille (lignes/colonnes) — contraste renforcé */
  --kk-color-row-alt: #f2f4f8; /* zébrage des lignes de grille */
  --kk-color-focus: var(--kk-primary);
  --kk-color-success: #089a69;
  --kk-color-success-bg: #eaf8f2;
  /* Bouton "Activer"/"Réactiver" — distinct de --kk-color-success (badges de statut) : couleur
     demandée explicitement pour cette action, un seul endroit pour tous les écrans. */
  --kk-color-activate: #33A792;
  --kk-color-activate-hover: #2b8f7d;

  /* Bouton "Annuler"/"Retour" — même couleur partout dans l'application, un seul point de réglage. */
  --kk-color-neutral-action: #808A9C;
  --kk-color-neutral-action-hover: #6d7688;
  --kk-color-warning: #fca509;
  --kk-color-warning-bg: #fff6e5;
  --kk-color-error: #e5484d;
  --kk-color-error-bg: #fff0f0;
  --kk-color-info: var(--kk-primary);
  --kk-color-info-bg: var(--kk-primary-light);

  /* Classification visuelle des montants de notes de frais (config Référentiels > Codes couleur des
     dépenses). Alias sémantiques distincts de --kk-color-success/warning/error : même palette
     aujourd'hui, mais un futur ajustement des couleurs de statut ne doit pas changer accidentellement
     la classification des montants, et inversement. */
  --kk-expense-green: var(--kk-color-success);
  --kk-expense-orange: var(--kk-color-warning);
  --kk-expense-red: var(--kk-color-error);

  /* Design de référence : formulaire CreateOrganization — un seul endroit pour tout formulaire de
     l'application (voir components.css .card / .field__input / .field__input:disabled). */
  --kk-color-form-area-bg: #F9F9F9;
  --kk-color-input-bg: #FFFFFF;
  --kk-color-input-border: #3A3A3A;
  --kk-color-input-bg-disabled: #FFFFFF;
  --kk-color-input-border-disabled: #C3C3C3;
  --kk-color-input-text-disabled: var(--kk-color-text-subtle);

  /* Surfaces claires affichées sur le fond navy du client Mobile. Ces tokens préparent le futur
     changement de thème : les composants gardent leur structure et seul ce jeu de valeurs change. */
  --kk-color-panel-elevated: #fffefd;
  --kk-color-panel-elevated-end: #fbfcff;
  --kk-color-panel-border: #bfd3f8;
  --kk-color-panel-accent: #3474ff;
  --kk-color-control-soft-bg: #f6f8fd;
  --kk-color-control-soft-border: #adc6f1;
  /* Badge du type de dépense et actions neutres associées : aliases communs pour garantir que le
     bouton Annuler des confirmations conserve exactement le même cadre, dans les deux thèmes. */
  --kk-color-category-text: var(--kk-color-text);
  --kk-color-category-bg: var(--kk-color-info-bg);
  --kk-color-category-border: var(--kk-color-panel-border);
  --kk-shadow-panel-on-navy: 0 0.7rem 1.5rem rgba(0, 9, 43, 0.2), 0 0 0 1px rgba(81, 132, 236, 0.08);

  /* Bandeau d'accueil de la coquille authentifiée (en-tête Web). Même bleu que le bandeau primaire
     des cartes, mais très dilué : l'en-tête se lit comme une extension de la charte et non comme
     une carte de contenu de plus. Les pastilles posées dessus (date, langue, devise) sont des
     surfaces translucides — d'où des jetons propres, --kk-color-surface disparaîtrait sur ce fond. */
  --kk-gradient-shell-header: linear-gradient(112deg, #eff3ff 0%, #e9efff 46%, #dfe7fe 100%);
  --kk-color-shell-header-border: #dde5fb;
  --kk-shadow-shell-header: 0 0.75rem 2rem rgba(24, 57, 113, 0.1);
  --kk-color-shell-control-bg: rgba(255, 255, 255, 0.82);
  --kk-color-shell-control-border: rgba(255, 255, 255, 0.92);
  --kk-color-shell-control-hover: #ffffff;

  /* Alias de surfaces utilisés par les écrans Mobile. Leur rôle reste stable entre les thèmes :
     seuls leurs contrastes changent dans le bloc sombre en fin de fichier. */
  --kk-color-shell-title: #ffffff;
  --kk-color-shell-muted: #c2cee4;
  --kk-color-card-divider: #e4e9f2;
  --kk-color-card-hover: #f5f8ff;
  --kk-color-icon-muted: #7080a4;
  --kk-color-navigation-muted: #b8c5dd;
  --kk-color-navigation-active: #3d75ff;
  --kk-color-navigation-bg: rgba(3, 27, 73, 0.96);
  --kk-color-overlay: rgba(0, 6, 28, 0.68);

  /* Statuts des notes de frais (§6 du design system) */
  --kk-color-status-approved: #089a69;
  --kk-color-status-approved-bg: #eaf8f2;
  --kk-color-status-reimbursed: #0756eb;
  --kk-color-status-reimbursed-bg: #e7f0ff;
  --kk-color-status-pending: #fca509;
  --kk-color-status-pending-bg: #fff6e5;
  --kk-color-status-rejected: #e5484d;
  --kk-color-status-rejected-bg: #fff0f0;

  /* Niveaux de service — DS, le design system web ne couvre pas la tarification */
  --kk-color-tier-free: var(--kk-color-text-subtle);
  --kk-color-tier-standard: var(--kk-primary);
  --kk-color-tier-pro: var(--kk-gold-500);

  /* Sidebar (§5 du design system) */
  --kk-sidebar-bg: var(--kk-navy);
  --kk-sidebar-text: var(--kk-white);
  --kk-sidebar-active: var(--kk-primary);
  --kk-sidebar-hover: var(--kk-navy-secondary);
  --kk-sidebar-text-muted: var(--kk-chart-neutral);

  /* ---- Typographie (§7 — Manrope uniquement, sur tout le portail) ---- */
  --kk-font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --kk-font-family-display: var(--kk-font-family);
  --kk-font-family-tabular: "Manrope", ui-monospace, "SFMono-Regular", monospace;
  --kk-font-size-xs: 0.75rem;   /* 12px — Label */
  --kk-font-size-sm: 0.875rem;  /* 14px — Body */
  --kk-font-size-md: 1rem;      /* 16px — Body */
  --kk-font-size-lg: 1.125rem;  /* 18px — H3 */
  --kk-font-size-xl: 1.5rem;    /* 24px — H2 */
  --kk-font-size-2xl: 2rem;     /* 32px — H1 */
  --kk-font-size-kpi: 2.25rem;  /* 28-36px — KPI, valeur médiane retenue */
  --kk-font-weight-regular: 400;
  --kk-font-weight-medium: 500;
  --kk-font-weight-semibold: 600;
  --kk-font-weight-bold: 700;
  --kk-font-weight-extrabold: 800;
  --kk-line-height-tight: 1.2;
  --kk-line-height-normal: 1.5;

  /* ---- Espacements (§8 du design system) ---- */
  /* Rembourrage intérieur d'un champ. Jeton, et non valeur recopiée : le contrôle de date est
     rendu par Telerik, qui place son texte à 8 px du bord — deux champs empilés montraient alors
     deux retraits différents. Il s'aligne dessus depuis telerik-inputs.css. */
  --kk-field-padding-block: 0.7rem;
  --kk-field-padding-inline: 0.85rem;

  /* Hauteur d'un champ de saisie, déclarée UNE fois. Elle était écrite en clair à deux endroits —
     les contrôles Telerik dans telerik-inputs.css, la liste déroulante commune dans
     AppSelect.razor.css — et les deux valeurs se sont mises à diverger sans que rien ne le signale :
     une date faisait 2,85rem de haut à côté d'une liste qui en faisait 2,5. */
  --kk-field-height: 2.85rem;

  /* BARRES DE FILTRES — un seul gabarit pour tous leurs champs, listes déroulantes comme dates
     (components.css, `.filter-bar__field`). La largeur est celle d'une date — « 12/08/2026 » plus
     l'icône du calendrier ; la hauteur, celle de tout champ de saisie (--kk-field-height). L'arrondi
     reste sobre, celui des champs de formulaire : le baisser ici rend toutes les barres plus carrées
     d'un coup. */
  --kk-filter-field-width: 10rem;
  --kk-filter-field-gap: var(--kk-space-4);
  --kk-filter-field-radius: var(--kk-radius-md);

  --kk-space-1: 0.25rem; /* 4px */
  --kk-space-2: 0.5rem;  /* 8px */
  --kk-space-3: 0.75rem; /* 12px */
  --kk-space-4: 1rem;    /* 16px */
  --kk-space-5: 1.25rem;
  --kk-space-6: 1.5rem;  /* 24px */
  --kk-space-7: 2rem;    /* 32px */
  --kk-space-8: 3rem;
  --kk-space-9: 4rem;  /* DS — respirations des surfaces marketing et écrans vides */
  --kk-space-10: 5rem; /* DS */

  /* ---- Formes, profondeur et layout (§8-9 du design system) ---- */
  --kk-radius-xs: 0.375rem; /* DS — badges et pastilles, absents du design system */
  --kk-radius-sm: 0.625rem;  /* 10px — bas de la plage Input/Button */
  --kk-radius-md: 0.6875rem; /* 11px — Input/Button, valeur médiane retenue */
  --kk-radius-lg: 1rem;      /* 16px — Card */
  --kk-radius-pill: 999px;   /* Badge */
  --kk-shadow-sm: 0 2px 12px rgba(2, 25, 57, 0.05);  /* Card */
  --kk-shadow-md: 0 6px 20px rgba(2, 25, 57, 0.08);  /* Card hover */
  --kk-shadow-lg: 0 16px 40px rgba(2, 25, 57, 0.14);
  --kk-shadow-brand-glow: 0 8px 24px rgba(7, 86, 235, 0.35);
  --kk-shadow-accent-glow: 0 8px 24px rgba(7, 86, 235, 0.35);

  /* ---- Motion — DS ; le design system est muet côté durées/courbes ---- */
  --kk-duration-fast: 120ms;
  --kk-duration-base: 200ms;
  --kk-duration-slow: 340ms;
  --kk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --kk-ease-out: cubic-bezier(0, 0, 0.2, 1);

  --kk-sidebar-width: 14.375rem;
  --kk-sidebar-width-collapsed: 4.5rem;
  --kk-content-max-width: 75rem;
  --kk-z-drawer: 20;
  --kk-z-overlay: 30;
  --kk-z-popover: 40;
  --kk-z-notification: 50;
}

/* Mode bleu nuit Mobile. Les composants n'ont aucune branche conditionnelle : le même DOM et les
   mêmes classes sont conservés, seuls les tokens sémantiques basculent. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Hiérarchie typographique sombre : tous les textes neutres partent du blanc. L'opacité
     distingue les métadonnées du contenu principal sans réintroduire de bleu sombre ou de noir
     illisible. Ces tokens sont consommés par les deux clients et par les composants partagés. */
  --kk-color-text: #ffffff;
  --kk-color-text-muted: #ffffff;
  --kk-color-text-subtle: rgba(255, 255, 255, 0.78);
  --kk-color-text-information: #8db7ff;
  --kk-primary-light: rgba(45, 105, 255, 0.18);
  --kk-color-canvas: #020b2e;
  --kk-color-surface: #07183b;
  --kk-color-border: #245184;
  --kk-color-border-subtle: #1d4474;
  --kk-color-border-strong: #3474b9;
  --kk-color-row-alt: #0a214c;
  --kk-color-success: #39d98a;
  --kk-color-success-bg: rgba(57, 217, 138, 0.14);
  --kk-color-warning: #ffb52e;
  --kk-color-warning-bg: rgba(255, 181, 46, 0.14);
  --kk-color-error: #ff6b6f;
  --kk-color-error-bg: rgba(255, 107, 111, 0.14);
  --kk-color-info-bg: rgba(45, 105, 255, 0.18);
  --kk-expense-green: #39d98a;
  --kk-expense-orange: #ffb52e;
  --kk-expense-red: #ff6b6f;
  --kk-color-form-area-bg: #07183b;
  --kk-color-input-bg: #061433;
  --kk-color-input-border: #315e9d;
  --kk-color-input-bg-disabled: #0a1c40;
  --kk-color-input-border-disabled: #294c7d;
  --kk-color-input-text-disabled: rgba(255, 255, 255, 0.62);
  --kk-color-panel-elevated: #0a2149;
  --kk-color-panel-elevated-end: #051433;
  --kk-color-panel-border: #2e6db2;
  --kk-color-panel-accent: #27a8ff;
  --kk-color-control-soft-bg: #061433;
  --kk-color-control-soft-border: #315e9d;
  --kk-shadow-panel-on-navy: 0 0.9rem 2rem rgba(0, 4, 25, 0.36), 0 0 1.1rem rgba(32, 126, 255, 0.09);
  --kk-gradient-shell-header: linear-gradient(112deg, #0a2149 0%, #0b2050 46%, #112a60 100%);
  --kk-color-shell-header-border: #245184;
  --kk-shadow-shell-header: 0 0.9rem 2rem rgba(0, 4, 25, 0.35);
  --kk-color-shell-control-bg: rgba(255, 255, 255, 0.07);
  --kk-color-shell-control-border: rgba(255, 255, 255, 0.15);
  --kk-color-shell-control-hover: rgba(255, 255, 255, 0.12);
  --kk-color-status-approved: #39d98a;
  --kk-color-status-approved-bg: rgba(57, 217, 138, 0.14);
  --kk-color-status-reimbursed: #5d8fff;
  --kk-color-status-reimbursed-bg: rgba(45, 105, 255, 0.18);
  --kk-color-status-pending: #ffb52e;
  --kk-color-status-pending-bg: rgba(255, 181, 46, 0.14);
  --kk-color-status-rejected: #ff6b6f;
  --kk-color-status-rejected-bg: rgba(255, 107, 111, 0.14);
  --kk-color-shell-title: #ffffff;
  --kk-color-shell-muted: rgba(255, 255, 255, 0.82);
  --kk-color-card-divider: #1c4679;
  --kk-color-card-hover: #0b2653;
  --kk-color-icon-muted: rgba(255, 255, 255, 0.78);
  --kk-color-navigation-muted: rgba(255, 255, 255, 0.82);
  --kk-color-navigation-active: #3978ff;
  --kk-color-navigation-bg: rgba(3, 20, 57, 0.97);
  --kk-color-overlay: rgba(0, 3, 20, 0.82);
  --kk-shadow-sm: 0 0.65rem 1.5rem rgba(0, 4, 25, 0.28);
  --kk-shadow-md: 0 0.9rem 2rem rgba(0, 4, 25, 0.35);
  --kk-shadow-lg: 0 1.3rem 3.2rem rgba(0, 3, 20, 0.48);

  /* Bootstrap est chargé par l'hôte Mobile après les tokens partagés. La spécificité de ce bloc
     garde ses variables de texte alignées avec KostKat et empêche ses valeurs claires par défaut
     de repeindre ponctuellement le contenu en noir. */
  --bs-body-color: var(--kk-color-text);
  --bs-emphasis-color: var(--kk-color-text);
  --bs-secondary-color: var(--kk-color-text-muted);
  --bs-tertiary-color: var(--kk-color-text-subtle);
  --bs-heading-color: var(--kk-color-text);
}