/**
 * Dialog shadcn/Radix: w bundlu jest max-w-lg + sm:max-w-[400px] — to ucina szerokość.
 * Ładować PO index-*.css. !important + media 640px nadpisuje Tailwind.
 */

[data-radix-dialog-content],
[data-radix-dialog-content][class*="max-w-lg"],
[data-radix-dialog-content][class*="max-w-"] {
  box-sizing: border-box !important;
  width: min(96vw, 52rem) !important;
  max-width: min(96vw, 52rem) !important;
  min-width: 0 !important;
  max-height: min(90vh, 900px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Dokładnie to, co daje wąski modal: sm:max-w-[400px] */
@media (min-width: 640px) {
  [data-radix-dialog-content],
  [data-radix-dialog-content][class*="max-w-lg"],
  [data-radix-dialog-content][class*="sm:max-w"] {
    width: min(90vw, 56rem) !important;
    max-width: min(90vw, 56rem) !important;
  }
}

@media (min-width: 1024px) {
  [data-radix-dialog-content] {
    width: min(88vw, 60rem) !important;
    max-width: min(88vw, 60rem) !important;
  }
}

/*
 * Długa nazwa pliku: w flexie domyślne min-width:auto nie pozwala zawijać — modal się rozjeżdża.
 * Wymuszamy min-width:0 + łamanie tekstu tylko wewnątrz modala.
 */
[data-radix-dialog-content] .flex {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

[data-radix-dialog-content] .flex > *:not(svg) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-radix-dialog-content] .flex > svg {
  flex-shrink: 0 !important;
}

[data-radix-dialog-content] .grid {
  min-width: 0 !important;
  max-width: 100% !important;
}

[data-radix-dialog-content] p,
[data-radix-dialog-content] span,
[data-radix-dialog-content] label {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
}