/* ==========================================================================
   Al Hafsa Ecommerce Management Dashboard
   Design system: minimal, premium, calm, professional.
   Original design, no third party brand assets are used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface
   The font is bundled locally rather than pulled from a CDN. A private
   dashboard should not announce every page view to a third party, and a
   self hosted file keeps working when the CDN is blocked or slow.
   font-display: swap means text is readable immediately in the fallback and
   is upgraded the moment the file arrives, so nothing ever renders invisible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "NotionInter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NotionInter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NotionInter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NotionInter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface-white: #ffffff;
  --surface-base: #f6f5f4;
  --surface-raised: #ffffff;
  --surface-sunken: #fafaf9;
  --hero-dark-navy: #02093a;

  /* Accents */
  --accent-blue: #097fe8;
  --accent-red: #f64932;
  --brand-blue: #2537b1;

  /* Text */
  --text-primary: #000000;
  --text-medium: #615d59;
  --text-muted: #a39e98;
  --text-inverse: #ffffff;

  /* Semantic */
  --success: #16803c;
  --warning: #b86b00;
  --danger: #c62828;
  --info: #097fe8;

  /* Semantic surfaces, derived tints kept very light */
  --success-surface: #eef7f1;
  --warning-surface: #fdf5e9;
  --danger-surface: #fdeeee;
  --info-surface: #eaf4fd;
  --accent-surface: #eaf4fd;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.14);
  --border-strong: rgba(0, 0, 0, 0.24);

  /* Radius */
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Spacing, four pixel base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --gutter: 24px;
  --sidebar-width: 248px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;
  --bottomnav-height: 60px;
  --content-max: 1560px;

  /* Elevation, restrained */
  --shadow-xs: 0 1px 2px rgba(2, 9, 58, 0.04);
  --shadow-sm: 0 1px 3px rgba(2, 9, 58, 0.06), 0 1px 2px rgba(2, 9, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(2, 9, 58, 0.08);
  --shadow-lg: 0 12px 32px rgba(2, 9, 58, 0.12);

  /* Typography */
  --font-sans: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display-hero: 64px;   --lh-display-hero: 64px;
  --fs-display-lg: 54px;     --lh-display-lg: 56px;
  --fs-heading-xl: 48px;     --lh-heading-xl: 72px;
  --fs-heading-l: 40px;      --lh-heading-l: 60px;
  --fs-heading-m: 22px;      --lh-heading-m: 28px;
  --fs-heading-s: 20px;      --lh-heading-s: 28px;
  --fs-body-lg: 20px;        --lh-body-lg: 30px;
  --fs-body: 16px;           --lh-body: 24px;
  --fs-label: 14px;          --lh-label: 20px;
  --fs-small: 12px;          --lh-small: 16px;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Responsive type scale, large sizes shrink on smaller screens */
@media (max-width: 1024px) {
  :root {
    --fs-display-hero: 44px; --lh-display-hero: 48px;
    --fs-display-lg: 38px;   --lh-display-lg: 44px;
    --fs-heading-xl: 34px;   --lh-heading-xl: 44px;
    --fs-heading-l: 28px;    --lh-heading-l: 38px;
    --gutter: 20px;
  }
}
@media (max-width: 600px) {
  :root {
    --fs-display-hero: 32px; --lh-display-hero: 38px;
    --fs-display-lg: 28px;   --lh-display-lg: 34px;
    --fs-heading-xl: 26px;   --lh-heading-xl: 34px;
    --fs-heading-l: 22px;    --lh-heading-l: 30px;
    --fs-heading-m: 20px;    --lh-heading-m: 26px;
    --fs-body-lg: 17px;      --lh-body-lg: 26px;
    --gutter: 16px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
h1 { font-size: var(--fs-heading-l); line-height: var(--lh-heading-l); }
h2 { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); }
h3 { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: 600; }
h4 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

code, pre, .mono { font-family: var(--font-mono); font-size: 13px; }

/* Accessible focus ring, always visible for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   Icons
   An inline SVG has no intrinsic size, so without a base rule it inherits
   whatever the surrounding layout gives it. In a flex row that means it gets
   squashed, and in a plain block it stretches to full width. Every icon now
   starts from a sane default and individual contexts only override the size.
   -------------------------------------------------------------------------- */
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;          /* never squashed by a flex parent */
  display: inline-block;
  vertical-align: middle;
  overflow: visible;       /* stop round caps clipping at the edge */
  /* stroke-width is left to the SVG itself. Lucide is drawn for 2, and
     overriding it here made every icon look thin and washed out. */
}

/* Screen reader only text */
.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;
  /* clip-path is the modern companion to clip. Without it a wide descendant
     still contributes to the page scroll width and produces a horizontal
     scrollbar nobody can see the cause of. */
  clip-path: inset(50%);
}
/* A table element ignores width 1px and sizes itself to its content, so the
   data tables that accompany each chart for screen readers were widening the
   page. Fixed layout plus max-width keeps them genuinely contained while
   leaving them fully readable by assistive technology. */
table.sr-only { table-layout: fixed; max-width: 1px; }
.sr-only-focusable:focus {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

.skip-link {
  position: absolute; top: -100px; left: var(--space-4); z-index: var(--z-toast);
  background: var(--surface-white); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--border-medium); box-shadow: var(--shadow-md);
  font-weight: 600; font-size: var(--fs-label);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography utilities
   -------------------------------------------------------------------------- */
.t-display-hero { font-size: var(--fs-display-hero); line-height: var(--lh-display-hero); font-weight: 700; letter-spacing: -0.02em; }
.t-display-lg   { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: 700; letter-spacing: -0.02em; }
.t-heading-xl   { font-size: var(--fs-heading-xl); line-height: var(--lh-heading-xl); font-weight: 400; }
.t-heading-l    { font-size: var(--fs-heading-l); line-height: var(--lh-heading-l); font-weight: 400; }
.t-heading-m    { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: 700; }
.t-heading-s    { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: 600; }
.t-body-lg      { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 400; }
.t-body         { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.t-label        { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; }
.t-small        { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }

.t-muted     { color: var(--text-muted); }
.t-medium    { color: var(--text-medium); }
.t-primary   { color: var(--text-primary); }
.t-success   { color: var(--success); }
.t-warning   { color: var(--warning); }
.t-danger    { color: var(--danger); }
.t-info      { color: var(--info); }
.t-accent    { color: var(--accent-blue); }

.t-bold      { font-weight: 700; }
.t-semibold  { font-weight: 600; }
.t-medium-w  { font-weight: 500; }
.t-regular   { font-weight: 400; }
.t-tabular   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.t-center    { text-align: center; }
.t-right     { text-align: right; }
.t-nowrap    { white-space: nowrap; }
.t-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.t-break     { word-break: break-word; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   4. Layout shell
   -------------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface-white);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  transition: width var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}
.sidebar-brand {
  height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.sidebar-logo {
  width: 30px; height: 30px; border-radius: var(--radius-control);
  background: var(--hero-dark-navy); color: var(--text-inverse);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
  flex-shrink: 0; overflow: hidden;
}
/* The logo is a wide calligraphic mark, so it must be contained rather than
   cropped, and it needs a light plate behind it because the artwork is black.
   The navy tile is only the fallback for the two letter initials.
   A class is used rather than :has() so older Safari behaves the same. */
/* An uploaded logo is usually a wide wordmark, so the tile becomes a flexible
   slot rather than a 30px square. Height is generous enough to stay legible
   without pushing the brand bar taller. */
.sidebar-logo.has-image {
  width: auto; min-width: 0; max-width: 176px; height: auto; padding: 0;
  background: transparent; border: 0; border-radius: 0;
}
.sidebar-logo.has-image img {
  width: auto; height: 34px; max-width: 176px; object-fit: contain; display: block;
}
.sidebar-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--space-2) var(--space-4); }
.sidebar-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: var(--space-4) var(--space-3) var(--space-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-3);
  margin-bottom: 2px;
  border-radius: var(--radius-control);
  color: var(--text-medium);
  font-size: var(--fs-label); font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  min-height: 38px;
}
.nav-item:hover { background: var(--surface-base); color: var(--text-primary); text-decoration: none; }
.nav-item.is-active { background: var(--accent-surface); color: var(--accent-blue); font-weight: 600; }
.nav-item.is-active::before {
  content: ""; position: absolute; inset-inline-start: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-blue);
}
.nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  margin-inline-start: auto; background: var(--danger); color: var(--text-inverse);
  font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); display: grid; place-items: center; line-height: 1;
}
.sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--border-subtle); flex-shrink: 0; }

