/* ============================================================================
   Prism — design system
   Catalog automation for marketplaces & D2C

   Identity: light entering a prism, spectrum out. Expressed as one teal accent
   plus a hairline spectrum rule — never as background gradients. The screen is a
   working surface for people who look at 1,000-row catalogs all day, so the
   palette stays quiet and the data stays loud.
   ============================================================================ */

:root {
  /* Brand — sampled from the Prism mark */
  --teal:        #05A995;
  --teal-soft:   #6EC6BC;
  --teal-deep:   #048272;
  --ink:         #101A20;
  --canvas:      #FDFCFA;

  /* Surfaces */
  --bg:          #F5F4F1;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F7;
  --sidebar:     #101A20;
  --sidebar-2:   #18242B;

  /* Text */
  --text:        #101A20;
  --text-2:      #5A666E;
  --text-3:      #8A959C;
  --on-dark:     #E8EDEF;
  --on-dark-2:   #8FA0A9;

  /* Lines */
  --line:        #E6E4DF;
  --line-strong: #D2CFC9;

  /* Semantic — status, not decoration */
  --danger:      #C4362B;
  --danger-bg:   #FCEEEC;
  --danger-line: #F0C9C4;
  --warn:        #A66A00;
  --warn-bg:     #FDF4E3;
  --warn-line:   #EDD9AE;
  --ok:          #0C7C63;
  --ok-bg:       #E7F5F1;
  --ok-line:     #B9E0D6;
  --info:        #2F5FE0;
  --info-bg:     #EDF1FD;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 1px 2px rgba(16,26,32,.04), 0 4px 16px rgba(16,26,32,.05);
  --shadow-lg:   0 2px 6px rgba(16,26,32,.06), 0 12px 40px rgba(16,26,32,.10);
  --sidebar-w:   232px;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"], :root:not([data-theme="light"]).force-dark {
  --bg:          #0C1418;
  --surface:     #131E24;
  --surface-2:   #18242B;
  --text:        #E8EDEF;
  --text-2:      #9AA8B0;
  --text-3:      #6E7C84;
  --line:        #22313A;
  --line-strong: #2E4049;
  --danger-bg:   #2A1614;
  --danger-line: #4A2723;
  --warn-bg:     #2A2110;
  --warn-line:   #4A3B1C;
  --ok-bg:       #0E2A25;
  --ok-line:     #1B4A40;
  --info-bg:     #16203A;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "tnum";
}

a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Spectrum rule — the one place the prism idea is literal ───────────────── */

.spectrum {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    var(--teal) 0%, var(--teal) 22%,
    var(--teal-soft) 22%, var(--teal-soft) 44%,
    #9AD9D0 44%, #9AD9D0 60%,
    var(--ink) 60%, var(--ink) 100%);
  opacity: .9;
}

/* ── App shell ─────────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(255,255,255,.06);
}

.sidebar-head { padding: 20px 18px 16px; }
.sidebar-logo { display: block; }
.sidebar-logo img { height: 26px; width: auto; display: block; }
.sidebar-tag {
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.nav { padding: 8px 10px; flex: 1; overflow-y: auto; }
.nav-group { margin-bottom: 18px; }
.nav-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #55666F;
  padding: 0 8px 6px;
  font-weight: 600;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  color: var(--on-dark-2);
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  position: relative;
}
.nav a:hover { background: rgba(255,255,255,.05); color: var(--on-dark); text-decoration: none; }
.nav a.active { background: rgba(5,169,149,.14); color: #fff; }
/* Active state gets a refracted edge rather than a filled block. */
.nav a.active::before {
  content: "";
  position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-soft) 100%);
}
.nav svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav .count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.08);
  color: var(--on-dark);
  padding: 1px 6px;
  border-radius: 99px;
}
.nav .count.alert { background: rgba(196,54,43,.9); color: #fff; }

.sidebar-foot { padding: 12px 14px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-foot label {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: #55666F; display: block; margin-bottom: 5px; font-weight: 600;
}
.sidebar-foot select {
  width: 100%;
  background: var(--sidebar-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238FA0A9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: 6px 26px 6px 8px;
  font: inherit;
  font-size: 12.5px;
}

.main { min-width: 0; display: flex; flex-direction: column; }

/* ── Page header ───────────────────────────────────────────────────────────── */

.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 18px 28px 16px;
  position: sticky; top: 0; z-index: 20;
}
.crumb {
  font-size: 12px; color: var(--text-3);
  display: flex; gap: 6px; align-items: center; margin-bottom: 5px;
}
.crumb a { color: var(--text-2); }
.page-head-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.page-title { font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.015em; }
.page-sub { color: var(--text-2); font-size: 13px; margin: 3px 0 0; }
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.content { padding: 22px 28px 56px; max-width: 1560px; width: 100%; }

/* ── Metrics ───────────────────────────────────────────────────────────────── */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 15px;
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--line-strong);
}
.metric.is-danger::before { background: var(--danger); }
.metric.is-warn::before   { background: var(--warn); }
.metric.is-ok::before     { background: var(--ok); }
.metric.is-teal::before   { background: linear-gradient(90deg, var(--teal), var(--teal-soft)); }

