/* ═══ Phones (Shanti) ═══════════════════════════════════════════════════════════════════════════════════════════
   Loaded last. The shell already turns into the phone layout under 768px (core/nav.js MOBILE_Q: bottom tab bar,
   Menu sheet, + button); this sheet tidies the screens inside it:
     - the figure tiles (Today, Owner dashboard, Alerts, Inventory, Tickets, Tracking) two to a row and compact,
       instead of one tall card per row
     - the page's buttons line up with the content (the empty title slot left a gap before them)
     - the list filters scroll sideways with a fade at the edge, so a cut-off filter reads as "more this way"
     - bigger touch targets, no zoom-on-focus, tables and dialogs that fit */
@media (max-width: 767px) {
  /* the page header: on the desk the title is in the top bar, so its slot here is empty */
  .page-h > div:empty, .app.shell.desk .page-h.ph-done > div:not(.actions):not(:has(> :not(.ph-dup))) { display: none; }
  .page-h .actions { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }

  /* figure tiles: two to a row */
  .td-stats, .ow-kpis, .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .al-kpis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 16px !important; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .td-stat, .ow-kpi, .inv-kpi, .kpis .kpi, .al-page .kpi { min-width: 0; padding: 12px; gap: 6px; }
  .td-stat-v, .ow-kpi-val, .inv-kpi-val, .kpis .kpi .v, .al-page .kpi .v { font-size: 22px; overflow-wrap: anywhere; }
  .ow-kpi-val, .inv-kpi-val { font-size: 21px; }
  .td-stat .pill, .ow-kpi .pill, .inv-kpi .pill { max-width: 100%; white-space: normal; }
  .td-stat-l, .inv-kpi-lbl { white-space: normal; overflow: visible; line-height: 1.3; }
  /* an odd last tile fills the row */
  .td-stats > :last-child:nth-child(odd), .ow-kpis > :last-child:nth-child(odd), .inv-kpis > :last-child:nth-child(odd),
  .kpis > :last-child:nth-child(odd), .al-kpis-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* list filters: they scroll sideways (shell.css), so fade the edge to show there is more */
  .app.shell.desk .toolbar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }

  /* touch: 16px fields (iOS zooms into anything smaller), finger-sized buttons */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  .btn, .btn.sm, button.btn { min-height: 36px; }
  .seg > button, .seg > a { min-height: 34px; }

  /* tables keep their columns and scroll inside their card; keep the first column readable */
  table { font-size: 13px; }
  .tbl-wrap, .table-wrap, .grid-wrap { -webkit-overflow-scrolling: touch; }

  /* date pairs (Profit & loss and the like) stack */
  .pnl-dates { display: flex; flex-wrap: wrap; gap: 8px; }
  .pnl-dates label { display: flex; align-items: center; gap: 6px; }
  .pnl-dates input { min-width: 0; max-width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); }

  /* the Menu sheet: Sign out is in the account menu (the avatar), so not a stray button under the tiles */
  .sb-signout { display: none !important; }

  /* step forms: "Step 1 of 7" and "One page" stay on one line */
  .sf-step-h > :first-child, .sf-step-h .link { white-space: nowrap; flex: none; }
  .sf-step-h { gap: 8px; }

  /* dialogs fill the width */
  dialog, .modal, .dlg { max-width: calc(100vw - 24px); }

  /* the report library: the list sits above the report, so cap it */
  .rp-nav { max-height: 46vh; overflow-y: auto; }
  .rb-top { flex-wrap: wrap; gap: 8px; }
  .rb-views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .rb-views::-webkit-scrollbar { display: none; }
}

@media (max-width: 380px) {
  .td-stat-v, .ow-kpi-val, .inv-kpi-val, .kpis .kpi .v, .al-page .kpi .v { font-size: 19px; }
  .td-stat, .ow-kpi, .inv-kpi, .kpis .kpi, .al-page .kpi { padding: 10px; }
}