/* dash.metweb.co, 2026-10-26 (Amr: "that modal box needs to be much wider and more space for inputs, also watch out for how it would look at small mobile devices").
   The Manage DNS Records dialog asks for max-w-6xl, but the dialog component's own sm:max-w-lg wins above 640 px and holds it at 512 px, so the four
   inputs and the table were squeezed and cut off. Style-only fix, scoped to the one dialog that holds the #type and #ttl boxes; the compiled dash script is not changed.
   Desktop: wide dialog, 4 roomy columns. Tablet: 2 columns. Phone: 1 column, 16 px text (no iPhone zoom), full-width Add Record button, and each record shown as a small card. */
[data-slot="dialog-content"]:has(#type):has(#ttl) {
  width: min(1100px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem) !important;
}
[data-slot="dialog-content"]:has(#type):has(#ttl) #name,
[data-slot="dialog-content"]:has(#type):has(#ttl) #value,
[data-slot="dialog-content"]:has(#type):has(#ttl) #type,
[data-slot="dialog-content"]:has(#type):has(#ttl) #priority,
[data-slot="dialog-content"]:has(#type):has(#ttl) #ttl {
  height: 44px !important;
  min-height: 44px;
  font-size: 16px;
  width: 100%;
}
[data-slot="dialog-content"]:has(#type):has(#ttl) .grid + button {
  height: 44px;
  padding-left: 20px;
  padding-right: 20px;
}
/* records table: long values wrap instead of being cut at 300 px */
[data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table-cell"] {
  white-space: normal;
}
[data-slot="dialog-content"]:has(#type):has(#ttl) td.truncate {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}
[data-slot="dialog-content"]:has(#type):has(#ttl) td:nth-child(2) {
  word-break: break-word;
}
[data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] button {
  min-width: 40px;
  min-height: 40px;
}

/* wide screens: Type | Name | Value (twice as wide) | TTL */
@media (min-width: 900px) {
  [data-slot="dialog-content"]:has(#type):has(#ttl) .grid.md\:grid-cols-5 {
    grid-template-columns: 140px minmax(180px, 1fr) minmax(280px, 2fr) 160px;
    gap: 16px;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) .md\:col-span-2 {
    grid-column: span 1 / span 1;
  }
}

/* tablets: two columns, Value on its own full-width row */
@media (min-width: 640px) and (max-width: 899px) {
  [data-slot="dialog-content"]:has(#type):has(#ttl) .grid.md\:grid-cols-5 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) .md\:col-span-2 {
    grid-column: 1 / -1;
  }
}

/* phones: tighter padding, full-width button, each record as a card */
@media (max-width: 639px) {
  [data-slot="dialog-content"]:has(#type):has(#ttl) {
    padding: 16px;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) .p-6 {
    padding: 16px;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) .grid + button {
    width: 100%;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] thead {
    display: none;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"],
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] tbody {
    display: block;
    width: 100%;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "t n a" "v v v" "l l l";
    gap: 4px 12px;
    align-items: center;
    padding: 12px 12px;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td {
    display: block;
    padding: 0;
  }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td:nth-child(1) { grid-area: t; }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td:nth-child(2) { grid-area: n; }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td:nth-child(3) { grid-area: v; font-size: 13px; }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td:nth-child(4) { grid-area: l; font-size: 12px; color: #6b7280; }
  [data-slot="dialog-content"]:has(#type):has(#ttl) [data-slot="table"] td:nth-child(5) { grid-area: a; }
}