/* ==========================================================================
   Spid Resto — portail vendeur
   Systeme visuel clair (refonte).

   Trois regles tenues partout dans ce fichier, parce qu'elles sont ce qui
   separait l'ancienne feuille d'un vrai tableau de bord :

   1. UNE SEULE COULEUR DE MARQUE, et elle ne sert qu'a designer l'action.
      Le reste de l'ecran est neutre. Un ecran ou tout est colore est un ecran
      ou plus rien ne ressort — et en cuisine, ce qui doit ressortir est la
      commande en retard, jamais la barre laterale.

   2. AUCUN LISERE D'UN SEUL COTE. Un statut se dit par une bordure COMPLETE,
      une surface teintee et une pastille. Un trait a gauche est un artefact
      de gabarit : il ne survit pas au responsive et se lit mal de loin.

   3. AUCUN EMOJI COMME ICONE. Les icones sont un sprite SVG defini en tete
      d'index.html, en trait de 1.75 et a `currentColor` : elles prennent la
      couleur de leur contexte, restent nettes a toute densite et ne changent
      pas de dessin d'un systeme a l'autre.
   ========================================================================== */

:root {
  /* --- Marque ---------------------------------------------------------- */
  /* Meme orange que l'application client (AppColors.primary = #FF6B35) :
     le restaurateur doit reconnaitre la meme maison des l'ecran de connexion. */
  --brand-50:  #FFF4EF;
  --brand-100: #FFE4D7;
  --brand-200: #FFC8AE;
  --brand-300: #FFA47B;
  --brand-400: #FF8552;
  --brand-500: #FF6B35;
  --brand-600: #ED5216;
  --brand-700: #C13F0E;
  --brand-800: #93320F;

  /* --- Neutres --------------------------------------------------------- */
  /* Legerement bleutes : sur un ecran de tablette, un gris parfaitement neutre
     tire vers le vert et fait paraitre les blancs sales. */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F7F8FA;
  --n-100: #F1F3F7;
  --n-150: #EAEDF2;
  --n-200: #E3E7EE;
  --n-300: #CFD5DF;
  --n-400: #9BA3B2;
  --n-500: #6E7684;
  --n-600: #515A69;
  --n-700: #3A4250;
  --n-800: #262C38;
  --n-900: #151A23;

  /* --- Etats ----------------------------------------------------------- */
  --ok-50:   #ECFDF3;  --ok-200:  #A9E9C6;  --ok-500:  #12A56C;  --ok-700:  #06774C;
  --warn-50: #FFF8EB;  --warn-200:#FBDFA4;  --warn-500:#EF9B0B;  --warn-700:#9A5F05;
  --err-50:  #FEF3F2;  --err-200: #F7C8C6;  --err-500: #E14944;  --err-700: #B02420;
  --info-50: #EFF5FF;  --info-200:#C0D6FD;  --info-500:#3272ED;  --info-700:#1B4CBB;
  --prep-50: #F5F2FF;  --prep-200:#D3C8FC;  --prep-500:#7C5CFF;  --prep-700:#5433CF;

  /* --- Semantique ------------------------------------------------------ */
  --bg:        var(--n-50);
  --surface:   var(--n-0);
  --surface-2: var(--n-50);
  --line:      var(--n-200);
  --line-soft: var(--n-150);
  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-500);

  /* Alias historiques : des styles en ligne d'index.html s'y referent encore. */
  --primary:    var(--brand-600);
  --danger:     var(--err-500);
  --success:    var(--ok-500);
  --warning:    var(--warn-500);
  --text-muted: var(--n-500);
  --border:     var(--n-200);

  /* --- Rayons ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;
  --radius: var(--r-lg);

  /* --- Ombres ---------------------------------------------------------- */
  /* Deux couches, tres basses en opacite. Une ombre visible individuellement
     est une ombre trop forte : elle ne doit se remarquer qu'a son absence. */
  --sh-xs: 0 1px 2px rgba(19,26,38,.05);
  --sh-sm: 0 1px 3px rgba(19,26,38,.07), 0 1px 2px -1px rgba(19,26,38,.05);
  --sh-md: 0 6px 12px -4px rgba(19,26,38,.07), 0 2px 4px -2px rgba(19,26,38,.05);
  --sh-lg: 0 16px 32px -8px rgba(19,26,38,.11), 0 4px 10px -4px rgba(19,26,38,.06);
  --sh-xl: 0 32px 64px -16px rgba(19,26,38,.20), 0 8px 20px -8px rgba(19,26,38,.10);
  --shadow: var(--sh-sm);

  /* Anneau de focus : meme geste partout, visible au clavier comme au doigt. */
  --ring: 0 0 0 3px var(--brand-100);

  --sidebar-w: 264px;
  --topbar-h: 64px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

::selection { background: var(--brand-100); }

/* Barres de defilement discretes : sur les colonnes de la vue Cuisine, la
   barre native de Windows mange 17 px et decale les cartes. */
.kitchen-col, .sidebar-nav, .modal-content, .hour-chart {
  scrollbar-width: thin;
  scrollbar-color: var(--n-300) transparent;
}
.kitchen-col::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.hour-chart::-webkit-scrollbar { width: 8px; height: 8px; }
.kitchen-col::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.hour-chart::-webkit-scrollbar-thumb {
  background: var(--n-300); border-radius: 999px; border: 2px solid transparent;
  background-clip: content-box;
}

/* ==========================================================================
   Icones (sprite SVG d'index.html)
   ========================================================================== */

.sprite { display: none; }

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -3px;
}

