/* ============================================================
   CerumFleet — Mobile-first enhancements
   Cible : iPhone 17 Pro (393 × 852 pt) et équivalents
   Ce fichier complète app.css sans le modifier.
   ============================================================ */

/* ── 1. Safe area & scroll global ───────────────────────────── */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    overscroll-behavior-y: none; /* Empêche le bounce iOS intempestif */
  }

  /* ── 2. Workspace : respire mieux ───────────────────────────── */
  .workspace {
    padding: 0.75rem 0.6rem calc(5.5rem + env(safe-area-inset-bottom)) !important;
  }

  /* ── 3. Navigation bottom — style tab-bar iOS ────────────────
     Icônes via ::before sur data-tab                           */
  .mobile-nav {
    grid-template-columns: repeat(4, 1fr);
    padding: 0.2rem 0.15rem calc(0.5rem + env(safe-area-inset-bottom));
    gap: 0;
    border-top: 1px solid var(--border);
  }

  .mobile-nav .tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-height: 52px;
    padding: 0.25rem 0.1rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    border-radius: 0.7rem;
    transition: color 0.15s, background 0.15s;
  }

  /* Icône emoji au-dessus du label */
  .mobile-nav .tab-btn[data-tab="suivi"]::before      { content: "📊"; font-size: 1.15rem; }
  .mobile-nav .tab-btn[data-tab="locations"]::before  { content: "📅"; font-size: 1.15rem; }
  .mobile-nav .tab-btn[data-tab="rentabilite"]::before{ content: "💰"; font-size: 1.15rem; }
  .mobile-nav .tab-btn.mobile-more-btn::before        { content: "⋯";  font-size: 1.4rem; line-height: 1; }

  .mobile-nav .tab-btn .nav-dot { display: none; } /* Remplacé par les icônes */

  .mobile-nav .tab-btn.is-active {
    color: var(--accent);
    background: rgba(255, 159, 63, 0.1);
  }

  /* Menu "Plus" — icônes aussi */
  .mobile-more-menu .tab-btn[data-tab="vehicles"]::before   { content: "🚗 "; }
  .mobile-more-menu .tab-btn[data-tab="calendrier"]::before { content: "📆 "; }
  .mobile-more-menu .tab-btn[data-tab="maintenance"]::before{ content: "🔧 "; }
  .mobile-more-menu .tab-btn[data-tab="params"]::before     { content: "⚙️ "; }

  /* ── 4. Cockpit KPIs — cartes visuelles ─────────────────────
     2×2 avec indicateur coloré latéral                        */
  .cockpit-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .cockpit-kpi {
    position: relative;
    padding: 0.7rem 0.65rem 0.65rem;
    border-radius: 0.9rem;
    overflow: hidden;
    min-height: 88px;
  }

  /* Barre colorée sur le côté gauche selon le badge */
  .cockpit-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--muted);
    opacity: 0.4;
    transition: background 0.2s, opacity 0.2s;
  }

  /* Couleur de la barre selon le statut du badge */
  .cockpit-kpi:has(.kpi-badge.ok)::before   { background: var(--pos); opacity: 0.7; }
  .cockpit-kpi:has(.kpi-badge.warn)::before { background: #f59e0b;   opacity: 0.7; }
  .cockpit-kpi:has(.kpi-badge.alert)::before{ background: var(--neg); opacity: 0.7; }

  .kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    gap: 0.25rem;
  }

  .kpi-title {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
  }

  .kpi-badge {
    font-size: 0.58rem;
    padding: 0.1rem 0.38rem;
    flex-shrink: 0;
  }

  .kpi-main {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  /* Delta : compact sur une ligne, hint masqué */
  .kpi-delta {
    font-size: 0.6rem;
    color: var(--muted);
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .kpi-hint { display: none; } /* Trop verbeux sur mobile */

  /* ── 5. Score flotte — pill visible ─────────────────────────── */
  .cockpit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
  }

  #fleetScore {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
  }

  /* Boutons actions cockpit : juste les essentiels */
  #qaAddLocation {
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }

  #qaAddVehicle,
  #qaDiagnoseRoi,
  #qaProj6,
  #qaProj12 {
    display: none; /* Masqués sur mobile — accessible via onglets */
  }

  #modeToggle {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    max-width: 90px;
  }

  /* ── 6. Cashflow détaillé — barres plus lisibles ─────────────── */
  .cashflow-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }

  .cashflow-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .cashflow-value {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    text-align: right;
  }

  .cashflow-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
  }

  .cashflow-fill {
    height: 100%;
    border-radius: inherit;
    display: block;
  }

  .cashflow-fill.pos { background: var(--pos); }
  .cashflow-fill.neg { background: var(--neg); }

  /* ── 7. Signal cards — row compacte ─────────────────────────── */
  #rentSignals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }

  .signal-card {
    padding: 0.5rem 0.4rem;
    text-align: center;
  }

  .signal-card .font-semibold { font-size: 0.82rem; }
  .signal-card .hint           { font-size: 0.62rem; }

  /* ── 8. Rentabilité — selects + KPIs condensés ───────────────── */
  .rent-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  #rentVehicule,
  #rentMonth {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.55rem;
  }

  /* KPIs section rentabilité : 2×2 */
  .rent-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }

  /* ── 9. Charts — hauteur adaptée ────────────────────────────── */
  .chart-card {
    min-height: 200px;
  }

  canvas {
    max-height: 200px !important;
  }

  /* ── 10. Tableau locations — colonnes réduites ───────────────── */
  .loc-table th:nth-child(n+5),
  .loc-table td:nth-child(n+5) {
    display: none; /* Cache colonnes secondaires */
  }

  /* ── 11. Véhicule cards — layout empilé propre ───────────────── */
  .vehicle-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vehicle-health-shell {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* ── 12. Inputs touch-friendly (min 44px tap target) ─────────── */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important; /* Empêche zoom iOS */
    border-radius: 0.6rem;
  }

  /* ── 13. Section headers — compacts ─────────────────────────── */
  .app-header,
  .panel h2 {
    font-size: 1rem;
  }

  h2, h3 {
    font-size: 0.95rem;
  }

  /* ── 14. Cards — padding réduit ─────────────────────────────── */
  .card, .panel {
    padding: 0.75rem;
    border-radius: 0.85rem;
  }

  /* ── 15. Heatmap — 6 colonnes sur mobile ────────────────────── */
  .heatmap-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* ── 16. Dashboard hero — compact ───────────────────────────── */
  .dashboard-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .profit-kpi {
    min-height: 60px;
    padding: 0.4rem 0.45rem;
  }

  .profit-kpi .val {
    font-size: 0.95rem;
  }
}

/* ── Très petit (< 390px) ────────────────────────────────────── */
@media (max-width: 390px) {
  .cockpit-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
  }

  .kpi-main {
    font-size: 1.15rem;
  }

  .mobile-nav .tab-btn {
    font-size: 0.58rem;
  }

  .mobile-nav .tab-btn[data-tab]::before {
    font-size: 1rem;
  }
}

/* ── Mode paysage iPhone ─────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-nav {
    padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
  }

  .workspace {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom)) !important;
  }

  .cockpit-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  canvas {
    max-height: 150px !important;
  }
}