/*
 * Euhedral Site — Base reset + Topbar
 * Everything else lives in design-tokens.css (shared components)
 * or in page-specific CSS.
 */

/* ═══ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-size: 15px;
}
/* Browsers do NOT inherit font for form elements — force it globally */
input, select, textarea, button { font-family: inherit; font-size: inherit; }
/* Page-level flex children need min-height:0 to allow overflow-y:auto scrolling */
.app-content > * { min-height: 0; }

/* ═══ Topbar ═══ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 54px;
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 100;
}
.brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand span { color: var(--blue); }
.topbar-ctx {
  font-size: 0.68rem;
  color: var(--text3);
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar-customer {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 0.15rem 0.6rem;
  border-radius: 0.25rem;
  border: 1px solid var(--blue-mid);
  margin-left: 0.5rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.topbar-site-ctx {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
}
.topbar-site-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
}
.topbar-poi-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface3);
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border2);
}
.topbar-ctx-select {
  font-size: 0.72rem;
  font-family: var(--sans);
  max-width: 10rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border2);
  border-radius: 0.25rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.topbar-ctx-select:hover { border-color: var(--blue-mid); }
.topbar-ctx-select:focus { border-color: var(--blue); }
/* Editable site/POI selectors on Dashboard — visually matches the read-only .topbar-ctx-pill */
.topbar-field {
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.22rem 0.55rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  max-width: 14rem;
}
.topbar-field:hover { border-color: var(--blue-mid); }
.topbar-field:focus { border-color: var(--blue); }
/* Read-only site/POI display pill (everywhere except Dashboard) */
.topbar-site-ctx[data-ctx-mode="display"] { cursor: not-allowed; }
.topbar-ctx-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text);
}
.topbar-ctx-pill-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
}
.topbar-ctx-pill-value {
  font-weight: 600;
  color: var(--text);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-sep {
  font-size: 0.65rem;
  color: var(--text3);
}
.topbar-user {
  font-size: 0.68rem;
  color: var(--text3);
}

/* ── Topbar search ── */
.topbar-search { flex: 1; max-width: 320px; margin: 0 1rem; }
.topbar-search-input {
    width: 100%; padding: 0.3rem 0.75rem; border: 1px solid var(--border2);
    border-radius: var(--r); background: var(--surface); color: var(--text);
    font-family: var(--sans); font-size: 0.78rem; cursor: pointer;
    transition: border-color 0.15s;
}
.topbar-search-input::placeholder { color: var(--text3); }
.topbar-search-input:hover { border-color: var(--blue-mid); }

/* ── Stores scan autocomplete dropdown (shared) ── */
/* ── Shared autocomplete dropdown (used by Search + all Stores pages) ── */
/* Canonical autocomplete dropdown — must match QuickTool/Search.cshtml so
   the same widget feels identical everywhere. Anything that diverges from
   these sizes is a regression. */
.qt-autocomplete {
  position: absolute; top: 100%; left: 0; right: 0; min-width: 480px; z-index: 9999;
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r) var(--r); box-shadow: 0 6px 16px rgba(0,0,0,.12);
  max-height: 320px; overflow-y: auto;
}
.qt-ac-item {
  padding: 0.35rem 0.6rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.73rem; color: var(--text); border-bottom: 1px solid var(--surface3);
  transition: background .1s;
}
.qt-ac-item:hover, .qt-ac-item.active { background: var(--surface2); }
.qt-ac-item:last-child { border-bottom: none; }
.qt-ac-id { font-weight: 700; min-width: 100px; color: var(--text); white-space: nowrap; }
.qt-ac-desc { flex: 1; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-ac-type { font-size: 0.58rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 0.2rem; white-space: nowrap; }

/* Operator-page scan inputs — width only. Height / padding / font come
   from the base .field rule so the scan input matches surrounding inputs.
   Width is generous so a long item code fits without scrolling. */
.op-scan-input { min-width: 360px; }
.qt-type-chip { background: var(--blue-light, #dbeafe); color: var(--blue, #2563eb); }

/* ═══ ISO 13399 Panel (embedded on Item Definition) ═══ */
.iso-panel {
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  padding: 0.6rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
}
.iso-panel.active { display: block; }

.iso-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.iso-score-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.72rem;
  color: var(--on-accent, #fff);
  flex-shrink: 0;
}
.iso-score-badge.score-high   { background: var(--green); }
.iso-score-badge.score-medium { background: var(--amber); }
.iso-score-badge.score-low    { background: var(--red); }

.iso-summary {
  font-size: 0.74rem;
  color: var(--text2);
  flex: 1;
  line-height: 1.5;
}
.iso-summary strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.1rem;
  letter-spacing: -0.005em;
}
.iso-summary-meta {
  font-size: 0.68rem;
  color: var(--text3);
}
/* Manufacturer Part Number row — red dot when number is present but no manufacturer mapping */
.iso-mpn-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  margin: 0.35rem 0 0.6rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--surface2);
  font-size: 0.74rem;
}
.iso-mpn-row.mpn-ok       { border-left-color: var(--green); }
.iso-mpn-row.mpn-warn     { border-left-color: var(--red); }
.iso-mpn-row.mpn-missing  { border-left-color: var(--text3); }
.iso-mpn-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
}
.iso-mpn-value {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  font-size: 0.78rem;
  flex: 1;
}
.iso-mpn-status {
  font-size: 0.65rem;
  font-weight: 600;
}
.iso-mpn-status.warn { color: var(--red); }
.iso-mpn-status.ok   { color: var(--green); }
.iso-mpn-status.miss { color: var(--text3); }
.iso-mpn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iso-mpn-dot.ok   { background: var(--green); }
.iso-mpn-dot.warn { background: var(--red); }
.iso-mpn-dot.miss { background: var(--text3); }

