/* Minimal reset — Tailwind CSS handles all layout and component styles via CDN.
   This file provides only the few overrides that Tailwind doesn't cover. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use the theme display face; body copy never inherits heading weight. */
h1, h2, h3, h4, h5, h6 { font-family: inherit; }
p, li, td, th, label, input, select, textarea, button { font-weight: inherit; }

/* Offline/CDN-blocked fallback. The Tailwind CDN injects its preflight AFTER this sheet, so
   these rules only apply when the CDN script fails to load (preview host without internet,
   ad-blocker). Without them the browser's UA styles take over and every heading renders as
   huge bold serif text ("Welcome back" in 2em bold) — the "whole site is bold and big" defect. */
h1 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3;  margin: 0 0 .5rem; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin: 0 0 .5rem; }
h4, h5, h6 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0 0 .5rem; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── Universal responsive guards ──────────────────────────────────────────────────
   Generated pages must never produce a horizontal page scrollbar. These rules make the
   most common offenders wrap or scroll locally instead of widening the document:
   fixed-width card rows, wide tables, long unbroken strings and oversized flex items. */
html, body { max-width: 100%; overflow-x: hidden; }
main { min-width: 0; }
main > * { max-width: 100%; }
/* Flex/grid children default to min-width:auto, which lets one wide card push the row
   past the viewport. Force them to shrink and let the row wrap instead. Dialog/modal
   header rows are excluded: wrapping them drops the close button under the title. */
main .flex:not(.flex-nowrap):not(.flex-col):not(dialog .flex):not([role="dialog"] .flex):not(.modal .flex) { flex-wrap: wrap; }
main .flex > *, main .grid > * { min-width: 0; }
/* ── Dialog / modal safety: viewport-bound, scrollable, close button on the right ── */
dialog, [role="dialog"], .modal-panel { box-sizing: border-box; max-width: min(100vw - 2rem, 64rem); max-height: 90vh; max-height: 90dvh; overflow: auto; }
dialog { width: min(92vw, 52rem); }
dialog:not([open]) { display: none; }
dialog > * { min-width: 0; max-width: 100%; }
dialog header, dialog .dialog-header, [role="dialog"] header,
dialog > div > div:first-child:has(> [data-dialog-close]),
[role="dialog"] > div > div:first-child:has(> [data-dialog-close]) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
dialog [data-dialog-close], [role="dialog"] [data-dialog-close], dialog .dialog-close, [role="dialog"] .dialog-close { margin-left: auto; flex: 0 0 auto; }
dialog img, [role="dialog"] img { max-width: 100%; height: auto; }
@media (max-width: 639px) {
  dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); }
  dialog [class*="grid-cols-"], [role="dialog"] [class*="grid-cols-"] { grid-template-columns: 1fr; }
}
/* A one-row grid with fixed column counts overflows on small screens; below the lg
   breakpoint collapse anything wider than two columns to an auto-fit grid. */
@media (max-width: 1023px) {
  main [class*="grid-cols-3"], main [class*="grid-cols-4"], main [class*="grid-cols-5"], main [class*="grid-cols-6"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}
@media (max-width: 639px) {
  main [class*="grid-cols-"] { grid-template-columns: 1fr; }
}
/* Tables scroll inside their own wrapper, never the page. */
main table { width: 100%; max-width: 100%; }
main .table-wrap, main .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Long tokens (URLs, ids, hashes) break instead of stretching their container. */
main p, main td, main th, main li, main dd, main span { overflow-wrap: anywhere; }
pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
/* Charts and iframes stay inside their card. */
canvas, iframe, embed, object { max-width: 100%; }

/* Validation summary styles (MVC default) */
.field-validation-error { color: #ef4444; font-size: 0.78rem; }
.input-validation-error { border-color: #ef4444 !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; color: #ef4444; font-size: 0.82rem; }
.validation-summary-valid { display: none; }

/* Page-load fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease both; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Shell containment: controls inside the content column never shrink into each other ── */
.dns-shell-main, .app-content { min-width: 0; max-width: 100%; }
.dns-shell-main > * { min-width: 0; }
.dns-shell-main .grid > *, .dns-shell-main .flex > * { min-width: 0; }
.dns-shell-main button, .dns-shell-main .btn, .dns-shell-main a[class*="px-"] { flex-shrink: 0; }
.dns-shell-main input, .dns-shell-main select, .dns-shell-main textarea { max-width: 100%; }
.dns-shell-main table { width: 100%; }
.dns-shell-main img, .dns-shell-main video, .dns-shell-main svg, .dns-shell-main canvas, .dns-shell-main iframe { max-width: 100%; }
/* Bare grid-cols-N without responsive prefixes collapse to auto-fit so cards wrap on narrow panes. */
.dns-shell-main .grid[class*="grid-cols-"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="grid-cols-1"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}