/**
 * @kodo/ui — design tokens
 *
 * Three layers:
 *   1. Primitives  — raw ramps (neutrals + brand palette --p-*). Never used directly by components.
 *   2. Semantic    — --bg, --text, --primary… Components ONLY consume these.
 *   3. Overrides   — [data-theme="dark"] flips semantics; [data-palette] swaps the brand ramp;
 *                    per-store branding (stores.branding jsonb) injects --p-* inline on storefronts.
 *
 * Personality: warm & friendly. Warm (stone) neutrals, rounded corners, soft shadows.
 * Type stack covers Latin + Sinhala + Tamil (Noto family) — product names are not English-only.
 */

:root {
  /* ---------- primitives: warm neutrals (stone) ---------- */
  --n-0: #ffffff;
  --n-50: #fafaf9;
  --n-100: #f5f5f4;
  --n-200: #e7e5e4;
  --n-300: #d6d3d1;
  --n-400: #a8a29e;
  --n-500: #78716c;
  --n-600: #57534e;
  --n-700: #44403c;
  --n-800: #292524;
  --n-850: #211e1c;
  --n-900: #1c1917;
  --n-950: #141110;

  /* ---------- primitives: brand ramp — Mango ---------- */
  --p-50: #fff8eb;
  --p-100: #ffeec7;
  --p-200: #ffd98a;
  --p-300: #ffbf4d;
  --p-400: #fda524;
  --p-500: #f78b0b;
  --p-600: #db6906;
  --p-700: #b54909;
  --p-800: #93380f;
  --p-900: #792f10;

  /* ---------- primitives: fixed status hues (palette-independent) ---------- */
  --green-bg: #d9f2e3;   --green-text: #155438;  --green-solid: #1b8553;
  --amber-bg: #fef3c7;   --amber-text: #92400e;  --amber-solid: #d97706;
  --red-bg: #fee2e2;     --red-text: #991b1b;    --red-solid: #dc2626;
  --blue-bg: #dbeafe;    --blue-text: #1e40af;   --blue-solid: #2563eb;

  /* ---------- semantic: surfaces ---------- */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-hover: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --overlay: rgb(28 25 23 / 0.45);

  /* ---------- semantic: text ---------- */
  --text: var(--n-800);
  --text-muted: var(--n-600);
  --text-faint: var(--n-400);
  --text-invert: var(--n-0);

  /* ---------- semantic: brand ---------- */
  --primary: var(--p-600);
  --primary-hover: var(--p-700);
  --primary-active: var(--p-800);
  --primary-soft: var(--p-100);
  --primary-soft-text: var(--p-800);
  --on-primary: #ffffff;
  --focus-ring: var(--p-400);
  --link: var(--p-700);

  /* ---------- semantic: status ---------- */
  --success-bg: var(--green-bg);   --success-text: var(--green-text);   --success: var(--green-solid);
  --warning-bg: var(--amber-bg);   --warning-text: var(--amber-text);   --warning: var(--amber-solid);
  --danger-bg: var(--red-bg);      --danger-text: var(--red-text);      --danger: var(--red-solid);
  --info-bg: var(--blue-bg);       --info-text: var(--blue-text);       --info: var(--blue-solid);

  /* ---------- type ---------- */
  --font-sans: "Noto Sans", "Noto Sans Sinhala", "Noto Sans Tamil",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 — meta, table captions */
  --text-sm: 0.8125rem;  /* 13 — secondary UI */
  --text-md: 0.875rem;   /* 14 — body / default UI */
  --text-lg: 1rem;       /* 16 — emphasized body */
  --text-xl: 1.1875rem;  /* 19 — card titles */
  --text-2xl: 1.5rem;    /* 24 — page titles */
  --text-3xl: 1.9375rem; /* 31 — hero numbers */

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---------- space (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- radius (friendly-rounded) ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- elevation ---------- */
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.06);
  --shadow-md: 0 2px 8px rgb(28 25 23 / 0.08), 0 1px 2px rgb(28 25 23 / 0.04);
  --shadow-lg: 0 8px 24px rgb(28 25 23 / 0.12), 0 2px 6px rgb(28 25 23 / 0.06);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;

  color-scheme: light;
}

/* ============================================================
   Dark theme — flips semantic layer only.
   Default stays light; opt in with <html data-theme="dark">.
   ============================================================ */
