/* ═══════════════════════════════════════════════════════════════
   ds-shell.css — DSF FRAMEWORK FILE — shell v2.1
   ───────────────────────────────────────────────────────────────
   The canonical application shell: sidebar, topbar, dropdowns,
   breadcrumb, footer, responsive behaviour.

   Loaded by every prototype through design-system/ds.css.

   DO NOT redefine any class from this file inside a page <style>
   block. Two definitions of the same class in one stylesheet is a
   silent visual bug — the last one declared wins, with no build
   error and no failing test.

   Contract: design-rules.md § Canonical Classes
   ═══════════════════════════════════════════════════════════════ */

:root { --layout-footer-height: 52px; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--font-family-body);
  /* font-size comes from html { font-size: var(--font-size-root) } in theme.css —
     do NOT hardcode a value here, it would drift from the token. */
  line-height: 1.55;
  background: var(--color-background);
  color: var(--color-foreground);
}

/* ── SIDEBAR ─────────────────────────────────── */
#sidebar {
  position: fixed; top: 0; left: 0;
  height: 100vh; width: 220px;
  background: var(--color-sidebar-background);
  border-right: var(--border-width) solid var(--color-sidebar-border);
  display: flex; flex-direction: column;
  z-index: 50;
  transition: width var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

#sidebar.collapsed { width: 56px; }

.sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-4); height: 56px;
  border-bottom: var(--border-width) solid var(--color-sidebar-border);
  flex-shrink: 0;
}

.sidebar-brand-inner { display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }

.brand-logo {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--color-sidebar-primary);
  border-radius: var(--radius-md); flex-shrink: 0;
  color: var(--color-primary-foreground);
}

.brand-name {
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: var(--tracking-title);
  color: var(--color-sidebar-foreground);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--duration-fast), width var(--duration-normal);
}

#sidebar.collapsed .brand-name { opacity: 0; width: 0; }

.topbar-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted-foreground); cursor: pointer; flex-shrink: 0;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.topbar-collapse-btn:hover { color: var(--color-foreground); background: var(--color-accent); }
.topbar-collapse-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--spacing-3) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-border) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-sidebar-border); border-radius: var(--radius-full); }

.nav-section-label {
  display: block;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-1);
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-sidebar-muted);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--duration-fast);
}

#sidebar.collapsed .nav-section-label { opacity: 0; }

.nav-separator {
  height: 1px; background: var(--color-sidebar-border);
  margin: var(--spacing-2) var(--spacing-4);
  transition: margin var(--duration-normal);
}

#sidebar.collapsed .nav-separator { margin: var(--spacing-2) var(--spacing-3); }

.nav-item {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-sidebar-muted); text-decoration: none;
  font-size: 0.875rem; font-weight: 400; white-space: nowrap;
  border-left: 2px solid transparent;
  cursor: pointer; background: transparent;
  border-right: none; border-top: none; border-bottom: none;
  width: 100%; text-align: left; font-family: inherit;
  transition: color var(--duration-fast), background var(--duration-fast), border-left-color var(--duration-fast);
  position: relative;
}

.nav-item:hover { color: var(--color-sidebar-foreground); background: color-mix(in oklab, var(--color-sidebar-accent) 60%, transparent); }

.nav-item.active {
  color: var(--color-sidebar-foreground);
  background: var(--color-sidebar-accent);
  border-left-color: var(--color-sidebar-primary);
  font-weight: 500;
}

.nav-item:focus-visible { outline: 2px solid var(--color-sidebar-primary); outline-offset: -2px; }

.nav-item-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }

.nav-item-label { flex: 1; overflow: hidden; transition: opacity var(--duration-fast), width var(--duration-normal); }

#sidebar.collapsed .nav-item-label { opacity: 0; width: 0; }

.nav-item-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--spacing-1);
  background: var(--color-sidebar-primary); color: var(--color-primary-foreground);
  border-radius: var(--radius-full); font-size: 0.625rem; font-weight: 600;
  flex-shrink: 0; transition: opacity var(--duration-fast);
}

#sidebar.collapsed .nav-item-badge { opacity: 0; }

.nav-item-chevron {
  color: var(--color-sidebar-muted); flex-shrink: 0;
  transition: transform var(--duration-normal), opacity var(--duration-fast);
}

