/* Modern editorial design — strict B/W + #33EA40 accent. */

[x-cloak] { display: none !important; }

/* Utilitaire manquant dans le build Tailwind purgé : `sm:flex` n'est utilisé
   que par la barre d'onglets des Réglages, et la purge l'a omis. Sans cette
   règle, `hidden sm:flex` restait masqué sur desktop → seuls les onglets
   « Général/Logo » s'affichaient, sans navigation. */
@media (min-width: 640px) { .sm\:flex { display: flex; } }

:root {
  --black: #000000;
  --white: #ffffff;
  --accent: #33EA40;
  --accent-dark: #25c031;
  --pill-active: #232E3B;   /* ardoise foncée — état actif des sélecteurs (pilules/segments), liseré vert assorti */
  --accent-soft: rgba(51, 234, 64, 0.10);
  --accent-glow: rgba(51, 234, 64, 0.35);

  --line: #ececec;
  --line-strong: #d4d4d4;
  --bg: #fafafa;
  --bg-soft: #f5f5f5;
  --muted: #6b6b6b;
  --muted-2: #888888;
}

html {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at -10% -20%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, var(--accent-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Subtle dot grid overlay (lives behind content) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity: 0.5;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--black); }

/* Typography */
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif;
                letter-spacing: -0.025em; font-weight: 600; }
.font-mono    { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
                font-feature-settings: "ss01", "tnum"; }

.gradient-text {
  background: linear-gradient(120deg, var(--black) 0%, var(--black) 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #0a9612 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Tag / pill / chip — small monospace label */
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 9999px;
  background: var(--black); color: var(--accent);
  border: 1px solid var(--black);
}
.tag-light { background: var(--white); color: var(--black); border-color: var(--black); }
.tag-accent { background: var(--accent); color: var(--black); border-color: var(--accent); }
.tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(51,234,64,0.25);
}
.tag-accent::before, .tag-light::before { background: var(--black); box-shadow: none; }

/* Pulsing green dot */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); position: relative;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Hero panel — full bleed, dark with green accent */
.hero-dark {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #050505 0%, #0e0e0e 50%, #000 100%);
  color: var(--white); border-radius: 1.25rem;
  border: 1px solid #1a1a1a;
}
.hero-dark::before {
  content: ""; position: absolute; inset: -40% -40% auto auto;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  filter: blur(40px); pointer-events: none;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
       padding: .65rem 1.1rem; border-radius: .65rem;
       font-weight: 500; font-size: .9rem; line-height: 1;
       transition: all .18s cubic-bezier(.2,.7,.3,1);
       border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: #1a1a1a; transform: translateY(-1px);
                     box-shadow: 0 12px 24px -14px rgba(0,0,0,0.5); }
.btn-accent  { background: var(--accent); color: var(--black); font-weight: 700;
               box-shadow: 0 6px 22px -6px var(--accent-glow); }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px);
                    box-shadow: 0 14px 30px -8px var(--accent-glow); }
.btn-ghost   { background: var(--white); color: var(--black);
               border: 1px solid var(--line-strong);
               box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--black);
                   transform: translateY(-1px);
                   box-shadow: 0 10px 20px -12px rgba(0,0,0,0.30); }
