/* ═══════════════════════════════════════════════════════════════════
   AmazonTool — Design System  |  2026-05-16
   Structure: tokens → reset → shell → nav → typography → cards →
              buttons → forms → tables → badges → overlays → utils
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Surface */
  --bg-page:    #f4f7fb;
  --bg-surface: #ffffff;
  --bg-panel:   #f8fafc;
  --bg-raised:  #ffffff;

  /* Text */
  --text-strong: #0f172a;
  --text-main:   #1e293b;
  --text-muted:  #64748b;
  --text-xmuted: #94a3b8;

  /* Lines */
  --line-soft:   #e2e8f0;
  --line-strong: #cbd5e1;

  /* Brand */
  --brand-navy:       #0f223d;
  --brand-blue:       #153a63;
  --brand-amber:      #ff9900;
  --brand-amber-deep: #e78300;
  --brand-amber-soft: #fff2db;
  --brand-amber-pale: rgba(255,153,0,.10);

  /* Semantic */
  --success:     #059669;
  --success-bg:  #ecfdf5;
  --success-line:#6ee7b7;
  --warning:     #d97706;
  --warning-bg:  #fffbeb;
  --warning-line:#fcd34d;
  --danger:      #dc2626;
  --danger-bg:   #fef2f2;
  --danger-line: #fca5a5;
  --info:        #2563eb;
  --info-bg:     #eff6ff;
  --info-line:   #93c5fd;

  /* Data-source chips */
  --chip-api-bg:    #e0f2fe;
  --chip-api-text:  #075985;
  --chip-batch-bg:  #fff7ed;
  --chip-batch-text:#9a3412;
  --chip-manual-bg: #f3e8ff;
  --chip-manual-text:#6b21a8;

  /* Risk */
  --risk-critical-bg:   #fef2f2;
  --risk-critical-text: #991b1b;
  --risk-urgent-bg:     #fff7ed;
  --risk-urgent-text:   #9a3412;
  --risk-warning-bg:    #fffbeb;
  --risk-warning-text:  #92400e;
  --risk-ok-bg:         #ecfdf5;
  --risk-ok-text:       #065f46;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Shadow */
  --shadow-card: 0 2px 8px rgba(0,0,0,.05);
  --shadow-drop: 0 16px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.07);
  --shadow-modal:0 32px 80px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.10);

  /* Motion */
  --dur-fast: 120ms;
  --dur-med:  180ms;
  --dur-slow: 240ms;
  --ease:     cubic-bezier(.4,0,.2,1);

  /* Nav height — referenced by body padding */
  --nav-h: 60px;

  /* ── Readable font scale (base 16px) ── */
  --fs-2xs:  .72rem;   /* 11.5px — minimum for labels/badges */
  --fs-xs:   .78rem;   /* 12.5px — secondary info */
  --fs-sm:   .85rem;   /* 13.6px — table cells, meta */
  --fs-md:   .92rem;   /* 14.7px — body text, nav */
  --fs-lg:   1rem;     /* 16px   — headings, card titles */
  --fs-xl:   1.1rem;   /* 17.6px — section titles */
  --fs-2xl:  1.35rem;  /* 21.6px — page titles */
  --fs-kpi:  1.6rem;   /* 25.6px — KPI values */
}

/* ─────────────────────────────────────────────────────────────────
   2. RESET / BASE
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Be Vietnam Pro", "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg-page);
  color: var(--text-main);
  padding-top: calc(var(--nav-h) + 4px);
  margin: 0;
}

/* Bootstrap 3 in this repo contains a bad global rule:
   button, input, select, textarea { margin: 0 181px 0 0; }
   Reset it here so popup close buttons and form controls do not shift. */
button, input, select, textarea {
  margin: 0 !important;
  font-family: inherit;
  font-size: inherit;
}

/* Close buttons inside overlays/modals must not inherit browser/button chrome
   or bootstrap spacing rules that can offset the icon. */
button[class*="modal-close"],
button.img-popup-close,
button.az-modal-close {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  line-height: 1 !important;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
form { margin: 0; }
img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────
   3. LAYOUT SHELL
   ───────────────────────────────────────────────────────────────── */
.az-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.body-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* Grid */
.az-grid { display: grid; gap: 14px; }
.az-g1   { grid-template-columns: 1fr; }
.az-g2   { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.az-g3   { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
.az-g4   { grid-template-columns: repeat(auto-fill, minmax(165px,1fr)); }
.az-g6   { grid-template-columns: repeat(6,1fr); }
.az-span { grid-column: 1 / -1; }
.az-col-2-1 { grid-template-columns: 2fr 1fr; }

/* ─────────────────────────────────────────────────────────────────
   4. NAVIGATION
   ───────────────────────────────────────────────────────────────── */
.az-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: linear-gradient(90deg, var(--brand-navy) 0%, #121a2b 50%, var(--brand-navy) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 24px rgba(0,0,0,.20);
}
.az-nav-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex; align-items: center; gap: 10px;
}

/* Brand */
.az-nav-brand {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; margin-right: 6px;
  text-decoration: none !important; color: #fff;
  font-size: .95rem; font-weight: 800; letter-spacing: -.3px;
}
.az-nav-brand .nb-logo { width: 28px; height: 28px; flex-shrink: 0; }
.az-nav-brand .nb-accent { color: var(--brand-amber); }
.az-nav-brand:hover { color: #fff; }

/* Links wrap */
.az-nav-links-wrap {
  display: flex; align-items: center;
  flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
}

/* Links list */
.az-nav-links {
  display: flex; list-style: none; margin: 0;
  padding: 4px 40px 4px 4px;
  gap: 2px; align-items: center;
  flex: 0 1 auto; max-width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-full);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.az-nav-links::-webkit-scrollbar { display: none; }
.az-nav-links > li { position: static; list-style: none; flex: 0 0 auto; }

/* Nav items */
.az-nav-links > li > a,
.az-drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r-full);
  font-size: .88rem; font-weight: 600; font-family: inherit;
  color: rgba(255,255,255,.78); text-decoration: none !important;
  background: transparent; border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap; line-height: 1.4;
}
.az-nav-links > li > a:hover,
.az-drop-btn:hover,
.az-drop-btn.az-drop-open,
.az-nav-links > li.az-nav-active > a,
.az-nav-links > li.az-nav-active > .az-drop-btn {
  background: rgba(255,153,0,.15);
  color: #FFB44D;
}
.az-nav-links > li.az-nav-active > a,
.az-nav-links > li.az-nav-active > .az-drop-btn {
  font-weight: 700;
}

/* Chevron */
.az-chev {
  width: 12px; height: 12px; stroke: currentColor; fill: none;
  transition: transform var(--dur-med); flex-shrink: 0;
}
.az-drop-btn.az-drop-open .az-chev { transform: rotate(180deg); }

/* Scroll hint */
.az-nav-scrollhint {
  display: none; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent 0%, rgba(11,18,32,.7) 45%, rgba(11,18,32,.95) 100%);
  color: rgba(255,255,255,.85); font-size: 16px; font-weight: 800;
  align-items: center; justify-content: flex-end; padding-right: 8px;
  cursor: pointer; user-select: none;
}
.az-nav-scrollhint:hover { color: #FFB44D; }

/* Dropdown panel */
.az-drop {
  display: none; position: fixed;
  min-width: 240px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-drop);
  border: 1px solid var(--line-soft);
  padding: 6px 0;
  z-index: 9999;
  animation: nb-drop-in var(--dur-fast) var(--ease) both;
}
.az-drop::-webkit-scrollbar { width: 8px; }
.az-drop::-webkit-scrollbar-track { background: transparent; }
.az-drop::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-surface);
}
.az-drop::-webkit-scrollbar-thumb:hover { background: var(--text-xmuted); }
@keyframes nb-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.az-drop a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-size: .9rem; font-weight: 500;
  color: var(--text-main); text-decoration: none !important;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.az-drop a:hover { background: var(--brand-amber-soft); color: var(--brand-amber-deep); }