.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 22px; height: 22px; }
.ico-xl { width: 28px; height: 28px; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
}

.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible { box-shadow: var(--ring); }

.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: var(--sh-xs);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--n-300);
  color: var(--n-700);
  box-shadow: var(--sh-xs);
}
.btn-secondary:hover:not(:disabled) { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--n-100); color: var(--text); }

/* Encre. C'est le bouton qui fait AVANCER une commande, et il est volontairement
   noir et non orange : sur un plan de travail ou chaque carte en porte un, une
   file de boutons de marque noyait les couleurs d'etat (retard, pret, refus)
   qui, elles, portent une information. Le noir sur blanc est aussi le contraste
   le plus fort disponible — c'est ce qu'on veut viser d'un metre cinquante. */
.btn-ink {
  background: var(--n-900);
  border-color: var(--n-900);
  color: #fff;
  box-shadow: var(--sh-xs);
}
.btn-ink:hover:not(:disabled) { background: var(--n-800); border-color: var(--n-800); }

.btn-success { background: var(--ok-500); border-color: var(--ok-500); color: #fff; box-shadow: var(--sh-xs); }
.btn-success:hover:not(:disabled) { background: var(--ok-700); border-color: var(--ok-700); }

/* Le refus est destructif : le rouge est dans le TEXTE seulement au repos, la
   bordure reste neutre. Sur l'ecran Menu, six lignes portent un « Supprimer » —
   six contours rouges empilent une alerte que rien ne justifie tant que
   personne n'a clique. Le fond plein n'arrive qu'au survol. */
.btn-danger {
  background: var(--surface);
  border-color: var(--n-200);
  color: var(--err-700);
  box-shadow: var(--sh-xs);
}
.btn-danger:hover:not(:disabled) { background: var(--err-500); border-color: var(--err-500); color: #fff; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* Lien discret sous un formulaire. Un <button> et non un <a> : il n'y a nulle
   part ou aller, tout se joue dans la meme page. */
.link-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  color: var(--text-3);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--r-sm);
}
.link-btn:hover { color: var(--brand-700); background: var(--n-50); }

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--n-700);
  letter-spacing: -0.005em;
}

.form-group input,
.form-group select,
.form-group textarea,
.input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: var(--surface);
  border: 1px solid var(--n-300);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  box-shadow: var(--sh-xs);
}

.form-group textarea {
  height: auto;
  min-height: 88px;
  padding: 11px 13px;
  resize: vertical;
  line-height: 1.55;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--n-400); }

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand-400);
  box-shadow: var(--ring);
}

.form-group input[type="file"] {
  height: auto;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--n-50);
  box-shadow: none;
}
.form-group input[type="file"]::file-selector-button {
  height: 28px; margin-right: 12px; padding: 0 12px;
  border: 1px solid var(--n-300); border-radius: var(--r-sm);
  background: var(--surface); color: var(--n-700);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* Chevron dessine en CSS : le chevron natif differe sur chaque systeme et
   casse l'alignement du selecteur de restaurant dans l'en-tete. */
.form-group select, .topbar-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  cursor: pointer;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-hint {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.55;
  margin: -8px 0 16px;
}

.label-hint { font-size: 11.5px; color: var(--text-3); font-weight: 500; }

.error-msg {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--err-700);
  background: var(--err-50);
  border: 1px solid var(--err-200);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
}
.error-msg:empty { display: none; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-25);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.checkbox-row:hover { background: var(--n-50); border-color: var(--n-300); }
.checkbox-row input { width: 17px; height: 17px; accent-color: var(--brand-500); cursor: pointer; }

/* Interrupteur */
.toggle-switch { position: relative; width: 42px; height: 24px; flex: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--n-300);
  border-radius: var(--r-full);
  transition: background-color .18s;
  pointer-events: none;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(19,26,38,.22);
  transition: transform .18s;
}

.toggle-switch input:checked + .toggle-slider { background: var(--ok-500); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow: var(--ring); }
.toggle-switch input:disabled + .toggle-slider { opacity: .45; }
.toggle-switch input:disabled { cursor: not-allowed; }

/* ==========================================================================
   Pastilles et etiquettes
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-100);
  color: var(--n-600);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

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

/* Etat d'une commande. Les cinq teintes sont volontairement distinctes en
   TEINTE et pas seulement en luminosite : la colonne « en preparation » se
   lit de loin, sans avoir a lire le mot. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.status-badge.pending    { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.status-badge.confirmed  { background: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
.status-badge.preparing  { background: var(--prep-50); border-color: var(--prep-200); color: var(--prep-700); }
.status-badge.ready      { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok-700); }
.status-badge.delivered,
.status-badge.completed  { background: var(--n-100);   border-color: var(--n-200);    color: var(--n-600); }
.status-badge.cancelled  { background: var(--err-50);  border-color: var(--err-200);  color: var(--err-700); }

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--surface);
  color: var(--n-600);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Annulation demandee au support (082). Teinte d'alerte et non d'erreur : la
   commande n'est pas annulee, elle suit son cours — la cuisine doit continuer
   a la preparer tant que le support n'a pas tranche. */
.type-badge-warn {
  border-color: var(--warn-200);
  background: var(--warn-50);
  color: var(--warn-700);
}

.badge-muted {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-50);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
}

