/* =========================================================
   Responsive global – Compta Onelaw
   Chargé en dernier dans toutes les pages.
   3 breakpoints :
     ≤ 1200px : tablette paysage / petit laptop
     ≤ 900px  : tablette portrait — sidebar en drawer
     ≤ 600px  : mobile
   ========================================================= */

/* ---------- Backdrop sidebar (drawer mobile) ---------- */
/* Injecté par layout.js, masqué par défaut, visible quand body.sidebar-open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.45);
  z-index: 35;
  cursor: pointer;
}

body.sidebar-open .sidebar-backdrop {
  display: block;
}

/* ---------- ≤ 1200px : tablette paysage / petit laptop ---------- */
@media (max-width: 1200px) {
  .app-sidebar {
    width: 210px;
    padding: 1.25rem 1rem;
  }

  .app-main {
    margin-left: 210px;
  }

  .app-content {
    padding: 1.25rem 1.25rem 2rem;
  }

  /* KPI : 4 → 2 colonnes */
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- ≤ 900px : sidebar en drawer ---------- */
@media (max-width: 900px) {
  /* Empêche le scroll de fond quand le drawer est ouvert */
  body.sidebar-open {
    overflow: hidden;
  }

  /* Sidebar drawer */
  .app-sidebar {
    width: 260px;
    padding: 1.5rem 1.25rem;
    box-shadow: 4px 0 16px rgba(15, 23, 42, 0.18);
    z-index: 40;
  }

  .app-main {
    margin-left: 0;
  }

  .app-content {
    padding: 1rem 1rem 1.75rem;
  }

  /* Header un peu plus compact */
  .app-header {
    padding: 0.7rem 1rem;
  }
  .app-header-title {
    font-size: 0.95rem;
  }
  .app-header-subtitle {
    font-size: 0.75rem;
  }

  /* Tableaux : scroll horizontal — on override les overflow:hidden des wrappers */
  .recovery-table-wrapper,
  .companies-table-wrapper,
  .contacts-table-wrapper,
  .admin-users-table-wrapper,
  .workflow-emails-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .recovery-table,
  .companies-table,
  .contacts-table,
  .admin-users-table,
  .workflow-emails-table {
    min-width: 680px;
  }

  /* Section-card padding réduit */
  .section-card {
    padding: 1rem 1.1rem;
  }

  /* Recovery toolbar : déjà column, on s'assure que les filtres wrappent bien */
  .recovery-filters {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .recovery-select {
    flex: 1 1 auto;
  }

  /* Dashboard : ligne secondaire (graph 5 ans + card YTD) en colonne */
  .global-secondary-row {
    flex-direction: column;
  }
  .global-secondary-main,
  .global-ytd-card {
    width: 100%;
  }

  /* KPI Recouvrement : graphes empilés */
  .kpi-recouvrement-row {
    flex-direction: column;
    gap: 1rem;
  }
  .kpi-recouvrement-row + .kpi-recouvrement-row {
    margin-top: 1rem;
  }

  /* Modales : marges réduites */
  .modal-panel {
    margin: 2rem auto;
    max-width: 92%;
  }
  .assign-modal-panel {
    max-height: 90vh;
  }

  /* Header : on masque le subtitle pour gagner de la place */
  .app-header-subtitle {
    display: none;
  }
}

/* ---------- ≤ 600px : mobile ---------- */
@media (max-width: 600px) {
  /* Header utilisateur : on ne garde que l'avatar */
  .header-user-button > div:not(.header-user-avatar) {
    display: none;
  }
  .header-user-button {
    padding: 0.25rem;
    border: none;
    background: transparent;
  }

  /* Burger plus gros pour le tap */
  .header-burger {
    font-size: 1.6rem;
    padding: 0.25rem 0.5rem;
  }

  /* Dashboard : 1 colonne */
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* KPI card : valeur un peu réduite */
  .kpi-card .dashboard-card-value,
  .dashboard-card-value {
    font-size: 1.3rem;
  }

  /* Tableaux : compact */
  .recovery-table th,
  .recovery-table td,
  .companies-table th,
  .companies-table td,
  .contacts-table th,
  .contacts-table td,
  .admin-users-table th,
  .admin-users-table td,
  .workflow-emails-table th,
  .workflow-emails-table td {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
  }

  /* Padding mini */
  .app-content {
    padding: 0.75rem 0.75rem 1.5rem;
  }

  .section-card {
    padding: 0.85rem 0.9rem;
  }
  .section-title {
    font-size: 0.9rem;
  }

  /* Filter bar : tout en colonne plein largeur */
  .filter-bar .filter-group,
  .filter-bar .filter-group input[type="date"] {
    width: 100%;
  }

  /* Modal : marge minimale */
  .modal-panel {
    margin: 1rem auto;
    padding: 0.9rem 1rem;
  }

  /* Login : un peu réduit */
  .login-card {
    padding: 1.5rem 1.25rem;
  }

  /* Admin form 2 cols → 1 col */
  .admin-user-form-grid {
    grid-template-columns: 1fr;
  }

  /* Recovery toolbar : filtres en colonne plein largeur */
  .recovery-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .recovery-select,
  .recovery-export-btn {
    width: 100%;
  }

  /* Tabs admin : scroll horizontal plutôt que wrap */
  .admin-tabs,
  .admin-role-tabs,
  .assign-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* BU cards : actions sous le contenu */
  .admin-bu-card {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-bu-card-actions {
    margin-left: 0;
    margin-top: 0.5rem;
    justify-content: flex-end;
  }

  /* Permissions : on autorise le texte à utiliser toute la ligne */
  .admin-permission-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .admin-permission-text {
    max-width: 100%;
  }

  /* Workflow emails header : empiler */
  .workflow-emails-header {
    flex-direction: column;
    align-items: stretch;
  }
}