/* WOW design system (UI-1) — one stylesheet for the staff console and the client portal.
 *
 * - Brand: navy primary, white surfaces, light-blue accents. Every text/background pair below is
 *   WCAG 2.1 AA (4.5:1 for text, 3:1 for borders and focus); tests/test_ui_design_system.py checks.
 * - Direction: logical properties only (inline-start/end, block-start/end), so the same rules
 *   serve Arabic (dir="rtl") and English (dir="ltr"). No left/right anywhere.
 * - Mobile first: base rules target 360 px; wider layouts are added with min-width queries.
 * - No external fonts or CDNs: system font stacks with Arabic-capable fallbacks.
 * - Served from the application itself (style-src 'self'); no inline styles are needed.
 * Reference: docs/design-system.md.
 */

/* ============================================================== 1. tokens */
:root {
  /* brand */
  --color-navy-900: #0b1f3a;
  --color-navy-700: #14305a;
  --color-navy-500: #2a4f86;
  --color-sky-50: #e8f2fc;
  --color-sky-100: #d3e6f8;
  --color-sky-200: #9fcbf2;
  --color-sky-400: #3d8fd6;
  --color-sky-600: #2b7fd0;
  --color-link: #1d5fa6;

  /* neutrals */
  --color-white: #ffffff;
  --color-canvas: #f4f7fb;
  --color-ink: #1a2233;
  --color-muted: #566275;
  --color-line: #dbe2ec;
  --color-line-strong: #8792a6;
  --color-neutral-soft: #edf1f6;
  --color-neutral-text: #3a4558;

  /* status: text colour on its soft background */
  --color-success: #0b6b4f;
  --color-success-soft: #e4f4ee;
  --color-warning: #7a4d00;
  --color-warning-soft: #fff3d6;
  --color-danger: #a8221b;
  --color-danger-soft: #fdecea;
  --color-danger-strong: #8a1b16;
  --color-info: #14305a;
  --color-info-soft: #e8f2fc;

  /* roles */
  --color-primary: var(--color-navy-700);
  --color-primary-strong: var(--color-navy-900);
  --color-on-primary: var(--color-white);
  --color-surface: var(--color-white);
  --color-accent: var(--color-sky-400);
  --color-focus: var(--color-sky-600);
  --color-nav-text: #c9d7ea;

  /* spacing (4 px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 1px rgba(11, 31, 58, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.08), 0 1px 3px rgba(11, 31, 58, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.14);

  /* typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic",
    Tahoma, "Geeza Pro", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic UI Text",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* layout */
  --topbar-height: 56px;
  --sidenav-width: 248px;
  --content-max: 1200px;
  --touch-target: 44px;
}

/* ============================================================== 2. base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-block-size: 100vh;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
:lang(ar) body, body:lang(ar) { font-family: var(--font-arabic); line-height: 1.7; }
h1, h2, h3, h4 { color: var(--color-primary-strong); line-height: var(--leading-tight); }
h1 { font-size: var(--text-xl); margin-block: 0 var(--space-4); }
h2 { font-size: var(--text-lg); margin-block: 0 var(--space-3); }
h3 { font-size: var(--text-md); margin-block: 0 var(--space-2); }
p { margin-block: 0 var(--space-3); }
a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-strong); }
small, .text-sm { font-size: var(--text-sm); }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
img, svg { max-inline-size: 100%; }
hr { border: 0; border-block-start: 1px solid var(--color-line); margin-block: var(--space-4); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.muted { color: var(--color-muted); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.visually-hidden {
  /* Scroll containers (.table-wrap, .sidenav) are positioned so this never escapes them. */
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-2); inset-block-start: -100px;
  z-index: 100; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-primary-strong); font-weight: var(--weight-semibold);
}
.skip-link:focus { inset-block-start: var(--space-2); }

/* ============================================================== 3. layout shell */
/* <div class="app"> <header> .topbar [+ .sidenav] </header> [.sidenav] <main> .content </main>.
 * Phones: the console navigation is a collapsible panel under the top bar (open without
 * JavaScript; ui.js adds the toggle). From 1024 px, on pages whose <body> has .has-sidenav, the
 * navigation is a fixed column at the inline start and <main> is padded to clear it.
 * The header stays at the top while scrolling only when it is no taller than the top bar: when
 * ui.js has collapsed the navigation (.js), when it holds no navigation (portal), or from 1024 px.
 * Without JavaScript on a phone it scrolls away with the page, so its open navigation can never
 * cover <main>. */
