/* ==========================================================
   THÈME FINAL — GSM × Zoho Inventory × Stock It Easy
   Chargée en DERNIER : cette feuille est la direction visuelle
   officielle et a le dernier mot sur app.css et ui-revolution.
   Sidebar noire à accent vif, contenu blanc à cartes bordées,
   KPI géants colorés, tuiles à grandes icônes, calendrier
   toujours visible.
   ========================================================== */

:root {
  /* Identité Carillon (voir static/brand/) : navy #1e2a3f, ambre #d97706 */

  --sidebar: #fdfcfa;
  --trade-accent: #d97706;
  --carillon-amber: #d97706;
  --carillon-amber-deep: #92400e;
  --carillon-amber-soft: #fbf0de;
  --carillon-navy: #1e2a3f;
}

/* Contraste AA : ui-revolution pose --amber #b9750b (3.7:1) sur body.ui-revolution,
   on le surcharge au même niveau (theme-final chargé en dernier). */
body.ui-revolution {
  --amber: #92400e;
}

/* Palette métier officielle — gagne sur toutes les feuilles précédentes */
body.ui-revolution.sector-bakery, body.sector-bakery {
  --primary: #d97706; --primary-dark: #b45309; --rail: #f59e0b; --sector-soft: #fff5e6;
}

body.ui-revolution.sector-bar, body.sector-bar {
  --primary: #0891b2; --primary-dark: #0e7490; --rail: #22d3ee; --sector-soft: #ecfeff;
}

body.ui-revolution.sector-salon, body.sector-salon {
  --primary: #c026d3; --primary-dark: #a21caf; --rail: #e879f9; --sector-soft: #fdf0ff;
}

body.ui-revolution.sector-artisan, body.sector-artisan {
  --primary: #ea580c; --primary-dark: #c2410c; --rail: #fb923c; --sector-soft: #fff3ea;
}

body.ui-revolution.sector-tpe, body.sector-tpe {
  --primary: #d97706; --primary-dark: #92400e; --rail: #f5a623; --sector-soft: #fbf0de;
}

/* --- Sidebar claire Carillon : crème, encre navy, actif = pilule métier --- */
body.ui-revolution .sidebar,
body .sidebar {
  background: var(--sidebar);
  color: #221c14;
  border-right: 1px solid #e8e2d8;
}

body.ui-revolution .sidebar .field,
body .sidebar .field,
body .installer-details summary,
body .brand span,
body .sidebar-card span,
body .sidebar-card p {
  color: #6b6152;
}

body .brand strong,
body .sidebar-card strong {
  color: #1e2a3f;
}

body.ui-revolution .sidebar input,
body.ui-revolution .sidebar select,
body .sidebar input,
body .sidebar select {
  background: #ffffff;
  border-color: #e2ddd2;
  color: #221c14;
}

body .installer-details {
  background: #f7f3ec;
  border-color: #e8e2d8;
}

body.ui-revolution .installer-details .nav-btn,
body .installer-nav,
body .onboarding-open-btn,
body .logout-btn {
  background: #ffffff;
  border-color: #e2ddd2;
  color: #4b4335;
}

body .sidebar-card {
  background: #f7f3ec;
  border-color: #e8e2d8;
}

body.ui-revolution .nav-btn,
body .nav-btn {
  color: #4b4335;
  font-weight: 700;
  border-radius: 9px;
  background: transparent;
  border-color: transparent;
}

body.ui-revolution .nav-btn:hover,
body .nav-btn:hover {
  background: #f3ede1;
  color: #221c14;
}

body.ui-revolution .nav-btn.active,
body .nav-btn.active {
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.22);
}