/* Collapsed desktop sidebar */
.app-shell.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
.app-shell.sidebar-collapsed .sidebar-name,
.app-shell.sidebar-collapsed .nav-item-label,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .nav-badge,
.app-shell.sidebar-collapsed .sidebar-footer-text { display: none; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.app-shell.sidebar-collapsed .main-area { margin-inline-start: var(--sidebar-collapsed); }
.app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 0; }

.main-area {
  flex: 1; min-width: 0;
  margin-inline-start: var(--sidebar-width);
  display: flex; flex-direction: column;
  transition: margin var(--transition-base);
}

.topbar {
  height: var(--topbar-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--gutter);
  position: sticky; top: 0; z-index: var(--z-sticky);
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.main-content {
  flex: 1;
  padding: var(--gutter);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.page-title { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: 700; letter-spacing: -0.01em; }
.page-subtitle { font-size: var(--fs-label); color: var(--text-medium); margin-top: var(--space-1); }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); color: var(--text-muted); flex-wrap: wrap; margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--text-medium); }
.breadcrumbs a:hover { color: var(--accent-blue); }
.breadcrumbs .sep { color: var(--text-muted); opacity: 0.6; }
.breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. Grid
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* min(track, 100%) lets the track shrink on a narrow screen. A bare
   minmax(260px, 1fr) cannot go below 260px, so on a 375px phone two columns
   still measure 520px and drag the whole page sideways. */
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-kpi { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--space-4); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-3-2 { grid-template-columns: 3fr 2fr; }

@media (max-width: 1280px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .grid-3, .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-6, .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-kpi { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--space-3); }
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.spacer { flex: 1; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--space-5); }
.card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.card-title { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body); }
.card-subtitle { font-size: var(--fs-small); color: var(--text-medium); margin-top: 2px; }
.card-body { padding: var(--space-5); }
.card-body-flush { padding: 0; }
.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: var(--fs-small); color: var(--text-medium);
}

/* KPI card */
.kpi {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  min-width: 0;
}
.kpi:hover { border-color: var(--border-medium); box-shadow: var(--shadow-sm); }
.kpi-head { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.kpi-label {
  font-size: var(--fs-small); font-weight: 600; color: var(--text-medium);
  letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.kpi-value {
  font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.kpi-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-small); }
.kpi-prev { color: var(--text-muted); }
.kpi-sparkline { height: 32px; margin-top: 2px; }
.kpi-target { margin-top: var(--space-1); }
.kpi-link { position: absolute; inset: 0; border-radius: var(--radius-lg); }
.kpi-link:focus-visible { outline-offset: -2px; }
/* The card wide link sits above everything, so the info button underneath it
   could never be hovered or clicked. Lifting the tooltip above the overlay
   keeps the whole card clickable while the explanation stays reachable. */
.kpi .info-tip { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .kpi-value { font-size: 22px; line-height: 28px; }
  .kpi { padding: var(--space-3); }
}

/* Trend indicators.
   The arrow shows the direction the number moved, the colour shows whether
   that movement is good for the business. A falling return rate therefore
   shows a down arrow in green, which is both accurate and readable.
   Status never depends on colour alone, the arrow and the screen reader
   text always carry the same meaning. */
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend::before { font-size: 11px; line-height: 1; }
.trend-up::before { content: "\25B2"; }
.trend-down::before { content: "\25BC"; }
.trend-flat::before { content: "\2013"; }
.trend-flat { color: var(--text-muted); }
.trend.is-good { color: var(--success); }
.trend.is-bad { color: var(--danger); }
/* Fallback when sentiment is not supplied */
.trend-up:not(.is-good):not(.is-bad) { color: var(--success); }
.trend-down:not(.is-good):not(.is-bad) { color: var(--danger); }

/* Progress bar for targets */
.progress {
  height: 6px; background: var(--surface-base); border-radius: var(--radius-pill);
  overflow: hidden; position: relative;
}
.progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent-blue); transition: width var(--transition-base); }
.progress-fill.is-success { background: var(--success); }
.progress-fill.is-warning { background: var(--warning); }
.progress-fill.is-danger { background: var(--danger); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--fs-label); font-weight: 500; line-height: 1;
  padding: 0 var(--space-4); height: 38px; min-width: 38px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--surface-white); color: var(--text-primary);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--accent-blue); color: var(--text-inverse); border-color: var(--accent-blue); }
.btn-primary:hover { background: #0a6fca; border-color: #0a6fca; }

.btn-secondary { background: var(--surface-white); color: var(--text-primary); border-color: var(--border-medium); }
.btn-secondary:hover { background: var(--surface-base); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-medium); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-base); color: var(--text-primary); }

.btn-danger { background: var(--danger); color: var(--text-inverse); border-color: var(--danger); }
.btn-danger:hover { background: #ab2020; border-color: #ab2020; }

.btn-danger-soft { background: var(--danger-surface); color: var(--danger); border-color: transparent; }
.btn-danger-soft:hover { background: #fbdede; }

.btn-success { background: var(--success); color: var(--text-inverse); border-color: var(--success); }
.btn-success:hover { background: #126a32; border-color: #126a32; }

.btn-dark { background: var(--hero-dark-navy); color: var(--text-inverse); border-color: var(--hero-dark-navy); }
.btn-dark:hover { background: #060f4d; }

.btn-sm { height: 32px; font-size: var(--fs-small); padding: 0 var(--space-3); min-width: 32px; }
.btn-lg { height: 44px; font-size: var(--fs-body); padding: 0 var(--space-5); }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 38px; }
.btn-icon.btn-sm { width: 32px; }

.btn-group { display: inline-flex; border: 1px solid var(--border-medium); border-radius: var(--radius-control); overflow: hidden; }
.btn-group .btn { border-radius: 0; border: 0; border-inline-end: 1px solid var(--border-subtle); height: 34px; }
.btn-group .btn:last-child { border-inline-end: 0; }
.btn-group .btn.is-active { background: var(--accent-surface); color: var(--accent-blue); font-weight: 600; }

/* Loading state */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
  color: var(--text-inverse);
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { color: var(--text-medium); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }

.label {
  display: block; font-size: var(--fs-label); font-weight: 500;
  color: var(--text-primary); margin-bottom: var(--space-2);
}
.label .req { color: var(--danger); margin-inline-start: 2px; }
.label-hint { font-weight: 400; color: var(--text-muted); font-size: var(--fs-small); margin-inline-start: var(--space-1); }

.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-body);
  color: var(--text-primary); background: var(--surface-white);
  border: 1px solid var(--border-medium); border-radius: var(--radius-control);
  padding: 9px var(--space-3); min-height: 40px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none; appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(9, 127, 232, 0.14);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-base); color: var(--text-muted); cursor: not-allowed;
}
.input[readonly] { background: var(--surface-sunken); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }

.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23615d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-inline-end: var(--space-8);
}
.select-sm, .input-sm { min-height: 34px; height: 34px; padding-block: 6px; font-size: var(--fs-label); }

.input-error, .select-error, .textarea-error { border-color: var(--danger); }
.input-error:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.14); }

