/* Time2Gether - Responsive Design */

/* Conteneur principal responsive */
body {
  max-width: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Ajustements pour les écrans moyens */
@media (max-width: 1200px) {
  body {
    max-width: 70%;
  }
}

/* Ajustements pour les tablettes */
@media (max-width: 768px) {
  body {
    max-width: 85%;
    padding: 0 10px;
  }
}

/* Ajustements pour les mobiles */
@media (max-width: 480px) {
  body {
    max-width: 95%;
    padding: 0 5px;
  }
}

/* Root container responsive */
#root {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Modals et overlays responsive */
.modal-overlay,
.modal-container,
[role='dialog'],
.react-native-modal,
.expo-modal {
  max-width: 60% !important;
  margin: 0 auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Ajustements modals pour écrans moyens */
@media (max-width: 1200px) {
  .modal-overlay,
  .modal-container,
  [role='dialog'],
  .react-native-modal,
  .expo-modal {
    max-width: 70% !important;
  }
}

/* Ajustements modals pour tablettes */
@media (max-width: 768px) {
  .modal-overlay,
  .modal-container,
  [role='dialog'],
  .react-native-modal,
  .expo-modal {
    max-width: 85% !important;
    margin: 0 10px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* Ajustements modals pour mobiles */
@media (max-width: 480px) {
  .modal-overlay,
  .modal-container,
  [role='dialog'],
  .react-native-modal,
  .expo-modal {
    max-width: 95% !important;
    margin: 0 5px !important;
  }
}

/* Conteneurs React Native Web */
div[data-testid],
div[class*='react-native'],
div[style*='flex'] {
  max-width: 100% !important;
}

/* Ajustements pour les listes et cartes */
.project-card,
.decision-card,
.proposal-card,
[class*='card'] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Scrollview responsive */
.scroll-view,
[class*='scroll'] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Navigation responsive */
.navigation-container,
.header-container,
[class*='navigation'],
[class*='header'] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Boutons et formulaires responsive */
button,
input,
select,
textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Images responsive */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* input */
input,
input[type='text'],
input[type='email'],
input[type='password'] {
  padding: 6px;
}