.az-drop-hdr {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-xmuted); padding: 10px 18px 4px;
}
.az-drop-div { height: 1px; background: var(--line-soft); margin: 5px 0; }

/* Featured item */
.az-drop-feat {
  margin: 5px 7px 2px !important; border-radius: var(--r-md) !important;
  padding: 9px 12px !important;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%) !important;
  color: var(--brand-amber) !important; font-weight: 700 !important;
}
.az-drop-feat:hover {
  background: linear-gradient(135deg, var(--brand-blue), #1e3a5f) !important;
  color: #ffd166 !important;
}

/* Badge in dropdown */
.az-drop-badge {
  margin-left: auto;
  background: var(--brand-amber); color: var(--brand-navy);
  font-size: .58rem; font-weight: 800; padding: 2px 7px;
  border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0;
}

/* Alert count bubble */
.az-nav-alert-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--danger); color: #fff;
  font-size: .6rem; font-weight: 800; border-radius: var(--r-full);
  margin-left: 2px; flex-shrink: 0; line-height: 1;
}

/* Right side */
.az-nav-right {
  margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding-left: 10px;
}
.az-nav-right a {
  color: rgba(255,255,255,.72); font-size: .8rem; text-decoration: none !important;
  padding: 5px 11px; border-radius: var(--r-sm);
  transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap;
}
.az-nav-right a:hover { background: var(--brand-amber-pale); color: #FFB44D; }
.az-nav-logoff a {
  border: 1px solid rgba(255,255,255,.18);
  padding: 5px 12px !important; font-size: .78rem !important;
  color: rgba(255,255,255,.55) !important;
}
.az-nav-logoff a:hover {
  border-color: #FFB44D !important; color: #FFB44D !important;
  background: var(--brand-amber-pale) !important;
}

/* Mobile toggle */
.az-nav-toggle {
  display: none; background: transparent;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
  color: rgba(255,255,255,.82); padding: 7px 10px;
  cursor: pointer; line-height: 1;
  transition: border-color var(--dur-fast), color var(--dur-fast); margin-left: auto;
}
.az-nav-toggle:hover { border-color: var(--brand-amber); color: var(--brand-amber); }

/* ─────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */
.az-page-title  { font-size: 1.5rem; font-weight: 700; color: var(--text-strong); line-height: 1.25; margin: 0; }
.az-page-sub    { font-size: .9rem; color: var(--text-muted); margin: 4px 0 0; }
.az-section-ttl { font-size: .95rem; font-weight: 700; color: var(--text-strong); margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--brand-amber); }
.az-label       { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.az-meta        { font-size: .82rem; color: var(--text-xmuted); }
.az-info        { font-size: .88rem; color: var(--text-muted); }
.az-msg         { font-size: .92rem; font-weight: 600; display: block; margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────────
   6. PAGE HEADER (az-header-*)
   ───────────────────────────────────────────────────────────────── */
.az-page-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.az-page-hdr-icon {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--brand-amber-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.az-page-hdr-body { flex: 1; min-width: 0; }
.az-page-hdr-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Legacy header (gradient) — kept for pages using it */
.az-header {
  background: linear-gradient(135deg, var(--brand-navy) 0%, #16213e 55%, var(--brand-blue) 100%);
  color: #fff; padding: 20px 24px; border-radius: var(--r-lg);
  margin: 16px 0 20px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
}
.az-header::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,153,0,.15) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.az-header-icon  { font-size: 1.6rem; flex-shrink: 0; z-index: 1; }
.az-header-body  { z-index: 1; }
.az-header-title {
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
  margin: 0 0 2px;
  line-height: 1.28;
}
.az-header-sub {
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: .8rem;
  color: rgba(255,255,255,.62);
  letter-spacing: 0;
  margin: 0;
}
.az-header-badge {
  margin-left: auto; z-index: 1;
  background: rgba(255,153,0,.18); border: 1px solid rgba(255,153,0,.35);
  color: var(--brand-amber); font-size: .65rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-full);
  text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
}
.az-header .az-primary {
  background: var(--brand-amber) !important;
  color: var(--brand-navy) !important;
  border-color: var(--brand-amber) !important;
}
.az-header .az-secondary,
.az-header .az-btn-outline {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.az-header .az-secondary:hover,
.az-header .az-btn-outline:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.38) !important;
}
.az-header .az-chip,
.az-header .az-chip-api,
.az-header .az-chip-batch,
.az-header .az-chip-manual {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. CARDS
   ───────────────────────────────────────────────────────────────── */
.az-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.az-card + .az-card { margin-top: 14px; }
.az-card-title {
  font-size: .88rem; font-weight: 700; color: var(--text-strong);
  margin: 0 0 14px; padding-left: 9px;
  border-left: 3px solid var(--brand-amber); display: block;
}
.az-card-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* KPI / Metric cards */
.az-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.az-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: box-shadow var(--dur-fast);
}
.az-kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.az-kpi-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 5px; }
.az-kpi-val { font-size: 1.55rem; font-weight: 800; color: var(--text-strong); line-height: 1.1; }
.az-kpi-sub { font-size: .75rem; color: var(--text-xmuted); margin-top: 4px; }
.az-kpi.good   { border-color: var(--success-line); background: var(--success-bg); }
.az-kpi.good   .az-kpi-val { color: var(--success); }
.az-kpi.warn   { border-color: var(--warning-line); background: var(--warning-bg); }
.az-kpi.warn   .az-kpi-val { color: var(--warning); }
.az-kpi.danger { border-color: var(--danger-line); background: var(--danger-bg); }
.az-kpi.danger .az-kpi-val { color: var(--danger); }
.az-kpi.info   { border-color: var(--info-line); background: var(--info-bg); }
.az-kpi.info   .az-kpi-val { color: var(--info); }

/* Legacy aliases used by Default.aspx.cs code-behind */
.az-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.az-metric  { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-card); text-align: center; }
.az-metric-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 5px; display: block; }
.az-metric-val { font-size: 1.4rem; font-weight: 800; color: var(--text-strong); display: block; line-height: 1.1; }
.az-metric-sub { font-size: .75rem; color: var(--text-xmuted); margin-top: 4px; display: block; }
.az-metric.good   { border-color: var(--success-line); background: var(--success-bg); }
.az-metric.good   .az-metric-val { color: var(--success); }
.az-metric.warn   { border-color: var(--warning-line); background: var(--warning-bg); }
.az-metric.warn   .az-metric-val { color: var(--warning); }
.az-metric.danger { border-color: var(--danger-line); background: var(--danger-bg); }
.az-metric.danger .az-metric-val { color: var(--danger); }
.az-metric.info   { border-color: var(--info-line); background: var(--info-bg); }
.az-metric.info   .az-metric-val { color: var(--info); }