[data-theme="dark"] {
  --bg: var(--n-950);
  --surface: var(--n-850);
  --surface-sunken: var(--n-900);
  --surface-hover: var(--n-800);
  --border: #3a3531;
  --border-strong: #4d4742;
  --overlay: rgb(0 0 0 / 0.6);

  --text: #f0eeec;
  --text-muted: var(--n-400);
  --text-faint: var(--n-600);
  --text-invert: var(--n-900);

  --primary: var(--p-500);
  --primary-hover: var(--p-400);
  --primary-active: var(--p-300);
  --primary-soft: color-mix(in srgb, var(--p-500) 18%, transparent);
  --primary-soft-text: var(--p-300);
  --focus-ring: var(--p-400);
  --link: var(--p-400);

  --success-bg: color-mix(in srgb, var(--green-solid) 18%, transparent);
  --success-text: #6ee7a8;
  --warning-bg: color-mix(in srgb, var(--amber-solid) 18%, transparent);
  --warning-text: #fbbf24;
  --danger-bg: color-mix(in srgb, var(--red-solid) 18%, transparent);
  --danger-text: #f87171;
  --info-bg: color-mix(in srgb, var(--blue-solid) 18%, transparent);
  --info-text: #93c5fd;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* ============================================================
   Per-store branding: inject --p-50…900 inline on <html> to
   re-skin a storefront. The semantic layer re-derives automatically.
   See DESIGN.md §per-store-branding.
   ============================================================ */

/* ============================================================
   Base reset (minimal, opinionated)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration-normal) var(--ease);
}

h1, h2, h3, h4, p {
  margin: 0;
}

a {
  color: var(--link);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

/**
 * @kodo/ui — component classes
 *
 * Plain CSS on top of tokens.css. Works identically in the React dashboard
 * and the SSR storefront (template strings) — no build step required.
 * Prefix: .k-
 */

/* ============================================================ buttons */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 0 var(--space-4);
  height: 2.5rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}
.k-btn:disabled,
.k-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.k-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}
.k-btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.k-btn--primary:active:not(:disabled) { background: var(--primary-active); }

.k-btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.k-btn--secondary:hover:not(:disabled) { background: var(--surface-hover); }

.k-btn--soft {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}
.k-btn--soft:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-soft) 80%, var(--primary));
}

.k-btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.k-btn--ghost:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.k-btn--danger {
  background: var(--danger);
  color: #fff;
}
.k-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 85%, black);
}

.k-btn--sm { height: 2rem; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.k-btn--lg { height: 3rem; padding: 0 var(--space-6); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.k-btn--block { width: 100%; }

/* ============================================================ form controls */
.k-input,
.k-select,
.k-textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  padding: 0 var(--space-3);
  height: 2.5rem;
  transition: border-color var(--duration-fast) var(--ease);
}
.k-textarea {
  height: auto;
  min-height: 5.5rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}
.k-input::placeholder,
.k-textarea::placeholder { color: var(--text-faint); }
.k-input:focus-visible,
.k-select:focus-visible,
.k-textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--primary);
}
.k-input[aria-invalid="true"],
.k-select[aria-invalid="true"],
.k-textarea[aria-invalid="true"] { border-color: var(--danger); }
.k-input:disabled,
.k-select:disabled,
.k-textarea:disabled {
  background: var(--surface-sunken);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* input with prefix (e.g. slug field: "kodo.lk/") */
.k-input-group {
  display: flex;
  align-items: stretch;
}
.k-input-group__affix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.k-input-group .k-input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.k-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
  cursor: pointer;
}

/* switch */
.k-switch {
  appearance: none;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
  flex-shrink: 0;
}
.k-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: translate var(--duration-fast) var(--ease);
}
.k-switch:checked { background: var(--primary); }
.k-switch:checked::after { translate: 1rem 0; }

/* field wrapper */
.k-field { display: flex; flex-direction: column; gap: var(--space-2); }
.k-field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.k-field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.k-field__error { font-size: var(--text-sm); color: var(--danger-text); }

/* ============================================================ card */
.k-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.k-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.k-card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.k-card__body { padding: var(--space-5); }
.k-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================ badge
   Tones map to kodo domain statuses (see STATUS_TONES in @kodo/ui):
   neutral  draft / archived / unpaid
   info     pending_confirmation / slip_submitted / packed / dispatched
   success  confirmed / delivered / verified / connected / active
   warning  cod_collected-pending-ish / degraded states
   danger   cancelled / returned / failed / error / suspended
*/
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  padding: 0.1875rem var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}
.k-badge--neutral { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); }
.k-badge--info    { background: var(--info-bg);    color: var(--info-text); }
.k-badge--success { background: var(--success-bg); color: var(--success-text); }
.k-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.k-badge--danger  { background: var(--danger-bg);  color: var(--danger-text); }
.k-badge--brand   { background: var(--primary-soft); color: var(--primary-soft-text); }

