/**
 * Modal Responsive CSS
 * Tüm modal ve popup'lar için merkezi responsive stiller
 * Bu dosyayı base template'e ekleyin: {% static 'css/modal-responsive.css' %}
 */

/* ===========================================
   BASE MODAL OVERLAY STYLES
   =========================================== */

/* 
 * NOT: Modal'ların display durumu Tailwind'in hidden/flex class'ları 
 * tarafından yönetilir. Bu CSS sadece responsive stiller ekler,
 * display durumunu değiştirmez.
 */

/* Modal açıkken ek stiller (display değil, diğer özellikler) */
.modal-overlay:not(.hidden),
[id$="-modal"]:not(.hidden),
[id$="Modal"]:not(.hidden) {
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===========================================
   MODAL CONTENT BOX STYLES
   =========================================== */

/* Modal content box - maksimum genişlik ve yükseklik */
.modal-content,
.modal-overlay > div:first-child,
[id$="-modal"] > div:first-child,
[id$="Modal"] > div:first-child,
[id$="-modal"] > .flex > div,
[id$="Modal"] > .flex > div {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem); /* Dynamic viewport height for mobile */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===========================================
   MOBILE RESPONSIVE OVERRIDES (< 640px)
   =========================================== */

@media (max-width: 639px) {
  /* Modal overlay - mobilde tam ekran padding azalt */
  .modal-overlay,
  [id$="-modal"],
  [id$="Modal"] {
    padding: 0.5rem;
  }

  /* Modal content - mobilde genişlik ayarları */
  .modal-content,
  .modal-overlay > div:first-child,
  [id$="-modal"] > div:first-child,
  [id$="Modal"] > div:first-child,
  [id$="-modal"] > .flex > div,
  [id$="Modal"] > .flex > div,
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl,
  .max-w-5xl {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  /* Modal yükseklik - mobilde scroll için */
  .modal-content,
  .modal-overlay > div:first-child,
  [id$="-modal"] > div:first-child,
  [id$="Modal"] > div:first-child {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  /* Grid düzeltmeleri - mobilde tek kolon */
  .modal-content .grid-cols-2,
  .modal-content .grid-cols-3,
  .modal-content .grid-cols-4,
  [id$="-modal"] .grid-cols-2,
  [id$="-modal"] .grid-cols-3,
  [id$="-modal"] .grid-cols-4,
  [id$="Modal"] .grid-cols-2,
  [id$="Modal"] .grid-cols-3,
  [id$="Modal"] .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* col-span düzeltmeleri */
  .modal-content .col-span-2,
  .modal-content .col-span-3,
  .modal-content .col-span-4,
  [id$="-modal"] .col-span-2,
  [id$="-modal"] .col-span-3,
  [id$="-modal"] .col-span-4,
  [id$="Modal"] .col-span-2,
  [id$="Modal"] .col-span-3,
  [id$="Modal"] .col-span-4 {
    grid-column: span 1 / span 1 !important;
  }

  /* Padding küçültme */
  .modal-content .p-6,
  [id$="-modal"] .p-6,
  [id$="Modal"] .p-6 {
    padding: 1rem !important;
  }

  .modal-content .px-6,
  [id$="-modal"] .px-6,
  [id$="Modal"] .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .modal-content .py-4,
  [id$="-modal"] .py-4,
  [id$="Modal"] .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Gap küçültme */
  .modal-content .gap-4,
  [id$="-modal"] .gap-4,
  [id$="Modal"] .gap-4 {
    gap: 0.75rem !important;
  }

  /* Buton grupları - mobilde stack */
  .modal-content .flex.gap-2,
  .modal-content .flex.space-x-2,
  .modal-content .flex.space-x-3,
  [id$="-modal"] .flex.gap-2,
  [id$="-modal"] .flex.space-x-2,
  [id$="-modal"] .flex.space-x-3,
  [id$="Modal"] .flex.gap-2,
  [id$="Modal"] .flex.space-x-2,
  [id$="Modal"] .flex.space-x-3 {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Butonlar mobilde tam genişlik */
  .modal-content .flex.gap-2 > button,
  .modal-content .flex.space-x-2 > button,
  .modal-content .flex.space-x-3 > button,
  [id$="-modal"] .flex.gap-2 > button,
  [id$="-modal"] .flex.space-x-2 > button,
  [id$="-modal"] .flex.space-x-3 > button,
  [id$="Modal"] .flex.gap-2 > button,
  [id$="Modal"] .flex.space-x-2 > button,
  [id$="Modal"] .flex.space-x-3 > button {
    width: 100%;
  }

  /* Modal header başlık font boyutu */
  .modal-content h3,
  [id$="-modal"] h3,
  [id$="Modal"] h3 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* Input ve select font boyutu - iOS zoom engelleme */
  .modal-content input,
  .modal-content select,
  .modal-content textarea,
  [id$="-modal"] input,
  [id$="-modal"] select,
  [id$="-modal"] textarea,
  [id$="Modal"] input,
  [id$="Modal"] select,
  [id$="Modal"] textarea {
    font-size: 16px !important; /* iOS için zoom engellemek için minimum 16px */
  }

  /* Flex row -> column mobilde */
  .modal-content .flex-row,
  [id$="-modal"] .flex-row,
  [id$="Modal"] .flex-row {
    flex-direction: column;
  }

  /* Space-x sıfırla mobilde */
  .modal-content .space-x-2 > *,
  .modal-content .space-x-3 > *,
  .modal-content .space-x-4 > *,
  [id$="-modal"] .space-x-2 > *,
  [id$="-modal"] .space-x-3 > *,
  [id$="-modal"] .space-x-4 > *,
  [id$="Modal"] .space-x-2 > *,
  [id$="Modal"] .space-x-3 > *,
  [id$="Modal"] .space-x-4 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Justify-between için mobil düzenleme */
  .modal-content .justify-between,
  [id$="-modal"] .justify-between,
  [id$="Modal"] .justify-between {
    justify-content: flex-start;
    gap: 0.5rem;
  }
}

/* ===========================================
   SMALL MOBILE (< 375px)
   =========================================== */

@media (max-width: 374px) {
  .modal-overlay,
  [id$="-modal"],
  [id$="Modal"] {
    padding: 0.25rem;
  }

  .modal-content .p-4,
  [id$="-modal"] .p-4,
  [id$="Modal"] .p-4 {
    padding: 0.5rem !important;
  }

  .modal-content .text-lg,
  [id$="-modal"] .text-lg,
  [id$="Modal"] .text-lg {
    font-size: 0.875rem;
  }

  .modal-content button,
  [id$="-modal"] button,
  [id$="Modal"] button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
  }
}

/* ===========================================
   TABLET (640px - 1023px)
   =========================================== */

@media (min-width: 640px) and (max-width: 1023px) {
  /* Grid 2 kolonlu kalabilir */
  .modal-content .grid-cols-3,
  .modal-content .grid-cols-4,
  [id$="-modal"] .grid-cols-3,
  [id$="-modal"] .grid-cols-4,
  [id$="Modal"] .grid-cols-3,
  [id$="Modal"] .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===========================================
   BOTTOM SHEET MODAL (Optional - Mobil için)
   =========================================== */

/* Mobilde bottom sheet tarzı modal isteyenler için */
@media (max-width: 639px) {
  .modal-bottom-sheet,
  .modal-as-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-bottom-sheet > div:first-child,
  .modal-as-sheet > div:first-child {
    border-radius: 1rem 1rem 0 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    width: 100% !important;
    animation: slideUp 0.3s ease-out;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* ===========================================
   FULLSCREEN MODAL (Mobile)
   =========================================== */

@media (max-width: 639px) {
  .modal-fullscreen-mobile,
  .modal-full-mobile {
    padding: 0 !important;
  }

  .modal-fullscreen-mobile > div:first-child,
  .modal-full-mobile > div:first-child {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* ===========================================
   SAFE AREA (Notch/Home indicator)
   =========================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  .modal-overlay,
  [id$="-modal"],
  [id$="Modal"] {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  @media (max-width: 639px) {
    .modal-bottom-sheet > div:first-child,
    .modal-as-sheet > div:first-child {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
  }
}

/* ===========================================
   UTILITIES
   =========================================== */

/* Modal açıkken body scroll engelleme için helper class */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Smooth scroll for modal content */
.modal-scroll-smooth {
  scroll-behavior: smooth;
}

/* Touch scrolling improvement */
.modal-touch-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}