/* ============================================================================
   NMG Cloud design system  ·  nmgcloud.css
   ----------------------------------------------------------------------------
   One stylesheet, two halves:
     1. TOKENS   the only place a colour, size, radius or shadow is written.
     2. COMPONENTS  every element the product uses, once, with the nc- prefix.
   Rules for anyone (human or AI) touching this file live in DESIGN.md.
   The palette is the product's existing one, sampled from the live screens.
   ============================================================================ */

/* ---------- 1. TOKENS ----------------------------------------------------- */
:root {
  /* surfaces */
  --nc-page:            #efeff6;   /* the grey-lavender canvas behind cards */
  --nc-surface:         #ffffff;
  --nc-surface-muted:   #f9f9ff;   /* table heads, subtle wells */
  --nc-surface-hover:   #f3f3fa;

  /* lines */
  --nc-border:          #e6e6f2;
  --nc-border-strong:   #91929d;   /* input and outlined-button edge: 3:1 against white */

  /* ink */
  --nc-ink:             #1f2140;   /* body text */
  --nc-ink-heading:     #2b2d4a;   /* h1, h2, KPI values */
  --nc-ink-muted:       #5b5e73;   /* labels, secondary text: 4.5:1 on the page colour too */
  --nc-ink-faint:       #696b76;   /* ids, sub-lines, hints, placeholders: still 4.5:1 */
  --nc-ink-decor:       #a2a4b6;   /* decoration ONLY (idle sort arrows, empty-state art). Never text. */

  /* brand accent (the existing indigo) */
  --nc-accent:          #5969ff;
  --nc-accent-hover:    #4756ea;
  --nc-accent-active:   #3b49d1;
  --nc-accent-soft:     #edeeff;   /* selected rows, active tabs, soft buttons */
  --nc-accent-text:     #4756ea;   /* accent used as text on white */
  --nc-on-accent:       #ffffff;
  /* fills that carry white text: the same hue, just dark enough for 4.5:1 */
  --nc-accent-fill:     #5564f2;
  --nc-success-fill:    #198632;
  --nc-danger-fill:     #d43948;

  /* the dark chrome (sidebar, login canvas, print headers) */
  --nc-chrome:          #0e0c28;
  --nc-chrome-tile:     #24274a;   /* nested nav groups */
  --nc-chrome-hover:    #1a1a3d;
  --nc-chrome-text:     #d7d8ea;
  --nc-chrome-text-dim: #a2a4c8;
  --nc-chrome-heading:  #7a7fa9;

  /* semantic (status, money direction, alerts). Icon + word, never colour alone. */
  --nc-success:         #21ae41;
  --nc-success-soft:    #e6f6ea;
  --nc-success-text:    #187a2f;
  --nc-danger:          #ec3f50;
  --nc-danger-soft:     #fdeaec;
  --nc-danger-text:     #b8202f;
  --nc-warning:         #d98d00;
  --nc-warning-soft:    #fff3d6;
  --nc-warning-text:    #8a5a00;
  --nc-info:            #5969ff;
  --nc-info-soft:       #edeeff;
  --nc-info-text:       #3b49d1;

  /* charts: UNCHANGED from the live product. Chart.js reads these via getComputedStyle. */
  --nc-chart-facebook:  #0f6ba8;
  --nc-chart-tiktok:    #c86b9b;
  --nc-chart-usd:       #5969ff;
  --nc-chart-daily:     #ec3f50;
  --nc-chart-partner:   #6f42f5;   /* the by-partner bars on the home page, as in the live product */
  --nc-chart-1:         #5969ff;
  --nc-chart-2:         #ec3f50;
  --nc-chart-3:         #e11d48;
  --nc-chart-4:         #f5b301;
  --nc-chart-5:         #22c55e;
  --nc-chart-6:         #6d28d9;
  --nc-chart-7:         #06b6d4;

  /* type */
  --nc-font:            "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nc-font-mono:       "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --nc-text-xs:  12px;
  --nc-text-sm:  13px;
  --nc-text-md:  14px;   /* body */
  --nc-text-lg:  16px;
  --nc-text-xl:  20px;   /* page title */
  --nc-text-2xl: 28px;   /* KPI value */
  --nc-leading:  1.5;

  /* space: an 8px grid. 4 is the only half-step allowed. */
  --nc-s1: 4px;  --nc-s2: 8px;  --nc-s3: 12px; --nc-s4: 16px;
  --nc-s5: 20px; --nc-s6: 24px; --nc-s8: 32px; --nc-s10: 40px;

  /* shape */
  --nc-r-sm: 4px;
  --nc-r-md: 6px;     /* buttons, inputs, badges */
  --nc-r-lg: 8px;     /* cards */
  --nc-shadow-card: 0 1px 2px rgba(20, 20, 60, 0.06), 0 1px 1px rgba(20, 20, 60, 0.04);
  --nc-shadow-pop:  0 8px 24px rgba(20, 20, 60, 0.14);

  /* layout */
  --nc-sidebar-w: 236px;
  --nc-topbar-h:  56px;
  --nc-control-h: 36px;   /* every button, input, select is this tall */
  --nc-control-h-sm: 28px;

  /* motion */
  --nc-t: 140ms ease;
}

/* ---------- 2. BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nc-page);
  color: var(--nc-ink);
  font-family: var(--nc-font);
  font-size: var(--nc-text-md);
  line-height: var(--nc-leading);
  font-variant-numeric: tabular-nums;   /* every number lines up, everywhere */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--nc-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; color: var(--nc-ink-heading); font-weight: 600; line-height: 1.25; }
h1, .nc-h1 { font-size: var(--nc-text-xl); }
.nc-h1 { color: var(--nc-ink-heading); font-weight: 600; line-height: 1.25; }
h2 { font-size: var(--nc-text-lg); }
h3 { font-size: var(--nc-text-md); }
p { margin: 0 0 var(--nc-s3); }
code, .nc-mono { font-family: var(--nc-font-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--nc-accent-fill); outline-offset: 2px; border-radius: var(--nc-r-sm); }
.nc-sidebar :focus-visible, .nc-canvas-dark :focus-visible { outline-color: #ffffff; }
/* the parts the browser draws still belong to the palette */
::selection { background: var(--nc-accent-soft); color: var(--nc-ink-heading); }
input, textarea { caret-color: var(--nc-accent-fill); }
a { text-underline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--nc-border-strong) transparent; }
.nc-sidebar { scrollbar-color: var(--nc-chrome-tile) transparent; }
.nc-skip { position: absolute; left: 8px; top: -48px; z-index: 50; padding: 8px 12px; background: var(--nc-accent-fill); color: #fff; border-radius: var(--nc-r-md); font-weight: 600; }
.nc-skip:focus { top: 8px; }
.nc-muted { color: var(--nc-ink-muted); }
.nc-faint { color: var(--nc-ink-faint); }
.nc-num   { font-variant-numeric: tabular-nums; text-align: right; }
.nc-icon { width: 16px; height: 16px; flex: none; }
.nc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. SHELL: topbar + sidebar + page ----------------------------- */
.nc-app { min-height: 100vh; }
.nc-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--nc-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--nc-s6) 0 var(--nc-s5);
  background: var(--nc-surface);
  border-bottom: 1px solid var(--nc-border);
}
.nc-brand { display: inline-flex; align-items: center; gap: var(--nc-s2); color: #155487; font-weight: 700; font-size: 22px; letter-spacing: 0.02em; }
.nc-brand svg { width: 28px; height: 28px; color: #02355F; }
.nc-brand.nc-brand-on-dark svg { color: #fff; }
.nc-brand-logo img { height: 32px; width: auto; max-width: 160px; object-fit: contain; }
.nc-user-menu { position: relative; }
.nc-user-menu summary { list-style: none; cursor: pointer; }
.nc-user-menu summary::-webkit-details-marker { display: none; }
.nc-user-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 140px; padding: 4px; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-r-md); box-shadow: 0 8px 24px rgba(14, 12, 40, 0.12); }
.nc-user-pop a { display: block; padding: 8px 12px; border-radius: var(--nc-r-sm); color: var(--nc-ink); font-size: var(--nc-text-sm); font-weight: 600; }
.nc-user-pop a:hover { background: var(--nc-surface-hover); }
.nc-topbar-right { display: flex; align-items: center; gap: var(--nc-s4); }
.nc-search { position: relative; width: 260px; }
.nc-search .nc-input { padding-left: 34px; }
.nc-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--nc-ink-faint); pointer-events: none; }
.nc-search { width: 320px; }
.nc-user { display: inline-flex; align-items: center; gap: var(--nc-s2); color: var(--nc-ink-muted); font-size: var(--nc-text-sm); }
.nc-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--nc-accent-soft); color: var(--nc-accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--nc-text-xs); }