/* Insight / alert card */
.az-insight {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border-left: 4px solid transparent;
  background: var(--bg-panel);
  font-size: .84rem;
  line-height: 1.5;
}
.az-insight.critical { border-color: var(--danger); background: var(--danger-bg); }
.az-insight.high     { border-color: var(--warning); background: var(--warning-bg); }
.az-insight.medium   { border-color: var(--brand-amber); background: var(--brand-amber-soft); }
.az-insight.info     { border-color: var(--info); background: var(--info-bg); }
.az-insight.success  { border-color: var(--success); background: var(--success-bg); }
.az-insight-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.az-insight-body { flex: 1; min-width: 0; }
.az-insight-title{ font-weight: 700; color: var(--text-strong); }
.az-insight-msg  { color: var(--text-muted); font-size: .8rem; }

/* ─────────────────────────────────────────────────────────────────
   8. BUTTONS
   ───────────────────────────────────────────────────────────────── */
.az-btn {
  display: inline-flex !important; align-items: center !important; gap: 6px;
  padding: 9px 20px !important;
  border-radius: var(--r-md) !important;
  font-size: .9rem !important; font-weight: 600 !important; font-family: inherit !important;
  cursor: pointer !important; border: none !important;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap; text-decoration: none !important;
  line-height: 1.4 !important; vertical-align: middle;
}
/* Primary */
.az-primary         { background: var(--brand-amber) !important; color: var(--brand-navy) !important; }
.az-primary:hover   { background: var(--brand-amber-deep) !important; }
/* Secondary */
.az-secondary       { background: var(--bg-panel) !important; color: var(--text-main) !important; border: 1px solid var(--line-strong) !important; }
.az-secondary:hover { background: var(--line-soft) !important; }
/* Success */
.az-success         { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid var(--success-line) !important; }
.az-success:hover   { background: #a7f3d0 !important; }
/* Danger */
.az-danger          { background: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid var(--danger-line) !important; }
.az-danger:hover    { background: #fecaca !important; }
/* Ghost */
.az-ghost           { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--line-strong) !important; }
.az-ghost:hover     { background: var(--bg-panel) !important; color: var(--text-main) !important; }
/* Sizes */
.az-btn-sm  { padding: 6px 14px !important; font-size: .82rem !important; }
.az-btn-lg  { padding: 12px 26px !important; font-size: .96rem !important; }
/* States */
.az-btn[disabled], .az-btn:disabled { opacity: .45; cursor: not-allowed !important; }

/* Action bar */
.az-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ─────────────────────────────────────────────────────────────────
   9. FORMS
   ───────────────────────────────────────────────────────────────── */
select, .mp-select {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: .9rem; font-family: inherit;
  color: var(--text-main);
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-sizing: border-box; max-width: 100%;
}
select:focus, .mp-select:focus {
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 3px rgba(255,153,0,.14);
  outline: none;
}
select:hover, .mp-select:hover { border-color: var(--line-strong); }

/* Form group */
.az-fg { display: flex !important; flex-direction: column !important; gap: 4px; }
.az-fg > label {
  display: block !important; float: none !important; width: auto !important;
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
.az-fg input[type=text],
.az-fg input[type=date],
.az-fg input[type=datetime-local],
.az-fg input[type=number],
.az-fg textarea,
.az-fg select {
  display: block !important; float: none !important;
  padding: 9px 13px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  font-size: .92rem !important; font-family: inherit !important;
  color: var(--text-main) !important; background: var(--bg-surface) !important;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100% !important; max-width: 100% !important;
  box-sizing: border-box !important;
}
.az-fg input:focus,
.az-fg textarea:focus,
.az-fg select:focus {
  border-color: var(--brand-amber) !important;
  box-shadow: 0 0 0 3px rgba(255,153,0,.13) !important;
  outline: none !important;
}
.az-fg input[readonly], .az-fg textarea[readonly] {
  background: var(--bg-panel) !important; color: var(--text-muted) !important;
}
.az-fg .az-calc, .az-fg input.az-calc { background: var(--success-bg) !important; color: var(--success) !important; font-weight: 600 !important; border-color: var(--success-line) !important; }
.az-fg .az-key-input { background: var(--warning-bg) !important; border-color: var(--warning-line) !important; }
.az-fg .az-hint { font-size: .78rem; color: var(--text-xmuted); line-height: 1.4; }
.az-fg.az-req > label::after { content: ' *'; color: var(--danger); }

/* File zone */
.az-file-zone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--bg-panel);
  transition: border-color var(--dur-med);
}
.az-file-zone:hover { border-color: var(--brand-amber); }
.az-file-zone > label {
  display: block; font-size: .7rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 8px;
}

/* Toolbar */
.az-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg-surface);
}
.az-tbar-title { font-size: .9rem; font-weight: 700; color: var(--text-strong); margin-right: auto; }

/* ─────────────────────────────────────────────────────────────────
   10. TABLES  — Bootstrap 3 border reset + custom table styles
   ───────────────────────────────────────────────────────────────── */

/* ── Kill Bootstrap 3 default dark table borders globally ── */
table { border: 0 !important; }
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td { border-top: 1px solid var(--line-soft) !important; border-color: var(--line-soft) !important; }
table > thead > tr > th { border-bottom: 1px solid var(--line-soft) !important; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td { border-color: var(--line-soft) !important; }
.table > tbody + tbody { border-top: 1px solid var(--line-soft) !important; }

.az-tbl-wrap { overflow: auto; }
.az-tbl {
  width: 100%;
  border-collapse: separate !important; border-spacing: 0 !important;
  font-size: .88rem; font-family: inherit;
}
.az-tbl th {
  position: sticky; top: 0;
  background: var(--bg-panel) !important;
  color: var(--text-muted) !important;
  font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .4px;
  text-align: left; padding: 11px 14px;
  border-bottom: 2px solid var(--line-soft) !important; z-index: 2; white-space: nowrap;
  border-top: 0 !important;
}
.az-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft) !important;
  border-top: 0 !important;
  vertical-align: middle; color: var(--text-main);
}
.az-tbl tbody tr:hover td { background: var(--brand-amber-soft) !important; }
.az-tbl a { color: var(--info); text-decoration: none; }
.az-tbl a:hover { text-decoration: underline; }
.td-r { text-align: right !important; }
.td-mono { font-family: monospace; font-size: .8rem; }

/* Row states */
.row-danger td { background: var(--danger-bg) !important; }
.row-warn   td { background: var(--warning-bg) !important; }
.row-ok     td { background: var(--success-bg) !important; }

/* Legacy section heading — used extensively by Default.aspx.cs code-behind */
.section-heading {
  font-size: 1rem; font-weight: 700; color: var(--text-strong);
  margin: 28px 0 14px; padding-left: 12px;
  border-left: 4px solid var(--brand-amber);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Inventory badges — used by RenderInventoryKpi / RenderReorderAlert */
.inv-badge-danger { background: var(--danger-bg); color: var(--danger); padding: 2px 8px; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; }
.inv-badge-warn   { background: var(--warning-bg); color: var(--warning); padding: 2px 8px; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; }

/* Pager */
.az-tbl .pager td { padding: 8px 0; text-align: center; }
.az-tbl .pager a {
  margin: 0 2px; padding: 4px 10px; border-radius: var(--r-sm);
  font-size: .78rem; background: var(--info-bg); color: var(--text-main);
  text-decoration: none; border: 1px solid var(--line-strong); display: inline-block;
}
.az-tbl .pager span {
  margin: 0 2px; padding: 4px 10px; border-radius: var(--r-sm);
  font-size: .78rem; background: var(--brand-amber); color: var(--brand-navy);
  font-weight: 700; display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────
   11. BADGES / CHIPS / STATUS
   ───────────────────────────────────────────────────────────────── */
/* Generic badge */
.az-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap; flex-shrink: 0;
}
.az-badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); }
.az-badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-line); }
.az-badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-line); }
.az-badge-info    { background: var(--info-bg);     color: var(--info);    border: 1px solid var(--info-line); }
.az-badge-muted   { background: var(--bg-panel);    color: var(--text-muted); border: 1px solid var(--line-strong); }
.az-badge-amber   { background: var(--brand-amber-soft); color: var(--brand-amber-deep); border: 1px solid var(--brand-amber); }

