/* ══════════════════════════════════════════════════════════════════════════
   App shell.

   Two shapes, one markup:
     ≥ 900px  sidebar on the left, content scrolls on the right
     < 900px  top bar, content, bottom tab bar — the phone layout

   The shell itself never scrolls; only .app-main does. That keeps the tab bar
   pinned on iOS, where a scrolling body drags fixed elements around.
   ══════════════════════════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── sidebar ─────────────────────────────────────────────────────────────── */

.app-sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--s-4) var(--s-3);
  padding-top: calc(var(--s-4) + var(--safe-top));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-5);
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-7);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 19px; height: 19px; }

.brand-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  letter-spacing: 0.02em;
}

.nav-group + .nav-group { margin-top: var(--s-5); }

.nav-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-subtle);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item:active { background: var(--surface-3); }

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semi);
}

.nav-item svg { width: 18px; height: 18px; flex: none; }

/* A dot on the tool's own colour, so GroundUp/ForFun/ForWork are identifiable
   in the sidebar before you read the word. */
.nav-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-sm);
  flex: none;
  background: var(--dot, var(--text-subtle));
  margin-left: 5px;
  margin-right: 5px;
}

.nav-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-subtle);
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-count { background: var(--surface); color: var(--accent-text); }
.nav-count.is-alert { background: var(--danger-soft); color: var(--danger); }

.sidebar-foot {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

/* ── main ────────────────────────────────────────────────────────────────── */

.app-main {
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-16);
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.page-title { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.page-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.page-actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

.section { margin-top: var(--s-8); }
.section:first-child { margin-top: 0; }

.section-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
}
.section-head .spacer { flex: 1; }

/* ── grids ───────────────────────────────────────────────────────────────
   auto-fit + minmax so panels reflow without a single media query each. */

.grid { display: grid; gap: var(--s-4); align-items: start; }
.grid-stats  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-cards  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-wide   { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The dashboard's asymmetric pairing: a big chart beside a narrower list.
   align-items:start so a short card keeps its own height instead of being
   stretched to match a tall neighbour and leaving a pool of empty space. */
.grid-split {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 1080px) {
  .grid-split, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ── top bar (mobile only) ───────────────────────────────────────────────── */

.app-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  gap: var(--s-3);
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) var(--s-4) 0;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
}

.topbar-actions { margin-left: auto; display: flex; gap: var(--s-1); }

/* ── section row (mobile only) ───────────────────────────────────────────
   The phone has no sidebar to expand, so the current group's screens sit in a
   scrolling row under the title. Collapses to nothing on Today, which has no
   children — hence :empty rather than a hidden attribute, which would have to
   out-specify the display rule below. */

/* Its own grid row above the scrolling content, so it stays put without
   needing sticky positioning.

   min-width:0 is load-bearing: a grid item defaults to min-width:auto, so a
   row of six book names measured 520px inside a 320px column and the overflow
   was clipped by .app rather than scrolled — the last books were unreachable
   on a small phone. */
.app-groupbar {
  display: none;
  min-width: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-groupbar:empty { display: none; }

.group-bar-inner {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.group-bar-inner::-webkit-scrollbar { display: none; }

.group-tab {
  flex: none;
  padding: 7px var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  /* A comfortable target without making the row taller than it needs to be. */
  min-height: 34px;
  display: flex;
  align-items: center;
}
.group-tab:hover { text-decoration: none; }
.group-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semi);
}

/* ── bottom tabs (mobile only) ───────────────────────────────────────────── */

.app-tabbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
}

.tabbar-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--tabbar-h);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.tab:hover { text-decoration: none; }
.tab svg { width: 21px; height: 21px; }
.tab.is-active { color: var(--accent-text); }

.tab-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}

/* ── floating action button (mobile) ─────────────────────────────────────── */

.fab {
  display: none;
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-4));
  z-index: 35;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-lg);
  place-items: center;
  transition: transform var(--t-fast) var(--ease);
}
.fab:active { transform: scale(0.93); }
.fab svg { width: 23px; height: 23px; }

/* ══ phone ════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .app {
    grid-template-columns: 1fr;
    /* title bar, section row, content. The middle row is zero-height on the
       screens whose group has no children. */
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .app-sidebar { display: none; }

  .app-topbar { display: flex; grid-row: 1; }
  .app-groupbar { display: block; grid-row: 2; grid-column: 1; }
  .app-groupbar:empty { display: none; }
  .app-main {
    grid-column: 1;
    grid-row: 3;
  }

  .app-tabbar { display: block; }
  .fab { display: grid; }

  .page {
    padding: var(--s-4) var(--s-4);
    /* Clear the tab bar and the FAB above it. */
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-16));
  }

  .page-head { margin-bottom: var(--s-4); }
  .page-title { font-size: var(--fs-md); }

  .grid { gap: var(--s-3); }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cards, .grid-wide, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Below this even two columns crowd a long currency figure. */
@media (max-width: 340px) {
  .grid-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ══ tablet: keep the sidebar but let it breathe less ═════════════════════ */

@media (min-width: 900px) and (max-width: 1150px) {
  :root { --sidebar-w: 212px; }
  .page { padding: var(--s-5) var(--s-4) var(--s-12); }
}

/* ── offline banner ──────────────────────────────────────────────────────── */

.offline-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 1px solid var(--warn-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
body.is-offline .offline-bar { display: flex; }
.offline-bar svg { width: 15px; height: 15px; }

/* ── sidebar nav scroller and nested tool lists ──────────────────────────── */

.nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 calc(var(--s-3) * -1);
  padding: 0 var(--s-3);
}

/* A section's own tools, revealed by being inside that section. The rule on the
   left is what makes them read as belonging to the item above rather than as
   four more top-level destinations. */
.nav-children {
  margin: 2px 0 var(--s-2) var(--s-5);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.nav-item.nav-child {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  padding: 5px var(--s-3);
  color: var(--text-muted);
}
.nav-item.nav-child.is-active {
  background: var(--c-1);
  color: var(--c-8);
  font-weight: var(--fw-medium);
}
.nav-item.nav-child svg { width: 15px; height: 15px; opacity: 0.7; }