.nc-body { display: flex; min-height: calc(100vh - var(--nc-topbar-h));
  /* the chrome column stays dark to the bottom of long pages, whatever the sidebar's own height */
  background: linear-gradient(to right, var(--nc-chrome) var(--nc-sidebar-w), transparent var(--nc-sidebar-w)); }
.nc-sidebar {
  width: var(--nc-sidebar-w); flex: none;
  background: var(--nc-chrome); color: var(--nc-chrome-text);
  padding: var(--nc-s4) var(--nc-s3) var(--nc-s8);
  position: sticky; top: var(--nc-topbar-h); height: calc(100vh - var(--nc-topbar-h)); overflow-y: auto;
}
.nc-nav-section { margin: var(--nc-s4) 0 var(--nc-s2); padding: 0 var(--nc-s2); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nc-chrome-heading); }
.nc-nav-section:first-child { margin-top: var(--nc-s1); }
.nc-nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 var(--nc-s2); border-radius: var(--nc-r-md);
  color: var(--nc-chrome-text); font-size: var(--nc-text-sm); text-decoration: none;
  transition: background var(--nc-t), color var(--nc-t);
}
.nc-nav-item svg { width: 16px; height: 16px; flex: none; color: var(--nc-chrome-text-dim); }
.nc-nav-item:hover { background: var(--nc-chrome-hover); color: #fff; text-decoration: none; }
.nc-nav-item[aria-current="page"] { background: var(--nc-accent-fill); color: #fff; }
.nc-nav-item[aria-current="page"] svg { color: #fff; }
.nc-nav-item .nc-nav-caret { margin-left: auto; width: 14px; height: 14px; transition: transform var(--nc-t); }
.nc-nav-group[open] > .nc-nav-item .nc-nav-caret { transform: rotate(180deg); }
.nc-nav-group > summary { list-style: none; cursor: pointer; }
.nc-nav-group > summary::-webkit-details-marker { display: none; }
.nc-nav-sub { margin: var(--nc-s1) 0 var(--nc-s2); padding: var(--nc-s1) 0; background: var(--nc-chrome-tile); border-radius: var(--nc-r-md); }
.nc-nav-sub .nc-nav-item { height: 32px; padding-left: 34px; color: var(--nc-chrome-text-dim); }
.nc-nav-sub .nc-nav-item:hover { color: #fff; }
.nc-nav-sub .nc-nav-item[aria-current="page"] { background: transparent; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--nc-accent); border-radius: 0; }

.nc-main { flex: 1; min-width: 0; padding: var(--nc-s6) var(--nc-s8) var(--nc-s10); }
.nc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nc-s4); margin-bottom: var(--nc-s5); }
.nc-page-head h1 { margin-bottom: 2px; }
.nc-page-sub { color: var(--nc-ink-muted); font-size: var(--nc-text-sm); margin: 0; }
.nc-page-actions { display: flex; flex-wrap: wrap; gap: var(--nc-s2); flex: none; max-width: 100%; }
.nc-breadcrumb { display: flex; gap: var(--nc-s2); font-size: var(--nc-text-sm); color: var(--nc-ink-faint); margin-bottom: var(--nc-s2); }
.nc-breadcrumb a { color: var(--nc-ink-muted); }

/* ---------- 4. LAYOUT HELPERS -------------------------------------------- */
.nc-stack { display: flex; flex-direction: column; gap: var(--nc-s5); }
/* children of layout containers may shrink: without this one long table or tab bar widens the whole page */
.nc-stack > *, .nc-grid > *, .nc-split > *, .nc-split-left > *, .nc-row > .nc-grow { min-width: 0; }
.nc-grid { display: grid; gap: var(--nc-s4); }
.nc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-row { display: flex; align-items: center; gap: var(--nc-s2); flex-wrap: wrap; }
.nc-spacer { flex: 1; }
@media (max-width: 1100px) { .nc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .nc-grid-4, .nc-grid-3, .nc-grid-2 { grid-template-columns: minmax(0, 1fr); } .nc-body { background: none; } .nc-main { padding: var(--nc-s4); } }

/* ---------- 5. CARDS ------------------------------------------------------ */
.nc-card { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-r-lg); box-shadow: var(--nc-shadow-card); }
.nc-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s3); padding: var(--nc-s3) var(--nc-s5); border-bottom: 1px solid var(--nc-border); min-height: 48px; }
.nc-card-head h2 { font-size: var(--nc-text-md); font-weight: 600; }
.nc-card-body { padding: var(--nc-s5); }
.nc-card-body.nc-flush { padding: 0; }
.nc-card-foot { padding: var(--nc-s3) var(--nc-s5); border-top: 1px solid var(--nc-border); display: flex; gap: var(--nc-s2); justify-content: flex-end; }

/* KPI: the accent top border is the product's signature; keep it, and keep it only here. */
.nc-kpi { border-top: 3px solid var(--nc-accent); padding: var(--nc-s4) var(--nc-s5) var(--nc-s5); }
.nc-kpi-label { font-size: var(--nc-text-sm); color: var(--nc-ink-muted); margin-bottom: var(--nc-s2); display: flex; align-items: center; justify-content: space-between; }
.nc-kpi-value { font-size: var(--nc-text-2xl); font-weight: 700; color: var(--nc-ink-heading); letter-spacing: -0.01em; line-height: 1.1; }
.nc-kpi-value small { font-size: var(--nc-text-sm); font-weight: 500; color: var(--nc-ink-faint); margin-left: var(--nc-s1); }
.nc-kpi-note { margin-top: var(--nc-s2); font-size: var(--nc-text-sm); color: var(--nc-ink-muted); display: flex; gap: var(--nc-s3); flex-wrap: wrap; }
.nc-kpi-note .nc-pos { color: var(--nc-success-text); }
.nc-kpi-note .nc-neg { color: var(--nc-danger-text); }
.nc-kpi-note .nc-acc { color: var(--nc-accent-text); }
.nc-kpi-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nc-accent-soft); color: var(--nc-accent-text); }
.nc-kpi-icon svg { width: 18px; height: 18px; }
.nc-kpi-icon.nc-success { background: var(--nc-success-soft); color: var(--nc-success-text); }
.nc-kpi-icon.nc-warning { background: var(--nc-warning-soft); color: var(--nc-warning-text); }
.nc-kpi-icon.nc-danger  { background: var(--nc-danger-soft);  color: var(--nc-danger-text); }