/* ==========================================================================
   Cartes et titres de section
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.card h3 {
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.page-header-sub {
  display: block;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 2px;
}

.page-header-actions { display: flex; align-items: center; gap: 10px; }

.section-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--n-100);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 18px;
}
.section-hint strong { color: var(--text); font-weight: 620; }

/* Les ecrans de reglage se lisent en une colonne : au-dela de ~760 px, l'oeil
   perd la ligne entre l'etiquette et son champ. Le service (cuisine,
   commandes) garde toute la largeur. */
.view-narrow { max-width: 760px; }

/* ==========================================================================
   Structure : barre laterale, en-tete, contenu
   ========================================================================== */

.app-layout { min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
}

.sidebar-header { padding: 18px 16px 14px; }

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Le sigle est le vrai logo Spid, pas un pictogramme generique : c'est la
   premiere chose que voit le restaurateur, et la seule qui porte la marque.
   `object-fit: cover` : le fichier est deja un carre a fond orange, la tuile
   ne fait que l'arrondir. */
.brand-mark {
  width: 54px; height: 38px;
  flex: none;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  background: var(--brand-600);
  box-shadow: 0 4px 10px -2px rgba(237,82,22,.42);
}

/* `display: block` : les deux lignes du bloc de marque sont des <span> — sans
   cela, le nom du restaurateur se colle au nom du produit sur une seule ligne. */
.brand-text { min-width: 0; }

.brand-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
}
.brand-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.005em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  padding: 6px 12px 12px;
  overflow-y: auto;
}

.nav-group-label {
  padding: 14px 10px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-400);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  margin-bottom: 2px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-align: left;
  transition: background-color .13s, color .13s;
}

.nav-item .ico { color: var(--n-400); transition: color .13s; }

.nav-item:hover { background: var(--n-100); color: var(--text); }
.nav-item:hover .ico { color: var(--n-600); }

/* Etat actif : pastille pleine et teintee. Plus de trait a droite — il sautait
   d'un pixel selon la largeur et ne survivait pas au menu en tiroir. */
.nav-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 620;
}
.nav-item.active .ico { color: var(--brand-500); }

.nav-item-danger { color: var(--n-600); }
.nav-item-danger:hover { background: var(--err-50); color: var(--err-700); }
.nav-item-danger:hover .ico { color: var(--err-500); }

.nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--n-150);
  color: var(--n-600);
  font-size: 11px;
  font-weight: 700;
}
.nav-item.active .nav-count { background: var(--brand-100); color: var(--brand-700); }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--line-soft); }

/* Employe en poste. C'est son nom qui signe les actions dans le journal
   d'audit : il est rappele en permanence, jamais derriere un clic. */
.staff-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--n-25);
}

.staff-avatar {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.staff-badge-text { min-width: 0; flex: 1; }
.staff-badge-name {
  display: block; font-size: 13.5px; font-weight: 620; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-badge-role { display: block; font-size: 11.5px; color: var(--text-3); }

.staff-badge-actions { display: flex; gap: 4px; }
.staff-badge-actions button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--n-500);
}
.staff-badge-actions button:hover { color: var(--brand-700); border-color: var(--brand-200); background: var(--brand-50); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(21,26,35,.45);
  backdrop-filter: blur(2px);
}

/* --- En-tete permanent ---------------------------------------------------
   Le restaurant, les trois ecrans de service, la pause et l'employe en poste.
   Le menu lateral ne sert qu'aux ecrans de gestion : un service complet se
   pilote sans jamais l'ouvrir. */
.topbar {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0;
  height: var(--topbar-h);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar-burger {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--n-600);
}
.topbar-burger:hover { background: var(--n-100); color: var(--text); }

.topbar-vendor { min-width: 0; }

.topbar-select {
  max-width: 240px;
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
  box-shadow: var(--sh-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-select:hover { border-color: var(--n-300); }
.topbar-select:focus { border-color: var(--brand-400); box-shadow: var(--ring); outline: none; }

.topbar-vendor-name {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-vendor-name .ico { color: var(--n-400); }

/* Interrupteur segmente : les trois ecrans de service. Le fond gris tient les
   trois ensemble, l'onglet actif est la seule surface blanche. */
.topbar-nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--n-100);
  border: 1px solid var(--line-soft);
}

.topbar-nav button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.topbar-nav button .ico { width: 16px; height: 16px; color: var(--n-400); }
.topbar-nav button:hover { color: var(--text); }
.topbar-nav button:hover .ico { color: var(--n-600); }

.topbar-nav button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-sm);
}
.topbar-nav button.active .ico { color: var(--brand-500); }

.topbar-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--n-200);
  color: var(--n-600);
  font-size: 11px;
  font-weight: 700;
}
/* Une commande jamais confirmee : c'est le seul compteur qui a le droit d'etre
   colore, sinon plus aucun ne se distingue. */
.topbar-badge.urgent { background: var(--brand-500); color: #fff; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sh-xs);
  transition: background-color .14s, border-color .14s, color .14s;
}
.topbar-pill:hover { border-color: var(--n-300); color: var(--text); }
.topbar-pill .ico { width: 15px; height: 15px; }

.topbar-pill.open { color: var(--ok-700); border-color: var(--ok-200); background: var(--ok-50); }
.topbar-pill.open .ico { color: var(--ok-500); }
.topbar-pill.paused { color: var(--warn-700); border-color: var(--warn-200); background: var(--warn-50); }
.topbar-pill.paused .ico { color: var(--warn-500); }
.topbar-pill.staff { color: var(--text); }
.topbar-pill.staff .ico { color: var(--n-400); }
/* Changements de statut faits hors ligne, pas encore partis. */
.topbar-pill.queued {
  color: var(--warn-700); border-color: var(--warn-200); background: var(--warn-50);
  cursor: default;
}
.topbar-pill-icon { width: 34px; padding: 0; justify-content: center; }

