/*
 * nox-ui.css: the "Polished Pro" finish for the site's own Metronic 9 (KTUI) build.
 * Load it right after styles-D8ZooNs_.css on every merchant-panel page (it only uses KTUI tokens,
 * the panel's own ids such as #sidebar / #announcements_drawer, and nx-* classes).
 *
 *   1. Fixes: utilities and colour tokens the shipped build never compiled.
 *   2. Components: nx-* pieces (icon tiles, avatars, tool chips, progress, toasts, chart tips...).
 *   3. Finish: zinc neutrals, 10px corners, Inter + JetBrains Mono, status dots, three 1px line strengths ("Lines", end of 3).
 *   4. Utilities added for the merchant-panel screens (keep this list short; prefer KTUI classes).
 *
 * Plain CSS, no build step. Shared components for the screens live in panel.css.
 */

/* =====================================================================================
   1. Fixes
   ===================================================================================== */
:root {
  --success: var(--color-green-600);
  --warning: var(--color-yellow-600);
  --info: var(--color-violet-600);
  --success-soft: color-mix(in oklab, var(--color-green-500) 12%, transparent);
  --warning-soft: color-mix(in oklab, var(--color-yellow-500) 16%, transparent);
  --info-soft: color-mix(in oklab, var(--color-violet-500) 12%, transparent);
}
.dark {
  --success: var(--color-green-500);
  --warning: var(--color-yellow-500);
  --info: var(--color-violet-500);
}

/* colours used by the dashboard, wallet and customer views */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.bg-warning { background-color: var(--color-yellow-500); }
.bg-success\/10 { background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent); }
.bg-warning\/10 { background-color: color-mix(in oklab, var(--color-yellow-500) 12%, transparent); }
.bg-warning\/15 { background-color: color-mix(in oklab, var(--color-yellow-500) 15%, transparent); }
.bg-info\/10 { background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); }
.border-destructive\/30 { border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
.hover\:bg-destructive\/10:hover { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.hover\:underline:hover { text-decoration: underline; }

/* layout / typography helpers used in the views */
.mt-0\.5 { margin-top: calc(var(--spacing) * .5); }
.mt-auto { margin-top: auto; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.object-cover { object-fit: cover; }
.resize-none { resize: none; }
.min-h-\[100px\] { min-height: 100px; }
.w-\[420px\] { width: 420px; }
.last\:border-0:last-child { border-width: 0; }
.last\:pb-0:last-child { padding-bottom: 0; }

/* Inter is loaded by every layout but the build's --font-sans never names it */
:root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { font-family: var(--font-sans); }

/* =====================================================================================
   2. Components
   ===================================================================================== */
/* ---------- utilities the new layouts use but the compiled build lacks ---------- */
@media (min-width: 64rem) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 48rem) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tabular-nums { font-variant-numeric: tabular-nums; }
.-mx-2 { margin-inline: calc(var(--spacing) * -2); }
.basis-44 { flex-basis: 11rem; }
.basis-52 { flex-basis: 13rem; }
.basis-full { flex-basis: 100%; }
.gap-x-3 { column-gap: .75rem; }
.gap-y-1\.5 { row-gap: .375rem; }
.py-6 { padding-block: 1.5rem; }
.w-\[130px\] { width: 130px; }
.first-letter\:uppercase::first-letter { text-transform: uppercase; }

/* ---------- icon tiles ---------- */
.nx-icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; display: inline-grid; place-items: center;
  border-radius: calc(var(--radius) + 2px); font-size: 1.25rem; border: 1px solid transparent;
}
.nx-icon-sm { width: 2rem; height: 2rem; flex-basis: 2rem; font-size: 1rem; border-radius: var(--radius); }
.nx-icon-lg { width: 3rem; height: 3rem; flex-basis: 3rem; font-size: 1.5rem; }
.nx-tone-primary { color: var(--color-blue-600); background: color-mix(in oklab, var(--color-blue-500) 10%, var(--card)); border-color: color-mix(in oklab, var(--color-blue-500) 18%, transparent); }
.nx-tone-success { color: var(--color-green-700); background: color-mix(in oklab, var(--color-green-500) 10%, var(--card)); border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent); }
.nx-tone-warning { color: var(--color-yellow-700); background: color-mix(in oklab, var(--color-yellow-500) 13%, var(--card)); border-color: color-mix(in oklab, var(--color-yellow-500) 26%, transparent); }
.nx-tone-info { color: var(--color-violet-600); background: color-mix(in oklab, var(--color-violet-500) 10%, var(--card)); border-color: color-mix(in oklab, var(--color-violet-500) 18%, transparent); }
.nx-tone-destructive { color: var(--color-red-600); background: color-mix(in oklab, var(--color-red-600) 9%, var(--card)); border-color: color-mix(in oklab, var(--color-red-600) 18%, transparent); }
.nx-tone-mono { color: var(--secondary-foreground); background: var(--muted); border-color: var(--nx-line-strong); }
.dark .nx-tone-primary { color: var(--color-blue-300); }
.dark .nx-tone-success { color: var(--color-green-500); }
.dark .nx-tone-warning { color: var(--color-yellow-400); }
.dark .nx-tone-info { color: var(--color-violet-200); }
.dark .nx-tone-destructive { color: oklch(72% .17 22); }

/* ---------- avatars (customer initials) ---------- */
.nx-avatar {
  width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; display: inline-grid; place-items: center; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent;
}
/* A customer's photo (Gravatar, kept on this server: design-tasks/440) laid over the initials in the same circle/square. The
   <img class="nx-avatar-photo"> removes itself if it fails to load, so the initials underneath show again. */
