/* Northwind coded previews - scoped .nw-preview. tcc tokens + IBM Plex, icons via icon() helper. */
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-VariableFont.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
.nw-preview{
  /* ---- Ink / brand neutrals (dark sidebar, primary actions) ---- */
  --tcc-ink:            #1a1a1a; /* primary text, sidebar bg, primary button */
  --tcc-ink-2:          #171617; /* deepest near-black (welcome / brand seal) */
  --tcc-ink-hover:      #333333; /* primary button hover, avatar fill */
  --tcc-cream:          #f1ede4; /* brand cream — logo on dark seal */

  /* ---- Text ---- */
  --tcc-text-primary:   #1a1a1a;
  --tcc-text-secondary: #555555;
  --tcc-text-tertiary:  #666666;
  --tcc-text-muted:     #888888; /* dominant grey — labels, meta, captions */
  --tcc-text-faint:     #999999;
  --tcc-text-disabled:  #aaaaaa;
  --tcc-text-placeholder:#cccccc; /* chevrons, faint icons */

  /* ---- Surfaces ---- */
  --tcc-surface:        #ffffff; /* base / cards */
  --tcc-surface-page:   #f5f5f5; /* app background */
  --tcc-surface-subtle: #f9fafb; /* hovered rows, subtle panels */
  --tcc-surface-panel:  #f9f9f9; /* preview headers, panels */
  --tcc-surface-fill:   #f5f5f5; /* sku chips, neutral fills */
  --tcc-surface-fill-2: #f0f0f0; /* input-group suffix, customer badge */

  /* ---- Borders / dividers ---- */
  --tcc-border:         #e5e5e5; /* main divider / card border */
  --tcc-border-row:     #f0f0f0; /* table row divider (lighter) */
  --tcc-border-input:   #e0e0e0; /* form controls */
  --tcc-border-strong:  #dddddd;
  --tcc-border-strong-2:#d0d0d0;

  /* ---- Accent (green = positive, the platform brand colour) ---- */
  --tcc-accent:         #2e7d32;
  --tcc-accent-tint:    #e8f5e9;
  --tcc-success-btn:    #4caf50; /* solid success button */
  --tcc-success-btn-hover:#43a047;

  /* ---- Semantic status pairs (solid on tint) ---- */
  --tcc-positive:       #2e7d32; /* approved / paid / active / positive */
  --tcc-positive-tint:  #e8f5e9;
  --tcc-warning:        #e65100; /* pending / warning */
  --tcc-warning-tint:   #fff3e0;
  --tcc-info:           #1565c0; /* info / variable type */
  --tcc-info-tint:      #e3f2fd;
  --tcc-error:          #c62828; /* rejected / overdue / error */
  --tcc-error-tint:     #ffebee;
  --tcc-category:       #7b1fa2; /* category / agent tags */
  --tcc-category-tint:  #f3e5f5;
  --tcc-neutral:        #666666; /* draft / view-only */
  --tcc-neutral-tint:   #f5f5f5;

  /* ---- Extras ---- */
  --tcc-live:           #00d639; /* live indicator, Sage integration green */
  --tcc-warm-tint:      #fffde7; /* attention row highlight */
  --tcc-warm-tint-2:    #fffbf0;
  --tcc-error-row:      #fff5f5; /* error table row */
}
.nw-preview{
  /* ---- Families ----
     Deliberate override of the source: IBM Plex Sans for all UI text,
     IBM Plex Mono (tabular by nature) for every figure. System stacks are
     fallbacks only. */
  --tcc-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tcc-font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;

  /* ---- Dense size scale (px) ----
     9–11  meta / labels / nav-section titles
     12    workhorse — table cells, badges, hints (most common)
     13    body, button text, form labels
     14    table body, inputs, nav items
     15–16 emphasis / card titles
     18–28 headings
     48    hero stat number (rarely used) */
  --tcc-fs-9:  9px;
  --tcc-fs-10: 10px;
  --tcc-fs-11: 11px;
  --tcc-fs-12: 12px;
  --tcc-fs-13: 13px;
  --tcc-fs-14: 14px;
  --tcc-fs-15: 15px;
  --tcc-fs-16: 16px;
  --tcc-fs-18: 18px;
  --tcc-fs-20: 20px;
  --tcc-fs-22: 22px; /* page title (top-bar h1) */
  --tcc-fs-24: 24px;
  --tcc-fs-28: 28px; /* stat-card value */
  --tcc-fs-48: 48px; /* hero stat */

  /* ---- Weights ---- */
  --tcc-fw-regular:  400; /* @kind font */
  --tcc-fw-medium:   500; /* @kind font */ /* labels, status pills, nav items */
  --tcc-fw-semibold: 600; /* @kind font */ /* default heading / strong-label weight */
  --tcc-fw-bold:     700; /* @kind font */ /* stat values, totals */

  /* ---- Line height ---- */
  --tcc-lh-tight: 1.3; /* @kind font */ /* stacked meta (avatar name + role) */
  --tcc-lh-base:  1.5; /* @kind font */ /* body default */
  --tcc-lh-loose: 1.7; /* @kind font */ /* modal paragraphs */

  /* ---- Tracking ---- */
  --tcc-ls-label: 0.5px; /* table header uppercase */
  --tcc-ls-eyebrow: 1px; /* nav-section-title uppercase */
}
.nw-preview{
  /* ---- Spacing scale (px) ---- */
  --tcc-space-2:  2px;
  --tcc-space-3:  3px;
  --tcc-space-4:  4px;
  --tcc-space-5:  5px;
  --tcc-space-6:  6px;
  --tcc-space-8:  8px;
  --tcc-space-10: 10px;
  --tcc-space-12: 12px;
  --tcc-space-15: 15px; /* off-grid — card / section gap */
  --tcc-space-20: 20px;
  --tcc-space-25: 25px; /* off-grid — card body padding */
  --tcc-space-30: 30px; /* page-content padding, top-bar x-padding */

  /* Common composite paddings */
  --tcc-pad-pill:   2px 8px;   /* tiny tag */
  --tcc-pad-badge:  5px 10px;  /* status pill */
  --tcc-pad-btn:    10px 18px; /* button */
  --tcc-pad-btn-sm: 6px 12px;
  --tcc-pad-cell:   15px;      /* table cell */
  --tcc-pad-card:   25px;      /* card body */

  /* ---- Radius ---- */
  --tcc-radius-sm:  3px;  /* sku chip, tiny tag */
  --tcc-radius:     4px;  /* default — badges, customer chips */
  --tcc-radius-md:  6px;  /* status pill, small button */
  --tcc-radius-lg:  8px;  /* button, input, info-box */
  --tcc-radius-xl:  12px; /* card, stat-card */
  --tcc-radius-2xl: 16px; /* modal */
  --tcc-radius-pill:999px;/* fully-rounded chips */
  --tcc-radius-full:50%;  /* avatars, status dots, wizard steps */

  /* ---- Shadow (subtle only) ---- */
  --tcc-shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --tcc-shadow-md: 0 4px 12px rgba(0,0,0,0.1);

  /* ---- Layout ---- */
  --tcc-sidebar-w: 240px;
  --tcc-topbar-pad: 20px 30px; /* sticky top bar padding */

  /* ---- Motion ---- */
  --tcc-transition-fast: 0.15s; /* @kind other */
  --tcc-transition:      0.2s;  /* @kind other */
}