.main-content {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 24px) 24px 32px;
  min-height: 100vh;
}

/* Plein ecran : le menu lateral disparait, l'en-tete prend toute la largeur. */
.app-layout.kitchen-full .sidebar { transform: translateX(-100%); }
.app-layout.kitchen-full .sidebar.open { transform: translateX(0); }
.app-layout.kitchen-full .topbar { left: 0; }
.app-layout.kitchen-full .main-content { margin-left: 0; }
.app-layout.kitchen-full .topbar-burger { display: grid; }

/* ==========================================================================
   Connexion
   ========================================================================== */

.login-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
}

/* Panneau de marque. Encre profonde + halo orange : la seule surface sombre du
   portail, et c'est voulu — elle donne son poids a l'ecran d'entree. */
.login-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 48px;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,107,53,.30) 0%, rgba(255,107,53,0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(124,92,255,.20) 0%, rgba(124,92,255,0) 60%),
    linear-gradient(160deg, #1B2230 0%, #101620 100%);
  color: #fff;
  overflow: hidden;
}

/* Trame legere : elle empeche le degrade de paraitre plat sur un grand ecran. */
.login-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 30% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}

.login-aside > * { position: relative; z-index: 1; }

.login-aside .brand-name { color: #fff; }
.login-aside .brand-sub { color: rgba(255,255,255,.52); }

.login-pitch h2 {
  font-size: 34px;
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin-bottom: 14px;
  max-width: 12ch;
}
.login-pitch p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
  max-width: 42ch;
}

.login-points { display: grid; gap: 14px; margin-top: 30px; }
.login-point { display: flex; align-items: flex-start; gap: 11px; }
.login-point .ico { color: var(--brand-400); margin-top: 2px; }
.login-point-text { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.5; }

.login-foot { font-size: 12px; color: rgba(255,255,255,.38); }

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.login-card { width: 100%; max-width: 392px; }

.login-card-brand { display: none; margin-bottom: 26px; }

.login-card h1 {
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.login-card > p {
  color: var(--text-3);
  font-size: 14.5px;
  margin-bottom: 28px;
}

/* Chapeau en deux temps : la phrase, puis son rappel pratique. Les deux sont
   groupes dans `.login-lead` parce que la marge de 28px ci-dessus les
   separerait sinon comme deux idees sans rapport, alors qu'ils se lisent
   d'une traite (« code envoye » / « sinon, cherchez dans les spams »). */
.login-lead { margin-bottom: 28px; }

.login-lead > p {
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.5;
}

.login-lead > .login-hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ==========================================================================
   Voile de session employe (PIN)
   ========================================================================== */

.staff-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(80% 60% at 50% 0%, var(--brand-50) 0%, rgba(255,244,239,0) 62%),
    var(--bg);
}

.staff-gate-card {
  width: 100%;
  max-width: 460px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  text-align: center;
}

.staff-gate-card h2 { font-size: 22px; font-weight: 680; letter-spacing: -0.025em; margin-bottom: 6px; }

.staff-gate-sub {
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 24px;
  min-height: 20px;
}

.staff-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 10px;
}

/* Cibles larges : on les touche avec les mains occupees, en cuisine. */
.staff-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--sh-xs);
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
.staff-chip:hover:not(:disabled) { border-color: var(--brand-300); box-shadow: var(--sh-md); }
.staff-chip:active:not(:disabled) { transform: scale(.98); }
.staff-chip:disabled { opacity: .5; cursor: not-allowed; }

.staff-chip .staff-avatar { width: 40px; height: 40px; font-size: 15px; }
.staff-chip-name { font-size: 15px; font-weight: 620; }
.staff-chip-role { font-size: 11.5px; color: var(--text-3); }
.staff-chip:disabled .staff-avatar { background: var(--n-100); color: var(--n-500); }

.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }

.pin-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--n-300);
  transition: background-color .12s, border-color .12s, transform .12s;
}
.pin-dot.filled { background: var(--brand-500); border-color: var(--brand-500); transform: scale(1.1); }

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 292px;
  margin: 0 auto;
}

.pin-key {
  height: 62px;
  font-size: 23px;
  font-weight: 620;
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--sh-xs);
  transition: background-color .1s, transform .08s;
}
.pin-key:hover { background: var(--n-50); }
.pin-key:active { background: var(--n-100); transform: scale(.96); }
.pin-key-alt { color: var(--text-3); }
.pin-key-ok { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.pin-key-ok:hover { background: var(--brand-600); }
.pin-key-ok:disabled { opacity: .4; cursor: not-allowed; }
.pin-key .ico { width: 22px; height: 22px; stroke-width: 2; }

/* ==========================================================================
   Vue Cuisine
   ========================================================================== */

.kitchen {
  height: calc(100vh - var(--topbar-h) - 48px);
  display: flex;
  flex-direction: column;
}

.kitchen-notice {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--warn-50);
  border: 1px solid var(--warn-200);
  color: var(--warn-700);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.kitchen-notice .ico { color: var(--warn-500); }

.kitchen-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  min-height: 0;
}

.kitchen-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.kitchen-col-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--n-25);
}

.kitchen-col-head h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

/* La couleur de l'etape est portee par une pastille, plus par un trait pose
   sur le bord de la colonne. */