.btn-ghost:active { transform: translateY(0);
                    box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* Toggle ouvert (ex. réglages du jour) — corps ardoise + liseré vert,
   accordé aux pilules/segments actifs du reste de l'app. */
.btn-ghost.is-active { background: var(--pill-active); color: var(--white);
                       border-color: var(--accent);
                       box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-ghost.is-active:hover { background: var(--pill-active); border-color: var(--accent);
                             transform: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
/* État désactivé homogène pour tous les boutons. */
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed;
                                transform: none !important; box-shadow: none !important; }
.btn-outline-accent { background: transparent; color: var(--black);
                      border: 1.5px solid var(--accent); }
.btn-outline-accent:hover { background: var(--accent); color: var(--black); }
.btn-danger  { background: var(--black); color: var(--white); }
.btn-danger:hover { background: #1a1a1a; }
/* Bouton rouge franc — action de désactivation/destructive bien signalée. */
.btn-red     { background: #dc2626; color: #fff; }
.btn-red:hover { background: #b91c1c; transform: translateY(-1px);
                 box-shadow: 0 12px 24px -14px rgba(220,38,38,0.5); }
/* Libellé long masqué sur mobile (boutons compacts), visible dès sm. */
.dl-long { display: none; }
@media (min-width: 640px) { .dl-long { display: inline; } }

/* Icon-only row action — square ghost button used in dense lists
   (e.g. retirer un plat du menu). Stays B/W at rest, reveals a red
   trash on hover to signal the destructive intent without shouting. */
.btn-icon {
  flex: none; width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .55rem; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--muted-2); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all .15s cubic-bezier(.2,.7,.3,1);
}
.btn-icon svg { width: 1.05rem; height: 1.05rem; }
.btn-icon:hover { background: var(--bg-soft); border-color: var(--black); color: var(--black);
                  transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(0,0,0,0.28); }
.btn-icon:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.btn-icon-danger:hover { background: var(--black); border-color: var(--black); color: #ff5d5d; }

/* Cards */
.card { background: var(--white); border-radius: 1rem; border: 1px solid var(--line);
        box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 14px 40px -28px rgba(0,0,0,.10);
        transition: border-color .18s, box-shadow .18s, transform .18s; }
.card-soft { background: var(--bg-soft); border-radius: 1rem; border: 1px solid var(--line); }
.card-hover { transition: all .18s ease; }
.card-hover:hover { border-color: var(--black); transform: translateY(-2px);
                    box-shadow: 0 18px 50px -25px rgba(0,0,0,.20),
                                0 0 0 1px var(--accent-glow); }
.card-accent { border-top: 3px solid var(--accent); }

/* Inputs */
.input, .textarea, .select {
  width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: .55rem;
  padding: .7rem .9rem; font-size: .95rem; color: var(--black);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--black);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: #b0b0b0; }

/* Champs heure / date : sur iOS Safari ces inputs ont une largeur intrinsèque
   qui ignore le conteneur (et une marge interne WebKit) → la valeur déborde du
   cadre. On normalise l'appearance, on autorise le rétrécissement et on
   neutralise la marge interne ; le sélecteur natif s'ouvre toujours au tap. */
.input[type="time"], .input[type="date"], .input[type="datetime-local"],
.input[type="month"], .input[type="week"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  min-width: 0; max-width: 100%;
}
.input[type="time"]::-webkit-date-and-time-value,
.input[type="date"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value {
  margin: 0; text-align: left;
}
/* Garder l'icône (horloge/calendrier) collée à droite sans pousser la valeur. */
.input::-webkit-calendar-picker-indicator { margin-left: auto; }

/* Stepper: single cohesive −/+ control. Native number arrows removed
   so there is exactly one way to change the value. */
.stepper {
  display: inline-flex; align-items: stretch; width: max-content;
  background: var(--white); border: 1px solid var(--line);
  border-radius: .55rem; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stepper:focus-within {
  border-color: var(--black); box-shadow: 0 0 0 4px var(--accent-soft);
}
.stepper-btn {
  width: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--black); border: 0;
  font-size: 1.15rem; line-height: 1; cursor: pointer; user-select: none;
  transition: background .15s ease, color .15s ease;
}
.stepper-btn:first-child { border-right: 1px solid var(--line); }
.stepper-btn:last-child  { border-left: 1px solid var(--line); }
.stepper-btn:hover { background: var(--black); color: var(--accent); }
.stepper-btn:active { background: #1a1a1a; }
.stepper .input {
  width: 3.5rem; text-align: center; border: 0; border-radius: 0;
  padding-left: .25rem; padding-right: .25rem;
  appearance: textfield; -moz-appearance: textfield;
  box-shadow: none !important;
}
.stepper .input:focus { outline: none; box-shadow: none !important; }
.stepper .input::-webkit-outer-spin-button,
.stepper .input::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}

/* Interrupteur (toggle) on/off — aligné sur la charte (noir + accent vert).
   Structure : <span class="switch"><input type="checkbox"><span class="switch-track">
   <span class="switch-knob"></span></span></span> #}. L'input réel est masqué. */
.switch { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch-track {
  width: 2.85rem; height: 1.6rem; border-radius: 9999px;
  background: #e2e2e2; border: 1px solid var(--line-strong);
  position: relative; display: inline-block;
  transition: background .2s ease, border-color .2s ease;
}
.switch-knob {
  position: absolute; top: 50%; left: .18rem; transform: translateY(-50%);
  width: 1.2rem; height: 1.2rem; border-radius: 9999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: left .2s cubic-bezier(.4,.1,.2,1.3);
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent-dark); }
.switch input:checked + .switch-track .switch-knob { left: 1.42rem; }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px var(--accent-soft); }
.switch input:disabled + .switch-track { opacity: .5; }

/* Pastille « quantité indicative » (poids / volume) affichée au client. */
.qty-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: 9999px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: .7rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; line-height: 1.4;
}

/* Custom select with green chevron — kills the native OS dropdown look. */
.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333EA40' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem; cursor: pointer;
}
.select::-ms-expand { display: none; }

/* Tous les <select> de l'app adoptent le même design maison (chevron vert,
   coins arrondis, focus accent) — cohérent partout, sans look natif de l'OS. */
select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2333EA40' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem;
  padding-right: 2.4rem; cursor: pointer;
}
select.input::-ms-expand { display: none; }
select.input option { color: var(--black); }

/* Segmented control (replacement for short selects) */
.seg-group {
  display: inline-flex; padding: .25rem; background: var(--bg-soft);
  border-radius: 9999px; border: 1px solid var(--line); gap: .25rem;
}
.seg-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg-group label {
  padding: .5rem .95rem; border-radius: 9999px;
  font-size: .85rem; font-weight: 500;
  color: var(--muted); cursor: pointer; user-select: none;
  transition: all .15s; line-height: 1;
}
.seg-group label:hover { color: var(--black); }
.seg-group input[type="radio"]:checked + label {
  background: var(--pill-active); color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 14px -6px rgba(0,0,0,0.4);
}

/* Segmented control pleine largeur (segments égaux) sur mobile.
   Reste un inline-flex compact à partir de sm. */
@media (max-width: 639px) {
  .seg-group-full { display: flex; width: 100%; }
  .seg-group-full > label {
    flex: 1 1 0; text-align: center;
    padding-left: .4rem; padding-right: .4rem;
    white-space: nowrap;
  }
}

/* Puce sélectionnable réutilisable — même langage que status-pills/seg-group :
   inactif gris/bordé, actif ardoise + liseré vert. Utilisée pour le filtre/choix
   de catégories (Plats) et les onglets Paramètres (desktop). Le variant :has gère
   le cas case à cocher (multi-sélection). */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: .375rem .85rem;
  border: 1px solid var(--line); background: var(--white);
  font-size: .85rem; font-weight: 500; line-height: 1;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.chip:hover { color: var(--black); border-color: var(--line-strong); }
.chip-active,
.chip:has(input:checked) {
  background: var(--pill-active); color: var(--white);
  border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent);
  font-weight: 700;
}