/* charts: the canvas gets a fixed height so cards in a row match */
.nc-chart { position: relative; height: 260px; }
.nc-chart.nc-tall { height: 420px; }

/* ---------- 6. BUTTONS ---------------------------------------------------- */
.nc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nc-s2);
  height: var(--nc-control-h); padding: 0 var(--nc-s4);
  border: 1px solid transparent; border-radius: var(--nc-r-md);
  font: inherit; font-size: var(--nc-text-sm); font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--nc-t), border-color var(--nc-t), color var(--nc-t);
}
.nc-btn svg { width: 16px; height: 16px; }
.nc-btn:hover { text-decoration: none; }
.nc-btn:disabled, .nc-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.nc-btn-primary   { background: var(--nc-accent-fill); color: var(--nc-on-accent); }
.nc-btn-primary:hover { background: var(--nc-accent-hover); }
.nc-btn-primary:active { background: var(--nc-accent-active); }
.nc-btn-secondary { background: var(--nc-surface); color: var(--nc-ink); border-color: var(--nc-border-strong); }
.nc-btn-secondary:hover { background: var(--nc-surface-hover); }
.nc-btn-soft      { background: var(--nc-accent-soft); color: var(--nc-accent-text); }
.nc-btn-soft:hover { background: #e1e3ff; }
.nc-btn-ghost     { background: transparent; color: var(--nc-ink-muted); }
.nc-btn-ghost:hover { background: var(--nc-surface-hover); color: var(--nc-ink); }
.nc-btn-danger    { background: var(--nc-danger-fill); color: #fff; }
.nc-btn-danger:hover { background: var(--nc-danger-text); }
.nc-btn-danger-outline { background: var(--nc-surface); color: var(--nc-danger-text); border-color: var(--nc-danger-fill); }
.nc-btn-danger-outline:hover { background: var(--nc-danger-soft); }
.nc-btn-sm { height: var(--nc-control-h-sm); padding: 0 var(--nc-s3); font-size: var(--nc-text-xs); }
.nc-btn-sm svg { width: 14px; height: 14px; }
.nc-btn-icon { width: var(--nc-control-h); padding: 0; }
.nc-btn-icon.nc-btn-sm { width: var(--nc-control-h-sm); }
.nc-btn-group { display: inline-flex; gap: var(--nc-s2); }

/* ---------- 7. FORMS ------------------------------------------------------ */
.nc-field { display: flex; flex-direction: column; gap: 6px; }
.nc-label { font-size: var(--nc-text-sm); font-weight: 600; color: var(--nc-ink); }
.nc-label .nc-req { color: var(--nc-danger-text); margin-left: 2px; }
.nc-hint { font-size: var(--nc-text-xs); color: var(--nc-ink-faint); margin: 0; }
.nc-error { font-size: var(--nc-text-xs); color: var(--nc-danger-text); margin: 0; }
.nc-input, .nc-select, .nc-textarea {
  width: 100%; height: var(--nc-control-h); padding: 0 var(--nc-s3);
  background: var(--nc-surface); color: var(--nc-ink);
  border: 1px solid var(--nc-border-strong); border-radius: var(--nc-r-md);
  font: inherit; font-size: var(--nc-text-sm);
  transition: border-color var(--nc-t), box-shadow var(--nc-t);
}
.nc-input::placeholder, .nc-textarea::placeholder { color: var(--nc-ink-faint); }
.nc-input:focus, .nc-select:focus, .nc-textarea:focus { border-color: var(--nc-accent-fill); box-shadow: 0 0 0 3px var(--nc-accent-soft); }
.nc-input:focus-visible, .nc-select:focus-visible, .nc-textarea:focus-visible { outline: 2px solid var(--nc-accent-fill); outline-offset: 1px; }
.nc-input[aria-invalid="true"], .nc-select[aria-invalid="true"] { border-color: var(--nc-danger); }
.nc-input:disabled, .nc-select:disabled, .nc-textarea:disabled { background: var(--nc-surface-muted); color: var(--nc-ink-faint); }
.nc-textarea { height: auto; min-height: 96px; padding: var(--nc-s2) var(--nc-s3); resize: vertical; line-height: var(--nc-leading); }
.nc-select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7288' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
/* django-countries flag GIF without flags.css is a 500px hole on register. */
.country-select-flag { display: none; }
.nc-input-sm, .nc-select-sm { height: var(--nc-control-h-sm); font-size: var(--nc-text-xs); }
.nc-check { display: inline-flex; align-items: center; gap: var(--nc-s2); font-size: var(--nc-text-sm); cursor: pointer; align-self: flex-start; }
.nc-check input { width: 16px; height: 16px; accent-color: var(--nc-accent); margin: 0; flex: none; }
.nc-field > input[type="checkbox"] { width: 16px; height: 16px; align-self: flex-start; accent-color: var(--nc-accent); margin: 0; }
.nc-file { position: relative; display: flex; align-items: center; gap: var(--nc-s3); min-height: var(--nc-control-h); height: auto; padding: 6px var(--nc-s1) 6px var(--nc-s3); border: 1px dashed var(--nc-border-strong); border-radius: var(--nc-r-md); color: var(--nc-ink-faint); font-size: var(--nc-text-sm); background: var(--nc-surface); }
.nc-file .nc-btn { margin-left: auto; }
.nc-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nc-ink-muted); }
.nc-file input.nc-file-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.nc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nc-s4) var(--nc-s5); }
.nc-form-grid .nc-span2 { grid-column: span 2; }
.nc-form-section { margin: var(--nc-s6) 0 var(--nc-s3); padding-bottom: var(--nc-s2); border-bottom: 1px solid var(--nc-border); font-size: var(--nc-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nc-ink-muted); }
.nc-form-section:first-child { margin-top: 0; }
.nc-form-actions { display: flex; gap: var(--nc-s2); margin-top: var(--nc-s6); padding-top: var(--nc-s5); border-top: 1px solid var(--nc-border); }
.nc-form-narrow { max-width: none; }   /* owner's rule: pages use all the available width */
@media (max-width: 720px) { .nc-form-grid { grid-template-columns: minmax(0, 1fr); } .nc-form-grid .nc-span2 { grid-column: auto; } }

/* Filter bar: every list page has exactly this above its table. */
.nc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--nc-s3) var(--nc-s4); padding: var(--nc-s4) var(--nc-s5); border-bottom: 1px solid var(--nc-border); }
.nc-filters .nc-field { min-width: 160px; flex: 1 1 160px; max-width: 260px; }
.nc-filters .nc-field.nc-date { max-width: 170px; }
.nc-filters .nc-filter-actions { display: flex; gap: var(--nc-s2); margin-left: auto; }