.app > header { position: relative; z-index: 20; }
.js .app > header, .app > header:not(:has(.sidenav)) { position: sticky; inset-block-start: 0; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: var(--topbar-height);
  padding-block: var(--space-2); padding-inline: var(--space-4);
  background: var(--color-primary-strong); color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.topbar a { color: var(--color-on-primary); }
.topbar__brand {
  display: flex; flex-direction: column; text-decoration: none; font-weight: var(--weight-bold);
  letter-spacing: 0.2px; line-height: var(--leading-tight);
}
.topbar__brand small { font-weight: var(--weight-regular); color: var(--color-nav-text); font-size: var(--text-xs); }
.topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.topbar__meta { color: var(--color-nav-text); font-size: var(--text-sm); }
.topbar form { margin: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--touch-target); min-block-size: var(--touch-target);
  padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-md);
  background: transparent; color: var(--color-on-primary); cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; inline-size: 18px; block-size: 2px; background: currentColor; border-radius: 2px;
  content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; inset-block-start: -6px; }
.nav-toggle__bars::after { position: absolute; inset-block-start: 6px; }

.sidenav {
  position: relative;
  background: var(--color-primary-strong); color: var(--color-nav-text);
  padding-block: var(--space-2) var(--space-4); padding-inline: var(--space-3);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}
.js .sidenav[data-collapsible]:not([data-open]) { display: none; }
/* Opened by ui.js inside the sticky header: never taller than the screen, scrolls on its own. */
.js .sidenav[data-collapsible] { max-block-size: calc(100vh - var(--topbar-height)); overflow-y: auto; }
.sidenav__group { margin-block-end: var(--space-3); }
.sidenav__group:not(:has(a, button)) { display: none; }
.sidenav__heading {
  margin-block: var(--space-3) var(--space-1); padding-inline: var(--space-3);
  color: var(--color-sky-200); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: flex; align-items: center; min-block-size: var(--touch-target);
  padding-block: var(--space-2); padding-inline: var(--space-3);
  border-radius: var(--radius-md); color: var(--color-nav-text); text-decoration: none;
  font-weight: var(--weight-medium);
}
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-white); }
.nav-link[aria-current="page"] {
  background: var(--color-navy-700); color: var(--color-white);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
[dir="rtl"] .nav-link[aria-current="page"] { box-shadow: inset -3px 0 0 var(--color-accent); }

.content {
  inline-size: 100%; max-inline-size: var(--content-max); margin-inline: auto;
  padding-block: var(--space-5) var(--space-7); padding-inline: var(--space-4);
}
.content--narrow { max-inline-size: 760px; }
.page-header { margin-block-end: var(--space-5); }
.page-header h1 { margin-block-end: var(--space-1); }
.page-header p { color: var(--color-muted); margin: 0; }

@media (min-width: 1024px) {
  .has-sidenav .sidenav, .js .has-sidenav .sidenav[data-collapsible]:not([data-open]) {
    display: block; position: fixed; z-index: 10;
    inset-block: var(--topbar-height) 0; inset-inline-start: 0; inline-size: var(--sidenav-width);
    max-block-size: none; overflow-y: auto; border-block-start: 0;
  }
  .has-sidenav main { padding-inline-start: var(--sidenav-width); }
  .app > header { position: sticky; inset-block-start: 0; }
  .content { padding-inline: var(--space-6); }
  .nav-toggle { display: none; }
  h1 { font-size: var(--text-2xl); }
}

/* ============================================================== 4. components */
/* --- card */
.card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4); margin-block-end: var(--space-4);
}
.card > :last-child { margin-block-end: 0; }
.card__title { display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 768px) { .card { padding: var(--space-5); } }