.field-error {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: var(--fs-small); color: var(--danger); margin-top: var(--space-2); font-weight: 500;
}
.field-error::before { content: "!"; font-weight: 700; flex-shrink: 0; }
.field-help { font-size: var(--fs-small); color: var(--text-medium); margin-top: var(--space-2); }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.input-group .btn { border-radius: 0 var(--radius-control) var(--radius-control) 0; height: auto; min-height: 40px; border-color: var(--border-medium); border-inline-start: 0; }

.input-prefix { position: relative; }
.input-prefix .prefix-text {
  position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--text-medium); font-size: var(--fs-label); pointer-events: none; font-weight: 500;
}
.input-prefix .input { padding-inline-start: 46px; }

.input-with-icon { position: relative; }
.input-with-icon .icon {
  position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-muted); pointer-events: none;
}
.input-with-icon .input { padding-inline-start: 38px; }

/* Password toggle */
.password-wrap { position: relative; }
.password-wrap .input { padding-inline-end: 44px; }
.password-toggle {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent;
  color: var(--text-medium); cursor: pointer; border-radius: var(--radius-sm);
  display: grid; place-items: center;
}
.password-toggle:hover { background: var(--surface-base); color: var(--text-primary); }
.password-toggle .icon { width: 17px; height: 17px; }

/* Password strength meter */
.strength { margin-top: var(--space-2); }
.strength-bar { height: 4px; background: var(--surface-base); border-radius: var(--radius-pill); overflow: hidden; display: flex; gap: 3px; }
.strength-seg { flex: 1; background: var(--surface-base); border-radius: var(--radius-pill); transition: background var(--transition-base); }
.strength-seg.on-weak { background: var(--danger); }
.strength-seg.on-fair { background: var(--warning); }
.strength-seg.on-good { background: var(--accent-blue); }
.strength-seg.on-strong { background: var(--success); }
.strength-text { font-size: var(--fs-small); margin-top: 5px; color: var(--text-medium); font-weight: 500; }
.strength-rules { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px var(--space-3); }
.strength-rules li { font-size: var(--fs-small); color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.strength-rules li::before { content: "\25CB"; font-size: 9px; }
.strength-rules li.met { color: var(--success); }
.strength-rules li.met::before { content: "\2713"; font-weight: 700; }
@media (max-width: 480px) { .strength-rules { grid-template-columns: 1fr; } }

/* Checkbox and radio */
.check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--fs-label); line-height: var(--lh-label); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent-blue);
}
.check-label { color: var(--text-primary); }
.check-desc { font-size: var(--fs-small); color: var(--text-medium); display: block; margin-top: 1px; }
.check:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px; height: 23px; background: var(--border-strong); border-radius: var(--radius-pill);
  position: relative; transition: background var(--transition-base); flex-shrink: 0;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 19px; height: 19px; background: var(--surface-white); border-radius: 50%;
  transition: transform var(--transition-base); box-shadow: var(--shadow-xs);
}
.switch input:checked + .switch-track { background: var(--accent-blue); }
.switch input:checked + .switch-track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }
.switch-text { font-size: var(--fs-label); font-weight: 500; }

/* Fieldset */
.fieldset { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4); margin: 0 0 var(--space-4); }
.fieldset legend { font-size: var(--fs-label); font-weight: 600; padding: 0 var(--space-2); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-4); }
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 768px) { .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9. Badges, pills, chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1;
  padding: 4px var(--space-2); border-radius: var(--radius-pill);
  white-space: nowrap; border: 1px solid transparent;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-success { background: var(--success-surface); color: var(--success); }
.badge-warning { background: var(--warning-surface); color: var(--warning); }
.badge-danger  { background: var(--danger-surface); color: var(--danger); }
.badge-info    { background: var(--info-surface); color: var(--info); }
.badge-neutral { background: var(--surface-base); color: var(--text-medium); }
.badge-outline { background: transparent; border-color: var(--border-medium); color: var(--text-medium); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: 500;
  padding: 5px var(--space-3); border-radius: var(--radius-pill);
  background: var(--surface-base); color: var(--text-medium);
  border: 1px solid var(--border-subtle);
}
.chip-remove { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; }
.chip-remove:hover { background: var(--border-medium); }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.table caption { text-align: start; padding: var(--space-3) var(--space-5); font-size: var(--fs-small); color: var(--text-medium); }
.table thead th {
  text-align: start; font-weight: 600; font-size: var(--fs-small);
  color: var(--text-medium); text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-primary);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunken); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions-cell { text-align: end; white-space: nowrap; width: 1%; }
.table-compact thead th, .table-compact tbody td { padding: var(--space-2) var(--space-3); }
.table-fixed { table-layout: fixed; }

/* Comfortable touch targets.
   On a phone a link sized to its text is only about 24px tall, which is an
   awkward tap. Filling the cell gives the finger the whole row height without
   changing how anything looks. */
@media (pointer: coarse), (max-width: 600px) {
  /* Taller rows give the finger somewhere to land. */
  .table tbody td { padding-top: var(--space-4); padding-bottom: var(--space-4); }

  /* Stretch the primary link in a cell so the tap area covers the row rather
     than just the width and height of the text itself. */
  .table tbody td > a:first-child {
    display: block; padding: var(--space-2) 0; margin: calc(var(--space-2) * -1) 0;
  }
  .table tbody td > a:first-child:not(:only-child) { margin-bottom: 0; }

  /* .kpi-link is an absolutely positioned overlay covering its card, so it
     must keep its own sizing here rather than being turned into a flex box. */
  .list-row a { min-height: 44px; display: inline-flex; align-items: center; }
  .info-tip-btn { min-width: 32px; min-height: 32px; justify-content: center; }

  /* Small text links that sit alone in a card header or a list row, such as
     "View all" and "Open", need a real touch area too. */
  .card-header a:not(.btn),
  .alert-row a:not(.btn),
  .stat-row a:not(.btn) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

.table th a.sortable { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
.table th a.sortable:hover { color: var(--accent-blue); text-decoration: none; }
.table th a.sortable[aria-sort="ascending"]::after { content: "\2191"; }
.table th a.sortable[aria-sort="descending"]::after { content: "\2193"; }

.table-selectable tbody tr.is-selected { background: var(--accent-surface); }

/* Mobile card table, tables convert to stacked cards */
@media (max-width: 768px) {
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    display: block; background: var(--surface-white);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
    margin-bottom: var(--space-3); padding: var(--space-3);
  }
  .table-cards tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: 6px 0; border: 0; text-align: end;
  }
  .table-cards tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-small); font-weight: 600; color: var(--text-medium);
    text-transform: uppercase; letter-spacing: 0.04em; text-align: start; flex-shrink: 0;
  }
  .table-cards tbody td.actions-cell { justify-content: flex-end; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); width: auto; }
  .table-cards tbody td.actions-cell::before { display: none; }
  .table-cards tbody tr:hover { background: var(--surface-white); }
}