/* Regroupe des .chip-boutons dans un bloc commun gris en pilule (segmented
   control), même langage que .view-tabs/.seg-group. Pour les sélecteurs à
   options fixes basés sur des <button> (ex. onglets Paramètres desktop). */
.chip-bar {
  display: inline-flex; flex-wrap: wrap; gap: .25rem; max-width: 100%;
  padding: .25rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 1.4rem;
}
.chip-bar .chip { background: transparent; border-color: transparent; }
.chip-bar .chip:hover { background: transparent; border-color: transparent; color: var(--black); }
.chip-bar .chip-active { background: var(--pill-active); border-color: var(--accent); }

/* Filtre statut en bloc commun (segmented control) identique aux onglets
   Bons/Factures, sur mobile comme sur desktop : conteneur gris arrondi,
   non-sélectionnés en gris, actif ardoise + liseré vert. Sur mobile, le bloc
   défile horizontalement si les statuts ne tiennent pas en largeur. */
.status-pills {
  display: flex; gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;                       /* Firefox */
  -webkit-overflow-scrolling: touch;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9999px; padding: .25rem;
}
.status-pills::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.status-pills input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.status-pills label {
  flex: 0 0 auto;
  padding: .5rem 1rem; border-radius: 9999px;
  color: var(--muted); font-size: .85rem; font-weight: 500; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.status-pills label:hover { color: var(--black); }
.status-pills input[type="radio"]:checked + label {
  background: var(--pill-active); color: var(--white); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--accent);   /* liseré vert sans décaler la mise en page */
}
@media (min-width: 1024px) {
  .status-pills { overflow: visible; display: inline-flex; }
}
/* Mobile (form en colonne) : la recherche passe SOUS les pastilles de statut.
   Onglets (ordre 0) → statuts (1) → recherche (2). Desktop : ordre DOM naturel. */
@media (max-width: 1023.98px) {
  .status-pills  { order: 1; }
  .billing-search { order: 2; }
}

/* Onglets de vue (Bons / Factures) — bloc commun (segmented control) arrondi,
   assorti aux pastilles de statut : conteneur gris, onglet actif ardoise + liseré vert.
   Deux segments égaux sur mobile, largeur contenu sur desktop. */
.view-tabs {
  display: flex; gap: .25rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9999px; padding: .25rem;
}
.view-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.view-tabs label {
  flex: 1 1 0; text-align: center;
  padding: .5rem 1rem; border-radius: 9999px;
  color: var(--muted); font-size: .9rem; font-weight: 500; line-height: 1;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.view-tabs label:hover { color: var(--black); }
.view-tabs input[type="radio"]:checked + label {
  background: var(--pill-active); color: var(--white); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--accent);   /* liseré vert sans décaler la mise en page */
}

