/* ============================================================
   RESPONSIVE LAYER — loaded after every role stylesheet.
   One place for the rules that make the cabinet work from a 360px phone
   to a 1280px MacBook to a 1920px monitor. Page stylesheets keep their own
   small tweaks; anything shared by all roles lives here.

   Breakpoints used across the app:
     ≤ 480  small phone     ≤ 720  phone     ≤ 960  tablet / drawer nav
   Laptop widths (1280–1512) are not breakpoints: the top bar measures
   itself (js/responsive.js → html.nav-l1…l4) and tables stack by their own
   box width, so neither depends on the role or the UI language.
   ============================================================ */

/* ---- 1. Shell: real viewport height on mobile browsers --------------
   100vh on iOS Safari / Chrome Android includes the collapsing address bar,
   so the bottom of every page (pagination, modal footers) hid under it. */
.app-shell { height: 100vh; height: 100dvh; }
.drawer { height: 100vh; height: 100dvh; }
.glass-modal { max-height: calc(100dvh - 24px); }
@media (max-height: 700px) { .glass-modal { max-height: 100dvh; } }
.modal { max-height: 90dvh; }
.main { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }

/* Long unbroken values (hashes, UTR, e-mails, URLs) wrap instead of
   pushing their container wider than the screen. */
.main { overflow-wrap: break-word; }
.main :where(code, .mono, .text-mono, .pg-table-mono) { overflow-wrap: anywhere; }
/* …but not for an ID column of a regular table: there "anywhere" lets the
   layout squeeze the ID to one character per line. ID cells and badges stay on
   one line; long values (paths, requisites, cells marked wide) keep wrapping. */
.pg-table:not(.rt--stacked) td.pg-table-mono:not([data-cell="wide"]),
.pg-table:not(.rt--stacked) .badge { overflow-wrap: normal; white-space: nowrap; }

