/* ═════════════════════════════════════════════════════════════════════
   FOODHUB — Compact Pass v2 (Salim 2026-05-22)
   User : "trop grand et trop d'espace. reduire les blancs et retirer
   le plus les espaces et les reduires un max. condense. mobile user
   friendly."

   Stratégie : surcharger les inline-styles via classes connues + cibler
   les patterns d'espacement excessif. Mobile-first.
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO / HEADERS — padding agressif réduit ─────────────────────── */
.fh-hero,
.fh-hero-compact,
section.fh-hero {
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  border-radius: 10px !important;
}
.fh-hero h1,
.fh-hero-compact h1 {
  font-size: 17px !important;
  line-height: 1.15 !important;
}
.fh-hero p,
.fh-hero-compact p,
.fh-hero .lead {
  font-size: 12px !important;
  margin: 2px 0 0 0 !important;
}

/* ── 2. CARDS — densité accrue ───────────────────────────────────────── */
.fh-card,
.fh-section {
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.fh-card-tight {
  padding: 7px 10px !important;
  border-radius: 8px !important;
}

/* ── 3. HEADINGS — réduction ─────────────────────────────────────────── */
h1.fh-h1, .fh-page-title { font-size: 18px !important; line-height: 1.15 !important; margin: 0 0 6px 0 !important; }
h2.fh-h2 { font-size: 15px !important; margin: 0 0 4px 0 !important; }

/* ── 4. STAT / KPI VALUES — moins gigantesques ───────────────────────── */
.asg-stat__value,
.hub-cluster__big,
.kpi-value,
.fh-kpi-value {
  font-size: 18px !important;
  line-height: 1.05 !important;
}
.asg-stat__label,
.hub-cluster__kpi-label,
.fh-kpi-label {
  font-size: 10px !important;
  margin-bottom: 1px !important;
}
.asg-stat__sub,
.fh-kpi-sub {
  font-size: 10.5px !important;
  margin-top: 1px !important;
}

/* ── 5. HUB CLUSTERS — orders hub plus dense ─────────────────────────── */
.hub-grid {
  gap: 10px !important;
}
.hub-cluster {
  padding: 12px 14px !important;
  border-radius: 12px !important;
}
.hub-cluster__title {
  font-size: 16px !important;
  margin: 4px 0 !important;
}
.hub-cluster__desc {
  font-size: 11.5px !important;
  margin: 2px 0 6px !important;
}

/* ── 6. TABLES — lignes plus serrées ─────────────────────────────────── */
table.fh-table th,
table.fh-table td,
.dvi-table th, .dvi-table td,
.inv-table th, .inv-table td {
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* ── 7. DISPATCH ROWS — déjà plutôt compact, on serre encore ─────────── */
.disp-row__summary {
  padding: 8px 12px !important;
  gap: 8px !important;
}
.disp-row__body {
  padding: 8px 12px !important;
}

/* ── 8. FORMS — inputs plus compacts ─────────────────────────────────── */
.fh-input,
.fh-select,
input.form-control,
select.form-control,
textarea.form-control {
  padding: 7px 10px !important;
  font-size: 13px !important;
  min-height: 36px !important;
}

/* ── 9. CTA BUTTONS — proportionnés ──────────────────────────────────── */
.fh-btn,
.btn-fh,
.btn-fh-sm {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  min-height: 34px !important;
}
.btn-fh-sm {
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  min-height: 28px !important;
}

/* ── 10. SPACING — sections principales ──────────────────────────────── */
section {
  margin-bottom: 10px !important;
}
.fh-stack > * + * {
  margin-top: 8px !important;
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE — < 768px : encore plus compact
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 13px; }

  .fh-hero,
  .fh-hero-compact,
  section.fh-hero {
    padding: 8px 11px !important;
    margin-bottom: 6px !important;
  }
  .fh-hero h1,
  .fh-hero-compact h1 {
    font-size: 15px !important;
  }

  .fh-card,
  .fh-section {
    padding: 8px 10px !important;
  }
  .fh-card-tight {
    padding: 6px 8px !important;
  }

  /* KPIs et valeurs mini sur mobile */
  .asg-stat__value,
  .hub-cluster__big,
  .kpi-value {
    font-size: 16px !important;
  }
  .asg-stat__label,
  .hub-cluster__kpi-label {
    font-size: 9.5px !important;
  }

  h1, h2, h3 { line-height: 1.15 !important; }
  h1 { font-size: 17px !important; }
  h2 { font-size: 14px !important; }
  h3 { font-size: 13px !important; }

  /* Hub cluster : plus dense */
  .hub-cluster {
    padding: 10px 12px !important;
  }
  .hub-cluster__big {
    font-size: 22px !important;
  }
  .hub-cluster__title {
    font-size: 14px !important;
  }
  .hub-cluster__desc {
    font-size: 11px !important;
  }

  /* Tables font plus petite */
  table.fh-table th,
  table.fh-table td,
  .dvi-table th, .dvi-table td {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
  }

  /* Dispatch rows compactes */
  .disp-row__summary {
    padding: 7px 10px !important;
    gap: 6px !important;
  }
  .disp-row__ref { font-size: 12.5px !important; }
  .disp-row__pill { font-size: 9.5px !important; padding: 1px 7px !important; }

  /* Boutons full-width pertinents */
  .fh-btn,
  .btn-fh {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  /* Sections marge réduite */
  section {
    margin-bottom: 8px !important;
  }

  /* Page wrappers padding réduit */
  .fh-v1,
  .content,
  main > .container,
  main > .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   ULTRA-MOBILE — < 420px : phones étroits
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .fh-hero { padding: 7px 10px !important; }
  .fh-card { padding: 7px 9px !important; }
  .hub-cluster { padding: 9px 10px !important; }
  .hub-cluster__big { font-size: 20px !important; }
  body { font-size: 12.5px; }
  /* Réduire les emojis dans les boutons pour économiser l'espace */
  .fh-btn .emoji-only { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   PRINT — compact maximal (PDF)
   ═════════════════════════════════════════════════════════════════════ */
@media print {
  .fh-hero, .fh-card, section { padding: 6px 10px !important; margin-bottom: 4px !important; }
  body { font-size: 11px !important; }
}