/* Couche responsive commune, chargée après les styles historiques. */
html { min-height: 100%; }
body {
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }

.app-content {
  width: min(100% - 32px, 1100px);
  max-width: 100%;
  margin: 72px auto 24px;
  padding: clamp(12px, 2.5vw, 24px);
  overflow-wrap: anywhere;
}
.table-responsive-app { width: 100%; max-width: 100%; }
.table-responsive-app > table { width: 100%; }
.recap-container.app-content { width: min(100% - 32px, 500px); max-width: 500px; }
.backup-container.app-content { width: min(100% - 32px, 400px); max-width: 400px; }
.users-container.app-content { width: min(100% - 32px, 1000px); max-width: 1000px; }

/* Navigation */
.menu-hamburger {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
}
.menu-toggle {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
}
#slideMenu {
  width: min(80vw, 320px);
  max-width: 320px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2002;
}
#slideMenu .menu-links { min-height: min-content; }
#slideMenu a, #slideMenu .menu-email, #slideMenu .menu-email a {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.menu-overlay {
  position: fixed;
  inset: 0;
  display: block;
  visibility: hidden;
  opacity: 0;
  border: 0;
  background: rgba(0, 0, 0, .45);
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 2000;
}
.menu-overlay.open { visibility: visible; opacity: 1; }
body.menu-open { overflow: hidden; }

/* Formulaires */
input, select, textarea, button { max-width: 100%; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="file"], select, textarea {
  box-sizing: border-box;
}
input[type="file"] {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modales personnalisées et Bootstrap */
.synthese-modal-dialog, .ajout-modal-dialog, .modal-options-content,
.login-modal-content, .users-modal > .modal-content, .closedep-modal,
.modal-modifier .modal-dialog {
  width: min(100% - 24px, 900px);
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-width: 0 !important;
}
.synthese-modal-content, .ajout-modal-content, .modal-options-content,
.login-modal-content, .users-modal > .modal-content, .closedep-modal,
.modal-modifier .modal-content {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-dialog { max-width: calc(100vw - 24px); margin: 12px auto; }
.modal-content {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
.modal-body { min-height: 0; overflow-y: auto; }

/* Dashboard */
.calendar-container { width: min(90%, 1000px); }
.calendrier {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.trimestre { display: contents; }
.mois-item {
  width: 100%;
  max-width: 220px;
  min-height: 130px;
  height: auto;
  margin: 0 auto;
}
.navigation h2 { min-width: 0; overflow-wrap: anywhere; }

/* Gantt : timeline complète, scroll local. */
#gantt-container {
  display: block !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}
#gantt {
  display: inline-block !important;
  min-width: max-content;
  vertical-align: top;
}
#gantt svg { max-width: none; }
#gantt-vue-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#gantt-vue-btns button { min-height: 44px; margin: 0; }

/* MonthPicker */
.ui-monthpicker, #ui-monthpicker-div, .ui-datepicker {
  width: min(425px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
}
.ui-monthpicker table, .month-picker-month-table, #MonthPicker_date_debut {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}
.ui-monthpicker td, .ui-monthpicker th, .month-picker-month-table td,
.month-picker-month-table .ui-button {
  width: auto !important;
  min-width: 0 !important;
}
.month-picker-month-table .ui-button {
  min-height: 40px;
  padding-inline: 4px;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .table-responsive-app {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .calendrier {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .app-content { width: min(100% - 28px, 1000px); }
}

@media (max-width: 768px) {
  body { padding: 68px 8px 16px; overflow-x: clip; }
  .app-content { width: 100%; margin: 0 auto 16px; padding: 14px; }
  .calendar-container, .login-container, .reset-container,
  .activation-container, .inscription-admin-wrapper, .mdp-wrap,
  .close-wrapper, .closedep-modal {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 16px;
  }
  .calendrier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mois-item { max-width: none; min-height: 112px; }
  .navigation { gap: 6px; }
  .navigation h2 { white-space: normal; line-height: 1.15; }
  .navigation .btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { width: 100%; }
  button, input[type="submit"], .btn, .backup-btn, .closedep-btn,
  .ajout-btn, .users-btn-add { min-height: 44px; }
  .table-responsive-app {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .recap-container, .users-container, .backup-container {
    margin: 0 auto 16px !important;
  }
  .recap-table { min-width: 440px; }
  .recap-table th, .recap-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .synthese-table td {
    display: grid !important;
    grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px !important;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .synthese-table td::before {
    position: static !important;
    transform: none !important;
    align-self: center;
  }
  .users-table td > span, .users-table td > div, .users-table td > code {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .users-actions { justify-content: flex-end; flex-wrap: wrap; }
  .backup-form input[type="file"], .backup-form .backup-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
  }
  .synthese-modal, .modal-options, .users-modal, .login-modal, .ajout-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }
  .synthese-modal {
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto;
  }
  .synthese-modal-dialog, .ajout-modal-dialog, .modal-options-content,
  .login-modal-content, .users-modal > .modal-content, .closedep-modal,
  .modal-modifier .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  #gantt-container, .gantt-wrapper, #gantt { display: block !important; }
  .header-wrapper { width: 100%; margin-top: 0; padding: 0; }
  #slideMenu a[href="vue.php"],
  #slideMenu a[href="backup_restore.php"] { display: block !important; }
}

@media (max-width: 480px) {
  body { padding-inline: 6px; }
  .calendrier { grid-template-columns: minmax(0, 1fr); }
  .mois-item { min-height: 104px; }
  .navigation h2 { font-size: clamp(1rem, 6vw, 1.35rem); }
  #gantt-vue-btns { flex-direction: column; align-items: stretch; }
  #gantt-vue-btns button { width: 100%; }
  .closedep-buttons, .ajout-modal-footer, .users-modal .form-actions,
  .btn-container { flex-direction: column; align-items: stretch; }
  .closedep-buttons > *, .ajout-modal-footer > *,
  .users-modal .form-actions > *, .btn-container > * {
    width: 100%;
    margin-inline: 0;
  }
  .synthese-table td {
    grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
  }
}

@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
}

/* Les pages d’authentification courtes restent centrées sur grand écran. */
@media (min-width: 769px) {
  body:has(> .login-container),
  body:has(> .activation-container),
  body:has(> .inscription-admin-wrapper),
  body:has(> .reset-container),
  body:has(> .mdp-wrap) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
  }
}