.kitchen-col-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.col-new   .kitchen-col-dot { background: var(--warn-500); box-shadow: 0 0 0 3px var(--warn-50); }
.col-prep  .kitchen-col-dot { background: var(--prep-500); box-shadow: 0 0 0 3px var(--prep-50); }
.col-ready .kitchen-col-dot { background: var(--ok-500);   box-shadow: 0 0 0 3px var(--ok-50); }

.kitchen-col-count {
  margin-left: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--n-100);
  border: 1px solid var(--line-soft);
  color: var(--n-700);
  font-size: 12.5px;
  font-weight: 700;
}

.kitchen-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }

.kitchen-col-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 12px;
  color: var(--n-400);
  font-size: 13px;
}
.kitchen-col-empty .ico { width: 26px; height: 26px; color: var(--n-300); }

.kitchen-card {
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 13px 14px;
  box-shadow: var(--sh-xs);
  transition: box-shadow .15s, border-color .15s;
}
.kitchen-card + .kitchen-card { margin-top: 10px; }
.kitchen-card:hover { box-shadow: var(--sh-md); }

/* Chrono. Au-dela de `vendors.avg_prep_minutes`, la carte entiere vire au
   rouge — bordure COMPLETE et surface teintee, lisibles de trois metres. */
.kitchen-card.tone-warn { border-color: var(--warn-200); background: var(--warn-50); }
.kitchen-card.tone-late { border-color: var(--err-200);  background: var(--err-50); }
.kitchen-card.tone-done { border-color: var(--ok-200);   background: var(--ok-50); }
.kitchen-card.queued { opacity: .68; border-style: dashed; }

.kitchen-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.kitchen-num { font-size: 19px; font-weight: 720; letter-spacing: -0.02em; }

.kitchen-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-50);
  color: var(--n-600);
  font-size: 13px;
  font-weight: 700;
}
.kitchen-timer .ico { width: 13px; height: 13px; }
.tone-warn .kitchen-timer { background: #fff; border-color: var(--warn-200); color: var(--warn-700); }
.tone-late .kitchen-timer { background: var(--err-500); border-color: var(--err-500); color: #fff; }
.tone-done .kitchen-timer { background: #fff; border-color: var(--ok-200); color: var(--ok-700); }

.kitchen-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 5px;
}
.kitchen-queued-tag { color: var(--warn-700); font-weight: 600; }

.kitchen-items {
  list-style: none;
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.kitchen-items li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15px;
  font-weight: 520;
  line-height: 1.65;
}
.kitchen-items .qty {
  min-width: 26px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--n-100);
  color: var(--n-700);
  font-size: 12.5px;
  font-weight: 720;
  text-align: center;
  flex: none;
}
.tone-late .kitchen-items .qty { background: #fff; color: var(--err-700); }
.tone-warn .kitchen-items .qty,
.tone-done .kitchen-items .qty { background: #fff; }
.tone-warn .kitchen-items, .tone-late .kitchen-items, .tone-done .kitchen-items { border-top-color: rgba(19,26,38,.08); }

.kitchen-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--warn-50);
  border: 1px solid var(--warn-200);
  color: var(--warn-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.kitchen-note .ico { width: 15px; height: 15px; margin-top: 1px; flex: none; }
.tone-warn .kitchen-note, .tone-late .kitchen-note { background: #fff; }

.kitchen-card-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Cible large : en cuisine on tape avec le dos du doigt, parfois gante. */
.kitchen-advance { flex: 1; height: 44px; font-size: 14.5px; font-weight: 650; }
.kitchen-card-actions .btn-secondary { flex: none; }

/* ==========================================================================
   Commandes
   ========================================================================== */

/* Onglets de filtre. Meme grammaire que l'en-tete : un rail gris, une seule
   surface blanche. */
.order-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--n-100);
  border: 1px solid var(--line-soft);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }

.filter-count {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--n-200);
  color: var(--n-600);
  font-size: 11px;
  font-weight: 700;
}
.filter-btn.active .filter-count { background: var(--n-150); }
.filter-count.urgent { background: var(--brand-500); color: #fff; }

.order-list { display: grid; gap: 10px; }

.order-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.order-card:hover { border-color: var(--n-300); box-shadow: var(--sh-md); transform: translateY(-1px); }

/* Une commande jamais confirmee doit sauter aux yeux depuis l'autre bout de la
   cuisine. Bordure complete + surface teintee ; la pulsation ne touche que
   l'ombre, elle ne fait donc bouger aucun texte. */
.order-card.is-new {
  border-color: var(--brand-200);
  background: var(--brand-50);
  animation: pulse-new 2.4s ease-in-out infinite;
}
@keyframes pulse-new {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,107,53,.14); }
}

/* Ligne de commande : quatre colonnes fixes. Le montant et l'action sont
   toujours a la meme abscisse d'une ligne a l'autre — c'est ce qui permet de
   parcourir la liste a la verticale sans relire chaque carte. */
/* La derniere colonne est de largeur FIXE, et non `auto` : une commande prete
   n'a plus de bouton, et une colonne elastique ferait alors glisser son montant
   de 100 px vers la droite. La colonne des montants doit rester un aplomb. */
.order-row {
  display: grid;
  grid-template-columns: minmax(140px, 168px) minmax(0, 1fr) auto 162px;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
}

/* Sans colonne d'action (tableau de bord) : on consulte, on ne fait pas
   avancer. Trois colonnes au lieu de quatre. */
.order-row-plain { grid-template-columns: minmax(140px, 168px) minmax(0, 1fr) auto; }

.order-id { display: flex; flex-direction: column; gap: 4px; }
.order-main { min-width: 0; }
.order-action { display: flex; justify-content: flex-end; min-width: 0; }

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.order-number { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }

.order-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-3);
}

.order-elapsed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-50);
  color: var(--n-600);
  font-size: 11.5px;
  font-weight: 700;
}
.order-elapsed .ico { width: 12px; height: 12px; }
/* « warn » demarre a 80 % du delai du restaurant — le moment ou accelerer sert
   encore a quelque chose. Une commande prete n'a plus de chrono qui court. */
.order-elapsed.tone-warn { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.order-elapsed.tone-late { background: var(--err-50);  border-color: var(--err-200);  color: var(--err-700); }
.order-elapsed.tone-done { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok-700); }

.order-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.order-customer {
  font-size: 14px;
  font-weight: 580;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.order-amount {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: right;
}

.order-quick-action {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Statistiques et indicateurs
   ========================================================================== */

/* `auto-fit` + `grid-auto-rows: 1fr` : les cartes gardent la meme hauteur meme
   quand l'une porte une precision sous son chiffre. Sans cela la grille est
   dentelee des qu'un seul indicateur a une mention. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-sm);
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.stat-label .ico { width: 15px; height: 15px; color: var(--n-400); }

/* Un montant en FCFA depasse vite les dix caracteres (« 1 284 500 FCFA ») et
   passait a la ligne, doublant la hauteur de la carte. Il retrecit plutot que
   de se casser : `clamp` le tient lisible entre 19 et 25 px. */
.stat-value {
  font-size: clamp(19px, 1.55vw + 6px, 25px);
  font-weight: 690;
  letter-spacing: -0.032em;
  margin-top: 7px;
  line-height: 1.15;
  white-space: nowrap;
}

.stat-hint { font-size: 12px; color: var(--text-3); margin-top: auto; padding-top: 6px; }

/* Le solde tient la colonne de gauche, les quatre gains celle de droite : seul
   sur sa ligne, le bandeau s'etirait sur toute la largeur pour un seul nombre. */
.wallet-top {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 22px;
  align-items: stretch;
}
.wallet-top .stats-grid { margin-bottom: 0; }
.stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bandeau de solde. Le seul aplat sombre du portail hors connexion : c'est
   le chiffre que le restaurateur vient chercher. */
.wallet-balance {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 28px;
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(255,107,53,.42) 0%, rgba(255,107,53,0) 62%),
    linear-gradient(150deg, #1F2735 0%, #121821 100%);
  box-shadow: var(--sh-lg);
}
.wallet-balance .label {
  font-size: 12.5px;
  font-weight: 550;
  color: rgba(255,255,255,.58);
  margin-bottom: 8px;
}
.wallet-balance .amount {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  white-space: nowrap;
}
.wallet-balance .pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 12.5px;
  font-weight: 550;
  color: rgba(255,255,255,.85);
}

/* Histogramme des heures de pointe. Pas de librairie de graphes : quelques div
   en flex suffisent, et la PWA reste installable sans dependance externe. */
.hour-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 152px;
  padding-top: 8px;
  overflow-x: auto;
}

.hour-col {
  flex: 1 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.hour-bar {
  width: 100%;
  min-height: 3px;
  background: var(--n-150);
  border-radius: 4px 4px 2px 2px;
  transition: height .3s, background-color .15s;
}
.hour-col:hover .hour-bar { background: var(--n-300); }
/* L'heure la plus chargee est la seule information qu'on cherche d'un coup
   d'oeil : elle est la seule coloree. */
.hour-bar.peak { background: var(--brand-500); }
.hour-col:hover .hour-bar.peak { background: var(--brand-600); }

.hour-label { font-size: 10.5px; color: var(--text-3); margin-top: 7px; white-space: nowrap; }

.rank {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-right: 9px;
  border-radius: var(--r-xs);
  background: var(--n-100);
  color: var(--n-600);
  font-size: 11.5px;
  font-weight: 700;
  flex: none;
}

/* ==========================================================================
   Lignes de liste (transactions, retraits, modes de retrait)
   ========================================================================== */

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.transaction-item:last-child { border-bottom: none; padding-bottom: 0; }
.transaction-item:first-of-type { padding-top: 0; }

.transaction-info { min-width: 0; }
.transaction-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
}
.transaction-date { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

.transaction-amount {
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.transaction-amount.credit { color: var(--ok-700); }
.transaction-amount.debit { color: var(--err-700); }

.payout-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--n-200);
  background: var(--n-50);
  color: var(--n-600);
  font-size: 11.5px;
  font-weight: 600;
}
.payout-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.payout-status.st-completed { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok-700); }
.payout-status.st-pending,
.payout-status.st-processing { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.payout-status.st-failed,
.payout-status.st-rejected  { background: var(--err-50);  border-color: var(--err-200);  color: var(--err-700); }

/* Le motif d'un refus vient de l'admin : sans lui, le restaurateur ne peut que
   redemander a l'aveugle. */
.payout-note {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--warn-50);
  border: 1px solid var(--warn-200);
  color: var(--warn-700);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ==========================================================================
   Menu (articles et categories)
   ========================================================================== */

.menu-item-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 18px;
  margin-bottom: 10px;
  box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
.menu-item-card:hover { border-color: var(--n-300); box-shadow: var(--sh-sm); }

.menu-item-info { flex: 1; min-width: 0; }
.menu-item-info h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 620;
  margin-bottom: 4px;
}

.menu-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}
.menu-item-meta .sep { color: var(--n-300); }

/* Rupture temporaire : elle prime sur « Disponible », c'est ce que voit
   reellement le client. Bordure complete, pas de lisere. */