/* --------------------------------------------------------------------------
   11. Alerts and banners
   -------------------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  font-size: var(--fs-label); line-height: var(--lh-label);
  margin-bottom: var(--space-4);
}
.alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-body { flex: 1; min-width: 0; }
.alert-close { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px; opacity: 0.7; border-radius: var(--radius-sm); }
.alert-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }

.alert-success { background: var(--success-surface); color: var(--success); border-color: rgba(22, 128, 60, 0.2); }
.alert-warning { background: var(--warning-surface); color: var(--warning); border-color: rgba(184, 107, 0, 0.2); }
.alert-danger  { background: var(--danger-surface); color: var(--danger); border-color: rgba(198, 40, 40, 0.2); }
.alert-info    { background: var(--info-surface); color: var(--info); border-color: rgba(9, 127, 232, 0.2); }
.alert-neutral { background: var(--surface-base); color: var(--text-medium); border-color: var(--border-subtle); }

/* Toast notifications */
.toast-region {
  position: fixed; bottom: var(--space-5); inset-inline-end: var(--space-5);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2);
  max-width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3);
  align-items: flex-start; pointer-events: auto;
  animation: toastIn 200ms ease;
  font-size: var(--fs-label);
}
.toast .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast-success .icon { color: var(--success); }
.toast-warning .icon { color: var(--warning); }
.toast-danger .icon { color: var(--danger); }
.toast-info .icon { color: var(--info); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .toast-region { bottom: calc(var(--bottomnav-height) + var(--space-3)); inset-inline: var(--space-3); max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Empty, loading and error states
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--space-12) var(--space-5); }
.empty-icon {
  width: 44px; height: 44px; margin: 0 auto var(--space-4);
  color: var(--text-muted); background: var(--surface-base);
  border-radius: var(--radius-lg); display: grid; place-items: center;
}
.empty-icon .icon { width: 22px; height: 22px; }
.empty-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: var(--space-2); }
.empty-text { font-size: var(--fs-label); color: var(--text-medium); max-width: 400px; margin: 0 auto var(--space-4); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-base) 25%, #efeeec 50%, var(--surface-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 12px; margin-bottom: var(--space-2); }
.skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-3); }
.skeleton-kpi { height: 96px; border-radius: var(--radius-lg); }
.skeleton-chart { height: 260px; border-radius: var(--radius-card); }
.skeleton-row { height: 44px; margin-bottom: var(--space-2); border-radius: var(--radius-control); }

.spinner {
  width: 18px; height: 18px; border: 2px solid var(--border-medium);
  border-top-color: var(--accent-blue); border-radius: 50%;
  animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-lg { width: 30px; height: 30px; border-width: 3px; }

.loading-overlay {
  position: absolute; inset: 0; background: rgba(255, 255, 255, 0.72);
  display: grid; place-items: center; border-radius: inherit; z-index: 5;
}

/* --------------------------------------------------------------------------
   13. Dropdowns and menus
   -------------------------------------------------------------------------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: var(--space-1); z-index: var(--z-dropdown);
  max-height: min(420px, 70vh); overflow-y: auto;
}
.dropdown-menu[hidden] { display: none; }
.dropdown-menu.align-start { inset-inline-end: auto; inset-inline-start: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-label); color: var(--text-primary);
  cursor: pointer; border: 0; background: transparent; width: 100%; text-align: start;
  font-family: inherit; line-height: var(--lh-label); min-height: 36px;
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--surface-base); text-decoration: none; }
.dropdown-item .icon { width: 16px; height: 16px; color: var(--text-medium); flex-shrink: 0; }
.dropdown-item.is-danger { color: var(--danger); }
.dropdown-item.is-danger .icon { color: var(--danger); }
.dropdown-item.is-active { background: var(--accent-surface); color: var(--accent-blue); font-weight: 600; }
.dropdown-divider { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
.dropdown-header {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. Modals and bottom sheets
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2, 9, 58, 0.4);
  z-index: var(--z-modal); display: grid; place-items: center;
  padding: var(--space-5); overflow-y: auto;
  animation: fadeIn 150ms ease;
}
.modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface-white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  animation: modalIn 180ms ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1040px; }
.modal-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
}
.modal-title { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: 600; }
.modal-desc { font-size: var(--fs-label); color: var(--text-medium); margin-top: var(--space-1); }
.modal-body { padding: 0 var(--space-5) var(--space-5); overflow-y: auto; flex: 1; }
.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
  background: var(--surface-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.modal-close { border: 0; background: transparent; cursor: pointer; color: var(--text-medium); padding: var(--space-1); border-radius: var(--radius-sm); flex-shrink: 0; }
.modal-close:hover { background: var(--surface-base); color: var(--text-primary); }

@media (max-width: 600px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh; animation: sheetIn 200ms ease;
  }
  .modal-footer { border-radius: 0; }
  @keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
  .modal-footer .btn { flex: 1; min-width: 120px; }
}

/* Confirmation modal danger emphasis */
.confirm-danger .modal-title { color: var(--danger); }
.confirm-impact {
  background: var(--warning-surface); border: 1px solid rgba(184, 107, 0, 0.2);
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
  font-size: var(--fs-label); color: var(--warning); margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   15. Charts
   -------------------------------------------------------------------------- */
.chart-wrap { position: relative; width: 100%; }
.chart-canvas { display: block; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--fs-small); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-medium); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.chart-summary {
  font-size: var(--fs-small); color: var(--text-medium);
  padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); margin-top: var(--space-3);
}
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--hero-dark-navy); color: var(--text-inverse);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
  font-size: var(--fs-small); line-height: 1.5; box-shadow: var(--shadow-md);
  white-space: nowrap; opacity: 0; transition: opacity var(--transition-fast);
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip strong { font-weight: 600; }

/* Bar list, a lightweight alternative to charts */
.bar-list { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; }
.bar-label { font-size: var(--fs-label); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; height: 6px; background: var(--surface-base); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent-blue); transition: width var(--transition-base); }
.bar-fill.tone-success { background: var(--success); }
.bar-fill.tone-warning { background: var(--warning); }
.bar-fill.tone-danger { background: var(--danger); }
.bar-fill.tone-brand { background: var(--brand-blue); }

/* --------------------------------------------------------------------------
   16. Filters and toolbars
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); margin-bottom: var(--space-4);
}
.toolbar-sticky { position: sticky; top: var(--topbar-height); z-index: 50; }
.filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.filter-count { background: var(--accent-blue); color: var(--text-inverse); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-pill); }

.search-box { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.search-box .icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.search-box .input { padding-inline-start: 36px; }

/* Global search in the top bar */
.global-search { position: relative; flex: 1; max-width: 440px; min-width: 0; }
.global-search .input { height: 36px; min-height: 36px; background: var(--surface-base); border-color: transparent; }
.global-search .input:focus { background: var(--surface-white); border-color: var(--accent-blue); }
.search-results {
  position: absolute; top: calc(100% + 6px); inset-inline: 0;
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  max-height: 400px; overflow-y: auto; z-index: var(--z-dropdown); padding: var(--space-1);
}
.search-results[hidden] { display: none; }
.search-result-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Record picker
   Used wherever a product or customer has to be chosen, so nobody has to
   remember a numeric id. The dropdown is anchored to a wrapper so it stays
   with its input inside a scrolling table.
   -------------------------------------------------------------------------- */
