/* ============================================================
   MaxiMind — shared mobile layer  (served at /app/mobile.css)
   Loaded on every page. DESKTOP LAYOUTS ARE UNTOUCHED:
   every rule here is gated behind @media (max-width: 640px)
   unless noted. var() calls carry fallbacks because the pages
   use slightly different design-token names.
   ============================================================ */

/* Tokens this layer leans on, with cross-page fallbacks */
:root {
  --mm-card:    var(--card-bg, var(--surface, #ffffff));
  --mm-border:  var(--border, #e2e8f0);
  --mm-text:    var(--text, #0f172a);
  --mm-muted:   var(--text-muted, var(--text-secondary, #64748b));
  --mm-accent:  var(--purple, var(--accent, #6b46c1));
  --mm-accent-soft: var(--purple-light, rgba(107, 70, 193, 0.1));
}

/* ---------- always-on helpers (any width) ---------- */

/* Wrap a wide table in this to let it scroll instead of clipping. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Bottom safe-area padding utility (notched phones). */
.safe-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

/* ============================================================
   PHONE LAYER
   ============================================================ */
@media (max-width: 640px) {

  /* Never let the whole page scroll sideways. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ---------- touch targets: 44px minimum ---------- */
  button,
  .btn,
  .tab-btn,
  .sub-tab-btn,
  select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  a.button,
  [role="button"] {
    min-height: 44px;
  }

  /* Kill iOS focus-zoom: every focusable text field >= 16px. */
  input, select, textarea { font-size: 16px; }

  /* Square icon-only controls. */
  .icon-btn, .mini-btn { min-width: 44px; min-height: 44px; }

  /* ---------- responsive table -> stacked cards (.rtable) ----------
     Add class="rtable" to a <table>, class="actions" to its action
     <td>, and (optionally) data-label="Email" to each value <td>.   */
  table.rtable,
  table.rtable tbody,
  table.rtable tr,
  table.rtable td { display: block; }

  table.rtable {
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* visually-hidden header row (kept for a11y) */
  table.rtable thead {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  table.rtable tr {
    border: 1px solid var(--mm-border);
    border-radius: 14px;
    background: var(--mm-card);
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  table.rtable td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    padding: 0.3rem 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  table.rtable td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mm-muted);
    margin-bottom: 0.25rem;
  }

  /* form controls inside a card span its full width */
  table.rtable td select,
  table.rtable td input[type="text"],
  table.rtable td input[type="email"],
  table.rtable td textarea { width: 100% !important; max-width: 100% !important; }

  /* hide cells flagged as noise on phones */
  table.rtable td.cell-hide-mobile { display: none !important; }

  /* the actions cell: a stacked stack of full-width buttons */
  table.rtable td.actions {
    margin-top: 0.55rem;
    padding-top: 0.7rem !important;
    border-top: 1px solid var(--mm-border) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    text-align: left !important;
  }
  table.rtable td.actions::before { display: none !important; }
  /* unwrap any inner fl/grid wrapper inside the actions cell */
  table.rtable td.actions > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  table.rtable td.actions button,
  table.rtable td.actions a,
  table.rtable td.actions .btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* ---------- full-screen modal sheets ----------
     Add class="mm-sheet" to a modal overlay; its first child
     element becomes a full-screen sheet on phones.            */
  .mm-sheet {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .mm-sheet > div {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}