/* Popover « Télécharger le PDF » (page Menu) : largeur fixe sur desktop, mais
   bornée à la largeur d'écran sur mobile pour ne jamais déborder. Sur mobile le
   bouton PDF est collé au bord gauche → on ancre à gauche (panneau vers la
   droite) ; sur desktop il est à droite → on ancre à droite. */
.menu-pdf-pop {
  position: absolute; top: 100%; margin-top: .5rem; z-index: 20;
  left: 0; right: auto;
  width: 18rem; max-width: calc(100vw - 2rem);
}
@media (min-width: 640px) {
  .menu-pdf-pop { left: auto; right: 0; }
}
@media (min-width: 1024px) {
  .view-tabs { display: inline-flex; }
  .view-tabs label { flex: 0 0 auto; }
}

/* Boutons d'action des bons (Générer / Voir la facture) :
   à gauche sur mobile, à droite sur desktop (≥ sm). */
.bons-action { justify-content: flex-start; }
@media (min-width: 640px) {
  .bons-action { justify-content: flex-end; }
}

/* Combobox / custom dropdown trigger */
.combobox-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--white); border: 1px solid var(--line); border-radius: .55rem;
  padding: .7rem .9rem; font-size: .95rem; color: var(--black);
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.combobox-trigger:hover { border-color: var(--black); }
.combobox-trigger:focus, .combobox-trigger.is-open {
  outline: none; border-color: var(--black);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.combobox-trigger .placeholder { color: #b0b0b0; }
.combobox-trigger .chevron {
  width: 1.1rem; height: 1.1rem; color: var(--accent);
  transition: transform .18s ease;
}
.combobox-trigger.is-open .chevron { transform: rotate(180deg); }

.combobox-panel {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 50;
  background: var(--white); border: 1px solid var(--black); border-radius: .65rem;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.25);
  max-height: 18rem; overflow: hidden; display: flex; flex-direction: column;
}
.combobox-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: .8rem 1rem; font-size: .9rem; outline: none; background: var(--white);
}
.combobox-search:focus { background: var(--accent-soft); }
.combobox-list { overflow-y: auto; flex: 1; }
.combobox-option {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1rem; cursor: pointer; transition: all .12s;
  border-left: 3px solid transparent;
}
.combobox-option:hover { background: var(--bg-soft); border-left-color: var(--accent); }
.combobox-option.is-active { background: var(--accent-soft); border-left-color: var(--accent); }
.combobox-option .meta { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
                         font-size: .75rem; color: var(--muted); }
.combobox-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: .85rem; }

.label { display: block; font-size: .7rem; font-weight: 700; color: var(--black);
         margin-bottom: .4rem; letter-spacing: .1em; text-transform: uppercase;
         font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* Libellé secondaire : variante plus douce que .label (titres de sous-groupe). */
.label-soft { display: block; font-size: .82rem; font-weight: 600; color: var(--black);
              margin-bottom: .4rem; }

/* Espacement vertical : utilitaires Tailwind `space-y-*` omis par la purge du
   build. Réimplémentés ici car utilisés par TOUS les formulaires de l'app —
   sans eux, libellés et champs se touchent (aucun espacement). */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }

/* Utilitaires Tailwind également omis par la purge, utilisés par les onglets
   et libellés des Réglages (border-b-2 = soulignement de l'onglet actif). */
