/* ==========================================================================
   responsive.css — eHaj Design System
   Cross-cutting responsive rules. Load LAST so it can override the
   component files (layout, navigation, forms, tables, cards, dashboard).

   Breakpoints used across this design system:
     - < 640px   : mobile
     - >= 640px  : tablet portrait (sm)
     - >= 900px  : tablet landscape / small desktop (md)
     - >= 1200px : desktop (lg)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilitaires d'affichage
   -------------------------------------------------------------------------- */

.eh-hide-mobile { display: none !important; }
.eh-hide-desktop { display: initial !important; }

@media (min-width: 900px) {
  .eh-hide-mobile { display: initial !important; }
  .eh-hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Châssis applicatif : sidebar en tiroir sous 900px
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .eh-shell {
    grid-template-columns: 1fr;
  }

  .eh-sidebar {
    position: fixed;
    inset: 0 20% 0 0;
    z-index: 40;
    transform: translateX(-100%);
    box-shadow: var(--eh-shadow-lg);
    transition: transform var(--eh-transition);
  }

  /* Piloté en JS (voir static/js/layout.js, data-mobile-nav-toggle) plutôt
     que par un "checkbox hack" CSS pur : ce dernier dépendait de la
     position exacte de la case dans le DOM par rapport à .eh-shell-main
     (combinateur ~) ou du support de :has(), et s'est révélé peu fiable
     sur mobile en production. */
  .eh-shell.eh-mobile-nav-open .eh-sidebar {
    transform: translateX(0);
  }

  .eh-shell.eh-mobile-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.4);
  }

  .eh-nav-toggle-btn {
    display: inline-flex;
  }

  /* Seule la recherche de la barre supérieure (sidebar/nav) est masquée :
     .eh-topbar-search est réutilisée telle quelle comme champ de recherche
     de liste (pilgrim_list, structure_list, doctor_list...) et comme
     champ de filtre de picker (supervisor/dashboard.html) — la masquer
     globalement faisait disparaître ces recherches sur mobile. */
  .eh-topbar .eh-topbar-search {
    display: none;
  }
}

@media (min-width: 900px) {
  .eh-shell {
    grid-template-columns: var(--eh-sidebar-width) 1fr;
  }

  .eh-sidebar {
    position: sticky;
    top: 0;
    height: 100svh;
  }
}

/* --------------------------------------------------------------------------
   Grilles génériques : empiler en mobile
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .eh-grid-2,
  .eh-grid-3,
  .eh-grid-4,
  .eh-grid-sidebar,
  .eh-dashboard-grid.eh-grid-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .eh-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.32fr);
    align-items: start;
  }

  .eh-list-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.26fr);
  }
}

/* --------------------------------------------------------------------------
   Formulaires : colonnes -> pile unique en mobile
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .eh-form-row-2,
  .eh-form-row-3 {
    grid-template-columns: 1fr;
  }

  .eh-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  /* Barre collante : les boutons y sont écrits action principale en premier
     (Enregistrer, Appliquer, Fermer, Supprimer) — on conserve cet ordre. */
  .eh-form-actions.eh-sticky {
    flex-direction: column;
  }

  .eh-form-actions .eh-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Tableaux : bascule en liste de cartes sous 640px
   Nécessite `data-label` sur chaque <td> (voir tables.css).
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .eh-table.eh-table-responsive-cards {
    min-width: 0;
  }

  .eh-table.eh-table-responsive-cards thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .eh-table.eh-table-responsive-cards,
  .eh-table.eh-table-responsive-cards tbody,
  .eh-table.eh-table-responsive-cards tr,
  .eh-table.eh-table-responsive-cards td {
    display: block;
    width: 100%;
  }

  .eh-table.eh-table-responsive-cards tr {
    padding: 0.85rem 1rem;
    border-bottom: 6px solid var(--eh-bg-soft);
  }

  .eh-table.eh-table-responsive-cards td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--eh-border);
    text-align: right;
  }

  .eh-table.eh-table-responsive-cards td:last-child {
    border-bottom: 0;
  }

  .eh-table.eh-table-responsive-cards td[data-label]::before {
    display: block;
    text-align: left;
  }

  .eh-table.eh-table-responsive-cards .eh-col-actions,
  .eh-table.eh-table-responsive-cards .eh-table-actions {
    justify-content: flex-end;
  }

  /* La largeur minimale du nom (tables.css, .eh-cell-identity-text /
     .eh-col-name) n'a de sens qu'en tableau large, pour empêcher un nom
     court de casser sur plusieurs lignes faute de place. En mode carte
     empilée, chaque champ a déjà toute la largeur pour lui — imposer cette
     largeur minimale ici ferait déborder la ligne libellé/valeur sur les
     petits écrans. */
  .eh-table.eh-table-responsive-cards .eh-cell-identity-text,
  .eh-table.eh-table-responsive-cards td.eh-col-name,
  .eh-table.eh-table-responsive-cards th.eh-col-name,
  .eh-table.eh-table-responsive-cards a.eh-col-name {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Dashboard : cartes stat sur une colonne en très petit mobile
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .eh-stats-grid {
    grid-template-columns: 1fr;
  }

  .eh-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eh-progress-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .eh-progress-step {
    flex-direction: row;
    text-align: left;
  }

  .eh-progress-step::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Contenu : marges réduites en mobile
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .eh-content {
    padding: var(--eh-space-4);
  }

  .eh-topbar {
    padding: 0 var(--eh-space-4);
  }

  .eh-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .eh-page-header-actions {
    width: 100%;
  }

  .eh-page-header-actions .eh-btn {
    flex: 1;
  }

  /* Barre de recherche des cartes de liste (pilgrim_list, structure_list...) :
     empiler sous le titre plutôt que de déborder, .eh-card-header n'ayant
     pas de flex-wrap. */
  .eh-card-header {
    flex-wrap: wrap;
  }

  .eh-card-header .eh-topbar-search {
    min-width: 0;
    width: 100%;
  }

  /* Masquer les boutons 'Menu' et 'Panneau latéral' sur mobile */
  .eh-sidebar-toggle,
  .eh-filters-toggle {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Impression (utile pour les reçus / listes exportées)
   -------------------------------------------------------------------------- */

@media print {
  .eh-sidebar,
  .eh-topbar,
  .eh-app-footer,
  .eh-page-header-actions,
  .eh-form-actions,
  .eh-pagination,
  .eh-quick-actions {
    display: none !important;
  }

  .eh-shell {
    display: block;
  }

  .eh-content {
    padding: 0;
  }

  .eh-card,
  .eh-table-wrap {
    box-shadow: none;
    border-color: #000;
  }
}