/* ============================================================================
   Einstein Tools — design system
   Built from the tokens in the "Pricing tool dashboard redesign" handoff.
   Single hand-written stylesheet; no build step. Screen-specific CSS belongs
   in a {% block page_css %} inside that screen's template, not here.
   ========================================================================== */

:root {
  /* color */
  --et-navy-900:#142949;
  --et-navy:#1B3764;
  --et-blue:#2B7DE0;
  --et-blue-hover:#1D66BF;
  --et-blue-100:#EAF2FC;
  --et-blue-soft:#7FB2F0;
  --et-ink:#17233B;
  --et-ink-marketing:#1B2437;
  --et-sub:#5B6B84;
  --et-muted:#8B99B0;
  --et-faint:#9AA7BC;
  --et-line:#E2E8F1;
  --et-line-soft:#EDF1F7;
  --et-line-soft-2:#F2F5F9;
  --et-input-border:#D4DDEA;
  --et-input-border-hover:#B9CCE8;
  --et-bg:#F4F6FA;
  --et-row-alt:#FBFCFE;
  --et-row-alt-2:#F7F9FC;
  --et-table-head:#F1F5FA;
  --et-table-title:#F9FAFC;
  --et-green:#1E8A4C;
  --et-green-hover:#177040;
  --et-green-bg:#E3F4EA;
  --et-red:#C43D3D;
  --et-red-bg:#FBEAEA;
  --et-amber:#B97D10;
  --et-amber-bg:#FCF3E1;
  --et-amber-border:#EAD9AE;
  --et-amber-text:#7A5608;
  --et-amber-row:#FDF9F1;
  --et-orange:#E07B2B;
  /* metrics */
  --et-radius:12px;
  --et-radius-sm:8px;
  --et-topbar-h:56px;
  --et-rail-w:64px;
  --et-font:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --et-display:'Bricolage Grotesque',var(--et-font);
}

/* ---------------------------------------------------------------- base ---- */

