/*
 * MODAL / POP-UP RESPONSIVENESS — 2026-10-24
 * Loaded by includes/head.php after app.css, so it reaches every page.
 * Covers (1) the app's own overlay modals (a "fixed inset-0 ... items-center justify-center" wrapper holding one card)
 * and (2) SweetAlert2 dialogs (.swal2-*), including forms/tables placed inside them.
 * Rules:
 *  - A pop-up never grows past the screen: the card scrolls vertically AND horizontally when its content is bigger,
 *    and the dark backdrop scrolls too (so nothing is cut off on short or narrow screens).
 *  - On phones (<= 640px) form grids and flex rows WRAP: a box that would be squeezed too small drops to the next line
 *    instead of shrinking or hiding. Text boxes keep a readable minimum width and 16px text (also stops iOS zoom-on-focus).
 *  - Wide tables inside a pop-up keep their natural width and scroll sideways.
 *  - The close (X) button stays pinned at the top while a long form scrolls.
 */


.fixed.inset-0.items-center.justify-center:not(#loadingOverlay),
#cbtEqModal {
  align-items: flex-start !important;      /* card centres itself with margin:auto, so a tall card is never cut off at the top */
  overflow: auto !important;               /* backdrop scrolls if the card is taller/wider than the screen */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) > div,
#cbtEqModal > div {
  margin: auto !important;
  min-width: 0;
  box-sizing: border-box;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;                          /* vertical + horizontal scroll bars when needed */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) > :where(div),
:where(#cbtEqModal) > :where(div) { max-width: 100%; }

.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) > div > button[class~="absolute"][class~="top-5"][class~="right-5"],
#cbtEqModal > div > button[class~="absolute"][class~="top-5"][class~="right-5"] {
  position: sticky !important;
  top: 0;
  right: auto;
  float: right;
  z-index: 5;
  width: 2rem;
  height: 2rem;
  margin: -.5rem -.5rem 0 .5rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 9999px;
  background: rgb(var(--c-paper-100));
}

:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) iframe,
:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) pre,
:where(#cbtEqModal) iframe,
:where(#cbtEqModal) pre,
:where(.swal2-html-container) iframe,
:where(.swal2-html-container) pre { max-width: 100%; }

.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) pre,
#cbtEqModal pre,
.swal2-html-container pre { overflow: auto; }

.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) h1,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) h2,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) h3,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) h4,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) p,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) label,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) li,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) dt,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) dd,
#cbtEqModal h1,
#cbtEqModal h2,
#cbtEqModal h3,
#cbtEqModal h4,
#cbtEqModal p,
#cbtEqModal label,
#cbtEqModal li,
#cbtEqModal dt,
#cbtEqModal dd,
.swal2-html-container h1,
.swal2-html-container h2,
.swal2-html-container h3,
.swal2-html-container h4,
.swal2-html-container p,
.swal2-html-container label,
.swal2-html-container li,
.swal2-html-container dt,
.swal2-html-container dd { overflow-wrap: anywhere; }

:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) select,
:where(.fixed.inset-0.items-center.justify-center:not(#loadingOverlay)) textarea,
:where(#cbtEqModal) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
:where(#cbtEqModal) select,
:where(#cbtEqModal) textarea,
:where(.swal2-html-container) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
:where(.swal2-html-container) select,
:where(.swal2-html-container) textarea {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay),
#cbtEqModal { padding: .5rem !important; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) > div,
#cbtEqModal > div { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) > div.p-8,
#cbtEqModal > div.p-8,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) > div.p-6,
#cbtEqModal > div.p-6 { padding: 1.25rem; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .grid,
#cbtEqModal .grid,
.swal2-html-container .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .grid > [class*="col-span-"],
#cbtEqModal .grid > [class*="col-span-"],
.swal2-html-container .grid > [class*="col-span-"] { grid-column: 1 / -1 !important; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex:not(.flex-col):not(.flex-col-reverse),
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .inline-flex:not(.flex-col),
#cbtEqModal .flex:not(.flex-col):not(.flex-col-reverse),
#cbtEqModal .inline-flex:not(.flex-col),
.swal2-html-container .flex:not(.flex-col):not(.flex-col-reverse),
.swal2-html-container .inline-flex:not(.flex-col) { flex-wrap: wrap; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > input:not([type=checkbox]):not([type=radio]),
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > select,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > textarea,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > .flex-1,
#cbtEqModal .flex > input:not([type=checkbox]):not([type=radio]),
#cbtEqModal .flex > select,
#cbtEqModal .flex > textarea,
#cbtEqModal .flex > .flex-1,
.swal2-html-container .flex > input:not([type=checkbox]):not([type=radio]),
.swal2-html-container .flex > select,
.swal2-html-container .flex > textarea,
.swal2-html-container .flex > .flex-1 { min-width: min(100%, 9.5rem); }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > input[type=checkbox],
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > input[type=radio],
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > i,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) .flex > svg,
#cbtEqModal .flex > input[type=checkbox],
#cbtEqModal .flex > input[type=radio],
#cbtEqModal .flex > i,
#cbtEqModal .flex > svg,
.swal2-html-container .flex > input[type=checkbox],
.swal2-html-container .flex > input[type=radio],
.swal2-html-container .flex > i,
.swal2-html-container .flex > svg { flex: none; }
.swal2-html-container [style*="display:flex"],
.swal2-html-container [style*="display: flex"] { flex-wrap: wrap; }
.swal2-html-container [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important; }
:where(.swal2-html-container) * { max-width: 100%; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) select,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) textarea,
#cbtEqModal input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
#cbtEqModal select,
#cbtEqModal textarea,
.swal2-html-container input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]),
.swal2-html-container select,
.swal2-html-container textarea {
  font-size: 16px;
  min-height: 2.5rem;
  min-width: min(100%, 7rem);
}
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) td input,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) th input,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) td select,
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) th select,
#cbtEqModal td input,
#cbtEqModal th input,
#cbtEqModal td select,
#cbtEqModal th select,
.swal2-html-container td input,
.swal2-html-container th input,
.swal2-html-container td select,
.swal2-html-container th select { min-width: 0; min-height: 0; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) input[type=checkbox],
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) input[type=radio],
#cbtEqModal input[type=checkbox],
#cbtEqModal input[type=radio],
.swal2-html-container input[type=checkbox],
.swal2-html-container input[type=radio] { min-width: 0; min-height: 0; width: 1.1rem; height: 1.1rem; }
.fixed.inset-0.items-center.justify-center:not(#loadingOverlay) table,
#cbtEqModal table,
.swal2-html-container table { min-width: max-content; max-width: none; }
}

/* SweetAlert2 shell */
.swal2-container { padding: .75rem !important; overflow-y: auto; }
.swal2-popup { max-width: 100% !important; box-sizing: border-box; }
.swal2-title { overflow-wrap: anywhere; }
.swal2-popup.swal2-show:not(.swal2-toast) {
  display: flex !important;                /* column: title / body / buttons, so only the body scrolls */
  flex-direction: column;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}
.swal2-popup.swal2-show:not(.swal2-toast) > * { flex-shrink: 0; }
.swal2-popup.swal2-show:not(.swal2-toast) > .swal2-html-container { flex: 1 1 auto; flex-shrink: 1; min-height: 0; }
.swal2-html-container {
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto !important;               /* long / wide content scrolls inside the dialog; title and buttons stay in view */
  overflow-wrap: anywhere;
}
.swal2-input, .swal2-textarea, .swal2-select { max-width: 100%; box-sizing: border-box; }
.swal2-actions { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) {
  .swal2-popup { padding-left: .25rem; padding-right: .25rem; }
  .swal2-html-container { margin-left: .75rem; margin-right: .75rem; }
  .swal2-input, .swal2-textarea, .swal2-select { margin-left: .75rem; margin-right: .75rem; width: calc(100% - 1.5rem); font-size: 16px; }
  .swal2-actions button { min-height: 2.5rem; }
}
@media print { .swal2-container { display: none !important; } }