.nx-avatar:has(> .nx-avatar-photo) { position: relative; overflow: hidden; }
.nx-avatar > .nx-avatar-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--card);
}

/* ---------- tool chip: the tool's square logo, else its initials in the tool's colour ---------- */
.nx-tool { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--foreground); white-space: nowrap; }
.nx-tool b {
  display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: .375rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .02em;
  color: color-mix(in oklab, var(--tool) 78%, black);
  background: color-mix(in oklab, var(--tool) 14%, var(--card));
  border: 1px solid color-mix(in oklab, var(--tool) 28%, transparent);
  flex: none;   /* stays square when the chip's name is cut with an ellipsis */
  position: relative;   /* holds the logo (below) */
}
.dark .nx-tool b { color: color-mix(in oklab, var(--tool) 62%, white); background: color-mix(in oklab, var(--tool) 18%, var(--card)); }
/* the logo (task 790, nx/tool-badge.blade.php): over the initials, on a white tile in light AND dark (brand logos are drawn for
   white, as the landing's logo tiles), same size; an image that fails to load removes itself and the initials tile is back */
.nx-tool b:has(> .nx-tool-logo), .dark .nx-tool b:has(> .nx-tool-logo) { overflow: hidden; background: #fff; border-color: var(--border); }
.nx-tool b > .nx-tool-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* the small row of badges before a text line of tool names (task 795, nx/tool-mini.blade.php: Orders' folded Tools column) */
.nx-tool-mini { display: inline-flex; align-items: center; gap: .1875rem; flex: none; }
.nx-tool-mini .nx-tool b { width: 1rem; height: 1rem; border-radius: .25rem; font-size: .4375rem; letter-spacing: 0; }
.nx-tool-mini-more { margin-inline-start: .0625rem; font: 500 .625rem/1 var(--nx-mono); color: var(--secondary-foreground); }

/* ---------- progress ---------- */
.nx-progress { height: .5rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.nx-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.nx-progress-sm { height: .3125rem; }

/* ---------- level steps ---------- */
.nx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .375rem; }
.nx-step { display: flex; flex-direction: column; gap: .375rem; align-items: flex-start; font-size: .75rem; color: var(--secondary-foreground); }
.nx-step i { display: block; width: 100%; height: .3125rem; border-radius: 999px; background: var(--muted); }
.nx-step.is-done i { background: color-mix(in oklab, var(--primary) 45%, var(--card)); }
.nx-step.is-current i { background: var(--primary); }
.nx-step.is-current { color: var(--mono); font-weight: 600; }

/* ---------- list rows inside cards ---------- */
.nx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .875rem 1.25rem; border-top: 1px solid var(--border); }
.nx-row:first-child { border-top: 0; }
.nx-row:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); }

/* ---------- toasts ---------- */
.nx-toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200; display: grid; gap: .5rem; width: min(380px, calc(100vw - 2.5rem)); }
.nx-toast {
  display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-radius: calc(var(--radius) + 2px);
  background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--nx-line-strong); font-size: .875rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25);
}
.nx-toast i { font-size: 1.125rem; }
.nx-toast-success i { color: var(--color-green-600); }
.nx-toast-destructive i { color: var(--destructive); }
.nx-toast-primary i { color: var(--primary); }

/* ---------- misc ---------- */
.nx-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.nx-hide-scrollbar { scrollbar-width: none; }
[x-cloak] { display: none !important; }