.menu-item-card.out-of-stock { border-color: var(--warn-200); background: var(--warn-50); }

.menu-item-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--warn-200);
  color: var(--warn-700);
  font-size: 11.5px;
  font-weight: 620;
}
.menu-item-stock .ico { width: 13px; height: 13px; }

.menu-item-price {
  font-size: 16px;
  font-weight: 690;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.menu-item-actions { display: flex; gap: 7px; align-items: center; flex: none; }

.cat-icon {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--n-100);
  border: 1px solid var(--line-soft);
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================================
   Profil, notifications, encadres d'etat
   ========================================================================== */

/* Pause : le restaurant se ferme lui-meme en plein coup de feu. Distincte du
   bouton « Desactiver », qui est la coupure administrative. */
.pause-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  margin-bottom: 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--ok-200);
  background: var(--ok-50);
}
.pause-row.paused { border-color: var(--warn-200); background: var(--warn-50); }

.pause-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 620; color: var(--ok-700); }
.pause-title .ico { color: var(--ok-500); }
.pause-row.paused .pause-title { color: var(--warn-700); }
.pause-row.paused .pause-title .ico { color: var(--warn-500); }
.pause-hint { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }

.pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pref-row:last-of-type { border-bottom: none; }
.pref-info h4 { font-size: 14px; font-weight: 600; }
.pref-info p { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* Etat du push de ce poste. Place AVANT les preferences : couper les
   notifications ici rend les interrupteurs suivants sans effet. */
.push-box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--n-25);
}
.push-box.push-ok { border-color: var(--ok-200); background: var(--ok-50); }
.push-box.push-error { border-color: var(--err-200); background: var(--err-50); }

.push-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.push-head h4 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 620; }
.push-head .ico { color: var(--n-400); }
.push-ok .push-head .ico { color: var(--ok-500); }
.push-error .push-head .ico { color: var(--err-500); }

.push-state {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
}
.push-ok .push-state { color: var(--ok-700); }
.push-error .push-state { color: var(--err-700); }

.push-hint { font-size: 12.5px; color: var(--text-2); margin-top: 10px; line-height: 1.55; }
.push-hint-error { color: var(--err-700); font-weight: 500; }

/* ==========================================================================
   Motifs de refus / durees de rupture
   ========================================================================== */

.reason-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.reason-chip {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--n-200);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  text-align: left;
  box-shadow: var(--sh-xs);
  transition: border-color .13s, background-color .13s, color .13s;
}
.reason-chip:hover { border-color: var(--n-400); background: var(--n-50); }
.reason-chip.active {
  border-color: var(--err-500);
  background: var(--err-50);
  color: var(--err-700);
  font-weight: 650;
  box-shadow: 0 0 0 1px var(--err-500);
}

/* ==========================================================================
   Fenetres modales
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(21,26,35,.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: overlay-in .16s ease-out;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 820px);
  overflow-y: auto;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  animation: modal-in .2s cubic-bezier(.32,.72,0,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.modal-header h2 { font-size: 18px; font-weight: 680; letter-spacing: -0.025em; }
.modal-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }

.modal-close {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--n-500);
}
.modal-close:hover { background: var(--n-100); color: var(--text); }

.modal-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--n-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 18px;
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.modal-actions .spacer { margin-left: auto; }

/* Recapitulatif d'une commande dans son detail. */
.detail-grid { display: grid; gap: 10px; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}
.detail-row dt { color: var(--text-3); }
.detail-row dd { font-weight: 550; text-align: right; }

.detail-items { display: grid; gap: 2px; }
.detail-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.detail-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 13px;
  font-size: 16px;
  font-weight: 690;
  letter-spacing: -0.02em;
}

.image-preview {
  display: block;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  object-fit: cover;
}

/* ==========================================================================
   Toasts, bandeau hors-ligne, etats vides, chargement
   ========================================================================== */

.toast-container {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  animation: toast-in .2s cubic-bezier(.32,.72,0,1);
}
.toast::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--n-400);
  box-shadow: 0 0 0 3px var(--n-100);
}
.toast.success::before { background: var(--ok-500); box-shadow: 0 0 0 3px var(--ok-50); }
.toast.error::before   { background: var(--err-500); box-shadow: 0 0 0 3px var(--err-50); }
.toast.info::before    { background: var(--info-500); box-shadow: 0 0 0 3px var(--info-50); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--warn-500);
  color: #43290A;
  box-shadow: var(--sh-md);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  color: var(--text-3);
}
.empty-state .empty-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--n-100);
  border: 1px solid var(--line-soft);
  color: var(--n-400);
  margin-bottom: 16px;
}
.empty-state .empty-icon .ico { width: 24px; height: 24px; }
.empty-state h3 { font-size: 16px; font-weight: 620; color: var(--text); margin-bottom: 5px; }
.empty-state p { font-size: 13.5px; max-width: 44ch; line-height: 1.55; }
.empty-state-sm { padding: 28px 16px; }
.empty-state-sm .empty-icon { width: 40px; height: 40px; margin-bottom: 12px; }

.spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--n-200);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}
.spinner-inline { width: 16px; height: 16px; border-width: 2px; border-top-color: currentColor; border-color: rgba(255,255,255,.35); }
@keyframes spin { to { transform: rotate(360deg); } }

