/* ──────────────────────────────────────────────────────────────────────────
   MLZW / Zandbak — Static (class-based) component layer.

   The first-class components are React (styled with inline token-driven
   styles); they ship in _ds_bundle.js for React Islands. Server-rendered
   surfaces (Go + HTMX) cannot mount React, so this sheet mirrors the same
   primitives as plain CSS classes that read the SAME design tokens — so both
   render paths share one visual language and track light/dark automatically.

   Consume ONE file: link this sheet. It @imports styles.css (tokens + base
   reset + fonts). React consumers keep linking styles.css directly and read
   components from the bundle; they do not need this file.

   Convention: .mlzw-<block>, BEM-ish --modifiers and __parts. Class names and
   metrics mirror the matching component in components/<group>/<Name>.jsx — keep
   them in lockstep when either side changes.
   ────────────────────────────────────────────────────────────────────────── */

@import "styles.css";

/* ══ Button ════════════════════════════════════════════════════════════════
   Mirrors components/core/Button.jsx. Bare .mlzw-btn = filled / accent /
   medium (the JSX defaults). Compose: size + variant + tone modifiers. */
.mlzw-btn {
  --btn-tone: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-sm);
  border: 1px solid var(--btn-tone);
  background: var(--btn-tone);
  color: var(--text-on-accent);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-appearance: none;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.mlzw-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.mlzw-btn:disabled,
.mlzw-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* tones (set the tone colour used by filled bg / tinted+outline+plain fg) */
.mlzw-btn--danger  { --btn-tone: var(--system-red); }
.mlzw-btn--neutral { --btn-tone: var(--text-primary); }

/* variants */
.mlzw-btn--tinted {
  background: var(--status-info-bg);
  color: var(--btn-tone);
  border-color: transparent;
}
.mlzw-btn--tinted.mlzw-btn--danger { background: var(--status-danger-bg); }
.mlzw-btn--grey {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: transparent;
}
.mlzw-btn--outline {
  background: transparent;
  color: var(--btn-tone);
  border-color: var(--border-hairline);
}
.mlzw-btn--plain {
  background: transparent;
  color: var(--btn-tone);
  border-color: transparent;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* sizes */
.mlzw-btn--small {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--text-subhead);
  gap: 0.35rem;
}
.mlzw-btn--large {
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  font-size: var(--text-headline);
  border-radius: var(--radius-md);
  gap: 0.5rem;
}
.mlzw-btn--full { width: 100%; }

/* ══ IconButton ════════════════════════════════════════════════════════════
   Mirrors components/core/IconButton.jsx. Bare = plain / neutral / circle. */
.mlzw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.mlzw-icon-btn:hover:not(:disabled) { background: var(--bg-hover); }
.mlzw-icon-btn:active:not(:disabled) { transform: scale(0.92); }
.mlzw-icon-btn:disabled { opacity: 0.4; cursor: default; }
.mlzw-icon-btn--small { width: 2rem; height: 2rem; }
.mlzw-icon-btn--large { width: 3rem; height: 3rem; }
.mlzw-icon-btn--rounded { border-radius: var(--radius-sm); }
.mlzw-icon-btn--accent { color: var(--accent); }
.mlzw-icon-btn--danger { color: var(--system-red); }
.mlzw-icon-btn--grey { background: var(--bg-hover); }
.mlzw-icon-btn--outline { border-color: var(--border-hairline); }

/* ══ Icon ══════════════════════════════════════════════════════════════════
   Sizing/stroke helper for server-emitted inline <svg> (24×24 viewBox). Copy
   the path data from components/core/Icon.jsx (Lucide idiom). currentColor. */
.mlzw-icon {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mlzw-icon--sm { width: 1rem; height: 1rem; }
.mlzw-icon--lg { width: 1.5rem; height: 1.5rem; }

/* ══ Badge ═════════════════════════════════════════════════════════════════
   Mirrors components/core/Badge.jsx. Bare = neutral. */
.mlzw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  background: var(--status-muted-bg);
  color: var(--badge-neutral-text);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
}
.mlzw-badge--success { background: var(--status-success-bg); color: var(--badge-success-text); }
.mlzw-badge--info    { background: var(--status-info-bg);    color: var(--badge-info-text); }
.mlzw-badge--warning { background: var(--status-warning-bg); color: var(--badge-warning-text); }
.mlzw-badge--danger  { background: var(--status-danger-bg);  color: var(--badge-danger-text); }
.mlzw-badge--accent  { background: var(--status-info-bg);    color: var(--badge-accent-text); }
.mlzw-badge__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ══ Avatar ════════════════════════════════════════════════════════════════
   Mirrors components/core/Avatar.jsx. Bare = accent, medium. */