/* Source chips */
.az-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: .65rem; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}
.az-chip-api    { background: var(--chip-api-bg);    color: var(--chip-api-text); }
.az-chip-batch  { background: var(--chip-batch-bg);  color: var(--chip-batch-text); }
.az-chip-manual { background: var(--chip-manual-bg); color: var(--chip-manual-text); }

/* Risk badges */
.az-risk-critical { background: var(--risk-critical-bg); color: var(--risk-critical-text); padding: 2px 9px; border-radius: var(--r-full); font-size: .68rem; font-weight: 700; }
.az-risk-urgent   { background: var(--risk-urgent-bg);   color: var(--risk-urgent-text);   padding: 2px 9px; border-radius: var(--r-full); font-size: .68rem; font-weight: 700; }
.az-risk-warning  { background: var(--risk-warning-bg);  color: var(--risk-warning-text);  padding: 2px 9px; border-radius: var(--r-full); font-size: .68rem; font-weight: 700; }
.az-risk-ok       { background: var(--risk-ok-bg);       color: var(--risk-ok-text);       padding: 2px 9px; border-radius: var(--r-full); font-size: .68rem; font-weight: 700; }

/* Severity */
.sev-critical { color: var(--danger);  font-weight: 700; }
.sev-high     { color: var(--warning); font-weight: 700; }
.sev-medium   { color: var(--brand-amber-deep); }
.sev-low      { color: var(--text-muted); }

