/* ============================================================
   MOBILE PAGE BODIES (registrar)

   Every rule in this file sits inside @media (max-width: 767px), the
   breakpoint shared with mobile-shell.css (src/lib/mobile.js MOBILE_QUERY).
   Tablet (>= 768px) and desktop render exactly as before: nothing here
   applies to them, and the markup hooks the pages carry for it (m-cards,
   data-label, data-m, mobile-sticky-actions) have no styles outside it.

   Shell-owned pieces this file builds on, defined in mobile-shell.css:
   --m-tabbar-h / --m-topbar-h / --m-sticky-h, .mobile-sticky-actions,
   the bottom-sheet restyle of .modal and .dropdown-menu, .m-only/.m-hide.
   ============================================================ */

@media (max-width: 767px) {
  /* ---------- Page frame: no horizontal page scroll ---------- */
  .page-title,
  .page-subtitle,
  .page-content .mono {
    overflow-wrap: anywhere;
  }
  .page-content :is(img, video, canvas, iframe) {
    max-width: 100%;
  }
  .page-content :is(pre, code) {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* ---------- Fluid type ---------- */
  .page-title {
    font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.625rem);
  }
  .page-subtitle {
    font-size: var(--text-sm);
  }
  .page-header {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  /* Header actions wrap onto their own row instead of running off-screen. */
  .page-header-actions,
  .m-header-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
    width: 100%;
    gap: var(--space-2);
  }
  .page-header-actions > .btn,
  .m-header-actions > .btn {
    flex: 1 1 auto;
  }

  /* ---------- Touch targets + :active feedback ---------- */
  .page-content .btn,
  .modal .btn,
  .slide-panel .btn {
    min-height: 44px;
  }
  .page-content .btn-sm,
  .modal .btn-sm {
    min-height: 40px;
    padding-inline: var(--space-3);
  }
  .page-content .btn-icon {
    min-width: 44px;
  }
  .page-content :is(.btn, .tab-btn, .m-card-tap):active {
    transform: scale(0.98);
    filter: brightness(0.96);
  }
  .page-content input[type="checkbox"],
  .page-content input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* ---------- Forms: 16px inputs (no iOS focus zoom), full width ----------
     mobile-shell.css sets 16px globally; !important here also beats the
     inline font-size several page inputs carry (e.g. the expiry filters). */
  :is(.page-content, .modal, .slide-panel, .m-sheet)
    :is(.form-input, .form-select, .form-textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }
  :is(.page-content, .modal, .slide-panel) :is(.form-input, .form-select) {
    min-height: 44px;
  }
  .page-content .form-row,
  .page-content .form-row-3 {
    grid-template-columns: 1fr;
  }
  /* A focused field scrolls clear of the top bar and the bottom bars. */
  .page-content :is(input, select, textarea) {
    scroll-margin-top: calc(var(--nav-height, 56px) + var(--crumbs-height, 0px) + var(--space-4));
    scroll-margin-bottom: calc(var(--m-tabbar-h, 0px) + var(--m-sticky-h, 0px) + var(--space-6));
  }

  /* ---------- Tabs: one swipeable row, never wider than the screen ---------- */
  .page-content .tabs,
  .modal .tabs {
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
  }
  .page-content .tabs::-webkit-scrollbar {
    display: none;
  }
  .page-content .tab-btn {
    scroll-snap-align: start;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  /* ---------- Stepper: numbers only, current step keeps its label ---------- */
  .stepper {
    gap: var(--space-2);
    margin-bottom: var(--space-5);
  }
  .stepper-step {
    gap: var(--space-2);
    min-width: 0;
  }
  .stepper-step:not(.active) {
    flex: 0 0 auto;
  }
  .stepper-step.active {
    flex: 1 1 auto;
  }
  .stepper-step:not(.active) .stepper-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .stepper-step.active .stepper-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stepper-step:not(:last-child)::after {
    display: none;
  }

  /* ---------- Cards / panels ---------- */
  .page-content .card {
    border-radius: var(--radius-lg);
  }

  /* ---------- Tables -> stacked cards (table.m-cards) ----------
     Each row becomes a card. Cells carry data-label (shown as the field
     label) and an optional data-m role:
       data-m="check"    selection checkbox, top-left
       data-m="primary"  the row's title line (domain name, record name)
       data-m="status"   status chip, top-right
       data-m="actions"  row actions, bottom row, right-aligned
     Everything else is a label/value line, so nothing the desktop row shows
     is lost. */
  .table-container:has(> table.m-cards),
  .table-container:has(> div > table.m-cards) {
    overflow: visible;
    border: none;
    background: none;
    box-shadow: none;
  }
  table.m-cards,
  table.m-cards tbody {
    display: block;
    width: 100%;
    border: none;
  }
  table.m-cards thead {
    display: block;
    position: static !important;
  }
  table.m-cards thead tr {
    display: flex;
    border: none;
  }
  table.m-cards thead th {
    display: none;
  }
  /* A select-all checkbox survives as a compact "Select all" control. */
  table.m-cards thead th:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 0 var(--space-2) var(--space-1);
    border: none;
    background: none !important;
    width: auto !important;
  }
  table.m-cards thead th:has(> input[type="checkbox"])::after {
    content: attr(data-label);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
  }
  table.m-cards tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
  }
  table.m-cards tbody tr:hover {
    background: var(--bg-elevated);
  }
  table.m-cards tbody tr.selected {
    border-color: var(--accent-text);
    background: var(--accent-alpha);
  }
  table.m-cards td {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 3px 0;
    border: none;
    text-align: right !important;
    white-space: normal !important;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    width: auto !important;
    max-width: none !important;
  }
  table.m-cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 45%;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-tertiary);
  }
  table.m-cards td:not([data-label])::before,
  table.m-cards td[data-m]::before {
    content: none;
  }
  table.m-cards td:empty {
    display: none;
  }
  table.m-cards td[data-m="check"] {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    width: auto !important;
  }
  table.m-cards td[data-m="primary"] {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left !important;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
  }
  table.m-cards tr:not(:has(> td[data-m="check"])) td[data-m="primary"] {
    grid-column: 1 / 3;
  }
  table.m-cards td[data-m="status"] {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
  }
  table.m-cards tr:not(:has(> td[data-m="status"])) td[data-m="primary"] {
    grid-column-end: -1;
  }
  table.m-cards td[data-m="actions"] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
  }
  table.m-cards td[data-m="actions"] > :is(div, span) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  /* Empty-state / loading rows keep a plain full-width cell. */
  table.m-cards td[colspan] {
    justify-content: center;
    text-align: center !important;
  }
  table.m-cards td[colspan]::before {
    content: none;
  }
  /* Long names wrap inside the card instead of widening it. */
  table.m-cards td :is(.mono, bdi, code) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 767px) {
  /* Row kebab: top-right corner of the card. */
  table.m-cards td[data-m="kebab"] {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    padding: 0;
  }
  table.m-cards td[data-m="kebab"] .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
  table.m-cards tr:not(:has(> td[data-m="status"])):has(> td[data-m="kebab"]) td[data-m="primary"] {
    grid-column-end: 3;
  }
  /* Leading chip (DNS record type): same slot as the checkbox. */
  table.m-cards td[data-m="lead"] {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    width: auto !important;
  }
  table.m-cards tr:has(> td[data-m="lead"]) td[data-m="primary"] {
    grid-column-start: 2;
  }
  /* Full-width value with its label above (DNS record value). */
  table.m-cards td[data-m="block"] {
    display: block;
    max-width: none !important;
    text-align: left !important;
    word-break: break-all;
  }
  table.m-cards td[data-m="block"]::before {
    content: attr(data-label);
    display: block;
    max-width: none;
    margin-bottom: 2px;
  }
  /* A labelled line whose only child is an empty wrapper (no tags, say). */
  table.m-cards td:has(> :is(div, span):only-child:empty) {
    display: none;
  }
  /* Labelled line: label left, every value piece packed to the right and
     wrapping under itself (status chip + note + Renew). */
  table.m-cards td[data-label] {
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: var(--space-2);
  }
  table.m-cards td[data-label]::before {
    margin-right: auto;
  }
  table.m-cards td[data-label] .btn-sm {
    padding-inline: var(--space-3) !important;
  }
  table.m-cards td.domain-cell {
    padding-left: 0;
  }

  /* Portfolio insight rows: the name wraps, the figures never split. */
  .m-insight-row {
    gap: var(--space-3);
  }
  .m-insight-row > :first-child {
    min-width: 0;
    text-align: left;
    flex-wrap: wrap;
  }
  .m-insight-row > :last-child {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---------- Toolbars above card lists ---------- */
  .page-content .table-toolbar {
    position: static !important;
    padding: 0 0 var(--space-3);
    border: none;
    background: none !important;
  }
  /* A list with no card rows yet (its empty state) keeps the container's
     frame, so the toolbar keeps an inset inside it instead of riding the
     frame's edge. */
  .page-content .table-container:not(:has(table.m-cards)) > .table-toolbar {
    padding: var(--space-3) var(--space-3) 0;
  }
  .page-content .table-toolbar-left {
    flex-wrap: nowrap !important;
    width: 100%;
  }
  .page-content .table-toolbar-left > .input-with-icon,
  .page-content .table-toolbar-left > .search-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .page-content .table-toolbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .m-filter-btn {
    flex-shrink: 0;
    min-height: 44px;
  }

  /* ---------- Filter bottom sheet ---------- */
  .m-filter-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .m-filter-sheet :is(.form-select, .form-input) {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    padding: 10px var(--space-3) !important;
  }
  .m-filter-sheet .m-expiry-range {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-2) var(--space-3) !important;
  }
  .m-filter-sheet-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) 0 env(safe-area-inset-bottom);
    background: var(--bg-elevated);
  }
  .m-filter-sheet-actions .btn {
    flex: 1;
    min-height: 48px;
  }
  .m-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .m-chip {
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .m-chip[aria-pressed="true"] {
    border-color: var(--accent-text);
    background: var(--accent-alpha);
    color: var(--text-primary);
  }

  /* ---------- Bulk selection bar (fixed above the tab bar) ---------- */
  .m-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .m-bulk-bar .bulk-toolbar-count {
    width: 100%;
    font-size: var(--text-xs);
  }
  .m-bulk-bar .bulk-toolbar-actions {
    display: flex;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
  }
  .m-bulk-bar .bulk-toolbar-actions .form-select {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto !important;
    font-size: 16px !important;
  }
  .m-bulk-bar .bulk-toolbar-actions .btn {
    flex: 0 0 auto;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* Sort select standing in for hidden sortable headers (mobile-sort.js). */
  .m-sort {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .m-sort-label {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
  }
  .m-sort .form-select {
    flex: 1 1 auto;
    min-width: 0;
  }
  .m-filter-sheet .m-sort {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* Inline-styled multi-column grids (content + summary sidebar, option
     cards side by side) become one column. !important beats the inline
     grid-template-columns these containers carry for desktop. */
  .m-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }
  .m-stack > * {
    min-width: 0;
    width: 100%;
  }
  /* Inline-styled flex rows that must wrap instead of overflowing. */
  .m-wrap {
    flex-wrap: wrap !important;
    row-gap: var(--space-2) !important;
  }
  .m-wrap > * {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* Cards inside an already-framed panel (quote / summary boxes): divided
     rows instead of nested bordered cards. */
  table.m-cards-flat tbody tr {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    background: none;
  }
  table.m-cards-flat tbody tr:last-child {
    border-bottom: none;
  }
  .page-content td.font-mono,
  .page-content .font-mono {
    overflow-wrap: anywhere;
  }
  .page-content .card-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 767px) {
  /* Domain search result: name line (badges wrap under it), then the
     price and the Add to Cart / Reserve action on their own row. */
  .m-result-row {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }
  .m-result-row > :first-child {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    row-gap: var(--space-1) !important;
  }
  .m-result-row > :first-child .font-mono {
    flex: 1 1 100%;
    order: -1;
    overflow-wrap: anywhere;
  }
  .m-result-row > :last-child {
    flex: 1 1 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .m-result-row > :last-child .btn {
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* Register search: the field full width, the Search button full width
     under it (side by side, a 360px screen left "Search for a do…"). */
  .m-search-form {
    flex-direction: column;
    gap: var(--space-2) !important;
  }
  .m-search-form > .form-input {
    flex: none !important;
  }
  .m-search-form > .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  /* Total shown beside the primary button in a sticky checkout bar. */
  .m-sticky-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .m-sticky-total strong {
    font-size: var(--text-lg);
    color: var(--text-primary);
  }
  /* Buttons moved into a sticky bar drop the spacing they had in flow. */
  .mobile-sticky-actions > .btn {
    margin: 0 !important;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* Checkout (register step 3): the one-column grid's items may shrink below
     their content (the WHOIS select pushed the card past a 360px screen). */
  .checkout-layout > * {
    min-width: 0;
  }
  /* A long label in a sticky bar beside a total wraps inside its button
     instead of running out of it ("Proceed to Checkout" at 360px). */
  .mobile-sticky-actions > .btn {
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}