/* ============================================================ table */
.k-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.k-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
.k-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr:hover { background: var(--surface-hover); }
.k-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================ tabs */
.k-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.k-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
}
.k-tab:hover { color: var(--text); }
.k-tab[aria-selected="true"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ============================================================ modal (native <dialog>) */
.k-modal {
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(28rem, calc(100vw - 2rem));
}
.k-modal::backdrop { background: var(--overlay); }
.k-modal__header { padding: var(--space-5) var(--space-5) 0; }
.k-modal__title { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.k-modal__body { padding: var(--space-4) var(--space-5); color: var(--text-muted); }
.k-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}

/* ============================================================ spinner */
.k-spinner {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: k-spin 0.7s linear infinite;
  vertical-align: -0.2em;
}
.k-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes k-spin { to { rotate: 360deg; } }

/* ============================================================ empty state */
.k-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}
.k-empty__icon { font-size: 2rem; line-height: 1; }
.k-empty__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text); }

/* ============================================================ toast */
.k-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--n-800);
  color: #f0eeec;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-md);
}
[data-theme="dark"] .k-toast { background: var(--n-100); color: var(--n-800); }
.k-toast--success { border-left: 3px solid var(--success); }
.k-toast--danger { border-left: 3px solid var(--danger); }

/* ============================================================ app shell + nav (dashboard) */
.k-shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-height: 100vh;
}
.k-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Brand block */
.k-sidebar__brand {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-5);
  gap: var(--space-1);
  position: relative;
}
.k-sidebar__logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.k-sidebar__store-name {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--weight-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile-only close button — hidden on desktop */
.k-sidebar__close { display: none; }

/* Nav */
.k-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.k-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
  font-size: var(--text-md);
}
.k-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.k-nav-item[aria-current="page"],
.k-nav-item--active {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}

/* User block at sidebar bottom */
.k-sidebar__user {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.k-sidebar__user-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.k-sidebar__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.k-sidebar__user-text { display: flex; flex-direction: column; min-width: 0; }
.k-sidebar__user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-sidebar__user-email {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-sidebar__user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* User block doubles as the Account link */
a.k-sidebar__user-info { text-decoration: none; color: inherit; border-radius: var(--radius-md); padding: 4px; margin: -4px; transition: background 0.12s ease; }
a.k-sidebar__user-info:hover { background: var(--surface-hover); }

/* ── Account page ────────────────────────────────────────────── */
.k-account { display: flex; flex-direction: column; gap: var(--space-4); }
.k-account__avatar {
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  overflow: hidden; flex-shrink: 0;
}
.k-account__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Team (settings) ─────────────────────────────────────────── */
.k-team__list { display: flex; flex-direction: column; gap: var(--space-2); }
.k-team__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.k-team__row--pending { background: var(--surface-sunken); }
.k-team__avatar {
  width: 36px; height: 36px; border-radius: 9999px;
  background: var(--primary-soft); color: var(--primary-soft-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  overflow: hidden; flex-shrink: 0;
}
.k-team__avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-team__avatar--pending { background: var(--surface-hover); color: var(--text-muted); }
.k-team__who { flex: 1; min-width: 0; }
.k-team__name { font-size: var(--text-sm); font-weight: var(--weight-medium); display: flex; align-items: center; gap: var(--space-2); }
.k-team__email { font-size: var(--text-xs); color: var(--text-muted); }
.k-team__you { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--primary); background: var(--primary-soft); padding: 1px 7px; border-radius: 999px; }
.k-team__role { font-size: var(--text-xs); color: var(--text-muted); text-transform: capitalize; }
.k-team__invite { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.k-sidebar__signout {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
}
.k-sidebar__signout:hover { color: var(--danger); background: var(--surface-hover); }

/* Main content — fills the column; form-heavy pages (Settings) self-constrain. */
.k-main { padding: var(--space-8); }

/* Mobile header bar — hidden on desktop */
.k-mobile-header { display: none; }

/* Backdrop — hidden by default */
.k-shell__backdrop { display: none; }

/* Grid utilities */
.k-grid { display: grid; gap: var(--space-4); }
.k-grid--2 { grid-template-columns: repeat(2, 1fr); }
.k-grid--3 { grid-template-columns: repeat(3, 1fr); }

.k-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.k-page-header__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.k-page-header__sub { color: var(--text-muted); margin-top: var(--space-1); }

@media (max-width: 768px) {
  /* Sidebar hidden on mobile by default; overlay on menu-open */
  .k-shell { grid-template-columns: 1fr; }
  .k-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16rem;
    height: 100dvh;
    z-index: 100;
    box-shadow: var(--shadow-lg);
  }
  .k-shell--menu-open .k-sidebar { display: flex; }

  /* Show close button inside sidebar on mobile */
  .k-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    line-height: 1;
  }
  .k-sidebar__close:hover { color: var(--text); background: var(--surface-hover); }

  /* Backdrop when menu is open */
  .k-shell--menu-open .k-shell__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
  }

  /* Mobile top bar */
  .k-mobile-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .k-mobile-header__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    padding: 0;
  }
  .k-mobile-header__logo {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--primary);
    letter-spacing: -0.02em;
  }

  .k-main { padding: var(--space-4); }
  .k-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================ utilities (tiny, deliberate) */
