/* ============================================================
   responsive.css — Trakout App Shell Responsive System
   Breakpoints: xs=480px, sm=768px, md=1024px, xl=1440px
   Chargé après app.css dans chaque page app-shell.
   Ne pas modifier style.css.
============================================================ */

/* ── 0. APP-MAIN PLEINE LARGEUR (override style.min.css) ─────
   style.min.css a margin:0 auto sur .app-main et max-width:1240px
   sur admin-page. Ces règles s'écrasent ici de façon définitive.
   Priorité : specifité > 0,2,1 + !important bat tout sauf user-agent. */

body.app-shell .app-main {
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* ── 1. SIDEBAR ICON-ONLY MODE (768px–1024px) ─────────────── */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Sidebar réduite à 64px */
  body.app-shell .app-header {
    width: 64px !important;
    overflow: visible !important;
  }

  /* Main décalé de 64px */
  body.app-shell .app-main {
    margin-left: 64px !important;
  }

  /* Masquer les éléments textuels de la sidebar */
  .app-shell .app-header-left .sb-brand .brand-text,
  .app-shell .app-header-left .header-text,
  .app-shell .sb-tenant .meta,
  .app-shell .sb-tenant .arrow,
  .app-shell .sb-user .name,
  .app-shell .sb-user .role,
  .app-shell .main-nav .sb-section,
  .app-shell .main-nav .nav-link .label,
  .app-shell .main-nav .nav-link .kbd,
  .app-shell .app-header-right .btn,
  .app-shell .app-header-right .header-text {
    display: none !important;
  }

  /* Nav-link : centrer l'icône */
  .app-shell .main-nav .nav-link {
    justify-content: center !important;
    padding: 10px 0 !important;
  }

  .app-shell .main-nav .nav-link .ic {
    margin: 0 auto !important;
  }

  /* Brand : afficher seulement le logo carré */
  .app-shell .app-header-left .sb-brand {
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Tenant : afficher seulement l'avatar */
  .app-shell .sb-tenant {
    justify-content: center !important;
    padding: 12px 0 !important;
  }
}

/* ── 2. TABLE SCROLL UTILITY ──────────────────────────────── */

/* Classe utilitaire pour les tableaux injectés par JS sans .table-wrapper */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── 3. MASQUAGE COLONNES SECONDAIRES SUR MOBILE ─────────── */

@media (max-width: 768px) {
  .col-hide-mobile {
    display: none !important;
  }
}

/* ── 4. PADDING HORIZONTAL RESPONSIVE ────────────────────── */

/* Laptop moyen (768–1024px) : réduire les paddings */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-shell .history-full-card {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .app-shell .card.movement-card {
    margin: 12px !important;
    padding: 16px 12px !important;
  }

  .app-shell .view-head {
    padding: 16px 16px 12px 16px !important;
  }

  .app-shell .app-topbar {
    padding: 8px 16px !important;
  }

  .app-shell .availability-detail-panel {
    margin: 12px !important;
    padding: 16px !important;
  }
}

/* Mobile (<768px) : padding minimal */
@media (max-width: 768px) {
  .app-shell .history-full-card {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  .app-shell .card.movement-card {
    margin: 8px !important;
    padding: 14px 10px !important;
  }

  .app-shell .view-head {
    padding: 12px 12px 10px 12px !important;
  }

  .app-shell .app-topbar {
    padding: 6px 12px !important;
  }
}

/* ── 5. GRANDS ÉCRANS — MAX-WIDTH CONTAINERS (≥ 1440px) ───── */

@media (min-width: 1440px) {
  .app-shell .app-main > .history-full-card,
  .app-shell .app-main > .availability-page-card,
  .app-shell .app-main > .card.movement-card,
  .app-shell .app-main > .view-content {
    max-width: 1600px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ── 6. GRILLES KPI FLUIDES ──────────────────────────────── */

/* KPI strip historique : auto-fit au lieu de repeat(3, 1fr) hardcodé */
@media (min-width: 768px) and (max-width: 1200px) {
  .app-shell .history-full-card .history-stats-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* Grille générique .kpi-grid (utilisée via JS ou pages futures) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* ── 7. TOPBAR RESPONSIF ─────────────────────────────────── */

/* Sur laptop moyen, masquer les éléments topbar secondaires */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-shell .tb-search {
    max-width: 220px !important;
  }
}

@media (max-width: 480px) {
  .app-shell .tb-search {
    display: none !important;
  }
}