/* Canonical shared mobile shell. Component-specific responsive cards stay in styles.css. */
.mobile-only, .mobile-backdrop { display: none; }
@media (max-width: 1199px) {
  .mobile-only { display: block; }
  #app .dashboard-screen { grid-template-columns: minmax(0, 1fr); padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  #app .main-content, #app .view-section, #app .panel { min-width: 0; max-width: 100%; }
  /* Drawer replaces the legacy horizontal and game bottom navigation. */
  #app #dashboardNavigation {
    position: fixed; inset: 0 0 0 auto; z-index: 1100; width: min(320px, calc(100vw - 48px));
    height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 20px 0 0 20px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(110%);
    transition: transform .2s ease;
  }
  #app #dashboardNavigation.mobile-nav-open { visibility: visible; transform: translateX(0); }
  #app #dashboardNavigation .nav-list { display: flex !important; flex-direction: column; overflow: visible; gap: 8px; }
  #app #dashboardNavigation .nav-group { display: block; flex: none; width: 100%; }
  #app #dashboardNavigation .nav-group-text { display: grid !important; }
  #app #dashboardNavigation .nav-group-toggle { display: flex !important; }
  #app #dashboardNavigation .nav-group-toggle::after { display: inline !important; }
  #app #dashboardNavigation .nav-group-items { display: grid; }
  #app #dashboardNavigation .nav-group.collapsed .nav-group-items { display: none; }
  #app #dashboardNavigation .nav-group:is(.company-single-nav-group, .financial-expanded-nav-group) > .nav-group-items { display: grid; }
  #app #dashboardNavigation .company-single-nav-group > .nav-group-toggle { display: none !important; }
  #app #dashboardNavigation .nav-item { font-size: 14px; justify-content: flex-start; min-width: 0; padding: 10px 12px; min-height: 44px; }
  #app #dashboardNavigation .nav-item::after { inset-inline-start: calc(var(--sidebar-icon-pad) + (var(--sidebar-icon-box) - var(--sidebar-icon-size)) / 2); transform: translateY(-50%); }
  #app #dashboardNavigation .sidebar-logo-lockup { display: block; max-width: 180px; }
  #app #dashboardNavigation .sidebar-logo-only { display: none; }
  #app .mobile-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1090; background: rgb(0 0 0 / .5); border: 0; border-radius: 0; }
  /* Compact header: title, account controls, then shared actions. */
  #app .topbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; min-width: 0; direction: rtl; }
  #app .topbar-title-block { display: block; flex: 1; width: auto; min-width: 0; }
  #app #mobileMenuBtn { width: auto; flex: 0 0 auto; }
  #app .topbar::after { content: none; }
  #app #pageTitle { display: block !important; font-size: 18px; margin: 0; overflow-wrap: anywhere; }
  #app .topbar-actions { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; gap: 6px; min-width: 0; }
  #app .topbar-profile { display: flex !important; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; min-width: 0; }
  #app .topbar-user-copy { flex: 1; min-width: 60px; overflow-wrap: anywhere; }
  #app .topbar-avatar { display: none; }
  #app .topbar-profile .topbar-user-copy { direction: rtl; text-align: right; justify-items: start; }
  #app .topbar-actions > button:not(.hidden), #app .topbar-profile > button:not(.hidden) { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; min-width: 44px; flex: 0 0 auto; }
  #app #exportCsvBtn { width: auto; font-size: 12px; padding: 0 8px; }

  #app .topbar button { min-height: 44px; }
  /* One scrollable filter surface, sized to the keyboard-aware viewport. */
  #app #topbarFiltersPanel:not(.hidden) {
    position: fixed; inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left));
    z-index: 6000; width: auto; max-width: none; max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--panel, var(--bg)); border: 1px solid var(--line, #888); border-radius: 16px;
  }
  #app .mobile-filter-heading { display: flex; align-items: center; justify-content: space-between; }
  #app #globalFiltersPanel { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; padding: 12px 0; }
  #app #mobileDateSlot .topbar-date-range { display: block; width: 100%; }
  #app #mobileDateSlot .topbar-date-range-panel { position: static !important; inset: auto !important; width: 100%; min-width: 0; max-width: 100%; max-height: none; overflow: visible; }
  #app #mobileFiltersApply { width: 100%; min-height: 44px; }
  #app .mobile-filter-summary { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
  #app .mobile-filter-summary:empty { display: none; }
}
@media (max-width: 980px) {
  #app .wallet-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .wallet-kpi-grid .kpi-card { min-width: 0; overflow-wrap: anywhere; }
  #app input, #app select, #app textarea { font-size: 16px; }
  #app .table-wrap { max-width: 100%; overflow-x: auto; }
  #app img, #app video { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #app #dashboardNavigation { transition: none; } }