.k-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.k-row { display: flex; align-items: center; gap: var(--space-3); }
.k-row--between { justify-content: space-between; }
.k-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 640px) { .k-grid-2 { grid-template-columns: 1fr; } }
.k-muted { color: var(--text-muted); }
.k-faint { color: var(--text-faint); font-size: var(--text-sm); }

/* ============================================================ onboarding booklet layout */
/* Layout-critical rules live here (not inline) so media queries can override them. */
.k-onboarding {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 100vh;
}
.k-onboarding__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .k-onboarding {
    grid-template-columns: 1fr;
  }
  .k-onboarding__panel {
    position: static;
    height: auto;
    padding: var(--space-4) var(--space-5);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }
  /* Hide illustration on mobile — just keep logo + dots in the top banner */
  .k-onboarding__illustration { display: none; }
}

/* ============================================================ settings page */
.k-settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
  max-width: 860px;
}

/* ── Nav ─────────────────────────────────────────────────────── */
.k-settings__nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  position: sticky;
  top: var(--space-6);
}

.k-settings__nav-heading {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.k-settings__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.k-settings__nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.k-settings__nav-item--active {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}

.k-settings__nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}

/* ── Content ─────────────────────────────────────────────────── */
.k-settings__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Section card ────────────────────────────────────────────── */
.k-settings__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.k-settings__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.k-settings__section-title-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.k-settings__section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.k-settings__section-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Read fields ─────────────────────────────────────────────── */
.k-read-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.k-read-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.k-read-field__label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.k-read-field__value {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.5;
}
.k-read-field__value--empty {
  color: var(--text-faint);
  font-style: italic;
}

/* ── Payment method chips (read view) ────────────────────────── */
.k-payment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.k-payment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
}
.k-payment-chip--enabled {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}
.k-payment-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.k-payment-chip--enabled .k-payment-chip__dot {
  opacity: 1;
}

/* ── Form section (edit mode) ────────────────────────────────── */
.k-settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.k-settings__form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.k-settings__form-error {
  font-size: var(--text-sm);
  color: var(--danger);
  flex: 1;
}

/* ── Rework: grouped nav + registry fields + sticky save ─────── */
.k-settings__nav-group { display: flex; flex-direction: column; gap: 2px; }
.k-settings__nav-group + .k-settings__nav-group { margin-top: var(--space-3); }
.k-settings__nav-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.k-settings__nav-item--active .k-settings__nav-icon { color: var(--primary); }

.k-settings__section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  display: flex; align-items: center; gap: var(--space-2);
}
.k-settings__section-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* form grid: half → one cell, everything else spans the row */
.k-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.k-form-grid .full { grid-column: 1 / -1; }
.k-form-cell { min-width: 0; }

/* switch row */
.k-switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.k-switch-row__label { font-size: var(--text-sm); color: var(--text); font-weight: var(--weight-medium); }

/* option cards (radio / multiselect toggle) */
.k-optset { display: flex; flex-direction: column; gap: var(--space-2); }
.k-opt {
  display: flex; align-items: flex-start; gap: var(--space-3);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.k-opt:hover { border-color: var(--text-faint); }
.k-opt--active { border-color: var(--primary); background: var(--primary-soft); }
.k-opt__mark {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.k-opt__mark--radio { border-radius: 50%; }
.k-opt__mark--check { border-radius: 5px; }
.k-opt--active .k-opt__mark { border-color: var(--primary); background: var(--primary); }
.k-opt__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.k-opt__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.k-opt--active .k-opt__label { color: var(--primary-soft-text); }
.k-opt__sub { font-size: var(--text-xs); color: var(--text-muted); }
.k-opt__badge {
  font-size: var(--text-xs); white-space: nowrap; align-self: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-hover); color: var(--text-muted);
}
.k-opt--active .k-opt__badge { background: rgba(190,80,10,0.15); color: var(--primary); }

/* sub-panel (bank details) + info note */
.k-subpanel {
  padding: var(--space-4); background: var(--surface-hover);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3);
}
.k-subpanel__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.k-note {
  padding: var(--space-3) var(--space-4); background: var(--surface-hover);
  border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6;
}

/* always-bottom floating "island" save bar */
.k-savebar {
  position: fixed;
  left: 15rem; right: 0; bottom: var(--space-5);
  z-index: 20;
  display: flex; justify-content: center;
  padding: 0 var(--space-4);
  pointer-events: none;            /* gutter lets clicks through; island re-enables below */
}
.k-savebar__inner {
  pointer-events: auto;
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 30px -6px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.08);
}
.k-savebar__msg { font-size: var(--text-sm); color: var(--text-muted); }
.k-savebar__error { color: var(--danger); }
.k-savebar__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.k-savebar-spacer { height: 76px; }

