/* ============================================================
   mobile.css — Phone-first overrides for the dispatch app
   Loaded AFTER style.css so every rule in here wins.
   Desktop experience is untouched above 900px.
   ============================================================ */

/* ---- TABLET breakpoint: ease off a few dense things ---- */
@media (max-width: 1100px) {
  :root { --sidebar-width: 220px; --panel-width: 260px; --header-height: 120px; }
  .date-nav { flex-wrap: wrap; justify-content: center; }
  .header-title-row { flex-wrap: wrap; justify-content: center; }
  /* Vertical dispatcher chip columns flanking the top toolbar — collapse
     to horizontal flow on tablet so they don't push the title off-screen
     when several dispatchers are online. */
  .header-dispatchers-col { flex-direction: row; flex-wrap: wrap; }
}

/* ---- PHONE breakpoint: full mobile reflow ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
    --mobile-tabbar-height: 60px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Prevent horizontal overflow — any child wider than the viewport
     causes mobile browsers to auto-shrink (zoom out) the whole page
     to fit, which makes content appear tiny in the corner. Pin
     root elements to the viewport width and clip any overflow. */
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
  }
  /* Reset the desktop 3-column body grid (sidebar | map | panel) on
     mobile — the panes are tabbed (only one visible at a time) so
     they need to be full-viewport-width, not constrained to a 1fr
     middle column. Without this override, .app-header / .app-body
     stay placed in grid-column: 2 which collapses to 0px on a
     390px screen (sidebar 280 + panel 340 = 620 > 390). The legacy
     "tab pane doesn't extend full width" / "header blocks the
     content" symptoms both come from this. */
  body {
    font-size: 14px;
    position: relative;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  /* Direct grid items in the desktop layout — break them out of the
     grid placement so they flow as block elements instead. */
  .app-header,
  .app-body,
  .volunteer-panel,
  .shift-panel,
  .map-container,
  .personal-shift-recommendations {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Every direct child of body must respect the viewport width. */
  body > * { max-width: 100vw; box-sizing: border-box; }

  /* ---- COMPACT HEADER ---- */
  .app-header {
    /* Pinned to viewport top so the tab pane below can fill the rest
       of the screen edge-to-edge. position:fixed (not absolute) means
       it stays put during pane-internal scroll AND is not affected
       by ancestor positioning quirks (the desktop body grid that
       used to box .app-header into a 0-width middle column). */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* overflow:visible so the absolute-positioned .date-nav (which
       sits at top: var(--header-height)) isn't clipped by the
       header's height. */
    overflow: visible;
    border-top-width: 2px;
    z-index: 1100;
  }
  .app-title {
    font-size: 13px;
    letter-spacing: 0.5px;
    gap: 4px;
    white-space: nowrap;
  }
  .app-title .header-logo { height: 16px; }
  /* Drop the "Dispatch" suffix on mobile — there's no horizontal room
     for it next to the logo + buttons + dispatcher chips, and the
     stampede horse logo already brands the page clearly enough. */
  .app-title-suffix { display: none; }

  /* Header-center: stack title row + date-nav vertically, both compact. */
  .header-center {
    flex: 1;
    min-width: 0;
    gap: 0;
  }
  .header-title-row {
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    justify-content: space-between;
  }
  .header-title-left,
  .header-title-right {
    gap: 2px;
    flex-shrink: 0;
  }
  .header-title-left .nav-toggle,
  .header-title-right .nav-toggle {
    padding: 4px 4px;
    font-size: 14px;
  }
  /* Region picker is now inline in the title row's left cluster — keep it
     compact on phones so the title still fits. */
  .region-logo { height: 18px; max-width: 40px; margin-right: 0; }
  .region-picker { font-size: 12px; padding: 2px 4px; border-left-width: 3px; }

  /* Vertical dispatcher chip columns — hide entirely on mobile. The
     presence info isn't decision-critical for a phone-using activist
     and the columns would steal too much horizontal room from the
     already-tight header. The legacy off-screen mounts in
     #dispatcher-badge / #active-dispatchers are still updated by
     app.js so any code reading them keeps working. */
  .header-dispatchers-col,
  .header-dispatchers-left,
  .header-dispatchers-right { display: none !important; }

  /* Date nav → fixed sub-header strip directly below the main header.
     position:fixed so it stays put during pane-internal scroll and
     isn't clipped by .app-header's box. The .app-body below sets its
     own `top` to header + 44 to leave room for this strip. */
  .date-nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    height: 44px;
    background: var(--header-bg, #fff);
    border-bottom: 1px solid var(--border);
    margin-top: 0;
    padding: 0 10px;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    z-index: 1090;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  [data-theme="dark"] .date-nav {
    background: var(--header-bg);
    border-bottom-color: var(--border);
  }
  .date-nav button {
    font-size: 13px;
    padding: 8px 12px;
    min-width: 44px;
    min-height: 36px;
  }
  #current-date-label {
    font-size: 14px;
    min-width: 0;
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #date-picker { display: none; }
  #date-counter { display: none; }

  /* Hide nav-toggles and dividers from the date-nav on mobile —
     they move into the hamburger drawer. Keep only prev/next +
     date label + inbox (surfaced as a separate top-right button). */
  .date-nav .nav-divider,
  .date-nav .nav-toggle:not(#btn-inbox):not(#btn-mobile-menu) {
    display: none;
  }
  .date-nav .district-type-picker { display: none; }

  /* ---- APP BODY: tabbed single-pane ---- */
  .app-body {
    /* Pinned to viewport so the tab pane below has explicit edges
       regardless of what .app-header / .date-nav are doing. Without
       this, .app-body's height/position depended on flex/grid math
       that the desktop body grid was breaking (sidebar 280 + panel
       340 > viewport on a 390px phone made the middle column 0px).
       position:fixed sidesteps the whole layout chain. */
    position: fixed;
    top: calc(var(--header-height) + 44px);
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    z-index: 1;
  }

  /* All three panes full-bleed, only one visible at a time via
     body.mobile-view-* class. The personal-shift-recommendations
     panel (Personal mode's left-side reco list) shares the same
     reset so it slots into the "activists" tab on mobile when
     personal mode hides the dispatcher activist sidebar. */
  .volunteer-panel,
  .shift-panel,
  .map-container,
  .personal-shift-recommendations {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100%;
    min-width: 0 !important;
    flex: none !important;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }
  .volunteer-panel,
  .shift-panel,
  .personal-shift-recommendations { overflow-y: auto; }
  /* Leave bottom padding on scrollable panels so the tab bar doesn't
     cover the final row of content. */
  .volunteer-panel,
  .shift-panel,
  .personal-shift-recommendations {
    padding-bottom: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom) + 8px);
  }

  body.mobile-view-activists .volunteer-panel,
  body.mobile-view-map .map-container,
  body.mobile-view-shifts .shift-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
  }
  /* Personal mode: the Recommendations panel stands in for the
     Activists pane on the "Activists" tab, since the dispatcher
     volunteer sidebar (volunteer-panel) is hidden in Personal mode. */
  body.personal-mode.mobile-view-activists .personal-shift-recommendations {
    display: flex !important;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
  }

  /* Panel collapse buttons are irrelevant on mobile */
  .panel-collapse-btn { display: none !important; }

  /* Volunteer panel tweaks */
  .volunteer-panel {
    width: 100% !important;
    min-width: 0 !important;
    background: var(--panel-bg, #fafafa);
  }
  .panel-header {
    padding: 10px 12px;
    font-size: 13px;
    /* Drop the gap so the title sits flush left with the panel border. */
    gap: 0;
  }
  /* Tool clusters that moved INTO the panel headers (hidden activists,
     inbox, auto / stats / workflow, coalition) — the mobile drawer
     already exposes these via proxy buttons, and the panel-header is
     too cramped on a phone to hold them inline. Hide them here so the
     header just shows its title. The buttons themselves stay in the
     DOM (so the drawer's #btn-* lookups still find them) but become
     invisible / non-tappable on mobile. */
  .panel-header-tools { display: none !important; }
  #volunteer-search {
    font-size: 15px; /* ≥16px prevents iOS zoom on focus; 15 feels tighter, use 16 to be safe */
    font-size: 16px;
    padding: 10px 12px;
  }
  /* Filter rows reflow into a denser grid on mobile so multiple
     dropdowns share each visual row instead of stacking one per
     line. User request 2026-05-10: "all of the dropdowns take up
     way too much space. Can you shrink them so multiples of them
     can fit on each line?"
     `flex: 1 1 calc(50% - 3px)` lets two filters share a row;
     short-label filters (e.g. "Mine:") let theirs widen via flex
     while long-label rows (e.g. "Engagement:") stay readable. */
  .filter-section { gap: 4px; }
  .filter-row {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    gap: 3px;
  }
  /* Native <select> + multi-select trigger button — bring them
     down from desktop's already-compact size to something that
     leaves room for two per row on a 360-400px viewport without
     making the touch target uncomfortable. min-height stays at
     32px so taps are still reliable. */
  .filter-section select,
  .filter-section .filter-select {
    font-size: 12px;
    padding: 5px 4px;
    min-height: 32px;
  }
  /* .ms-btn keeps its right padding for the dropdown arrow icon
     baked into the background; text-overflow handles long
     comma-joined selection labels ("Trained, Not Trained"). */
  .filter-section .ms-btn {
    font-size: 12px;
    padding: 5px 16px 5px 5px;
    min-height: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .filter-label {
    /* Tighter label so the dropdown gets most of the half-row
       width. Wraps by default if the label runs long, but most
       are 6-12 chars so it doesn't matter in practice. */
    font-size: 10px;
    flex: 0 0 auto;
    max-width: 60px;
    line-height: 1.1;
  }
  .bulk-actions-row { flex-wrap: wrap; }
  .bulk-action-btn {
    flex: 1 1 48%;
    font-size: 12px;
    padding: 8px;
    min-height: 40px;
  }

  /* Activist cards — bigger, easier to tap */
  .volunteer-card {
    padding: 10px 12px !important;
    font-size: 14px;
    min-height: 44px;
  }
  .ward-header {
    font-size: 14px;
    padding: 10px 10px;
    min-height: 44px;
  }

  /* Shift panel tweaks */
  .shift-panel {
    width: 100% !important;
    min-width: 0 !important;
    background: var(--panel-bg, #fafafa);
  }
  .shift-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .shift-card h4, .shift-card .shift-title { font-size: 15px; }

  /* Map pane */
  .map-container { min-height: 0; }
  #map { height: 100%; width: 100%; }

  /* Shrink the map search box on phones so it clears the zoom controls. */
  .map-search-box {
    width: calc(100% - 80px);
    max-width: 320px;
    right: 8px;
    top: 8px;
    font-size: 12px;
  }
  .map-search-input { font-size: 14px; padding: 8px; }
  .map-search-btn,
  .map-search-clear-pins-btn { padding: 6px 10px; font-size: 16px; }
  .map-search-results { max-height: 240px; }

  /* On mobile the toolbar variant drops to a compact width that fits the
     bottom drawer / top toolbar comfortably. */
  .map-search-box.map-search-box--toolbar {
    width: 180px;
    max-width: 180px;
    right: auto;
    top: auto;
  }
  .map-search-box.map-search-box--toolbar .map-search-input {
    font-size: 12px;
    padding: 5px 7px;
  }

  /* Leaflet bottom controls should clear the tab bar on mobile so
     zoom / attribution buttons remain tappable. */
  .map-container .leaflet-bottom {
    bottom: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom) + 4px) !important;
  }

  /* Bottom dispatcher toolbar (Box Select, Lines, Districts, Coalition,
     Faded shifts, Map search) — would otherwise overlap the mobile
     tabbar at the bottom of the screen. The drawer's "Map Layers" /
     "Tools" sections already proxy these buttons by ID, so on mobile
     the floating bottom toolbar is redundant — hide it. */
  .bottom-toolbar { display: none !important; }

  /* Touch-friendly Leaflet controls */
  .leaflet-touch .leaflet-bar a,
  .leaflet-touch .leaflet-control-layers-toggle {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  /* ---- BOTTOM TAB BAR ---- */
  #mobile-tabbar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom));
    padding-bottom: var(--mobile-safe-bottom);
    background: var(--header-bg, #fff);
    border-top: 1px solid var(--border);
    z-index: 1500;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  }
  #mobile-tabbar button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #888);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: inherit;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-tabbar button .tab-icon {
    font-size: 22px;
    line-height: 1;
  }
  #mobile-tabbar button.active {
    color: var(--primary-dark, #4bc700);
  }
  #mobile-tabbar button.active::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 3px;
    background: var(--primary);
  }
  #mobile-tabbar button .tab-badge {
    position: absolute;
    top: 4px; right: 20%;
    background: var(--danger, #c62828);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
  }
  [data-theme="dark"] #mobile-tabbar {
    background: #111;
    border-top-color: var(--border);
  }

  /* ---- HAMBURGER + DRAWER ---- */
  #btn-mobile-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 0;
    position: relative;
  }
  #btn-mobile-menu .menu-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
  }

  #mobile-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 85%;
    max-width: 360px;
    background: var(--modal-bg, #fff);
    z-index: 4500;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex !important;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0,0,0,0.2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mobile-drawer.open { transform: translateX(0); }
  #mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 4400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #mobile-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 16px;
    background: var(--header-bg);
  }
  .mobile-drawer-close {
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text);
    line-height: 1;
    padding: 4px 8px;
  }
  .mobile-drawer-section {
    padding: 12px 8px 8px;
    border-bottom: 1px solid var(--border-light);
  }
  .mobile-drawer-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 8px 8px;
    font-weight: 700;
  }
  .mobile-drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }
  .mobile-drawer-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    text-align: center;
    line-height: 1.2;
    border-radius: 0;
    position: relative;
  }
  .mobile-drawer-btn.active {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #000;
  }
  .mobile-drawer-btn .drawer-btn-icon { font-size: 22px; line-height: 1; }
  .mobile-drawer-btn .drawer-btn-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
  }

  /* ---- TAP-TO-ASSIGN BANNER ---- */
  #mobile-assign-banner {
    display: none;
    position: fixed;
    top: calc(var(--header-height) + 44px);
    left: 0; right: 0;
    background: var(--primary);
    color: #000;
    padding: 8px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    z-index: 1800;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: slideDownFromTop 0.2s ease;
  }
  #mobile-assign-banner.active { display: flex; align-items: center; gap: 8px; justify-content: center; }
  #mobile-assign-banner button {
    background: #000;
    color: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-left: auto;
  }
  @keyframes slideDownFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }

  /* ---- FULL-SCREEN MODALS ON MOBILE ---- */
  .ideas-panel,
  .coalition-panel {
    top: var(--header-height) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - var(--header-height) - var(--mobile-tabbar-height)) !important;
    height: calc(100dvh - var(--header-height) - var(--mobile-tabbar-height)) !important;
    border-radius: 0;
    z-index: 3500;
  }

  /* Generic modal overlays */
  .modal-overlay,
  .sms-modal-overlay,
  .assign-modal-overlay,
  .bulk-sms-overlay,
  .conversation-overlay {
    padding: 0 !important;
  }
  .modal-content,
  .sms-modal,
  .assign-modal,
  .bulk-sms-modal,
  .conversation-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Box-select popup → bottom sheet */
  .box-select-popup {
    bottom: calc(var(--mobile-tabbar-height) + var(--mobile-safe-bottom) + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60dvh !important;
  }

  /* Make form inputs in modals readable & no iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  textarea,
  select { font-size: 16px !important; }

  /* Larger buttons across the app on touch */
  button { min-height: 36px; }

  /* Ring-controls select inside shift popup */
  .shift-popup { font-size: 13px; }
  .shift-popup .ring-controls select { font-size: 14px; padding: 6px; min-height: 36px; }

  /* Inbox / conversation threads — make bubbles roomier */
  .inbox-message {
    padding: 10px 12px !important;
    font-size: 14px;
  }

  /* ---- Bug fix: panel header trays ----
     The rule above hides .panel-header-tools but the actual HTML class is
     .panel-header-tray — so inbox, leaderboard, auto/stats/workflow/coalition
     buttons were leaking into the cramped panel headers. The drawer already
     proxies all of these buttons, so hiding is safe. */
  .panel-header-tray { display: none !important; }

  /* ---- Bug fix: header utility tray overflow ----
     The right tray has 10 nav-toggle buttons (notifications, ideas, tasks,
     twilio, voicemails, dark, sound, ladder, demo, layout). They don't fit
     in a 56px-tall mobile header and spill off-screen. All are proxied in
     the hamburger drawer — hide the tray entirely. */
  .header-title-right { display: none !important; }

  /* ---- Bug fix: region-logo-tall specificity ----
     .region-logo.region-logo-tall (specificity 0,2,0) wins over the generic
     .region-logo (0,1,0) override earlier in this block, so the tall logo
     still stretched to fill the full 56px header. Match the specificity here
     to pin it to a sensible mobile height. */
  .region-logo.region-logo-tall {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 60px !important;
    align-self: center !important;
  }

  /* ---- Map search box (lifted out of the hidden toolbar by mobile.js) ----
     #map-search-box lives inside .bottom-toolbar which is display:none on
     mobile, so no CSS alone can make it visible. mobile.js re-parents it to
     <body> with the .mobile-lifted class. Once lifted, show it pinned to the
     top of the map pane only when the map tab is active. */
  #map-search-box.mobile-lifted {
    display: none;
    position: fixed;
    top: calc(var(--header-height) + 44px + 8px);
    left: 8px;
    right: 8px;
    width: auto !important;
    max-width: none !important;
    z-index: 1200;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #ccc);
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    flex-direction: column;
    padding: 0;
  }
  body.mobile-view-map #map-search-box.mobile-lifted {
    display: flex !important;
  }
  #map-search-box.mobile-lifted .map-search-input-row {
    display: flex;
    width: 100%;
  }
  #map-search-box.mobile-lifted .map-search-input {
    font-size: 16px !important;
    padding: 10px 12px;
    flex: 1;
  }
  /* Results open downward (lifted box is at the top of the map pane, not the
     bottom of the viewport like in the desktop toolbar). Override the
     bottom-toolbar upward-dropdown rule which no longer applies once the
     element is re-parented out of .bottom-toolbar. */
  #map-search-box.mobile-lifted .map-search-results {
    bottom: auto !important;
    top: 100% !important;
    margin-top: 2px;
    margin-bottom: 0;
    max-height: 200px;
    border-top: none;
  }

  /* ---- Filter section flex-wrap ----
     style.css sets filter-section as a column (stacks rows vertically).
     The .filter-row flex:1 1 calc(50% - 3px) sizing rule in this file only
     works if the parent is a wrapping flex row — enforce that here so two
     filters share each visual line on mobile instead of stacking. */
  .filter-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