/* Blazor focuses the page heading after navigation; no ring for mouse/touch. */
h1:focus:not(:focus-visible), [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---- 2. Top bar: fit levels (set by js/responsive.js) --------------- */
/* The pill labels used to shrink to 12px below 1200px; the fit levels
   below replace that fixed step. */
@media (max-width: 1200px) {
    .topbar__pill .nav-item { padding: 9px 18px; font-size: 14px; }
    .topbar__pill { padding: 5px; }
}

/* Set only while js/responsive.js measures the bar */
html.nav-measuring .topbar,
html.nav-measuring .topbar * { transition: none !important; }

/* L1 — tighter spacing everywhere in the bar */
html.nav-l1 .topbar { padding-left: 20px; padding-right: 20px; }
html.nav-l1 .topbar__brand { gap: 10px; }
html.nav-l1 .topbar__logo-wrap,
html.nav-l1 .topbar__logo { width: 42px; height: 42px; }
html.nav-l1 .topbar__title { font-size: 20px; letter-spacing: 0.2em; }
html.nav-l1 .topbar__pill { padding: 4px; }
html.nav-l1 .topbar__pill .nav-item { padding: 8px 13px; font-size: 13.5px; }
html.nav-l1 .topbar__right { gap: 8px; }
html.nav-l1 .topbar__icon-btn:not(.topbar__geo-btn),
html.nav-l1 .topbar__theme-toggle { width: 36px; height: 36px; font-size: 14px; }
html.nav-l1 .lang-switch__btn { height: 36px; padding: 0 10px; }
html.nav-l1 .topbar__avatar { width: 36px; height: 36px; }
html.nav-l1 .topbar__counter { height: 30px; padding: 0 10px; }

/* L2 — low-frequency utilities (docs, language, theme, settings) leave the
   bar; the account menu shows them instead (.pop__compact). */
html.nav-l2 .topbar__right > a.topbar__icon-btn,
html.nav-l2 .topbar__right > .topbar__theme-toggle,
html.nav-l2 .topbar__right > .lang-switch { display: none; }
.pop__compact { display: none; }
html.nav-l2 .pop__compact { display: block; }

/* L3 — logo only */
html.nav-l3 .topbar__title { display: none; }

/* L4 — the menu moves into the burger drawer */
html.nav-l4 .topbar__burger { display: inline-flex; }
html.nav-l4 .topbar__pill { display: none; }
html.nav-l4 .mobile-nav__backdrop,
html.nav-l4 .mobile-nav { display: flex; }
html.nav-l4 .topbar__burger { margin-right: 4px; }

/* Account menu: compact utilities block */
.pop { width: 240px; max-width: calc(100vw - 24px); }
.pop__item { text-align: left; justify-content: flex-start; white-space: nowrap; }
.pop__langs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px; padding: 4px var(--space-2) var(--space-2);
}
.pop__lang {
    height: 32px; border-radius: var(--radius-md);
    border: 1px solid var(--color-border); background: transparent;
    font-family: var(--font-family); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pop__lang:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pop__lang.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
[data-theme="light"] .pop__lang.is-active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
/* Drawer footer reuses the segmented language control */
.mobile-nav__langs { padding: 0; }
.mobile-nav__langs .pop__lang { height: 40px; border-radius: 10px; font-size: 13px; }
a.pop__item { text-decoration: none; }
a.pop__item:hover { text-decoration: none; }

/* Pop-overs never wider than the screen */
.notif-pop { max-width: calc(100vw - 16px); }
.notif-pop-body { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }

/* ---- 3. Page gutters --------------------------------------------------
   The old mobile rules went down to 8px — text touched the screen edge. */
@media (max-width: 1280px) {
    .main { padding: var(--space-6); }
}
@media (max-width: 960px) {
    .main { padding: 16px 20px !important; }
}
@media (max-width: 720px) {
    .main { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 380px) {
    .main { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- 4. Forms on touch screens ---------------------------------------
   iOS Safari zooms the page when a focused field's text is under 16px and
   never zooms back. 16px on touch devices removes the jump. */
@media (max-width: 960px) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea { font-size: 16px !important; }
}

/* ---- 5. Page header + toolbars wrap instead of overflowing ------------ */
.pg-header { flex-wrap: wrap; gap: var(--space-3); }
.pg-header > * { min-width: 0; }
.pg-header-right { flex-wrap: wrap; }
.pg-toolbar { flex-wrap: wrap; }
.pg-toolbar > * { min-width: 0; }
@media (max-width: 720px) {
    .pg-header { align-items: flex-start; }
    .pg-header-right { width: 100%; }
    .pg-header-right > .btn { flex: 1 1 auto; }
}

/* ---- 6. KPI tiles: two per row on phones, compact ---------------------
   One tile per row made the first screen of every list page a column of
   four big boxes before any data. */
@media (max-width: 720px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; margin-bottom: var(--space-4); }
    .kpi-tile-ext { min-height: 0; padding: 12px; gap: 6px; }
    .kpi-tile-ext-value { font-size: 20px; }
    .kpi-tile-ext-icon-wrap { width: 24px; height: 24px; border-radius: 7px; }
    .kpi-tile-ext-icon { font-size: 11px; }
    .kpi-tile-ext:hover { transform: none; }
}
@media (max-width: 720px) {
    /* An odd last tile takes the whole row instead of hanging alone. */
    .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
    .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ---- 7. Tables ------------------------------------------------------- */
/* Wide tables scroll inside their frame on laptops instead of being cut off
   by overflow:hidden (the frame used it only to clip its rounded corners). */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 7a. Stacked (card) mode. js/responsive.js adds .rt--stacked when the
   table's box is narrow and copies each column header into data-label.
   Every row becomes a card: identity + status on top, the rest as a
   label-over-value grid, actions along the bottom. */
table.rt--stacked { display: block; width: 100%; min-width: 0 !important; font-size: 13px !important; }
table.rt--stacked > thead { display: none; }
table.rt--stacked > tbody,
table.rt--stacked > tfoot { display: block; }
table.rt--stacked > tbody > tr,
table.rt--stacked > tfoot > tr {
    display: grid;
    grid-template-columns: repeat(var(--rt-cols, 2), minmax(0, 1fr));
    column-gap: 16px; row-gap: 10px;
    padding: 14px 16px;
    align-items: start;
}
table.rt--stacked > tbody > tr > td,
table.rt--stacked > tfoot > tr > td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0; max-width: none !important; width: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
table.rt--stacked > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-text-muted);
    font-family: var(--font-family);
}
table.rt--stacked > tbody > tr > td:empty { display: none; }
/* Full-width rows: empty states, loaders, expanded details */
table.rt--stacked > tbody > tr > td[colspan] { grid-column: 1 / -1; }
table.rt--stacked > tbody > tr > td[colspan]::before { content: none !important; }
/* Flex rows inside cells wrap on narrow cards */
table.rt--stacked td .d-flex { flex-wrap: wrap; }

/* Card slots (data-cell on <td>) */
table.rt--stacked td[data-cell="primary"] {
    grid-column: 1 / -2; order: -4;
    font-weight: 600; color: var(--color-text-primary);
}
table.rt--stacked td[data-cell="status"] {
    grid-column: -2 / -1; order: -3;
    justify-self: end; text-align: right !important;
}
table.rt--stacked td[data-cell="primary"]::before,
table.rt--stacked td[data-cell="status"]::before,
table.rt--stacked td[data-cell="actions"]::before { content: none !important; }
table.rt--stacked td[data-cell="amount"] { order: -2; font-size: 15px; font-weight: 700; }
table.rt--stacked td[data-cell="wide"] { grid-column: 1 / -1; }
table.rt--stacked td[data-cell="actions"] {
    grid-column: 1 / -1; order: 99;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding-top: 4px !important;
}
table.rt--stacked td[data-cell="actions"]:not(:has(*)) { display: none; }
table.rt--stacked td[data-cell="actions"] > .d-flex,
table.rt--stacked td[data-cell="actions"] > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start !important; }
table.rt--stacked td[data-cell="actions"] .btn { min-height: 36px; }
table.rt--stacked td[data-cell="hide"] { display: none; }
/* A lone chevron / "open" button carries no information in a card whose
   whole surface is tappable. */