/* --- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--touch-target); padding-block: var(--space-2); padding-inline: var(--space-4);
  border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-on-primary);
  font: inherit; font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: var(--color-on-primary); }
.btn--secondary { background: var(--color-surface); color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-sky-50); color: var(--color-primary-strong); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-link); }
.btn--ghost:hover { background: var(--color-sky-50); border-color: transparent; color: var(--color-primary-strong); }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-strong); border-color: var(--color-danger-strong); }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--color-on-primary); }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--color-white); }
.btn--sm { min-block-size: 36px; padding-inline: var(--space-3); font-size: var(--text-sm); }
.btn--block { display: flex; inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
@media (max-width: 599px) { .actions--stack > .btn { flex: 1 1 100%; } }

/* --- form fields */
.field { margin-block-end: var(--space-4); }
.field__label, .field > label { display: block; margin-block-end: var(--space-1); font-weight: var(--weight-semibold); }
.field__help { margin-block: var(--space-1) 0; color: var(--color-muted); font-size: var(--text-sm); }
.field__errors { list-style: none; margin-block: var(--space-1) 0; padding: 0; color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.input, .field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  inline-size: 100%; min-block-size: var(--touch-target);
  padding-block: var(--space-2); padding-inline: var(--space-3);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink); font: inherit;
}
.field--invalid :where(input, select, textarea), [aria-invalid="true"] {
  border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger);
}
.check { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-regular); }
.check input { inline-size: 22px; block-size: 22px; margin-block-start: 2px; flex: none; accent-color: var(--color-primary); }