/* nav: right-side group (count badge + unsaved dot) */
.k-settings__nav-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.k-settings__nav-right .k-settings__nav-badge { margin-left: 0; }
.k-settings__nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* inline text button (e.g. reset to template) */
.k-link-btn {
  align-self: flex-start;
  background: none; border: none; padding: 0; margin-top: var(--space-1);
  color: var(--primary); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer;
}
.k-link-btn:hover { text-decoration: underline; }

/* Orders bulk select + print */
.k-bulkbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3);
  background: var(--primary-soft); border: 1px solid var(--primary); border-radius: var(--radius-md);
}
.k-bulkbar__count { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--primary-soft-text); }
.k-bulkbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.k-orders-table__check { width: 36px; text-align: center; }

/* KYC / verification */
.k-verif {
  margin-left: var(--space-2);
  font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.k-verif--unverified { background: var(--surface-hover); color: var(--text-muted); }
.k-verif--pending { background: #fef3c7; color: #92400e; }
.k-verif--verified { background: #dcfce7; color: #166534; }
.k-kyc-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }

/* Logo upload (Documents & branding) */
.k-logo-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.k-logo-preview {
  width: 96px; height: 96px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-hover); display: flex; align-items: center; justify-content: center;
}
.k-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.k-logo-preview__empty { font-size: var(--text-xs); color: var(--text-faint); }
.k-logo-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.k-logo-hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0; max-width: 22rem; }

/* Assistant page */
.k-assist { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-4); }
.k-soon-badge {
  font-size: 10px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px; background: var(--surface-hover); color: var(--text-muted);
  vertical-align: middle;
}
.k-mirror { display: flex; flex-direction: column; }
.k-mirror__row {
  display: grid; grid-template-columns: 120px 1fr auto; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0;
}
.k-mirror__row + .k-mirror__row { border-top: 1px solid var(--border); }
.k-mirror__label {
  font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.k-mirror__value { font-size: var(--text-sm); color: var(--text); min-width: 0; }
.k-mirror__link { font-size: var(--text-xs); color: var(--primary); text-decoration: none; font-weight: var(--weight-medium); }
.k-mirror__link:hover { text-decoration: underline; }

/* ============================================================ drawer */
/*
 * Right-side slide-in panel. Uses <dialog> for native focus trap + backdrop.
 * Widths: default = 480px, --wide = 680px.
 *
 * Usage:
 *   <dialog class="k-drawer" ref={...}>
 *     <div class="k-drawer__header">…</div>
 *     <div class="k-drawer__body">…</div>
 *     <div class="k-drawer__footer">…</div>
 *   </dialog>
 */
.k-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  padding: 0;
  width: min(480px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  /* Override the UA dialog:modal default (max-height: calc(100% - 2em - 6px)),
     which otherwise caps the panel ~38px short and leaves a gap at the bottom. */
  max-height: 100dvh;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0,0,0,.10);
  /* entry animation */
  translate: 100% 0;
  transition: translate 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete;
}
.k-drawer[open] {
  translate: 0 0;
}
@starting-style { .k-drawer[open] { translate: 100% 0; } }

.k-drawer--wide { width: min(680px, 100vw); }

.k-drawer::backdrop {
  background: var(--overlay);
  opacity: 0;
  transition: opacity 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete;
}
.k-drawer[open]::backdrop { opacity: 1; }
@starting-style { .k-drawer[open]::backdrop { opacity: 0; } }

.k-drawer__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.k-drawer__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  flex: 1;
  min-width: 0;
}
.k-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.k-drawer__close:hover { background: var(--surface-hover); color: var(--text); }

.k-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.k-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.k-drawer__footer-error {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--danger);
  text-align: center;
}

/* ============================================================ product catalog */
.k-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.k-product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.k-product-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.k-product-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 2.5rem;
}
.k-product-card__body { padding: var(--space-3); }
.k-product-card__title {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.k-product-card__price { font-weight: var(--weight-semibold); color: var(--text); }
.k-product-card__stock { margin-top: var(--space-2); }
.k-product-card__instock { font-size: var(--text-xs); color: var(--text-muted); }

/* image upload zone */
.k-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.k-upload-zone:hover, .k-upload-zone.is-dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.k-upload-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.k-upload-thumb {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.k-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.k-upload-thumb__remove {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast);
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  border: 0;
}
.k-upload-thumb:hover .k-upload-thumb__remove { opacity: 1; }

/* variant rows inside the drawer */
.k-variant-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.k-variant-table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.k-variant-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}
.k-variant-table tr:last-child td { border-bottom: 0; }

