/**
 * WasteALot mobile polish.
 *
 * Single CSS file scoped under @media (max-width: 720px) so it never
 * touches desktop styles. Goals:
 *   1. Native-feeling touch targets (48px minimum, Apple HIG compliant).
 *   2. Safe-area insets so the app does not collide with iOS notch or
 *      Android navigation gestures.
 *   3. Slide-up bottom-sheet modals instead of centered desktop modals.
 *   4. Compact mobile topbar that reclaims vertical space.
 *   5. iOS Smooth-scroll + bouncy interactions where it fits the brand.
 *
 * Load order: AFTER styles.css so these rules win specificity ties.
 */

/* ─── Safe area insets (always apply, no-op on desktop) ─────────────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* The PWA topbar should sit below the iOS notch */
.app-topbar {
  padding-top:    calc(12px + var(--safe-top)) !important;
  padding-left:   calc(20px + var(--safe-left));
  padding-right:  calc(20px + var(--safe-right));
}

/* The bottom feedback FAB should clear iOS home-indicator */
#feedback-fab {
  bottom: calc(14px + var(--safe-bottom)) !important;
}

/* ─── Mobile-only overrides ─────────────────────────────────────────── */
@media (max-width: 720px) {

  /* Larger touch targets across the app. Apple HIG: 44pt minimum. */
  .btn,
  button.btn,
  .choice,
  .tab-btn,
  .user-menu-item {
    min-height: 48px;
    font-size: 15px;
  }
  /* Iconic / compact buttons that intentionally stay small */
  .btn-icon, .btn[data-compact], #user-menu .user-menu-trigger {
    min-height: 0;
  }

  /* Compact topbar: hide the secondary user name + email, show only
     the avatar circle. The dropdown still has the full info on tap. */
  .user-menu-meta { display: none; }
  .user-menu-caret { display: none; }
  .user-menu-trigger { padding: 6px; gap: 0; }
  .role-pill { font-size: 10px; padding: 3px 8px; }
  .live-dot .live-label { display: none; }
  .live-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; }
  .live-dot .d { margin: 0; }

  /* App main: tighter outer padding, but room for the safe-area + a
     bottom buffer so action buttons clear the iOS home indicator. */
  .app-main {
    padding-left:  calc(14px + var(--safe-left)) !important;
    padding-right: calc(14px + var(--safe-right)) !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }

  /* Choice grid (resident action tiles): bigger, more thumb-friendly */
  .choice-grid { gap: 10px !important; }
  .choice {
    padding: 22px 10px !important;
  }
  .choice .ic-svg { transform: scale(1.05); }
  .choice .nm { font-size: 13px; }

  /* Hero cards on each role view: tighter rounded corners, less padding,
     more emphasis on the big number. */
  .hero-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .hero-card .big {
    font-size: 36px !important;
  }

  /* KPI row: bigger cards, easier to glance at while moving */
  .kpi {
    padding: 12px 10px !important;
  }
  .kpi .v { font-size: 22px !important; }

  /* Inbox + list items: bigger tap targets, smaller chevron */
  .list-item {
    padding: 14px 12px !important;
    gap: 12px !important;
  }
  .list-item .body .t1 { font-size: 14.5px !important; }
  .list-item .body .t2 { font-size: 13px !important; }

  /* Tabs row: scrollable on mobile if many tabs */
  .tabs-row {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .tabs-row::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    padding: 10px 14px !important;
  }

  /* ─── Bottom-sheet modal style ─────────────────────────────────────
     Centered modals fight one-handed reach on phones. Slide up from
     the bottom instead, with a drag handle so it feels native. */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
    /* Sit ABOVE the fixed bottom tab bar (z 950) so a slide-up sheet and its
       action buttons are never hidden behind it. The dimmed backdrop then
       also covers the tab bar, so it can't be tapped through the sheet. */
    z-index: 1000 !important;
  }
  .modal-backdrop > .modal,
  .modal-backdrop > .card {
    border-radius: 20px 20px 0 0 !important;
    /* dvh tracks the VISIBLE viewport on mobile Safari; plain vh includes the
       area behind the collapsing browser toolbar, which pushed the bottom of
       tall sheets (and their buttons) off-screen. vh kept as a fallback. */
    max-height: 88vh !important;
    max-height: 88dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Scroll INSIDE the sheet so a tall form (bulk invite, alert prefs) can
       always be scrolled down to its action buttons. */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Comfortable bottom buffer that also clears the iOS home indicator. */
    padding-bottom: calc(28px + var(--safe-bottom)) !important;
    animation: slideUp .3s cubic-bezier(.2, .9, .3, 1) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.22) !important;
    position: relative;
  }
  /* Drag handle indicator at the top of the sheet */
  .modal-backdrop > .modal::before,
  .modal-backdrop > .card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(246,247,247,0.22);
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Hero text on login page: prevent overflow on small phones */
  .login-card { padding: 20px !important; }
  .login-card h1 { font-size: 26px !important; }

  /* Floating feedback button: bottom-left so it does not collide with
     the avatar menu (top-right) or any sheet open from the bottom */
  #feedback-fab {
    left: calc(14px + var(--safe-left)) !important;
    bottom: calc(80px + var(--safe-bottom)) !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Sales pipeline: on mobile, force vertical scroll instead of horizontal
     so a small phone screen does not get a 7-column horizontal scroll. */
  .pipeline-board {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    width: 100% !important;
    overflow-x: visible !important;
  }
  .stage-col {
    margin-bottom: 12px;
  }
  /* Hide truly empty stage columns on mobile to save scrolling. The
     populated Prospect column always shows. */
  .stage-col:has(.stage-empty:only-child) { display: none; }

  /* Topbar: keep the brand visible but tighten everything else */
  .topbar-context { display: none; }
  .brand-logo { height: 32px !important; }
}