/* ---------- phones: cards may shrink; tab bars scroll inside their card ---------- */
.kt-card { min-width: 0; }
.nx-tabs { max-width: 100%; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.nx-tabs::-webkit-scrollbar { display: none; }
.nx-tabs > * { flex-shrink: 0; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.text-\[28px\] { font-size: 28px; }
.min-w-\[90px\] { min-width: 90px; }
/* grid children must be allowed to shrink below their content (long one-line notices, tab bars) */
.kt-container-fixed > .grid > *, .nx-notice { min-width: 0; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[160px\] { min-width: 160px; }
.min-w-\[80px\] { min-width: 80px; }
.min-w-\[150px\] { min-width: 150px; }

/* ---------- chart: quick-fact chips + tooltip ---------- */
.nx-chip { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .625rem; font-size: .75rem; color: var(--secondary-foreground); background: var(--muted); border: 1px solid var(--border); border-radius: var(--nx-chip-radius, 999px); white-space: nowrap; }
.nx-chip b { font-weight: 600; color: var(--mono); }
.nx-chip i { font-size: .875rem; color: var(--color-yellow-600); }
.apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { background: var(--popover) !important; color: var(--popover-foreground) !important; border: 1px solid var(--nx-line-strong) !important; border-radius: var(--nx-tip-radius, 8px) !important; box-shadow: 0 10px 24px -12px rgba(16, 24, 40, .35) !important; }
.nx-tip { padding: .625rem .75rem; min-width: 11.5rem; font-size: .75rem; }
.nx-tip-title { font-weight: 600; color: var(--mono); margin-bottom: .375rem; }
.nx-tip-row, .nx-tip-total { display: flex; justify-content: space-between; gap: 1rem; padding: .125rem 0; }
.nx-tip-row span { display: inline-flex; align-items: center; gap: .375rem; color: var(--secondary-foreground); }
.nx-tip-row i { width: .5rem; height: .5rem; border-radius: 2px; display: inline-block; }
.nx-tip-row b, .nx-tip-total b { font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-tip-total { margin-top: .25rem; padding-top: .375rem; border-top: 1px solid var(--border); }
.nx-tip-total span { color: var(--mono); font-weight: 600; }
.nx-tip-sub { margin-top: .25rem; color: var(--secondary-foreground); }
.capitalize { text-transform: capitalize; }
.gap-x-7 { column-gap: 1.75rem; }
.gap-y-1 { row-gap: .25rem; }
.gap-y-3 { row-gap: .75rem; }
.max-w-\[560px\] { max-width: 560px; }
.top-\[12\%\] { top: 12%; }
.min-w-\[140px\] { min-width: 140px; }
.whitespace-nowrap { white-space: nowrap; }

/* ---------- audit additions ---------- */
@media (min-width: 48rem) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) {
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
}
.py-8 { padding-block: 2rem; }
.nx-empty { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 2.5rem 1rem; text-align: center; }
.nx-textarea { width: 100%; min-height: 4.5rem; padding: .5rem .75rem; font-size: .8125rem; line-height: 1.45; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: var(--background); color: var(--foreground); resize: vertical; }
.nx-textarea:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent); }
.kt-btn:disabled, .kt-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- review additions ---------- */
@media (min-width: 40rem) {
  .sm\:flex { display: flex; }
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:gap-x-7 { column-gap: 1.75rem; }
  .sm\:gap-y-3 { row-gap: .75rem; }
}
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-pretty { text-wrap: pretty; }
.nx-tip-row i { border-radius: 999px; }
.self-start { align-self: flex-start; }
.ps-3\.5 { padding-inline-start: .875rem; }

/* =====================================================================================
   3. Finish: Polished Pro
   ===================================================================================== */
:root {
  --background: #fafafa;
  --card: #ffffff;
  --popover: #ffffff;
  --foreground: #18181b;
  --card-foreground: #18181b;
  --mono: #09090b;
  --primary: #1d6ff2;
  --primary-foreground: #ffffff;
  --border: var(--nx-line);         /* line colours (light + dark): "Lines" at the end of section 3 */
  --input: var(--nx-line-input);
  --muted: #f4f4f5;
  --accent: #f4f4f5;
  --secondary-foreground: #52525b;
  --muted-foreground: #71717a;
  --radius: .625rem;
  --nx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nx-shadow: 0 1px 2px rgba(9, 9, 11, .04);
  --nx-shadow-lg: 0 12px 32px -12px rgba(9, 9, 11, .18);
  --nx-ok: #16a34a;
  --nx-bad: #dc2626;
  --nx-tip-radius: 10px;
}
.dark {
  --background: #0b0b0e;
  --card: #121216;
  --popover: #16161b;
  --foreground: #e4e4e7;
  --card-foreground: #e4e4e7;
  --mono: #fafafa;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --muted: #1a1a1f;
  --accent: #1a1a1f;
  --secondary-foreground: #a1a1aa;
  --muted-foreground: #8a8a94;
  --nx-shadow: none;
  --nx-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7);
  --nx-ok: #4ade80;
  --nx-bad: #f87171;
}

/* ---------- base ---------- */
body { font-size: .875rem; }
::selection { background: color-mix(in oklab, var(--primary) 22%, transparent); }

/* ---------- shell ---------- */
#sidebar { background: var(--background) !important; border-inline-end: 1px solid var(--nx-line-strong); }
#sidebar_header { border-bottom: 1px solid var(--nx-line-strong); }
#sidebar .kt-menu-link { border-radius: 8px; transition: background-color .12s, border-color .12s; }
#sidebar .kt-menu-link:hover { background: var(--muted) !important; border-color: transparent !important; }
#sidebar .kt-menu-item.active > .kt-menu-link { background: var(--card) !important; border-color: var(--nx-line-strong) !important; box-shadow: var(--nx-shadow); }
#sidebar .kt-menu-item.active .kt-menu-icon { color: var(--primary) !important; }
#sidebar .kt-menu-item.active .kt-menu-title { color: var(--mono) !important; font-weight: 600; }
#sidebar .kt-badge-warning { background: var(--primary); color: #fff; border-radius: 999px; font-family: var(--nx-mono); }
#sidebar_footer a { border-radius: 8px; }
.kt-header { background: color-mix(in oklab, var(--background) 82%, transparent) !important; backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--nx-line-strong); }

/* ⌘K search button in the header */
.nx-cmdk-btn {
  display: inline-flex; align-items: center; gap: .5rem; width: 18.5rem; height: 2.125rem; padding: 0 .375rem 0 .75rem;
  border: 1px solid var(--nx-line-input); border-radius: 8px; background: var(--card); color: var(--muted-foreground); font-size: .8125rem; cursor: pointer;
  box-shadow: var(--nx-shadow); transition: border-color .12s;
}
.nx-cmdk-btn:hover { border-color: color-mix(in oklab, var(--nx-line-input) 88%, var(--foreground)); color: var(--secondary-foreground); }
.nx-cmdk-btn span { flex: 1; text-align: start; }

/* ---------- cards ---------- */
.kt-card { border-radius: 10px; border-color: var(--nx-line-strong); box-shadow: var(--nx-shadow); }
.kt-card-header { min-height: 3.375rem; padding-inline: 1.125rem; padding-block: .625rem; }
.kt-card-content { padding: 1.125rem; }
.kt-card-content.p-0 { padding: 0; }
.kt-card-title { font-size: .875rem; font-weight: 600; letter-spacing: -.005em; color: var(--mono); }
.kt-card-footer { padding: .75rem 1.125rem; background: color-mix(in oklab, var(--muted) 50%, var(--card)); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.nx-kpi { transition: border-color .15s, box-shadow .15s; }
.nx-kpi:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--nx-line-strong)); box-shadow: var(--nx-shadow-lg); }

