/* ==========================================================================
   STFU v0.39 — App shell layout
   ==========================================================================
   Structural layer only: sidebar column, topbar, content width, mobile
   bottom nav, bottom sheet positioning, responsive breakpoints. Visual
   language (colors, card styling, buttons) lives in components-v039.css
   and dashboard-v039.css — this file is about placement, not paint.

   Breakpoints:
   - >=1024px  desktop: fixed left sidebar, full labels
   - 768–1023  tablet:  icon-only sidebar rail (its own deliberate layout,
               not a shrunk desktop and not the mobile bottom nav)
   - <768      mobile:  no sidebar, fixed bottom nav instead
   ========================================================================== */

#loading, #onboarding { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5); background: var(--canvas); }
#onboarding { grid-template-columns: minmax(0, 1fr); }
#onboarding .card { min-width: 0; width: 100%; }
#onboarding h1 { overflow-wrap: anywhere; }
/* #sign-in has its own dedicated layout in components-v039.css — a public
   welcome/status screen, not just a centered card, so it needs a header
   slot and a content-driven card rather than the grid/place-items:center
   treatment shared by #loading and #onboarding. */
#sign-in.hidden, #onboarding.hidden, #loading.hidden { display: none; }

.app-shell { display: flex; min-height: 100dvh; background: var(--canvas); }
.app-shell.hidden { display: none; }

/* -- Sidebar (desktop) ---------------------------------------------------- */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2) var(--space-5); text-decoration: none; color: var(--text-primary); }
.sidebar .brand img { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none; }
.sidebar .brand span { display: flex; flex-direction: column; font-family: var(--font-editorial); font-weight: 700; font-size: var(--text-lg); line-height: 1.1; }
.sidebar .brand small { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.sidebar-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; border-radius: var(--radius-md);
  padding: 12px var(--space-3); min-height: 44px;
  color: var(--text-secondary); font-weight: 600; font-size: var(--text-base);
  text-align: left;
}
.sidebar-link svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover { background: var(--surface-soft); color: var(--text-primary); }
.sidebar-link.active { background: var(--accent-soft); color: var(--text-on-accent); font-weight: 700; }
:root[data-theme="dark"] .sidebar-link.active { color: var(--accent-strong); }
.sidebar-accent { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-4) var(--space-3) var(--space-2); color: var(--text-secondary); text-align: center; }
.sidebar-accent p { font-family: var(--font-editorial); font-size: var(--text-md); font-style: italic; margin: 0; color: var(--text-primary); }
/* v0.42 Deel F: a calm, purely decorative sprig under the nav — inline SVG,
   no external asset, subtler than the nav above it and never overlapping
   it (it sits after .sidebar-nav in normal flow, not absolutely
   positioned). Kept out of the accessibility tree since the sentence next
   to it already carries the only meaning here. */
.sidebar-botanical { width: 72px; height: 34px; flex: none; }
.sidebar-botanical-stem { fill: none; stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.sidebar-botanical-leaf { fill: var(--accent); opacity: .55; }
.sidebar-botanical-leaf-small { opacity: .4; }
:root[data-theme="dark"] .sidebar-botanical-leaf { opacity: .42; }

/* -- Main column ------------------------------------------------------------ */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-6));
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3; background: var(--canvas);
}
.topbar-context { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topbar-context h1 { margin: 0; font-size: var(--text-xl); font-weight: 700; overflow-wrap: anywhere; }
.topbar-context p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sync-control { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.sync-control button { min-height: 44px; padding: 0 12px; }
.sync-control .sync-stale { color: var(--danger); font-weight: 700; }
@media (max-width: 700px) { .sync-control { order: 3; width: 100%; justify-content: space-between; } }

.period-pill { display: inline-flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.period-nav { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: grid; place-items: center; font-size: 16px; }
#period-button { border: 0; background: transparent; color: var(--text-secondary); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
#period-button::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.dashboard-scope { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border); }
.dashboard-scope button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-weight: 600; font-size: var(--text-sm); }
.dashboard-scope button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.dashboard-scope button[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); font-weight: 800; box-shadow: var(--shadow-sm); }
.dashboard-scope button.managed-scope { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-scope.has-managed { padding-right: 3px; }

.add-button { padding-inline: 20px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent-strong); color: var(--text-on-dark-fill); font-weight: 800; display: grid; place-items: center; }
#household-button.active-household { color: var(--accent-strong); border-color: var(--accent); }

#page-content { flex: 1; padding: clamp(var(--space-4), 3vw, var(--space-6)); max-width: var(--content-max); width: 100%; margin: 0 auto; box-sizing: border-box; }

/* Page routing uses its own class rather than the generic .hidden utility:
   render() independently toggles .hidden on .transactions-card (which IS
   #page-transacties) for the "compact mode" feature gate, and that must
   not fight with which page is currently active. .page-hidden and .hidden
   both just mean "display:none" — either one hides the section, neither
   ever forces the other to show, so the two concerns never conflict. */
.page-hidden { display: none; }

body.compact-mode [data-page="transacties"] { display: none; }

/* -- Tablet: icon-only sidebar rail ------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { flex-basis: 84px; width: 84px; padding-inline: var(--space-2); align-items: center; }
  .sidebar .brand { padding-inline: 0; justify-content: center; }
  .sidebar .brand span { display: none; }
  .sidebar-link { justify-content: center; padding-inline: 0; }
  .sidebar-link span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .sidebar-accent { text-align: center; }
  .sidebar-accent p { display: none; }
  .sidebar-botanical { display: none; }
}

/* -- Mobile: no sidebar, bottom nav instead ---------------------------------- */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .topbar { padding-inline: var(--space-4); }
  .topbar-actions .add-button span { display: none; }
  .topbar-actions .add-button { padding: 0; border-radius: 50%; width: 44px; gap: 0; }
  #page-content { padding: var(--space-4) var(--space-4) calc(84px + env(safe-area-inset-bottom)); }
  /* The sticky topbar must stay compact on a phone screen — a supplementary
     sentence and a two-line greeting can otherwise push it tall enough to
     cover most of the viewport (and, since it's sticky rather than fixed,
     tall enough that scrolling a target into view can still land it behind
     the bar). The context sentence is already redundant with the hero card
     and metric cards right below it. */
  .topbar-context p { display: none; }
  .topbar-context h1 { font-size: var(--text-lg); }
}
.mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: var(--surface-raised); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
.mobile-nav.hidden { display: none; }
.mobile-nav-link {
  flex: 1 1 0; min-width: 0; max-width: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: transparent; color: var(--text-secondary);
  min-height: 48px; padding: 4px 2px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
}
.mobile-nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mobile-nav-link svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav-link.active { color: var(--accent-strong); }

/* Placed after the rules above so this wins the (otherwise tied)
   specificity contest with the unconditional .mobile-nav{display:flex}
   base rule at desktop/tablet widths — source order is the tiebreaker
   for equal-specificity class selectors within the same file. */
@media (min-width: 768px) {
  .mobile-nav, #mobile-more-sheet, #mobile-more-button { display: none; }
}