/* ═════════════════════════════════════════════════════════════════════
   FOODHUB — Polish & Mobile Safety Net (Salim 2026-05-19)
   Compile toutes les remarques UX de la session :
   - "Trop d'espace" → densité accrue partout
   - "Overflow horizontal mobile" → safety net global
   - "Lignes hautes" → padding réduit tables/cards
   - "Boutons débordent" → flex-wrap + touch 44px
   - "Pas clair quel statut" → pills uniformes
   - "Hero gigantesque" → compaction
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1. SAFETY NET — pas d'overflow horizontal jamais (mobile + desktop) ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Les containers principaux doivent rester dans la viewport */
#main, .content, .fh-v1 {
  max-width: 100%;
  box-sizing: border-box;
}

/* Tables qui débordent → scroll horizontal natif dans wrapper */
.fh-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ── 2. TOUCH TARGETS — minimum 44px sur tous les contrôles tactiles ── */
@media (hover: none) and (pointer: coarse) {
  button, .btn-fh, .btn-fh-sm, [role="button"],
  input[type="checkbox"], input[type="radio"],
  select, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"],
  textarea, a.btn, a.fh-btn {
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px; min-height: 22px;
  }
}

/* ── 3. STATUS PILLS — système unifié ── */
.fh-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; line-height: 1;
}
.fh-pill--neutral { background: #f5f5f5; color: #525252; border: 1px solid #e5e5e5; }
.fh-pill--info    { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.fh-pill--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.fh-pill--warn    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.fh-pill--danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.fh-pill--gold    { background: rgba(201,168,76,.18); color: #8a6d2c; border: 1px solid rgba(201,168,76,.4); }
.fh-pill--dark    { background: #1A1611; color: #c9a84c; border: 1px solid #3a2e20; }

/* ── 4. HERO COMPACT — uniformisé sur toutes les pages d'action ── */
.fh-hero-compact {
  background: linear-gradient(135deg, #1A1611 0%, #2D2418 100%);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
  border: 1px solid #3A2E20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.fh-hero-compact h1 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 700; font-size: 18px;
  margin: 0; letter-spacing: -.01em; color: #fff;
}
.fh-hero-compact .fh-hero-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #c9a84c; font-weight: 700;
  margin-bottom: 2px;
}
.fh-hero-compact .fh-hero-meta {
  font-size: 11.5px; color: rgba(255,255,255,.72);
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono, ui-monospace, monospace);
}
@media (max-width: 720px) {
  .fh-hero-compact { padding: 8px 12px; gap: 8px }
  .fh-hero-compact h1 { font-size: 15px }
  .fh-hero-compact .fh-hero-meta { font-size: 11px; gap: 8px }
}

/* ── 5. DENSITÉ TABLES — partout 5/8 padding au lieu de 12/14 ── */
.fh-dense table { border-collapse: collapse; width: 100% }
.fh-dense th, .fh-dense td { padding: 5px 8px; font-size: 13px }
.fh-dense thead th {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #737373; font-weight: 700;
  background: #fafafa; border-bottom: 1px solid #e5e5e5;
  padding: 6px 8px;
}
.fh-dense tbody tr { border-bottom: 1px solid #f5f5f5 }
.fh-dense tbody tr:hover { background: #fafafa }

/* ── 6. CARDS UNIFORMES ── */
.fh-card-tight {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fh-card-tight + .fh-card-tight { margin-top: 8px }

/* ── 7. ACTIONS BAR mobile — wrap intelligent + touch ── */
.fh-actions-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.fh-actions-bar > * {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .fh-actions-bar > .fh-btn,
  .fh-actions-bar > button,
  .fh-actions-bar > a.btn { width: 100% }
}

/* ── 8. FORM INPUTS uniformes (mobile-first) ── */
@media (max-width: 720px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="date"], select, textarea {
    font-size: 16px !important; /* iOS no zoom on focus */
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ── 9. SCROLLBAR DISCRÈTE (desktop) ── */
@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar { width: 8px; height: 8px }
  *::-webkit-scrollbar-track { background: transparent }
  *::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px }
  *::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3) }
}

/* ── 10. STICKY BARS — z-index discipline ── */
.fh-sticky-top    { position: sticky; top: 0;    z-index: 40 }
.fh-sticky-bottom { position: sticky; bottom: 0; z-index: 40 }
.fh-sticky-bar    { box-shadow: 0 -2px 8px rgba(0,0,0,.06) }

/* ── 11. PRINT — masquer les éléments non-imprimables ── */
@media print {
  .no-print, .fh-sticky-top, .fh-sticky-bottom, .topbar, #sidebar,
  .sidebar-toggle, .sidebar-overlay, .fh-actions-bar, .fh-bottom-nav {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important }
}

/* ════════════════════════════════════════════════════════════════
   BOTTOM NAV MOBILE — navigation sticky en bas sur mobile/tablet
   Visible UNIQUEMENT sous 720px. Actions principales 1 clic
   depuis n'importe quelle page.
   ════════════════════════════════════════════════════════════════ */
.fh-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #e5e5e5;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 60;
  box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}
.fh-bottom-nav__inner {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  max-width: 480px; margin: 0 auto;
}
.fh-bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 4px;
  text-decoration: none;
  color: #737373;
  font-size: 10px; font-weight: 700;
  letter-spacing: .02em;
  border-radius: 8px;
  min-height: 48px;
  transition: all .15s;
}
.fh-bottom-nav__item i, .fh-bottom-nav__item .ico {
  font-size: 20px; line-height: 1;
}
.fh-bottom-nav__item:hover { background: #fafafa; color: #0e0e0e; }
.fh-bottom-nav__item.is-active {
  color: #c9a84c; background: rgba(201,168,76,.08);
}
@media (max-width: 720px) {
  .fh-bottom-nav { display: block }
  /* Pad le bas du body pour que le contenu ne soit pas mangé par la nav */
  body { padding-bottom: 70px }
}

/* ════════════════════════════════════════════════════════════════
   SKELETON LOADERS — placeholders pendant chargements Turbo/Stimulus
   ════════════════════════════════════════════════════════════════ */
.fh-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: fh-skeleton-shimmer 1.4s linear infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
}
.fh-skeleton--line  { height: 14px; width: 100%; margin: 4px 0 }
.fh-skeleton--title { height: 22px; width: 60%; margin: 8px 0 }
.fh-skeleton--pill  { height: 18px; width: 60px; border-radius: 999px }
.fh-skeleton--card  { height: 80px; border-radius: 10px }
.fh-skeleton--avatar { height: 36px; width: 36px; border-radius: 50% }

@keyframes fh-skeleton-shimmer {
  0%   { background-position: 100% 0 }
  100% { background-position: -100% 0 }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — toggle via data-theme="dark" sur <html> ou <body>
   Détection auto via prefers-color-scheme + override possible
   Variables CSS surchargées sur les classes .fh-* uniquement
   ════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --fh-bg-app: #0a0a0a;
    --fh-bg-card: #1a1a1a;
    --fh-bg-elev: #242424;
    --fh-fg: #f5f5f5;
    --fh-fg-muted: #a3a3a3;
    --fh-border: #2e2e2e;
    --fh-border-strong: #3a3a3a;
  }
}
html[data-theme="dark"] {
  --fh-bg-app: #0a0a0a;
  --fh-bg-card: #1a1a1a;
  --fh-bg-elev: #242424;
  --fh-fg: #f5f5f5;
  --fh-fg-muted: #a3a3a3;
  --fh-border: #2e2e2e;
  --fh-border-strong: #3a3a3a;
}

/* Application sur les composants .fh-* nouveaux (n'impacte pas le legacy) */
html[data-theme="dark"] .fh-card-tight,
html[data-theme="dark"] .fh-bottom-nav {
  background: var(--fh-bg-card) !important;
  border-color: var(--fh-border) !important;
  color: var(--fh-fg) !important;
}
html[data-theme="dark"] .fh-pill--neutral {
  background: var(--fh-bg-elev) !important;
  color: var(--fh-fg-muted) !important;
  border-color: var(--fh-border) !important;
}

/* Toggle button (utility) */
.fh-theme-toggle {
  background: transparent; border: 1px solid #e5e5e5;
  border-radius: 8px; padding: 6px 10px;
  font-size: 14px; cursor: pointer; line-height: 1;
}
.fh-theme-toggle:hover { background: #fafafa }
html[data-theme="dark"] .fh-theme-toggle { border-color: #3a3a3a; color: #f5f5f5 }
html[data-theme="dark"] .fh-theme-toggle:hover { background: #242424 }