/* Mobile application shell; desktop keeps its existing navigation. */
.mobile-nav, .mobile-add, .mobile-menu-head { display: none; }
@media (max-width: 767px) {
  :root { --app-nav-height: 70px; --app-surface: #141b26; --app-accent: #73bedf; }
  html { background: #0b1019; }
  body { background: #0b1019 !important; padding-bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom) + 18px); letter-spacing: 0; }
  body::before { background: #0e1520; }
  .topbar { position: sticky !important; top: 0; z-index: 20; padding: max(10px, env(safe-area-inset-top)) 16px 10px !important; background: rgba(14,21,32,.96) !important; backdrop-filter: blur(16px); border-bottom: 1px solid #222b38; box-shadow: none !important; }
  .topbar__row--main { display: flex !important; min-height: 44px; }
  .topbar__left { flex-wrap: nowrap !important; gap: 8px !important; }
  .topbar h1, #viewTitle { font-size: 19px !important; font-weight: 750; line-height: 1.2 !important; }
  #viewSubtitle { display: none !important; }
  .topbar__right { flex-wrap: nowrap !important; }
  #menuToggle, #goBackBtn, .topbar__right #openSettings, .topbar__right .upseller-cta, #currentUserLabel { display: none !important; }
  #bellNotifBtn { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: #1a2330 !important; }
  body:not([data-view="stock"]) .topbar__row--controls { display: none !important; }
  .topbar__actions.topbar__actions--search-first { gap: 8px !important; }
  .topbar__actions #search.search-main { background: #1a2330 !important; border: 1px solid #2b3544 !important; border-radius: 14px !important; height: 44px !important; padding-left: 16px !important; font-weight: 500 !important; }
  .sort-refresh-row #sortBy { background: #141d29 !important; border-radius: 12px !important; height: 40px !important; font-size: 13px !important; }
  .sort-refresh-row #refresh { height: 40px !important; min-height: 40px !important; }
  .app-content { padding-top: 8px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; min-height: calc(var(--app-nav-height) + env(safe-area-inset-bottom)); padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: rgba(16,23,34,.97); backdrop-filter: blur(20px); border-top: 1px solid #283240; box-shadow: 0 -8px 30px #0003; }
  .mobile-nav__item { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; min-width: 0; padding: 5px 2px; border: 0; border-radius: 14px; background: transparent; color: #99a7bb; cursor: pointer; font-size: 10px; font-weight: 650; }
  .mobile-nav__item svg { width: 23px; height: 23px; }
  .mobile-nav__item[aria-current="page"] { color: var(--app-accent); background: #73bedf12; }
  .mobile-nav__item:active { background: #ffffff12; }
  .mobile-add { display: flex; align-items: center; gap: 6px; position: fixed; z-index: 25; right: 16px; bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom) + 14px); min-height: 48px; padding: 10px 16px; border: 1px solid #a0d7ef; border-radius: 16px; background: #73bedf; color: #102027; font-size: 13px; font-weight: 750; box-shadow: 0 5px 24px #0006; }
  .mobile-add span { font-size: 23px; line-height: 1; }
  body:not([data-view="stock"]) .mobile-add, body.menu-open .mobile-add, body.is-busy .mobile-add { display: none; }
  html.kb-open .mobile-nav, html.kb-open .mobile-add { display: none; }
  #stockView .grid { padding-bottom: 82px !important; }
  #stockView .kpis { gap: 8px !important; padding-top: 8px !important; }
  #stockView .kpi { background: #151d29 !important; border: 1px solid #263142 !important; box-shadow: none !important; min-height: 72px; padding: 10px 12px !important; }
  #stockView .kpi__label { color: #a7b4c7; font-size: 10px !important; }
  #stockView .kpi__value { font-size: 24px !important; }
  #stockView .kpi--warn { background: #261f16 !important; border-color: #58421f !important; }
  #stockView .kpi--danger { background: #28191e !important; border-color: #5c2935 !important; }
  #statusFilters { padding-top: 10px !important; }
  #statusFilters .chip { border-radius: 12px !important; }
  #stockView .card { background: #131b27 !important; border: 1px solid #263142 !important; box-shadow: none !important; border-radius: 18px !important; }
  #stockView .card__body { gap: 8px !important; }
  #stockView .card__split { background: #0d1520 !important; border-color: #263142 !important; }
  #stockView .card__actions-inline .btn { border-radius: 12px !important; }
  #stockView .card__footer { margin-top: 4px !important; padding-top: 0 !important; }
  .side-menu { top: auto; bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom) + 8px); left: 8px; width: calc(100% - 16px); height: auto; max-height: calc(100dvh - var(--app-nav-height) - env(safe-area-inset-bottom) - 40px); border: 1px solid #344154; border-radius: 24px; padding: 16px !important; background: #17202d !important; transform: translateY(calc(100% + 130px)); }
  body.menu-open .side-menu { transform: translateY(0); }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 20px; }
  .side-accordion { border: 0 !important; background: transparent !important; }
  .side-accordion__summary { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #91a2ba; }
  .side-accordion__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .side-menu__btn { background: #212d3d !important; border: 1px solid #344154 !important; border-radius: 14px !important; padding: 12px !important; font-size: 13px !important; text-align: left; }
  .side-menu-backdrop { background: #0009; backdrop-filter: blur(4px); }
  :where(.history, .pricing, .settings, .scan, .finance, .upseller, #notificationsPanel, #kanbanPanel) { padding: 12px 14px 24px !important; }
  :where(.history__head h2, .pricing__head h2, .settings__head h2, .finance__title) { font-size: 20px !important; line-height: 1.3; }
  :where(.pricing__box, .pricing-admin__card, .finance-kpi, .finance-entry, .upseller-order, .settings__card) { background: #141d29 !important; border-color: #293548 !important; border-radius: 16px !important; box-shadow: none !important; }
  .upseller__header { margin-bottom: 0 !important; gap: 8px !important; }
  .upseller__sync-status { font-size: 11px !important; padding: 6px 10px !important; border-radius: 10px !important; margin-block: 0 !important; }
  .upseller__state-counts-grid { width: 100% !important; max-width: none !important; }
  .upseller__state-count { min-height: 78px !important; padding: 8px 4px !important; }
  .upseller__tabs { gap: 4px !important; padding: 4px !important; background: #172130; border: 1px solid #293548; border-radius: 14px; margin-block: 6px !important; }
  .upseller__tab { padding: 10px 12px !important; font-size: 12px !important; border: 0 !important; border-radius: 10px; }
  .upseller__tab.is-active { background: #29394b !important; color: #a1d7ef !important; box-shadow: none !important; }
  #upsellerKanbanBoard .kanban-column { background: #121b27 !important; border-color: #293548 !important; }
  #upsellerKanbanBoard .kanban-column__header { margin-bottom: 10px; }
  #upsellerKanbanBoard .kanban-column__body { gap: 10px; }
  #upsellerKanbanBoard .kanban-card { background: #1a2432 !important; border-color: #304055 !important; }
  .history__table-wrap { border-radius: 14px; }
  .history__table th { background: #1c2838 !important; }
  .dialog { border-radius: 24px !important; background: #17202d !important; border: 1px solid #344154; }
  .dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
  .dialog__header { border-bottom: 1px solid #344154; }
  .dialog__actions, .dialog__footer { background: #17202d !important; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; }
  .input { background: #101925 !important; border-color: #344154 !important; }
  .finance__tabs { background: #172130; border-radius: 14px; padding: 4px; }
  .finance__tab { border: none !important; border-radius: 10px; }
  .finance__tab.is-active { background: #29394b; }
  .toast-stack { bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom) + 12px) !important; }
}
@media (max-width: 640px) {
  #stockView .card__meta { font-size: 10px !important; }
  dialog.dialog { margin: auto auto max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); max-height: calc(100dvh - env(safe-area-inset-top) - 24px); }
}
@media (display-mode: standalone) and (max-width: 767px) {
  body { overscroll-behavior-y: none; }
}
@media (max-width: 767px) {
  .side-menu { visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(24px); transition: transform .2s ease, opacity .2s ease, visibility .2s; }
  body.menu-open .side-menu { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); }
}