/* ============================================================
   responsive.css — SuiviChantier
   Breakpoints : 576px (xs), 768px (sm), 992px (md), 1200px (lg)
   Utilise Bootstrap 5 + classes utilitaires custom
   ============================================================ */

/* ── BASE MOBILE ──────────────────────────────────────────── */
* { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* Empêche tout débordement horizontal */
body { overflow-x: hidden; }
.main-content { overflow-x: hidden; }

/* Tables : scroll horizontal sur mobile */
.table-responsive-force {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── TOPBAR ────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .topbar { padding: 0 12px; }
  .tb-page-title { font-size: 0.78rem; }
  .tb-user-name { display: none !important; }
}

/* ── MAIN CONTENT PADDING ─────────────────────────────────── */
@media (max-width: 767.98px) {
  .main-content { padding: 14px 12px; }
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: 1.1rem; }
}

/* ── GRILLES KPI ──────────────────────────────────────────── */
/* Dashboard */
@media (max-width: 767.98px) {
  /* Bootstrap row g-3 déjà responsive, mais forcer 2 colonnes */
  .kpi-grid-2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 480px) {
  .kpi-grid-2 { grid-template-columns: 1fr !important; }
}

/* KPI cards bons/index.php */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-val  { font-size: 1.15rem !important; }
}

/* ── PAGE HEADER ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header > div:last-child,
  .header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .bons-header { flex-direction: column; gap: 10px; }
  .bons-header .header-actions { width: 100%; }
  .btn-add, .btn-back { font-size: 0.78rem; padding: 0.4rem 0.9rem; }
}

/* ── TABLES ───────────────────────────────────────────────── */
/* Toutes les .tcard et .card avec table */
.tcard,
.card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  /* Réduire padding des cellules */
  .dt th, .dt td { padding: 8px 8px !important; font-size: 0.78rem !important; }
  .tcard thead th { padding: 7px 8px !important; font-size: 0.67rem !important; }
  .tcard tbody td { padding: 8px 8px !important; font-size: 0.8rem !important; }

  /* Masquer colonnes secondaires sur mobile */
  .hide-sm { display: none !important; }
}

@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}

/* ── FORMULAIRES ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Lignes du formulaire ajouter.php */
  .lignes-head,
  .ligne-row {
    grid-template-columns: 22px 1fr 60px 90px 90px 28px !important;
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  .lignes-head span,
  .ligne-row input { font-size: 0.78rem !important; }
  .btn-add { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  /* Masquer colonnes Qté et PU, garder Désignation + Total */
  .col-qte-hide { display: none !important; }
  .col-pu-hide  { display: none !important; }

  .lignes-head,
  .ligne-row {
    grid-template-columns: 22px 1fr 90px 28px !important;
  }

  /* Calculer auto si qte/pu sont cachées */
  .hint-mobile {
    display: block !important;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 4px;
  }
}

/* ── FILTRE BONS/INDEX ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .filter-bar label { display: none; }
  .filter-sep { display: none !important; }
  .filter-bar input[type="text"],
  .filter-bar select,
  .filter-bar input[type="date"] {
    width: 100% !important;
    min-width: unset !important;
    font-size: 0.875rem;
  }
  .filter-count { margin-left: 0 !important; }
}

/* ── DASHBOARD ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* stat-grid bootstrap */
  .stat-grid-dash { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ── ABONNEMENT / PAIEMENT ────────────────────────────────── */
@media (max-width: 600px) {
  .abo-wrap { max-width: 100% !important; padding: 0 4px; }
  .period-tabs,
  .ptabs { flex-direction: row; overflow-x: auto; }
  .ptab { min-width: 90px; }
  .offer-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .offer-price { text-align: left !important; }
  .tc-head {
    flex-direction: column !important;
    gap: 6px;
  }
}

/* ── ABONNEMENT ADMIN (proof cards) ──────────────────────── */
@media (max-width: 767.98px) {
  .pc .row { flex-direction: column; }
  .proof-img { max-height: 200px !important; }
  .btn-ok, .btn-ko { padding: 10px !important; }
}

/* ── SIDEBAR USER ZONE ────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Déjà géré dans header.php — s'assurer que overlay fonctionne */
  .sb-overlay { display: none; }
  .sb-overlay.open { display: block !important; }
}

/* ── MODAL JUSTIFICATIF ───────────────────────────────────── */
@media (max-width: 600px) {
  .preuve-box {
    width: 96% !important;
    padding: 1rem !important;
    max-height: 95vh !important;
  }
  .preuve-body img { max-height: 55vh !important; }
  .preuve-body iframe { height: 55vh !important; }
}

/* ── TOTAL BAR (ajouter bon) ─────────────────────────────── */
@media (max-width: 480px) {
  .total-bar, .total-box {
    flex-direction: column !important;
    gap: 4px;
    padding: 12px !important;
  }
  .total-bar .val, .total-box .val { font-size: 1.1rem !important; }
}

/* ── CHANTIERS/INDEX ──────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Masquer colonnes secondaires de la liste chantiers */
  .ch-col-lieu   { display: none !important; }
  .ch-col-budget { display: none !important; }
}

/* ── BULLETIN DÉPENSES (filtres) ─────────────────────────── */
@media (max-width: 767.98px) {
  .filter-card .row { flex-direction: column; }
  .filter-card .col-md-2,
  .filter-card .col-md-3 { width: 100% !important; max-width: 100% !important; }
}

/* ── CARTE STAT (admin abonnement) ───────────────────────── */
@media (max-width: 767.98px) {
  .stat, .kpi { padding: 10px 12px !important; }
  .stat-val, .kpi-v { font-size: 1.2rem !important; }
}

/* ── CONNEXION / LOGIN ────────────────────────────────────── */
@media (max-width: 480px) {
  .login-card { padding: 24px 16px !important; }
  .login-wrap { padding: 10px !important; }
}

/* ── SECTION SIGNATURES (bons) ───────────────────────────── */
@media (max-width: 640px) {
  .sign-table td,
  .sign-table th { padding: 4px 3px !important; }
}

/* ── UTILITAIRES CUSTOM ───────────────────────────────────── */
.hint-mobile { display: none; }

/* Texte tronqué responsive */
.text-truncate-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
@media (min-width: 768px) {
  .text-truncate-sm { max-width: none; white-space: normal; }
}

/* Bouton pleine largeur sur mobile */
@media (max-width: 576px) {
  .btn-full-mobile { width: 100% !important; justify-content: center; }
}

/* Espacement mobile */
@media (max-width: 767.98px) {
  .mb-mobile-3 { margin-bottom: 1rem !important; }
  .gap-mobile-2 { gap: 0.5rem !important; }
}