/* ---------- 8. TABLES ----------------------------------------------------- */
.nc-table-wrap { overflow-x: auto; position: relative; }   /* relative: hidden header text must scroll with the table, not widen the page */
.nc-table { width: 100%; border-collapse: collapse; font-size: var(--nc-text-sm); }
.nc-table th, .nc-table td { padding: 10px var(--nc-s4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--nc-border); }
.nc-table thead th { background: var(--nc-surface-muted); color: var(--nc-ink-muted); font-size: var(--nc-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; height: 40px; }
.nc-table tbody tr:last-child td { border-bottom: 0; }
.nc-table tbody tr:hover { background: var(--nc-surface-hover); }
.nc-table tr.nc-selected { background: var(--nc-accent-soft); }
.nc-table .nc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-table .nc-mono, .nc-table .nc-nowrap, .nc-table .nc-badge { white-space: nowrap; }
.nc-table td:has(> .nc-primary) { min-width: 200px; }
.nc-table th.nc-num { text-align: right; }
.nc-table .nc-id { color: var(--nc-ink-faint); font-family: var(--nc-font-mono); font-size: var(--nc-text-xs); width: 1%; white-space: nowrap; }
.nc-table .nc-primary { color: var(--nc-ink-heading); font-weight: 600; }
.nc-table .nc-actions { text-align: right; white-space: nowrap; width: 1%; }
.nc-table .nc-actions .nc-btn { vertical-align: middle; }
.nc-table .nc-sub { display: block; color: var(--nc-ink-faint); font-size: var(--nc-text-xs); margin-top: 1px; }
.nc-table .nc-warn-num { color: var(--nc-danger-text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.nc-table .nc-warn-num svg { width: 12px; height: 12px; }
.nc-table tfoot td { background: var(--nc-surface-muted); font-weight: 600; color: var(--nc-ink-heading); }
.nc-table.nc-compact th, .nc-table.nc-compact td { padding: 6px var(--nc-s3); }
.nc-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.nc-sort svg { width: 12px; height: 12px; color: var(--nc-ink-decor); }
.nc-sort[aria-sort] svg { color: var(--nc-accent-text); }
.nc-sort:hover { text-decoration: none; color: var(--nc-ink); }
.nc-money-pos { color: var(--nc-success-text); font-weight: 600; }
.nc-money-neg { color: var(--nc-danger-text); font-weight: 600; }
.nc-money-acc { color: var(--nc-accent-text); font-weight: 600; }
.nc-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s3); padding: var(--nc-s3) var(--nc-s5); border-top: 1px solid var(--nc-border); font-size: var(--nc-text-sm); color: var(--nc-ink-muted); }
.nc-pager { display: inline-flex; gap: var(--nc-s1); }

/* key / value table for detail pages */
.nc-kv { width: 100%; border-collapse: collapse; font-size: var(--nc-text-sm); }
.nc-kv th, .nc-kv td { padding: 9px 0; border-bottom: 1px solid var(--nc-border); vertical-align: top; text-align: left; }
.nc-kv th { width: 40%; font-weight: 500; color: var(--nc-ink-muted); padding-right: var(--nc-s4); }
.nc-kv td { color: var(--nc-ink); overflow-wrap: anywhere; }
.nc-kv tr:last-child th, .nc-kv tr:last-child td { border-bottom: 0; }
.nc-kv .nc-kv-section th { padding-top: var(--nc-s5); font-size: var(--nc-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nc-ink-faint); border-bottom: 0; }
.nc-kv-empty { color: var(--nc-ink-faint); }

/* ---------- 9. BADGES + STATUS -------------------------------------------- */
.nc-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--nc-r-md); font-size: var(--nc-text-xs); font-weight: 600; white-space: nowrap; background: var(--nc-surface-muted); color: var(--nc-ink-muted); border: 1px solid var(--nc-border); }
.nc-badge svg { width: 12px; height: 12px; }
.nc-badge .nc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nc-badge-success { background: var(--nc-success-soft); color: var(--nc-success-text); border-color: transparent; }
.nc-badge-danger  { background: var(--nc-danger-soft);  color: var(--nc-danger-text);  border-color: transparent; }
.nc-badge-warning { background: var(--nc-warning-soft); color: var(--nc-warning-text); border-color: transparent; }
.nc-badge-info    { background: var(--nc-info-soft);    color: var(--nc-info-text);    border-color: transparent; }
.nc-badge-neutral { background: var(--nc-surface-muted); color: var(--nc-ink-muted); }
.nc-badge-dark    { background: var(--nc-chrome-tile); color: #fff; border-color: transparent; }

/* ---------- 10. TABS ------------------------------------------------------ */
.nc-tabs { display: flex; gap: var(--nc-s1); border-bottom: 1px solid var(--nc-border); padding: 0 var(--nc-s5); overflow-x: auto; scrollbar-width: none; }
.nc-tab { flex: none; }
.nc-tab { display: inline-flex; align-items: center; gap: var(--nc-s2); height: 44px; padding: 0 var(--nc-s3); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nc-ink-muted); font: inherit; font-size: var(--nc-text-sm); font-weight: 600; cursor: pointer; }
.nc-tab svg { width: 15px; height: 15px; }
.nc-tab:hover { color: var(--nc-ink); }
.nc-tab[aria-selected="true"] { color: var(--nc-accent-text); border-bottom-color: var(--nc-accent); }
.nc-tab .nc-count { background: var(--nc-surface-muted); border: 1px solid var(--nc-border); border-radius: var(--nc-r-pill, 999px); padding: 0 6px; font-size: 11px; color: var(--nc-ink-muted); }
.nc-tab[aria-selected="true"] .nc-count { background: var(--nc-accent-soft); border-color: transparent; color: var(--nc-accent-text); }

/* ---------- 11. ALERTS + EMPTY STATES ------------------------------------- */
.nc-alert { display: flex; gap: var(--nc-s3); align-items: flex-start; padding: var(--nc-s3) var(--nc-s4); border-radius: var(--nc-r-md); border: 1px solid; font-size: var(--nc-text-sm); }
.nc-alert[hidden] { display: none; }
.nc-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.nc-alert strong { font-weight: 600; }
.nc-alert-warning { background: var(--nc-warning-soft); border-color: #f2d58f; color: var(--nc-warning-text); }
.nc-alert-danger  { background: var(--nc-danger-soft);  border-color: #f2b6bd; color: var(--nc-danger-text); }
.nc-alert-success { background: var(--nc-success-soft); border-color: #b6e5c2; color: var(--nc-success-text); }
.nc-alert-info    { background: var(--nc-info-soft);    border-color: #c5caff; color: var(--nc-info-text); }
.nc-empty { padding: var(--nc-s10) var(--nc-s5); text-align: center; color: var(--nc-ink-muted); }
.nc-empty > svg { width: 32px; height: 32px; color: var(--nc-ink-decor); margin-bottom: var(--nc-s3); }
.nc-empty h2, .nc-empty h3 { font-size: var(--nc-text-md); color: var(--nc-ink-heading); margin-bottom: var(--nc-s1); }
.nc-empty p { max-width: 48ch; margin: 0 auto var(--nc-s4); font-size: var(--nc-text-sm); }

/* ---------- 12. MISC ------------------------------------------------------ */
.nc-divider { height: 1px; background: var(--nc-border); margin: var(--nc-s4) 0; }
.nc-toolbar { display: flex; align-items: center; gap: var(--nc-s2); }
.nc-comments { display: flex; flex-direction: column; gap: var(--nc-s3); }
.nc-comment { display: flex; gap: var(--nc-s3); }
.nc-comment-body { flex: 1; padding: var(--nc-s3) var(--nc-s4); background: var(--nc-surface-muted); border-radius: var(--nc-r-md); font-size: var(--nc-text-sm); }
.nc-comment-meta { font-size: var(--nc-text-xs); color: var(--nc-ink-faint); margin-bottom: 2px; display: flex; gap: var(--nc-s2); }
.nc-ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--nc-s4); padding: var(--nc-s5); }
.nc-ad { display: flex; flex-direction: column; overflow: hidden; }
.nc-ad-preview { width: 100%; border: 0; border-radius: var(--nc-r-lg) var(--nc-r-lg) 0 0; cursor: pointer; font: inherit; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #e5e6f2, #d3d5e8); display: flex; align-items: center; justify-content: center; color: var(--nc-ink-faint); font-size: var(--nc-text-sm); border-bottom: 1px solid var(--nc-border); }
.nc-ad-body { padding: var(--nc-s4); display: flex; flex-direction: column; gap: var(--nc-s2); }
.nc-ad-title { font-weight: 600; color: var(--nc-ink-heading); display: flex; justify-content: space-between; gap: var(--nc-s2); align-items: flex-start; }
.nc-ad-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--nc-s3); font-size: var(--nc-text-xs); color: var(--nc-ink-muted); }
.nc-ad-meta dt { color: var(--nc-ink-faint); }
.nc-ad-meta dd { margin: 0; color: var(--nc-ink); }
.nc-ad-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nc-s2); padding: var(--nc-s3) var(--nc-s4); border-top: 1px solid var(--nc-border); }