/* ─── iPhone X+ landscape and small tablets ─────────────────────────── */
@media (max-width: 920px) and (orientation: landscape) {
  /* Use full width when in landscape on phones */
  .app-main { max-width: 100% !important; }
}

/* ─── Tap highlight color: more on-brand ────────────────────────────── */
* {
  -webkit-tap-highlight-color: rgba(100, 144, 116, 0.22);
}

/* ─── Pull-to-refresh hint ──────────────────────────────────────────────
   When the user pulls down at the top, a faint hint appears. We do not
   actually rebuild the page; sockets keep data fresh. But the visual
   feedback makes the app feel responsive on mobile. */
@keyframes ptr-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.app-main {
  position: relative;
}
@media (max-width: 720px) {
  .app-main::before {
    content: '';
    display: block;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--sage);
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .app-main.refreshing::before {
    opacity: 1;
    animation: ptr-spin 0.8s linear infinite;
  }
}
@keyframes ptr-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ─── Native-style bottom tab bar ───────────────────────────────────────
   Hidden on desktop; a fixed, safe-area-aware nav bar on phones so each
   role has an app-like structure instead of one long scroll. */
.mobile-tabbar { display: none; }

@media (max-width: 720px) {
  /* Reserve room so content never hides behind the fixed bar. */
  .app-main {
    padding-bottom: calc(80px + var(--safe-bottom)) !important;
  }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 6px 4px calc(6px + var(--safe-bottom));
    background: rgba(9, 18, 31, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
  }

  .mtab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ink-mute);
    transition: color 0.14s ease, background-color 0.14s ease, transform 0.1s ease;
  }
  .mtab .mtab-ic { display: inline-flex; opacity: 0.9; }
  .mtab .mtab-lbl { line-height: 1; }
  .mtab.active { color: var(--sage); background: rgba(122, 168, 138, 0.12); }
  .mtab.active .mtab-ic { opacity: 1; }
  .mtab:active { transform: scale(0.93); }

  /* Lift the feedback FAB above the tab bar so they don't overlap. */
  #feedback-fab {
    bottom: calc(88px + var(--safe-bottom)) !important;
  }
}

/* ─── Touch-optimized spacing (thumb-friendly rows & breathing room) ─── */
@media (max-width: 720px) {
  .card { margin-bottom: 14px; }
  .section-head { margin-top: 22px; }
  /* Roomier tap targets for list rows and stat cards */
  .list-item { padding: 15px 16px; }
  .kpi { padding: 16px 14px; }
  /* Resident report tiles — bigger, easier to hit */
  .choice { padding: 18px 14px; }
}