/* ---- Loading screen on mobile ---- */
@media (max-width: 768px) {
  .loading-region-buttons {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 12px;
  }
  .loading-region-btn {
    min-width: 120px;
    min-height: 80px;
    flex: 1 1 40%;
    padding: 10px 12px;
  }
  .loading-region-logo { max-height: 56px; max-width: 110px; }
  .loading-title { font-size: 18px; }
  .loading-horse { font-size: 52px; }
}

/* ---- Very small phones (<380px) ---- */
@media (max-width: 380px) {
  .app-title { font-size: 12px; }
  .app-title .header-logo { height: 14px; }
  #current-date-label { font-size: 13px; }
  .date-nav button { padding: 8px 8px; font-size: 12px; }
  #mobile-tabbar button { font-size: 10px; }
  #mobile-tabbar button .tab-icon { font-size: 20px; }
  /* Trim the inline buttons + region picker on very small phones so the
     title row still fits without wrapping. */
  .header-title-left .nav-toggle,
  .header-title-right .nav-toggle { padding: 4px 3px; font-size: 13px; }
  .region-logo { height: 16px; max-width: 30px; }
  .region-picker { font-size: 11px; padding: 2px 3px; }
}

/* ---- LANDSCAPE PHONE (short screens) ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root { --mobile-tabbar-height: 50px; }
  .app-header { height: 44px; }
  :root { --header-height: 44px; }
  .date-nav { height: 36px; top: 44px; }
  .app-body { margin-top: 36px; height: calc(100vh - 44px - 36px); height: calc(100dvh - 44px - 36px); }
}

/* ---- Desktop / tablet: hide mobile chrome ---- */
@media (min-width: 769px) {
  #mobile-tabbar,
  #mobile-drawer,
  #mobile-drawer-backdrop,
  #mobile-assign-banner,
  #btn-mobile-menu { display: none !important; }
}