/* login + public pages sit on the chrome colour with one white card */
.nc-canvas-dark { min-height: 100vh; background: var(--nc-chrome); display: flex; align-items: flex-start; justify-content: center; padding: 64px var(--nc-s4); }
.nc-auth { width: 100%; max-width: 400px; }
.nc-auth .nc-brand { display: flex; justify-content: center; margin-bottom: var(--nc-s2); }
.nc-public { width: 100%; max-width: 1050px; }   /* the original public column is about 73% of a 1440 screen */

/* invoice document: what the PDF is generated from */
.nc-doc { max-width: 760px; margin: 0 auto; padding: var(--nc-s8); background: #fff; color: var(--nc-ink); }
.nc-doc-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--nc-s5); border-bottom: 2px solid var(--nc-chrome); margin-bottom: var(--nc-s6); }
.nc-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nc-s6); margin-bottom: var(--nc-s6); font-size: var(--nc-text-sm); }
.nc-doc-parties h3, .nc-doc-parties h4 { font-size: var(--nc-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nc-ink-faint); margin-bottom: var(--nc-s2); }
.nc-doc-totals { margin-left: auto; width: 280px; margin-top: var(--nc-s4); }
.nc-doc-totals td { padding: 6px 0; border-bottom: 1px solid var(--nc-border); }
.nc-doc-totals tr:last-child td { border-bottom: 0; border-top: 2px solid var(--nc-chrome); font-weight: 700; font-size: var(--nc-text-lg); }
.nc-doc-note { margin-top: var(--nc-s8); padding-top: var(--nc-s4); border-top: 1px solid var(--nc-border); font-size: var(--nc-text-xs); color: var(--nc-ink-muted); line-height: 1.6; }
.nc-doc .nc-table tr.nc-promo td { color: var(--nc-accent-text); background: var(--nc-accent-soft); }
@media print { .nc-topbar, .nc-sidebar, .nc-page-head, .nc-no-print { display: none !important; } .nc-main { padding: 0; } body { background: #fff; } .nc-card { box-shadow: none; border: 0; } }

/* ---------- 13. WIDE TABLES (reports, network invoices) -------------------- */
/* More columns than fit: the first column stays put, the rest scroll under it,
   and a shadow on the right edge says there is more. */
.nc-table-wrap.nc-wide { position: relative; background:
    linear-gradient(to right, var(--nc-surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--nc-surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20,20,60,0.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,20,60,0.16), transparent) right center / 12px 100% no-repeat scroll; }
.nc-table-wrap.nc-wide .nc-table th, .nc-table-wrap.nc-wide .nc-table td { white-space: nowrap; background-color: transparent; }
.nc-table-wrap.nc-wide .nc-table thead th { background: var(--nc-surface-muted); }
.nc-table .nc-stick, .nc-table .nc-stick-end { position: sticky; z-index: 1; background: var(--nc-surface); }
.nc-table .nc-stick { left: 0; box-shadow: 1px 0 0 var(--nc-border); }
.nc-table .nc-stick-end { right: 0; box-shadow: -1px 0 0 var(--nc-border), -10px 0 10px -10px rgba(20, 20, 60, 0.18); }   /* the soft edge says: more columns continue under here */
.nc-table thead .nc-stick, .nc-table thead .nc-stick-end { background: var(--nc-surface-muted); }
.nc-table tbody tr:hover .nc-stick, .nc-table tbody tr:hover .nc-stick-end { background: var(--nc-surface-hover); }
.nc-table tfoot .nc-stick, .nc-table tfoot .nc-stick-end { background: var(--nc-surface-muted); }
/* wide tables make their cells transparent for the scroll shadows; the pinned cells must stay opaque or the columns scrolling under them show through */
.nc-table-wrap.nc-wide .nc-table td.nc-stick, .nc-table-wrap.nc-wide .nc-table td.nc-stick-end { background-color: var(--nc-surface); }
.nc-table-wrap.nc-wide .nc-table thead th.nc-stick, .nc-table-wrap.nc-wide .nc-table thead th.nc-stick-end, .nc-table-wrap.nc-wide .nc-table tfoot td.nc-stick, .nc-table-wrap.nc-wide .nc-table tfoot td.nc-stick-end { background-color: var(--nc-surface-muted); }
.nc-table-wrap.nc-wide .nc-table tbody tr:hover td.nc-stick, .nc-table-wrap.nc-wide .nc-table tbody tr:hover td.nc-stick-end { background-color: var(--nc-surface-hover); }
.nc-scroll-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nc-text-xs); color: var(--nc-ink-faint); }
.nc-scroll-hint svg { width: 12px; height: 12px; }
th.nc-group { text-align: center; border-left: 1px solid var(--nc-border); }
.nc-table .nc-group-start { border-left: 1px solid var(--nc-border); }

/* ---------- 14. SPLIT LAYOUTS (detail pages) ------------------------------- */
.nc-split       { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--nc-s4); align-items: start; }
.nc-split-left  { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--nc-s4); align-items: start; }
@media (max-width: 1100px) { .nc-split, .nc-split-left { grid-template-columns: minmax(0, 1fr); } .nc-split > :last-child { order: -1; } }   /* one column: the numbers and the decision come first */

/* summary strip: facts about a result that are not metrics (period, row count) */
.nc-summary { display: flex; flex-wrap: wrap; gap: var(--nc-s2) var(--nc-s6); margin: 0; padding: var(--nc-s3) var(--nc-s5); font-size: var(--nc-text-sm); }
.nc-summary div { display: flex; gap: var(--nc-s2); align-items: baseline; }
.nc-summary dt { color: var(--nc-ink-muted); }
.nc-summary dd { margin: 0; font-weight: 600; color: var(--nc-ink-heading); }

