/**
 * Responsive commun - mobile, tablette, desktop
 * À charger après main.css et app-layout.css
 * Breakpoints: 360px, 480px, 600px, 768px, 1024px
 */

/* --- Base : éviter débordement horizontal --- */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
body.app-page,
body.dashboard-page,
body.depot-page,
body.legal-page,
body.nurse-dashboard {
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100vh;
}

/* --- Images et médias --- */
img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* --- Champs de formulaire --- */
input,
select,
textarea,
button {
  max-width: 100%;
}

/* --- Zones de contenu --- */
.app-inner,
.dashboard-inner,
.depot-inner,
.container-inner {
  max-width: 100%;
  padding-left: clamp(0.75rem, 4vw, 1.5rem);
  padding-right: clamp(0.75rem, 4vw, 1.5rem);
}

/* --- Header (app, site, dashboard, depot) --- */
.app-header-inner,
.site-header-content,
.dashboard-header-inner,
.depot-header-inner {
  flex-wrap: wrap;
  padding-left: clamp(0.75rem, 3vw, 1.5rem);
  padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

/* --- Grilles qui passent en 1 colonne --- */
@media (max-width: 768px) {
  .app-main,
  .dashboard-main,
  .depot-main,
  .lab-main {
    padding: 1.5rem clamp(0.75rem, 4vw, 1rem);
  }

  .app-title,
  .dashboard-title,
  .depot-title {
    font-size: clamp(1.15rem, 4vw, 1.35rem);
  }

  .app-card,
  .resident-form-card {
    padding: 1.25rem clamp(1rem, 4vw, 1.5rem);
  }
}

@media (max-width: 600px) {
  .auth-options-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .login-section {
    grid-template-columns: 1fr !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-buttons .btn,
  .action-buttons a {
    width: 100%;
  }
}

/* --- Très petit mobile (< 480px) --- */
@media (max-width: 480px) {
  .app-header,
  .site-header,
  .dashboard-header,
  .depot-header {
    padding: 0.75rem 1rem;
  }

  .app-brand span,
  .site-brand-name,
  .dashboard-brand span,
  .depot-brand span {
    font-size: clamp(1rem, 4.5vw, 1.2rem);
  }

  .app-brand img,
  .site-brand img,
  .dashboard-brand img,
  .depot-brand img {
    width: 38px;
    height: 38px;
  }

  .app-back,
  .dashboard-logout,
  .depot-back {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .app-footer,
  .dashboard-footer,
  .footer {
    padding: 1.5rem 1rem;
  }

  .app-footer-links,
  .dashboard-footer-links,
  .footer-links {
    flex-direction: column;
    gap: 0.75rem;
  }

  .app-footer-links a,
  .dashboard-footer-links a,
  .footer-links a {
    font-size: 0.875rem;
  }
}

/* --- Touch targets (accessibilité) --- */
@media (max-width: 768px) {
  .btn,
  .app-back,
  .dashboard-logout,
  .depot-back,
  .auth-option-btn,
  .dashboard-tab,
  .dashboard-action,
  .app-footer-links a,
  .dashboard-footer-links a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard-tab {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* --- Tablette (768–1024) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-inner,
  .dashboard-inner,
  .depot-inner {
    max-width: 90%;
  }
}

/* --- Desktop large --- */
@media (min-width: 1025px) {
  .app-inner {
    max-width: 900px;
  }

  .dashboard-inner,
  .depot-inner {
    max-width: 900px;
  }
}

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