.metric-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 7px;
}
.metric-value {
  font-size: 28px; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.metric.is-danger .metric-value { color: var(--danger); }
.metric.is-warn .metric-value   { color: var(--warn); }
.metric.is-ok .metric-value     { color: var(--ok); }
.metric-note { font-size: 12px; color: var(--text-2); margin-top: 5px; }

/* ── Cards / panels ────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.card-title { font-size: 13.5px; font-weight: 640; margin: 0; }
.card-meta { font-size: 12px; color: var(--text-3); }
.card-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }

/* ── Tables ────────────────────────────────────────────────────────────────── */

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--text-3);
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--teal) 3.5%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.tight { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); font-size: 12px; }

/* Data grid — dense, scrollable, sticky first columns */
.grid-scroll { max-height: 620px; overflow: auto; }
.grid-scroll table { font-size: 12.5px; white-space: nowrap; }
.grid-scroll tbody td { padding: 7px 12px; }
.grid-scroll td.sticky, .grid-scroll th.sticky {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  border-right: 1px solid var(--line);
}
.grid-scroll thead th.sticky { z-index: 3; background: var(--surface-2); }
.row-blocked td.sticky { background: var(--danger-bg); }
.row-warning td.sticky { background: var(--warn-bg); }
.row-blocked { background: color-mix(in srgb, var(--danger-bg) 55%, transparent); }
.row-warning { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.cell-bad {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--danger-line);
}

/* ── Status pills ──────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 99px;
  font-size: 11px; font-weight: 620;
  letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.pill.blocker, .pill.blocked { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.pill.warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pill.clean, .pill.ok, .pill.info { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.pill.neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.pill.plain::before { display: none; }

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */

button, .btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  background: var(--ink); color: #fff;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover, .btn:hover { background: #1D2B33; text-decoration: none; }

.btn-primary { background: var(--teal); color: #04231F; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-deep); color: #fff; }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text-3); }

.btn-quiet { background: transparent; color: var(--text-2); border-color: transparent; padding: 6px 9px; }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #A62A21; }

.btn-sm { padding: 4px 9px; font-size: 12px; }
button:disabled, .btn:disabled, .btn.disabled {
  opacity: .42; cursor: not-allowed; pointer-events: none;
}

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline-flex; margin: 0; }

/* ── Filter bar ────────────────────────────────────────────────────────────── */

.filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.segmented {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.segmented a {
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  border-right: 1px solid var(--line);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.segmented a:last-child { border-right: 0; }
.segmented a:hover { background: var(--surface-2); text-decoration: none; }
.segmented a.active { background: var(--ink); color: #fff; }
.segmented a .n { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }

.search {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  background: var(--surface);
  min-width: 220px;
}
.search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; width: 100%; color: var(--text); }
.search svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.filters-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field label {
  display: block; font-size: 12px; font-weight: 620;
  color: var(--text-2); margin-bottom: 5px;
}
/* Every text-like control, including type-less inputs and numbers — the
   browser default leaks through the moment one is missed. Checkboxes and
   radios keep their native rendering. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
select, textarea {
  width: 100%;
  font: inherit; font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
textarea { min-height: 74px; resize: vertical; line-height: 1.5; }

/* Selects get the shared chrome plus our own chevron. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A959C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* The "Choose file" control: render the native button as one of ours. */
input[type=file] { padding: 5px 6px; cursor: pointer; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 5px 12px; margin-right: 10px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
input[type=file]::file-selector-button:hover {
  background: var(--surface); border-color: var(--text-3);
}
.field-hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }

.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  background: var(--surface-2);
}
.dropzone strong { display: block; font-size: 13.5px; margin-bottom: 3px; }

/* ── Notes / callouts ──────────────────────────────────────────────────────── */

.note {
  display: flex; gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 18px;
}
.note strong { color: var(--text); }
.note.accent { border-left: 3px solid var(--teal); }
.note.warn { border-left: 3px solid var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--text-3); }

.empty { padding: 44px 20px; text-align: center; color: var(--text-2); }
.empty svg { width: 30px; height: 30px; color: var(--text-3); margin-bottom: 10px; }
.empty h3 { margin: 0 0 5px; font-size: 14.5px; color: var(--text); font-weight: 640; }
.empty p { margin: 0 auto; max-width: 400px; font-size: 13px; }

/* ── Progress meter ────────────────────────────────────────────────────────── */

.meter { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: var(--line); }
.meter span { display: block; height: 100%; }
.meter .m-ok { background: var(--ok); }
.meter .m-warn { background: var(--warn); }
.meter .m-danger { background: var(--danger); }
.meter-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 9px; font-size: 12px; color: var(--text-2);
}
.meter-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.meter-key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */

.stack-sm > * + * { margin-top: 4px; }
.section-gap { margin-top: 26px; }
.wrap-text { white-space: normal; max-width: 420px; }

.footer-note {
  padding: 0 28px 34px;
  color: var(--text-3);
  font-size: 12px;
  max-width: 780px;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar-head { padding: 12px 14px; }
  .sidebar-tag, .nav-label, .sidebar-foot label { display: none; }
  .nav { display: flex; gap: 4px; padding: 8px; }
  .nav-group { margin: 0; display: flex; gap: 4px; }
  .nav a.active::before { display: none; }
  .content, .page-head { padding-left: 16px; padding-right: 16px; }
}


/* ── Inline cell editing ───────────────────────────────────────────────────── */

/* Only failing cells are editable, so the input carries the error styling rather than
   the cell — the value stays legible while being obviously wrong. */
td.cell-edit { padding: 3px 6px; background: var(--danger-bg); }
td.cell-edit input {
  width: 100%;
  min-width: 130px;
  padding: 4px 7px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--danger-line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--danger);
  font-weight: 600;
}
td.cell-edit input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--text);
  font-weight: 500;
}
td.cell-edit input.is-dirty {
  border-color: var(--teal);
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 600;
}

.save-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  position: sticky; bottom: 0;
}

