/* Phone layout (one place for it, loaded last so it wins over styles.css / modern.css).
   One full-width column, readable text, finger-sized buttons, and a bottom tab bar for the daily pages.
   Desktop and tablet are unchanged: everything here is inside the phone width or hidden above it. */

.tabbar { display: none; }

@media (max-width: 650px) {
  /* One column: modern.css's sidebar rail column used to stay, squeezing the content to half the screen. */
  .workspace, .workspace.rail { grid-template-columns: minmax(0, 1fr); }

  /* Calm background: the moving dots sat behind the text (and cost battery). */
  .ambient-mesh, .ambient-orbs, .cursor-glow { display: none; }

  /* Header: menu, page name, + New, notifications. The rest lives in the menu. */
  .preview-banner { font-size: 11px; line-height: 1.35; }
  .breadcrumb, .sidebar-collapse-btn, .live-indicator, .global-search { display: none; }
  .workspace-header { height: auto; min-height: 56px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
  .mobile-menu { font-size: 22px; min-width: 44px; min-height: 44px; }
  #quick-btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .notif-bell { min-width: 40px; min-height: 40px; }

  /* Page: full width, room at the bottom for the tab bar. */
  .content-area { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
  .workspace-heading h1 { font-size: 28px; }
  #page-description { font-size: 14px; }
  .eyebrow { font-size: 11px; }
  .data-notice { font-size: 12.5px; line-height: 1.45; padding: 10px 12px; margin-bottom: 14px; }
  .content-footer { display: none; }

  /* Readable text and finger-sized controls. 16px inputs also stop iPhones zooming in on every field. */
  body { font-size: 15px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card { min-height: 0; padding: 14px; }
  .metric-top { font-size: 12.5px; }
  .metric-value { font-size: 26px; }
  .metric-help { font-size: 12px; }
  .panel-heading h2 { font-size: 15px; }
  .button, .btn-sm, .filter-chip { min-height: 40px; font-size: 14px; }
  input, select, textarea { font-size: 16px !important; }
  .nav-item { font-size: 15px; min-height: 44px; }

  /* Tables scroll sideways inside their box instead of squashing; text stays legible. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th, .data-table td { font-size: 13px; }

  /* Forms and the side panel use the whole screen. */
  .modal-card { width: 100%; max-width: none; max-height: calc(100dvh - 24px); border-radius: 18px; }
  .drawer { width: 100%; max-width: none; }

  /* The menu opens above the tab bar; status and messages sit just above it. */
  .sidebar { z-index: 70; width: min(320px, 86vw); padding-bottom: calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .sidebar .nav-label { max-width: none; white-space: normal; }
  select, input { max-width: 100%; }
  .att-group { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .att-group select { width: 100%; }
  .store-badge { bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 11px; padding: 4px 10px; white-space: nowrap; }
  .toast-stack { bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Bottom tab bar (shown once signed in to the workspace). */
  .workspace:not([hidden]) .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid #e3e7e4; box-shadow: 0 -6px 20px rgba(20, 40, 30, .06);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: auto; min-height: 54px; margin: 0; padding: 6px 0; border: 0; border-radius: 12px;
    background: none; color: #5d6b63; font: 600 11.5px "DM Sans", sans-serif;
  }
  .tabbar .tab .tab-icon { font-size: 20px; line-height: 1; }
  .tabbar .tab.selected { color: #1d765d; background: #e8f3ee; }
  .tabbar .tab[hidden] { display: none; }
  .app-shell[data-mode="dark"] .tabbar { background: var(--dark-surface); border-color: #34423a; }
  .app-shell[data-mode="dark"] .tabbar .tab.selected { background: rgba(29, 118, 93, .25); color: #8fd6b8; }
}