@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap');

/**
 * XPROJECT Design System
 * Version: 2.2.0 — accent pétrole
 *
 * Refonte : densité accrue, typographie à trois rôles, couleur rationnée.
 * La couleur reste disciplinée — l'accent ne sert qu'à l'action principale,
 * à la navigation active, aux références et aux totaux ; l'état garde ses
 * propres couleurs (succès, alerte, erreur, information). Changer d'accent =
 * changer les cinq variables --color-primary* ci-dessous, dans les deux thèmes.
 * Les noms de variables de la v1 sont tous conservés — deal-styles.css et
 * purchase-order-styles.css fonctionnent sans retouche.
 *
 * Deux leviers de réglage global, en haut de :root
 *   --ui-density   taille de base (html font-size). 15px = dense, 16px = v1.
 *   --color-primary accent unique de l'interface.
 *
 * La section COMPATIBILITÉ V1, en fin de fichier, neutralise les couleurs
 * écrites en dur dans les feuilles de style de page (bandes de département,
 * badges, boutons) pour qu'elles suivent le thème. Ce fichier doit être
 * chargé AVANT les feuilles de page ; les règles de cette section portent
 * la spécificité nécessaire pour passer devant.
 */

:root {
  /* ========================================
     RÉGLAGES
     ======================================== */
  --ui-density: 15px;

  /* ========================================
     TYPOGRAPHIE
     ======================================== */
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ========================================
     MODE CLAIR
     ======================================== */

  /* Accent — pétrole. Ne mord ni sur le vert de marge, ni sur l'ocre des
     bons de commande, ni sur le rouge des retards. */
  --color-primary: #0E6A6E;
  --color-primary-hover: #0A5356;
  --color-primary-light: #E0F2F2;
  --color-primary-bg: #E0F2F2;
  --color-primary-line: #B6DEDE;
  --on-primary: #FFFFFF;          /* texte posé SUR l'accent */

  /* Fonds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F8FA;
  --bg-tertiary: #F0F2F6;
  --bg-elevated: #FFFFFF;

  /* Texte */
  --text-primary: #0F1521;
  --text-secondary: #4A5468;
  --text-tertiary: #7A8599;
  --text-placeholder: #9BA4B5;
  --text-inverse: #FFFFFF;

  /* Filets */
  --border-color: #E2E6ED;
  --border-hover: #CBD2DE;
  --border-strong: #CBD2DE;
  --border-focus: var(--color-primary);

  /* États */
  --color-success: #0E7A54;
  --color-success-bg: #E2F4EC;
  --color-warning: #9A6207;
  --color-warning-bg: #FBF0DA;
  --color-error: #B42318;
  --color-error-bg: #FCE9E7;
  --color-info: #0B5FA5;
  --color-info-bg: #E4F0FA;

  /* Ombres — réservées aux surfaces flottantes */
  --shadow-sm: 0 1px 1px rgba(15, 21, 33, .04);
  --shadow-md: 0 1px 2px rgba(15, 21, 33, .06), 0 4px 10px -6px rgba(15, 21, 33, .14);
  --shadow-lg: 0 1px 1px rgba(15, 21, 33, .04), 0 12px 28px -14px rgba(15, 21, 33, .22);
  --shadow-xl: 0 1px 1px rgba(15, 21, 33, .04), 0 24px 48px -20px rgba(15, 21, 33, .28);

  /* Rail de navigation */
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #4A5468;
  --sidebar-hover: #F0F2F6;
  --sidebar-active: var(--color-primary);
  --sidebar-active-bg: #E0F2F2;

  /* Carte */
  --card-bg: #FFFFFF;
  --card-border: #E2E6ED;
  --card-shadow: none;

  /* Champ */
  --input-bg: #FFFFFF;
  --input-border: #CBD2DE;
  --input-text: #0F1521;
  --input-placeholder: #9BA4B5;

  /* Rayons — resserrés */
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 12px;

  --transition: 130ms cubic-bezier(.4, 0, .2, 1);
}

/* ========================================
   MODE SOMBRE
   ======================================== */