/* ── signed-in user box (sidebar foot) ─────────────────────────────────── */
.user-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-ident { display: flex; flex-direction: column; gap: 1px; text-decoration: none; min-width: 0; }
.user-ident .user-name {
  color: #F4F6F5; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-ident .user-role { color: var(--sidebar-dim, #9FB0AC); font-size: 11px; }
.user-ident:hover .user-name { color: var(--teal-soft, #6EC6BC); }
.user-actions { display: flex; align-items: center; gap: 6px; }
.user-actions .btn-quiet { color: #9FB0AC; }
.bell { position: relative; display: inline-flex; color: #9FB0AC; padding: 5px; border-radius: 6px; }
.bell:hover { color: #F4F6F5; background: rgba(255,255,255,.08); }
.bell-count {
  position: absolute; top: -2px; right: -4px;
  background: var(--teal, #05A995); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 3px 5px;
}

/* ── stacked forms (profile, settings) ─────────────────────────────────── */
form.stack { display: flex; flex-direction: column; gap: 13px; max-width: 420px; }
form.stack label { display: flex; flex-direction: column; gap: 5px;
                   font-size: 12.5px; font-weight: 600; color: var(--text); }
form.stack label .dim { font-weight: 400; }
/* Controls inherit the shared chrome above; only the disabled state is local. */
form.stack input:disabled { color: var(--text-3); background: var(--surface-2); }
form.stack button { align-self: flex-start; }

.assign-select {
  font: inherit; font-size: 12px; padding: 2px 22px 2px 6px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A959C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 6px center;
  color: var(--text-2); max-width: 160px;
}

/* ============================================================================
   Result classes & chart tokens — theme-agnostic, resolved per appearance
   ============================================================================ */

:root {
  --chart-1:     var(--teal-deep);
  --chart-2:     var(--text-3);
  --chart-grid:  var(--line);
  --chart-label: var(--text-2);
}

.up, .positive { color: var(--ok); }
.down, .negative { color: var(--danger); }

/* ============================================================================
   Groww appearance variant  —  data-appearance="groww" on <html>
   Clean white surfaces, black headings, #19a88b green accent, DM Sans.
   Opt-in from Settings → Organisation → Appearance; the Prism identity
   stays the default and none of these rules leak outside the variant.
   ============================================================================ */

[data-appearance="groww"] {
  --sans: "DM Sans", "Google Sans", Arial, sans-serif;

  /* Brand accents */
  --teal:        #19a88b;
  --teal-soft:   #57c6ab;
  --teal-deep:   #00825c;

  /* Surfaces */
  --bg:          #f0f3f8;
  --canvas:      #f0f3f8;
  --surface:     #ffffff;
  --surface-2:   #f4f7fb;
  --sidebar:     #ffffff;
  --sidebar-2:   #f4f7fb;

  /* Text — #1c1c1c base ink, pure black for headings/labels, slate for muted */
  --text:        #1c1c1c;
  --text-2:      #64748b;
  --text-3:      #94a3b8;
  --on-dark:     #1c1c1c;
  --on-dark-2:   #64748b;

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

  /* Status */
  --ok:          #00825c;
  --ok-bg:       #e9faf3;
  --ok-line:     #b9e8d6;
  --danger:      #ed5533;
  --danger-bg:   #fdeee9;
  --danger-line: #f7c9ba;
  --warn:        #a66a12;
  --warn-bg:     #faf3e2;
  --warn-line:   #ecd9ac;

  /* Charts */
  --chart-1:     #00856a;
  --chart-2:     #64748b;
  --chart-grid:  #e5e7eb;
  --chart-label: #64748b;

  --shadow:      0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --shadow-lg:   0 2px 6px rgba(15,23,42,.06), 0 12px 40px rgba(15,23,42,.10);
}

/* Black headings and labels */
[data-appearance="groww"] .page-title,
[data-appearance="groww"] .card-title,
[data-appearance="groww"] .metric-value,
[data-appearance="groww"] h1,
[data-appearance="groww"] h2,
[data-appearance="groww"] h3 { color: #000; }
[data-appearance="groww"] .metric-label,
[data-appearance="groww"] form.stack label,
[data-appearance="groww"] .field label { color: #000; }

/* Light sidebar: retire every light-on-dark literal from the default shell */
[data-appearance="groww"] .sidebar { border-right: 1px solid var(--line); }
[data-appearance="groww"] .nav-label,
[data-appearance="groww"] .sidebar-foot label { color: var(--text-2); }
[data-appearance="groww"] .nav a:hover { background: var(--surface-2); color: #000; }
[data-appearance="groww"] .nav a.active { background: #e9faf3; color: #00825c; }
[data-appearance="groww"] .nav a.active::before {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-soft) 100%);
}
[data-appearance="groww"] .nav .count { background: var(--surface-2); color: var(--text-2); }
[data-appearance="groww"] .nav .count.alert { background: var(--danger); color: #fff; }
[data-appearance="groww"] .sidebar-foot { border-top: 1px solid var(--line); }
[data-appearance="groww"] .sidebar-foot select { border-color: var(--line-strong); color: var(--text); }
[data-appearance="groww"] .user-ident .user-name { color: #000; }
[data-appearance="groww"] .user-ident:hover .user-name { color: var(--teal-deep); }
[data-appearance="groww"] .user-ident .user-role,
[data-appearance="groww"] .user-actions .btn-quiet,
[data-appearance="groww"] .bell { color: var(--text-2); }
[data-appearance="groww"] .bell:hover { color: #000; background: var(--surface-2); }
[data-appearance="groww"] .bell-count { background: var(--teal); }

/* The spectrum rule reads as a green band in this look */
[data-appearance="groww"] .spectrum {
  background: linear-gradient(90deg, #19a88b 0%, #57c6ab 55%, #e9faf3 100%);
}

/* Buttons: green fill, white text; hover darker, pressed darker still */
[data-appearance="groww"] .btn-primary {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
[data-appearance="groww"] .btn-primary:hover { background: #00825c; border-color: #00825c; }
[data-appearance="groww"] .btn-primary:active { background: #006749; border-color: #006749; }

/* Reporting presentation: centered 1200px column, pale-green metrics band */
[data-appearance="groww"] .content { max-width: 1200px; margin: 0 auto; }
[data-appearance="groww"] .metrics {
  background: #e9faf3;
  border: 1px solid #b9e8d6;
  border-radius: var(--radius);
  padding: 12px;
}
[data-appearance="groww"] .metric { border-color: #d6f0e5; }

/* Tables: alternating rows */
[data-appearance="groww"] .table-wrap tbody tr:nth-child(even) td { background: #fafaf2; }

/* ============================================================================
   Print — both appearances: navigation off, colors exact, A4 landscape
   ============================================================================ */

@page { size: A4 landscape; margin: 10mm; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .page-actions, .filters, .segmented, .save-bar, .card-actions,
  .demo-badge { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .page-head { position: static; border-bottom: 1px solid #ccc; }
  .content { max-width: none; padding: 4mm 0 0; }
  .card, .metric { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between;
         gap: 12px; margin: 18px 0 4px; }
.pager-page { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Accessibility ─────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 8px; top: -44px; z-index: 100;
  background: var(--surface); color: var(--teal-deep);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 14px; font-weight: 600; font-size: 13px;
  transition: top .12s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Readiness score + pipeline strip ──────────────────────────────────────── */
.readiness-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 18px; flex-wrap: wrap; }
.readiness-score {
  flex: 0 0 auto; min-width: 140px; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 18px; background: var(--surface);
  border-left: 4px solid var(--line-strong);
}
.readiness-score.grade-a { border-left-color: var(--ok); }
.readiness-score.grade-b { border-left-color: #4a9e6f; }
.readiness-score.grade-c { border-left-color: var(--warn); }
.readiness-score.grade-d { border-left-color: var(--danger); }
.rs-num { font-size: 30px; font-weight: 680; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-pct { font-size: 16px; font-weight: 600; color: var(--text-3); }
.rs-grade { font-size: 12px; font-weight: 600; margin-top: 4px; }
.rs-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.stage-strip {
  flex: 1 1 300px; display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 12px 16px; overflow-x: auto;
}
.stage-step { display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; flex: 1; min-width: 74px; text-align: center; }
.stage-step:not(:last-child)::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px;
  background: var(--line-strong); z-index: 0;
}
.stage-step.reached:not(:last-child)::after { background: var(--teal); }
.stage-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--line-strong); z-index: 1; }
.stage-step.reached .stage-dot { background: var(--teal); border-color: var(--teal); }
.stage-step.current .stage-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); }
.stage-name { font-size: 11px; font-weight: 600; color: var(--text-2); }
.stage-step.current .stage-name { color: var(--text); }
.stage-at { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
tr.is-selected { background: color-mix(in srgb, var(--teal) 8%, transparent); }

/* ── Notifications settings + checkbox rows ────────────────────────────────── */
.notif-table th.notif-ch, .notif-table td.notif-ch { text-align: center; width: 64px; }
.notif-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.pill-xs { font-size: 10px; padding: 1px 6px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 14px; }
.check-inline { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 400; cursor: pointer; }
.check-inline input { width: auto; }
.check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
  font-weight: 400; cursor: pointer; }
.check-row input { width: auto; margin-top: 2px; }
.form-actions { margin: 14px 0 26px; }

/* ── Layout width helpers (named, so cards read the same everywhere) ────────── */
.card-640 { max-width: 640px; }
.card-560 { max-width: 560px; }
.card-460 { max-width: 460px; }
.w-auto { width: auto; }
.max-none { max-width: none; }

/* ── Spacing utilities (the audit's inline-style cluster lives here now) ────── */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: 6px; }
.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 2px; }
.mt-4 { margin-top: 4px; }
.mb-4 { margin-bottom: 4px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mr-4 { margin-right: 4px; }
.ml-auto { margin-left: auto; }
/* Block margins that also zero the sides (for <p>/<ul> whose UA margins differ). */
.mt-block-6 { margin: 6px 0 0; }
.mt-block-8 { margin: 8px 0 0; }
.mt-block-12 { margin: 12px 0 0; }

/* ── Type + colour utilities ──────────────────────────────────────────────── */
.fs-11 { font-size: 11.5px; }
.fs-12 { font-size: 12px; }
.fs-125 { font-size: 12.5px; }
.fs-13 { font-size: 13px; }
.fs-135 { font-size: 13.5px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.c-text { color: var(--text); }
.c-text-2 { color: var(--text-2); }
.c-text-3 { color: var(--text-3); }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.pointer { cursor: pointer; }
.self-start { align-self: flex-start; }
.col-4 { display: flex; flex-direction: column; gap: 4px; }
.c-warn { color: var(--warn); }
.c-danger { color: var(--danger); }
.pre-line { white-space: pre-line; }
.nowrap { white-space: nowrap; }

/* ── Flex / layout helpers ────────────────────────────────────────────────── */
.flex-1 { flex: 1; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px; align-items: start; }
.two-col-35 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.two-col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.step-list { margin: 0; padding-left: 18px; line-height: 1.9; font-size: 13px; }
.col-6 { display: flex; flex-direction: column; gap: 6px; }
.pl-18 { padding-left: 18px; }
.cell-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px; }
.card-danger { border-color: var(--danger-line); }
.bg-danger-soft { background: var(--danger-bg); }
.note-row { display: flex; gap: 8px; align-items: flex-start; }
.note-input { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13px; }
.note-item { padding: 9px 0; border-top: 1px solid var(--line); }
.settings-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.action-row { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; flex-wrap: wrap; }
.list-inset { margin: 6px 0 0; padding-left: 18px; }
.bt { border-top: 1px solid var(--line); }

/* Stacked settings form + its field labels (was repeated inline 7×). */
.field-stack { display: flex; flex-direction: column; gap: 13px; max-width: 460px; }
.field-label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  font-weight: 600; }
.field-label .dim { font-weight: 400; }

/* A plain checkbox/radio option row (label wrapping an input + text). */
.opt { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.opt input { width: auto; }
/* When an .opt sits inside a stacked form, out-specify `form.stack label` (which would
   otherwise force column layout, 5px gap and bold). */
.stack label.opt { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
/* Two-column grid of options (channel/category pickers). */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.opt-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 14px; }

/* An inline text input that sits in a toolbar/filter row rather than a form stack. */
.inline-input { padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13px; }
.inline-input-sm { padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 12.5px; }
.inline-row { display: flex; align-items: center; gap: 6px; }
.mw-150 { min-width: 150px; }
.mw-180 { min-width: 180px; }
.h-6 { height: 6px; }
.mw-220 { min-width: 220px; }
.mw-240 { min-width: 240px; }

/* Left accent bar on a status card, and a measure sub-heading. */
.accent-ok { border-left: 3px solid var(--ok); }
.cols-fix { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
.accent-teal { border-left-color: var(--teal); }
.sub-head { font-size: 14px; margin: 22px 0 10px; color: var(--text-2); }
.pad-30 { padding: 30px; }

/* Legend swatches reuse the palette without a per-span inline background. */
.sw-ok { background: var(--ok); }
.sw-warn { background: var(--warn); }
.sw-danger { background: var(--danger); }
.sw-neutral { background: var(--line-strong); }

/* Progress-meter fills: the only dynamic value is the width, passed as --fill so
   the color stays in the .m-ok/.m-warn/.m-danger classes, not inline. */
.meter span[style*="--fill"] { width: var(--fill, 0); }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 1 interaction layer — dropdown cells, per-SKU issues, profile menu,
   toasts, loading bar, grid tools. All token-based; light + dark inherit.
   ══════════════════════════════════════════════════════════════════════════ */

/* Editable grid cells now include <select>; give it input parity. */
td.cell-edit select {
  width: 100%; min-width: 130px; padding: 4px 7px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--danger-line); border-radius: 4px;
  background: var(--surface); color: var(--danger); font-weight: 600;
}
td.cell-edit select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--text); font-weight: 500; outline: none;
}
td.cell-edit .is-dirty {
  border-color: var(--teal) !important; background: var(--ok-bg) !important;
  color: var(--ok) !important; font-weight: 600;
}

/* ── profile / account menu ───────────────────────────────────────────────── */
.user-menu { position: relative; flex: 1; min-width: 0; }
.user-menu > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 5px 6px; border-radius: 8px; min-width: 0;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(255,255,255,.06); }
.user-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  background: var(--teal); color: #fff;
}
.user-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-caret { margin-left: auto; color: #9FB0AC; font-size: 11px; transition: transform .15s ease; }
.user-menu[open] .user-caret { transform: rotate(180deg); }
.user-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 6px; overflow: hidden;
  animation: pop-in .12s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.user-pop-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.user-pop-head .user-name { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.user-pop-head .user-email { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pop a, .user-pop-signout {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--text); text-decoration: none; border: 0; background: none;
  cursor: pointer; font: inherit;
}
.user-pop a:hover, .user-pop-signout:hover { background: var(--surface-2); }
.user-pop-signout { color: var(--danger); border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 7px 7px; }

/* ── per-SKU issue accordion ──────────────────────────────────────────────── */
.sku-issue { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; background: var(--surface); overflow: hidden; }
.sku-issue > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 11px 14px; font-size: 13.5px;
}
.sku-issue > summary::-webkit-details-marker { display: none; }
.sku-issue > summary:hover { background: var(--surface-2); }
.sku-caret { color: var(--text-3); transition: transform .15s ease; display: inline-block; }
.sku-issue[open] .sku-caret { transform: rotate(90deg); }
.sku-row { color: var(--text-3); font-size: 12px; }
.sku-code { font-weight: 600; }
.sku-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.sku-body { padding: 4px 14px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.issue-line { padding: 11px 0; border-bottom: 1px solid var(--line); }
.issue-line:last-of-type { border-bottom: 0; }
.issue-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.issue-field { font-weight: 600; }
.issue-msg { color: var(--text-2); font-size: 13px; }
.issue-hint { font-size: 12.5px; margin: 4px 0 0 0; }
.issue-fix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.issue-cur { font-size: 12px; }
.issue-fix input, .issue-fix select {
  padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px;
  font: inherit; font-size: 13px; background: var(--surface); color: var(--text); min-width: 200px;
}
.issue-fix input:focus, .issue-fix select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}
.issue-fix .is-dirty { border-color: var(--teal); background: var(--ok-bg); }
.apply-suggest.applied { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.sku-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ── grid filter + sortable headers ───────────────────────────────────────── */
.grid-filter-input {
  padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 7px;
  font: inherit; font-size: 13px; background: var(--surface); color: var(--text); min-width: 180px;
}
.grid-filter-input:focus { outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable[data-dir="asc"]::after { content: " ▲"; font-size: 9px; color: var(--teal); }
th.sortable[data-dir="desc"]::after { content: " ▼"; font-size: 9px; color: var(--teal); }

/* ── loading bar ──────────────────────────────────────────────────────────── */
.loadbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
  transition: width .3s ease, opacity .3s ease; opacity: 0; pointer-events: none;
}
.loadbar.on { width: 82%; opacity: 1; transition: width 8s cubic-bezier(.1,.7,.1,1), opacity .2s; }

/* ── toasts ───────────────────────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex;
  flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  background: var(--ink, #101B1E); color: #fff; padding: 12px 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 8px 26px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
  max-width: 340px; border-left: 3px solid var(--teal);
}
.toast.in { opacity: 1; transform: none; }
.toast.warn, .toast.error { border-left-color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .loadbar, .toast, .user-caret, .sku-caret, .user-pop { transition: none; animation: none; }
}