.picker-wrap { position: relative; display: block; }
.picker-list {
  position: absolute; top: calc(100% + 4px); inset-inline: 0;
  background: var(--surface-white); border: 1px solid var(--border-medium);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  max-height: 300px; overflow-y: auto; z-index: var(--z-dropdown);
  padding: 4px; min-width: 260px;
}
.picker-list[hidden] { display: none; }
.picker-item {
  display: grid;
  /* The name column must be allowed to shrink, otherwise a long product name
     pushes the stock count across and the row reads back to front. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-3);
  padding: 8px 10px; border-radius: var(--radius-control);
  cursor: pointer; font-size: 14px; line-height: 1.35;
}
.picker-item:hover, .picker-item.is-active { background: var(--accent-surface); }
.picker-main {
  grid-column: 1; grid-row: 1;
  font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-meta {
  grid-column: 1; grid-row: 2;
  font-size: 12px; color: var(--text-medium);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-right {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 12px; font-weight: 500; color: var(--text-medium);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Out of stock is shown rather than hidden, since you may still be recording
   a sale for something you are about to restock. */
.picker-item.is-out .picker-right { color: var(--danger); }
.picker-empty {
  padding: 10px 12px; font-size: 14px; color: var(--text-medium);
}
@media (max-width: 600px) {
  .picker-list { min-width: 0; max-height: 240px; }
}

/* --------------------------------------------------------------------------
   Line items
   A grid rather than a table so it can collapse into stacked cards on a
   phone without the columns becoming unreadable.
   -------------------------------------------------------------------------- */
.line-items { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: visible; }
.line-head, .line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 120px 120px 40px;
  gap: var(--space-2); align-items: start;
  padding: 10px 12px;
}
.line-head {
  background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-medium);
}
.line-head .num, .line-row .num { text-align: end; }
.line-row + .line-row { border-top: 1px solid var(--border-subtle); }
.line-row input.num { text-align: end; font-variant-numeric: tabular-nums; }
.line-total {
  text-align: end; font-size: 14px; font-weight: 600; padding-top: 8px;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.line-remove {
  padding: 4px 8px; font-size: 18px; line-height: 1; color: var(--text-muted);
  min-height: 34px;
}
.line-remove:hover { color: var(--danger); background: var(--danger-surface); }
.line-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.line-sum { display: flex; align-items: baseline; gap: var(--space-3); font-size: 14px; }
.line-sum strong { font-size: 17px; font-variant-numeric: tabular-nums; }

/* Three column variant, used where a line has no price and no running total:
   a stock transfer moves units, it does not charge for them. */
.line-items-simple .line-head,
.line-items-simple .line-row {
  grid-template-columns: minmax(0, 1fr) 110px 40px;
}

@media (max-width: 700px) {
  .line-head { display: none; }
  .line-row {
    grid-template-columns: 1fr 1fr;
    padding: 12px; gap: var(--space-2);
    border-top: 1px solid var(--border-subtle);
  }
  /* The product search spans the full width, the numbers pair up beneath. */
  .line-row > div:first-child { grid-column: 1 / -1; }
  .line-row .line-total { grid-column: 1; text-align: start; padding-top: 4px; }
  .line-row > div:last-child { grid-column: 2; text-align: end; }
  .line-items-simple .line-row { grid-template-columns: 1fr auto; }
}

/* Date range control.
   These wrap rather than push the toolbar wider than the screen. Without the
   wrapping the two date inputs force a horizontal scrollbar on a phone, which
   drags the whole page sideways. */
.daterange { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; max-width: 100%; }
.daterange-custom { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; max-width: 100%; }
.daterange-custom .input { width: 148px; max-width: 100%; }
.daterange .select { max-width: 100%; }

@media (max-width: 600px) {
  /* Give each date input a full row so the pair never overflows. */
  .daterange-custom { width: 100%; }
  .daterange-custom .input { flex: 1 1 130px; width: auto; min-width: 0; }
  .daterange-custom .btn { flex: 0 0 auto; }
}

/* Bottom sheet filters on mobile */
@media (max-width: 768px) {
  .toolbar { padding: var(--space-3); }
  .filter-sheet-trigger { display: inline-flex; }
  .toolbar .filter-group.collapsible { display: none; }
  .toolbar .filter-group.collapsible.is-open { display: flex; width: 100%; }
}
@media (min-width: 769px) { .filter-sheet-trigger { display: none; } }

/* --------------------------------------------------------------------------
   17. Pagination
   -------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); }
.pagination-info { font-size: var(--fs-small); color: var(--text-medium); }
.pagination-links { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.page-link {
  min-width: 32px; height: 32px; padding: 0 var(--space-2);
  display: inline-grid; place-items: center; border-radius: var(--radius-control);
  font-size: var(--fs-label); font-weight: 500; color: var(--text-medium);
  border: 1px solid transparent;
}
.page-link:hover { background: var(--surface-base); color: var(--text-primary); text-decoration: none; }
.page-link.is-current { background: var(--accent-blue); color: var(--text-inverse); font-weight: 600; }
.page-link.is-disabled { opacity: 0.4; pointer-events: none; }
.page-gap { color: var(--text-muted); padding: 0 var(--space-1); }

/* --------------------------------------------------------------------------
   18. Tabs
   -------------------------------------------------------------------------- */
/* A horizontal scroller needs min-width 0, otherwise the tabs force the whole
   page wider than the screen instead of scrolling inside their own strip. */
.tabs {
  display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-5);
  min-width: 0; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--space-3) var(--space-4); font-size: var(--fs-label); font-weight: 500;
  color: var(--text-medium); border: 0; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  font-family: inherit; min-height: 44px; flex: 0 0 auto;
}
.tab:hover { color: var(--text-primary); text-decoration: none; }
.tab.is-active, .tab[aria-selected="true"] { color: var(--accent-blue); border-bottom-color: var(--accent-blue); font-weight: 600; }

.tabs-pill { display: inline-flex; gap: 3px; background: var(--surface-base); padding: 3px; border-radius: var(--radius-control); border: 0; overflow-x: auto; min-width: 0; max-width: 100%; }
.tabs-pill .tab { border: 0; border-radius: var(--radius-sm); padding: 6px var(--space-3); margin: 0; min-height: 32px; }
.tabs-pill .tab.is-active { background: var(--surface-white); color: var(--text-primary); box-shadow: var(--shadow-xs); }

/* Settings vertical tabs */
.settings-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-height) + var(--gutter)); display: flex; flex-direction: column; gap: 2px; }
.settings-nav .nav-item { margin-bottom: 0; }
@media (max-width: 1024px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    position: static; flex-direction: row; overflow-x: auto;
    padding-bottom: var(--space-2); scrollbar-width: none;
    /* Without min-width the nav items force this track wider than the screen
       and the whole page scrolls sideways instead of just this strip. */
    min-width: 0; max-width: 100%;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav .nav-item { white-space: nowrap; flex: 0 0 auto; }
  .settings-nav .nav-item.is-active::before { display: none; }
  /* SVG icons must not be squashed by the flex row. */
  .settings-nav .nav-item .icon { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   19. Avatars and user menu
   -------------------------------------------------------------------------- */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-blue); color: var(--text-inverse);
  display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600;
  flex-shrink: 0; overflow: hidden; letter-spacing: 0.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-body); }
.avatar-xl { width: 68px; height: 68px; font-size: var(--fs-heading-s); }

.user-chip { display: flex; align-items: center; gap: var(--space-2); padding: 4px; border-radius: var(--radius-control); border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.user-chip:hover { background: var(--surface-base); }
.user-chip-text { text-align: start; min-width: 0; }
.user-chip-name { font-size: var(--fs-label); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.user-chip-role { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
@media (max-width: 900px) { .user-chip-text { display: none; } }

/* Notification bell */
.bell-btn { position: relative; }
.bell-dot {
  position: absolute; top: 5px; inset-inline-end: 5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--danger); color: var(--text-inverse);
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--surface-white); line-height: 1;
}

/* --------------------------------------------------------------------------
   20. Mobile navigation
   -------------------------------------------------------------------------- */
.mobile-nav {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  height: var(--bottomnav-height);
  background: var(--surface-white);
  border-top: 1px solid var(--border-subtle);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-inner { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--bottomnav-height); }
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-muted); font-size: 10px; font-weight: 500;
  text-decoration: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; padding: 0; min-height: 44px; position: relative;
}
.mobile-nav-item .icon { width: 21px; height: 21px; }
.mobile-nav-item.is-active { color: var(--accent-blue); }
.mobile-nav-item.is-active::before {
  content: ""; position: absolute; top: 0; inset-inline: 22%;
  height: 2px; background: var(--accent-blue); border-radius: 0 0 2px 2px;
}
.mobile-nav-item:hover { text-decoration: none; }
.mobile-nav-badge {
  position: absolute; top: 6px; inset-inline-end: 22%;
  min-width: 15px; height: 15px; padding: 0 3px; background: var(--danger);
  color: var(--text-inverse); border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(2, 9, 58, 0.4);
  z-index: calc(var(--z-drawer) - 1); animation: fadeIn 150ms ease;
}
.drawer-backdrop[hidden] { display: none; }

