/* web-v2/css/mobile.css
   Mobile tab navigation. Replaces desktop layout at <= 768px.
   Tab bar is fixed to bottom. Each tab content is full-screen. */

@media (max-width: 768px) {

  .app-shell {
    flex-direction: column;
    height: 100dvh; /* dynamic viewport height — avoids iOS browser chrome */
  }

  /* Override both desktop layouts */
  body.layout-sidebar .app-main,
  body.layout-command .app-main {
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* All panels hidden by default — shown when tab is active */
  .map-container,
  .feed-panel,
  .history-panel,
  .settings-panel-mobile {
    position: absolute;
    inset: 0;
    bottom: 0; /* tab bar sits outside app-main */
    display: none;
    overflow: hidden;
    background: var(--bg-primary); /* must be set or map shows through */
  }

  /* Active tab panels */
  .map-container.tab-active   { display: block; }
  .feed-panel.tab-active      { display: flex; flex-direction: column; }
  .history-panel.tab-active   { display: flex; flex-direction: column; }
  .settings-panel-mobile.tab-active { display: flex; flex-direction: column; overflow-y: auto; padding: .75rem; }

  /* Hide desktop-only sidebar + stats panel headers */
  .feed-panel__header { display: none; }
  body.layout-command .stats-panel { display: none; }

  /* ── Bottom tab bar ── */
  .mobile-tab-bar {
    display: flex;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    height: 48px;
    flex-shrink: 0;
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: .5rem;
    letter-spacing: .1em;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    position: relative;
    transition: color .15s;
  }
  .mobile-tab.active {
    color: var(--accent);
    text-shadow: var(--accent-glow);
    border-top: 2px solid var(--accent);
  }

  /* Red badge on LIVE tab */
  .mobile-tab__badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 14px);
    min-width: 14px;
    height: 14px;
    background: var(--threat-rockets);
    border-radius: 7px;
    font-size: .45rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 0 6px rgba(255, 45, 45, .5);
  }
  .mobile-tab__badge:empty,
  .mobile-tab__badge[data-count="0"] { display: none; }

}

/* Hide mobile tab bar on desktop */
@media (min-width: 769px) {
  .mobile-tab-bar { display: none; }
  .history-panel { display: none; } /* desktop history is inside feed panel tabs */
  .settings-panel-mobile { display: none; }
}