.mlzw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  overflow: hidden;
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  user-select: none;
}
.mlzw-avatar--neutral { background: var(--status-muted-bg); color: var(--text-secondary); }
.mlzw-avatar--small  { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
.mlzw-avatar--large  { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.mlzw-avatar--xlarge { width: 3.5rem;  height: 3.5rem;  font-size: 1.4rem; }
.mlzw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mlzw-avatar:has(img) { background: var(--bg-sunken); }

/* ══ Card ══════════════════════════════════════════════════════════════════
   Mirrors components/core/Card.jsx. Header/footer use space-6 horizontal
   padding; body padding is set by a modifier (default medium = space-6). */
.mlzw-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.mlzw-card--interactive {
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.mlzw-card--interactive:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.mlzw-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
}
.mlzw-card__title {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
}
.mlzw-card__subtitle {
  font-size: var(--text-footnote);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.mlzw-card__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.mlzw-card__body { padding: var(--space-6); }
.mlzw-card__body--none  { padding: 0; }
.mlzw-card__body--small { padding: var(--space-4); }
.mlzw-card__body--large { padding: var(--space-8); }
.mlzw-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-sunken);
}

/* ══ StatCard ══════════════════════════════════════════════════════════════
   Mirrors components/core/StatCard.jsx. */
.mlzw-statcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mlzw-statcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mlzw-statcard__label {
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.mlzw-statcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--status-info-bg);
}
.mlzw-statcard__figures {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mlzw-statcard__value {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.mlzw-statcard__delta {
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  color: var(--success);
  font-variant-numeric: tabular-nums;
}
.mlzw-statcard__delta--down { color: var(--danger); }
.mlzw-statcard__delta--flat { color: var(--text-secondary); }
.mlzw-statcard__desc { font-size: var(--text-footnote); color: var(--text-secondary); }

/* ══ EmptyState ════════════════════════════════════════════════════════════
   Mirrors components/core/EmptyState.jsx. */
.mlzw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
}
.mlzw-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-circle);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.mlzw-empty__title {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.mlzw-empty__desc {
  font-size: var(--text-callout);
  color: var(--text-secondary);
  max-width: 26rem;
}
.mlzw-empty__action { margin-top: var(--space-2); }

/* ══ Field + form controls ═════════════════════════════════════════════════
   Mirrors components/forms/{Field,TextField,Textarea,Select}.jsx. */
.mlzw-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mlzw-label {
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.mlzw-label__req { color: var(--system-red); margin-left: 0.2rem; }
.mlzw-hint  { font-size: var(--text-footnote); color: var(--text-secondary); }
.mlzw-error { font-size: var(--text-footnote); color: var(--danger); }

.mlzw-input,
.mlzw-textarea,
.mlzw-select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.mlzw-input--small, .mlzw-select--small { padding: 0.35rem 0.6rem; }
.mlzw-input--large, .mlzw-select--large { padding: 0.7rem 0.9rem; }
.mlzw-input:focus,
.mlzw-textarea:focus,
.mlzw-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.mlzw-input:disabled,
.mlzw-textarea:disabled,
.mlzw-select:disabled { opacity: 0.5; cursor: default; }
.mlzw-input[aria-invalid="true"],
.mlzw-textarea[aria-invalid="true"],
.mlzw-input.is-invalid,
.mlzw-textarea.is-invalid { border-color: var(--system-red); }
.mlzw-input[aria-invalid="true"]:focus,
.mlzw-textarea[aria-invalid="true"]:focus,
.mlzw-input.is-invalid:focus,
.mlzw-textarea.is-invalid:focus { box-shadow: 0 0 0 3px var(--status-danger-bg); }

.mlzw-textarea { resize: vertical; line-height: var(--leading-normal); }

/* Select: native control + a CSS chevron (no wrapper needed). */
.mlzw-select {
  padding-right: 2.2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}
[data-theme="dark"] .mlzw-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Leading/trailing adornments: wrap the input in .mlzw-input-group. */
.mlzw-input-group { position: relative; display: flex; align-items: center; width: 100%; }
.mlzw-input-group__lead,
.mlzw-input-group__trail {
  position: absolute;
  display: inline-flex;
  color: var(--text-secondary);
}
.mlzw-input-group__lead { left: 0.7rem; pointer-events: none; }
.mlzw-input-group__trail { right: 0.6rem; }
.mlzw-input-group .mlzw-input { padding-left: 2.3rem; }

/* ══ Checkbox / Radio ══════════════════════════════════════════════════════
   Mirrors components/forms/{Checkbox,Radio}.jsx — native input, appearance
   none, drawn states. Wrap with .mlzw-choice for a clickable label row. */
.mlzw-checkbox,
.mlzw-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.mlzw-checkbox { border-radius: var(--radius-xs); }
.mlzw-radio { border-radius: var(--radius-circle); }
.mlzw-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.mlzw-radio:checked {
  border-color: var(--accent);
  background-image: radial-gradient(circle, var(--accent) 0 0.3rem, transparent 0.32rem);
}
.mlzw-checkbox:disabled,
.mlzw-radio:disabled { opacity: 0.5; cursor: default; }
.mlzw-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: var(--text-callout);
  color: var(--text-primary);
}

/* ══ Switch ════════════════════════════════════════════════════════════════
   Mirrors components/forms/Switch.jsx — an input[type=checkbox] as track+knob.
   Green when on (Apple), or accent with --accent. */
.mlzw-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.75rem;
  height: 1.6rem;
  flex-shrink: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--status-muted-bg);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}