/* stock badge */
.k-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
  border-radius: 999px;
}
.k-stock-badge--in   { background: var(--success-bg); color: var(--success-text); }
.k-stock-badge--low  { background: var(--warning-bg); color: var(--warning-text); }
.k-stock-badge--out  { background: var(--danger-bg);  color: var(--danger-text); }
.k-stock-badge--none { background: var(--surface-sunken); color: var(--text-faint); }

/* movement-history timeline (inventory drawer) */
.k-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.k-timeline__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.k-timeline__row:last-child { border-bottom: none; }
.k-timeline__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-top: 6px;
}
.k-timeline__main { min-width: 0; }
.k-timeline__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.k-timeline__label { font-weight: var(--weight-medium); }
.k-timeline__change { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-timeline__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.k-timeline__running { white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-timeline__when { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; }

/* inventory product grouping (expandable rows) */
.k-inv-group { cursor: pointer; }
.k-inv-group:hover { background: var(--surface-hover); }
.k-inv-chevron {
  display: inline-block;
  width: 1em;
  margin-right: var(--space-2);
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.k-inv-chevron--open { transform: rotate(90deg); }
.k-inv-variant > td:first-child { padding-left: var(--space-8); }
.k-inv-variant__name { color: var(--text-muted); }

/* FAB (floating action button) */
.k-fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  z-index: 50;
}
.k-fab:hover { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(0,0,0,.22); }

/* ============================================================ product drawer — new UX sections */

/* Body variant: sections separated by borders instead of gap */
.k-drawer__body--sections {
  gap: 0;
  padding: 0;
}

/* Section divider */
.k-form-section {
  padding: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.k-form-section--first { border-top: none; }
.k-form-section--last  { padding-bottom: var(--space-6); }

.k-form-section__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}
.k-form-section__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: calc(-1 * var(--space-2)) 0 0;
}
.k-form-section__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── Status pill selector ────────────────────────────────────── */
.k-status-pills {
  display: flex;
  gap: var(--space-2);
}
.k-status-pill {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.k-status-pill[aria-selected="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}
.k-status-pill:hover:not([aria-selected="true"]) {
  background: var(--surface-hover);
  color: var(--text);
}

/* ── Inventory toggle ────────────────────────────────────────── */
.k-inventory-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.k-inventory-toggle__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.k-inventory-toggle__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tag chip input ──────────────────────────────────────────── */
.k-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease);
}
.k-tags-input:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--primary);
}
.k-tags-input input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  min-width: 6rem;
  flex: 1;
  padding: 0;
}
.k-tags-input input::placeholder { color: var(--text-faint); }

.k-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
}
.k-tag-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  padding: 0;
  line-height: 1;
  font-size: 0.7em;
  display: flex;
  align-items: center;
}
.k-tag-chip button:hover { color: var(--danger); }

/* ── Option editor ───────────────────────────────────────────── */
.k-options-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.k-option-row {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.k-option-row__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.k-option-row__name {
  flex: 1;
  background: var(--surface);
}
.k-option-row__remove {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.k-option-row__remove:hover { color: var(--danger); background: var(--surface-hover); }

.k-option-row__count {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* value chip area */
.k-value-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease);
}
.k-value-chips:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--primary);
}

.k-value-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  border-radius: var(--radius-full);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.k-value-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  line-height: 1;
  font-size: 0.7em;
  display: flex;
  align-items: center;
}
.k-value-chip button:hover { opacity: 1; }

.k-value-chips__input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  min-width: 8rem;
  flex: 1;
  padding: 0;
}
.k-value-chips__input::placeholder { color: var(--text-faint); }