/* overview strip */
.nx-strip-cell { display: flex; flex-direction: column; gap: .4rem; padding: .875rem 1.125rem; min-width: 0; border-inline-start: 1px solid var(--border); }
.nx-strip-cell:first-child { border-inline-start: 0; }
@media (max-width: 63.98rem) {
  .nx-strip-cell:nth-child(odd) { border-inline-start: 0; }
  .nx-strip-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}
.nx-label { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }

/* ---------- buttons ---------- */
.kt-btn { border-radius: 8px; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
.kt-btn-primary {
  color: #fff; border: 1px solid color-mix(in oklab, var(--primary) 78%, black);
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 90%, white), var(--primary));
  box-shadow: 0 1px 2px rgba(9, 9, 11, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.kt-btn-primary:hover { background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 88%, black)); }
.kt-btn-outline { background: var(--card); border-color: var(--nx-line-strong); color: var(--foreground); box-shadow: var(--nx-shadow); }
.kt-btn-outline:hover { background: var(--muted); border-color: var(--input); }
.kt-btn-ghost:hover { background: var(--muted); }
.nx-btn-reject:hover { color: var(--nx-bad); border-color: color-mix(in oklab, var(--nx-bad) 35%, var(--nx-line-strong)); background: color-mix(in oklab, var(--nx-bad) 6%, var(--card)); }
.kt-btn:focus-visible, .nx-id:focus-visible, .nx-cmdk-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }

/* ---------- badges with status dots ---------- */
.kt-badge { border-radius: 6px; }
.nx-pill-badge { gap: .375rem; height: 1.5rem; padding-inline: .5rem; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.nx-dot-sm { width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; display: inline-block; }
.kt-badge-outline.kt-badge-success { background: color-mix(in oklab, var(--nx-ok) 10%, var(--card)); border-color: color-mix(in oklab, var(--nx-ok) 26%, transparent); color: #15803d; }
.kt-badge-outline.kt-badge-warning { background: color-mix(in oklab, #f59e0b 12%, var(--card)); border-color: color-mix(in oklab, #f59e0b 32%, transparent); color: #a16207; }
.kt-badge-outline.kt-badge-destructive { background: color-mix(in oklab, var(--nx-bad) 9%, var(--card)); border-color: color-mix(in oklab, var(--nx-bad) 26%, transparent); color: #b91c1c; }
.kt-badge-outline.kt-badge-primary { background: color-mix(in oklab, var(--primary) 9%, var(--card)); border-color: color-mix(in oklab, var(--primary) 26%, transparent); color: #1d4ed8; }
.dark .kt-badge-outline.kt-badge-success { color: #4ade80; }
.dark .kt-badge-outline.kt-badge-warning { color: #fbbf24; }
.dark .kt-badge-outline.kt-badge-destructive { color: #f87171; }
.dark .kt-badge-outline.kt-badge-primary { color: #93c5fd; }
.nx-count { margin-inline-start: .4rem; padding: 0 .375rem; min-width: 1.25rem; height: 1.125rem; display: inline-grid; place-items: center; border-radius: 999px; font-family: var(--nx-mono); font-size: .6875rem; background: var(--muted); color: var(--secondary-foreground); }
.kt-tab-toggle.active .nx-count { background: var(--primary); color: #fff; }

/* deltas, live dot, separators, ids, kbd */
.nx-delta { display: inline-flex; align-items: center; gap: .125rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; font-weight: 600; font-size: .6875rem; }
.nx-delta i { font-size: .6875rem; }
.nx-delta.is-up { color: #15803d; background: color-mix(in oklab, var(--nx-ok) 12%, var(--card)); }
.nx-delta.is-down { color: #b91c1c; background: color-mix(in oklab, var(--nx-bad) 10%, var(--card)); }
.dark .nx-delta.is-up { color: #4ade80; }
.dark .nx-delta.is-down { color: #f87171; }
.nx-live { display: inline-flex; align-items: center; gap: .375rem; color: var(--nx-ok); font-weight: 500; }
.nx-live-dot { position: relative; width: .5rem; height: .5rem; border-radius: 999px; background: var(--nx-ok); flex: 0 0 .5rem; }
.nx-live-dot::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--nx-ok); opacity: .35; animation: nx-pulse 2s ease-out infinite; }
@keyframes nx-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nx-live-dot::after { animation: none; } }
.nx-sep { width: 1px; height: .875rem; background: var(--border); display: inline-block; }
.nx-mono { font-family: var(--nx-mono); font-size: .75rem; letter-spacing: -.01em; }
.nx-id {
  display: inline-flex; align-items: center; gap: .375rem; height: 1.5rem; padding: 0 .4375rem; cursor: pointer;
  font-family: var(--nx-mono); font-size: .75rem; color: var(--mono); background: var(--muted); border: 1px solid var(--border); border-radius: 6px;
}
.nx-id i { font-size: .75rem; color: var(--muted-foreground); }
.nx-id:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.nx-id:hover i { color: var(--primary); }
.nx-kbd {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; margin-inline-start: .25rem;
  font-family: var(--nx-mono); font-size: .6875rem; font-weight: 500; color: var(--secondary-foreground);
  background: var(--card); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
}
.nx-icon-btn { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 6px; color: var(--muted-foreground); background: transparent; border: 0; cursor: pointer; }
.nx-icon-btn:hover { background: var(--muted); color: var(--mono); }
.nx-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.nx-positive { color: var(--nx-ok); }

/* sparklines + customer mix */
.nx-spark { width: 7.5rem; height: 2.75rem; flex: 0 0 7.5rem; }
.nx-mix { display: flex; gap: 2px; height: .5rem; border-radius: 999px; overflow: hidden; }
.nx-mix > span { display: block; height: 100%; }
.nx-dot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }

/* icon tiles */
.nx-icon { border-radius: 8px; }
.nx-tone-violet { color: #6d28d9; background: color-mix(in oklab, #7c3aed 10%, var(--card)); border-color: color-mix(in oklab, #7c3aed 20%, transparent); }
.dark .nx-tone-violet { color: #c4b5fd; }
.nx-avatar { border-radius: 8px; }
.nx-avatar-sm { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; font-size: .6875rem; border-radius: 6px; }
.nx-tool b { border-radius: 5px; }

/* ---------- tabs ---------- */
.nx-seg { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); }
.nx-seg .kt-tab-toggle { border: 0 !important; padding: .25rem .7rem; border-radius: 6px; font-size: .8125rem; font-weight: 500; color: var(--secondary-foreground); }
.nx-seg .kt-tab-toggle:hover { color: var(--mono); }
.nx-seg .kt-tab-toggle.active { background: var(--card); color: var(--mono); box-shadow: 0 1px 2px rgba(9, 9, 11, .1); }
/* the store's currency switcher in this look (themes::_shared.currency with class nx-cur, task 780: the default storefront theme's
   header, the customer area's header and sign-in pages): the .nx-seg control, two toggle buttons "₹ INR" / "$ USD" (aria-pressed).
   The padding is inside each button (.th-cur-face carries the pill), so the whole 36 px height is the tap target. */
.th-cur.nx-cur { margin: 0; display: inline-flex; flex: none; }
.nx-cur .th-cur-in { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); }
.nx-cur .th-cur-opt { position: relative; display: inline-flex; align-items: stretch; min-height: 2.125rem; margin: 0; padding: 2px; border: 0; border-radius: 7px; background: none; color: var(--secondary-foreground); font-size: .8125rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; }
.nx-cur .th-cur-face { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.5rem; padding: 0 .55rem; border-radius: 6px; }
.nx-cur .th-cur-opt:hover { color: var(--mono); }
.nx-cur .th-cur-opt[aria-pressed="true"] { color: var(--mono); cursor: default; }
.nx-cur .th-cur-opt[aria-pressed="true"] .th-cur-face { background: var(--card); box-shadow: 0 1px 2px rgba(9, 9, 11, .1); }
/* dark: --card is darker than the --muted track, so the currency shown would look pressed IN; lift it instead (zinc-800 chip) */
.dark .nx-cur .th-cur-opt[aria-pressed="true"] { color: var(--foreground); }
.dark .nx-cur .th-cur-opt[aria-pressed="true"] .th-cur-face { background: var(--secondary); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent); }
.nx-cur .th-cur-sym { font-weight: 600; }
.nx-cur .th-cur-opt:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 1px; }
.nx-cur[aria-busy="true"] .th-cur-opt { cursor: progress; opacity: .7; }
.nx-underline { border-bottom: 0; gap: 1.125rem; }
.nx-underline .kt-tab-toggle { font-size: .8125rem; font-weight: 500; color: var(--secondary-foreground); border-bottom: 2px solid transparent; padding-block: .95rem; margin-bottom: -1px; }
.nx-underline .kt-tab-toggle:hover { color: var(--mono); }
.nx-underline .kt-tab-toggle.active { color: var(--mono); border-bottom-color: var(--primary); }

/* ---------- tables ---------- */
.nx-table thead th { height: 2.375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 55%, var(--card)); white-space: nowrap; }
.nx-table tbody td { padding-block: .75rem; vertical-align: middle; font-size: .8125rem; }
.nx-table tbody tr { transition: background-color .12s; }
.nx-table tbody tr:hover { background: color-mix(in oklab, var(--muted) 60%, var(--card)); }
/* one line between rows: each row draws the line above it. Rows come from <template x-for> and every tbody ends with a hidden
   empty-state row, so KTUI's "tbody tr:last-child" reset missed the last visible row (its line doubled the pager / tfoot / card
   edge) and ":first-child" resets missed the first row (the <template> is the first child). The thead, filter bar, pager and
   tfoot draw the outer lines once. */
.nx-table tbody tr { border-bottom-width: 0; border-top: 1px solid var(--border); }
.nx-table tbody tr:first-of-type { border-top: 0; }
.nx-table tbody tr:has(> td.nx-empty-cell) { border-top: 0; }   /* an empty / no-match row is the only visible row (some tables have two) */

/* ---------- approvals list ---------- */
.nx-approval { display: flex; flex-direction: column; gap: .625rem; padding: .875rem 1.125rem; border-top: 1px solid var(--border); }
.nx-approval:first-child { border-top: 0; }
.nx-approval:hover { background: color-mix(in oklab, var(--muted) 45%, var(--card)); }
.nx-approval-tools { display: flex; flex-wrap: wrap; gap: .375rem .75rem; padding-inline-start: 3rem; }
.nx-approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-inline-start: 3rem; }

/* ---------- inputs ---------- */
.kt-input { border-radius: 8px; background: var(--card); border-color: var(--nx-line-input); box-shadow: var(--nx-shadow); }
.kt-input:focus { border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); outline: none; }
/* a label.kt-input that wraps its input (search boxes, copy fields): the rule above replaces KTUI's own ring, so give it the same one */
.kt-input:not(input):focus-within { border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.nx-date { width: 9.5rem; font-family: var(--nx-mono); font-size: .75rem; }

/* ---------- notice ---------- */
.nx-notice { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem .625rem .875rem; border-radius: 10px; border: 1px solid color-mix(in oklab, #f59e0b 28%, var(--border)); background: color-mix(in oklab, #f59e0b 5%, var(--card)); }

/* ---------- level steps / progress ---------- */
.nx-progress { height: .375rem; border-radius: 999px; background: var(--muted); }
.nx-progress > span { background: var(--primary); border-radius: 999px; }
.nx-step.is-done i { background: color-mix(in oklab, var(--primary) 40%, var(--card)); }
.nx-step.is-current i { background: var(--primary); }

/* ---------- overlays ---------- */
.kt-modal-content { border-radius: 12px; box-shadow: var(--nx-shadow-lg); }
#announcements_drawer { border-radius: 12px; }

/* ⌘K panel */
.nx-cmdk-panel { padding: 0; overflow: hidden; }
.nx-cmdk-search { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid var(--border); }
.nx-cmdk-search i { color: var(--muted-foreground); font-size: 1.125rem; }
.nx-cmdk-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: .9375rem; }
.nx-cmdk-list { max-height: 20rem; overflow-y: auto; padding: .375rem; }
.nx-cmdk-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; border-radius: 8px; font-size: .875rem; color: var(--foreground); background: transparent; border: 0; cursor: pointer; }
.nx-cmdk-item i { font-size: 1.0625rem; color: var(--muted-foreground); }
.nx-cmdk-item:hover, .nx-cmdk-item.is-first { background: var(--muted); }
.nx-cmdk-item:hover i, .nx-cmdk-item.is-first i { color: var(--primary); }
.nx-cmdk-foot { display: flex; gap: 1rem; padding: .625rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 50%, var(--card)); }

/* chips */
.nx-chip { border-radius: 999px; }
.nx-chip i { color: #ca8a04; }

/* full-width sparklines under the KPI number */
.nx-spark-wide { width: auto; flex: none; height: 2.5rem; margin: 0 -.25rem -.25rem; }

/* ================= deep-audit fixes (contrast, sizes, layout, states) ================= */
:root { --primary: #1a64dc; --nx-ok-text: #15803d; }
.dark { --primary: #2f6fe4; --nx-ok-text: #4ade80; }
.dark .text-primary { color: var(--nx-link, #6ea8fe) !important; }
.nx-live { color: var(--nx-ok-text); }
.nx-positive { color: var(--nx-ok-text); }
.nx-delta.is-up { color: #166534; }
.nx-delta.is-down { color: #991b1b; }
.dark .nx-delta.is-up { color: #4ade80; }
.dark .nx-delta.is-down { color: #fca5a5; }
.nx-tool b { color: color-mix(in oklab, var(--tool) 58%, black); }
.dark .nx-tool b { color: color-mix(in oklab, var(--tool) 55%, white); }
.nx-tone-destructive { color: #b91c1c; }
.dark .nx-tone-destructive { color: #fca5a5; }

/* header controls share one height (36px) */
.nx-cmdk-btn { height: 2.25rem; }
/* sidebar rows share one height, with or without a count bubble */
#sidebar .kt-menu-link { min-height: 2.5rem; align-items: center; }
#sidebar .kt-menu-link .kt-badge-sm { height: 1.25rem; min-width: 1.25rem; padding-inline: .3rem; font-size: .6875rem; line-height: 1; }

/* overview strip borders for 1 / 2 / 4 columns */
.nx-strip-cell { border-inline-start: 0; border-top: 1px solid var(--border); }
.nx-strip-cell:first-child { border-top: 0; }
@media (min-width: 40rem) {
  .nx-strip-cell { border-top: 0; }
  .nx-strip-cell:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .nx-strip-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (min-width: 80rem) {
  .nx-strip-cell, .nx-strip-cell:nth-child(n+3) { border-top: 0; border-inline-start: 1px solid var(--border); }
  .nx-strip-cell:first-child { border-inline-start: 0; }
}

/* approvals: 2-up when the card is full width (768-1279) */
@media (min-width: 48rem) and (max-width: 79.98rem) {
  .nx-approvals-list { display: grid; grid-template-columns: 1fr 1fr; }
  .nx-approvals-list .nx-approval { border-top: 1px solid var(--border); }
  .nx-approvals-list .nx-approval:nth-child(-n+2) { border-top: 0; }
  .nx-approvals-list .nx-approval:nth-child(odd) { border-inline-end: 1px solid var(--border); }
}

/* copied state */
.nx-id.is-copied { border-color: color-mix(in oklab, var(--nx-ok) 45%, var(--border)); }
.nx-id.is-copied i { color: var(--nx-ok-text); }
.nx-icon-btn .text-success { color: var(--nx-ok-text) !important; }

/* buttons: clearer pressed state and keyboard focus */
.kt-btn:active:not(:disabled) { transform: translateY(1px); }
.kt-btn-outline:focus-visible, .kt-btn-primary:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); }

/* ================= icons: one size per context, duotone where icons are visual ================= */
#sidebar .kt-menu-icon { font-size: 1.1875rem; width: 1.25rem; justify-content: center; }
#sidebar .kt-menu-icon i { font-size: 1.1875rem; }
.kt-header .kt-btn-icon i, #announcements_toggle_icon { font-size: 1.3125rem !important; }
.kt-header .kt-btn-icon { color: var(--secondary-foreground); }
.kt-header .kt-btn-icon:hover { color: var(--mono); background: var(--muted); }
#announcements_toggle_icon.text-primary { color: var(--primary) !important; }
.nx-icon i { font-size: 1.1875rem; }
.nx-icon-sm i { font-size: 1rem; }
.nx-icon-lg i { font-size: 1.5rem; }
.kt-btn i { font-size: 1rem; line-height: 1; }
.kt-btn-sm i { font-size: .875rem; }
.nx-chip i, .nx-id i, .nx-delta i, .nx-kbd i { line-height: 1; }
.nx-cmdk-item .ki-duotone { font-size: 1.25rem; width: 1.5rem; justify-content: center; }
.nx-empty .nx-icon { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: 12px; }
.nx-empty .nx-icon i { font-size: 1.5rem; }

/* ================= fresh-eyes review fixes (F01-F24) ================= */
/* F01 orders table fits its card; tools hide when narrow; rows stack on phones */
.nx-orders { container-type: inline-size; }
.nx-table th:first-child, .nx-table td:first-child { padding-inline-start: 1.125rem; }
.nx-table th:last-child, .nx-table td:last-child { padding-inline-end: 1.125rem; }
.nx-col-status { white-space: nowrap; }
.nx-reason { color: var(--muted-foreground); }
.nx-reason:hover { color: var(--nx-bad); }
@container (max-width: 700px) { .nx-col-tools { display: none; } }
@container (max-width: 520px) {
  .nx-orders .nx-table thead { display: none; }
  .nx-orders .nx-table, .nx-orders .nx-table tbody { display: block; }
  .nx-orders .nx-table tr { display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; padding: .875rem 1.125rem; border-top: 1px solid var(--border); border-bottom: 0; }
  .nx-orders .nx-table tbody tr:first-of-type { border-top: 0; }
  .nx-orders .nx-table td { padding: 0 !important; border: 0 !important; }
  .nx-orders .nx-table td:nth-child(2) { grid-row: 1; grid-column: 1; }
  .nx-orders .nx-table td:nth-child(1) { grid-row: 2; grid-column: 1; }
  .nx-orders .nx-table td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: end; }
  .nx-orders .nx-table td:nth-child(5) { grid-row: 2; grid-column: 2; justify-self: end; }
}

/* F02 notice pill keeps its dot; phone layout */
.nx-notice > .kt-badge { flex-shrink: 0; }
.nx-dot-sm { flex: 0 0 .375rem; }
@media (max-width: 47.98rem) {
  .nx-notice { flex-wrap: wrap; row-gap: .375rem; }
  .nx-notice > p { order: 3; flex-basis: 100%; }
  .nx-notice > .kt-btn { margin-inline-start: auto; }
}

/* F04 next level step shows partial progress */
.nx-step.is-next i { background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 45%, var(--card)) var(--p, 0%), var(--muted) 0); }

/* F05 earnings fills the row height */
.nx-earnings { display: flex; flex-direction: column; }
.nx-earnings > .kt-card-content { flex: 1; display: flex; flex-direction: column; }
.nx-earnings #earnings_chart { flex: 1; min-height: 280px; }

/* F06 the first row is the first <div>, not the first child (Alpine <template>) */
.nx-approval:first-of-type { border-top: 0; }
@media (min-width: 48rem) and (max-width: 79.98rem) {
  .nx-approvals-list .nx-approval { border-top: 1px solid var(--border); border-inline-end: 0; }
  .nx-approvals-list .nx-approval:nth-of-type(-n+2) { border-top: 0; }
  .nx-approvals-list .nx-approval:nth-of-type(odd) { border-inline-end: 1px solid var(--border); }
}

/* F07 one count-bubble style everywhere; pending is amber everywhere */
.nx-count { height: 1.125rem; min-width: 1.125rem; padding: 0 .3125rem; display: inline-grid; place-items: center; border-radius: 999px; font: 500 .6875rem/1 var(--nx-mono); background: var(--muted); color: var(--secondary-foreground); }
.nx-count.is-warn { background: color-mix(in oklab, #f59e0b 16%, var(--card)); color: #a16207; }
.dark .nx-count.is-warn { color: #fbbf24; }
.kt-btn .nx-count { margin-inline-start: .25rem; }
#sidebar .kt-badge-warning { height: 1.125rem; min-width: 1.125rem; padding: 0 .3125rem; font: 500 .6875rem/1 var(--nx-mono); border-radius: 999px; background: color-mix(in oklab, #f59e0b 16%, var(--card)) !important; color: #a16207 !important; }
.dark #sidebar .kt-badge-warning { color: #fbbf24 !important; }

/* F08 underline tabs sit on the header divider */
.kt-card-header:has(> .nx-underline) { padding-block: 0; align-items: stretch; }
.kt-card-header:has(> .nx-underline) .kt-card-title { align-self: center; }
.nx-underline { align-self: stretch; }
.nx-underline .kt-tab-toggle { display: inline-flex; align-items: center; padding-block: 0; margin-bottom: -1px; }

/* F09 one focus ring for every interactive element */
.kt-tab-toggle:focus-visible, .kt-menu-link:focus-visible, .nx-icon-btn:focus-visible, .nx-link:focus-visible, .nx-cmdk-item:focus-visible, #content a:focus-visible, .kt-switch:focus-visible,
.kt-checkbox:focus-visible, .kt-radio:focus-visible, .nx-password > button:focus-visible, .nx-auth-top a:focus-visible, .nx-auth-foot a:focus-visible,
.footer a:focus-visible, #announcements_drawer a:focus-visible, #announcements_drawer button:focus-visible, .nx-menu-link:focus-visible, summary:focus-visible, #sidebar_footer a:focus-visible, #sidebar_header a:focus-visible, .kt-header a:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px;
}

/* F10 strip rows line up */
.nx-strip .nx-icon-btn { width: 1.25rem; height: 1.25rem; margin-block: -2px; }

/* F11 header icons match; phone header order */
#announcements_toggle_icon, #announcements_toggle_icon.text-primary { color: var(--secondary-foreground) !important; }
#announcements_toggle_btn:hover #announcements_toggle_icon, .kt-header .kt-btn-icon:hover i { color: var(--primary) !important; }
.nx-menu-btn { order: -1; }

/* F13 native date pickers follow the theme; phone range form */
.kt-input { color-scheme: light; }
.dark .kt-input { color-scheme: dark; }
@media (max-width: 39.98rem) {
  .nx-range { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; }
  .nx-range .nx-date { width: 100%; }
  .nx-range .kt-btn { grid-column: 1 / -1; }
}

/* F14 orders header on phones: title above tabs; fade cue for scrolling tabs */
@media (max-width: 39.98rem) {
  .kt-card-header:has(> .nx-underline) { flex-direction: column; align-items: stretch; padding-top: .75rem; }
  .nx-underline { gap: .875rem; }   /* scroll fades: .nx-tabs.nx-fade-start / .nx-fade-end, set by panel.js fitTabs */
}

/* F15 teal tile for Customers */
.nx-tone-teal { color: #0f766e; background: color-mix(in oklab, #14b8a6 10%, var(--card)); border-color: color-mix(in oklab, #14b8a6 22%, transparent); }
.dark .nx-tone-teal { color: #5eead4; }

/* F19 announcements drawer (items: panel.css .nx-ann) */
#announcements_drawer { background: var(--popover); }

/* F20 toasts: compact */
.nx-toast { font-size: .8125rem; padding: .625rem .5rem .625rem .875rem; }

/* F21 small copyable order chip */
.nx-id-sm { height: 1.25rem; font-size: .6875rem; padding: 0 .375rem; }
.nx-id-sm i { font-size: .6875rem; }

/* F24 visible switch track in light mode */
#sidebar .kt-switch:not(:checked) { background-color: var(--input); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent); }
/* final touches after re-audit */
.nx-count.is-warn, #sidebar .kt-badge-warning { color: #854d0e !important; }
.dark .nx-count.is-warn, .dark #sidebar .kt-badge-warning { color: #fbbf24 !important; }
#sidebar .kt-menu-link { height: 2.5rem; min-height: 0; }

/* phone: card titles stay left-aligned when a header stacks */
@media (max-width: 39.98rem) { .kt-card-header:has(> .nx-underline) .kt-card-title { align-self: flex-start; } }

/* faint dot grid behind the earnings chart (very small, barely visible) */
:root { --nx-chart-dots: rgba(236, 72, 153, .30); }
.dark { --nx-chart-dots: rgba(244, 114, 182, .20); }
.nx-dot-fill { fill: var(--nx-chart-dots); }

/* ---------- Lines: three 1px strengths ----------
   Why: the owner (Oct 2026): "the lines of each container and box are not clearly visible". The finish's old #e4e4e7 / #24242a borders
   and #d9d9de / #303037 fields nearly vanished on white and #121216 cards. The lines stay 1px (1.5px blurred at 1x) and get darker,
   in three strengths. The customer area tried this first; the values live here now and reach all three panels (customer.css only
   adds its own boxes; admin.css still carries a copy of the token block, keep the values in sync until the admin drops it).
     --nx-line          #d8d8de / dark #31313a   = --border. Dividers inside a container: card header / footer rules, table and
                                                 list rows, strip / fact cells, filter bars, menu and drawer separators
     --nx-line-strong   #cbcbd2 / dark #40404a   outlines: cards, boxes, tiles, outline buttons, modals, drawers, dropdown menus,
                                                 toasts, the sidebar edge, the sidebar header rule, the header rule. Tinted or
                                                 hover states of these mix their colour into --nx-line-strong, not --border
     --nx-line-input    #c0c0c8 / dark #4e4e59   = --input. Form controls (inputs, selects, textareas, the search box, checkboxes,
                                                 radios, switch tracks), one step above the outlines so fields read as fields
   KTUI and the kit draw with --border / --input, so most pieces follow on their own. The rules above that set a line (.kt-card,
   .kt-btn-outline, .kt-input, #sidebar, .kt-header, .nx-cmdk-btn, .nx-toast, .nx-tone-mono) name their token directly. The rules
   below cover the KTUI pieces the finish never styled. Fields keep a focus ring (.kt-input:focus / :focus-within, .kt-textarea:focus,
   .kt-select:focus) and the invalid rules (!important) still win. */
:root {
  --nx-line: #d8d8de;
  --nx-line-strong: #cbcbd2;
  --nx-line-input: #c0c0c8;
}
.dark {
  --nx-line: #31313a;
  --nx-line-strong: #40404a;
  --nx-line-input: #4e4e59;
}
.kt-textarea, .kt-select { border-color: var(--nx-line-input); }
/* the line above replaces KTUI's own select focus colour, so selects get the same ring as inputs and textareas */
.kt-select:focus, .kt-select:focus-visible { border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); outline: none; }
.kt-modal-content, .kt-dropdown-menu, .kt-menu-dropdown, .kt-select-dropdown, .kt-popover, #announcements_drawer { border-color: var(--nx-line-strong); }

/* =====================================================================================
   4. Utilities added for the merchant-panel screens
   ===================================================================================== */
.me-auto { margin-inline-end: auto; }
.max-w-\[720px\] { max-width: 720px; }