/* ---------- 15. STEPS ------------------------------------------------------- */
.nc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nc-s3); margin: 0; padding: 0; list-style: none; }
.nc-step { display: flex; gap: var(--nc-s3); align-items: flex-start; font-size: var(--nc-text-sm); color: var(--nc-ink-muted); }
.nc-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--nc-border-strong); color: var(--nc-ink-muted); font-weight: 700; font-size: var(--nc-text-xs); display: inline-flex; align-items: center; justify-content: center; }
.nc-step strong { display: block; color: var(--nc-ink-heading); }
.nc-step[aria-current="step"] .nc-step-num { background: var(--nc-accent-fill); border-color: var(--nc-accent-fill); color: #fff; }
.nc-step[data-done] .nc-step-num { background: var(--nc-success-soft); border-color: transparent; color: var(--nc-success-text); }
.nc-step[data-done] .nc-step-num svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .nc-steps { grid-template-columns: 1fr; } }

/* ---------- 16. FEEDBACK: dialog, toast, loading --------------------------- */
.nc-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(14, 12, 40, 0.5); display: flex; align-items: center; justify-content: center; padding: var(--nc-s4); }
.nc-dialog { width: 100%; max-width: 440px; background: var(--nc-surface); border-radius: var(--nc-r-lg); box-shadow: var(--nc-shadow-pop); border: 0; padding: 0; color: var(--nc-ink); }
.nc-dialog-body { padding: var(--nc-s6) var(--nc-s6) var(--nc-s4); }
.nc-dialog-body h2 { margin-bottom: var(--nc-s2); }
.nc-dialog-body p { color: var(--nc-ink-muted); font-size: var(--nc-text-sm); margin: 0; }
.nc-dialog-facts { margin: var(--nc-s4) 0 0; padding: var(--nc-s3) var(--nc-s4); background: var(--nc-surface-muted); border-radius: var(--nc-r-md); font-size: var(--nc-text-sm); display: grid; grid-template-columns: auto 1fr; gap: 4px var(--nc-s4); }
.nc-dialog-facts dt { color: var(--nc-ink-muted); } .nc-dialog-facts dd { margin: 0; font-weight: 600; text-align: right; }
.nc-dialog-foot { display: flex; justify-content: flex-end; gap: var(--nc-s2); padding: var(--nc-s4) var(--nc-s6) var(--nc-s5); }
.nc-dialog.nc-inline, .nc-toast.nc-inline { position: static; box-shadow: var(--nc-shadow-pop); }
.nc-toasts { position: fixed; right: var(--nc-s5); bottom: var(--nc-s5); z-index: 70; display: flex; flex-direction: column; gap: var(--nc-s2); }
.nc-toast { display: flex; align-items: flex-start; gap: var(--nc-s3); min-width: 280px; max-width: 400px; padding: var(--nc-s3) var(--nc-s4); background: var(--nc-chrome); color: #fff; border-radius: var(--nc-r-md); box-shadow: var(--nc-shadow-pop); font-size: var(--nc-text-sm); }
.nc-toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.nc-toast .nc-toast-action { margin-left: auto; color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.nc-toast.nc-toast-danger { background: var(--nc-danger-text); }
.nc-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: nc-spin 0.7s linear infinite; }
@keyframes nc-spin { to { transform: rotate(360deg); } }
.nc-btn[aria-busy="true"] { pointer-events: none; opacity: 0.8; }
.nc-skeleton { display: block; height: 12px; border-radius: var(--nc-r-sm); background: linear-gradient(90deg, var(--nc-border) 25%, var(--nc-surface-hover) 37%, var(--nc-border) 63%); background-size: 400% 100%; animation: nc-shimmer 1.4s ease infinite; }
@keyframes nc-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nc-spinner, .nc-skeleton { animation: none; } }

/* ---------- 17. SMALL SCREENS: the sidebar becomes a drawer ---------------- */
.nc-menu-btn { display: none; }
@media (max-width: 720px) {
  .nc-menu-btn { display: inline-flex; }
  .nc-search, .nc-user span:not(.nc-avatar) { display: none; }
  .nc-sidebar { display: block; position: fixed; z-index: 40; top: var(--nc-topbar-h); bottom: 0; left: 0; transform: translateX(-100%); transition: transform var(--nc-t); }
  .nc-sidebar[data-open] { transform: none; box-shadow: 0 0 0 100vmax rgba(14, 12, 40, 0.5); }
  .nc-page-head { flex-direction: column; }
  .nc-kpi-value { font-size: 24px; overflow-wrap: anywhere; }
  .nc-doc { padding: var(--nc-s4); } .nc-doc-head, .nc-doc-parties { flex-direction: column; grid-template-columns: minmax(0, 1fr); gap: var(--nc-s4); }
  .nc-card-head { flex-wrap: wrap; row-gap: var(--nc-s2); }
  .nc-table-foot { flex-direction: column; align-items: flex-start; gap: var(--nc-s2); }
  .nc-table .nc-stick { white-space: normal; min-width: 130px; max-width: 150px; }
  .nc-table td:has(> .nc-primary) { min-width: 150px; }
  .nc-dialog-foot { flex-direction: column-reverse; } .nc-dialog-foot .nc-btn { width: 100%; }
  .nc-toasts { left: var(--nc-s4); right: var(--nc-s4); } .nc-toast { min-width: 0; max-width: none; }
  .nc-filters .nc-field { max-width: none; flex-basis: 100%; }
}