.k-add-option-btn {
  background: none;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.k-add-option-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Variant table UX improvements ──────────────────────────── */
.k-variant-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.k-variant-table-header__count {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.k-bulk-price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Variant label column (option combination like "Red / M") */
.k-variant-table__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  padding-right: var(--space-3) !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .k-settings {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .k-settings__nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
  }
  .k-settings__nav-heading { display: none; }
  .k-settings__nav-item { width: auto; flex: 0 0 auto; padding: 7px var(--space-3); }
  .k-settings__nav-group { display: contents; }
  .k-read-grid--2 { grid-template-columns: 1fr; }
  .k-form-grid { grid-template-columns: 1fr; }
  .k-mirror__row { grid-template-columns: 1fr auto; }
  .k-savebar { left: 0; }
  .k-savebar__inner { padding: var(--space-3) var(--space-4); }
}

/* ── M3 Orders ──────────────────────────────────────────────────────────────── */

.k-muted { color: var(--text-muted); }

.k-icon-btn {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.k-icon-btn:hover { background: var(--surface-hover); color: var(--text); }

.k-link-sm { font-size: var(--text-sm); color: var(--link); text-decoration: none; }
.k-link-sm:hover { text-decoration: underline; }

/* Orders list table */
/* Orders action strip — work-queue counters above the table */
.k-orderstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.k-orderstat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.k-orderstat:hover { background: var(--surface-hover); }
.k-orderstat[aria-pressed="true"] { border-color: var(--border-strong); background: var(--surface-hover); }
.k-orderstat__label { font-size: var(--text-sm); color: var(--text-muted); }
.k-orderstat__value { font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.k-orderstat__sub { font-size: var(--text-xs); color: var(--text-muted); }
.k-orderstat--attn { background: var(--warning-bg); }
.k-orderstat--attn:hover { background: var(--warning-bg); border-color: var(--warning-text); }
.k-orderstat--attn .k-orderstat__label,
.k-orderstat--attn .k-orderstat__value,
.k-orderstat--attn .k-orderstat__sub { color: var(--warning-text); }
.k-orderstat--zero .k-orderstat__value { color: var(--text-muted); }

/* Home KPI dashboard — one card, segmented like Shopify. Each segment is a
   button that selects the metric plotted in the chart below; the active one
   gets an underline accent. */
.k-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.k-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease);
}
.k-kpi:first-child { border-left: none; }
.k-kpi:hover { background: var(--surface-hover); }
.k-kpi--active { background: var(--surface-sunken); }
.k-kpi--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--primary);
}
.k-kpi__label { font-size: var(--text-sm); color: var(--text-muted); }
.k-kpi--active .k-kpi__label { color: var(--text); }
.k-kpi__value { font-size: 1.375rem; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; line-height: 1.15; }
.k-kpi__foot { margin-top: var(--space-2); }
.k-kpi__delta { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.k-kpi__delta--up { color: var(--success-text); }
.k-kpi__delta--down { color: var(--danger-text); }
.k-kpi__delta--flat { color: var(--text-muted); }

@media (max-width: 720px) {
  .k-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-kpi:nth-child(3) { border-left: none; }
  .k-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Metric chart — selected KPI plotted over time (current vs prior period) */
.k-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); }
.k-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.k-chart__ymax { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.k-chart__legend { display: flex; gap: var(--space-3); }
.k-chart__key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.k-chart__swatch { width: 14px; height: 0; border-top: 2px solid var(--primary); display: inline-block; }
.k-chart__swatch--prev { border-top-style: dashed; border-top-color: var(--text-faint); }
.k-chart__svg { display: block; width: 100%; height: 180px; }
.k-chart__xaxis { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-faint); }

/* Period toggle */
.k-period { display: inline-flex; gap: 2px; background: var(--surface-sunken); padding: 3px; border-radius: var(--radius-md); }
.k-period button {
  border: none; background: transparent; cursor: pointer;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-muted);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.k-period button:hover { color: var(--text); }
.k-period button[aria-pressed="true"] { background: var(--surface); color: var(--text); }

/* Home setup guide — compact, animated onboarding checklist */
.k-setup { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; align-self: start; }
.k-setup__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
}
.k-setup__head:hover { background: var(--surface-hover); }
.k-setup__head-text { flex: 1; min-width: 0; }
.k-setup__title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.k-setup__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.k-setup__progress { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.k-setup__bar { width: 56px; height: 4px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; }
.k-setup__bar-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.45s var(--ease); }
.k-setup__count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-setup__chevron { color: var(--text-faint); transition: transform 0.25s var(--ease); flex-shrink: 0; }
.k-setup__chevron--open { transform: rotate(180deg); }

/* animated collapse: grid-rows 0fr → 1fr smoothly handles the dynamic height */
.k-setup__listwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease); }
.k-setup__listwrap--open { grid-template-rows: 1fr; }
.k-setup__list { overflow: hidden; }
.k-setup__listwrap--open .k-setup__list { border-top: 1px solid var(--border); }

.k-setup__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2half, 10px) var(--space-4); }
.k-setup__item + .k-setup__item { border-top: 1px solid var(--border); }
.k-setup__check {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); color: transparent;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.k-setup__check--done { background: var(--primary); border-color: var(--primary); color: #fff; }
.k-setup__item-text { flex: 1; min-width: 0; }
.k-setup__item-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.k-setup__item-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.k-setup__item--done .k-setup__item-title {
  color: var(--text-faint); font-weight: 400;
  text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong);
}
.k-setup__cta { flex-shrink: 0; }

/* Home two-up row: left = setup guide / ways-to-grow, right = featured content.
   Two equal columns keep the featured card to half width even when it's the
   only item; stacks on narrow screens. */
.k-home-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
@media (max-width: 860px) { .k-home-row { grid-template-columns: minmax(0, 1fr); } }

