/* Cross-cutting responsive primitives shared by both public themes and the
   admin panel. Loaded by default/layout.html, idealista/layout.html and
   default/admin-layout.html so mobile behaviour is defined in one place.

   Specificity is what does the work here: `.rtable td` outranks the layouts'
   bare `td`/`tr`/`table` rules, so the mobile block needs no !important except
   for the handful of properties templates set inline (padding, max-width,
   white-space). */

/* ── Compact pagination (renderPagination) ──────────────────────── */
.pg-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:16px; padding-top:12px; border-top:1px solid #f1f3f5; }
.pg-count { font-size:13px; color:#888; }
.pg-links { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pg-step, .pg-page { padding:6px 10px; border:1px solid #dee2e6; border-radius:4px; font-size:13px; color:#555; text-decoration:none; }
.pg-step.is-disabled { border-color:#eee; color:#ccc; }
.pg-page.is-current { background:#0070f3; border-color:#0070f3; color:#fff; font-weight:600; }

/* ── Flex rows that must wrap ──────────────────────────────────── */
/* flex-wrap is never set inline in these templates, so a class is enough. */
.row-wrap { display:flex; flex-wrap:wrap; }
/* Horizontal tab strips that must never widen the page. */
.tab-row { display:flex; flex-wrap:wrap; }

@media (max-width: 768px) {
    /* Tables become stacked label/value cards. .diff-table is deliberately
       excluded — it stays tabular inside its own scrollable modal. */
    .rtable thead { display: none; }
    .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
    .rtable tr { border:1px solid #e9ecef; border-radius:8px; background:#fff; padding:8px 12px; margin-bottom:10px; }
    .rtable tbody tr:last-child { margin-bottom: 0; }
    .rtable td {
        display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px;
        width:auto !important; max-width:none !important;
        padding:5px 0 !important; border:none !important;
        text-align:left !important;
        vertical-align:top !important;
    }
    .rtable td, .rtable td * { white-space: normal !important; }
    /* A cell holds arbitrary markup (a title block, a state note, buttons).
       Letting each child shrink and wrap keeps the card inside the screen
       instead of pushing the cell wider than it. */
    .rtable td > * { min-width: 0; }
    .rtable td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-size:11px; font-weight:700; letter-spacing:.4px;
        text-transform:uppercase; color:#868e96;
    }
    .rtable td:not([data-label])::before,
    .rtable td[data-label=""]::before { display: none; }
    .rtable .actions-cell { flex-wrap: wrap; }

    /* Two-column list + detail panes (public + admin inquiries). The columns
       carry inline flex-basis/min-width/position, hence !important. */
    .split-pane { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; position: static !important; top: auto !important; }

    /* Rows of ad-hoc tabs (approvals / settings / listings / logs / email-log /
       account sub-tabs): wrap instead of overflowing. */
    .tab-row { flex-wrap: wrap; }
    .tab-row a { padding: 8px 12px !important; font-size: 13px !important; }

    /* Native controls carry intrinsic widths — a <select> is as wide as its
       widest option, an <input> as wide as its `size` — which on a phone push
       their row past the viewport. Cap them so they shrink to fit instead. */
    input, select, textarea { min-width: 0; max-width: 100%; }
    /* Same reason, one level up: these are often flex items themselves. */
    .row-wrap, .tab-row, .card, .table-wrapper { min-width: 0; }
}