/* ---------- 18. UTILITIES (so templates never need style="") --------------- */
.nc-text-xs { font-size: var(--nc-text-xs); } .nc-text-sm { font-size: var(--nc-text-sm); }
.nc-m0 { margin: 0; } .nc-mt-3 { margin-top: var(--nc-s3); } .nc-mt-4 { margin-top: var(--nc-s4); } .nc-mt-5 { margin-top: var(--nc-s5); } .nc-mb-4 { margin-bottom: var(--nc-s4); }
.nc-gap-2 { gap: var(--nc-s2); } .nc-gap-4 { gap: var(--nc-s4); }
.nc-block { display: block; } .nc-center { text-align: center; } .nc-grow { flex: 1; }
.nc-max-prose { max-width: 68ch; } .nc-page-sub { max-width: 80ch; } .nc-hint { max-width: 75ch; }
.nc-pre { margin: 0; padding: var(--nc-s3) var(--nc-s4); background: var(--nc-surface-muted); border-radius: var(--nc-r-md); font-family: var(--nc-font-mono); font-size: var(--nc-text-xs); white-space: pre-wrap; }
.nc-embed { height: 520px; display: flex; align-items: center; justify-content: center; background: var(--nc-surface-muted); color: var(--nc-ink-faint); font-size: var(--nc-text-sm); }
.nc-mb-3 { margin-bottom: var(--nc-s3); } .nc-mb-5 { margin-bottom: var(--nc-s5); } .nc-right { text-align: right; } .nc-left, .nc-table td.nc-left { text-align: left; }
.nc-pad-0 { padding: 0; } .nc-pad-6 { padding: var(--nc-s6); } .nc-pad-8 { padding: var(--nc-s8); }
.nc-w-date { width: 150px; } .nc-w-search { width: 420px; max-width: 100%; } .nc-w-form { max-width: 460px; } .nc-w-wide { max-width: none; } .nc-max-narrow { max-width: 48ch; margin-left: auto; margin-right: auto; }
.nc-brand-lg { font-size: 26px; } .nc-h1-sm { font-size: 22px; } .nc-regular { font-weight: 400; }
.nc-avatar.nc-avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.nc-icon-lg { width: 28px; height: 28px; display: block; margin: 0 auto 6px; }
.nc-kpi-icon.nc-kpi-icon-lg { width: 48px; height: 48px; margin-bottom: var(--nc-s3); } .nc-kpi-icon.nc-kpi-icon-lg svg { width: 24px; height: 24px; }
.nc-link-icon { width: 13px; height: 13px; vertical-align: -2px; }
.nc-btn-block { width: 100%; height: 40px; }
.nc-between { justify-content: space-between; align-items: center; }
.nc-meta-row { display: flex; flex-wrap: wrap; gap: var(--nc-s4); margin-top: var(--nc-s3); font-size: var(--nc-text-sm); color: var(--nc-ink-muted); }
/* public pages on the dark canvas */
.nc-canvas-dark.nc-canvas-top { align-items: flex-start; padding-top: var(--nc-s10); }
.nc-public-head { color: #fff; } .nc-public-head h1 { color: #fff; font-size: 26px; } .nc-public-head p { color: var(--nc-chrome-text-dim); margin: 4px 0 0; font-size: var(--nc-text-md); }
.nc-public-head .nc-brand-logo img { height: 56px; width: auto; max-width: 220px; }
.nc-auth .nc-card-body { padding: var(--nc-s8) var(--nc-s8) 28px; } .nc-auth .nc-brand { font-size: 26px; justify-content: center; margin-bottom: var(--nc-s2); }
.nc-auth-lead { text-align: center; font-size: var(--nc-text-sm); color: var(--nc-ink-muted); margin-bottom: var(--nc-s6); }
.nc-auth-foot { text-align: center; font-size: var(--nc-text-xs); color: var(--nc-chrome-text-dim); margin-top: var(--nc-s4); } .nc-auth-foot a { color: #fff; text-decoration: underline; }
.nc-span-all { grid-column: 1 / -1; }
.nc-brand.nc-brand-on-dark { color: #fff; font-size: 22px; }
.nc-state-word { margin-left: auto; font-size: var(--nc-text-xs); color: var(--nc-danger-text); display: inline-flex; align-items: center; gap: 4px; }
.nc-state-word svg { width: 12px; height: 12px; }
.nc-control-h { min-height: var(--nc-control-h); }
.nc-sk-60 { width: 60%; } .nc-sk-75 { width: 75%; } .nc-sk-90 { width: 90%; }
.nc-empty .nc-row { justify-content: center; }

/* ---------- 19. SCREEN PARTS (rule builder, account picker, component sheet) ---------- */
/* from 07-fee-rules */
.nc-rule { border: 1px solid var(--nc-border); border-radius: var(--nc-r-lg); background: var(--nc-surface); }
.nc-rule-head { display: flex; align-items: center; gap: var(--nc-s3); padding: var(--nc-s3) var(--nc-s4); border-bottom: 1px solid var(--nc-border); background: var(--nc-surface-muted); border-radius: var(--nc-r-lg) var(--nc-r-lg) 0 0; }
.nc-rule-head .nc-order { width: 24px; height: 24px; border-radius: 50%; background: var(--nc-accent-soft); color: var(--nc-accent-text); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nc-rule-head h2 { flex: 1; font-size: 14px; }
.nc-rule-body { padding: var(--nc-s4); }
.nc-rule-body .nc-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-rule-body .nc-form-grid .nc-span2 { grid-column: span 2; }
.nc-rule-help { grid-column: 1 / -1; padding: var(--nc-s2) var(--nc-s3); background: var(--nc-surface-muted); border-radius: var(--nc-r-md); font-size: 12px; color: var(--nc-ink-muted); }
/* from 09-affiliate-home */
.nc-accounts { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.nc-account-list { border-right: 1px solid var(--nc-border); padding: var(--nc-s2); display: flex; flex-direction: column; gap: 2px; }
.nc-account-item { display: flex; align-items: center; gap: var(--nc-s2); padding: 8px 10px; border-radius: var(--nc-r-md); font-size: 13px; color: var(--nc-ink); text-decoration: none; }
.nc-account-item:hover { background: var(--nc-surface-hover); text-decoration: none; }
.nc-account-item[aria-current="true"] { background: var(--nc-accent-soft); color: var(--nc-accent-text); font-weight: 600; }
/* from 12-components */
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sw div { border: 1px solid var(--nc-border); border-radius: var(--nc-r-md); overflow: hidden; font-size: 12px; }
.sw i { display: block; height: 44px; }
.sw span { display: block; padding: 6px 8px; }
.sw code { display: block; padding: 0 8px 6px; color: var(--nc-ink-faint); font-size: 11px; }
.demo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.type-row { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--nc-border); }
.type-row code { width: 220px; flex: none; color: var(--nc-ink-faint); }
.nc-state-icon { width: 14px; height: 14px; flex: none; } .nc-state-success { color: var(--nc-success-text); } .nc-state-danger { color: var(--nc-danger-text); }
@media (max-width: 720px) { .nc-rule-body .nc-form-grid { grid-template-columns: minmax(0, 1fr); } .nc-rule-body .nc-form-grid .nc-span2 { grid-column: auto; } .nc-accounts { grid-template-columns: minmax(0, 1fr); } .nc-account-list { border-right: 0; border-bottom: 1px solid var(--nc-border); } }
/* filters: four in view, the rest one click away */
.nc-filters-more { flex-basis: 100%; }
.nc-filters-more > summary { display: inline-flex; align-items: center; gap: var(--nc-s2); cursor: pointer; list-style: none; font-size: var(--nc-text-sm); font-weight: 600; color: var(--nc-accent-text); padding: 4px 0; border-radius: var(--nc-r-sm); }
.nc-filters-more > summary::-webkit-details-marker { display: none; }
.nc-filters-more > summary svg { width: 14px; height: 14px; }
.nc-filters-extra { display: flex; flex-wrap: wrap; gap: var(--nc-s3) var(--nc-s4); padding-top: var(--nc-s3); }
.nc-textarea.nc-invalid { border-color: var(--nc-danger-fill); } .nc-error-text { color: var(--nc-danger-text); }
/* phones: fingers need 44px, and a closed drawer must not be reachable by Tab */
@media (max-width: 720px) {
  :root { --nc-control-h: 44px; --nc-control-h-sm: 36px; }
  .nc-nav-item { min-height: 44px; } .nc-menu-btn { width: 44px; }
  .nc-sidebar { visibility: hidden; transition: transform var(--nc-t), visibility 0s linear var(--nc-t); }
  .nc-sidebar[data-open] { visibility: visible; transition: transform var(--nc-t); }
}
.nc-table tr.nc-selected .nc-stick, .nc-table tr.nc-selected .nc-stick-end { background: var(--nc-accent-soft); }
.nc-table-wrap.nc-wide .nc-table td.nc-wrap { white-space: normal; min-width: 220px; }   /* long free text is the one cell that may wrap */
.nc-error { display: flex; align-items: center; gap: 4px; } .nc-error svg { width: 12px; height: 12px; flex: none; }
.nc-error-list { margin: var(--nc-s2) 0 0; padding-left: var(--nc-s5); font-size: var(--nc-text-sm); } .nc-error-list a { color: var(--nc-danger-text); text-decoration: underline; }
.nc-input[aria-invalid="true"], .nc-select[aria-invalid="true"], .nc-textarea[aria-invalid="true"] { border-color: var(--nc-danger-fill); }
@media (max-width: 720px) { :root { --nc-control-h-sm: 44px; } }
.nc-toast button.nc-toast-action { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nc-toast-close { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; opacity: 0.8; } .nc-toast-close svg { width: 16px; height: 16px; margin: 0; }
.nc-progress { appearance: none; -webkit-appearance: none; width: 120px; height: 6px; border: 0; border-radius: 3px; background: var(--nc-border); overflow: hidden; vertical-align: middle; }
.nc-progress::-webkit-progress-bar { background: var(--nc-border); } .nc-progress::-webkit-progress-value { background: var(--nc-accent-fill); } .nc-progress::-moz-progress-bar { background: var(--nc-accent-fill); }
.nc-table .nc-activity { position: sticky; z-index: 2; background: var(--nc-surface); }
.nc-table thead .nc-activity { background: var(--nc-surface-muted); }
.nc-table tbody tr:hover .nc-activity { background: var(--nc-surface-hover); }
.nc-table tr.nc-selected .nc-activity { background: var(--nc-accent-soft); }
.nc-table-wrap.nc-wide .nc-table td.nc-activity { background-color: var(--nc-surface); }
.nc-table-wrap.nc-wide .nc-table thead th.nc-activity { background-color: var(--nc-surface-muted); }
.nc-table-wrap.nc-wide .nc-table tbody tr:hover td.nc-activity { background-color: var(--nc-surface-hover); }
.nc-act-tray { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 420px; max-width: calc(100vw - 32px); background: var(--nc-surface); color: var(--nc-ink); border-radius: var(--nc-r-lg); box-shadow: var(--nc-shadow-pop); }
.nc-act-tray [hidden] { display: none !important; }
.nc-act-tray.is-pill { width: auto; }
.nc-act-tray-head, .nc-act-tray-foot, .nc-act-pill { display: flex; align-items: center; gap: var(--nc-s2); padding: var(--nc-s3) var(--nc-s4); }
.nc-act-tray-head button { margin-left: auto; }
.nc-act-tray-list { max-height: 240px; overflow: auto; border-top: 1px solid var(--nc-border); }
.nc-act-tray.is-min .nc-act-tray-list, .nc-act-tray.is-min .nc-act-tray-foot { display: none; }
.nc-act-line { display: flex; align-items: flex-start; gap: var(--nc-s3); padding: 10px var(--nc-s4); }
.nc-act-line + .nc-act-line { border-top: 1px solid var(--nc-border); }
.nc-act-line.is-failed { background: var(--nc-danger-soft); }
.nc-act-who { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.nc-act-who strong, .nc-act-who .nc-faint { font-size: var(--nc-text-sm); }
.nc-act-reason { color: var(--nc-danger-text); font-size: var(--nc-text-sm); }
.nc-act-state { margin-left: auto; font-size: var(--nc-text-sm); font-weight: 600; white-space: nowrap; }
.nc-act-state.is-done, .nc-act-ico.is-done { color: var(--nc-success-text); }
.nc-act-state.is-pending, .nc-act-state.is-stopped, .nc-act-ico.is-stopped { color: var(--nc-ink-muted); }
.nc-act-state.is-failed, .nc-act-ico.is-failed, .nc-act-line.is-failed .nc-act-reason { color: var(--nc-danger-text); }
.nc-act-ico { width: 16px; margin-top: 2px; flex: none; display: inline-flex; }
.nc-act-ico .nc-spinner { color: var(--nc-ink-muted); }
.nc-act-tray-foot { border-top: 1px solid var(--nc-border); }
.nc-act-log { margin-left: auto; color: var(--nc-accent-text); font-size: var(--nc-text-sm); font-weight: 600; white-space: nowrap; }
.nc-act-pill { gap: var(--nc-s3); }
@media (max-width: 640px) { .nc-act-tray { left: 8px; right: 8px; width: auto; } .nc-act-tray.is-pill { left: auto; width: auto; } }

.nc-canvas-white { min-height: 100vh; background: #fff; display: flex; align-items: flex-start; justify-content: center; padding: 64px var(--nc-s4); }
.nc-canvas-white .nc-auth-foot { color: var(--nc-ink-muted); font-size: var(--nc-text-sm); }
.nc-canvas-white .nc-auth-foot a { color: var(--nc-accent-text); }
.nc-auth.nc-auth-wide { max-width: 460px; }
.nc-auth .nc-brand-logo img { height: 68px; width: auto; max-width: none; }
.nc-auth-wide h1 { text-align: center; font-size: 22px; }
.nc-auth-wide .nc-auth-lead { margin: 6px 0 var(--nc-s6); font-size: var(--nc-text-md); }
.nc-steps.nc-steps-col { grid-template-columns: 1fr; gap: var(--nc-s3); margin: 0 0 var(--nc-s6); padding: var(--nc-s4); background: var(--nc-surface-muted); border: 1px solid var(--nc-border); border-radius: var(--nc-r-md); }
.nc-steps-col .nc-step { align-items: center; font-size: var(--nc-text-md); color: var(--nc-ink); }
.nc-steps-col .nc-step strong { display: inline; }
.nc-auth-note { text-align: center; font-size: var(--nc-text-sm); color: var(--nc-ink-muted); margin: var(--nc-s4) 0 0; }
.nc-text-btn { display: inline; padding: 0; border: 0; background: none; color: var(--nc-accent-text); font: inherit; font-weight: 600; cursor: pointer; }
.nc-success-mark { display: flex; justify-content: center; margin-bottom: var(--nc-s3); }
.nc-success-mark svg { width: 52px; height: 52px; padding: 10px; border-radius: 50%; background: var(--nc-success-soft); color: var(--nc-success-text); }
.nc-auth-lead strong { color: var(--nc-ink); }
.nc-break { overflow-wrap: anywhere; }
.nc-next { padding: var(--nc-s5); background: var(--nc-surface-muted); border: 1px solid var(--nc-border); border-radius: var(--nc-r-md); }
.nc-next-label { display: block; font-size: var(--nc-text-xs); font-weight: 600; color: var(--nc-ink-muted); margin-bottom: 6px; }
.nc-next h2 { display: flex; align-items: center; gap: var(--nc-s2); font-size: var(--nc-text-lg); margin-bottom: var(--nc-s2); }
.nc-next h2 svg { width: 20px; height: 20px; color: var(--nc-accent-text); }
.nc-next p { margin: 0; font-size: var(--nc-text-md); color: var(--nc-ink); line-height: 1.5; }
.nc-center .nc-next { text-align: left; margin-top: var(--nc-s5); }
.nc-next .nc-btn { margin-top: var(--nc-s4); }
@media (min-width: 481px) {
  .nc-auth-wide .nc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nc-auth-wide .nc-form-grid .nc-span2 { grid-column: span 2; }
}
@media (max-width: 480px) {
  .nc-canvas-white { padding: 24px 16px; }
  .nc-auth .nc-card-body { padding: var(--nc-s6) var(--nc-s5); }
  .nc-auth-wide .nc-form-grid { grid-template-columns: 1fr; }
  .nc-auth-wide .nc-form-grid .nc-span2 { grid-column: auto; }
}