/* ============================================================
   Mapystik — Mobile-only stylesheet
   All rules wrapped in @media (max-width: 768px) so desktop is
   completely untouched.
   ============================================================ */

/* Safe-area variables, always defined */
:root {
  --m-safe-top:    env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-left:   env(safe-area-inset-left, 0px);
  --m-safe-right:  env(safe-area-inset-right, 0px);

  --m-topbar-h:   52px;
  --m-bottomnav-h: 60px;
  --m-fab-size:   48px;
}

/* Hide mobile-only shell elements on desktop */
.m-filter-chip,
.m-fab-stack,
.m-bottom-nav,
.m-side-menu-backdrop,
.m-side-menu,
.m-sheet-backdrop,
.m-sheet,
.m-filter-sheet-backdrop,
.m-filter-sheet,
.m-pick-banner {
  display: none;
}

/* ============================================================
   m-force-mobile class — applied by ?m=1 URL param for testing
   Constrains body width so the mobile layout actually paints
   ============================================================ */
html.m-force-mobile {
  max-width: 420px;
  height: 100vh;
  margin: 0 auto;
  box-shadow: 0 0 0 9999px #000;
  position: relative;
  overflow: hidden;
}
html.m-force-mobile body {
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   ≤ 768 px  OR ?m=1  —  full mobile layout
   ============================================================ */
@media (max-width: 768px) {

  /* ── Disable global zoom prevention on inputs ─────────────── */
  input, textarea, select {
    font-size: 16px; /* iOS won't zoom if input is ≥16px */
  }

  body {
    background: #0e1320;
    overscroll-behavior-y: none;
  }

  /* ── Top bar: keep ONLY hamburger / search / avatar ───────── */
  .navbar {
    height: var(--m-topbar-h) !important;
    padding: 0 8px !important;
    padding-top: var(--m-safe-top);
    padding-left: max(8px, var(--m-safe-left));
    padding-right: max(8px, var(--m-safe-right));
    gap: 8px !important;
    flex-wrap: nowrap !important;
    background: rgba(14,19,32,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 200;
  }

  /* Show ONLY: hamburger toggle, logo (compact), search, avatar */
  .navbar .nav-logo,
  .navbar .btn-manual-add,
  .navbar .nav-view-toggle,
  .navbar .notif-wrapper,
  .navbar .btn-admin-nav,
  .navbar .btn-import-nav,
  .navbar .btn-export-nav,
  .navbar .btn-logout {
    display: none !important;
  }

  /* Re-show user-info as a tight avatar tap target */
  .navbar .user-info {
    display: flex !important;
    margin-left: auto;
    padding: 4px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
  }
  .navbar .user-info .user-name,
  .navbar .user-info .user-premium-badge { display: none !important; }
  .navbar .user-info .user-avatar {
    width: 32px; height: 32px; font-size: 14px;
  }

  /* Sidebar toggle (=hamburger) is always visible, large tap target */
  .btn-sidebar-toggle {
    display: flex !important;
    width: 40px; height: 40px;
    border-radius: 10px;
  }

  /* Search bar fills remaining space, compact height */
  .search-wrapper {
    order: 2;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }
  .search-wrapper input {
    height: 36px !important;
    padding-left: 36px !important;
    border-radius: 10px !important;
  }

  /* ── App layout: map fills everything between top bar & bottom nav ─ */
  .app-layout {
    margin-top: calc(var(--m-topbar-h) + var(--m-safe-top)) !important;
    height: calc(100vh - var(--m-topbar-h) - var(--m-safe-top)) !important;
    height: calc(100dvh - var(--m-topbar-h) - var(--m-safe-top)) !important;
    position: relative;
    padding-bottom: 0;
  }

  .main-content-area {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .map-container, #map {
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide the planner-active explorer panel by default; we expose it via sheet */
  .map-explorer-panel { display: none !important; }

  /* Hide the desktop sidebar drawer entirely — replaced by .m-sheet */
  .sidebar {
    display: none !important;
  }

  /* But when the sidebar is reparented INTO the sheet, show its contents */
  .m-sheet .sidebar:not(.hidden) {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    flex: 1 1 auto;
    overflow: hidden;
    transform: none !important;
  }
  /* When sidebar is hidden by toggleSidebarView('calendar'), keep it out of flex */
  .m-sheet .sidebar.hidden { display: none !important; }

  /* ── Floating filter chip (top-left of map) ──────────────── */
  .m-filter-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: calc(var(--m-topbar-h) + var(--m-safe-top) + 10px);
    left: max(12px, var(--m-safe-left));
    z-index: 500;
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    background: rgba(28, 36, 56, 0.95);
    color: #e8eaf6;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .m-filter-chip.active {
    background: var(--accent, #6C63FF);
    color: #fff;
    border-color: transparent;
  }
  .m-filter-chip-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-filter-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    margin-left: 2px;
  }
  .m-filter-chip-dot.hidden { display: none; }

  /* ── Floating action button stack (right edge) ───────────── */
  .m-fab-stack {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    right: max(12px, var(--m-safe-right));
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-bottom) + 16px);
    z-index: 500;
  }
  .m-fab {
    width: var(--m-fab-size); height: var(--m-fab-size);
    border-radius: 50%;
    background: rgba(28, 36, 56, 0.95);
    color: #e8eaf6;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, background 0.15s;
  }
  .m-fab:active { transform: scale(0.93); }
  .m-fab-primary {
    background: var(--accent, #6C63FF);
    color: #fff;
    border-color: transparent;
    width: 56px; height: 56px;
    box-shadow: 0 8px 26px rgba(108,99,255,0.55);
  }

  /* Hide FABs when sheet is at full snap to avoid overlap */
  body.m-sheet-full .m-fab-stack { opacity: 0; pointer-events: none; }
  body.m-sheet-full .m-filter-chip { opacity: 0; pointer-events: none; }

  /* ── Bottom navigation ─────────────────────────────────── */
  .m-bottom-nav {
    display: flex !important;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: calc(var(--m-bottomnav-h) + var(--m-safe-bottom));
    padding-bottom: var(--m-safe-bottom);
    background: rgba(14,19,32,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.07);
    z-index: 1100;
  }
  .m-nav-item {
    flex: 1;
    background: none; border: none;
    color: #7c84a0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    position: relative;
    min-height: 44px;
  }
  .m-nav-item svg { opacity: 0.85; transition: opacity 0.15s; }
  .m-nav-item.active { color: var(--accent, #6C63FF); }
  .m-nav-item.active svg { opacity: 1; }
  .m-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: var(--accent, #6C63FF);
  }

  /* ── Bottom sheet ─────────────────────────────────────────── */
  .m-sheet-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1050;
  }
  body.m-sheet-full .m-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .m-sheet {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-bottom));
    height: var(--m-sheet-h, 120px);
    background: var(--surface, #151b2c);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    z-index: 1080;
    transition: height 0.28s cubic-bezier(0.32, 0.72, 0.24, 1),
                transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
    will-change: height, transform;
    overflow: hidden;
  }
  /* Snap states */
  .m-sheet.snap-hidden { transform: translateY(calc(100% + var(--m-bottomnav-h))); }
  .m-sheet.snap-peek   { height: 132px; }
  .m-sheet.snap-half   { height: 56vh; height: 56dvh; }
  .m-sheet.snap-full   {
    height: calc(100dvh - var(--m-topbar-h) - var(--m-safe-top));
    height: calc(100vh - var(--m-topbar-h) - var(--m-safe-top));
    bottom: 0;
    padding-bottom: calc(var(--m-bottomnav-h) + var(--m-safe-bottom));
  }
  /* When user is dragging, kill transitions for live follow */
  .m-sheet.dragging { transition: none !important; }

  .m-sheet-handle {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .m-sheet-handle-bar {
    width: 40px; height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.22);
  }
  .m-sheet-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* ── Side menu (hamburger drawer) ────────────────────────── */
  .m-side-menu-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 2000;
  }
  .m-side-menu-backdrop.open { opacity: 1; pointer-events: auto; }

  .m-side-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    width: min(86vw, 340px);
    background: #131927;
    border-right: 1px solid rgba(255,255,255,0.06);
    transform: translateX(-101%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
    z-index: 2100;
    padding-top: var(--m-safe-top);
    padding-bottom: var(--m-safe-bottom);
    padding-left: var(--m-safe-left);
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
  }
  .m-side-menu.open { transform: translateX(0); }

  .m-side-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .m-side-menu-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent, #6C63FF);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 17px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .m-side-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .m-side-menu-userinfo { flex: 1; min-width: 0; }
  .m-side-menu-name {
    font-weight: 600; font-size: 14.5px;
    color: #e8eaf6;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-side-menu-email {
    font-size: 12px; color: #7c84a0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-side-menu-close {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 10px;
    color: #e8eaf6;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  .m-side-menu-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0;
  }
  .m-side-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: none;
    color: #d6d9e6;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
  }
  .m-side-menu-item:active { background: rgba(255,255,255,0.05); }
  .m-side-menu-item.hidden { display: none; }
  .m-side-icon {
    width: 24px; text-align: center;
    font-size: 17px;
    opacity: 0.85;
  }
  .m-side-badge {
    margin-left: auto;
    background: var(--accent, #6C63FF);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
  }
  .m-side-badge.hidden { display: none; }
  .m-side-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 6px 14px;
  }
  .m-side-danger { color: #ff7a85; }

  /* ── Sidebar content reskin when reparented into sheet ───── */
  .m-sheet .sidebar-accordion-controls {
    padding: 10px 12px 6px;
  }
  .m-sheet .status-filter-wrap,
  .m-sheet .list-search-wrap,
  .m-sheet .tag-filter-mode-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .m-sheet .place-list {
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  .m-sheet .onboarding-card { display: none; }

  /* Make planner / calendar fit nicely */
  .m-sheet .planner-view,
  .m-sheet .calendar-view-container {
    padding-bottom: 16px;
  }

  /* ── Calendar inside the sheet ───────────────────────────── */
  .m-sheet .calendar-view-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    border-right: none !important;
    background: transparent !important;
    animation: none !important;
  }
  .m-sheet .calendar-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    align-items: stretch !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
  }
  .m-sheet .cal-toolbar-left,
  .m-sheet .cal-toolbar-center,
  .m-sheet .cal-toolbar-right {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  /* Title row: prev | title | next | today (4 in a row) */
  .m-sheet .cal-toolbar-center {
    justify-content: space-between !important;
  }
  .m-sheet .cal-view-title {
    flex: 1;
    text-align: center;
    font-size: 15px !important;
    margin: 0 !important;
  }
  .m-sheet .btn-cal-nav,
  .m-sheet .btn-cal-today {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  /* View-mode buttons: 4 across, equal width */
  .m-sheet .cal-view-modes {
    width: 100%;
    display: flex !important;
    background: rgba(255,255,255,0.04);
    border-radius: 11px;
    padding: 3px;
    gap: 0 !important;
  }
  .m-sheet .btn-cal-mode {
    flex: 1;
    min-height: 32px;
    font-size: 12px !important;
    border-radius: 9px !important;
    border: none !important;
    background: transparent !important;
  }
  .m-sheet .btn-cal-mode.active {
    background: var(--accent, #6C63FF) !important;
    color: #fff !important;
  }
  /* Cat/trip filters: side by side */
  .m-sheet .cal-toolbar-right {
    flex-direction: row !important;
    gap: 6px !important;
  }
  .m-sheet .calendar-cat-toggle,
  .m-sheet .calendar-trip-toggle {
    flex: 1;
    min-width: 0;
  }
  .m-sheet .calendar-cat-toggle .btn-trip-filter-toggle,
  .m-sheet .calendar-trip-toggle .btn-trip-filter-toggle {
    width: 100%;
    font-size: 12px !important;
    min-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The calendar grid itself should scroll inside the sheet */
  .m-sheet .calendar-render-area {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px 16px;
  }

  /* When sheet is peek-snapped, hide most of the calendar */
  .m-sheet.snap-peek .calendar-toolbar,
  .m-sheet.snap-peek .calendar-render-area {
    display: none !important;
  }

  /* Hide the calendar container by default when reparented into the sheet —
     the existing toggleSidebarView() un-hides it when calendar tab is active */
  .m-sheet .calendar-view-container.hidden { display: none !important; }

  /* Tap-target boost: status filter buttons */
  .m-sheet .status-filter-btn,
  .m-sheet .filter-mode-btn,
  .m-sheet .btn-accordion,
  .m-sheet .cat-tab-manage {
    min-height: 38px;
    font-size: 13px;
  }
  .m-sheet .btn-trip-action {
    min-width: 38px;
    min-height: 38px;
  }

  /* When peeked, hide most controls (only top summary visible) */
  .m-sheet.snap-peek .place-list,
  .m-sheet.snap-peek .calendar-render-area,
  .m-sheet.snap-peek .planner-list,
  .m-sheet.snap-peek .status-filter-wrap,
  .m-sheet.snap-peek .list-search-wrap,
  .m-sheet.snap-peek .tag-filter-mode-bar,
  .m-sheet.snap-peek .planner-summary {
    display: none !important;
  }
  /* Show only the most relevant section header on peek */
  .m-sheet.snap-peek .sidebar-accordion-controls {
    padding: 6px 12px;
  }

  /* ── Detail panel: convert to bottom sheet ───────────────── */
  .detail-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none;
  }
  .detail-overlay:not(.hidden) {
    pointer-events: auto;
    background: rgba(0,0,0,0.35) !important;
  }
  .detail-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 92dvh !important;
    height: auto !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(0);
    animation: m-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
    padding-bottom: calc(20px + var(--m-safe-bottom)) !important;
    overflow-y: auto !important;
  }
  @keyframes m-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .detail-close {
    position: sticky !important;
    top: 8px !important;
    right: 8px !important;
    margin-left: auto !important;
    z-index: 5;
    background: rgba(0,0,0,0.55) !important;
    color: #fff !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
  }

  /* ── Selection bar: anchor above the bottom nav, not below ─ */
  .selection-bar {
    bottom: calc(var(--m-bottomnav-h) + var(--m-safe-bottom) + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
  }

  /* ── Modal sizing: respect safe area ─────────────────────── */
  .confirm-modal,
  .optimize-day-modal,
  .add-places-modal,
  .manager-modal,
  .icon-picker-modal-inner,
  .booking-modal,
  .share-modal,
  .profile-modal,
  .admin-panel,
  .import-modal,
  .export-modal {
    max-height: calc(100dvh - var(--m-safe-top) - var(--m-safe-bottom) - 24px) !important;
    overflow-y: auto;
  }
  .confirm-modal-actions,
  .optimize-day-footer,
  .add-places-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .confirm-modal-btn {
    width: 100%;
    min-height: 44px;
    font-size: 14.5px;
  }

  /* ── Category & status filter sheet ──────────────────────── */
  .m-filter-sheet-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1200;
  }
  .m-filter-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .m-filter-sheet {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    max-height: 86dvh;
    max-height: 86vh;
    background: var(--surface, #151b2c);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    z-index: 1250;
    padding-bottom: var(--m-safe-bottom);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  .m-filter-sheet:not(.hidden) { transform: translateY(0); }
  .m-filter-sheet.hidden { display: none !important; }

  .m-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .m-filter-sheet-header::before {
    content: '';
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.18);
  }
  .m-filter-sheet-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #e8eaf6;
  }
  .m-filter-sheet-close {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 10px;
    color: #e8eaf6;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .m-filter-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 12px;
  }
  .m-filter-sheet-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + var(--m-safe-bottom));
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .m-filter-footer-btn {
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-filter-footer-btn.secondary {
    background: rgba(255,255,255,0.05);
    color: #d6d9e6;
  }
  .m-filter-footer-btn.primary {
    background: var(--accent, #6C63FF);
    color: #fff;
  }

  .m-filter-section { padding: 14px 0 8px; }
  .m-filter-section + .m-filter-section {
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .m-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .m-filter-section-label {
    font-size: 11px;
    font-weight: 600;
    color: #7c84a0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .m-filter-link {
    background: none;
    border: none;
    color: var(--accent, #6C63FF);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
  }
  .m-filter-link-group {
    display: flex;
    gap: 2px;
  }

  /* Rating filter */
  .m-rating-filter {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .m-rating-star {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    padding: 2px 1px;
    cursor: pointer;
    color: rgba(255,255,255,0.18);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.1s;
  }
  .m-rating-star.active {
    color: #f5b301;
  }
  .m-rating-star:active {
    transform: scale(0.88);
  }
  .m-rating-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #7c84a0;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
  }
  .m-rating-clear.hidden { display: none; }

  /* Tag filter */
  #m-tag-section.hidden { display: none; }
  .m-tag-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .m-tag-group-label {
    font-size: 12px;
    font-weight: 600;
    color: #9aa0b8;
    margin-bottom: 6px;
  }
  .m-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .m-tag-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #c7cbe0;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .m-tag-chip.active {
    background: var(--accent, #6C63FF);
    border-color: var(--accent, #6C63FF);
    color: #fff;
  }

  /* "You are here" location dot */
  .m-location-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a73e8;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(26,115,232,0.35), 0 1px 4px rgba(0,0,0,0.4);
  }

  /* Locate FAB loading state */
  .m-fab.loading {
    opacity: 0.7;
    pointer-events: none;
    animation: m-fab-pulse 1s ease-in-out infinite;
  }
  @keyframes m-fab-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.92); }
  }

  /* Segmented control */
  .m-segmented {
    display: flex;
    background: rgba(255,255,255,0.04);
    border-radius: 11px;
    padding: 3px;
    gap: 0;
  }
  .m-seg-btn {
    flex: 1;
    background: none;
    border: none;
    color: #7c84a0;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 6px;
    border-radius: 9px;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.18s, color 0.18s;
    -webkit-tap-highlight-color: transparent;
  }
  .m-seg-btn.active {
    background: var(--accent, #6C63FF);
    color: #fff;
    box-shadow: 0 2px 8px rgba(108,99,255,0.3);
  }

  /* Category search */
  .m-cat-search {
    position: relative;
    margin-bottom: 8px;
  }
  .m-cat-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #7c84a0;
    pointer-events: none;
  }
  .m-cat-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    color: #e8eaf6;
    font-size: 14px;
    outline: none;
  }
  .m-cat-search input:focus {
    border-color: rgba(108,99,255,0.5);
    background: rgba(255,255,255,0.06);
  }

  /* Category rows */
  .m-cat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .m-cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    transition: background 0.12s;
  }
  .m-cat-row:active { background: rgba(255,255,255,0.05); }
  .m-cat-row.hidden { display: none; }
  .m-cat-row-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .m-cat-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .m-cat-row-name {
    font-size: 14.5px;
    font-weight: 500;
    color: #e8eaf6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-cat-row-count {
    font-size: 12px;
    color: #7c84a0;
  }
  /* iOS-style toggle */
  .m-toggle {
    flex-shrink: 0;
    width: 46px; height: 28px;
    background: rgba(255,255,255,0.1);
    border-radius: 14px;
    position: relative;
    transition: background 0.18s;
    cursor: pointer;
  }
  .m-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .m-toggle.on {
    background: var(--accent, #6C63FF);
  }
  .m-toggle.on::after { transform: translateX(18px); }

  /* Tap-target boost for existing modal buttons */
  .planner-item [data-action] {
    min-width: 36px;
    min-height: 36px;
  }

  /* Loading skeleton (for sheet content) */
  .m-skeleton {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: m-skel 1.4s infinite;
    border-radius: 8px;
  }
  @keyframes m-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Empty state pattern */
  .m-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    color: #7c84a0;
    text-align: center;
  }
  .m-empty-icon {
    font-size: 28px;
    opacity: 0.55;
  }
  .m-empty-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #d6d9e6;
  }
  .m-empty-desc {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 240px;
  }

  /* ── Pick-mode banner ────────────────────────────────────── */
  .m-pick-banner {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: calc(var(--m-topbar-h) + var(--m-safe-top) + 10px);
    left: max(12px, var(--m-safe-left));
    right: max(12px, var(--m-safe-right));
    z-index: 600;
    background: var(--accent, #6C63FF);
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(108,99,255,0.45);
    animation: m-pick-in 0.22s ease;
  }
  .m-pick-banner.hidden { display: none !important; }
  @keyframes m-pick-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
  .m-pick-banner-text {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
  }
  .m-pick-banner-close {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.18);
    border: none;
    border-radius: 8px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* While pick-mode is on, hide the filter chip (would overlap with banner) */
  body.m-pick-active .m-filter-chip { opacity: 0; pointer-events: none; }
  body.m-pick-active .m-fab-stack    { opacity: 0.55; }

  /* ── Calendar: fix detail panel z-index & event visibility ─── */

  /* The detail overlay (z-index: 200 in style.css) must float ABOVE the
     bottom sheet (z-index: 1080) when it is open on mobile. */
  .detail-overlay:not(.hidden) {
    top: 0 !important;
    z-index: 1500 !important;
  }

  /* Calendar render area: allow horizontal scroll for week view */
  .m-sheet .calendar-render-area {
    overflow: auto !important;
    padding: 0 0 16px !important;   /* remove side padding so week view fills full width */
  }

  /* Event badges inside the sheet: make them flex so badge-name can truncate */
  .m-sheet .cal-event-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: unset !important;  /* truncation applied per-span now */
    font-size: 11.5px !important;
    padding: 4px 6px !important;
    min-height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet .badge-icon  { flex-shrink: 0; font-size: 13px; line-height: 1; }
  .m-sheet .badge-time  { flex-shrink: 0; font-size: 10px; font-weight: 700; }
  .m-sheet .badge-name  {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-sheet .badge-uncertain { flex-shrink: 0; }

  /* ── Week view: vertical rows — day header on left, events on right ── */
  /* Each day is a horizontal row: [Mon│26] | [event1] [event2] ...        */
  /* The whole list scrolls vertically inside the render-area.             */
  .m-sheet .cal-week-view {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;  /* parent .calendar-render-area scrolls */
    border-left: none !important;
    gap: 0 !important;
  }
  .m-sheet .cal-week-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  .m-sheet .cal-week-col.today {
    background: rgba(108, 99, 255, 0.06) !important;
  }
  /* Left: compact day-header column */
  .m-sheet .cal-week-header {
    flex: 0 0 56px !important;
    width: 56px !important;
    padding: 10px 6px !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    position: static !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface2) !important;
    gap: 2px !important;
  }
  .m-sheet .cal-week-col.today .cal-week-header {
    background: rgba(108, 99, 255, 0.15) !important;
  }
  .m-sheet .cal-week-header .day-name {
    font-size: 10px !important;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .m-sheet .cal-week-header .day-num {
    font-size: 19px !important;
    font-weight: 700;
    line-height: 1;
  }
  .m-sheet .cal-week-col.today .cal-week-header .day-num {
    color: var(--accent, #6C63FF);
  }
  /* Right: events take full remaining width */
  .m-sheet .cal-week-events {
    flex: 1 1 0 !important;
    padding: 8px 8px 8px 10px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    justify-content: center;
    align-items: stretch;
    min-height: 52px;
  }
  /* "No events" placeholder so empty days still show the header */
  .m-sheet .cal-week-events:empty::after {
    content: 'No events';
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    font-style: italic;
  }

  /* ── Month view: give badges a bit more room ───────────────── */
  .m-sheet .cal-day-cell {
    min-height: 60px;
    padding: 4px 3px !important;
  }
  .m-sheet .cal-month-grid-wrapper .cal-event-badge {
    padding: 2px 4px !important;
    font-size: 10.5px !important;
    min-height: 18px;
  }

  /* ── Day view: full-width comfortable layout in sheet ──────── */
  .m-sheet .cal-day-view {
    padding: 12px !important;
    gap: 10px !important;
  }
  .m-sheet .cal-day-event-row {
    gap: 10px !important;
  }
  .m-sheet .event-time {
    width: 60px !important;
    font-size: 12px !important;
    padding-top: 12px !important;
  }
  .m-sheet .event-details {
    padding: 10px 14px !important;
  }
  .m-sheet .event-name { font-size: 14px !important; }

  /* ── Year view: 2-column grid instead of 3+ ───────────────── */
  .m-sheet .cal-year-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .m-sheet .cal-year-month {
    padding: 12px !important;
  }
  .m-sheet .cal-year-month-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* ── Hard-hide main sheet while secondary sheets are open ─────────
     Belt-and-suspenders: even if the JS snap-hide animation hasn't
     completed, the main sheet is immediately invisible + non-interactive
     the moment a secondary sheet opens. */
  body.m-add-stop-open  #m-sheet,
  body.m-filter-open    #m-sheet {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── Add-stop search sheet (planner: pick from saved places) ───── */
  .m-add-stop-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 1300;
  }
  .m-add-stop-backdrop:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }
  .m-add-stop-sheet {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 88dvh;
    max-height: 88vh;
    background: var(--surface, #151b2c);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    z-index: 1350;
    padding-bottom: var(--m-safe-bottom);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.24, 1);
  }
  .m-add-stop-sheet:not(.hidden) { transform: translateY(0); }
  .m-add-stop-sheet.hidden { display: none !important; }

  .m-add-stop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .m-add-stop-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #e8eaf6;
  }
  .m-add-stop-close {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.05);
    border: none; border-radius: 10px;
    color: #e8eaf6;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .m-add-stop-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .m-add-stop-search-wrap svg { flex-shrink: 0; color: #7c84a0; }
  .m-add-stop-search-wrap input {
    flex: 1;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0 12px;
    color: #e8eaf6;
    font-size: 14px;
    outline: none;
  }
  .m-add-stop-search-wrap input:focus {
    border-color: rgba(108,99,255,0.5);
    background: rgba(255,255,255,0.07);
  }

  .m-add-stop-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
  }
  .m-add-stop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    min-height: 52px;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .m-add-stop-item:active { background: rgba(255,255,255,0.04); }
  .m-add-stop-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .m-add-stop-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .m-add-stop-name {
    font-size: 14px;
    font-weight: 500;
    color: #e8eaf6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-add-stop-addr {
    font-size: 11.5px;
    color: #7c84a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-add-stop-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    background: var(--accent, #6C63FF);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s;
  }
  .m-add-stop-btn:active { transform: scale(0.9); }

  .m-add-stop-footer {
    padding: 10px 16px calc(10px + var(--m-safe-bottom));
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .m-add-stop-pick-btn {
    width: 100%;
    min-height: 48px;
    background: rgba(255,255,255,0.05);
    color: #d6d9e6;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .m-add-stop-pick-btn:active { background: rgba(255,255,255,0.09); }

  /* Mobile-friendly optimize-day modal: full-width bottom sheet style */
  .optimize-day-modal {
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    align-self: flex-end !important;
    margin: 0 !important;
    padding-bottom: calc(20px + var(--m-safe-bottom)) !important;
    animation: m-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0.24, 1) !important;
  }
  .confirm-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .confirm-modal {
    margin: 0 12px calc(12px + var(--m-safe-bottom)) !important;
    width: calc(100% - 24px) !important;
    border-radius: 18px !important;
  }
}

/* ============================================================
   ≤ 480 px  —  small phones, tighter
   ============================================================ */
@media (max-width: 480px) {
  .m-nav-item span { font-size: 10px; }
  .m-side-menu { width: 88vw; }
  .m-filter-chip-label { max-width: 110px; }
  .m-fab { width: 44px; height: 44px; }
  .m-fab-primary { width: 52px; height: 52px; }

  /* Override desktop's 104px navbar growth — we don't wrap anymore */
  .app-layout {
    margin-top: calc(var(--m-topbar-h) + var(--m-safe-top)) !important;
    height: calc(100dvh - var(--m-topbar-h) - var(--m-safe-top)) !important;
  }
}