/* Featured content card — the banner flexes to fill, so the card matches the
   height of its row partner (the setup guide / ways-to-grow panel) instead of
   running taller. The max-height keeps it from ballooning if it's ever alone. */
.k-news { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.k-news__banner { line-height: 0; flex: 1 1 auto; min-height: 120px; max-height: 240px; }
.k-news__banner svg { width: 100%; height: 100%; display: block; }
.k-news__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.k-news__tag { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--primary-soft-text); background: var(--primary-soft); padding: 2px 10px; border-radius: 999px; }
.k-news__title { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.35; margin: 0; }
.k-news__excerpt { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0; }
.k-news__link { font-size: var(--text-sm); color: var(--primary); background: none; border: none; padding: 0; margin-top: var(--space-1); cursor: pointer; }
.k-news__link:hover { text-decoration: underline; }

/* Ways to grow — post-setup panel; mirrors the setup guide's card weight so the
   two-up row stays balanced once the checklist is done. */
.k-grow { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.k-grow__head { padding: var(--space-3) var(--space-4); }
.k-grow__title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.k-grow__sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.k-grow__list { flex: 1 1 auto; border-top: 1px solid var(--border); }
.k-grow__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2half, 10px) var(--space-4);
  background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: background var(--duration-fast) var(--ease);
}
.k-grow__item + .k-grow__item { border-top: 1px solid var(--border); }
.k-grow__item:hover { background: var(--surface-hover); }
.k-grow__item-text { flex: 1; min-width: 0; }
.k-grow__item-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.k-grow__item-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; line-height: 1.45; }
.k-grow__chev { color: var(--text-faint); flex-shrink: 0; }
.k-grow__empty { flex: 1 1 auto; padding: var(--space-5) var(--space-4) var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); border-top: 1px solid var(--border); }
.k-grow__empty-title { font-size: var(--text-md); font-weight: var(--weight-medium); }
.k-grow__empty-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--space-1); }

/* Order detail — customer contact quick-actions */
.k-contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.k-contact-phone { font-size: var(--text-sm); color: var(--text); font-variant-numeric: tabular-nums; margin-right: var(--space-1); }
.k-contact-btn {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease);
}
.k-contact-btn:hover { background: var(--surface-hover); }
.k-contact-btn--wa { border-color: var(--success); color: var(--success-text); background: var(--success-bg); }
.k-contact-btn--wa:hover { background: var(--success-bg); filter: brightness(0.97); }
.k-copy-btn {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.k-copy-btn:hover { background: var(--surface-hover); color: var(--text); }

.k-orders-table-wrap { padding: 0; overflow: hidden; }
.k-orders-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.k-orders-table thead th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.k-orders-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.k-orders-table tbody tr { cursor: pointer; transition: background var(--duration-fast) var(--ease); }
.k-orders-table tbody tr:hover { background: var(--surface-hover); }
.k-orders-table tbody tr:last-child td { border-bottom: none; }
.k-orders-table__num { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* Line-item builder (create drawer) */
.k-line-builder {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

/* Items table (create + detail) */
.k-orders-items { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-2); }
.k-orders-items th {
  text-align: left;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.k-orders-items td { padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.k-orders-items tr:last-child td { border-bottom: none; }

/* Totals box */
.k-order-totals {
  margin-top: var(--space-3);
  margin-left: auto;
  max-width: 18rem;
  font-size: var(--text-sm);
}
.k-order-totals > div { display: flex; justify-content: space-between; padding: var(--space-1) 0; color: var(--text-muted); }
.k-order-totals__grand {
  color: var(--text) !important;
  font-weight: var(--weight-bold);
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
  padding-top: var(--space-2) !important;
}

/* Detail blocks */
.k-order-statusrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.k-order-block { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.k-order-block:first-of-type { border-top: none; padding-top: 0; }
.k-order-block__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.k-order-customer { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.k-order-customer strong { color: var(--text); }

.k-order-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Payments */
.k-payments { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.k-payment-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.k-payment-rec__main { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); flex-wrap: wrap; }
.k-payment-rec__actions { display: flex; align-items: center; gap: var(--space-2); }
.k-payment-capture { display: flex; flex-direction: column; gap: var(--space-2); }

/* Customer pick-or-create (order drawer) */
.k-customer-search { margin-bottom: var(--space-3); }
.k-customer-results {
  margin-top: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.k-customer-result {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.k-customer-result:last-child { border-bottom: none; }
.k-customer-result:hover { background: var(--surface-hover); }
.k-customer-linked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.k-customer-linked .k-link-sm { background: none; border: none; cursor: pointer; padding: 0; }

/* Inventory — "coming soon" banner + row action link button */
.k-coming-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
}
.k-orders-table .k-link-sm { background: none; border: none; cursor: pointer; padding: 0; }