.iso-props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.25rem 0.75rem;
}

.iso-prop-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.7rem;
}

.iso-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iso-dot.filled  { background: var(--green); }
.iso-dot.missing { background: var(--red); }
.iso-dot.invalid { background: var(--amber); }

.iso-prop-name {
  color: var(--text2);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iso-prop-name .iso-level {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.2rem;
  opacity: 0.6;
}

.iso-prop-value {
  color: var(--text);
  font-weight: 600;
  /* Was var(--mono) — DM Mono renders the decimal point with weird spacing
     that looks like a '>' between the integer and fractional parts at small
     font sizes (e.g. "16.0000" reads as "16>0000"). Same root cause as the
     dash-table .num override at design-tokens.css:966. Sans-serif with
     tabular-nums gives column-perfect alignment without the glyph mangling. */
  font-family: var(--sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  white-space: nowrap;
}

.iso-info-link {
  font-size: 0.6rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  margin-left: 0.3rem;
  white-space: nowrap;
}
.iso-info-link:hover { text-decoration: underline; }

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 1.25rem;
  font-size: 0.68rem;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bc-link {
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s;
}
.bc-link:hover {
  color: var(--blue);
  text-decoration: underline;
}
.bc-sep {
  color: var(--text3);
  opacity: 0.5;
  font-size: 0.75rem;
}
.bc-current {
  color: var(--text);
  font-weight: 600;
}
.bc-home {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}
.bc-home:hover {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}

/* Nav section headers are fully defined in design-tokens.css */

/* ═══ D4: Sort indicators ═══ */
th.sortable:hover { background: var(--surface2); }
.sort-indicator { opacity: 0.5; transition: opacity 0.15s; }
th.sortable:hover .sort-indicator { opacity: 1; }

/* ═══ D5: Mobile / Responsive ═══ */

/* Hamburger toggle (hidden on desktop) */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  /* Show hamburger */
  .hamburger-btn { display: inline-flex; }

  /* Hide sidebar by default */
  .app-nav {
    position: fixed;
    top: 54px;
    left: -280px;
    width: 280px;
    height: calc(100vh - 54px);
    z-index: 200;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    transition: left 0.25s ease;
    overflow-y: auto;
  }
  .app-nav.mobile-open {
    left: 0;
  }
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 54px;
    background: var(--overlay, rgba(0,0,0,0.45));
    z-index: 199;
  }
  .nav-overlay.visible { display: block; }

  /* Touch-friendly targets */
  .btn, .btn-surface, .btn-blue, .tb-btn,
  .field, select.field, .topbar-ctx-select {
    min-height: 44px;
  }
  .data-tbl td, .data-tbl th {
    padding: 0.5rem 0.6rem;
  }

  /* Stack split-page vertically */
  .split-page {
    flex-direction: column !important;
    height: auto !important;
  }
  .split-left {
    width: 100% !important;
    max-height: 40vh;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .split-right {
    width: 100% !important;
    min-height: 60vh;
  }

  /* Topbar: hide lower priority items */
  .topbar-search { max-width: 160px; }
  .topbar-customer { display: none; }
}

/* ── Stock Card Popover ─────────────────────────────────────────────── */
.stock-card-popover {
  position: absolute;
  z-index: 9000;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r, 0.5rem);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
  padding: 0.75rem 1rem;
  min-width: 220px;
  max-width: 300px;
  font-size: 0.8rem;
  pointer-events: none;
}
.stock-card-header {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
  color: var(--text-primary, #1e293b);
}
.stock-card-desc {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-card-row {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.stock-card-row:last-of-type { border-bottom: none; }
.stock-card-urgency {
  margin-top: 0.4rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm, 0.25rem);
  text-align: center;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.urgency-critical { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.urgency-high    { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.urgency-medium  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

/* ── Environment banner (Sandbox / Staging) ───────────────────── */
.env-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
    height: 28px;
    line-height: 28px;
    padding: 0 1rem;
    text-align: center;
    background: repeating-linear-gradient(45deg, #d97706, #d97706 10px, #b45309 10px, #b45309 20px);
    color: #ffffff;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    pointer-events: none;
}
.env-banner strong { font-weight: 700; margin-right: 0.5rem; }
.env-banner span   { opacity: 0.92; }
body.has-env-banner { padding-top: 28px; }
/* Push fixed top-bar / nav frames down too — most app shells use a sticky topbar */
body.has-env-banner .topbar,
body.has-env-banner .top-bar,
body.has-env-banner .app-topbar,
body.has-env-banner .snav { top: 28px; }

/* ── Notification dropdown (top bar bell) ──────────────────────── */
#notificationBell { position: relative; }
.notification-dropdown {
    display: none;            /* hidden by default, bell click toggles */
    position: absolute;
    top: 40px; right: 0;
    min-width: 340px;
    max-width: 420px;
    max-height: 520px;
    overflow-y: auto;
    z-index: 1100;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0;
}
.notification-dropdown .notif-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.65rem 0.95rem; border-bottom: 1px solid var(--border-light, #f1f3f5);
    font-weight: 600; font-size: 0.85rem;
}
.notification-dropdown .notif-mark-all {
    background: none; border: none; color: var(--blue, #2563eb);
    font-size: 0.72rem; cursor: pointer; padding: 0;
}
.notification-dropdown .notif-item {
    padding: 0.6rem 0.95rem; border-bottom: 1px solid var(--border-light, #f1f3f5);
    cursor: pointer;
}
.notification-dropdown .notif-item:hover { background: var(--surface-alt, #f8f9fa); }
.notification-dropdown .notif-item-inner { display: flex; gap: 0.6rem; align-items: flex-start; }
.notification-dropdown .notif-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
}
.notif-dot--info    { background: var(--blue, #2563eb); }
.notif-dot--warning { background: var(--amber-fg, #d97706); }
.notif-dot--urgent  { background: var(--red, #dc2626); }
.notification-dropdown .notif-body { flex: 1; min-width: 0; }
.notification-dropdown .notif-title   { font-weight: 600; font-size: 0.82rem; }
.notification-dropdown .notif-message { font-size: 0.76rem; color: var(--text2, #4b5563); line-height: 1.35; margin-top: 0.1rem; }
.notification-dropdown .notif-time    { font-size: 0.7rem; color: var(--text3, #8b92a8); margin-top: 0.2rem; }
.notification-dropdown .notif-empty   { padding: 1.25rem; text-align: center; color: var(--text3, #8b92a8); font-size: 0.82rem; }
.notification-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 10px; background: var(--red, #dc2626); color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center;
    display: none;
}

/* Scan-fail banner — sticky toast with "+ Add it now" CTA. Used by the
   Stores Issue/Return/Swap/Build pages when a barcode resolves to nothing. */
.scan-fail-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: 0.55rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 250;
    max-width: min(640px,94vw);
}
.scan-fail-banner .sfb-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: #f59e0b; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.scan-fail-banner .sfb-body { flex: 1; min-width: 0; }
.scan-fail-banner .sfb-title { font-size: 0.85rem; color: var(--text); }
.scan-fail-banner .sfb-sub { font-size: 0.7rem; color: var(--text2); margin-top: 1px; }
.scan-fail-banner .sfb-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.scan-fail-banner .btn { min-height: 38px; }

/* ── Procurement cart leave-guard banner ─────────────────────────────── */
.atms-cart-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fef3c7;
    color: #78350f;
    border-bottom: 1px solid #fde68a;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 200;
}
.atms-cart-banner[hidden] { display: none; }
.atms-cart-banner-icon { font-size: 1rem; }
.atms-cart-banner-text { flex: 1; }
.atms-cart-banner-link {
    color: #78350f;
    text-decoration: underline;
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 0.4rem;
}
.atms-cart-banner-link:hover { color: #1e3a8a; }
.atms-cart-banner-dismiss {
    background: none;
    border: none;
    color: #78350f;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
}
.atms-cart-banner-dismiss:hover { color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════════════
   STORES DASHBOARD V2 (spec at docs/_dashboard-spec.html)
   12-col CSS grid + cards. Class names match the spec verbatim so the spec
   file remains a 1:1 reference for visual tweaks.
═══════════════════════════════════════════════════════════════════════════ */

/* Greeting */
.dash-greeting { padding:1.15rem 1.75rem .5rem; display:flex; justify-content:space-between; align-items:flex-end; flex-shrink:0; }
.dash-greeting h1 { margin:0; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.dash-greeting .sub { font-size:.7rem; color:var(--text3); margin-top:2px; }
.dash-greeting-actions { display:flex; gap:.4rem; }
.dash-greeting .btn { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .8rem; font-size:.72rem; font-weight:600; border-radius:.4rem; border:1px solid var(--border2); background:var(--surface); color:var(--text); cursor:pointer; text-decoration:none; }
.dash-greeting .btn:hover { background:var(--surface2); }
.dash-greeting .btn-blue { background:var(--blue); color:var(--on-accent); border-color:var(--blue); }
.dash-greeting .btn-blue:hover { background:var(--blue); opacity:.9; }

/* 12-col grid host (used by Stores Dashboard v2). Scoped to .dashboard-grid
   so legacy pages using .dashboard as a regular block container are not
   affected. Class names registered globally so the static UndefinedCssClassAudit picks them up.
   overflow:auto + min-height:0 needed because .app-content sets overflow:hidden
   on the flex parent — without these the grid clips to viewport height and the
   page cannot scroll. */
.dashboard-grid { padding:0 1.75rem 1.5rem; display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; overflow:auto; min-height:0; }
.col-3 { grid-column:span 3; display:flex; }
.col-4 { grid-column:span 4; display:flex; }
.col-6 { grid-column:span 6; display:flex; }
.col-8 { grid-column:span 8; display:flex; }
.col-12 { grid-column:span 12; display:flex; }
.dashboard-grid > .col-3 > *, .dashboard-grid > .col-4 > *, .dashboard-grid > .col-6 > *, .dashboard-grid > .col-8 > *, .dashboard-grid > .col-12 > * { flex:1; min-width:0; }
@media (max-width: 1100px) {
    .dashboard-grid > .col-3, .dashboard-grid > .col-4 { grid-column:span 6; }
    .dashboard-grid > .col-8 { grid-column:span 12; }
}
@media (max-width: 720px) {
    .dashboard-grid > .col-3, .dashboard-grid > .col-4, .dashboard-grid > .col-6, .dashboard-grid > .col-8 { grid-column:span 12; }
}

/* KPI card (left coloured rail) */
.kpi-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:.85rem 1rem .9rem; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.kpi-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue); }
.kpi-card.k-green::before { background:var(--green); }
.kpi-card.k-amber::before { background:var(--amber); }
.kpi-card.k-red::before { background:var(--red); }
.kpi-card .kpi-label { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); margin-bottom:.15rem; }
.kpi-card .kpi-value { font-size:1.85rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--text); }
.kpi-card .kpi-delta { font-size:.64rem; color:var(--text2); margin-top:.45rem; display:flex; align-items:center; gap:.3rem; }
.kpi-card .delta-up { color:var(--green); font-weight:600; }
.kpi-card .delta-down { color:var(--red); font-weight:600; }

/* Generic dash card (header + body + footer).
   Selectors apply to BOTH .dashboard (legacy Analytics/Reports/Partner pages)
   AND .dashboard-grid (Stores Dashboard v2 introduced by hotfix a1233e7).
   The hotfix renamed only the Stores Dashboard wrapper, but the scoped rules
   stayed bound to .dashboard alone, so v2 widgets fell through to the
   unpadded generic .dash-card-body. Dual-scoping restores both. */
.dashboard .dash-card, .dashboard-grid .dash-card { background:var(--surface); border:1px solid var(--border); border-radius:.5rem; overflow:hidden; display:flex; flex-direction:column; }
.dashboard .dash-card-hdr, .dashboard-grid .dash-card-hdr { display:flex; align-items:center; justify-content:space-between; padding:.55rem .85rem; border-bottom:1px solid var(--border); }
.dashboard .dash-card-hdr h3, .dashboard-grid .dash-card-hdr h3 { margin:0; font-size:.75rem; font-weight:700; color:var(--text); }
.dashboard .dash-card-link, .dashboard-grid .dash-card-link { font-size:.66rem; color:var(--blue); text-decoration:none; font-weight:500; }
.dashboard .dash-card-link:hover, .dashboard-grid .dash-card-link:hover { text-decoration:underline; }
.dashboard .dash-card-body, .dashboard-grid .dash-card-body { padding:.75rem .85rem; flex:1; }
.dashboard .dash-card-footer, .dashboard-grid .dash-card-footer { padding:.45rem .85rem; background:var(--surface2); border-top:1px solid var(--border); color:var(--text3); font-size:.62rem; display:flex; justify-content:space-between; }

/* Compact data table (Recent Transactions, Top Ranking, etc.) */
.dashboard table.eu, .dashboard-grid table.eu { width:100%; border-collapse:collapse; font-size:.72rem; }
.dashboard table.eu th, .dashboard-grid table.eu th { text-align:left; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); padding:.38rem .7rem; background:var(--surface2); border-bottom:1px solid var(--border); white-space:nowrap; }
.dashboard table.eu td, .dashboard-grid table.eu td { padding:.38rem .7rem; border-bottom:1px solid var(--surface3); color:var(--text); }
.dashboard table.eu tr:hover td, .dashboard-grid table.eu tr:hover td { background:var(--surface2); }
.dashboard table.eu tr:last-child td, .dashboard-grid table.eu tr:last-child td { border-bottom:none; }
.dashboard table.eu .r, .dashboard-grid table.eu .r { text-align:right; font-variant-numeric:tabular-nums; }
.dashboard table.eu .id, .dashboard-grid table.eu .id { font-variant-numeric:tabular-nums; color:var(--text); }
.dashboard table.eu .mute, .dashboard-grid table.eu .mute { color:var(--text3); }

/* Sparkline */
.spark { height:58px; width:100%; }

/* Donut */
.donut-wrap { display:flex; align-items:center; gap:1rem; }
.donut { --p:0; width:74px; height:74px; border-radius:50%; background:conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface3) 0); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.donut::after { content:""; position:absolute; inset:9px; background:var(--surface); border-radius:50%; }
.donut span { position:relative; z-index:1; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.donut-legend { display:flex; flex-direction:column; gap:.2rem; font-size:.68rem; color:var(--text2); }
.donut-legend b { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }

/* Brand bars — label column wide enough for full supplier names on one line */
.bars-row { display:flex; flex-direction:column; gap:.4rem; }
.bar-row { display:grid; grid-template-columns:140px 1fr 70px; gap:.7rem; align-items:center; font-size:.68rem; }
.bar-lbl { color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { height:8px; background:var(--surface3); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; background:var(--blue); border-radius:4px; }
.bar-val { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }

/* Top-rankings list */
.rank-row { padding:.45rem 0; border-bottom:1px solid var(--surface3); display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:baseline; }
.rank-row:last-child { border-bottom:none; }
.rank-id { font-size:.72rem; font-weight:700; color:var(--text); }
.rank-desc { font-size:.58rem; color:var(--text3); margin-top:.1rem; }
.rank-val { font-size:.72rem; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; }
.rank-track { grid-column:1/-1; margin-top:.25rem; height:3px; background:var(--surface3); border-radius:2px; overflow:hidden; }
.rank-fill { height:100%; background:var(--blue); border-radius:2px; }

/* Stock alert rows */
.stock-row { display:grid; grid-template-columns:1fr auto; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--surface3); align-items:center; }
.stock-row:last-child { border-bottom:none; }
.stock-id { font-size:.72rem; font-weight:600; color:var(--text); }
.stock-desc { font-size:.58rem; color:var(--text3); margin-top:.1rem; }
.stock-val { font-size:.6rem; color:var(--text2); font-variant-numeric:tabular-nums; }
.stock-zero { font-size:.55rem; font-weight:700; color:var(--red); letter-spacing:.06em; }

/* Issue / Return badges */
.pill-issued { display:inline-block; padding:1px 7px; font-size:.6rem; font-weight:600; border-radius:.2rem; background:rgba(5,150,105,.15); color:#047857; }
.pill-ret { display:inline-block; padding:1px 7px; font-size:.6rem; font-weight:600; border-radius:.2rem; background:rgba(37,99,235,.12); color:var(--blue); }

/* Quick Actions / Stores Tasks strips */
.qa-strip { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:.5rem; padding:.55rem .85rem; display:flex; align-items:center; gap:.85rem; }
.qa-strip-blue { background:rgba(37,99,235,.05); border-color:rgba(37,99,235,.18); }
.qa-strip-plain { background:var(--surface); }
.qa-strip-eyebrow { flex-shrink:0; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); padding-right:.35rem; }
.qa-strip-plain .qa-strip-eyebrow { color:var(--text3); }
.qa-strip-row { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.qa-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:2rem; background:var(--surface); border:1px solid var(--border2); color:var(--text); font-family:inherit; font-size:.7rem; font-weight:600; cursor:pointer; transition:all .12s; line-height:1.2; text-decoration:none; }
.qa-pill:hover { background:var(--blue-dim); color:var(--blue); border-color:rgba(37,99,235,.35); }
.qa-pill.emph { background:var(--surface); color:var(--blue); border-color:rgba(37,99,235,.4); }
.qa-pill-glyph { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:.85rem; line-height:1; color:var(--text3); }
.qa-pill:hover .qa-pill-glyph, .qa-pill.emph .qa-pill-glyph { color:var(--blue); }
.qa-strip-plain .qa-pill:hover { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.qa-strip-plain .qa-pill:hover .qa-pill-glyph { color:var(--text2); }

/* Compact pastel action pills — used on Purchase Orders + Calibration row actions */
.po-act { display:inline-flex; align-items:center; padding:0.18rem 0.55rem; font-size:0.66rem; font-weight:600; border-radius:var(--r); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:filter 0.15s; line-height:1.4; margin-left:0.25rem; font-family:inherit; }
.po-act:hover  { filter:brightness(0.95); }
.po-act-grey   { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.po-act-blue   { background:#dbeafe; color:#1e3a8a; border-color:#bfdbfe; }
.po-act-amber  { background:#fef3c7; color:#78350f; border-color:#fde68a; }
.po-act-green  { background:#dcfce7; color:#14532d; border-color:#bbf7d0; }
.po-act-red    { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }

/* Pastel-coloured Quick Actions pills (rotates 6 hues so the strip has visual rhythm) */
.qa-pill-pastel { color:var(--text); background:var(--surface); border-color:var(--border2); }
.qa-pill-c-blue   { background:#dbeafe; color:#1e3a8a; border-color:#bfdbfe; }
.qa-pill-c-blue:hover   { background:#bfdbfe; color:#1e3a8a; border-color:#93c5fd; }
.qa-pill-c-green  { background:#dcfce7; color:#14532d; border-color:#bbf7d0; }
.qa-pill-c-green:hover  { background:#bbf7d0; color:#14532d; border-color:#86efac; }
.qa-pill-c-amber  { background:#fef3c7; color:#78350f; border-color:#fde68a; }
.qa-pill-c-amber:hover  { background:#fde68a; color:#78350f; border-color:#fcd34d; }
.qa-pill-c-purple { background:#ede9fe; color:#4c1d95; border-color:#ddd6fe; }
.qa-pill-c-purple:hover { background:#ddd6fe; color:#4c1d95; border-color:#c4b5fd; }
.qa-pill-c-pink   { background:#fce7f3; color:#831843; border-color:#fbcfe8; }
.qa-pill-c-pink:hover   { background:#fbcfe8; color:#831843; border-color:#f9a8d4; }
.qa-pill-c-teal   { background:#ccfbf1; color:#134e4a; border-color:#99f6e4; }
.qa-pill-c-teal:hover   { background:#99f6e4; color:#134e4a; border-color:#5eead4; }
.qa-pill-c-blue .qa-pill-glyph,
.qa-pill-c-green .qa-pill-glyph,
.qa-pill-c-amber .qa-pill-glyph,
.qa-pill-c-purple .qa-pill-glyph,
.qa-pill-c-pink .qa-pill-glyph,
.qa-pill-c-teal .qa-pill-glyph { color:inherit; opacity:0.7; }

/* Spend hero (col-8) sub-classes */
.dashv2-spend-head      { display:flex; align-items:baseline; gap:.85rem; margin-bottom:.4rem; flex-wrap:wrap; }
.dashv2-spend-amount    { font-size:1.9rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--text); }
.dashv2-spend-delta     { font-size:.66rem; font-weight:600; }
.dashv2-spend-delta .vs { color:var(--text3); font-weight:400; }
.dashv2-spend-spacer    { flex:1; }
.dashv2-spend-pos       { font-size:.62rem; color:var(--text3); }
.dashv2-spend-axis      { display:flex; justify-content:space-between; margin-top:.3rem; font-size:.58rem; color:var(--text3); }
.dashv2-spend-stats     { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--surface3); }
.dashv2-stat-eyebrow    { font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); }
.dashv2-stat-value      { font-size:1.1rem; font-weight:700; margin-top:.15rem; color:var(--text); font-variant-numeric:tabular-nums; }
.dashv2-stat-sub        { font-size:.58rem; color:var(--text3); margin-top:.1rem; }
.dashv2-stat-sub.up     { color:var(--green); }
.dashv2-stat-sub.down   { color:var(--red); }

/* Inventory snapshot (col-6) */
.dashv2-snap-grid       { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.dashv2-snap-eyebrow    { font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); }
.dashv2-snap-value      { font-size:1.25rem; font-weight:700; margin-top:.15rem; font-variant-numeric:tabular-nums; color:var(--text); }
.dashv2-snap-value.muted { color:var(--text3); }
.dashv2-snap-sub        { font-size:.56rem; color:var(--text3); margin-top:.05rem; }

/* Stock alerts (col-12) */
.dashv2-alerts-grid     { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.dashv2-alert-head      { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.4rem; }
.dashv2-alert-eyebrow   { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.dashv2-alert-eyebrow.red   { color:var(--red); }
.dashv2-alert-eyebrow.amber { color:var(--amber); }
.dashv2-alert-count     { font-size:.58rem; color:var(--text3); }
.dashv2-alert-empty     { font-size:.65rem; color:var(--text3); padding:.4rem 0; }

/* Top brands / Approaching stockout small touches */
.dashv2-brand-empty,
.dashv2-rank-empty      { padding:1rem 0; color:var(--text3); font-size:.7rem; }
.dashv2-stockout-cell-zero { color:var(--red); font-weight:700; }
.dashv2-stockout-cell-low  { color:var(--text); font-weight:600; }
.dashv2-stockout-empty  { padding:1rem .7rem; text-align:center; color:var(--text3); }
.dashv2-tx-itemcode     { font-weight:600; }
.dashv2-tx-desc         { font-size:.58rem; color:var(--text3); }

/* Donut conic-gradient picker — colour follows tone class */
.donut-tone-green       { background:conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface3) 0); }
.donut-tone-amber       { background:conic-gradient(var(--amber) calc(var(--p) * 1%), var(--surface3) 0); }
.donut-tone-red         { background:conic-gradient(var(--red) calc(var(--p) * 1%), var(--surface3) 0); }
.donut-overdue-row.warn b   { color:var(--amber); }
.donut-overdue-row.warn     { color:var(--amber); }
.donut-target-line      { color:var(--text3); margin-top:.3rem; font-size:.6rem; }

/* Card padding tweaks used by inventory + calibration cards */
.dashv2-card-body-tight { padding:.9rem .85rem; }
.dashv2-rank-body       { padding:.3rem .85rem .5rem; }
.dashv2-table-body      { padding:0; }

/* Text-tone helpers for inline values */
.dashv2-text-amber      { color:var(--amber); }
.dashv2-text-red        { color:var(--red); }
.dashv2-text-green      { color:var(--green); }
.dashv2-text-mute       { color:var(--text3); font-weight:400; }