/* Bottom sheet used for filters and the More menu */
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-modal);
  background: var(--surface-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 84vh; display: flex; flex-direction: column;
  animation: sheetUp 220ms ease; padding-bottom: env(safe-area-inset-bottom);
}
.sheet[hidden] { display: none; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 36px; height: 4px; background: var(--border-medium); border-radius: var(--radius-pill); margin: var(--space-3) auto var(--space-2); flex-shrink: 0; }
.sheet-header { padding: var(--space-2) var(--space-5) var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.sheet-title { font-size: var(--fs-body); font-weight: 600; }
.sheet-body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; }
.sheet-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--space-2); }
.sheet-footer .btn { flex: 1; }

.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.sheet-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2); border-radius: var(--radius-card);
  background: var(--surface-base); color: var(--text-primary);
  font-size: var(--fs-small); font-weight: 500; text-align: center; min-height: 78px;
  justify-content: center;
}
.sheet-tile:hover { background: var(--accent-surface); color: var(--accent-blue); text-decoration: none; }
.sheet-tile .icon { width: 22px; height: 22px; }

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    width: min(288px, 84vw);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: none; }
  .main-area { margin-inline-start: 0; }
  .app-shell.sidebar-collapsed .main-area { margin-inline-start: 0; }
  .mobile-nav { display: block; }
  .main-content { padding-bottom: calc(var(--bottomnav-height) + var(--space-6)); }
  .topbar { padding: 0 var(--space-4); }
}

/* --------------------------------------------------------------------------
   21. Assistant panel
   -------------------------------------------------------------------------- */
.assistant-panel {
  position: fixed; inset-block: 0; inset-inline-end: 0;
  width: min(420px, 100vw); background: var(--surface-white);
  border-inline-start: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg); z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  animation: slideIn 220ms ease;
}
.assistant-panel[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
.assistant-header {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  min-height: var(--topbar-height);
}
.assistant-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.assistant-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); flex-shrink: 0; }

.msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.msg-avatar { width: 26px; height: 26px; border-radius: var(--radius-control); display: grid; place-items: center; flex-shrink: 0; }
.msg-user .msg-avatar { background: var(--brand-blue); color: var(--text-inverse); font-size: 11px; font-weight: 600; }
.msg-assistant .msg-avatar { background: var(--accent-surface); color: var(--accent-blue); }
.msg-avatar .icon { width: 15px; height: 15px; }
.msg-content { flex: 1; min-width: 0; font-size: var(--fs-label); line-height: 1.6; }
.msg-content p { margin-bottom: var(--space-2); }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content ul, .msg-content ol { margin: 0 0 var(--space-2); padding-inline-start: var(--space-5); }
.msg-content code { background: var(--surface-base); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 12px; }
.msg-content pre { background: var(--surface-base); padding: var(--space-3); border-radius: var(--radius-control); overflow-x: auto; font-size: 12px; }
.msg-actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); opacity: 0; transition: opacity var(--transition-fast); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
@media (hover: none) { .msg-actions { opacity: 1; } }

.msg-typing { display: inline-flex; gap: 4px; align-items: center; padding: var(--space-2) 0; }
.msg-typing span { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.2s infinite; }
.msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.assistant-composer { display: flex; gap: var(--space-2); align-items: flex-end; }
.assistant-composer .textarea { min-height: 42px; max-height: 160px; resize: none; padding: 10px var(--space-3); }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.suggestion-chip {
  font-size: var(--fs-small); padding: 6px var(--space-3); border-radius: var(--radius-pill);
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  color: var(--text-medium); cursor: pointer; font-family: inherit; text-align: start;
}
.suggestion-chip:hover { background: var(--accent-surface); color: var(--accent-blue); border-color: transparent; }

.assistant-fab {
  position: fixed; bottom: var(--space-6); inset-inline-end: var(--space-6);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--hero-dark-navy); color: var(--text-inverse);
  border: 0; cursor: pointer; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; z-index: calc(var(--z-drawer) - 2);
}
.assistant-fab:hover { background: var(--brand-blue); }
.assistant-fab .icon { width: 22px; height: 22px; }
@media (max-width: 768px) {
  .assistant-panel { width: 100vw; border: 0; }
  .assistant-fab { bottom: calc(var(--bottomnav-height) + var(--space-4)); inset-inline-end: var(--space-4); width: 46px; height: 46px; }
}

/* Preview table for bulk operations */
.preview-table { font-size: var(--fs-small); }
.preview-table td.is-invalid { background: var(--danger-surface); color: var(--danger); }
.preview-table td.is-changed { background: var(--warning-surface); }
.preview-old { color: var(--text-muted); text-decoration: line-through; margin-inline-end: var(--space-2); }
.preview-new { color: var(--success); font-weight: 600; }

/* --------------------------------------------------------------------------
   22. Auth pages
   -------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface-base);
}
.auth-visual {
  background: var(--hero-dark-navy); color: var(--text-inverse);
  padding: var(--space-12); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden; background-size: cover; background-position: center;
}
.auth-visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(37, 55, 177, 0.35), transparent 58%);
  pointer-events: none;
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual-title { font-size: var(--fs-heading-l); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.auth-visual-text { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: rgba(255, 255, 255, 0.78); max-width: 460px; }
.auth-points { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-3); }
.auth-points li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-label); color: rgba(255, 255, 255, 0.86); }
.auth-points .icon { width: 17px; height: 17px; color: #7fb8f2; flex-shrink: 0; }

.auth-form-side { display: grid; place-items: center; padding: var(--space-8) var(--space-6); overflow-y: auto; }
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.auth-brand-logo {
  width: 40px; height: 40px; border-radius: var(--radius-card);
  background: var(--hero-dark-navy); color: var(--text-inverse);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; overflow: hidden;
}
/* A logo is rarely square. Cropping it to a 40px box cuts the middle out of a
   wordmark, so the slot widens to fit the artwork instead. */
.auth-brand-logo.has-image {
  /* A fixed height with auto width. Without the explicit max-height the image
     grew to its natural size and overlapped the heading beneath it. */
  width: auto; max-width: 168px; height: 40px; flex: 0 0 auto;
  background: transparent; border-radius: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start;
}
.auth-brand-logo.has-image img {
  width: auto; height: auto;
  max-width: 168px; max-height: 40px;
  object-fit: contain; display: block;
}
/* The sign in panel is dark navy. A dark logo would disappear on it, so it is
   flipped to white there. Light logos are left alone by the brightness test. */
.auth-brand-logo.is-inverse img { filter: brightness(0) invert(1); }
.auth-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.auth-brand-name { font-size: var(--fs-heading-s); font-weight: 700; letter-spacing: -0.01em; }
.auth-brand-sub { font-size: var(--fs-small); color: var(--text-muted); }
.auth-title { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: 700; margin-bottom: var(--space-2); }
.auth-subtitle { font-size: var(--fs-label); color: var(--text-medium); margin-bottom: var(--space-6); }
.auth-footer { margin-top: var(--space-8); text-align: center; font-size: var(--fs-small); color: var(--text-muted); }
.auth-footer a { color: var(--text-medium); }

@media (max-width: 1024px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { display: none; }
  .auth-form-side { padding: var(--space-6) var(--space-4); align-items: flex-start; padding-top: var(--space-10); }
}

/* Recovery codes display */
.recovery-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  background: var(--surface-base); padding: var(--space-4); border-radius: var(--radius-card);
  font-family: var(--font-mono); font-size: var(--fs-label); margin: var(--space-4) 0;
}
.recovery-codes span { padding: var(--space-2); background: var(--surface-white); border-radius: var(--radius-sm); text-align: center; letter-spacing: 0.05em; }
@media (max-width: 480px) { .recovery-codes { grid-template-columns: 1fr; } }