.mlzw-switch::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left var(--duration-base) var(--ease-emphasised);
}
.mlzw-switch:checked { background: var(--system-green); }
.mlzw-switch--accent:checked { background: var(--accent); }
.mlzw-switch:checked::before { left: 1.3rem; }
.mlzw-switch:disabled { opacity: 0.5; cursor: default; }

/* ══ SegmentedControl ══════════════════════════════════════════════════════
   Mirrors components/forms/SegmentedControl.jsx. Mark the on segment with
   aria-selected="true" (or .is-selected). */
.mlzw-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 0.15rem;
  padding: 0.15rem;
  background: var(--status-muted-bg);
  border-radius: var(--radius-sm);
}
.mlzw-segmented--full { display: grid; grid-auto-columns: 1fr; }
.mlzw-segmented__item {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.85rem;
  border-radius: calc(var(--radius-sm) - 0.15rem);
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: transparent;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.mlzw-segmented--small .mlzw-segmented__item { padding: 0.25rem 0.85rem; font-size: var(--text-footnote); }
.mlzw-segmented__item[aria-selected="true"],
.mlzw-segmented__item.is-selected {
  font-weight: var(--weight-semibold);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

/* ══ Tabs ══════════════════════════════════════════════════════════════════
   Mirrors components/navigation/Tabs.jsx. Active tab: aria-selected="true". */
.mlzw-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}
.mlzw-tab {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.mlzw-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-emphasised);
}
.mlzw-tab[aria-selected="true"],
.mlzw-tab.is-active { font-weight: var(--weight-semibold); color: var(--text-primary); }
.mlzw-tab[aria-selected="true"]::after,
.mlzw-tab.is-active::after { transform: scaleX(1); }
.mlzw-tab__count {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--status-muted-bg);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.4rem;
}
.mlzw-tab[aria-selected="true"] .mlzw-tab__count,
.mlzw-tab.is-active .mlzw-tab__count { color: var(--accent); background: var(--status-info-bg); }

/* ══ Table ═════════════════════════════════════════════════════════════════
   Mirrors components/data/Table.jsx. Wrap in .mlzw-table-wrap for x-scroll.
   Use .num (right, tabular) and .mono (IDs/codes) on cells. */
.mlzw-table-wrap { width: 100%; overflow-x: auto; }
.mlzw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-callout);
}
.mlzw-table th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
}
.mlzw-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-primary);
}
.mlzw-table tbody tr:last-child td { border-bottom: none; }
.mlzw-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mlzw-table .mono {
  font-family: var(--font-mono);
  font-size: var(--text-footnote);
  color: var(--text-secondary);
}
.mlzw-table--interactive tbody tr { cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.mlzw-table--interactive tbody tr:hover { background: var(--bg-hover); }

/* Row actions — a single-line action cluster for a table's Actions column.
   flex-wrap: nowrap is the point: a crowded actions column scrolls with the
   table (mlzw-table-wrap) instead of stacking its buttons and inflating row
   height. For dense tables (invoices), use icon buttons (mlzw-icon-btn--small)
   with an aria-label rather than text buttons so the column stays narrow in
   every locale. The host cell should not wrap. */
.mlzw-row-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; white-space: nowrap; }
.mlzw-table td.mlzw-cell-actions { white-space: nowrap; }

/* ══ App chrome (layout shell) ═════════════════════════════════════════════
   Mirrors ui_kits/zandbak/shell.jsx. The server layout (Go template) emits the
   header + sidebar; these classes carry the translucent material, rails and
   the selected/hover nav states. */
.mlzw-appbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--bg-chrome);
  -webkit-backdrop-filter: var(--blur-material);
  backdrop-filter: var(--blur-material);
  border-bottom: 1px solid var(--border-hairline);
}
.mlzw-appbar__brand { display: flex; align-items: center; gap: 0.6rem; }
.mlzw-appbar__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-headline);
  letter-spacing: -0.01em;
}
.mlzw-appbar__spacer { flex: 1; }

.mlzw-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.mlzw-sidebar {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-hairline);
}
.mlzw-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.mlzw-navitem {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mlzw-navitem:hover { background: var(--bg-hover); }
.mlzw-navitem[aria-current="page"],
.mlzw-navitem.is-active {
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--bg-active);
}
.mlzw-main {
  min-width: 0;
  padding: var(--space-8) var(--space-10);
  max-width: calc(var(--content-max) + 5rem);
}

/* ══ Page header ═══════════════════════════════════════════════════════════
   Mirrors ui_kits/zandbak/shell.jsx PageHeader. */
.mlzw-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.mlzw-pagehead__title {
  margin: 0;
  font-size: var(--text-title-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}
.mlzw-pagehead__subtitle {
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
  font-size: var(--text-callout);
}
.mlzw-pagehead__actions { display: flex; gap: var(--space-2); align-items: center; }

/* ══ Spinner (htmx indicator) ══════════════════════════════════════════════ */
.mlzw-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mlzw-spin 0.7s linear infinite;
}

/* Layout helpers commonly needed in server templates. */
.mlzw-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mlzw-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mlzw-grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}