/* ==========================================================================
   Mobile-first layer — Phase Mobile-1 (2026-06-28).
   Loaded AFTER app.css. DESKTOP-SAFE BY DESIGN: every layout-changing rule
   lives inside `@media (max-width: 600px)`. The only base (non-media) rules
   are utilities + defaults that are inert on desktop (bottom-nav hidden,
   .mobile-only hidden, .rtable has no desktop styling so tables keep their
   existing look).
   Breakpoint: 600px = "phone". 601px+ renders exactly as before.
   ========================================================================== */

/* ---- utilities (inert on desktop) ---------------------------------------- */
.mobile-only { display: none; }
.bottom-nav  { display: none; }            /* shown only inside the media query */

/* ========================================================================== */
@media (max-width: 600px) {

  /* ---------- Phase 0: rhythm, type, tap targets ------------------------- */
  body { font-size: 15px; }                /* a touch larger for thumb reading */
  /* Top clears the fixed hamburger (top:14px + 40px); bottom clears the tab bar. */
  .main {
    padding: 64px 14px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .main > * { max-width: 100%; }
  .page-header__h1, h1 { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }

  /* Bigger touch targets — scoped to mobile so desktop sizing is unchanged. */
  .btn { min-height: 44px; padding: 10px 16px; }
  .sidebar__item { min-height: 44px; }

  /* Visibility helpers flip inside the phone breakpoint. */
  .mobile-only  { display: revert; }
  .desktop-only { display: none !important; }

  /* ---------- Phase 1 + 4: tables become stacked cards ------------------- */
  /* Applies to the explicit `.rtable` opt-in AND the two shared list-table
     classes (.tbl-opt-b module lists, .admin-table masters) so EVERY list
     stacks on phones without per-template edits. Add data-label="<col>" to a
     <td> for a "label: value" line; mark a lead cell .rtable__title for a
     heading (plain tbl-opt-b/admin-table auto-use their first cell). The
     balance matrix (.data-table--matrix) is intentionally excluded — it has
     its own card-per-holder treatment. */
  :is(.rtable, .tbl-opt-b, .admin-table) thead { display: none; }
  :is(.rtable, .tbl-opt-b, .admin-table),
  :is(.rtable, .tbl-opt-b, .admin-table) tbody,
  :is(.rtable, .tbl-opt-b, .admin-table) tr,
  :is(.rtable, .tbl-opt-b, .admin-table) td { display: block; width: 100%; }
  :is(.rtable, .tbl-opt-b, .admin-table) tr {
    background: var(--card, #fffdf9);
    border: 1px solid var(--ink-12, #e3ddd2);
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 10px;
  }
  :is(.rtable, .tbl-opt-b, .admin-table) td {
    border: 0 !important;
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    min-height: 0;
  }
  :is(.rtable, .tbl-opt-b, .admin-table) td::before {
    content: attr(data-label);
    color: var(--ink-45, #8b8377);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    flex: 0 0 auto;
  }
  /* Lead cell = card title (full width, no label, serif). Explicit
     .rtable__title wins; plain tbl-opt-b/admin-table use their first cell. */
  .rtable__title,
  :is(.tbl-opt-b, .admin-table):not(.rtable) td:first-child {
    display: block;
    text-align: left;
    font-family: var(--font-serif, Georgia, serif);
    font-weight: 600;
    font-size: 15px;
    padding: 0 0 7px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--ink-12, #e3ddd2);
  }
  .rtable__title::before,
  :is(.tbl-opt-b, .admin-table):not(.rtable) td:first-child::before { content: none; }
  /* An empty action/blank cell with no value shouldn't render a stray label. */
  :is(.rtable, .tbl-opt-b, .admin-table) td:empty { display: none; }
  /* An rtable shouldn't sit inside a horizontal-scroll wrapper on phones. */
  .table-wrap { overflow-x: visible; }

  /* Transactions grid as cards: drop the empty debit/credit side, show the
     hover-only row actions (no hover on touch), and tint amounts. */
  .rtable td.amt-blank { display: none; }
  .rtable td.amt-debit  { color: var(--bad, #a8312b); font-weight: 600; }
  .rtable td.amt-credit { color: var(--good, #2f7d4f); font-weight: 600; }
  .rtable td.row-actions-cell .row-actions { opacity: 1 !important; visibility: visible !important; }
  .rtable td.row-actions-cell { justify-content: flex-end; }
  /* Month-divider + empty-state rows span the whole card cleanly. */
  .rtable tr.month-row td, .rtable td[colspan] { display: block; text-align: left; }
  .rtable tr.month-row td::before { content: none; }

  /* ---------- Phase 2: bottom tab bar ----------------------------------- */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--card, #fffdf9);
    border-top: 1px solid var(--ink-12, #e3ddd2);
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px 9px;
    min-height: 52px;
    font-size: 10.5px;
    color: var(--ink-45, #8b8377);
    text-decoration: none;
  }
  .bottom-nav a svg { width: 21px; height: 21px; }
  .bottom-nav a.is-active { color: var(--bronze, #9a6b1f); }
  /* Centre "Add" gets an emphasised bronze pill. */
  .bottom-nav .bottom-nav__add .bottom-nav__ic {
    background: var(--bronze, #9a6b1f);
    color: #fff;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    margin-top: -16px;
    box-shadow: 0 3px 8px rgba(154,107,31,.4);
  }
  .bottom-nav .bottom-nav__add svg { width: 24px; height: 24px; }

  /* ---------- Phase 4: forms single-column + comfortable inputs --------- */
  .form-grid { grid-template-columns: 1fr !important; }
  input.combobox__input, select.combobox__input, textarea.combobox__input,
  input[type="text"], input[type="date"], input[type="number"], select {
    min-height: 44px;
    font-size: 16px;             /* >=16px stops iOS Safari zoom-on-focus */
  }
  textarea.combobox__input { min-height: 72px; }
  /* Action button rows wrap instead of overflowing. */
  .form > div[style*="display:flex"], .form > div[style*="display: flex"] { flex-wrap: wrap; }

  /* Sticky action bar: the form row holding the submit button pins just above
     the bottom tab bar so Save/Confirm is always reachable on long forms.
     Uses :has() (no template churn). */
  .form > div:has(> button[type="submit"]) {
    position: sticky;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    background: var(--paper, #faf7f1);
    margin: 10px -14px 0;            /* bleed to the screen edges */
    padding: 10px 14px;
    border-top: 1px solid var(--ink-12, #e3ddd2);
    z-index: 5;
  }
  .form > div:has(> button[type="submit"]) .btn { flex: 1; }  /* full-width tap */

  /* ---------- Phase 5: zero horizontal-overflow guard ------------------- */
  /* `clip` (not `hidden`) so position:sticky on ancestors keeps working. */
  html, body { overflow-x: clip; }
  img, svg, video, canvas, pre, iframe { max-width: 100%; }

  /* ---------- Phase 3 helpers: per-holder balance cards ----------------- */
  /* The desktop matrix table is .desktop-only; .matrix-cards is .mobile-only. */
  .matrix-cards .hcard {
    background: var(--card, #fffdf9);
    border: 1px solid var(--ink-12, #e3ddd2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .matrix-cards .hcard__h { display: flex; align-items: baseline; }
  .matrix-cards .hcard__nm { font-family: var(--font-serif, Georgia, serif); font-weight: 600; font-size: 16px; }
  .matrix-cards .hcard__tot { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
  .matrix-cards .bankrow {
    display: flex; justify-content: space-between;
    font-size: 13px; padding: 6px 0;
    border-top: 1px solid var(--ink-12, #e3ddd2);
  }
  .matrix-cards .bankrow:first-of-type { margin-top: 8px; }
  .matrix-cards .bankrow .bv { font-family: ui-monospace, Menlo, monospace; }
}


/* ── Back to Pocket (Phase Pocket-2, 2026-08-06) ───────────────────────────
   Deliberately OUTSIDE the 600px query: an installed PWA has no back button
   at any width, so this cannot be phone-only.

   In flow + sticky rather than fixed, so it can never overlap the content or
   the hamburger — a fixed bar would sit on top of .layout__hamburger, which
   lives at top:14px. */
.pocket-return { display: none; }
.pocket-return.is-on {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 60;
  grid-column: 1 / -1;              /* span both columns of .layout's grid */
  padding: 11px 16px;
  min-height: 46px;
  background: #131b14;              /* the top-nav forest — reads as app chrome */
  color: #f6f4ef;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 244, 239, 0.14);
}
.pocket-return.is-on:hover { background: #0f1d13; }
.pocket-return.is-on svg { width: 18px; height: 18px; flex: none; }

/* The hamburger is fixed at top:14px and would sit ON the bar. Push it below
   whenever the bar is showing. :has() keeps this to one rule with no extra
   body class to keep in sync. */
.layout:has(.pocket-return.is-on) .layout__hamburger { top: 60px; }

/* Same for the tenant switcher, which is also positioned against the top. */
.layout:has(.pocket-return.is-on) .tenant-switcher { top: 60px; }