/* ============================================================
   Mobile layer — every rule in this file is scoped to phones
   (max-width: 720px) or coarse pointers. Desktop is untouched.
   Per-screen refinements live in /mobile/<cluster>.css.
   ============================================================ */

/* Utilities usable at any width: .mobile-only elements are force-hidden on
   desktop and keep their own natural display on mobile. */
@media (min-width: 721px) {
  .mobile-only { display: none !important; }
}

@media (max-width: 720px) {
  .desktop-only { display: none !important; }

  /* ----- App shell: single column, chrome top + content, tabbar bottom ----- */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas: "top" "main";
    height: 100dvh;
    min-height: 100dvh;
  }
  .app > .nav { display: none; }

  .topbar {
    gap: 8px;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top);
  }
  .topbar .screen-title {
    font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
  }
  .topbar .clock { display: none; }
  /* Account pill collapses to just the avatar */
  .topbar .staff-pill .acct, .topbar .staff-pill .chev { display: none; }
  .topbar .staff-pill { padding: 4px; border-radius: 999px; }
  /* "Not saving" badge collapses to its icon — tap still explains why */
  .db-badge .dbb-text { display: none; }
  .db-badge { padding: 5px; }

  .main {
    /* room for the fixed tabbar + iOS home indicator */
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
    min-width: 0;
  }
  body.logged-out .main { padding-bottom: 0; }

  /* Storefront: cards stay edge-to-edge on a phone (the desktop side padding
     + centering added in styles.css is a wide-screen concern only). */
  .storefront { padding-left: 0; padding-right: 0; }

  /* ----- Hamburger (in topbar) ----- */
  .mobile-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
  }
  .mobile-burger:active { background: var(--surface-2); }

  /* ----- Bottom tab bar ----- */
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    align-items: stretch;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.05);
  }
  body.logged-out .mobile-tabbar, body.bulk-open .mobile-tabbar { display: none; }
  .mobile-tabbar .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 0;
    border: 0; border-radius: 12px;
    background: transparent; color: var(--text-muted);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em;
    padding: 4px 2px;
  }
  .mobile-tabbar .tab .ico {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 26px; border-radius: 9px;
    font-size: 10px; font-weight: 700;
  }
  .mobile-tabbar .tab .ico svg { width: 18px; height: 18px; }
  .mobile-tabbar .tab .lbl {
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-tabbar .tab[aria-current='true'] { color: var(--accent-700); }
  .mobile-tabbar .tab[aria-current='true'] .ico { background: var(--accent-bg); }
  .mobile-tabbar .tab:active { transform: scale(0.96); }

  /* ----- Mobile nav (one panel, two presentations: sheet & drawer) ----- */
  .mobile-nav { position: fixed; inset: 0; z-index: 220; }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav .mn-scrim {
    position: absolute; inset: 0;
    background: rgba(15, 18, 22, 0.45);
    animation: mnFade 160ms ease;
  }
  .mobile-nav .mn-panel {
    position: absolute;
    display: flex; flex-direction: column;
    background: var(--surface);
    overflow: hidden;
  }
  /* Sheet mode: slides up from the bottom */
  .mobile-nav.mode-sheet .mn-panel {
    left: 0; right: 0; bottom: 0;
    max-height: 82dvh;
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    animation: mnSlideUp 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  /* Drawer mode: slides in from the left (same content) */
  .mobile-nav.mode-drawer .mn-panel {
    top: 0; bottom: 0; left: 0;
    width: min(320px, 86vw);
    border-right: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
    animation: mnSlideIn 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .mobile-nav .mn-grip {
    flex: 0 0 auto;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-strong);
    margin: 8px auto 2px;
  }
  .mobile-nav.mode-drawer .mn-grip { display: none; }
  .mobile-nav .mn-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px 8px;
  }
  .mobile-nav .mn-head .logo { border-radius: 8px; }
  .mobile-nav .mn-head .name { font-weight: 700; font-size: 15px; }
  .mobile-nav .mn-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 12px 12px; }
  .mobile-nav .mn-location {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%;
    padding: 10px 12px; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text); text-align: left;
  }
  .mobile-nav .mn-location .lbl {
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .mobile-nav .mn-location .name { font-size: 14px; font-weight: 700; }
  .mobile-nav .mn-location .sub { font-size: 11px; color: var(--text-muted); }

  /* Sheet mode: screens as a 2-col tile grid; drawer mode: vertical rows */
  .mobile-nav.mode-sheet .mn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-nav.mode-drawer .mn-list { display: flex; flex-direction: column; gap: 2px; }
  .mobile-nav .mn-list .item {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid transparent; border-radius: 12px;
    background: transparent; color: var(--text);
    font-size: 13.5px; font-weight: 600; text-align: left;
    min-height: 48px; padding: 6px 10px;
  }
  .mobile-nav.mode-sheet .mn-list .item { border-color: var(--border); }
  .mobile-nav .mn-list .item .ico {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 9px;
    background: var(--surface-2); color: var(--text-muted);
    font-size: 10px; font-weight: 700;
  }
  .mobile-nav .mn-list .item[aria-current='true'] {
    border-color: var(--accent); background: var(--accent-bg); color: var(--accent-700);
  }
  .mobile-nav .mn-list .item[aria-current='true'] .ico { background: transparent; color: var(--accent-700); }
  .mobile-nav .mn-foot {
    flex: 0 0 auto;
    padding: 8px 16px 10px;
    font-size: 10.5px; color: var(--text-soft);
    border-top: 1px solid var(--border);
  }

  @keyframes mnFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mnSlideUp { from { transform: translateY(24%); opacity: 0.6; } to { transform: none; opacity: 1; } }
  @keyframes mnSlideIn { from { transform: translateX(-30%); opacity: 0.6; } to { transform: none; opacity: 1; } }

  /* ----- Generic primitives (screen files refine these) ----- */

  /* Prevent iOS focus zoom */
  input, select, textarea { font-size: 16px; }

  /* Dialog shells become bottom sheets / near-fullscreen cards */
  .scrim { padding: 0; align-items: flex-end; }
  .scrim .modal, .modal {
    width: 100%; max-width: none;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    display: flex; flex-direction: column;
  }
  .modal .body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }
  .modal .foot { flex-wrap: wrap; gap: 8px; }

  /* Shared item-editor modal shell (.ie-*) → full-screen card */
  .ie-scrim { padding: 0; align-items: stretch; justify-content: stretch; }
  .ie-panel, .ie-panel.small {
    width: 100vw; max-width: none;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0;
  }
  .ie-panel .ie-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Account dropdown fits small screens */
  .account-dropdown { right: -6px; min-width: 210px; max-width: calc(100vw - 20px); }

  /* Welcome / picker screens */
  .welcome-screen { padding: 16px; align-items: flex-start; overflow-y: auto; }
  .welcome-screen .welcome-inner { padding: 24px 0 32px; }
  .welcome-screen .account-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .welcome-screen h1 { font-size: 21px; }

  /* Horizontal-scroll fallback for wide data tables:
     screens wrap tables in .m-scroll-x (added per screen) */
  .m-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .m-scroll-x > table { min-width: 640px; }
}

/* Bigger touch targets whenever the pointer is a finger, any width */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .iconbtn { min-width: 38px; min-height: 38px; }
  /* Schedule: fatter resize handles for finger long-press-resize */
  .cal-block.own .cal-resize { height: 16px; }
}

/* Schedule long-press feedback: the grabbed block/ghost "lifts" off the
   grid (Google-Calendar style). Class is added by app.js on touch only. */
.cal-lift {
  transform: scale(1.02);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
  z-index: 30 !important;
  transition: transform 120ms ease;
}