/* Trois etats de theme, et non deux :
   - "auto" ne pose aucun attribut : la media query decide ;
   - un choix explicite pose data-theme, qui prime sur le systeme.
   Sans la media query ci-dessous, "auto" resterait clair meme sur un
   systeme en mode sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #3BC9C4;
    --color-primary-hover: #6FE0DB;
    --color-primary-light: #0E2A2B;
    --color-primary-bg: #0E2A2B;
    --color-primary-line: #2A4F4F;
    --on-primary: #06201F;

    --bg-primary: #12161F;
    --bg-secondary: #0B0E14;
    --bg-tertiary: #171C27;
    --bg-elevated: #171C27;

    --text-primary: #E9EDF4;
    --text-secondary: #A3ACBD;
    --text-tertiary: #6F7A8D;
    --text-placeholder: #5C6678;
    --text-inverse: #0B0E14;

    --border-color: #222935;
    --border-hover: #333C4B;
    --border-strong: #333C4B;
    --border-focus: var(--color-primary);

    --color-success: #3DD598;
    --color-success-bg: #0E2A20;
    --color-warning: #E8B44C;
    --color-warning-bg: #2E2514;
    --color-error: #FF7B6B;
    --color-error-bg: #331A18;
    --color-info: #5BB0F5;
    --color-info-bg: #122A3D;

    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -6px rgba(0, 0, 0, .7);
    --shadow-lg: 0 1px 1px rgba(0, 0, 0, .5), 0 16px 36px -18px rgba(0, 0, 0, .9);
    --shadow-xl: 0 1px 1px rgba(0, 0, 0, .5), 0 28px 56px -24px rgba(0, 0, 0, 1);

    --sidebar-bg: #0E121A;
    --sidebar-text: #A3ACBD;
    --sidebar-hover: #171C27;
    --sidebar-active: var(--color-primary);
    --sidebar-active-bg: #0E2A2B;

    --card-bg: #12161F;
    --card-border: #222935;
    --card-shadow: none;

    --input-bg: #0B0E14;
    --input-border: #333C4B;
    --input-text: #E9EDF4;
    --input-placeholder: #5C6678;

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --color-primary: #3BC9C4;
  --color-primary-hover: #6FE0DB;
  --color-primary-light: #0E2A2B;
  --color-primary-bg: #0E2A2B;
  --color-primary-line: #2A4F4F;
  --on-primary: #06201F;

  --bg-primary: #12161F;
  --bg-secondary: #0B0E14;
  --bg-tertiary: #171C27;
  --bg-elevated: #171C27;

  --text-primary: #E9EDF4;
  --text-secondary: #A3ACBD;
  --text-tertiary: #6F7A8D;
  --text-placeholder: #5C6678;
  --text-inverse: #0B0E14;

  --border-color: #222935;
  --border-hover: #333C4B;
  --border-strong: #333C4B;
  --border-focus: var(--color-primary);

  --color-success: #3DD598;
  --color-success-bg: #0E2A20;
  --color-warning: #E8B44C;
  --color-warning-bg: #2E2514;
  --color-error: #FF7B6B;
  --color-error-bg: #331A18;
  --color-info: #5BB0F5;
  --color-info-bg: #122A3D;

  --shadow-sm: 0 1px 1px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px -6px rgba(0, 0, 0, .7);
  --shadow-lg: 0 1px 1px rgba(0, 0, 0, .5), 0 16px 36px -18px rgba(0, 0, 0, .9);
  --shadow-xl: 0 1px 1px rgba(0, 0, 0, .5), 0 28px 56px -24px rgba(0, 0, 0, 1);

  --sidebar-bg: #0E121A;
  --sidebar-text: #A3ACBD;
  --sidebar-hover: #171C27;
  --sidebar-active: var(--color-primary);
  --sidebar-active-bg: #0E2A2B;

  --card-bg: #12161F;
  --card-border: #222935;
  --card-shadow: none;

  --input-bg: #0B0E14;
  --input-border: #333C4B;
  --input-text: #E9EDF4;
  --input-placeholder: #5C6678;

  color-scheme: dark;
}

/* ========================================
   BASE
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: var(--ui-density);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: .9rem;
  line-height: 1.45;
  margin: 0;
}

::selection { background: var(--color-primary-bg); color: var(--text-primary); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-radius: 3px;
}

/* ========================================
   LAYOUT
   ======================================== */

