/* ═══════════════════════════════════════════════════════════════════════════
   BASE — reset, document defaults, and the application shell
   ───────────────────────────────────────────────────────────────────────────
   Everything here is structural and unbranded: the frame the app is hung in.
   Reusable pieces (buttons, tables, modals) live in components.css.

   Load order matters: tokens → base → components → utilities → pages →
   responsive. See DESIGN_SYSTEM.md.
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  /* The --leading-* tokens existed but nothing used them, so every line in the
     app ran at the font's own `normal` (~1.33 for Segoe UI) — tight for prose,
     and the opposite of the rule that leading loosens as text shrinks.

     This inherits into EVERYTHING that does not set its own, which is why the
     block below pins the dense surfaces back: a control's height and a table's
     row rhythm are deliberate metrics, not paragraphs. Body copy is what
     wanted the air. */
  line-height: var(--leading-normal);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

/* Explicitly `normal`, not a token: the point is to keep these EXACTLY the
   height they render today, so the body change lands on prose alone and no
   button, badge, input or table row moves by a pixel. Dense,
   information-heavy UI wants tight leading — this is that. */
input, select, textarea, button, th, td { line-height: normal; }

/* Wide content (tables, long part numbers) scrolls inside its own container
   instead of pushing the whole document sideways. */
html, body { overflow-x: hidden; }


/* ── APP SHELL ─────────────────────────────────────────────────────────────
   #app is hidden until login succeeds, then switched to flex by JS. */
#app { display: none; height: 100vh; flex-direction: column; }

/* Mobile browsers count the collapsing URL bar in 100vh, which leaves the
   bottom of the app hidden underneath it. dvh tracks the *visible* area;
   the vh declaration above stays as the fallback for browsers without dvh. */
#app { height: 100dvh; }


/* ── HEADER ────────────────────────────────────────────────────────────── */
.header {
  position: relative;
  height: var(--header-h);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-7);
  flex-shrink: 0;
  box-shadow: var(--shadow-header);
}
/* The four-colour rule under the header is the brand's only appearance in
   the logged-in app. */
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand-gradient);
}
.header-logo {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--color-text-invert);
  letter-spacing: var(--tracking-wider);
}
/* The header logo is now the shared .yw-logo chip, which colours its own
   spans. A blanket gold on every span here would fight it. */
.header-spacer { flex: 1; }

.header-user {
  /* Anchor for .notif-panel (components.css) — do not remove as unused.
     align-self is part of that anchor, not decoration: this is a centred flex
     item, so without it the block is only as tall as its contents and
     .notif-panel's `top: 100%` lands ~12px ABOVE the header's bottom edge,
     over the brand rule above. The offset is not even constant — responsive.css
     hides the avatar at 400px and the block shrinks again. Stretching to the
     full --header-h makes `top: 100%` the header's bottom edge at every width.
     Nothing moves visually: align-items below still centres the children. */
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: #cbd5e1;
  font-size: var(--text-sm);
}
.header-user .avatar {
  width: 32px; height: 32px;
  background: var(--brand-blue-bright);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-text-invert);
}
/* The header's "?" — same translucent-white treatment as .account-trigger, but
   a circle at avatar size, because it is an icon and not a labelled action. */
.btn-help {
  width: 26px; height: 26px;
  flex-shrink: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--color-text-invert);
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
}
.btn-help:hover { background: rgba(255,255,255,.2); }

/* "Viewing as" — platform admins only. Amber, not the header's white-on-blue,
   because it is a mode indicator: what it says is whose live data every page
   below is showing. */
.acting-tenant-wrap { display: flex; align-items: center; gap: var(--space-2); }
.acting-tenant-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-gold);
  white-space: nowrap;
}
.acting-tenant {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--brand-gold);
  color: var(--color-text-invert);
  padding: 5px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  max-width: 200px;
}
.acting-tenant option { color: var(--gray-900); background: var(--white); }


/* ── BODY ──────────────────────────────────────────────────────────────── */
.app-body { display: flex; flex: 1; overflow: hidden; }


/* ── SIDEBAR ───────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-section {
  padding: var(--space-8) var(--space-5) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-7);
  margin: 2px var(--space-3);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  /* A step lighter than --color-text-body on purpose: a resting nav item
     should sit behind the page content, not compete with it. */
  color: var(--gray-600);
  transition: var(--transition-fast);
  user-select: none;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.nav-item.active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  border-left: 3px solid var(--brand-red);
}
.nav-item.active .nav-icon { color: var(--brand-blue-bright); }
.nav-icon { font-size: var(--text-xl); width: 22px; text-align: center; }

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.sidebar-footer p {
  font-size: var(--text-2xs);
  color: var(--color-text-dim);
  text-align: center;
}

/* Drawer chrome — inert until the 900px breakpoint in responsive.css turns
   the sidebar into an overlay, so it costs the desktop layout nothing. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--color-text-invert);
  border-radius: var(--radius-xl);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
}
.nav-toggle:hover { background: rgba(255,255,255,.22); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.4);
  z-index: var(--z-backdrop);
}


/* ── MAIN CONTENT ──────────────────────────────────────────────────────── */
.main { flex: 1; overflow-y: auto; padding: var(--space-9); }

/* Only one .page is visible at a time; nav swaps the .active class. */
.page { display: none; }
.page.active { display: block; }


/* ── PAGE HEADER ───────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}
.page-title h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  /* Set as a SET with size and weight, not size alone. Explicit rather than
     inherited: body carries no line-height today, so this heading was tight by
     accident — the day body gets its --leading-normal, a 20px title would
     silently inherit 1.45 and start reading as loose. */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.page-title p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}


/* ── ACCESSIBILITY ─────────────────────────────────────────────────────── */
/* Labels for screen readers only — the visible cue is the control's own shape
   (a date field, a dropdown), which says nothing to a screen reader. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* The first Tab stop in both app shells, jumping past the header (and on /app
   the sidebar's fifty-odd menu items) to #main-content. Parked above the
   viewport rather than display:none, which would take it out of the Tab order
   too; it drops into view only while it has focus. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-toast);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: var(--focus-outline); }