table.rt--stacked td[data-cell="chevron"] { display: none; }

/* Row chrome in card mode */
table.rt--stacked > tbody > tr:hover { transform: none; }
table.rt--stacked .badge { white-space: nowrap; }
/* A long status ("evidence deadline expired") wraps inside its slot instead of
   running over the row identity. */
table.rt--stacked td[data-cell="status"] { max-width: 100%; }
table.rt--stacked td[data-cell="status"] .badge { white-space: normal; max-width: 100%; line-height: 1.25; text-align: center; }

/* 7b. Tables that stay tables on small screens keep readable cells. */
@media (max-width: 720px) {
    .pg-table-wrap > table:not(.rt--stacked) th,
    .pg-table-wrap > table:not(.rt--stacked) td { padding: 10px 12px !important; }
}

/* ---- 8. Modals → bottom sheets on phones ------------------------------
   A centred card with 16px margins wasted a quarter of a phone screen and
   put the actions far from the thumb. Sheets rise from the bottom edge. */
@media (max-width: 720px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-backdrop > .glass-modal,
    .modal-backdrop > .modal {
        max-width: 100% !important; width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-modal > .gm-body { padding: 16px; }
    .gm-header { padding: 16px 16px 0; }
    .gm-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
    }
    .gm-footer > :is(.btn, .bal-btn-primary, .bal-btn-outline) { flex: 1 1 140px; min-height: 44px; justify-content: center; }
    .modal-footer { flex-wrap: wrap; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
    .modal-footer > .btn { flex: 1 1 140px; min-height: 44px; }
}
@keyframes sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop > .glass-modal, .modal-backdrop > .modal { animation: none; }
}

/* ---- 9. Touch targets -------------------------------------------------
   Pagination arrows and row icon buttons were 32px — under the 44px touch
   guideline and easy to mis-tap. */
@media (pointer: coarse) {
    .pg-page-btn, .pg-table-action { width: 40px; height: 40px; }
    .pg-page-current { height: 40px; border-radius: 20px; }
    .pg-pagesize-select { height: 40px; border-radius: 20px; }
    .topbar__burger { width: 42px; height: 42px; }
    .date-picker-clear { min-width: 32px; min-height: 32px; }
}