.nav-item-chevron.open { transform: rotate(180deg); }
#sidebar.collapsed .nav-item-chevron { opacity: 0; }

#sidebar.collapsed .nav-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--color-popover); color: var(--color-popover-foreground);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
  pointer-events: none; z-index: 100; box-shadow: var(--shadow-md);
}

.nav-submenu { overflow: hidden; max-height: 0; transition: max-height var(--duration-normal); }
.nav-submenu.open { max-height: 500px; }
#sidebar.collapsed .nav-submenu { max-height: 0 !important; }

.nav-sub-item {
  display: flex; align-items: center; gap: var(--spacing-2);
  padding: 6px var(--spacing-4) 6px 3rem;
  color: var(--color-sidebar-muted); text-decoration: none;
  font-size: 0.8125rem; white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.nav-sub-item::before {
  content: ''; width: 5px; height: 5px;
  border-radius: var(--radius-full); background: currentColor; opacity: 0.5; flex-shrink: 0;
}

.nav-sub-item:hover { color: var(--color-sidebar-foreground); background: color-mix(in oklab, var(--color-sidebar-accent) 40%, transparent); }
.nav-sub-item.active { color: var(--color-sidebar-primary); }
.nav-sub-item.active::before { opacity: 1; }

.sidebar-footer {
  border-top: var(--border-width) solid var(--color-sidebar-border);
  flex-shrink: 0; height: var(--layout-footer-height);
}

/* ── MAIN LAYOUT ─────────────────────────────── */
#sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--color-overlay); z-index: 49;
}

#sidebar-overlay.visible { display: block; }

#main-wrapper {
  margin-left: 220px; display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left var(--duration-normal);
}

#main-wrapper.expanded { margin-left: 56px; }

/* ── TOPBAR ──────────────────────────────────── */
#topbar {
  position: sticky; top: 0; z-index: 40; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-6);
  background: var(--color-card); border-bottom: var(--border-width) solid var(--color-border);
}

/* Both sides must be allowed to shrink. A flex item defaults to min-width:auto,
   which refuses to go below its content — that is what pushed the whole page
   into a horizontal scroll between 769 and 900px, where the sidebar is still
   expanded and the topbar no longer fits. The buttons keep their size; only the
   flexible parts give way. */
.topbar-left  { display: flex; align-items: center; gap: var(--spacing-4); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; }

.breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); font-size: 0.75rem; min-width: 0; overflow: hidden; }
.breadcrumb-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item { color: var(--color-muted-foreground); text-decoration: none; }
.breadcrumb-item:hover { color: var(--color-foreground); }
.breadcrumb-sep { color: var(--color-muted-foreground); opacity: 0.4; }
.breadcrumb-current { color: var(--color-foreground); font-weight: 500; }

.topbar-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: transparent; border: none;
  border-radius: var(--radius-field); color: var(--color-muted-foreground); cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.topbar-btn:hover { color: var(--color-foreground); background: var(--color-muted); }
.topbar-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.icon-badge {
  position: absolute; top: 5px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-primary); color: var(--color-primary-foreground);
  border-radius: var(--radius-full);
  font-size: 0.5625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: calc(var(--border-width) * 1.5) solid var(--color-card);
}

.topbar-search {
  display: flex; align-items: center; gap: var(--spacing-2);
  height: 32px; padding: 0 var(--spacing-3);
  flex: 0 1 240px; min-width: 0;
  background: var(--color-muted); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-field); color: var(--color-muted-foreground);
  cursor: text; margin-right: var(--spacing-2);
  transition: border-color var(--duration-fast);
}

.topbar-search:hover { border-color: var(--color-ring); }

.topbar-search input {
  background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 0.8125rem;
  color: var(--color-foreground);
  /* Shrinks with the bar instead of holding 180px and shoving everything out. */
  width: 100%; min-width: 0;
}

.topbar-search input::placeholder { color: var(--color-muted-foreground); }

.search-kbd {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; background: var(--color-card);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xs);
  font-size: 0.625rem; color: var(--color-muted-foreground);
  font-family: var(--font-family-mono);
}

