/**
 * RESPONSIVE UNIVERSEL — couche finale ETS AAD
 * Mobile · iOS · Android · tablette · PWA
 * Chargé en dernier pour couvrir tous les modules.
 */

:root {
  --app-vh: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
}

@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: var(--app-vh);
}

/* Hauteur viewport iOS (barre d’adresse dynamique) */
.app-container,
.dash-shell,
.page-container,
.page-login .login-container {
  min-height: var(--app-vh);
}

/* =============================================================================
   MOBILE + TABLETTE (≤991px) — reset shell universel
   ============================================================================= */

@media (max-width: 991px) {
  body:not(.page-login) .main-content,
  body:not(.page-login) main.main-content,
  body:not(.page-login) .app-container > .main-content,
  body:not(.page-login) .page-container,
  body:not(.page-login) .dashboard-container,
  body:not(.page-login) .form-container,
  body:not(.page-login) .dash-shell,
  body:not(.page-login) .dash-body,
  body:not(.page-login) [class$="-dash"],
  body:not(.page-login) [class*="-dash"],
  body:not(.page-login) .sim-new-page,
  body:not(.page-login) .simulation-new-page,
  body:not(.page-login) .users-list-dash,
  body:not(.page-login) .roles-list-dash,
  body:not(.page-login) .role-detail-dash,
  body:not(.page-login) .veille-pro,
  body:not(.page-login) .mpa-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.page-login) .main-content,
  body:not(.page-login) main.main-content {
    margin-top: calc(56px + var(--safe-top)) !important;
    padding: max(0.75rem, var(--safe-left)) max(0.75rem, var(--safe-right)) max(1rem, var(--safe-bottom)) !important;
  }

  body:not(.page-login) .top-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: var(--safe-top) !important;
    padding-left: max(0.75rem, var(--safe-left)) !important;
    padding-right: max(0.75rem, var(--safe-right)) !important;
    height: calc(56px + var(--safe-top)) !important;
    min-height: calc(56px + var(--safe-top)) !important;
  }

  body:not(.page-login) .footer-hl {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: max(0.5rem, var(--safe-bottom)) !important;
  }

  body:not(.page-login) .dash-masthead,
  body:not(.page-login) .sim-masthead,
  body:not(.page-login) .page-header-hl {
    padding-left: max(1rem, var(--safe-left)) !important;
    padding-right: max(1rem, var(--safe-right)) !important;
  }

  body:not(.page-login) .card-hl,
  body:not(.page-login) .dash-panel,
  body:not(.page-login) .form-hl {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Grilles Bootstrap — empiler sauf explicitement non */
  body:not(.page-login) .row:not(.row-cols-auto):not(.g-0) > [class*="col-md-"],
  body:not(.page-login) .row:not(.row-cols-auto):not(.g-0) > [class*="col-lg-"],
  body:not(.page-login) .row:not(.row-cols-auto):not(.g-0) > [class*="col-xl-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tableaux scrollables tactiles */
  .table-responsive,
  .table-hl,
  .dash-table,
  .items-table,
  .table-scroll-wrap,
  .fn-table-wrap,
  .veille-pro .table-responsive,
  .mpa-table-scroll {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  table {
    max-width: none;
  }

  .table-hl table,
  .dash-table,
  .items-table,
  table.dash-table {
    min-width: min(100%, 520px);
  }

  /* Actions / toolbars */
  .dash-masthead-actions,
  .page-header-actions,
  .sim-masthead-actions,
  .roles-toolbar,
  .users-region-form,
  .roles-filters-form,
  .fn-actions,
  .fqe-actions {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 0.5rem !important;
  }

  .dash-masthead-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dash-masthead-actions {
    justify-content: flex-start !important;
  }

  /* Modales */
  .modal-dialog {
    margin: 0.75rem auto !important;
    max-width: calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)) !important;
  }

  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    margin: 0;
  }

  /* Dropdowns tactiles */
  .dropdown-menu {
    max-width: min(calc(100vw - 2rem), 22rem);
  }

  /* Cibles tactiles */
  a,
  button,
  .btn,
  .btn-hl,
  .menu-item,
  .menu-subitem,
  input[type="checkbox"],
  input[type="radio"],
  select,
  .form-check-label {
    min-height: var(--touch-min);
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 1.25rem;
    min-height: 1.25rem;
  }

  /* iOS : éviter zoom auto sur focus */
  input,
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }

  /* Texte long */
  td,
  th,
  .card-hl,
  .dash-panel,
  pre,
  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
  }
}

/* =============================================================================
   TABLETTE (769px – 1024px)
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  body:not(.page-login) .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.page-login) .dash-mod-grid,
  body:not(.page-login) .roles-grid,
  body:not(.page-login) .sim-new-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.page-login) .main-content {
    padding-left: max(1.25rem, var(--safe-left)) !important;
    padding-right: max(1.25rem, var(--safe-right)) !important;
  }
}

/* =============================================================================
   PETIT MOBILE (≤480px)
   ============================================================================= */

@media (max-width: 480px) {
  body:not(.page-login) .dash-kpi-grid,
  body:not(.page-login) .dash-mod-grid,
  body:not(.page-login) .roles-grid,
  body:not(.page-login) .sim-new-templates,
  body:not(.page-login) .role-metrics,
  body:not(.page-login) .info-grid {
    grid-template-columns: 1fr !important;
  }

  .dash-masthead h1,
  .page-title-hl {
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }

  .user-menu .dropdown-toggle span,
  .region-badge-header span {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =============================================================================
   PAYSAGE MOBILE — hauteur réduite
   ============================================================================= */

@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
  body:not(.page-login) .sidebar {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .dash-masthead {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* =============================================================================
   PWA — safe areas
   ============================================================================= */

.pwa-install-banner {
  bottom: max(1rem, var(--safe-bottom)) !important;
  left: max(1rem, var(--safe-left)) !important;
  right: max(1rem, var(--safe-right)) !important;
  transform: none !important;
  max-width: none !important;
  width: auto !important;
}

/* Desktop : ne pas masquer le menu latéral */
@media (min-width: 992px) {
  body:not(.page-login) .pwa-install-banner {
    left: calc(var(--sidebar-width, 260px) + 1rem) !important;
    right: auto !important;
    max-width: min(28rem, calc(100vw - var(--sidebar-width, 260px) - 2rem)) !important;
  }
}

.pwa-update-toast {
  bottom: max(1rem, var(--safe-bottom)) !important;
  right: max(1rem, var(--safe-right)) !important;
}

/* Mode standalone iOS / PWA */
@media (display-mode: standalone) {
  body:not(.page-login) .top-header {
    padding-top: var(--safe-top) !important;
  }
}

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}