/* Base / structural styles for the Dashboard PWA.
 *
 * Phase 2 module split: reset + typography + the panel-stage / panel / list-area structural rules,
 * carried over verbatim from the old single-file index.html. The old <header> + #tabNav rules are
 * gone (replaced by the bottom #tabbar in components.css); the top safe-area inset the header used
 * to own now lives on #panelStage below. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
}

#panelStage {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
  /* The old <header> owned the top safe-area inset; with the header gone, the panel stage does. */
  padding-top: var(--safe-top);
  /* Claims horizontal gestures on this element for the page instead of Android's system
     edge-swipe-to-go-back (which otherwise intercepts left/right swipes before touch listeners
     ever see them inside a TWA / Chrome Custom Tabs). pan-y keeps native vertical scroll (used
     by .listArea inside each panel) completely untouched - only horizontal panning is given up
     to JS. See frontend-dev/notes.md, 2026-08-17 TWA edge-gesture entry, for the full reasoning
     and sourcing (Chrome uses touch-action: pan-y / none to register an Android Gesture
     Exclusion Rect for the element, so the OS itself skips its back-gesture there). */
  touch-action: pan-y;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.panel[hidden] { display: none; }
.panel.panelEnterLeft { animation: panelEnterLeft .16s ease; }
.panel.panelEnterRight { animation: panelEnterRight .16s ease; }
@keyframes panelEnterLeft {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes panelEnterRight {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.listArea {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.loadingMsg, .emptyMsg {
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0;
  text-align: center;
}