.topbar-user {
  display: flex; align-items: center; gap: var(--spacing-2);
  height: 36px; padding: 0 var(--spacing-2) 0 var(--spacing-1);
  background: transparent; border: var(--border-width) solid transparent;
  border-radius: var(--radius-field); cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
  font-family: inherit; color: var(--color-foreground);
}

.topbar-user:hover { background: var(--color-muted); border-color: var(--color-border); }
.topbar-user:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.topbar-avatar {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-primary-foreground);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 600; flex-shrink: 0;
}

.topbar-user-name { font-size: 0.8125rem; font-weight: 500; color: var(--color-foreground); white-space: nowrap; }
.mobile-menu-btn { display: none; }

/* ── DROPDOWNS ────────────────────────────────── */
.has-dropdown { position: relative; }

.dropdown {
  position: absolute; top: calc(100% + var(--spacing-2)); right: 0;
  width: 220px; background: var(--color-popover);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); z-index: 200; display: none; overflow: hidden;
}

.dropdown.open { display: block; }

/* The user menu is a narrower dropdown than the notification list. */
.user-dropdown { width: 220px; }

.user-dropdown-header {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.user-dropdown-name { font-size: 0.875rem; font-weight: 600; color: var(--color-foreground); }
.user-dropdown-email { font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 2px; }

.user-menu-item {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-foreground); text-decoration: none; font-size: 0.8125rem;
  cursor: pointer; transition: background var(--duration-fast);
}

.user-menu-item:hover { background: var(--color-accent); }
.user-menu-item.destructive { color: var(--color-destructive); }
.user-menu-item.destructive:hover { background: color-mix(in oklab, var(--color-destructive) 10%, transparent); }

.user-menu-separator { height: 1px; background: var(--color-border); margin: var(--spacing-1) 0; }

/* ── MAIN CONTENT ─────────────────────────────── */
#content {
  flex: 1; padding: var(--spacing-6);
  display: flex; flex-direction: column; gap: 0;
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-4); margin-bottom: var(--spacing-6);
}

.page-title {
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: var(--tracking-heading); color: var(--color-foreground);
  margin: 0 0 var(--spacing-1);
}

.page-subtitle { font-size: 0.875rem; color: var(--color-muted-foreground); margin-top: 2px; }

.page-header-meta {
  display: flex; align-items: center; gap: var(--spacing-2);
  font-size: 0.75rem; color: var(--color-muted-foreground);
}

.page-actions { display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }

/* ── TOPBAR NOTIFICATION COUNT ───────────────── */
/* A count riding on a topbar button — notifications, messages. Standard
   furniture in an admin shell, so it belongs here and not in a project file.
   The button keeps its own hit area; the bubble is decorative and the real
   count is announced through the button's aria-label. */
.topbar-btn-wrap { position: relative; display: inline-flex; }

.topbar-btn-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-destructive); color: var(--color-destructive-foreground);
  font-size: 0.625rem; font-weight: 600; line-height: 1;
  border: 2px solid var(--color-background);
  pointer-events: none;
}

/* No count, just "there is something" — for a channel where a number would be
   noise. */
.topbar-btn-dot {
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-destructive);
  border: 2px solid var(--color-background);
  pointer-events: none;
}

/* ── DROPDOWN CONTENT ─────────────────────────── */
/* The topbar markup uses .dropdown-header / .dropdown-title / .dropdown-item
   for the language picker and the notification list. Before v2.0 these lived
   only in dashboard.html, so any page not copied from it rendered the language
   picker unstyled. They belong to the shell. */
.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.dropdown-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.dropdown-action {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  transition: opacity var(--duration-fast);
}

.dropdown-action:hover { opacity: 0.75; }
/* As a direct child of the dropdown it is the footer row ("see all"), not the
   inline link in the header, so it needs the item's own padding to line up. */
.dropdown > .dropdown-action {
  display: block; width: 100%; text-align: center;
  padding: var(--spacing-3) var(--spacing-4);
}

/* color is declared because this class lands on <a> and on <button>, and both
   carry a user-agent colour that wins over inheritance: link blue on the anchor,
   buttontext on the button. */
.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
  cursor: pointer;
}
.dropdown-item.is-selected { color: var(--color-primary); font-weight: 600; }