/* Status */
.status-new        { background: var(--info-bg);    color: var(--info);    padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }
.status-open       { background: var(--info-bg);    color: var(--info);    padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }
.status-seen       { background: var(--bg-panel);   color: var(--text-muted); padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }
.status-ack        { background: var(--warning-bg); color: var(--warning); padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }
.status-resolved   { background: var(--success-bg); color: var(--success); padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }
.status-critical   { background: var(--danger-bg);  color: var(--danger);  padding: 2px 8px; border-radius: var(--r-full); font-size: .65rem; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────
   12. OVERLAYS / MODAL
   ───────────────────────────────────────────────────────────────── */
.az-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(15,34,61,.6); z-index: 9999;
  backdrop-filter: blur(3px);
}
.az-ov-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.az-sp {
  width: 46px; height: 46px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: var(--brand-amber);
  border-radius: 50%;
  animation: az-spin .8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes az-spin { to { transform: rotate(360deg); } }
.az-sp-txt { color: #fff; font-size: .84rem; font-weight: 500; }

/* Modal */
.az-modal-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 9980;
  background: rgba(10,18,36,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.az-modal-overlay.az-modal-open { opacity: 1; }
.az-modal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  transition: transform var(--dur-slow) cubic-bezier(.34,1.28,.64,1);
  width: 96%; max-width: 960px; max-height: 88vh;
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.az-modal-overlay.az-modal-open .az-modal { transform: translate(-50%,-50%); }
.az-modal-hdr {
  padding: 14px 48px 14px 18px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
}
.az-modal-icon {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.az-modal-hdr-body { flex: 1; min-width: 0; }
.az-modal-title  { font-size: .9rem; font-weight: 800; color: #fff; line-height: 1.2; }
.az-modal-sub    { font-size: .66rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.az-modal-close {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 28px; height: 28px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; color: #fff; font-size: .8rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast); flex-shrink: 0;
}
.az-modal-close:hover { background: rgba(255,255,255,.25); }
.az-modal-body  { overflow-y: auto; flex: 1; padding: 16px; background: var(--bg-panel); }
.az-modal-foot  {
  padding: 10px 16px; border-top: 1px solid var(--line-soft);
  background: var(--bg-surface);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; gap: 10px;
}
.az-modal-foot-txt  { font-size: .72rem; color: var(--text-muted); }
.az-modal-foot-link {
  font-size: .76rem; font-weight: 700; text-decoration: none;
  padding: 6px 13px; border: 1px solid; border-radius: var(--r-md);
  transition: all var(--dur-fast); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.az-modal-empty       { text-align: center; padding: 40px 20px; color: var(--text-xmuted); font-size: .84rem; }
.az-modal-empty-icon  { font-size: 2rem; margin-bottom: 8px; display: block; }

/* Empty state */
.az-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px;
  color: var(--text-muted); text-align: center; gap: 8px;
}
.az-empty-icon  { font-size: 2.4rem; }
.az-empty-title { font-size: .9rem; font-weight: 600; color: var(--text-strong); }
.az-empty-msg   { font-size: .82rem; color: var(--text-muted); max-width: 320px; line-height: 1.5; }

/* Toast */
.az-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  padding: 11px 18px; border-radius: var(--r-md);
  font-size: .82rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  display: none; max-width: 340px; line-height: 1.5;
}
.az-toast.az-toast-show { display: block; }
.az-toast.az-toast-ok, .az-toast.ok   { background: var(--success); color: #fff; display: block; }
.az-toast.az-toast-err, .az-toast.err { background: var(--danger);  color: #fff; display: block; }
.az-toast.az-toast-info,.az-toast.info{ background: var(--info);    color: #fff; display: block; }
.az-toast.az-toast-warn,.az-toast.warn{ background: var(--warning); color: #fff; display: block; }

/* ─────────────────────────────────────────────────────────────────
   13. SEGMENTED TABS
   ───────────────────────────────────────────────────────────────── */
.az-tabs {
  display: flex; gap: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 3px;
  flex-wrap: wrap;
}
.az-tab {
  padding: 7px 16px; border-radius: var(--r-sm);
  font-size: .8rem; font-weight: 600; font-family: inherit;
  color: var(--text-muted); background: transparent;
  border: none; cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.az-tab:hover { color: var(--text-main); background: var(--bg-surface); }
.az-tab.active {
  background: var(--bg-surface); color: var(--text-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.az-tab-content { display: none; }
.az-tab-content.active { display: block; }

/* Source / Lab banner */
.az-lab-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--r-md);
  background: var(--chip-batch-bg);
  border: 1px solid #fde8d0;
  font-size: .78rem; color: var(--chip-batch-text);
  margin-bottom: 14px;
}
.az-lab-banner strong { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────
   14. UTILITY HELPERS
   ───────────────────────────────────────────────────────────────── */
.d-flex  { display: flex; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.fw-700  { font-weight: 700; }
.fw-600  { font-weight: 600; }
.text-right { text-align: right; }
.text-center{ text-align: center; }
.text-danger { color: var(--danger) !important; }
.text-success{ color: var(--success) !important; }
.text-warn   { color: var(--warning) !important; }
.text-muted  { color: var(--text-muted) !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px; }
.mb-16{ margin-bottom: 16px; }
.p-0  { padding: 0 !important; }
.w-100{ width: 100% !important; }

/* Legacy compat */
.auto-style1 { width: 407px; }
.card { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px; margin: 14px 0; }
.grid { display: grid; grid-template-columns: repeat(4,minmax(220px,1fr)); gap: 12px; }
.full { grid-column: 1/-1; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.w160 { width: 160px; }
.muted { color: var(--text-muted); font-size: 13px; }
.hint  { font-size: 12px; color: var(--text-muted); }
.selected-row { background: #d8f5d8; }
.step { margin: 12px 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--bg-surface); }
.form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.section-title { margin: 0 0 6px; font-weight: 600; }

/* Loading overlay */
#loadingOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(255,255,255,.75); z-index: 9999; backdrop-filter: blur(2px);
}
.spinner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 5px solid var(--line-soft); border-top-color: var(--info);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.loading-text {
  position: absolute; top: calc(50% + 46px); left: 50%; transform: translateX(-50%);
  color: var(--text-muted); font: 500 14px/1.4 inherit;
}

/* Inline bid edit */
.bid-input {
  width: 76px; padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: .78rem; text-align: right; outline: none;
  transition: border-color var(--dur-fast);
}
.bid-input:focus { border-color: var(--brand-amber); }
.bid-apply-btn {
  padding: 4px 11px; background: var(--brand-amber); color: var(--brand-navy);
  border: none; border-radius: var(--r-sm);
  font-size: .74rem; font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast); white-space: nowrap;
}
.bid-apply-btn:hover:not([disabled]) { background: var(--brand-amber-deep); }
.bid-apply-btn[disabled] { background: var(--line-soft); color: var(--text-xmuted); cursor: not-allowed; }

/* Upload table (compat) */
.upload-table {
  width: 100%; max-width: 900px; margin: 32px auto;
  border-collapse: separate; border-spacing: 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-card); border-radius: var(--r-lg); padding: 18px;
}
.upload-table td { vertical-align: middle; padding: 8px 18px; }
.label-cell { color: var(--brand-blue); font-size: .9rem; font-weight: 600; }
.upload-input { display: block; margin-bottom: 8px; font-size: .84rem; }
.input-text {
  width: 100%; max-width: 680px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 7px 10px; font-size: .875rem;
  transition: border-color var(--dur-fast);
}
.input-text:focus { border-color: var(--brand-amber); box-shadow: 0 0 0 3px rgba(255,153,0,.13); outline: none; }
.upload-message { display: block; margin-top: 8px; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
   15. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { padding-top: 56px; }
  .az-nav { height: auto; }
  .az-nav-inner { flex-wrap: wrap; padding: 10px 14px; }
  .az-nav-toggle { display: flex; align-items: center; }
  .az-nav-links, .az-nav-right { display: none !important; }
  .az-nav-links.nb-open {
    display: flex !important; flex-direction: column;
    width: 100%; padding: 6px 0 10px; gap: 2px;
    background: transparent; border: none; border-radius: 0;
  }
  .az-nav-right.nb-open {
    display: flex !important; width: 100%;
    justify-content: flex-end; padding: 6px 0 8px;
    border-top: 1px solid rgba(255,255,255,.1); margin-top: 4px;
  }
  .az-nav-links > li { width: 100%; }
  .az-nav-links > li > a, .az-drop-btn { width: 100%; border-radius: var(--r-sm); }
  .az-drop {
    position: static !important; box-shadow: none !important;
    border: none !important; animation: none !important;
    border-radius: 0 !important; background: rgba(255,255,255,.06) !important;
    padding: 0 0 4px 12px !important; z-index: auto !important;
  }
  .az-drop.nb-mob-open { display: block !important; }
  .az-drop a { color: rgba(255,255,255,.72); }
  .az-drop a:hover { background: rgba(255,153,0,.12); color: var(--brand-amber); }
  .az-drop-feat { margin: 4px 0 !important; }
  .az-drop-hdr { color: rgba(255,255,255,.38); }
  .az-drop-div { background: rgba(255,255,255,.1); }

  .body-content { padding: 0 14px 32px; }
  .az-g2, .az-g3, .az-g4, .az-g6 { grid-template-columns: 1fr !important; }
  .az-col-2-1 { grid-template-columns: 1fr !important; }
  .az-bar, .az-toolbar { flex-direction: column; align-items: stretch; }
  .az-btn { width: 100% !important; justify-content: center; }
  .az-header { flex-wrap: wrap; }
  .az-header-badge { margin-left: 0; }
  .az-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .az-page-hdr { flex-wrap: wrap; }
  .az-page-hdr-actions { width: 100%; }
}

@media (max-width: 480px) {
  .az-kpi-strip { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
   16. FOOTER
   ───────────────────────────────────────────────────────────────── */
.az-footer {
  margin-top: 40px;
  padding: 16px 0 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.az-footer span:first-child { font-size: .78rem; color: var(--text-muted); }
.az-footer span:last-child  { font-size: .75rem; color: var(--text-xmuted); }

/* ─────────────────────────────────────────────────────────────────
   17. MISSING TOKENS & ALIASES
   ───────────────────────────────────────────────────────────────── */
/* --text-primary was referenced in Default.aspx code-behind but not defined */
:root {
  --text-primary:  #0f172a;
  --text-soft:     #94a3b8;
  --bg-elevated:   #ffffff;
  --brand-sky:     #1d4ed8;
}

/* body subtle gradient per spec */
body {
  background: linear-gradient(180deg, #f3f6fb 0%, #eef3f9 100%) fixed;
  min-height: 100vh;
}

/* Button aliases for backward compat */
.az-btn-primary         { background: var(--brand-amber) !important; color: var(--brand-navy) !important; }
.az-btn-primary:hover   { background: var(--brand-amber-deep) !important; }
.az-btn-outline         { background: transparent !important; color: var(--text-main) !important; border: 1px solid var(--line-strong) !important; }
.az-btn-outline:hover   { background: var(--bg-panel) !important; }

/* ─────────────────────────────────────────────────────────────────
   18. EXECUTIVE HERO HEADER
   ───────────────────────────────────────────────────────────────── */
.exec-hero {
  background: linear-gradient(135deg, var(--brand-navy) 0%, #16213e 55%, var(--brand-blue) 100%);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  display: flex; align-items: flex-start; gap: 24px;
  margin: 16px 0 24px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(15,34,61,.18);
}
.exec-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,153,0,.16) 0%, transparent 65%);
  pointer-events: none;
}
.exec-hero::after {
  content: ''; position: absolute; bottom: -40px; left: 35%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(29,78,216,.12) 0%, transparent 65%);
  pointer-events: none;
}
.exec-hero-content { flex: 1; min-width: 0; z-index: 1; }
.exec-hero-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.exec-hero-sep { color: rgba(255,255,255,.2); }
.exec-hero-title {
  font-size: 1.75rem; font-weight: 800; color: #ffffff;
  margin: 0 0 6px; line-height: 1.2; letter-spacing: -.4px;
}
.exec-hero-sub  { font-size: .84rem; color: rgba(255,255,255,.48); margin: 0; }
.exec-hero-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; flex-wrap: wrap; z-index: 1; align-self: center;
}
.exec-hero .az-primary, .exec-hero .az-btn-primary {
  background: var(--brand-amber) !important; color: var(--brand-navy) !important;
  font-weight: 700 !important;
}
.exec-hero .az-primary:hover, .exec-hero .az-btn-primary:hover {
  background: var(--brand-amber-deep) !important;
}
.exec-hero .az-secondary, .exec-hero .az-btn-outline {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.exec-hero .az-secondary:hover, .exec-hero .az-btn-outline:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.38) !important;
}
@media (max-width: 768px) {
  .exec-hero { flex-direction: column; padding: 20px 18px; }
  .exec-hero-actions { width: 100%; }
  .exec-hero-title { font-size: 1.35rem; }
}

/* ─────────────────────────────────────────────────────────────────
   19. ENHANCED SECTION HEADING (exec-dashboard)
   ───────────────────────────────────────────────────────────────── */
/* Override section-heading in exec context to be calmer */
.exec-section-hdr {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 14px;
  font-size: .82rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.exec-section-hdr::after {
  content: ''; flex: 1; height: 1px; background: var(--line-soft);
}
.exec-section-hdr a {
  font-size: .76rem; font-weight: 700; color: var(--brand-navy);
  text-decoration: none; letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}
.exec-section-hdr a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   20. EXEC KPI CARD ENHANCEMENTS
   ───────────────────────────────────────────────────────────────── */
.exec-kpi-card {
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.exec-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
/* source chip inside KPI card */
.exec-kpi-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: var(--r-full);
  font-size: .6rem; font-weight: 700; letter-spacing: .2px;
  background: var(--chip-api-bg); color: var(--chip-api-text);
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   21. SELLERDASHBOARD PAGE HEADER  
   ───────────────────────────────────────────────────────────────── */
.sd-page-hero {
  background: linear-gradient(135deg, #0f223d 0%, #152a4a 60%, #1a3660 100%);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  margin: 16px 0 16px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(15,34,61,.16);
}
.sd-page-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,153,0,.12) 0%, transparent 65%);
  pointer-events: none;
}
.sd-page-hero-content { flex: 1; z-index: 1; }
.sd-page-hero-title {
  font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 3px; line-height: 1.2;
}
.sd-page-hero-sub { font-size: .78rem; color: rgba(255,255,255,.48); margin: 0; }
.sd-page-hero-pills {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.sd-page-hero-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; z-index: 1; flex-wrap: wrap; }
.sd-page-hero .az-primary { background: var(--brand-amber) !important; color: var(--brand-navy) !important; }
.sd-page-hero .az-secondary {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.sd-page-hero .az-secondary:hover { background: rgba(255,255,255,.18) !important; }
@media (max-width: 768px) {
  .sd-page-hero { flex-direction: column; }
  .sd-page-hero-actions { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   22. PREMIUM SAAS SHELL ENHANCEMENT
   ───────────────────────────────────────────────────────────────── */
:root {
  --shell-sidebar-w: 264px;
  --shell-sidebar-collapsed-w: 76px;
  --shell-topbar-h: 64px;
  --bg-page: #f6f7fb;
  --bg-surface: rgba(255,255,255,.92);
  --bg-panel: #f8fafc;
  --bg-raised: #ffffff;
  --text-strong: #0b1220;
  --text-main: #1f2937;
  --text-muted: #667085;
  --text-xmuted: #98a2b3;
  --line-soft: rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.16);
  --brand-navy: #0b1220;
  --brand-blue: #2563eb;
  --brand-violet: #7c3aed;
  --brand-amber: #f59e0b;
  --brand-amber-deep: #d97706;
  --brand-amber-soft: #fff7ed;
  --focus-ring: rgba(37,99,235,.18);
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px rgba(16,24,40,.06);
  --shadow-card-hover: 0 18px 48px rgba(16,24,40,.12);
  --shadow-drop: 0 24px 70px rgba(15,23,42,.18), 0 8px 22px rgba(15,23,42,.10);
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html.az-dark {
  --bg-page: #090d16;
  --bg-surface: rgba(16,22,34,.92);
  --bg-panel: #111827;
  --bg-raised: #151c2b;
  --text-strong: #f8fafc;
  --text-main: #d7dee9;
  --text-muted: #9aa4b2;
  --text-xmuted: #667085;
  --line-soft: rgba(226,232,240,.10);
  --line-strong: rgba(226,232,240,.18);
  --brand-navy: #090d16;
  --brand-amber-soft: rgba(245,158,11,.12);
  --success-bg: rgba(5,150,105,.12);
  --warning-bg: rgba(217,119,6,.14);
  --danger-bg: rgba(220,38,38,.12);
  --info-bg: rgba(37,99,235,.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,.18), 0 16px 38px rgba(0,0,0,.22);
}

body {
  font-family: Inter, "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 20% -10%, rgba(37,99,235,.10), transparent 32rem),
    radial-gradient(circle at 100% 0%, rgba(124,58,237,.08), transparent 28rem),
    linear-gradient(180deg, var(--bg-page) 0%, color-mix(in srgb, var(--bg-page) 94%, #ffffff 6%) 100%) fixed;
  color: var(--text-main);
  padding-top: 0;
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 48%);
}

@media (min-width: 1025px) {
  html.az-sidebar-collapsed {
    --shell-sidebar-w: var(--shell-sidebar-collapsed-w);
  }

  .az-nav {
    width: var(--shell-sidebar-w);
    right: auto;
    bottom: 0;
    height: 100vh;
    background: linear-gradient(180deg, rgba(9,13,22,.98) 0%, rgba(13,19,32,.98) 100%);
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 0;
    box-shadow: 18px 0 55px rgba(15,23,42,.10);
    transition: width 220ms var(--ease), box-shadow 220ms var(--ease);
  }

  .az-nav-inner {
    height: 100%;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    transition: padding 220ms var(--ease), gap 220ms var(--ease);
  }

  .az-nav-brand {
    height: 44px;
    margin: 0;
    padding: 0 8px;
    font-size: 1rem;
    letter-spacing: 0;
    overflow: hidden;
    transition: justify-content 220ms var(--ease), padding 220ms var(--ease), font-size 160ms var(--ease);
  }

  .az-nav-brand .nb-logo {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 10px 24px rgba(245,158,11,.24));
  }

  .az-nav-links-wrap {
    flex: 1 1 auto;
    display: block;
    overflow: visible;
    min-height: 0;
  }

  .az-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    height: 100%;
    padding: 8px 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .az-nav-links > li {
    width: 100%;
    position: relative;
  }

  .az-nav-links > li > a,
  .az-drop-btn {
    width: 100%;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,.68);
    font-weight: 650;
    overflow: hidden;
    transition: background 160ms var(--ease), color 160ms var(--ease), justify-content 220ms var(--ease), padding 220ms var(--ease);
  }

  .az-nav-links > li > a:hover,
  .az-drop-btn:hover,
  .az-drop-btn.az-drop-open,
  .az-nav-links > li.az-nav-active > a,
  .az-nav-links > li.az-nav-active > .az-drop-btn {
    background: rgba(255,255,255,.08);
    color: #ffffff;
  }

  .az-nav-links > li.az-nav-active > a,
  .az-nav-links > li.az-nav-active > .az-drop-btn {
    box-shadow: inset 3px 0 0 #60a5fa;
    background: linear-gradient(90deg, rgba(37,99,235,.22), rgba(124,58,237,.10));
  }

  .az-drop {
    min-width: 272px;
    padding: 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    backdrop-filter: blur(18px);
  }

  .az-drop a {
    border-radius: 9px;
    padding: 10px 12px;
    font-size: .86rem;
  }

  .az-drop a:hover {
    background: rgba(37,99,235,.08);
    color: var(--brand-blue);
  }

  .az-drop-feat {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #fff !important;
  }

  .az-nav-right {
    width: 100%;
    margin: auto 0 0;
    padding: 12px 8px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .az-nav-right a {
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.06);
  }

  .az-nav-toggle,
  .az-nav-scrollhint {
    display: none !important;
  }

  .body-content {
    max-width: none;
    margin: 0 0 0 var(--shell-sidebar-w);
    padding: calc(var(--shell-topbar-h) + 24px) 28px 42px;
    transition: margin-left 220ms var(--ease), padding 220ms var(--ease);
  }

  html.az-sidebar-collapsed .az-nav-inner {
    padding: 18px 10px;
    gap: 16px;
  }

  html.az-sidebar-collapsed .az-nav-brand {
    justify-content: center;
    padding: 0;
    font-size: 0;
    gap: 0;
  }

  html.az-sidebar-collapsed .az-nav-brand .nb-logo {
    width: 38px;
    height: 38px;
  }

  html.az-sidebar-collapsed .az-nav-links {
    align-items: center;
  }

  html.az-sidebar-collapsed .az-nav-links > li > a,
  html.az-sidebar-collapsed .az-drop-btn {
    width: 48px;
    min-height: 46px;
    justify-content: center;
    padding: 10px;
    font-size: 0;
    gap: 0;
  }

  html.az-sidebar-collapsed .az-nav-links > li > a::before,
  html.az-sidebar-collapsed .az-drop-btn::before {
    content: attr(data-nav-icon);
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    line-height: 1;
  }

  html.az-sidebar-collapsed .az-chev,
  html.az-sidebar-collapsed .az-drop-badge,
  html.az-sidebar-collapsed .az-nav-alert-dot {
    display: none !important;
  }

  html.az-sidebar-collapsed .az-nav-links > li.az-nav-active > a,
  html.az-sidebar-collapsed .az-nav-links > li.az-nav-active > .az-drop-btn {
    box-shadow: inset 0 -3px 0 #60a5fa;
  }

  html.az-sidebar-collapsed .az-drop {
    left: calc(var(--shell-sidebar-collapsed-w) + 10px) !important;
  }

  html.az-sidebar-collapsed .az-drop a,
  html.az-sidebar-collapsed .az-drop-hdr {
    font-size: .86rem;
  }

  html.az-sidebar-collapsed .az-nav-right {
    padding: 12px 0 0;
    justify-content: center;
  }

  html.az-sidebar-collapsed .az-nav-right,
  html.az-sidebar-collapsed .az-nav-right > *,
  html.az-sidebar-collapsed .az-nav-right a {
    font-size: 0 !important;
  }

  html.az-sidebar-collapsed .az-nav-right a {
    width: 38px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html.az-sidebar-collapsed .az-nav-right a::before {
    content: "⋯";
    font-size: 1rem;
  }
}

.az-topbar {
  position: fixed;
  top: 0;
  left: var(--shell-sidebar-w);
  right: 0;
  z-index: 900;
  height: var(--shell-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: left 220ms var(--ease), padding 220ms var(--ease);
}

.az-topbar-left,
.az-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.az-sidebar-peek {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}

.az-sidebar-peek:hover {
  border-color: rgba(37,99,235,.30);
  background: rgba(37,99,235,.06);
  transform: translateY(-1px);
}

.az-sidebar-peek span {
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms var(--ease), width 180ms var(--ease), opacity 180ms var(--ease);
}

html.az-sidebar-collapsed .az-sidebar-peek span:nth-child(1) {
  width: 10px;
  transform: translateX(-3px) rotate(-35deg);
}

html.az-sidebar-collapsed .az-sidebar-peek span:nth-child(2) {
  width: 18px;
}

html.az-sidebar-collapsed .az-sidebar-peek span:nth-child(3) {
  width: 10px;
  transform: translateX(-3px) rotate(35deg);
}

.az-workspace-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}

.az-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16,185,129,.14);
}

.az-topbar-context {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.az-topbar-context span {
  color: var(--text-xmuted);
  font-size: .7rem;
  font-weight: 700;
}

.az-topbar-context strong {
  color: var(--text-strong);
  font-size: .88rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42vw;
}

.az-command-trigger {
  width: min(420px, 34vw);
  min-width: 260px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 12px;
  text-align: left;
  font-size: .82rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.az-command-trigger:hover,
.az-command-trigger:focus {
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 4px var(--focus-ring);
  outline: none;
}

.az-command-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.12));
  color: var(--brand-blue);
  font-weight: 800;
}

.az-command-trigger kbd {
  margin-left: auto;
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
  color: var(--text-xmuted);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .68rem;
  font-weight: 750;
}

.az-ai-trigger,
.az-theme-toggle {
  height: 38px;
  min-width: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text-main);
  font-weight: 850;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.az-ai-trigger {
  padding: 0 13px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 10px 26px rgba(37,99,235,.22);
}

.az-theme-toggle:hover,
.az-ai-trigger:hover {
  transform: translateY(-1px);
}

.az-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(9,13,22,.42);
  backdrop-filter: blur(10px);
}

.az-command-overlay.az-command-open {
  display: flex;
  animation: azFadeIn 140ms var(--ease) both;
}

.az-command-panel {
  width: min(720px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-drop);
  animation: azPanelIn 180ms var(--ease) both;
}

.az-command-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.az-command-input-wrap span {
  color: var(--text-xmuted);
  font-size: 1.1rem;
}

.az-command-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: .98rem;
}

.az-command-input-wrap button {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-muted);
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 800;
}

.az-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.az-command-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-main);
  text-decoration: none !important;
}

.az-command-item:hover {
  border-color: rgba(37,99,235,.18);
  background: rgba(37,99,235,.07);
}

.az-command-item strong {
  color: var(--text-strong);
  font-size: .88rem;
}

.az-command-item span {
  color: var(--text-muted);
  font-size: .77rem;
}

@keyframes azFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes azPanelIn {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Premium shared surfaces */
.az-card,
.az-card-wrap,
.card,
.cmd-panel,
.lp-card,
.comp-card,
.sd-filter-bar,
.az-tbl-wrap,
.lp-topbar,
.ec-kpi-card,
.ec-panel,
.ec-action-card,
.ec-queue-card,
.az-metric,
.az-kpi,
.kpi-tile {
  border-color: var(--line-soft) !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-card) !important;
}

.az-card,
.az-card-wrap,
.cmd-panel,
.lp-card,
.comp-card,
.ec-panel,
.ec-queue-card {
  border-radius: 12px !important;
}

.az-card:hover,
.cmd-panel:hover,
.lp-card:hover,
.comp-card:hover,
.ec-kpi-card:hover,
.kpi-tile:hover,
.az-metric:hover,
.az-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover) !important;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.az-btn,
.lp-tbtn,
.bid-apply-btn,
.sd-dw-btn {
  border-radius: 9px !important;
  min-height: 34px;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease) !important;
}

.az-primary,
.az-btn-primary,
.lp-tbtn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.22) !important;
}