/* Couleur d'actif par métier, en dur : déterministe quelles que soient les variables */
body.sector-bakery .nav-btn.active { background: #b45309 !important; border-color: #b45309 !important; }
body.sector-bar .nav-btn.active { background: #0e7490 !important; border-color: #0e7490 !important; }
body.sector-salon .nav-btn.active { background: #a21caf !important; border-color: #a21caf !important; }
body.sector-artisan .nav-btn.active { background: #c2410c !important; border-color: #c2410c !important; }
body.sector-tpe .nav-btn.active, body .nav-btn.active { background: #b45309; border-color: #b45309; }
body.sector-bakery .nav-btn.active, body.sector-bar .nav-btn.active, body.sector-salon .nav-btn.active, body.sector-artisan .nav-btn.active, body.sector-tpe .nav-btn.active { color: #ffffff !important; }

body .nav-btn.active .nav-icon {
  stroke: #ffffff;
}

body .nav-group-label:nth-of-type(1) { color: #2563eb; }
body .nav-group-label:nth-of-type(2) { color: var(--primary-dark); }
body .nav-group-label:nth-of-type(3) { color: #15803d; }
body .nav-group-label:nth-of-type(4) { color: #7c3aed; }

/* --- Cartes à la Zoho : bordure nette, ombre minimale, chiffres géants colorés --- */
body.ui-revolution .panel,
body.ui-revolution .pilotage-tile,
body.ui-revolution .home-command,
body .panel,
body .item-card,
body .billing-card,
body .kanban-card,
body .pilotage-tile,
body .planning-stat,
body .home-command,
body .production-product-card,
body .admin-kpi-grid article,
body .billing-kpis article,
body .production-tracking-kpis article,
body .bakery-menu-tile {
  border: 1px solid #e2e7ee;
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.05);
}

body.ui-revolution .admin-kpi-grid article strong,
body.ui-revolution .pilotage-tile strong,
body.ui-revolution .planning-stat strong,
body .admin-kpi-grid article strong,
body .billing-kpis article strong,
body .production-tracking-kpis article strong,
body .planning-stat strong,
body .pilotage-tile strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
}

body .pilotage-tile.warn strong,
body .planning-stat.warn strong { color: #cf7a00; }
body .pilotage-tile.danger strong { color: #b91c1c; }
body .planning-stat.ok strong { color: #0e8a5f; }

body .admin-kpi-grid article span,
body .billing-kpis article span,
body .production-tracking-kpis article span {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- Tuiles à la Stock It Easy : grandes icônes lignes, cadre doux, libellé centré --- */
body.ui-revolution .today-command-shell,
body .today-command-shell {
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

body .today-command-head {
  border: 0;
  padding: 0 0 10px;
  background: transparent;
}

body .today-command-head h2 {
  justify-content: center;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.ui-revolution .home-command,
body .home-command {
  border: 1.5px solid #d7e3f2;
  background: #ffffff;
}

body .home-command:hover {
  border-color: var(--primary);
}

body.ui-revolution .home-command svg,
body .home-command svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 12px;
  background: #f2f7fd;
  stroke: #3379d8;
}

body.ui-revolution .home-command.primary svg,
body .home-command.primary svg {
  background: var(--sector-soft, #fdeeed);
  stroke: var(--primary);
}

/* --- Boutons massifs à la GSM : Entrée verte, Sortie orange --- */
body .btn {
  font-weight: 800;
}

body.ui-revolution .btn.primary,
body .btn.primary {
  background: var(--primary);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 30%, transparent);
}

body .btn.primary:hover {
  background: var(--primary-dark);
}

body .bakery-menu-tile.stock-in svg { stroke: #1e9e5a; background: #e9f8f0; }
body .bakery-menu-tile.stock-out svg { stroke: #ef7d1a; background: #fdf1e4; }

/* --- CALENDRIER TOUJOURS VISIBLE, à toutes les largeurs --- */
body.ui-revolution .tab-panel[data-panel="planning"] .bakery-desktop,
body .tab-panel[data-panel="planning"] .bakery-desktop {
  display: none !important;
}

body.ui-revolution .planning-manual-panel,
body .planning-manual-panel {
  display: none !important;
}

body .planning-layout {
  display: block;
}

body .planning-calendar-panel {
  width: 100%;
}

@media (max-width: 999px) {
  body .planning-board {
    max-height: 62vh;
    overflow-y: auto;
  }
}

/* --- Login assorti --- */
body .login-screen {
  background: linear-gradient(150deg, #16202f 0%, #1e2a3f 60%, #27354d 100%);
}

/* ==========================================================
   MOBILE PARFAIT (2026-07-11)
   Barre basse sombre 4 onglets + panneau « Plus » (tous les
   onglets), cibles tactiles 44px, anti-zoom iOS, safe-areas,
   correctifs de débordement Planning / Fournisseurs.
   ========================================================== */

/* Le bouton « Plus » et le panneau n'existent qu'en mobile */
body .nav .mobile-more-btn { display: none; }
.mobile-more-sheet { display: none; }

@media (max-width: 800px) {
  /* --- Barre basse CLAIRE Carillon (2026-07-12) : crème #fdfcfa,
         bordure #e8e2d8, libellés #4b4335, actif = pilule pleine
         à la couleur FONCÉE du métier (contraste AA) --- */
  body.ui-revolution .nav,
  body .nav {
    background: #fdfcfa;
    border-top: 1px solid #e8e2d8;
    box-shadow: 0 -8px 22px rgba(34, 28, 20, 0.1);
    height: 70px;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  body.ui-revolution .nav-btn,
  body .nav-btn {
    color: #4b4335;
    min-height: 56px;
    border-radius: 12px;
    font-size: 0.62rem;
    font-weight: 700;
    /* les transitions couleur se re-déclenchent en boucle avec les
       styles inline !important du JS (retargeting Chrome) */
    transition: none;
  }

  body.ui-revolution .nav-btn .nav-icon { width: 22px; height: 22px; }

  body.ui-revolution .nav-btn.active,
  body .nav-btn.active {
    color: #ffffff !important;
    box-shadow: none;
  }

  /* Réglages passe dans « Plus » ; le bouton Plus prend le 5e emplacement */
  body.ui-revolution .nav-btn[data-tab="settings"] { display: none; }
  body.ui-revolution .nav .mobile-more-btn { display: grid; }

  /* Pilule active du bouton Plus : mêmes couleurs FONCÉES du métier
     que les .nav-btn.active globaux (les hex vifs #d97706… étaient < 4.5:1) */
  body.sector-bakery .mobile-more-btn.active { background: #b45309 !important; }
  body.sector-bar .mobile-more-btn.active { background: #0e7490 !important; }
  body.sector-salon .mobile-more-btn.active { background: #a21caf !important; }
  body.sector-artisan .mobile-more-btn.active { background: #c2410c !important; }
  body.sector-tpe .mobile-more-btn.active { background: #92400e !important; }

  /* --- En-tête mobile (la sidebar devient bandeau haut) : identité
         Carillon claire, wordmark visible sans texte coupé --- */
  body.ui-revolution .sidebar,
  body .sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 45%);
    background: #fdfcfa;
    border-bottom: 1px solid #e8e2d8;
    border-right: 0;
  }

  /* ui-revolution masque le bloc wordmark en mobile : on le remontre */
  body.ui-revolution .brand > div:last-child,
  body .brand > div:last-child {
    display: block;
    min-width: 0;
  }

  body.ui-revolution .brand,
  body .brand { gap: 9px; }

  body.ui-revolution .brand strong.brand-wordmark,
  body .brand strong.brand-wordmark {
    font-size: 1.12rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  body.ui-revolution .brand-metier-line,
  body .brand-metier-line { gap: 5px; }

  body.ui-revolution .metier-badge,
  body .metier-badge { width: 16px; height: 16px; border-radius: 5px; }

  body.ui-revolution .brand-metier-line #brandTagline,
  body .brand-metier-line #brandTagline {
    font-size: 0.68rem;
    line-height: 1.2;
  }

  /* sidebar-collapsed (mémorisé depuis le desktop) ne doit pas
     supprimer le bandeau haut mobile */
  body.ui-revolution.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar { display: grid; }

  /* Topbar harmonisée au fond crème */
  body.ui-revolution .topbar,
  body .topbar { background: rgba(253, 252, 250, 0.97); }

  /* --- Panneau « Plus » : feuille basse avec tous les onglets --- */
  .mobile-more-sheet:not(.hidden) { display: block; position: fixed; inset: 0; z-index: 120; }

  .mobile-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 42, 63, 0.5);
    backdrop-filter: blur(2px);
  }

  .mobile-more-card {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 72vh;
    overflow-y: auto;
    background: #fdfcfa;
    border-top: 1px solid #e8e2d8;
    border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    animation: mobile-sheet-up 0.2s ease-out;
    box-shadow: 0 -18px 50px rgba(30, 42, 63, 0.28);
  }

  .mobile-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
  }

  .mobile-more-head strong { font-size: 1rem; color: #221c14; }
  .mobile-more-head .icon-btn { width: 44px; height: 44px; font-size: 1.3rem; }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-more-tile {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 7px;
    min-height: 84px;
    padding: 10px 6px;
    background: #ffffff;
    border: 1.5px solid #e8e2d8;
    border-radius: 14px;
    color: #221c14;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
  }

  .mobile-more-tile .nav-icon,
  .mobile-more-tile svg {
    width: 26px;
    height: 26px;
    stroke: var(--primary);
    fill: none;
    stroke-width: 2;
  }

  .mobile-more-tile.active {
    border-color: var(--primary-dark);
    background: var(--sector-soft, #fdeeed);
    color: var(--primary-dark);
  }
  .mobile-more-tile.active .nav-icon,
  .mobile-more-tile.active svg { stroke: var(--primary-dark); }

  /* --- Cibles tactiles ≥ 44px + anti-zoom iOS --- */
  body.ui-revolution .btn,
  body .btn { min-height: 44px; }
  body.ui-revolution .icon-btn,
  body .icon-btn { width: 44px; height: 44px; }
  body.ui-revolution .topbar .btn { width: 44px; min-height: 44px; }
  body.ui-revolution .automation-ribbon .btn { width: 44px; }

  body input,
  body select,
  body textarea,
  body.ui-revolution input,
  body.ui-revolution select,
  body.ui-revolution textarea {
    min-height: 44px;
    font-size: 16px; /* < 16px : Safari iOS zoome au focus */
  }

  body.ui-revolution .sidebar select,
  body .sidebar select { min-height: 44px; font-size: 16px; }

  /* Le contenu ne passe plus sous la barre basse */
  body.ui-revolution main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* --- Correctifs de débordement --- */
  body .supplier-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Les colonnes 1fr ne rétrécissent pas sous leur contenu (min-width:auto) :
     on force les enfants des splits à accepter la largeur de l'écran */
  body .split,
  body .billing-split,
  body .admin-layout { grid-template-columns: minmax(0, 1fr); }
  body .split > *,
  body .billing-split > *,
  body .admin-layout > * { min-width: 0; }

  body .supplier-card { grid-template-columns: minmax(0, 1fr) auto; }
  body .supplier-card strong,
  body .supplier-card span,
  body .supplier-card small {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* Aucun bloc ne peut élargir la page : les contenus larges
     (calendrier semaine, tableaux) défilent dans leur cadre */
  body .tab-panel.active > * {
    min-width: 0;
    max-width: 100%;
  }

  body .panel { min-width: 0; max-width: 100%; }

  body.ui-revolution .planning-board,
  body .planning-board {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
  }

  body .planning-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .planning-stat { min-width: 0; }
  body .planning-stat span,
  body .planning-stat small,
  body .planning-stat strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* --- Modales en vraie feuille basse --- */
  body.ui-revolution .modal-card {
    border-radius: 18px 18px 0 0;
    max-height: calc(100dvh - 24px);
  }

  body.ui-revolution .modal-card > .modal-actions {
    padding-bottom: calc(11px + env(safe-area-inset-bottom));
  }
}

@keyframes mobile-sheet-up {
  from { transform: translateY(24px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}


/* --- Tiroir "À placer" : discret, la grille d'abord --- */
body .planning-unscheduled {
  margin-bottom: 10px;
  border: 1px solid #eadfc0;
  border-radius: 10px;
  background: #fffaf0;
}

body .planning-unscheduled summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

body .planning-unscheduled summary::-webkit-details-marker { display: none; }

body .planning-unscheduled .unscheduled-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #cf7a00;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
}

body .planning-unscheduled .unscheduled-hint {
  color: #7a6a4f;
  font-size: 0.82rem;
  font-weight: 600;
}

body .planning-unscheduled .planning-unscheduled-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scrollbar-width: thin;
}

body .planning-unscheduled .planning-chip {
  flex: 0 0 230px;
}


/* --- Barre d'outils calendrier à la Google --- */
body .calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body .calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body .calendar-nav h2 {
  margin: 0 6px;
  font-size: 1.15rem;
  white-space: nowrap;
}

body .calendar-nav #planningDateInput {
  width: 150px;
  min-height: 38px;
}

body .planning-icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid #dbe1ea;
  color: #3a4657;
}

body .planning-icon-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

body .planning-icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #ffffff;
}

body .view-segment {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #dbe1ea;
  border-radius: 10px;
  background: #f1f4f9;
}

body .view-segment button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #46536a;
  font-weight: 700;
  cursor: pointer;
}

body .view-segment button.active {
  background: #ffffff;
  color: var(--primary-dark, #1d4ed8);
  box-shadow: 0 1px 4px rgba(20, 24, 33, 0.16);
}

body .view-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Ligne "maintenant" à la Google --- */
body .calendar-slot.now-row {
  position: relative;
  box-shadow: inset 0 2px 0 #ea4335;
}

body .calendar-slot.now-row::before {
  content: attr(data-now-label);
  position: absolute;
  top: -9px;
  left: 6px;
  z-index: 2;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ea4335;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
}

/* Jour courant mis en évidence (vue jour/semaine/mois) */
body .calendar-day-head.today,
body .calendar-cell.today,
body .month-cell.today {
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border-color: var(--primary);
}


/* --- Import de stock : aperçu --- */
body .import-stock-card { max-width: 640px; }

body .import-stock-inputs {
  display: grid;
  gap: 10px;
}

body .import-preview-count {
  margin: 8px 0;
  font-weight: 700;
  color: #0e8a5f;
}

body .import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

body .import-preview-table th,
body .import-preview-table td {
  padding: 6px 9px;
  border: 1px solid #e2e7ee;
  text-align: left;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .import-preview-table th {
  background: #f1f4f9;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}


/* ==========================================================
   IDENTITÉ CARILLON — wordmark, logo, badges métier
   ========================================================== */
body .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body .brand-mark {
  background: transparent;
  padding: 0;
  flex: none;
}

body .brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 6px rgba(30, 42, 63, 0.18);
}

body.ui-revolution .brand strong.brand-wordmark,
body .brand strong.brand-wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #1e2a3f;
  line-height: 1.15;
  display: block;
}

body.ui-revolution .brand strong.brand-wordmark span.brand-dot,
body .brand strong.brand-wordmark span.brand-dot { color: #f5a623; }

body .brand-metier-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body .brand-metier-line #brandTagline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .metier-badge {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex: none;
  display: inline-block;
}

body .metier-badge-card {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

body .admin-client-card .item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

body .admin-client-identity {
  min-width: 0;
  flex: 1;
}

body .admin-client-identity strong,
body .admin-client-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Écran de connexion aux couleurs de la marque */
body.ui-revolution .login-screen,
body .login-screen {
  background: linear-gradient(160deg, #16202f 0%, #1e2a3f 55%, #27354d 100%);
}

body.ui-revolution .login-wordmark .brand-dot,
body .login-wordmark .brand-dot {
  color: #d97706;
}

body .carillon-login-brand {
  background: transparent;
  width: auto;
  height: auto;
}

body .carillon-login-brand img {
  width: 92px;
  height: auto;
  display: block;
  margin: 0 auto;
}

body .login-wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* ==========================================================
   ANTI-CHEVAUCHEMENT — garde-fous typographiques globaux
   ========================================================== */
/* Les cartes ne laissent jamais un texte long traverser la voisine */
body .item-card,
body .panel,
body .kpi-card,
body .pilotage-tile,
body .admin-client-card {
  overflow-wrap: break-word;
  min-width: 0;
}

body .item-head {
  gap: 10px;
}

body .item-head > div {
  min-width: 0;
}

body .item-head strong,
body .item-head span,
body .item-head small {
  overflow-wrap: anywhere;
}

/* Les badges gardent leur forme, le texte cède en premier */
body .badge,
body .status-badge,
body .margin-chip,
body .due-chip {
  flex: none;
  white-space: nowrap;
}

/* Blocs techniques : jamais plus haut que 40vh, défilement interne */
body pre.analysis,
body pre.payload-preview {
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Chips du calendrier : rognés proprement dans leur créneau */
body .calendar-grid .planning-chip,
body .calendar-cell .planning-chip {
  overflow: hidden;
  min-width: 0;
}

body .calendar-grid .planning-chip strong,
body .calendar-grid .planning-chip span,
body .calendar-cell .planning-chip strong,
body .calendar-cell .planning-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Respiration : petits textes denses plus lisibles */
body .item-card small,
body .item-card span {
  line-height: 1.45;
}

body .panel-head h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ==========================================================
   MENU ESCAMOTABLE — hamburger dans la topbar
   ========================================================== */
body .sidebar-toggle-btn {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e2ddd2;
  background: #ffffff;
  color: #1e2a3f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body .sidebar-toggle-btn:hover {
  background: #fbf0de;
  border-color: #d97706;
  color: #92400e;
}

body .sidebar-toggle-btn .nav-icon {
  width: 20px;
  height: 20px;
}

body.ui-revolution.sidebar-collapsed .layout,
body.sidebar-collapsed .layout {
  grid-template-columns: minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  display: none;
}

/* En mobile la barre basse prend le relais : le hamburger n'y sert pas.
   Sélecteur doublé : body.ui-revolution .icon-btn (0,2,1) pose display:grid
   et battrait body .sidebar-toggle-btn (0,1,1). */
@media (max-width: 800px) {
  body.ui-revolution .sidebar-toggle-btn,
  body .sidebar-toggle-btn { display: none; }
}


/* ==========================================================
   CONTRASTE AA — audit 2026-07-12 : blanc sur ambre clair 3.2:1
   → les fonds pleins passent sur la variante foncée du métier.
   ========================================================== */
body.ui-revolution .btn.primary,
body .btn.primary {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

body.ui-revolution .btn.primary:hover,
body .btn.primary:hover {
  filter: brightness(1.08);
}

/* Aides ambrées en petit corps : ambre profond lisible sur blanc */
body .pilotage-tile b {
  color: #92400e;
}

/* Heure des chips planning sur fond crème */
body .planning-chip .chip-time,
body .chip-time {
  color: #33404d;
}