.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--color-muted); }

.dropdown-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}
/* Severity tint, same composition as the status badges: the colour as text on a
   15% mix of itself over the surface. */
.dropdown-item-icon.is-info    { color: var(--color-info);        background: color-mix(in oklab, var(--color-info) 15%, var(--color-card)); }
.dropdown-item-icon.is-success { color: var(--color-success);     background: color-mix(in oklab, var(--color-success) 15%, var(--color-card)); }
.dropdown-item-icon.is-warning { color: var(--color-warning);     background: color-mix(in oklab, var(--color-warning) 15%, var(--color-card)); }
.dropdown-item-icon.is-danger  { color: var(--color-destructive); background: color-mix(in oklab, var(--color-destructive) 15%, var(--color-card)); }

/* Unread marker. Colour alone is never the only signal — the row also carries a
   heavier title weight, so this reads without relying on the dot. */
.dropdown-item.is-unread .dropdown-item-title { font-weight: 600; }
.dropdown-item-unread {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-primary); flex-shrink: 0; align-self: center;
}

.dropdown-item-body { flex: 1; min-width: 0; }

.dropdown-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item-desc {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-item-time {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground);
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-family-mono);
}

/* ── FOOTER ───────────────────────────────────── */
footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-6); height: var(--layout-footer-height);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-card); flex-shrink: 0;
}

.footer-text { font-size: 0.75rem; color: var(--color-muted-foreground); }
.footer-links { display: flex; align-items: center; gap: var(--spacing-4); }
.footer-link { font-size: 0.75rem; color: var(--color-muted-foreground); text-decoration: none; transition: color var(--duration-fast); }
.footer-link:hover { color: var(--color-foreground); }

/* ── RESPONSIVE (shell) ───────────────────────── */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); transition: transform var(--duration-normal); width: 220px !important; }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar-overlay.visible { display: block; }
  #main-wrapper { margin-left: 0 !important; }
  .mobile-menu-btn { display: flex; }
  .topbar-collapse-btn { display: none; }
  /* The topbar is a row of fixed-width buttons: below this width they stop
     fitting and push the page into a horizontal scroll. The breadcrumb is the
     first to go — the page title right under it says the same thing — and the
     user's name collapses to the avatar, which is still a target and still a
     menu. Nothing is removed, only the labels that repeat something already on
     screen. */
  .breadcrumb { display: none; }
  .topbar-user-name { display: none; }
  .topbar-right { gap: var(--spacing-1); }
  .topbar-search { display: none; }
  .page-header { flex-direction: column; }
  .page-actions { width: 100%; }
}

@media (max-width: 480px) {
  /* Last stop before the buttons overlap. The language picker goes: it is the
     one control here that a user sets once and never touches again, and it
     still lives in the user menu. */
  #lang-btn, #lang-dropdown { display: none; }
  .topbar-left { min-width: 0; }
  .topbar { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
}

/* ── GLOBAL ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

.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; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE CHROME

   A phone app is not a desktop page that got narrow. The sidebar drawer
   above adapts the desktop shell; these classes are the shell a screen
   designed for the phone uses instead: an app bar with one action, a
   bottom navigation bar, and a sheet for everything that would otherwise
   crowd the top.

   Use one or the other, never both.
   ══════════════════════════════════════════════════════════════════ */

/* ── APP BAR ──────────────────────────────────── */
/* Title plus at most one action. Notifications, mail, account and theme
   belong in the profile tab, not here — the top of a phone screen is the
   most contested space in the product. */
.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  padding-top: calc(var(--spacing-3) + env(safe-area-inset-top, 0px));
  background: var(--color-card);
  border-bottom: var(--border-width) solid var(--color-border);
}
.appbar-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: calc(var(--spacing-2) * -1);
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--color-foreground); cursor: pointer;
}
.appbar-back:hover { background: var(--color-muted); }
.appbar-title { font: var(--font-title); letter-spacing: var(--tracking-title); margin: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-action {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--color-foreground); cursor: pointer;
  position: relative;
}
.appbar-action:hover { background: var(--color-muted); }
.appbar-action-dot {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: var(--radius-full); background: var(--color-destructive);
  border: 2px solid var(--color-card);
}