.az-primary:hover,
.az-btn-primary:hover,
.lp-tbtn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(37,99,235,.28) !important;
}

.az-secondary,
.az-btn-outline,
.lp-tbtn-ghost,
.sd-dw-btn {
  background: var(--bg-raised) !important;
  color: var(--text-main) !important;
  border-color: var(--line-soft) !important;
}

.az-secondary:hover,
.az-btn-outline:hover,
.lp-tbtn-ghost:hover,
.sd-dw-btn:hover:not(.active) {
  border-color: rgba(37,99,235,.28) !important;
  background: rgba(37,99,235,.06) !important;
  color: var(--brand-blue) !important;
}

.az-metric,
.az-kpi,
.kpi-tile,
.ec-kpi-card {
  text-align: left !important;
  position: relative;
  overflow: hidden;
}

.az-metric::after,
.az-kpi::after,
.kpi-tile::after,
.ec-kpi-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  opacity: .72;
}

.az-metric-lbl,
.az-kpi-lbl,
.kpi-label,
.ec-kpi-lbl,
.section-heading .sh-role,
.az-label {
  letter-spacing: .02em !important;
  color: var(--text-muted) !important;
}

.az-metric-val,
.az-kpi-val,
.kpi-val,
.ec-kpi-val {
  color: var(--text-strong) !important;
  letter-spacing: 0 !important;
}