.layout { display: flex; min-height: 100vh; align-items: stretch; }

.main-content {
  flex: 1;
  min-width: 0;
  padding: 1.25rem;
  background: var(--bg-secondary);
  overflow-x: auto;
}

/* ========================================
   TYPOGRAPHIE
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: .9rem; }
h5 { font-size: .82rem; }
h6 { font-size: .75rem; }

p { color: var(--text-secondary); margin-bottom: .75rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Le soulignement ne vaut que pour un lien en ligne, dans du texte.
   Un lien qui enveloppe une carte ou une ligne de tableau soulignerait tout
   son contenu — titre, chiffres, boutons imbriqués. Son survol se signale
   par sa bordure et son fond, pas par un trait. */
a:has(> div, > p, > h1, > h2, > h3, > h4, > h5, > h6,
      > section, > article, > header, > ul, > ol, > table,
      > figure, > img, > svg):hover { text-decoration: none; }

/* Repli pour les navigateurs sans :has(), et pour les cas nommes. */
.sidebar-item, .btn, .tab, .filter-btn, .page-btn, .nav-item,
.admin-card, .theme-card, .quick-action, .list-item, .stat-card,
.card, .kpi, .breadcrumb a, .deal-link,
td a.ref-number, .dropdown-item,
tr a, .data-table a, .deal-table a { text-decoration: none; }
.sidebar-item:hover, .btn:hover, .tab:hover, .filter-btn:hover,
.page-btn:hover, .nav-item:hover, .admin-card:hover, .theme-card:hover,
.quick-action:hover, .list-item:hover, .stat-card:hover, .card:hover,
.kpi:hover, .dropdown-item:hover { text-decoration: none; }
.breadcrumb a:hover, .deal-link:hover { text-decoration: underline; }

/* Toute donnée qui s'aligne en colonne */
.mono, .ref-number, .num,
td .money, .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Intitulé de section / en-tête de colonne */
.eyebrow {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ========================================
   BOUTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .42rem .85rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { background: var(--bg-tertiary); border-color: var(--text-tertiary); }
.btn:active { transform: translateY(.5px); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--on-primary);
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-tertiary); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: transparent; }

.btn-danger {
  background: transparent;
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}
.btn-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }

.btn-sm { padding: .3rem .6rem; font-size: .75rem; }

/* ========================================
   CARTES & PANNEAUX
   ======================================== */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.card:hover { border-color: var(--card-border); }

.card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}

.card-title, .card-header h3 {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.card-body { padding: 1rem; color: var(--text-secondary); }

/* ========================================
   CHAMPS
   ======================================== */

.input, .form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select {
  /* Pas de largeur ici : un champ de barre de filtres, de cellule editable ou
     de recherche doit garder la sienne. La pleine largeur est un comportement
     de formulaire, declare juste en dessous. */
  padding: .42rem .6rem;
  font-family: var(--font-body);
  font-size: .85rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--input-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input[type="number"], input[type="date"], input[type="time"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

input::placeholder, textarea::placeholder { color: var(--input-placeholder); }

.input:hover, .form-control:hover, input:hover, select:hover, textarea:hover {
  border-color: var(--border-hover);
}

.input:focus, .form-control:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* Pleine largeur : dans un formulaire seulement. */
.input, .form-control, .form-group > input, .form-group > select,
.form-group > textarea, .field > input, .field > select, .field > textarea,
.form-row input, .form-row select, .form-row textarea,
.modal .form-group input, .modal .form-group select,
.modal .form-group textarea { width: 100%; }

label, .form-label, .form-group label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-secondary);
  margin-bottom: .25rem;
}

/* ========================================
   RAIL DE NAVIGATION
   ======================================== */

.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  height: 100vh;
  position: sticky;
  top: 0;
  padding: .75rem .5rem;
  overflow-y: auto;
}

.sidebar-header {
  padding: .35rem .5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: .75rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .5rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 0;
}

.sidebar-item:hover { background: var(--sidebar-hover); color: var(--text-primary); text-decoration: none; }