/* --- tables: wrap in .table-wrap to scroll sideways on small screens */
.table-wrap {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface);
}
.table-wrap:focus-visible { outline-offset: 0; }
.table-wrap > table { border: 0; margin: 0; }
.table { inline-size: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.table th, .table td {
  padding-block: var(--space-2); padding-inline: var(--space-3);
  border-block-end: 1px solid var(--color-line); text-align: start; vertical-align: top;
}
.table thead th {
  background: var(--color-canvas); color: var(--color-muted); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.table tbody tr:last-child > * { border-block-end: 0; }
.table tbody tr:hover { background: var(--color-sky-50); }
.table td.num, .table th.num { text-align: end; }
.table__empty { padding: var(--space-5); color: var(--color-muted); text-align: center; }

/* --- alerts */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid transparent; border-inline-start-width: 4px; border-radius: var(--radius-md);
}
.alert > :last-child { margin-block-end: 0; }
.alert__title { display: block; font-weight: var(--weight-bold); }
.alert--info { background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-sky-200); border-inline-start-color: var(--color-accent); }
.alert--success { background: var(--color-success-soft); color: var(--color-success); border-color: #b6dfd0; border-inline-start-color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: #f0d49a; border-inline-start-color: #c98a00; }
.alert--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: #f2c4c0; border-inline-start-color: var(--color-danger); }

/* --- badges */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding-block: 2px; padding-inline: var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-neutral-soft); color: var(--color-neutral-text);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap;
}
.badge--info { background: var(--color-info-soft); color: var(--color-info); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* --- KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-block-end: var(--space-4); }
.kpi {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-ink); text-decoration: none;
  border-block-start: 3px solid var(--color-accent);
}
a.kpi:hover { box-shadow: var(--shadow-md); border-color: var(--color-sky-200); color: var(--color-ink); }
.kpi__label { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.kpi__value { color: var(--color-primary-strong); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__hint { color: var(--color-muted); font-size: var(--text-xs); }
.kpi--success { border-block-start-color: var(--color-success); }
.kpi--warning { border-block-start-color: #c98a00; }
.kpi--danger { border-block-start-color: var(--color-danger); }

/* --- empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-lg); background: var(--color-surface); text-align: center;
}
.empty__icon {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%;
  background: var(--color-sky-50); color: var(--color-primary); font-size: var(--text-xl); font-weight: var(--weight-bold);
}
.empty__title { margin: 0; color: var(--color-primary-strong); font-weight: var(--weight-semibold); }
.empty__text { margin: 0; color: var(--color-muted); max-inline-size: 46ch; }
.empty .btn { margin-block-start: var(--space-2); }

/* --- description list (label / value pairs) */
.details { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.details dt { color: var(--color-muted); font-size: var(--text-sm); }
.details dd { margin: 0 0 var(--space-2); font-weight: var(--weight-medium); }
@media (min-width: 600px) {
  .details { grid-template-columns: max-content 1fr; }
  .details dd { margin: 0; }
}

/* --- list of rows (mobile-friendly alternative to a table) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-block-start: 1px solid var(--color-line); }
.rows > li:first-child { border-block-start: 0; }
.row-link, .row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-1) var(--space-4); min-block-size: 56px; padding-block: var(--space-3); padding-inline: var(--space-1);
  color: var(--color-ink); text-decoration: none;
}
.row-link:hover { background: var(--color-sky-50); color: var(--color-ink); }
.row__main { display: flex; flex-direction: column; min-inline-size: 0; }
.row__title { font-weight: var(--weight-semibold); }
.row__sub { color: var(--color-muted); font-size: var(--text-sm); }
.row__end { text-align: end; }
.row-link .row__chevron { color: var(--color-muted); }
[dir="rtl"] .row__chevron { transform: scaleX(-1); }

/* ============================================================== 5. staff console compatibility */
/* Console pages written before UI-1 use bare elements and a few short class names. These rules
 * restyle them with the tokens above, so every console page adopts the design system through the
 * shared base template without editing the page. They have zero specificity (:where), so the
 * components above always win. New markup should use the components, not these. */
:where(.console .content table) { inline-size: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
:where(.console .content table th), :where(.console .content table td) {
  padding-block: var(--space-2); padding-inline: var(--space-3); border-block-end: 1px solid var(--color-line);
  text-align: start; vertical-align: top;
}
:where(.console .content table th) { color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
:where(.console .content thead th) { background: var(--color-canvas); }
@media (max-width: 767px) {
  /* Tables without a .table-wrap scroll sideways instead of overflowing the page. */
  :where(.console .content table:not(.table-wrap > table)) { position: relative; display: block; max-inline-size: 100%; overflow-x: auto; }
}
:where(.console .flag) { color: var(--color-danger); font-weight: var(--weight-bold); }
:where(.console .notice) {
  margin-block-end: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid #f0d49a; border-inline-start: 4px solid #c98a00; border-radius: var(--radius-md);
  background: var(--color-warning-soft); color: var(--color-warning);
}
:where(.console .pill) {
  display: inline-block; padding-block: 1px; padding-inline: var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-neutral-soft); color: var(--color-neutral-text); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
:where(.console dl:not(.details)) { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
:where(.console dl:not(.details) dt) { color: var(--color-muted); }
:where(.console dl:not(.details) dd) { margin: 0; }
:where(.console .images) { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
:where(.console .images img) { inline-size: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
:where(.console form.inline) { display: inline; }
:where(.console .content button:not(.btn)) {
  min-block-size: 36px; padding-block: var(--space-2); padding-inline: var(--space-4);
  border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-on-primary);
  font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
}
:where(.console .content button:not(.btn):hover) { background: var(--color-primary-strong); }
:where(.console .content button.secondary:not(.btn)) { background: var(--color-surface); color: var(--color-primary); }
:where(.console .content button.secondary:not(.btn):hover) { background: var(--color-sky-50); }
:where(.console .content button.danger:not(.btn)) { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-white); }
:where(.console .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
:where(.console .content select), :where(.console .content textarea) {
  max-inline-size: 100%; min-block-size: 38px; padding-block: var(--space-1); padding-inline: var(--space-2);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink); font: inherit;
}
:where(.console .errorlist) { list-style: none; padding: 0; color: var(--color-danger); font-weight: var(--weight-medium); }

@media print {
  .topbar, .sidenav, .nav-toggle { display: none !important; }
  .has-sidenav main { padding-inline-start: 0; }
  body { background: var(--color-white); }
  .card { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================== 6. page patterns */
.auth-card { max-inline-size: 440px; margin-block: var(--space-6); margin-inline: auto; }
.auth-card h1 { margin-block-end: var(--space-4); }
.breadcrumbs { margin-block-end: var(--space-3); font-size: var(--text-sm); }
.card--highlight { border-color: var(--color-sky-200); background: var(--color-sky-50); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); }
.form-grid > .actions, .form-grid > .fieldset { grid-column: 1 / -1; }
@media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fieldset { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.fieldset legend { padding-inline: var(--space-1); font-weight: var(--weight-semibold); }
.fieldset .check { margin-block: var(--space-2); }
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cell-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.btn { white-space: nowrap; }
@media (max-width: 599px) {
  .topbar__brand small, .topbar__meta { display: none; }
}