.qr-box { display: grid; place-items: center; padding: var(--space-4); background: var(--surface-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.otp-input { letter-spacing: 0.5em; text-align: center; font-size: var(--fs-heading-s); font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   23. Action center and alerts list
   -------------------------------------------------------------------------- */
.action-item {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle); align-items: flex-start;
}
.action-item:last-child { border-bottom: 0; }
.action-item:hover { background: var(--surface-sunken); }
.action-severity {
  width: 30px; height: 30px; border-radius: var(--radius-control);
  display: grid; place-items: center; flex-shrink: 0;
}
.action-severity .icon { width: 16px; height: 16px; }
.severity-critical { background: var(--danger-surface); color: var(--danger); }
.severity-warning { background: var(--warning-surface); color: var(--warning); }
.severity-info { background: var(--info-surface); color: var(--info); }
.severity-success { background: var(--success-surface); color: var(--success); }
.action-content { flex: 1; min-width: 0; }
.action-title { font-size: var(--fs-label); font-weight: 600; margin-bottom: 2px; }
.action-desc { font-size: var(--fs-small); color: var(--text-medium); line-height: 1.5; }
.action-meta { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); }
.action-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.action-buttons { display: flex; gap: var(--space-1); flex-shrink: 0; }
@media (max-width: 600px) {
  .action-item { flex-wrap: wrap; }
  .action-buttons { width: 100%; justify-content: flex-end; padding-top: var(--space-2); }
}

/* Timeline for order and audit history */
.timeline { position: relative; padding-inline-start: var(--space-6); }
.timeline::before { content: ""; position: absolute; inset-inline-start: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border-subtle); }
.timeline-item { position: relative; padding-bottom: var(--space-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; inset-inline-start: calc(var(--space-6) * -1); top: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface-white);
  border: 2px solid var(--border-medium);
}
.timeline-dot.is-success { border-color: var(--success); background: var(--success); }
.timeline-dot.is-danger { border-color: var(--danger); background: var(--danger); }
.timeline-dot.is-warning { border-color: var(--warning); background: var(--warning); }
.timeline-dot.is-active { border-color: var(--accent-blue); background: var(--accent-blue); }
.timeline-title { font-size: var(--fs-label); font-weight: 600; }
.timeline-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
.timeline-body { font-size: var(--fs-small); color: var(--text-medium); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   24. Formula tooltips
   -------------------------------------------------------------------------- */
.info-tip { position: relative; display: inline-flex; }
.info-tip-btn {
  border: 0; background: transparent; padding: 0; cursor: help;
  color: var(--text-muted); display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
}
.info-tip-btn:hover, .info-tip-btn:focus-visible { color: var(--accent-blue); }
.info-tip-btn .icon { width: 13px; height: 13px; }
.info-tip-content {
  position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--hero-dark-navy); color: var(--text-inverse);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
  font-size: var(--fs-small); line-height: 1.5; font-weight: 400;
  width: max-content; max-width: min(260px, calc(100vw - 32px)); z-index: var(--z-dropdown);
  box-shadow: var(--shadow-md); text-align: start; white-space: normal;
  pointer-events: none;
  /* Hidden with display rather than visibility on purpose. A visibility hidden
     tooltip still occupies layout, and on the rightmost KPI card it reached
     past the viewport edge, giving the entire dashboard a horizontal
     scrollbar at every screen width. display none removes it from layout
     completely, so it can never widen the page. */
  display: none;
}
.info-tip:hover .info-tip-content,
.info-tip:focus-within .info-tip-content { display: block; pointer-events: auto; }
.info-tip-content .formula { font-family: var(--font-mono); font-size: 11px; display: block; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, 0.16); color: #a9c9ee; }

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.p-0 { padding: 0 !important; }
.p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.flex-1 { flex: 1; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.hidden { display: none !important; }
/* Used to push a small caption onto its own line under a table cell value. */
.d-block { display: block; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.no-underline { text-decoration: none; }
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.rounded { border-radius: var(--radius-card); }
.bg-base { background: var(--surface-base); }
.bg-white { background: var(--surface-white); }
.bg-sunken { background: var(--surface-sunken); }

@media (max-width: 768px) { .hide-mobile { display: none !important; } }
@media (min-width: 769px) { .show-mobile { display: none !important; } }
@media (max-width: 1024px) { .hide-tablet { display: none !important; } }

/* Definition list used in detail panels */
.dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--space-2) var(--space-4); font-size: var(--fs-label); }
.dl dt { color: var(--text-medium); font-weight: 500; }
.dl dd { margin: 0; color: var(--text-primary); font-weight: 500; word-break: break-word; }
@media (max-width: 480px) { .dl { grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-3); } .dl dd { margin-bottom: var(--space-2); } }

/* Metric row used in summaries */
.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--fs-label); }
.metric-row + .metric-row { border-top: 1px solid var(--border-subtle); }
.metric-row .metric-label { color: var(--text-medium); display: flex; align-items: center; gap: 5px; }
.metric-row .metric-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-row.is-total { border-top: 2px solid var(--border-medium); font-weight: 700; padding-top: var(--space-3); margin-top: var(--space-1); }
.metric-row.is-total .metric-label { color: var(--text-primary); font-weight: 700; }
.metric-row.is-negative .metric-value { color: var(--danger); }
.metric-row.is-positive .metric-value { color: var(--success); }
.metric-row.is-indent .metric-label { padding-inline-start: var(--space-4); }

/* Print */
@media print {
  .sidebar, .topbar, .mobile-nav, .assistant-panel, .assistant-fab,
  .page-actions, .toolbar, .pagination, .btn, .skip-link { display: none !important; }
  .main-area { margin: 0 !important; }
  .main-content { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
  .table thead th { background: #f5f5f5; }
  a { color: #000; text-decoration: none; }
}

/* High contrast preference */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: rgba(0, 0, 0, 0.24);
    --border-medium: rgba(0, 0, 0, 0.4);
    --text-medium: #4a4643;
    --text-muted: #6b6660;
  }
}

/* Custom scrollbars, subtle */
.table-wrap::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar, .assistant-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb, .sidebar-nav::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb, .assistant-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb, .sheet-body::-webkit-scrollbar-thumb {
  background: var(--border-medium); border-radius: var(--radius-pill);
}
.table-wrap::-webkit-scrollbar-track, .sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Help handbook
   Built for somebody who finds long text hard to read. Every rule here exists
   to break information into pieces the eye can land on: big numbered steps,
   two column definitions, and money laid out like a receipt rather than a
   sentence. Line length is capped at roughly 68 characters because anything
   wider makes it hard to find the start of the next line.
   ========================================================================== */

/* ---------- search ---------- */
.help-search {
  position: relative; display: flex; gap: var(--space-2); align-items: center;
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.help-search .icon {
  position: absolute; inset-inline-start: 26px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.help-search .input {
  flex: 1; min-width: min(240px, 100%); padding-inline-start: 42px; height: 44px; font-size: 16px;
}

/* ---------- search results ---------- */
.help-hit {
  display: block; padding: var(--space-4); border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle); margin-bottom: var(--space-3);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.help-hit:hover { border-color: var(--accent-blue); background: var(--surface-sunken); text-decoration: none; }
.help-hit-title { display: block; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.help-hit-where {
  display: inline-block; margin: 4px 0 6px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent-blue);
}
.help-hit-text { display: block; font-size: 14px; color: var(--text-medium); line-height: 1.55; }

/* ---------- hero, the two starter guides ---------- */
.help-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6); align-items: center;
  background: var(--hero-dark-navy); color: var(--text-inverse);
  border-radius: var(--radius-xl); padding: var(--space-8); margin-bottom: var(--space-8);
}
.help-hero-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.help-hero-title { margin: 0 0 8px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.help-hero-sub { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 46ch; }
.help-hero-links { display: grid; gap: var(--space-3); }
.help-hero-btn {
  display: flex; align-items: center; gap: var(--space-4);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none;
  color: var(--text-inverse); transition: background .15s;
}
.help-hero-btn:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.help-hero-num {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--accent-blue); color: #fff; font-weight: 700; font-size: 16px;
  display: grid; place-items: center;
}
.help-hero-btn strong { display: block; font-size: 15px; font-weight: 600; }
.help-hero-btn small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 2px; }

