html, body { background: var(--fw-bg); color: var(--fw-text-primary); }

#app {
  position: fixed; inset: 0;
  display: flex;
  overflow: hidden;
}

/* ---------- Screen stack ---------- */
#screen-stack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--fw-bg);
}
.screen {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fw-bg);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
  will-change: transform;
}
.screen[data-entering="right"] { transform: translateX(100%); }
.screen[data-leaving="left"] { transform: translateX(-30%); opacity: .0; }
.screen.is-modal { background: var(--fw-bg-higher); }

.screen-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-b) + 24px);
}
.screen-body.no-scroll { overflow: hidden; }
.screen-body.flush { padding: 0; }

/* ---------- Toolbar ---------- */
.toolbar {
  flex: 0 0 auto;
  height: var(--toolbar-h);
  padding-top: var(--safe-t);
  height: calc(var(--toolbar-h) + var(--safe-t));
  display: flex; align-items: center;
  background: var(--fw-surface);
  border-bottom: 1px solid var(--fw-outline);
  padding-left: max(4px, var(--safe-l));
  padding-right: max(4px, var(--safe-r));
  gap: 2px;
  position: relative;
  z-index: 5;
}
.toolbar-btn {
  width: 44px; height: 44px; border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--fw-text-primary);
}
.toolbar-btn:active { background: var(--fw-ripple); }
.toolbar-btn .icon { width: 22px; height: 22px; }
.toolbar-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-xl); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px;
}
.toolbar-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.toolbar-action-text {
  padding: 0 14px; height: 36px; border-radius: var(--r-round);
  display: flex; align-items: center; font-weight: 600; font-size: var(--fs-sm);
  color: var(--fw-primary);
}
.toolbar-action-text:active { background: var(--fw-ripple); }
.toolbar-action-text.primary { background: var(--fw-primary); color: var(--fw-on-primary); padding: 0 18px; }

/* ---------- Split (master-detail, iPad landscape) ---------- */
.split {
  display: flex; height: 100%; width: 100%;
}
.split-master {
  width: 380px; flex: 0 0 380px;
  border-right: 1px solid var(--fw-outline);
  display: flex; flex-direction: column;
  background: var(--fw-surface);
  min-width: 0;
}
.split-detail {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--fw-bg);
}
.split-detail-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--fw-text-secondary); font-size: var(--fs-m); flex-direction: column; gap: 12px;
}
.split-detail-empty .icon { width: 64px; height: 64px; opacity: .25; }

@media (max-width: 900px), (orientation: portrait) {
  .split-master { width: 100%; flex: 1 1 100%; border-right: none; }
  .split.detail-active .split-master { display: none; }
  .split-detail { display: none; }
  .split.detail-active .split-detail { display: flex; flex: 1 1 100%; }
}

/* ---------- Utility layout ---------- */
.hstack { display: flex; align-items: center; }
.vstack { display: flex; flex-direction: column; }
.spacer { flex: 1 1 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-l); }
.grid-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-l); }
@media (min-width: 700px) { .grid-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid-tiles { grid-template-columns: repeat(4, 1fr); } }

/* iPad app shell fullscreen */
.app-shell { position: fixed; inset: 0; overflow: hidden; }

/* ---------- Persistent app chrome: sidebar + bottom tab bar ---------- */
/* Hidden on auth screens (see appshell.js) — those aren't part of the
   logged-in section structure the nav represents. */
#app.shell-hidden .bottom-tab-bar,
#app.shell-hidden .sidebar-drawer,
#app.shell-hidden .sidebar-scrim { display: none; }
/* margin, not bottom/inset — #screen-stack is position:relative, so a
   `bottom` offset would just shift it up rather than shrink it. */
#app:not(.shell-hidden) #screen-stack { margin-bottom: var(--bottomnav-h); }

.bottom-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  height: calc(var(--bottomnav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  display: flex;
  background: var(--fw-surface);
  border-top: 1px solid var(--fw-outline);
}
.bottom-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fw-text-secondary);
}
.bottom-tab .icon-img, .bottom-tab .icon { width: 22px; height: 22px; }
.bottom-tab span { font-size: var(--fs-xxs); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-tab.active { color: var(--fw-primary); }

.sidebar-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }

.sidebar-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
  width: min(var(--sidebar-w), 82vw);
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b); padding-left: var(--safe-l);
  box-shadow: var(--shadow-3);
}
body.sidebar-open .sidebar-drawer { transform: translateX(0); }

.sidebar-header { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--sidebar-border); min-height: 40px; }
.sidebar-user { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 700; font-size: var(--fs-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-sub { font-size: var(--fs-xs); color: var(--sidebar-text-dim); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-gear { width: 36px; height: 36px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; color: var(--sidebar-text-dim); flex: 0 0 auto; }
.sidebar-gear:active { background: rgba(255,255,255,.08); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-group-label { padding: 16px 16px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sidebar-text-dim); }
.sidebar-row {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 16px); margin: 0 8px; padding: 11px 12px; border-radius: var(--r-m);
  color: var(--sidebar-text); font-size: var(--fs-m); font-weight: 600; text-align: left;
}
.sidebar-row .icon-img, .sidebar-row .icon { width: 22px; height: 22px; flex: 0 0 auto; }
.sidebar-row:active { background: rgba(255,255,255,.06); }
.sidebar-row.active { background: var(--sidebar-bg-active); }

.sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 8px; }
.sidebar-footer .sidebar-row { color: var(--fw-red-2); }