/* ============================================================
   Le Comptable Digital — mobile.css
   Styles PWA / responsive pour smartphones
   ============================================================ */

/* ── Safe area iPhone (notch / barre maison) ─────────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Layout mobile (< 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  /* Cacher la sidebar sur mobile */
  .sidebar { display: none !important; }

  /* Contenu prend toute la largeur */
  .app-layout { grid-template-columns: 1fr !important; }
  .content-area {
    padding-bottom: calc(70px + var(--safe-bottom)) !important;
  }

  /* Topbar mobile — plus compact */
  .topbar {
    padding: 0 16px !important;
    height: 52px !important;
  }
  .topbar .app-name { font-size: 15px !important; }

  /* ── Barre de navigation mobile (bottom tab bar) ─────────── */
  #mobile-navbar {
    display: flex !important;
  }

  /* Formulaires — inputs plus grands pour touch */
  input, select, textarea {
    font-size: 16px !important; /* empêche le zoom iOS */
    min-height: 44px !important;
  }

  /* Boutons plus grands */
  button { min-height: 44px; }

  /* Grilles → 1 colonne sur mobile */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Tableaux → scroll horizontal */
  table { min-width: 600px; }
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Padding réduit */
  [style*="padding:28px"] { padding: 16px !important; }
  [style*="max-width:1100px"], [style*="max-width:1200px"] {
    max-width: 100% !important;
  }

  /* Widget assistant — plein écran sur mobile */
  #baw-widget {
    width: 100% !important;
    right: 0 !important;
    bottom: 70px !important;
    border-radius: 14px 14px 0 0 !important;
  }
  #baw-fab {
    bottom: calc(70px + 12px + var(--safe-bottom)) !important;
  }
}

/* ── Barre navigation mobile (cachée sur desktop) ───────────── */
#mobile-navbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--white);
  border-top: 1px solid var(--gray-border);
  z-index: 1000;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-text);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: color .15s;
  flex: 1;
  min-height: 44px;
}
.mobile-nav-item.active,
.mobile-nav-item:active {
  color: var(--teal);
}
.mobile-nav-item svg { flex-shrink: 0; }

/* ── Page mobile saisie rapide ───────────────────────────── */
.mobile-scan-btn {
  width: 100%;
  height: 56px;
  background: var(--teal);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.mobile-scan-btn:active { opacity: .85; }

/* ── Splash PWA ──────────────────────────────────────────── */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-top); }
  .topbar { padding-top: calc(var(--safe-top) + 8px) !important; }
}