.font-normal { font-weight: 400; }
.border-b-2 { border-bottom-width: 2px; }
.rounded-t-lg { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
@media (min-width: 768px) { .md\:text-base { font-size: 1rem; line-height: 1.5rem; } }

/* ===== Réglages — anatomie de bloc lisible =====
   En-tête (icône + titre + sous-titre) nettement séparé des champs par un
   filet, champs avec libellé/aide cohérents, et zone d'action en pied. */
.set-head {
  display: flex; align-items: flex-start; gap: .9rem;
  padding-bottom: 1.05rem; margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.set-ic {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: .7rem;
  background: var(--black); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.set-ic svg { width: 1.25rem; height: 1.25rem; }
.set-htext { min-width: 0; }
.set-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600;
  font-size: 1.18rem; line-height: 1.2; color: var(--black);
}
.set-sub { font-size: .85rem; color: var(--muted); margin-top: .25rem; line-height: 1.5; }

/* Texte d'aide sous un champ */
.field-hint { font-size: .75rem; color: var(--muted-2); margin-top: .45rem; line-height: 1.45; }

/* Sous-groupe encadré (ex. adresse de départ / retour) */
.set-group { border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem; background: var(--bg-soft); }
.set-group-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; color: var(--black);
  margin-bottom: .95rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.set-group-title .opt { color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Pied de bloc : zone d'action séparée par un filet */
.set-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.set-foot-spread { justify-content: space-between; }

/* Affiché uniquement à partir du breakpoint md (768px) — équivalent fiable de
   `hidden md:block` sans dépendre d'une classe Tailwind purgée. */
.desktop-only { display: none; }
@media (min-width: 768px) { .desktop-only { display: block; } }

/* Pastille de comptage sur un bouton rond (ex. nb de filtres actifs). */
.filter-badge {
  position: absolute; top: -.25rem; right: -.25rem;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  border-radius: 9999px; background: var(--accent); color: #000;
  font-size: .62rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Barre de navigation mobile : pleine largeur en haut de page, puis se contracte
   en bouton hamburger (haut droite) dès qu'on défile. La transition de largeur
   donne l'effet « le bandeau se replie vers le hamburger ». */
/* NE PAS mettre de transform/filter/will-change ici : .mnav-wrap contient le menu
   modal `fixed`, et un transform sur un ancêtre repositionne les enfants fixed
   par rapport à lui (la barre) au lieu de l'écran. Le « fantôme » gris du backdrop
   des popups se règle côté markup : backdrop dans un élément séparé (cf. popups). */
/* `display` UNIQUEMENT sous le breakpoint md (<768px) : sinon ce `display:flex`
   (app.css chargé après tailwind.css, même spécificité) écraserait le `md:hidden`
   posé sur l'élément et la barre s'afficherait aussi sur desktop. cf. .btn/hidden. */
@media (max-width: 767.98px) {
  .mnav-wrap { display: flex; justify-content: flex-end; }
}
.mnav-bar {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; height: 3.5rem; padding: 0 1rem;
  justify-content: space-between; overflow: hidden;
  border-radius: 1rem;
  transition: width .34s cubic-bezier(.4, 0, .2, 1),
              padding .34s cubic-bezier(.4, 0, .2, 1),
              background-color .15s ease, transform .1s ease;
}
.mnav-bar.is-scrolled {
  width: 3.5rem; padding: 0;
  justify-content: center;
}
.mnav-brand {
  display: flex; align-items: center; gap: .75rem; min-width: 0;
  opacity: 1; max-width: 100%;
  transition: opacity .22s ease,
              max-width .34s cubic-bezier(.4, 0, .2, 1),
              margin-left .34s cubic-bezier(.4, 0, .2, 1);
}
.mnav-bar.is-scrolled .mnav-brand {
  opacity: 0; max-width: 0; margin-left: -.75rem; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mnav-bar, .mnav-brand { transition: none; }
}

/* Indicateur d'enregistrement automatique (remplace le bouton « Enregistrer »
   dans les onglets Paramètres en auto-save). Discret par défaut, vert quand
   c'est sauvegardé, rouge en cas d'échec. */
.autosave-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--muted); min-height: 1.25em;
  transition: color .15s ease;
}
.autosave-status.is-saving { color: var(--muted); }
.autosave-status.is-saved  { color: var(--accent-dark); font-weight: 600; }
.autosave-status.is-error  { color: #C0392B; font-weight: 600; }

/* Navigation des sections (mobile) : pastilles défilantes, active en vert.
   Même langage visuel que les filtres de statut. Déborde aux bords de l'écran
   (la zone de contenu admin a px-5 = 1.25rem) pour un effet pleine largeur. */
.set-pills {
  display: flex; gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;                          /* Firefox */
  -webkit-overflow-scrolling: touch;
  margin: 0 -1.25rem 1.5rem;
  padding: .2rem 1.25rem;
  scroll-padding: 1.25rem;
}
.set-pills::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
/* Masqué dès sm : app.css se charge après tailwind.css, donc le `.set-pills`
   display:flex l'emporterait sur l'utilitaire `sm:hidden`. On masque ici pour
   éviter le doublon avec la barre d'onglets desktop. */
@media (min-width: 640px) { .set-pills { display: none; } }
.set-pill {
  flex-shrink: 0;
  padding: .6rem 1.1rem; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: .9rem; font-weight: 600; line-height: 1;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.set-pill:hover { color: var(--black); border-color: var(--black); }
.set-pill.is-active {
  background: var(--pill-active); color: var(--white); border-color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700;
}

/* Logo : vignette + nom de fichier, actions via boutons standards ----------- */
.logo-row { display: flex; align-items: center; gap: .75rem; }
.logo-thumb { width: 3rem; height: 3rem; flex: none; border-radius: .6rem;
  background: var(--black); display: flex; align-items: center; justify-content: center;
  overflow: hidden; }
.logo-thumb > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.logo-thumb img { width: 100%; height: 100%; object-fit: contain; }
.logo-initial { color: var(--accent); font-weight: 700; font-size: 1.25rem; }

.logo-row-text { flex: 1 1 auto; min-width: 0; }
.logo-drop-title { display: block; font-weight: 700; color: var(--black);
  font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-drop-sub { display: block; font-size: .8rem; color: var(--muted); }

.logo-error { font-size: .8rem; font-weight: 600; color: #ff5d5d; margin-top: .6rem; }

/* Actions du logo : empilées pleine largeur sur mobile (lisibles, pas de texte
   qui passe à la ligne), alignées en ligne à droite dès sm. */
.logo-actions {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.logo-actions > .btn { width: 100%; }
@media (min-width: 640px) {
  .logo-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .logo-actions > .btn { width: auto; }
}

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem;
         border-radius: 9999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.badge-ok      { background: var(--accent); color: var(--black); }
.badge-warn    { background: var(--white); color: var(--black); border: 1px solid var(--black); }
.badge-bad     { background: var(--black); color: var(--white); }
.badge-neutral { background: var(--bg-soft); color: var(--black); border: 1px solid var(--line); }

/* Statuts de facturation — accordés aux pastilles de filtre : corps ardoise +
   texte blanc, la couleur sémantique du statut ne vit plus que sur le bord et
   le petit point (--st). Chaque statut reste reconnaissable d'un coup d'œil. */
.badge-st { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem;
            border-radius: 9999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
            background: var(--pill-active); color: var(--white);
            border: 1px solid var(--st, var(--accent)); white-space: nowrap; }
.badge-st::before { content: ""; width: .42rem; height: .42rem; border-radius: 9999px;
                    background: var(--st, var(--accent)); flex: none;
                    box-shadow: 0 0 0 2px color-mix(in srgb, var(--st, var(--accent)) 25%, transparent); }
.st-unpaid    { --st: #F5B544; }   /* ambre — non payé */
.st-paid      { --st: var(--accent); }   /* vert — encaissé */
.st-invoiced  { --st: #5B9BFF; }   /* bleu — facturé */
.st-sent      { --st: #2DD4BF; }   /* turquoise — envoyée */
.st-cancelled { --st: #FB7185; }   /* rose/rouge — annulé */
/* Statuts des demandes (bugs & améliorations) — même gabarit que la facturation */
.st-requested { --st: #F5B544; }   /* ambre — demandé */
.st-building  { --st: #5B9BFF; }   /* bleu — en construction */
.st-done      { --st: var(--accent); }   /* vert — terminé */
/* Type de demande (amélioration / bug) — corps ardoise comme les statuts,
   mais contour et point noirs pour les distinguer des statuts colorés. */
.badge-kind   { --st: var(--black); border-color: var(--black); }

.divide-warm > * + * { border-top: 1px solid var(--line); }

.shadow-warm { box-shadow: 0 24px 60px -28px rgba(0,0,0,0.18); }

/* Glow utility */
.glow-green { box-shadow: 0 0 0 3px rgba(51,234,64,0.35), 0 0 30px rgba(51,234,64,0.4); }
.text-glow  { text-shadow: 0 0 18px rgba(51,234,64,0.65); }

/* Fancy underline on links */
.link-accent {
  position: relative; font-weight: 600;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 92%; background-repeat: no-repeat;
  background-size: 100% 30%;
  padding: 0 .15rem;
  transition: background-size .15s ease;
}
.link-accent:hover { background-size: 100% 100%; }

/* Mesh gradient block (for hero areas) */
.mesh {
  background:
    radial-gradient(60% 60% at 0% 0%, var(--accent-glow) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(51,234,64,0.18) 0%, transparent 60%),
    #050505;
}

/* Thin green underline accent on section headers */
.section-rule {
  display: inline-block; padding-bottom: .45rem;
  border-bottom: 3px solid var(--accent);
}

/* Puce d'icône des tuiles du tableau de bord (carré noir, icône accent) */
.dash-ic {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: .6rem;
  background: var(--black); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-ic svg { width: 1.1rem; height: 1.1rem; }

/* Stat numbers — taille bornée pour éviter l'effet « zoom » sur grand écran
   (l'ancien 5vw / max 2.6rem grossissait trop les chiffres en desktop). */
.stat-num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}

/* Sidebar active item */
.nav-active {
  background: var(--black); color: var(--white) !important;
  position: relative;
}
.nav-active::before {
  content: ""; position: absolute; left: -5px; top: 20%; bottom: 20%;
  width: 3px; background: var(--accent); border-radius: 2px;
}

/* Flash / toast */
.flash {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 80; max-width: 26rem;
  display: flex; align-items: center; gap: .75rem;
  background: var(--black); color: var(--white);
  border-left: 4px solid var(--accent);
  padding: .95rem 1rem .95rem 1.1rem; border-radius: .7rem;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.5);
  animation: flashIn .25s cubic-bezier(.2,.8,.2,1);
}
.flash.ok  { border-color: var(--accent); }
.flash.warn{ border-color: #f6c343; }
.flash.err { border-color: #ff5d5d; }
.flash-icon {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: var(--black);
  background: var(--accent);
}
.flash.warn .flash-icon { background: #f6c343; }
.flash.err  .flash-icon { background: #ff5d5d; color: #fff; }
.flash-msg { flex: 1; font-size: .92rem; line-height: 1.35; }
.flash-x {
  flex-shrink: 0; background: transparent; border: 0; color: rgba(255,255,255,.55);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .15rem .25rem;
  transition: color .15s ease;
}
.flash-x:hover { color: #fff; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  /* On phones, span the width within small margins instead of overflowing. */
  .flash { left: 1rem; right: 1rem; top: 1rem; max-width: none; }
}

/* ── Mobile / tablet optimisations ─────────────────────────────── */

@media (max-width: 640px) {
  /* iOS Safari zooms the whole page when a focused field is < 16px.
     Force 16px on phones so forms never trigger that zoom. */
  .input, .textarea, .select,
  .combobox-trigger, .combobox-search { font-size: 16px !important; }

  /* Comfortable touch targets + allow long FR labels to wrap
     instead of overflowing the viewport. */
  .btn {
    min-height: 44px;
    white-space: normal;
    line-height: 1.2;
    padding-top: .6rem; padding-bottom: .6rem;
  }

  /* Toast already spans the screen on phones (see @max-width:480px);
     keep card paddings a touch tighter to reclaim width. */
  .card { border-radius: .85rem; }

  /* ── Réglages : aération et hiérarchie sur petit écran ──────────────
     Moins d'imbrication de padding (carte + sous-groupe), en-tête compact,
     et boutons d'enregistrement pleine largeur, faciles à atteindre au pouce.
     Scopé à .settings-page pour ne rien changer ailleurs. */
  .settings-page .card { padding: 1.15rem; }
  .settings-page .set-group { padding: .9rem; }
  .settings-page .set-group-title { margin-bottom: .75rem; }
  .settings-page .set-head {
    gap: .7rem; padding-bottom: .9rem; margin-bottom: 1.05rem;
  }
  .settings-page .set-ic { width: 2.25rem; height: 2.25rem; border-radius: .6rem; }
  .settings-page .set-ic svg { width: 1.1rem; height: 1.1rem; }
  .settings-page .set-title { font-size: 1.05rem; }
  .settings-page .set-sub { font-size: .82rem; }

  /* Pied d'action : bouton plein, pas collé en bas à droite. */
  .settings-page .set-foot { flex-direction: column; align-items: stretch; gap: .5rem; }
  .settings-page .set-foot > .btn { width: 100%; }
}

/* Subtle scrollbar */
* { scrollbar-color: #cccccc transparent; }

/* Legacy — kept as no-ops to not break stragglers */
.gradient-warm { background: var(--white); }
.gradient-sage { background: var(--accent-soft); }
.gradient-card { background: var(--white); }
.gradient-cta  { background: var(--black); color: var(--white); }

/* ======================================================================
   BOUTON BASCULE DE THÈME (cercle + icône)
   Rond, neutre en mode clair (lune → passer en sombre), accent vert en
   mode sombre (soleil → revenir en clair). Couleurs alignées sur la
   charte traiteur (noir / blanc / vert #33EA40).
   ====================================================================== */
.theme-toggle {
  flex: none;
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  background: var(--white); color: var(--black);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-1px) rotate(-12deg);
  box-shadow: 0 10px 20px -10px var(--accent-glow);
}
.theme-toggle:active { transform: translateY(0) rotate(0); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .ico-sun { display: none; }
html.dark .theme-toggle { color: var(--accent); }
html.dark .theme-toggle .ico-moon { display: none; }
html.dark .theme-toggle .ico-sun  { display: inline-block; }

/* ======================================================================
   MODE SOMBRE
   Les variables sémantiques sont redéfinies : --black devient l'encre
   CLAIRE (texte / élément fort) et --white la SURFACE foncée. La grande
   majorité des composants (.btn / .card / .input / .badge / .nav-active…)
   reposant sur ces variables basculent automatiquement. Suivent les
   exceptions : utilitaires Tailwind « en dur », fonds verts (texte sombre
   conservé) et panneaux volontairement foncés (.hero-dark).
   Le thème est activé en posant la classe `.dark` sur <html> (cf. script
   inline + bouton .theme-toggle dans base_admin.html).
   ====================================================================== */
html.dark {
  --black: #e9e9ee;          /* encre claire */
  --white: #1b1e24;          /* surface (cartes, champs, sidebar) */
  --line: #2c3039;
  --line-strong: #3a3f4a;
  --bg: #0f1115;             /* fond de page */
  --bg-soft: #262a32;        /* survols / panneaux doux */
  --muted: #a7abb4;
  --muted-2: #9398a2;
  --pill-active: #313a4b;    /* ardoise — lisible sur fond sombre, texte forcé clair plus bas */
  --accent-soft: rgba(51, 234, 64, 0.14);
}

/* Utilitaires Tailwind aux couleurs codées en dur → remappés sémantiquement */
html.dark .bg-white { background-color: var(--white); }
html.dark .bg-\[\#fafafa\] { background-color: var(--bg); }
html.dark .bg-\[\#f5f5f5\],
html.dark .hover\:bg-\[\#f5f5f5\]:hover { background-color: var(--bg-soft); }
html.dark .text-black { color: var(--black); }
html.dark .hover\:text-black:hover { color: var(--black); }
html.dark .border-\[\#ececec\] { border-color: var(--line); }
html.dark .text-\[\#888888\] { color: var(--muted-2); }
html.dark .text-\[\#6b6b6b\] { color: var(--muted); }

/* Fonds verts (accent) : le texte doit rester SOMBRE pour le contraste */
html.dark .btn-accent,
html.dark .tag-accent,
html.dark .badge-ok,
html.dark .btn-outline-accent:hover { color: #06270b; }
html.dark ::selection { background: var(--accent); color: #06270b; }

/* Boutons d'action : passent en vert (évite le survol noir illisible) */
html.dark .btn-primary { background: var(--accent); color: #06270b; }
html.dark .btn-primary:hover { background: var(--accent-dark); }
html.dark .btn-danger { background: #dc2626; color: #fff; }
html.dark .btn-danger:hover { background: #b91c1c; }

/* Panneau hero volontairement foncé : conserver le texte clair */
html.dark .hero-dark { color: #f3f3f5; }

/* ----------------------------------------------------------------------
   Correctifs « blocs blancs » : tout élément REMPLI en var(--black)
   (devenu clair par l'inversion) doit rester FONCÉ en mode sombre, sinon
   il apparaît comme un rectangle blanc (souvent avec un contenu illisible).
   ---------------------------------------------------------------------- */

/* Tuiles/puces décoratives : fond noir, contenu (icône/texte accent) déjà clair */
html.dark .tag:not(.tag-accent):not(.tag-light),
html.dark .dash-ic,
html.dark .set-ic,
html.dark .logo-thumb {
  background: #000; border-color: #000;
}

/* Éléments fond noir + texte : forcer le texte clair */
html.dark .nav-active { background: #000; color: #fff !important; }
html.dark .flash,
html.dark .badge-bad,
html.dark .gradient-cta { background: #000; color: #fff; }

/* Survols qui repassaient en clair */
html.dark .stepper-btn:hover { background: #000; }
html.dark .btn-icon-danger:hover { background: #000; border-color: #000; }

/* Pastilles / segments actifs : ardoise foncée + texte clair (design d'origine,
   plus de bloc blanc). Le fond vient de --pill-active ; on force juste le texte. */
html.dark .btn-ghost.is-active,
html.dark .seg-group input[type="radio"]:checked + label,
html.dark .chip-active,
html.dark .chip:has(input:checked),
html.dark .status-pills input[type="radio"]:checked + label,
html.dark .view-tabs input[type="radio"]:checked + label,
html.dark .set-pill.is-active,
html.dark .badge-st { color: #fff; }

/* Fonds & détails fins */
html.dark body::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}
html.dark * { scrollbar-color: #4a4f59 transparent; }
html.dark .input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }

/* ======================================================================
   GLISSER-DÉPOSER des fiches Plats/Boissons (SortableJS)
   ====================================================================== */
[data-reorder-grid] > [data-dish-id] { cursor: grab; }
[data-reorder-grid] > [data-dish-id]:active { cursor: grabbing; }
/* Emplacement fantôme pendant le glissement. */
.dish-drag-ghost { opacity: .35; }
/* Carte saisie : légèrement soulevée. */
.dish-drag-chosen { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35); }