.sidebar-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: 600;
}

.sidebar-item svg { width: 15px; height: 15px; flex: none; }

/* Intitulé de groupe dans le rail */
.sidebar-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: .9rem .5rem .35rem;
}

/* ========================================
   PASTILLES D'ÉTAT
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge-flat::before { display: none; }

.badge-success   { background: var(--color-success-bg); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.badge-warning   { background: var(--color-warning-bg); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.badge-error,
.badge-danger    { background: var(--color-error-bg);   color: var(--color-error);   border-color: color-mix(in srgb, var(--color-error) 28%, transparent); }
.badge-info      { background: var(--color-info-bg);    color: var(--color-info);    border-color: color-mix(in srgb, var(--color-info) 25%, transparent); }
.badge-primary   { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary-line); }
.badge-secondary { background: var(--bg-tertiary);      color: var(--text-tertiary); border-color: var(--border-color); }
.badge-complete  { background: var(--color-success-bg); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.badge-invoiced  { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary-line); }

/* ========================================
   TABLEAUX
   ======================================== */

.data-table, .deal-table, .lines-table, .modal-table, .show-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
}

.data-table thead th, .deal-table th, .lines-table th,
.modal-table th, .show-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-tertiary);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table td, .deal-table td, .lines-table td,
.modal-table td, .show-table td {
  padding: .45rem .7rem;
  font-size: .82rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.data-table tbody tr:hover,
.deal-table tbody tr:hover,
.modal-table tbody tr:hover { background: var(--bg-tertiary); }

.data-table tbody tr:last-child td { border-bottom: 0; }

/* Montants et quantités */
td.text-right, th.text-right, .r { text-align: right; }
td.text-center, th.text-center, .c { text-align: center; }

/* Référence : chasse fixe du mono + accent. */
.ref-number {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ========================================
   ONGLETS
   ======================================== */

.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; }

.tab {
  padding: .5rem .85rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text-primary); background: transparent; }
.tab.active { color: var(--text-primary); border-bottom-color: var(--color-primary); }

/* Filtres en pastille */
.filter-btn {
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 500;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: transparent; }
.filter-btn.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}

/* ========================================
   MODALES
   ======================================== */