.nw-preview .nw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--tcc-font-sans);font-weight:600;font-size:13px;line-height:1;padding:9px 14px;border-radius:8px;border:1px solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none}
.nw-preview .nw-btn .nwi{width:15px;height:15px}
.nw-preview .nw-btn--primary{background:var(--tcc-ink);color:#fff}
.nw-preview .nw-btn--secondary{background:var(--tcc-surface);color:var(--tcc-text-primary);border-color:var(--tcc-border-strong)}
.nw-preview .nw-btn--sm{padding:6px 11px;font-size:12px}
.nw-preview .nw-btn--icon{padding:8px}
@media (hover:hover){.nw-preview .nw-btn--primary:hover{background:var(--tcc-ink-hover)}.nw-preview .nw-btn--secondary:hover{background:var(--tcc-surface-fill)}}
.nw-preview .nwi{display:inline-flex;flex:none;align-items:center;justify-content:center;vertical-align:middle}
.nw-preview .nwi svg{width:100%;height:100%;display:block}
.nw-preview .nw-imgslot{background:var(--tcc-surface-fill);border:1px solid var(--tcc-border);border-radius:8px}
.nw-preview{background:transparent;display:block;width:100%}
.nw-fit{position:relative;width:100%;overflow:hidden}
.nw-canvas{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--nw-scale,1))}
@media (prefers-reduced-motion:reduce){.nw-preview *{transition:none!important;animation:none!important}}
/* ---- per-preview inline styles (box-sizing, nav hover, screen-specific rules) - restored from design sources ---- */
/* from Agent_Detail_-_Desktop_dc.html */
.nw-preview .ss-root *, .nw-preview .ss-root *::before, .nw-preview .ss-root *::after{ box-sizing: border-box; }
.nw-preview .ss-root{ margin: 0; }
.nw-preview .ss-nav-item:hover{ background: rgba(255,255,255,0.06); color: #fff; }
/* from Agent_Detail_-_Mobile_dc.html */
.nw-preview .ssm-root *, .nw-preview .ssm-root *::before, .nw-preview .ssm-root *::after{ box-sizing: border-box; }
/* from Reporting_-_Desktop_dc.html */
.nw-preview .ss-root *, .nw-preview .ss-root *::before, .nw-preview .ss-root *::after{ box-sizing: border-box; }
.nw-preview .ss-root{ margin: 0; }
.nw-preview .ss-nav-item:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.nw-preview .ss-tab:hover{ color: var(--tcc-text-primary); }
.nw-preview .ss-scroll::-webkit-scrollbar{ width: 10px; }
.nw-preview .ss-scroll::-webkit-scrollbar-thumb{ background: #d8d8d8; border-radius: 8px; border: 3px solid var(--tcc-surface-page); }
.nw-preview .ss-row:hover{ background: var(--tcc-surface-subtle); }
.nw-preview .ss-qa:hover{ border-color: var(--tcc-ink); background: var(--tcc-surface-subtle); }
/* from Reporting_-_Mobile_dc.html */
.nw-preview .ssm-root *, .nw-preview .ssm-root *::before, .nw-preview .ssm-root *::after{ box-sizing: border-box; }
.nw-preview .ssm-tabstrip::-webkit-scrollbar{ display: none; }
.nw-preview .ssm-tabstrip{ -ms-overflow-style: none; scrollbar-width: none; }
.nw-preview .ssm-scroll::-webkit-scrollbar{ width: 0; }
/* from Retailer_Detail_-_Desktop_dc.html */
.nw-preview .ss-root *, .nw-preview .ss-root *::before, .nw-preview .ss-root *::after{ box-sizing: border-box; }
.nw-preview .ss-root{ margin: 0; }
.nw-preview .ss-nav-item:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.nw-preview .ss-input, .nw-preview .ss-select, .nw-preview .ss-area{ width:100%; padding:9px 12px; border:1px solid var(--tcc-border); border-radius:8px; font-size:13px; font-family:var(--tcc-font-sans); color:var(--tcc-text-primary); background:var(--tcc-surface); }
.nw-preview .ss-input:focus, .nw-preview .ss-select:focus, .nw-preview .ss-area:focus{ border-color:var(--tcc-ink); outline:none; }
.nw-preview .ss-area{ resize:vertical; min-height:64px; line-height:1.5; }
.nw-preview .ss-scroll::-webkit-scrollbar{ width: 10px; }
.nw-preview .ss-scroll::-webkit-scrollbar-thumb{ background: #d8d8d8; border-radius: 8px; border: 3px solid var(--tcc-surface-page); }
.nw-preview .ss-row:hover{ background: var(--tcc-surface-subtle); }
/* from Retailer_Detail_-_Mobile_dc.html */
.nw-preview .ssm-root *, .nw-preview .ssm-root *::before, .nw-preview .ssm-root *::after{ box-sizing: border-box; }
.nw-preview .ssm-input, .nw-preview .ssm-select, .nw-preview .ssm-area{ width:100%; padding:9px 11px; border:1px solid var(--tcc-border); border-radius:8px; font-size:13px; font-family:var(--tcc-font-sans); color:var(--tcc-text-primary); background:var(--tcc-surface); }
.nw-preview .ssm-input:focus, .nw-preview .ssm-select:focus, .nw-preview .ssm-area:focus{ border-color:var(--tcc-ink); outline:none; }
.nw-preview .ssm-area{ resize:vertical; min-height:62px; line-height:1.5; }
.nw-preview .ssm-scroll::-webkit-scrollbar{ width: 0; }

/* ---- tabs and collapsible sections (ported from design logic) ---- */
.nw-preview .nw-tab{color:#888;border-bottom:2px solid transparent}
.nw-preview .nw-tab.is-active{color:#1a1a1a;border-bottom-color:#1a1a1a}
.nw-preview .nw-chev{transform:rotate(0deg)}
.nw-preview [data-nw-acc].is-open .nw-chev{transform:rotate(180deg)}
.nw-preview [data-nw-tab]{cursor:pointer}

/* ---- Isolate previews from host global.css element selectors ----
   global.css styles bare header{position:fixed}, footer, button, a, img etc.
   Those leak into the mockups' semantic tags. Reset them here; the mockups'
   own inline styles and .ss-* classes are more specific and still win. */
.nw-preview header, .nw-preview footer, .nw-preview nav,
.nw-preview aside, .nw-preview main, .nw-preview section, .nw-preview article {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}
.nw-preview header::before, .nw-preview header::after,
.nw-preview footer::before, .nw-preview footer::after { content: none; }
.nw-preview input, .nw-preview select, .nw-preview textarea {
  font: inherit; color: inherit; background: none; border: 0;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
}
.nw-preview img { max-width: none; }