/* Unified dark ribbon — matches navbar brand-navy color */
.dash-hdr,
.sd-page-hero,
.exec-hero {
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 85% 10%, rgba(255,153,0,.13), transparent 16rem),
    linear-gradient(135deg, var(--brand-navy) 0%, #16213e 55%, var(--brand-blue) 100%) !important;
  box-shadow: 0 8px 28px rgba(15,34,61,.18) !important;
}

.dash-hdr {
  margin: 0 0 18px;
  padding: 20px 22px !important;
  border-radius: 16px;
}

.dash-hdr-title,
.sd-page-hero-title,
.exec-hero-title {
  color: #fff !important;
  letter-spacing: 0 !important;
}

.dash-hdr-meta,
.sd-page-hero-sub,
.exec-hero-sub {
  color: rgba(255,255,255,.60) !important;
}

/* Buttons inside dark ribbon headers */
.dash-hdr .az-primary,
.exec-hero .az-primary {
  background: var(--brand-amber) !important;
  color: var(--brand-navy) !important;
  border-color: var(--brand-amber) !important;
}
.dash-hdr .az-secondary,
.dash-hdr .az-btn-outline,
.exec-hero .az-btn-outline {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.dash-hdr .az-secondary:hover,
.dash-hdr .az-btn-outline:hover,
.exec-hero .az-btn-outline:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.38) !important;
}