/* ── BOTTOM NAVIGATION ────────────────────────── */
/* Three to five destinations, never more: past five the targets get too
   narrow for a thumb and the labels start truncating. A sixth destination
   means the fifth slot becomes "Mais" and opens a sheet. */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  background: var(--color-card);
  border-top: var(--border-width) solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  min-height: 52px; padding: var(--spacing-2) var(--spacing-1);
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-muted-foreground);
  text-decoration: none; position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}
.bottom-nav-item:hover { color: var(--color-foreground); }
.bottom-nav-item.is-active { color: var(--color-primary); }
.bottom-nav-icon { width: 22px; height: 22px; flex-shrink: 0; }
.bottom-nav-label { font-size: 0.6875rem; font-weight: 500; line-height: 1; }
.bottom-nav-badge {
  position: absolute; top: 5px; left: calc(50% + 6px);
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-destructive); color: var(--color-destructive-foreground);
  font-size: 0.625rem; font-weight: 600; line-height: 15px; text-align: center;
}
/* The content area has to clear the bar, or the last row sits under it.
   The page must not set `padding` as a shorthand on the same element: the
   shorthand resets the bottom and the rule silently does nothing. Use
   `padding: X X 0` and let this supply the bottom. */
.has-bottom-nav { padding-bottom: calc(52px + var(--spacing-6) + env(safe-area-inset-bottom, 0px)) !important; }

/* ── BOTTOM SHEET ─────────────────────────────── */
/* Where the account, notifications, theme and the rest of the chrome live.
   Opens from the bottom because that is where the thumb already is. */
.sheet-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 85vh; overflow-y: auto;
  background: var(--color-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--spacing-3) var(--spacing-4)
           calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}
.sheet-mobile.is-open { transform: translateY(0); }
.sheet-mobile-grip {
  width: 36px; height: 4px; margin: 0 auto var(--spacing-4);
  border-radius: var(--radius-full); background: var(--color-border);
}
.sheet-mobile-title { font: var(--font-title); margin: 0 0 var(--spacing-3); }

/* ── LIST ROW ─────────────────────────────────── */
/* What a table becomes on a phone when the data is a list of things rather
   than a grid of values. Tap target is the whole row. */
.list-row {
  display: flex; align-items: center; gap: var(--spacing-3);
  width: 100%; padding: var(--spacing-3) var(--spacing-1);
  border: 0; border-bottom: var(--border-width) solid var(--color-border);
  background: transparent; text-align: left; cursor: pointer;
  color: var(--color-foreground); text-decoration: none;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--color-muted); }
.list-row-leading {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-muted); color: var(--color-muted-foreground);
}
.list-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { font-size: 0.75rem; color: var(--color-muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-trailing { display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0;
  color: var(--color-muted-foreground); padding-left: var(--spacing-1); }
.list-row-trailing > .badge-success,
.list-row-trailing > .badge-warning,
.list-row-trailing > .badge-destructive,
.list-row-trailing > .badge-info { flex-shrink: 0; white-space: nowrap; }

/* ── SEGMENTED CONTROL ────────────────────────── */
/* Two to four mutually exclusive views. Past four, use .scroll-tabs. */
.segmented {
  display: flex; gap: 2px; padding: 3px;
  background: var(--color-muted); border-radius: var(--radius-full);
}
.segmented-item {
  flex: 1; padding: var(--spacing-2) var(--spacing-3);
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--color-muted-foreground);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.segmented-item.is-active { background: var(--color-card); color: var(--color-foreground); box-shadow: var(--shadow-sm); }

/* ── METRIC CARD (mobile) ─────────────────────── */
/* Two per row at most. A KPI whose number wraps has stopped being a KPI. */
.metric-card {
  background: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  display: flex; flex-direction: column; gap: var(--spacing-1);
}
.metric-card-label { font-size: 0.75rem; color: var(--color-muted-foreground); }
.metric-card-value { font: var(--font-heading); letter-spacing: var(--tracking-heading); }
.metric-card-delta { font-size: 0.75rem; color: var(--color-muted-foreground); }
.metric-card-delta.is-good { color: var(--color-success); }
.metric-card-delta.is-bad  { color: var(--color-destructive); }