.modal { background: color-mix(in srgb, #0B0E14 55%, transparent); backdrop-filter: blur(2px); }

.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }

.modal-section h4 {
  font-family: var(--font-head);
  font-size: .8rem;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: .4rem;
  margin-bottom: .75rem;
}

/* ========================================
   LIGNES D'INFORMATION
   ======================================== */

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .55rem .75rem;
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  margin-bottom: 0;
}
.info-row:last-child { border-bottom: 0; }
.info-row:hover { background: var(--bg-tertiary); }
.info-row label { font-weight: 500; color: var(--text-secondary); margin: 0; font-size: .82rem; }
.info-row .value { color: var(--text-primary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ========================================
   CARTES D'ADMINISTRATION
   ======================================== */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.admin-card, .theme-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.admin-card:hover, .theme-card:hover {
  transform: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.admin-card-icon, .theme-icon {
  width: 36px; height: 36px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .85rem;
}

.admin-card h3, .theme-title { font-size: .95rem; margin: 0 0 .25rem; }
.admin-card p, .theme-desc { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ========================================
   BASCULE DE THÈME
   ======================================== */

.theme-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 36px; height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: border-color var(--transition);
  z-index: 9999;
}
.theme-toggle:hover { transform: none; border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.theme-toggle svg { width: 16px; height: 16px; color: var(--text-secondary); }

/* ========================================
   UTILITAIRES
   ======================================== */

.container { max-width: 1440px; margin: 0 auto; padding: 0 1.25rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted { color: var(--text-tertiary); }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 180ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 860px) {
  :root { --ui-density: 14px; }
  .main-content { padding: .85rem; }
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    z-index: 1000;
    transition: left 200ms ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; }
}

/* ========================================================================
   COMPATIBILITÉ V1
   Neutralise les couleurs écrites en dur dans deal-styles.css et
   purchase-order-styles.css, pour qu'elles suivent le thème.
   À supprimer au fur et à mesure que ces fichiers sont nettoyés.
   ======================================================================== */

/* Texte posé sur l'accent : en sombre l'accent est clair, le blanc ne passe plus */
.btn-primary,
.btn-save-line,
.pack-badge,
.page-btn.active,
.filter-btn.active,
.tab-btn.active,
.section-chip:hover,
.addr-badge:hover, .contact-badge:hover, .po-badge:hover,
.modal-table .btn-select { color: var(--on-primary) !important; }

.filter-btn.active { background: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--bg-primary) !important; }

/* Ligne de département : bandeau plein en couleur d accent.
   Le fond et le texte sont declares par la page ; le design system ne fixe
   ici que la typographie, pour que les deux tables soient identiques. */
.deal-table .dept-row td,
.show-table .dept-row td {
  padding: .35rem .7rem !important;
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  border-bottom: 0;
}

/* Ligne de famille */
.deal-table .family-row,
.show-table .family-row { background: var(--bg-secondary) !important; }
.deal-table .family-name, .deal-table .family-total,
.show-table .family-name, .show-table .family-total { color: var(--text-secondary) !important; }

/* Sous-totaux */
.deal-table .subtotal-row, .show-table .subtotal-row { background: transparent !important; }
.deal-table .subtotal-row td, .show-table .subtotal-row td { color: var(--text-tertiary) !important; }

/* Lignes de pack : aucun fond. La hierarchie se lit a l indentation du
   libelle et au badge PACK ; une teinte par niveau alourdit la table. */
.item-row.pack-parent,
.item-row.pack-child { background: transparent !important; }

/* Rouges et verts en dur */
.text-danger, .btn-del:hover, .btn-delete:hover,
.btn-remove:hover, .selected-item button:hover,
.form-label.required::after, .required,
.totals-row.discount strong,
.deal-table tfoot .discount .totals-value { color: var(--color-error) !important; }

.btn-remove:hover { background: var(--color-error-bg) !important; }

.sublease-badge, .editable.toggle.active, .status-dot.active { color: var(--color-success) !important; }
.status-dot.inactive { color: var(--text-tertiary) !important; }
.addr-badge.pickup { border-color: var(--color-success) !important; color: var(--color-success) !important; }
.addr-badge.delivery { border-color: var(--color-info) !important; color: var(--color-info) !important; }

/* Indicateurs et alertes */
.pack-indicator { background: var(--color-info-bg) !important; color: var(--color-info) !important; }
.alert-success  { background: var(--color-success-bg) !important; color: var(--color-success) !important; }

/* Survols teintés en dur */
.editable:hover, .editable-title:hover,
.deal-info-bar .editable-deal:hover { background: var(--color-primary-bg) !important; }
.inline-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent) !important; }
@keyframes flash-green { 0%, 100% { background: transparent } 50% { background: var(--color-success-bg) } }

/* Boutons dégradés IA : à plat, l'accent suffit */
.btn-icon-sm.btn-ai, .btn-icon-ai {
  background: var(--color-primary) !important;
  color: var(--on-primary) !important;
  box-shadow: none !important;
}
.btn-icon-ai:hover { transform: none !important; filter: brightness(1.08); }

/* Totaux du bon de commande */
/* Ligne TTC : filet d'accent et gras, plutôt qu'un pavé plein pleine largeur. */
.totals-table { background: var(--bg-tertiary) !important; }
.totals-table tr:last-child { background: var(--color-primary-bg) !important; }
.totals-table tr:last-child td { border-top: 2px solid var(--color-primary) !important; }
.totals-table tr:last-child .total-label { color: var(--text-primary) !important; font-weight: 700; }
.totals-table tr:last-child .total-value { color: var(--text-primary) !important; font-weight: 700; font-size: 1.05rem; }
.totals-row.total strong, .deal-table tfoot .total .totals-value { color: var(--color-primary) !important; }

/* Ombres de modale et de menu */
.modal-content, .dropdown-menu, .autocomplete-results, .product-dropdown-list {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-color) !important;
}

/* Zone de dépôt */
.ai-upload-zone { border-color: var(--border-strong) !important; }
.ai-upload-zone:hover { border-color: var(--color-primary) !important; background: var(--bg-tertiary) !important; }