/* ---------- sections and topic cards ---------- */
.help-section { margin-bottom: var(--space-8); }
.help-section-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.help-section-icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--radius-card);
  background: var(--accent-surface); color: var(--accent-blue);
  display: grid; place-items: center;
}
.help-section-icon .icon { width: 19px; height: 19px; }
.help-section-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.help-section-blurb { margin: 2px 0 0; font-size: 14px; color: var(--text-medium); }

.help-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.help-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-4);
  text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.help-card:hover {
  border-color: var(--accent-blue); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06); text-decoration: none;
}
.help-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.help-card-sum { font-size: 14px; color: var(--text-medium); line-height: 1.5; flex: 1; }
.help-card-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.help-card-time .icon { width: 13px; height: 13px; }

.help-footer-card { border-color: rgba(9, 127, 232, .25); background: var(--info-surface); }

/* ---------- topic page shell ---------- */
.help-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-8); }
.help-side { position: sticky; top: calc(var(--topbar-height) + 16px); align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.help-side-back {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600;
  color: var(--accent-blue); text-decoration: none; margin-bottom: var(--space-4);
}
.help-side-back .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.help-side-label {
  margin: var(--space-4) 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.help-side-label:first-of-type { margin-top: 0; }
.help-side-link {
  display: block; padding: 7px 10px; border-radius: var(--radius-control);
  font-size: 14px; color: var(--text-medium); text-decoration: none; line-height: 1.4;
}
.help-side-link:hover { background: var(--surface-sunken); color: var(--text-primary); text-decoration: none; }
.help-side-link.is-active { background: var(--accent-surface); color: var(--accent-blue); font-weight: 600; }

/* ---------- topic body ---------- */
.help-body { max-width: 68ch; }
.help-eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-blue);
}
.help-title { margin: 0 0 var(--space-4); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.help-intro { font-size: 18px; line-height: 1.6; color: var(--text-medium); margin: 0 0 var(--space-6); }
.help-h2 { font-size: 18px; font-weight: 600; margin: var(--space-8) 0 var(--space-4); letter-spacing: -.01em; }

/* ---------- numbered steps ---------- */
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.help-step {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.help-step-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--hero-dark-navy); color: #fff; font-size: 15px; font-weight: 700;
  display: grid; place-items: center;
}
.help-step-body { flex: 1; min-width: 0; }
.help-step-do { margin: 4px 0 0; font-size: 16px; font-weight: 600; line-height: 1.45; }
.help-step-why { margin: 6px 0 0; font-size: 14.5px; color: var(--text-medium); line-height: 1.55; }

/* ---------- money worked example, laid out like a receipt ---------- */
.help-sum {
  background: var(--surface-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-6);
}
.help-sum-title { margin: 0 0 var(--space-4); font-size: 15px; font-weight: 600; }
.help-sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: 9px 0; border-bottom: 1px solid var(--border-subtle);
}
.help-sum-label { display: flex; align-items: baseline; gap: 9px; font-size: 15px; color: var(--text-medium); }
.help-sum-sign { font-weight: 700; font-size: 15px; width: 12px; flex: 0 0 12px; }
.help-sum-plus { color: var(--success); }
.help-sum-minus { color: var(--danger); }
.help-sum-value { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.help-sum-row.is-total {
  border-bottom: 0; border-top: 2px solid var(--text-primary); margin-top: 6px; padding-top: 12px;
}
.help-sum-row.is-total .help-sum-label { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.help-sum-row.is-total .help-sum-value { font-size: 21px; font-weight: 700; }
.help-sum-foot { margin: var(--space-4) 0 0; font-size: 14px; color: var(--text-medium); line-height: 1.6; }

/* ---------- definitions ---------- */
.help-facts { display: grid; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.help-fact {
  display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--surface-white);
}
.help-fact + .help-fact { border-top: 1px solid var(--border-subtle); }
.help-fact-term { font-size: 15px; font-weight: 600; }
.help-fact-def { font-size: 15px; color: var(--text-medium); line-height: 1.55; }

/* ---------- collapsible problems ---------- */
.help-problems { display: grid; gap: var(--space-2); }
.help-problem { background: var(--surface-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.help-problem summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer; font-size: 15px; font-weight: 600; list-style: none;
}
.help-problem summary::-webkit-details-marker { display: none; }
.help-problem summary:hover { background: var(--surface-sunken); }
.help-problem-chev { color: var(--text-muted); transition: transform .18s; flex: 0 0 auto; }
.help-problem-chev .icon { width: 16px; height: 16px; }
.help-problem[open] .help-problem-chev { transform: rotate(90deg); }
.help-problem p { margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: 15px; color: var(--text-medium); line-height: 1.6; }

/* ---------- callouts ---------- */
.help-callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-6) 0;
  border: 1px solid transparent;
}
.help-callout-icon { flex: 0 0 auto; }
.help-callout-icon .icon { width: 19px; height: 19px; }
.help-callout-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.help-callout-text { margin: 0; font-size: 15px; line-height: 1.6; }
.help-callout-list { margin: 0; padding-inline-start: 18px; font-size: 15px; line-height: 1.6; display: grid; gap: 6px; }
.help-callout.is-warn { background: var(--warning-surface); border-color: rgba(184, 107, 0, .22); color: var(--warning); }
.help-callout.is-note { background: var(--info-surface); border-color: rgba(9, 127, 232, .2); color: var(--accent-blue); }
.help-callout.is-tip  { background: var(--success-surface); border-color: rgba(22, 128, 60, .18); color: var(--success); }
.help-callout.is-warn .help-callout-text,
.help-callout.is-note .help-callout-text,
.help-callout.is-tip .help-callout-text,
.help-callout.is-tip .help-callout-list { color: var(--text-medium); }

/* ---------- previous and next ---------- */
.help-nextprev {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-3); margin-top: var(--space-10);
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle);
}
.help-np {
  display: block; padding: var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); text-decoration: none; transition: border-color .15s;
}
.help-np:hover { border-color: var(--accent-blue); text-decoration: none; }
.help-np.is-next { text-align: end; }
.help-np-dir {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}
.help-np-title { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* The long topic list gets in the way on a phone, so only the back link stays. */
  .help-side { position: static; max-height: none; }
  .help-side-label, .help-side-link { display: none; }
  .help-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
}
@media (max-width: 600px) {
  .help-title { font-size: 24px; }
  .help-intro { font-size: 16.5px; }
  .help-step { padding: var(--space-3); gap: var(--space-3); }
  .help-step-do { font-size: 15px; }
  /* Term above definition, because two columns squeeze both into slivers. */
  .help-fact { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  /* Keep the label and the amount on one line even when the label is long.
     Letting it wrap put the amount underneath, which broke the receipt
     alignment and made the column of figures impossible to scan. */
  .help-sum-row { flex-wrap: nowrap; gap: var(--space-3); align-items: start; }
  .help-sum-label { flex: 1; min-width: 0; }
  .help-sum-value { flex: 0 0 auto; }
  .help-hero-title { font-size: 22px; }
}

/* ---------- printing ---------- */
@media print {
  .help-side, .help-nextprev, .help-search, .sidebar, .topbar, .mobile-nav { display: none !important; }
  .help-layout { grid-template-columns: 1fr; }
  .help-body { max-width: none; }
  .help-step, .help-sum, .help-facts, .help-problem { break-inside: avoid; }
  .help-problem p { display: block !important; }
}