body.et-app {
  margin:0;
  font-family:var(--et-font);
  background:var(--et-bg);
  color:var(--et-ink);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
body.et-app a { color:var(--et-blue); text-decoration:none; }
body.et-app a:hover { color:var(--et-blue-hover); }
body.et-app input::placeholder, body.et-app textarea::placeholder { color:var(--et-faint); }
.et-app .material-symbols-rounded {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select:none;
}
.et-num, .et-app table td.et-num, .et-app .et-money { font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- shell ---- */

.et-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.et-topbar {
  height:var(--et-topbar-h); flex:none; background:#fff;
  border-bottom:1px solid var(--et-line);
  display:flex; align-items:center; gap:18px; padding:0 20px; z-index:20;
}
.et-rail-toggle + .et-logo { margin-left:-8px; }
.et-logo { display:flex; align-items:center; gap:10px; }
.et-logo img { width:27px; height:auto; display:block; }
.et-wordmark { font-weight:700; font-size:13.5px; letter-spacing:.12em; color:var(--et-navy); white-space:nowrap; }
.et-wordmark span { color:var(--et-blue); }
.et-topbar-div { width:1px; height:24px; background:var(--et-line); flex:none; }
.et-spacer { flex:1; }

.et-yard-switch {
  display:flex; align-items:center; gap:8px; background:var(--et-bg);
  border:1px solid var(--et-line); border-radius:var(--et-radius-sm); height:34px;
  padding:0 12px; font-family:var(--et-font); font-size:13px; font-weight:600;
  color:var(--et-ink); cursor:pointer; white-space:nowrap;
}
.et-yard-switch:hover { border-color:var(--et-input-border-hover); }
.et-dot { width:8px; height:8px; border-radius:50%; background:var(--et-green); flex:none; }

.et-admin-pill {
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px;
  border-radius:99px; background:var(--et-amber-bg); color:var(--et-amber-text);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; white-space:nowrap;
}
.et-admin-pill .material-symbols-rounded { font-size:14px; }

.et-topbar-actions { display:flex; align-items:center; gap:6px; }
.et-topbar-btn {
  height:34px; border:1px solid var(--et-input-border); background:#fff;
  border-radius:var(--et-radius-sm); cursor:pointer; color:var(--et-sub);
  display:inline-flex; align-items:center; gap:7px; padding:0 12px;
  font-family:var(--et-font); font-size:13px; font-weight:600;
  white-space:nowrap; position:relative; text-decoration:none; line-height:1;
}
.et-topbar-btn:hover {
  background:var(--et-bg); border-color:var(--et-input-border-hover); color:var(--et-ink);
}
.et-topbar-btn .material-symbols-rounded { font-size:19px; }

.et-body { flex:1; display:flex; min-height:0; }

/* rail */
.et-rail {
  width:var(--et-rail-w); flex:none; background:linear-gradient(180deg,#1B3764,#16294A);
  display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:4px;
  z-index:10; overflow-y:auto; scrollbar-width:none;
}
.et-rail::-webkit-scrollbar { display:none; }
.et-rail-item {
  position:relative; width:44px; height:44px; flex:none; display:flex; align-items:center;
  justify-content:center; border-radius:10px; color:#AEC3E2; text-decoration:none;
}
.et-rail-item:hover { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.et-rail-item.is-active {
  background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 3px 0 0 var(--et-blue);
}
.et-rail-item .material-symbols-rounded { font-size:22px; }
/* Anchors the count badge to the icon so it stays on the icon's top-right in
   both rail states. Offsets are -8px, which reproduces the collapsed position
   the badge had when it was anchored to the 44px row. */
.et-rail-ico {
  position:relative; flex:none; display:inline-flex;
  align-items:center; justify-content:center;
}
.et-rail-badge {
  position:absolute; top:-8px; right:-8px; background:var(--et-amber); color:#fff;
  font-size:9.5px; font-weight:700; border-radius:99px; line-height:1;
  min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}
/* `display:flex` above outranks the UA rule behind the [hidden] attribute, so
   restore it explicitly -- otherwise an empty pill shows before the count lands. */
.et-rail-badge[hidden] { display:none; }
/* Nothing pending: still shown, but quiet -- a red/amber "0" reads as an alert. */
.et-rail-badge.is-zero { background:rgba(255,255,255,.18); color:rgba(255,255,255,.75); }
.et-rail-label {
  position:absolute; left:calc(100% + 18px); top:50%; margin-top:-14px; background:var(--et-navy-900);
  color:#fff; font-size:12px; font-weight:600; white-space:nowrap; padding:6px 11px;
  border-radius:7px; box-shadow:0 4px 12px rgba(20,41,73,.35); z-index:30;
  opacity:0; transform:translateX(-4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.et-rail-item:hover .et-rail-label { opacity:1; transform:translateX(0); }
.et-rail-div { width:28px; height:1px; background:rgba(255,255,255,.16); margin:8px 0; flex:none; }

/* --------------------------------------------------------- rail expanded ---
   The rail can be pinned open, showing each label inline instead of as a hover
   flyout. State lives in localStorage and is applied to <html> by an inline
   script in base.html BEFORE first paint, so a user who leaves it open doesn't
   watch it snap from 64px to 232px on every page load. */
/* Lives at the far left of the TOP BAR, with the brand to its right, so the
   brand doesn't shift when the rail changes width. It toggles the rail only. */
.et-rail-toggle {
  width:36px; height:36px; flex:none; margin-left:-6px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  border-radius:var(--et-radius-sm); color:var(--et-sub);
}
.et-rail-toggle:hover { background:var(--et-bg); color:var(--et-ink); }
.et-rail-toggle .material-symbols-rounded { font-size:23px; }

html.et-rail-open { --et-rail-w:232px; }
html.et-rail-open .et-rail { align-items:stretch; padding:12px 10px; }
html.et-rail-open .et-rail-item {
  width:auto; height:40px; justify-content:flex-start; gap:12px; padding:0 10px;
}
html.et-rail-open .et-rail-div { width:auto; margin:8px 6px; }
/* Inline label, not a flyout. The hover handler sets position/left/top inline
   when collapsed, so those have to be overridden rather than merely unset. */
html.et-rail-open .et-rail-label {
  position:static !important; left:auto !important; top:auto !important;
  margin-top:0 !important; opacity:1; transform:none; background:none;
  box-shadow:none; padding:0; border-radius:0; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; transition:none;
}
@media (prefers-reduced-motion:no-preference) {
  .et-rail { transition:width .16s ease; }
}

/* content */
.et-main { flex:1; min-width:0; overflow:auto; background:var(--et-bg); padding:22px 16px; }

/* ---------------------------------------------------------- page header --- */

.et-page-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.et-eyebrow { font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--et-muted); margin-bottom:3px; }
.et-title { font-size:22px; font-weight:700; color:var(--et-ink); margin:0; line-height:1.2; }
.et-page-actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- card ---- */

.et-card { background:#fff; border:1px solid var(--et-line); border-radius:var(--et-radius); }
.et-card + .et-card { margin-top:14px; }
.et-card-head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--et-line-soft);
}
.et-card-head.is-toggle { cursor:pointer; user-select:none; }
.et-card-title { font-size:15.5px; font-weight:700; color:var(--et-ink); }
.et-card-sub { font-size:13px; color:var(--et-sub); }
.et-card-head .material-symbols-rounded { font-size:19px; color:var(--et-sub); }
.et-card-body { padding:16px; }
.et-card-body.is-flush { padding:0; }
.et-card.is-collapsed > .et-card-body { display:none; }
.et-card.is-collapsed > .et-card-head { border-bottom:none; }
.et-collapse-icon { margin-left:auto; color:var(--et-muted); }

/* Navy section band. Every screen's section headers use this so a page reads as
   a stack of clearly-labelled sections rather than a wall of white cards.
   `.pv-band-sub` is the historical name kept as an alias: preview/fdr/location
   markup and the design handoff both use it.
   The band carries its own top radius rather than the card clipping it with
   overflow:hidden -- that clip also swallowed any dropdown menu long enough to
   run past the card's bottom edge. */
.et-card-head.is-band,
.pv-band-sub {
  background:var(--et-navy); color:#fff; border-bottom:none;
  padding:11px 16px; border-radius:var(--et-radius) var(--et-radius) 0 0;
}
.et-card-head.is-band .et-card-title,
.pv-band-sub .et-card-title { color:#fff; font-size:15.5px; }
.et-card-head.is-band .et-card-sub,
.pv-band-sub .et-card-sub { color:rgba(255,255,255,.65); }
.et-card-head.is-band .material-symbols-rounded,
.pv-band-sub .material-symbols-rounded { color:rgba(255,255,255,.8); }
.et-card-head.is-band .et-btn-ghost,
.pv-band-sub .et-btn-ghost {
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff;
}
.et-card-head.is-band .et-btn-ghost:hover,
.pv-band-sub .et-btn-ghost:hover { background:rgba(255,255,255,.2); border-color:#fff; color:#fff; }
/* The whole band toggles its section (page.js .pv-section-head handler). */
.pv-section-head { cursor:pointer; user-select:none; }

/* --------------------------------------------------------------- button --- */

.et-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 14px; border-radius:var(--et-radius-sm); border:1px solid transparent;
  font-family:var(--et-font); font-size:13px; font-weight:600; cursor:pointer;
  background:var(--et-blue); color:#fff; white-space:nowrap; text-decoration:none;
  line-height:1;
}
.et-btn:hover { background:var(--et-blue-hover); color:#fff; text-decoration:none; }
.et-btn .material-symbols-rounded { font-size:18px; }
.et-btn.et-lg { height:38px; padding:0 18px; }
.et-btn.et-sm { height:30px; padding:0 11px; font-size:12px; }
.et-btn-green { background:var(--et-green); }
.et-btn-green:hover { background:var(--et-green-hover); }
.et-btn-orange { background:var(--et-orange); }
.et-btn-orange:hover { background:#C96A1F; }
.et-btn-ghost { background:#fff; color:var(--et-ink); border-color:var(--et-input-border); }
.et-btn-ghost:hover { background:#fff; color:var(--et-ink); border-color:var(--et-input-border-hover); }
.et-btn-danger { background:#fff; color:var(--et-red); border-color:#F0D4D4; }
.et-btn-danger:hover { background:var(--et-red-bg); color:var(--et-red); }
.et-btn-amber { background:var(--et-amber); color:#fff; }
.et-btn-amber:hover { background:#A26C0D; color:#fff; }
.et-btn[disabled], .et-btn.is-disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

.et-icon-btn {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--et-radius-sm); border:1px solid var(--et-input-border); background:#fff;
  color:var(--et-sub); cursor:pointer; padding:0;
}
.et-icon-btn:hover { border-color:var(--et-input-border-hover); color:var(--et-ink); }
.et-icon-btn .material-symbols-rounded { font-size:19px; }
.et-icon-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* --------------------------------------------------------------- inputs --- */

.et-input, .et-select, .et-fake-select, .et-app select.et-select, .et-app input.et-input {
  height:34px; border-radius:var(--et-radius-sm); border:1px solid var(--et-input-border);
  background:#fff; padding:0 11px; font-family:var(--et-font); font-size:13px;
  color:var(--et-ink); box-sizing:border-box; width:100%; outline:none;
}
.et-input:hover, .et-select:hover, .et-fake-select:hover { border-color:var(--et-input-border-hover); }
.et-input:focus, .et-select:focus, textarea.et-input:focus {
  border-color:var(--et-blue); box-shadow:0 0 0 3px var(--et-blue-100);
}
.et-input.et-lg, .et-select.et-lg { height:44px; font-size:13.5px; padding:0 13px; }
.et-input.et-sm, .et-select.et-sm { height:30px; font-size:12px; padding:0 8px; }
textarea.et-input { height:auto; min-height:74px; padding:9px 11px; line-height:1.5; resize:vertical; }
.et-input[disabled], .et-select[disabled], .et-input.is-locked, .et-select.is-locked {
  background:var(--et-row-alt-2); color:var(--et-muted); cursor:not-allowed;
}
.et-app select.et-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238B99B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:30px;
}
.et-fake-select { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; }
.et-fake-select .material-symbols-rounded { font-size:18px; color:var(--et-muted); }
.et-field { display:block; }
.et-label {
  display:block; font-size:14px; font-weight:650; color:var(--et-ink);
  letter-spacing:.01em; margin-bottom:5px; line-height:1.35;
}
.et-help { font-size:11.5px; color:var(--et-muted); margin-top:5px; line-height:1.45; }

/* Input shell: one bordered box holding a leading icon plus a borderless input,
   so the pair reads as a single control.
   The inner rule needs the body.et-app prefix to out-specify einstein-compat's
   `body.et-app input[type=text]` (0,2,1) -- without it the input keeps its own
   border, white fill and 34px height and the control renders as a visible box
   inside a box. */
.et-inputshell {
  display:flex; align-items:center; gap:7px; background:#fff;
  border:1px solid var(--et-input-border); border-radius:var(--et-radius-sm);
  height:34px; padding:0 10px; box-sizing:border-box;
}
.et-inputshell:hover { border-color:var(--et-input-border-hover); }
.et-inputshell:focus-within { border-color:var(--et-blue); box-shadow:0 0 0 3px var(--et-blue-100); }
.et-inputshell > .material-symbols-rounded { font-size:17px; color:var(--et-muted); flex:none; }
body.et-app .et-inputshell > input,
body.et-app .et-inputshell > input[type=text] {
  border:none; outline:none; background:transparent; box-shadow:none;
  padding:0; height:100%; min-width:0; width:100%;
  font-family:var(--et-font); font-size:13px; color:var(--et-ink);
}
/* A row of labelled controls. Aligns on the TOP edge and reserves a consistent
   label height, so a control whose label wraps -- or one that is intrinsically
   taller, e.g. a multi-select -- can't knock the row onto three baselines. */
.et-fields { display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-start; }
.et-fields > .et-field { display:flex; flex-direction:column; min-width:0; flex:0 1 auto; }
.et-fields > .et-field > .et-label { min-height:30px; display:flex; align-items:flex-end; }
.et-fields .ui.selection.dropdown, .et-fields .ui.dropdown,
.et-fields .ui.input, .et-fields .et-input { width:100%; min-width:0; }
.et-check { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--et-ink); cursor:pointer; }
.et-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--et-blue); margin:0; cursor:pointer; }

/* lock (permission tiers) */
.et-lock-chip {
  display:inline-flex; align-items:center; gap:4px; margin-top:5px;
  font-size:10.5px; font-weight:600; color:var(--et-muted); cursor:pointer;
}
.et-lock-chip .material-symbols-rounded { font-size:13px; }
.et-lock-chip:hover { color:var(--et-blue); }
/* On a navy band the muted grey is unreadable. */
.et-card-head.is-band .et-lock-chip,
.pv-band-sub .et-lock-chip { color:rgba(255,255,255,.72); margin-top:0; }
.et-card-head.is-band .et-lock-chip:hover,
.pv-band-sub .et-lock-chip:hover { color:#fff; }

/* tag / multi-select */
.et-taginput {
  border:1px solid var(--et-input-border); border-radius:var(--et-radius-sm); background:#fff;
  min-height:34px; padding:5px 7px; display:flex; flex-wrap:wrap; gap:5px; align-items:center;
}
.et-taginput:focus-within { border-color:var(--et-blue); box-shadow:0 0 0 3px var(--et-blue-100); }
.et-tag {
  display:inline-flex; align-items:center; gap:4px; background:var(--et-blue-100);
  color:var(--et-navy); font-size:12px; font-weight:600; border-radius:99px; padding:3px 8px;
}
.et-tag .material-symbols-rounded { font-size:14px; cursor:pointer; }
.et-taginput input { border:none; outline:none; font-family:var(--et-font); font-size:12.5px; flex:1; min-width:70px; height:22px; }

/* --------------------------------------------------------------- chips ---- */

.et-chip {
  display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:5px 11px;
  font-size:12.5px; font-weight:600; border:1px solid var(--et-line); background:#fff;
  color:var(--et-sub); cursor:pointer; white-space:nowrap;
}
.et-chip:hover { border-color:var(--et-input-border-hover); color:var(--et-ink); }
.et-chip.is-active { background:var(--et-navy); border-color:var(--et-navy); color:#fff; }
.et-chip.is-static { cursor:default; }
.et-chip-count { opacity:.75; font-weight:600; }
.et-chip-green { background:var(--et-green-bg); border-color:transparent; color:var(--et-green); cursor:default; }
.et-chip-red { background:var(--et-red-bg); border-color:transparent; color:var(--et-red); cursor:default; }
.et-chip-amber { background:var(--et-amber-bg); border-color:transparent; color:var(--et-amber-text); cursor:default; }
.et-chip-blue { background:var(--et-blue-100); border-color:transparent; color:var(--et-navy); cursor:default; }
.et-chip .material-symbols-rounded { font-size:15px; }
.et-chiprow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* ---------------------------------------------------------- stat cards ---- */

.et-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:14px; }
.et-stat { background:#fff; border:1px solid var(--et-line); border-radius:var(--et-radius); padding:14px 16px; }
.et-stat-label { font-size:12px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--et-sub); }
.et-stat-value { font-size:24px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; line-height:1.15; }
.et-stat-note { font-size:11.5px; color:var(--et-sub); margin-top:5px; line-height:1.4; }
.et-pos { color:var(--et-green); }
.et-neg { color:var(--et-red); }

/* ------------------------------------------------------------- banners ---- */

.et-banner {
  display:flex; align-items:flex-start; gap:10px; border-radius:10px; padding:11px 14px;
  font-size:12.5px; line-height:1.5; margin-bottom:14px;
  background:var(--et-blue-100); color:var(--et-navy);
}
.et-banner .material-symbols-rounded { font-size:18px; flex:none; margin-top:1px; }
.et-banner-amber { background:var(--et-amber-bg); border:1px solid var(--et-amber-border); color:var(--et-amber-text); }
.et-banner-green { background:var(--et-green-bg); color:#146035; }
.et-banner-red { background:var(--et-red-bg); color:var(--et-red); }

/* --------------------------------------------------------- go-live nudge --
 * A promotion, not a warning: light blue/navy band, never the amber/red
 * banner colors. One family used by the shell banner (templates/base.html),
 * the Settings page-actions button/lock chips and the Scorecard callout, so
 * the four touchpoints read as one nudge rather than four different ones. */
.et-golive {
  display:flex; align-items:center; gap:12px; min-height:40px; border-radius:var(--et-radius);
  padding:9px 16px; margin-bottom:14px; background:var(--et-blue-100); color:var(--et-navy);
  font-size:13px; line-height:1.4;
}
.et-golive-ico { font-size:20px; flex:none; color:var(--et-blue); }
.et-golive-copy { flex:1; }
.et-golive-actions { display:flex; align-items:center; gap:10px; flex:none; }
.et-golive-x {
  background:none; border:none; padding:0 2px; margin:0; cursor:pointer; line-height:1;
  font-size:20px; color:var(--et-navy); opacity:.55;
}
.et-golive-x:hover { opacity:1; }
@media (max-width:640px) {
  .et-golive { flex-wrap:wrap; padding:10px 14px; }
  .et-golive-copy { flex-basis:100%; }
  .et-golive-actions { margin-left:auto; }
}

/* --------------------------------------------------------- segmented UI --- */

.et-seg { display:inline-flex; background:#fff; border:1px solid var(--et-line); border-radius:9px; padding:3px; gap:3px; }
.et-seg button, .et-seg a {
  border:none; background:transparent; border-radius:7px; height:30px; padding:0 14px;
  font-family:var(--et-font); font-size:12.5px; font-weight:600; color:var(--et-sub);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.et-seg button:hover, .et-seg a:hover { color:var(--et-ink); }
.et-seg .is-active, .et-seg button.is-active, .et-seg a.is-active { background:var(--et-navy); color:#fff; }

/* underline tabs (Settings) */
.et-tabs { display:flex; gap:2px; border-bottom:1px solid var(--et-line); margin-bottom:16px; }
.et-tabs button, .et-tabs a {
  border:none; background:transparent; padding:10px 15px; font-family:var(--et-font);
  font-size:13px; font-weight:600; color:var(--et-sub); cursor:pointer; text-decoration:none;
}
.et-tabs .is-active { color:var(--et-navy); box-shadow:inset 0 -2px 0 var(--et-blue); }

/* --------------------------------------------------------------- tables --- */

/* "celled" settings tables (Days in Stock, Minimum Price, upcharge, rollback…) */
.et-table-wrap { overflow-x:auto; }
table.et-table { width:100%; border-collapse:collapse; font-size:12.5px; }
table.et-table > thead > tr > th {
  background:var(--et-table-head); text-align:left; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--et-sub);
  padding:9px 10px; border-bottom:1px solid var(--et-line); white-space:nowrap;
}
table.et-table > tbody > tr > td {
  padding:8px 10px; border-bottom:1px solid var(--et-line-soft-2); color:var(--et-ink);
  vertical-align:middle;
}
table.et-table > tbody > tr:last-child > td { border-bottom:none; }
table.et-table > tbody > tr:hover { background:#EFF4FA; }
table.et-table.is-zebra > tbody > tr:nth-child(even) { background:var(--et-row-alt); }
table.et-table.is-zebra > tbody > tr:nth-child(even):hover { background:#EFF4FA; }
table.et-table td.et-r, table.et-table th.et-r { text-align:right; font-variant-numeric:tabular-nums; }
table.et-table tfoot td { background:var(--et-row-alt-2); font-weight:700; padding:9px 10px; border-top:1px solid var(--et-line); }
.et-table-title {
  background:var(--et-table-title); border-bottom:1px solid var(--et-line);
  padding:10px 14px; font-size:13px; font-weight:700; color:var(--et-ink);
  border-radius:var(--et-radius) var(--et-radius) 0 0;
}

/* status cells */
.et-status { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; border-radius:99px; padding:3px 9px; }
.et-status .material-symbols-rounded { font-size:14px; }
.et-status-green { background:var(--et-green-bg); color:var(--et-green); }
.et-status-amber { background:var(--et-amber-bg); color:var(--et-amber-text); }
.et-status-red { background:var(--et-red-bg); color:var(--et-red); }
tr.et-row-amber > td { background:var(--et-amber-row); }
tr.et-row-red > td { background:var(--et-red-bg); }

/* delta chips */

/* pagination */
.et-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-top:1px solid var(--et-line-soft); font-size:12px; color:var(--et-sub); flex-wrap:wrap; }
.et-pager-nums { display:flex; align-items:center; gap:4px; }
.et-pager-nums a, .et-pager-nums button, .et-pager-nums span.et-page {
  min-width:28px; height:28px; padding:0 8px; border-radius:6px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:600;
  color:var(--et-sub); background:transparent; border:none; cursor:pointer; text-decoration:none;
}
.et-pager-nums a:hover, .et-pager-nums button:hover { background:var(--et-bg); }
.et-pager-nums .is-active { background:var(--et-blue-100); color:var(--et-blue-hover); }

/* ---------------------------------------------------- shared parts table -- */
/* Column order is identical to today's DataTable — do not reorder.           */

.et-parts-wrap { overflow-x:auto; }
.et-parts { min-width:1300px; }
.et-parts-row {
  display:grid;
  grid-template-columns:24px 22px 70px minmax(68px,1.4fr) 58px 40px 36px 28px 34px 30px 40px 32px 32px 42px 34px minmax(82px,1.7fr) 50px 54px 96px 78px 54px 54px 60px 60px;
  column-gap:3px; padding:6px 8px; align-items:center;
}
.et-parts-head {
  font-size:9.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--et-muted); border-bottom:1px solid var(--et-line); align-items:flex-end;
  line-height:1.25;
}
.et-parts-body .et-parts-row { font-size:11.5px; border-bottom:1px solid var(--et-line-soft-2); }
.et-parts-body .et-parts-row:hover { background:#EFF4FA; }
.et-parts-row .et-r { text-align:right; font-variant-numeric:tabular-nums; }
.et-parts-row .et-ell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.et-parts-row .et-wrap { white-space:normal; font-size:11px; line-height:1.35; }
.et-parts-row.is-review { background:var(--et-amber-row); box-shadow:inset 3px 0 0 var(--et-amber); }
.et-parts-row.is-approved { opacity:.6; box-shadow:inset 3px 0 0 var(--et-green); background:#fff; }
.et-parts-x { border:none; background:transparent; color:var(--et-red); cursor:pointer; padding:0; display:flex; align-items:center; border-radius:4px; }
.et-parts-x:hover { background:var(--et-red-bg); }
.et-parts-x .material-symbols-rounded { font-size:15px; }
.et-trend { color:var(--et-green); }
.et-trend .material-symbols-rounded { font-size:15px; }
.et-price-input { height:26px; border-radius:6px; border:1px solid var(--et-input-border); width:100%; text-align:right; font-size:11.5px; padding:0 5px; font-family:var(--et-font); font-variant-numeric:tabular-nums; box-sizing:border-box; }
.et-price-input.is-computed { border-color:var(--et-blue); background:var(--et-blue-100); }
.et-ok-btn { height:24px; padding:0 8px; border-radius:6px; background:var(--et-amber); color:#fff; border:none; font-family:var(--et-font); font-size:11px; font-weight:700; cursor:pointer; }
.et-ok-btn:hover { background:#A26C0D; }
.et-ok-done { color:var(--et-green); display:inline-flex; }
.et-ok-done .material-symbols-rounded { font-size:17px; }
.et-cell-flag { background:var(--et-red-bg); border-radius:4px; padding:2px 4px; }

/* --------------------------------------------------------------- misc ----- */

.et-grid { display:grid; gap:14px; }
.et-grid-2 { grid-template-columns:repeat(auto-fit,minmax(460px,1fr)); }
.et-grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.et-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.et-muted { color:var(--et-muted); }
.et-sub { color:var(--et-sub); }
.et-note { font-size:11.5px; color:var(--et-muted); line-height:1.55; }
.et-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.et-search {
  position:relative; display:inline-flex; align-items:center;
}
.et-search .material-symbols-rounded { position:absolute; left:9px; font-size:17px; color:var(--et-muted); pointer-events:none; }
.et-search input { padding-left:31px; width:210px; }
.et-empty { padding:34px 16px; text-align:center; color:var(--et-muted); font-size:13px; }
.et-divider { height:1px; background:var(--et-line-soft); margin:14px 0; }
.et-progress { height:6px; border-radius:99px; background:var(--et-line-soft); overflow:hidden; }
.et-progress > span { display:block; height:100%; background:var(--et-green); border-radius:99px; transition:width .2s ease; }

/* A second line under a grid header, for a hint the column needs to explain
   itself ("Hover over Price to see Reason"). Lighter and smaller than the
   header, but still 11px -- nothing in a grid header goes below that. */
.et-th-hint {
    display:block; margin-top:2px; font-size:11px; font-weight:400;
    line-height:1.25; letter-spacing:0; text-transform:none;
    color:var(--et-sub); white-space:normal;
}

/* Custom Price: the input is flex-sized to the column, never its own intrinsic
   width -- the same constraint custom.css puts on the old screen. Without it a
   default text input takes ~177px and drags the column past its 120px. */
.et-app td.custom_price_col .ui.action.input { width:100%; }
.et-app td.custom_price_col input.custom_price { flex:1 1 auto; min-width:45px; width:0 !important; }