/* Chips inside dark ribbon headers */
.dash-hdr .az-chip,
.dash-hdr .az-chip-api,
.dash-hdr .az-chip-batch,
.dash-hdr .az-chip-manual {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
  border: none !important;
}

/* Section accent — restore brand amber (consistent with rest of app) */
.section-hdr::before,
.az-card-title,
.az-section-ttl {
  border-left-color: var(--brand-amber) !important;
}

.section-hdr::before {
  background: var(--brand-amber) !important;
}

.az-tbl-wrap,
.lp-tbl-wrap {
  border-radius: 12px !important;
  border: 1px solid var(--line-soft) !important;
  background: var(--bg-surface);
}

.az-tbl,
.lp-grid,
.lp-mtbl {
  font-size: .84rem !important;
}

.az-tbl th,
.lp-grid th,
.lp-mtbl th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--bg-panel) 92%, var(--bg-surface) 8%) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  letter-spacing: .02em !important;
}

.az-tbl td,
.lp-grid td,
.lp-mtbl td {
  border-bottom-color: var(--line-soft) !important;
  color: var(--text-main) !important;
}

.az-tbl tbody tr,
.lp-grid tbody tr,
.lp-mtbl tbody tr {
  transition: background 120ms var(--ease), box-shadow 120ms var(--ease);
}

.az-tbl tbody tr:hover td,
.lp-grid tbody tr:hover td,
.lp-mtbl tbody tr:hover td {
  background: rgba(37,99,235,.045) !important;
}

.lp-topbar {
  position: sticky;
  top: calc(var(--shell-topbar-h) + 12px);
  z-index: 40;
  margin-bottom: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(14px);
}

.lp-search,
.lp-hf,
.lp-inp,
.input-text,
.sd-filter-search,
.bid-input,
.lp-pgsize,
.lp-status-sel,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="date"] {
  border-color: var(--line-soft) !important;
  background: var(--bg-raised) !important;
  color: var(--text-main) !important;
  border-radius: 9px !important;
}

.lp-search:focus,
.lp-hf:focus,
.lp-inp:focus,
.input-text:focus,
.sd-filter-search:focus,
.bid-input:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
  border-color: rgba(37,99,235,.42) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none !important;
}

.sd-tab-bar {
  gap: 6px !important;
  padding: 5px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 12px !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-card);
}

.sd-tab {
  border-radius: 9px !important;
  border: 0 !important;
  background: transparent !important;
}

.sd-tab.active {
  margin-bottom: 0 !important;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10)) !important;
  color: var(--text-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}

.ps-badge,
.sig,
.lp-badge,
.lp-sbadge,
.sd-src-chip,
.a-pill,
.az-drop-badge {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 999px !important;
  font-weight: 750 !important;
}

.cmd-panel-hdr,
.lp-modal-hdr,
.az-modal-hdr {
  background:
    linear-gradient(135deg, #7c4a00 0%, #a0600a 60%, #b8720f 100%) !important;
  color: #fff !important;
}

.cmd-panel-hdr h3,
.cmd-panel-hdr span,
.lp-modal-title,
.az-modal-title {
  color: #fff !important;
}

.cmd-panel-hdr a {
  color: rgba(255,255,255,.82) !important;
}
.cmd-panel-hdr a:hover {
  color: #fff !important;
}

.lp-overlay,
.az-modal-overlay {
  backdrop-filter: blur(10px);
}

.lp-modal,
.az-modal {
  border: 1px solid var(--line-soft) !important;
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-drop) !important;
}

.az-empty,
.lp-modal-empty {
  background:
    linear-gradient(135deg, rgba(37,99,235,.05), rgba(124,58,237,.04));
  border: 1px dashed var(--line-soft);
  border-radius: 14px;
}

.az-footer {
  margin-top: 34px;
  color: var(--text-muted);
}

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

@media (max-width: 1024px) {
  body { padding-top: 0; }
  .az-nav {
    height: auto;
    min-height: 56px;
  }
  .az-nav-inner {
    padding: 10px 14px;
  }
  .body-content {
    max-width: none;
    margin: 0;
    padding: calc(var(--shell-topbar-h) + 72px) 16px 32px;
  }
  .az-topbar {
    left: 0;
    top: 56px;
    padding: 0 14px;
  }
  .az-sidebar-peek {
    display: inline-flex;
  }
  .az-command-trigger {
    min-width: 0;
    width: 42px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .az-command-trigger kbd {
    display: none;
  }
  .az-command-icon {
    margin: 0;
  }
  .az-topbar-context strong {
    max-width: 38vw;
  }
  .lp-topbar {
    top: calc(var(--shell-topbar-h) + 68px);
  }
}

@media (max-width: 640px) {
  .az-topbar {
    gap: 8px;
  }
  .az-workspace-chip,
  .az-topbar-context span {
    display: none;
  }
  .az-topbar-context strong {
    max-width: 42vw;
    font-size: .8rem;
  }
  .az-command-grid {
    grid-template-columns: 1fr;
  }
  .dash-hdr,
  .sd-page-hero,
  .exec-hero {
    padding: 18px !important;
  }
  .lp-topbar {
    position: static;
    border-radius: 14px;
  }
  .lp-card {
    border-radius: 14px !important;
    margin-top: 12px;
  }
}