.loading { display: grid; place-items: center; padding: 56px; color: var(--text-3); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette paysage (1024 px, le format d'un passe-plat). Trois colonnes tiennent
   encore, mais une colonne ne fait plus que ~240 px : « En preparation → » et
   « Detail » cote a cote y debordent, et aucun des deux ne peut retrecir sans
   couper son libelle. Ils s'empilent donc, ce qui elargit au passage les deux
   cibles — on tape la avec les mains prises. */
@media (max-width: 1280px) {
  .kitchen-board { gap: 12px; }
  .kitchen-card-actions { flex-direction: column; }
  .kitchen-advance { flex: none; width: 100%; }
  .kitchen-card-actions .btn-secondary { width: 100%; }
  .topbar-nav button { padding: 0 10px; }
}

@media (max-width: 1180px) {
  :root { --sidebar-w: 224px; }
  .kitchen-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .login-container { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .login-card-brand { display: flex; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 60px; }

  .sidebar { transform: translateX(-100%); box-shadow: var(--sh-xl); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .topbar { left: 0; padding: 0 12px; gap: 10px; }
  .topbar-burger { display: grid; }
  .main-content { margin-left: 0; padding: calc(var(--topbar-h) + 16px) 16px 28px; }

  /* Le nom du restaurant et l'interrupteur segmente ne tiennent pas ensemble :
     le selecteur passe en icone seule dans le menu lateral, l'en-tete garde
     les trois ecrans de service — c'est eux qu'on touche en plein coup de feu. */
  .topbar-vendor { display: none; }
  .topbar-nav { flex: 1; }
  .topbar-nav button { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
  .topbar-nav button span:not(.topbar-badge) { display: none; }
  .topbar-nav button .ico { width: 17px; height: 17px; }
  .topbar-pill span { display: none; }
  .topbar-pill { width: 34px; padding: 0; justify-content: center; }
  .topbar-pill.staff { width: auto; padding: 0 12px; }
  .topbar-pill.staff span { display: inline; }

  /* Trois colonnes ne tiennent pas sur un telephone : elles s'empilent, et
     chacune retrouve sa hauteur naturelle. */
  .kitchen { height: auto; }
  .kitchen-board { grid-template-columns: 1fr; }
  .kitchen-col { max-height: none; }
  .kitchen-col-body { overflow: visible; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-header h1 { font-size: 21px; }
  .form-row { grid-template-columns: 1fr; }
  /* Les six onglets defilent au doigt plutot que de s'empiler sur trois
     lignes : `flex-wrap` de base doit etre annule, sinon `overflow-x` n'a
     rien a faire defiler. */
  .order-filters { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; }
  .filter-btn { flex: none; }

  /* Le solde repasse au-dessus des gains : la colonne de droite descendrait
     sous 200 px et les montants n'y tiendraient plus. */
  .wallet-top { grid-template-columns: 1fr; }
  .stat-value { font-size: 22px; }

  /* La ligne de commande redevient une carte : numero et heure en tete, client
     et etats dessous, montant et action sur la derniere ligne. */
  .order-row {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding: 14px 16px;
  }
  .order-id { flex-direction: row; align-items: center; gap: 10px; }
  .order-main { grid-column: 1 / -1; }
  .order-amount { grid-column: 1; font-size: 16px; }
  .order-action { grid-column: 2; }
  .order-row-plain { grid-template-columns: 1fr auto; }
  .order-row-plain .order-amount { grid-column: 2; }
}

@media (max-width: 640px) {
  .main-content { padding-left: 12px; padding-right: 12px; }
  .card, .modal-content { padding: 16px; }
  .stat-value { font-size: 22px; }
  .wallet-balance { padding: 20px; }
  .wallet-balance .amount { font-size: 30px; }
  .menu-item-card { flex-wrap: wrap; gap: 10px; }
  .menu-item-price { order: 2; }
  .menu-item-actions { order: 3; width: 100%; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .order-body { flex-direction: column; align-items: flex-start; gap: 10px; }
  .order-amount { font-size: 16px; }
  .stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason-grid { grid-template-columns: 1fr; }
  .toast-container { top: 10px; right: 10px; left: 10px; max-width: none; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-content { max-width: none; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  .staff-gate-card { padding: 24px 18px; }
}

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

/* ==========================================================================
   Ticket cuisine 80 mm
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; font-size: 12px; }

  .sidebar, .sidebar-overlay, .topbar, .toast-container, .offline-banner,
  .order-filters, .modal-close, .staff-gate, .order-quick-action,
  .modal-actions, .modal-note { display: none !important; }

  /* Quand une fenetre est ouverte, ELLE SEULE s'imprime. Sans cette regle, un
     « Imprimer » depuis le detail d'une commande sortait d'abord la liste des
     commandes en entier — deux pages de bobine thermique avant le ticket.
     Le selecteur est conditionne a la presence de la fenetre : un Cmd+P sur un
     ecran ordinaire imprime toujours cet ecran, et non une page blanche. */
  body:has(.modal-overlay) .app-layout { display: none !important; }

  .modal-overlay { position: static; background: none; display: block; padding: 0; backdrop-filter: none; }

  .modal-content {
    max-width: 80mm; width: 80mm;
    max-height: none; padding: 0;
    background: #fff; color: #000;
    border: none; box-shadow: none; animation: none;
  }

  .card { background: #fff; border: none; box-shadow: none; padding: 0 0 8px; margin-bottom: 8px; }
  .card-title { border-bottom: 1px dashed #000; }
  .main-content { margin-left: 0; padding: 0; }
  .detail-item, .transaction-item { border-bottom: 1px dotted #999; }
  .status-badge, .type-badge, .chip { border-color: #000; color: #000; background: none; }
}