/* =========================================================
   ADMIN SHELL — NM Platform + module hosts (Printvine, Website)
   Reuses the customer portal's visual language. Tokens only.

   Layout:
     +----------------- topbar (full width, light) ----------------+
     | [Logo] [System Switcher ▼]      [🔔] [User ▾]  Log out      |
     +--------------+---------------------------------------------+
     | sidebar      | content area                                |
     | (dark)       | (--color-bg, white cards)                   |
     +--------------+---------------------------------------------+
   ========================================================= */

.page-admin {
  /* Admin is a TRANSACTIONAL surface decoupled from Site CSS theming.
     Body-scoped override pins the brand defaults (matching static
     theme.css verbatim: `--color-bg: #f7f7f5`, `--color-surface:
     #ffffff`) so the 80+ admin selectors that bind to these vars
     resolve to the admin's preferred values regardless of what
     theme.css sets at `:root`. Single rule, all cascading bindings
     fixed; marketing pages keep their own theme.css defaults.

     layouts/admin.blade.php does NOT include the SiteCssEmitter
     `<style>:root` injection, so operator Site CSS settings can't
     override these from outside — same posture as layouts/portal
     .blade.php. The override below is the second leg: even
     theme.css's own defaults can't reach admin's body scope.

     See also: `.page-portal-app` / `.portal-main` in pages.css
     (literal pins, same intent, different mechanism — portal binds
     fewer surfaces so literals were lighter than a scope override). */
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  background: var(--color-bg);
  min-height: 100vh;

  /* Per-system colour palette — single source of truth.
     One token per system, used wherever the system is identified
     (switcher dot, chart line, Systems table, health panel, etc.). */
  --system-printvine: #31c47a;
  --system-website:   #3b82f6;
  --system-platform:  #bef264;
}

/* ───────── Top bar (light, full width, above sidebar + content) ───────── */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 60px;
  padding: 0 1.25rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.admin-topbar__left,
.admin-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.admin-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem 0.35rem 0;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.admin-topbar__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-heading);
  color: #fff;
  border-radius: 7px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ───────── System switcher (centrepiece) ───────── */
.admin-switcher {
  position: relative;
}

.admin-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem 0.4rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-heading);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-switcher__trigger:hover,
.admin-switcher__trigger:focus-visible {
  border-color: #b8bcc0;
  outline: none;
}

.admin-switcher__trigger[aria-expanded="true"] {
  border-color: var(--color-heading);
  background: #fff;
}

.admin-switcher__active {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-switcher__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.admin-switcher__dot--platform  { background: var(--system-platform); }
.admin-switcher__dot--printvine { background: var(--system-printvine); }
.admin-switcher__dot--website   { background: var(--system-website); }

.admin-switcher__chevron {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.admin-switcher__trigger[aria-expanded="true"] .admin-switcher__chevron {
  transform: rotate(180deg);
}

.admin-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  padding: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.25);
  display: none;
  z-index: 60;
}

.admin-switcher.is-open .admin-switcher__menu {
  display: block;
}

.admin-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 7px;
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--color-heading);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.admin-switcher__option:hover,
.admin-switcher__option:focus-visible {
  background: var(--color-bg);
  outline: none;
}

.admin-switcher__option-label {
  flex: 1;
  min-width: 0;
}

.admin-switcher__option-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.admin-switcher__option .admin-switcher__tick {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
  opacity: 0;
}

.admin-switcher__option.is-active {
  background: rgba(190, 242, 100, 0.22);
  font-weight: 600;
}

.admin-switcher__option.is-active .admin-switcher__tick { opacity: 1; }

.admin-switcher__divider {
  height: 1px;
  margin: 0.35rem 0.25rem;
  background: var(--color-border);
}

.admin-switcher__add {
  color: var(--color-text-muted);
  font-weight: 500;
  font-style: normal;
}

.admin-switcher__add:hover {
  color: var(--color-heading);
}

/* ───────── Top bar right side ───────── */
.admin-topbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-heading);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-topbar__icon-btn:hover {
  background: var(--color-bg);
}

.admin-topbar__icon-btn svg { width: 18px; height: 18px; }

.admin-topbar__icon-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-primary);
}

.admin-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.3rem;
  border-radius: 8px;
}

.admin-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-heading);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-user__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-heading);
}

.admin-topbar__logout {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
}

.admin-topbar__logout:hover {
  color: var(--color-heading);
  background: var(--color-bg);
}

/* ───────── Shell (sidebar + main) ───────── */
.admin-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}

/* ───────── Sidebar (dark) — mirrors portal-sidebar ───────── */
.admin-sidebar {
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  color: #d6d6d2;
  padding: 1.25rem 0.75rem 1rem;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }

.admin-sidebar__label {
  display: block;
  padding: 0 0.85rem;
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-sidebar__logo {
  display: block;
  width: 5.2rem;
  height: auto;
  margin: 0 0.85rem 0.8rem;
}

.admin-sidebar__back {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  margin: 0 0 0.55rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-sidebar__back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.admin-sidebar__back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: #b8b9b6;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-nav__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
  stroke: currentColor;
  fill: none;
}

.admin-nav__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.admin-nav__item.is-active {
  background: rgba(49, 196, 122, 0.12);
  border-left-color: var(--color-primary);
  color: #fff;
}

.admin-nav__item.is-active svg { color: var(--color-primary); }

.admin-nav__count {
  margin-left: auto;
  padding: 0 0.45rem;
  height: 18px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Sidebar pill tones — semantic colour aliases. The dashboard's
   `.admin-section-head__count--{amber,red,green,blue,...}` aliases
   carry their own dashboard-specific meanings (amber = awaiting,
   red = blocked, etc); the sidebar is the calmer cockpit surface
   and reads more cheerful — orange = "happy attention", green =
   "ready to work", cyan = "needs your attention" without alarming.
   The amber / red / green tones below remain available for any
   future sidebar pill that wants the dashboard-aligned reading. */
.admin-nav__count--orange { background: #ea580c; }
.admin-nav__count--green  { background: #1f7d4b; }
.admin-nav__count--cyan   { background: #0891b2; }
.admin-nav__count--amber  { background: #db2777; }
.admin-nav__count--red    { background: #b91c1c; }

.admin-sidebar__divider {
  height: 1px;
  margin: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
}

/* ───────── Main / content ───────── */
.admin-main {
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 2.25rem) 3rem;
}

/* Stacked layout — one steady gap between every top-level section block.
   Used on the Printvine dashboard so triage cards (Orders awaiting validation,
   Needs attention, etc.) read as distinct rather than running together. The
   gap is the SOLE spacing mechanism, so children should not carry their own
   margin-top/-bottom — the rules below neutralise the legacy admin-stats
   bottom margin and any inline margins on dashboard children. */
.admin-main--stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-main--stack > .admin-stats { margin-bottom: 0; }
.admin-main--stack > * { margin-top: 0; }

.admin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.admin-page-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Scope pill — sits inline with the page title to anchor cross-system context */
.admin-page-header__scope {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: rgba(190, 242, 100, 0.35);
  color: var(--color-heading);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  top: -1px;
}

/* Section-level scope caption (above the stats grid) */
.admin-stats__scope {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-page-header__sub {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 56rem;
}

.admin-page-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

/* ───────── Card ─────────
   Visual: matches customer-portal .job-card — soft shadow lift, hover bump.
   Keeps existing border + radius + padding. */
.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: clamp(1rem, 1.5vw, 1.35rem);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 6px 16px -12px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover only on interactive cards (cards that are wrapped in an <a> or
   contain a primary navigation action). Plain content cards stay calm. */
a.admin-card:hover,
.admin-card--clickable:hover {
  border-color: var(--color-text-muted);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.03), 0 14px 26px -16px rgba(15, 23, 42, 0.16);
}

/* Section divider — matches customer-portal <hr class="section-divider">. */
.admin-section-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* No automatic top-margin on adjacent admin-cards.
   Reason: the dashboard puts admin-cards side-by-side in a grid row,
   where margin-top on the second card shifts it down vs. its sibling and
   breaks top-alignment. Stacking margin is added explicitly via inline
   style="margin-top: 1rem;" on cards that need it (Row 3 Systems table,
   Row 4 grid wrapper, etc.). */

.admin-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
}

.admin-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--color-heading);
}

.admin-card__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ───────── Stat tile (KPI) ───────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

@media (max-width: 1100px) { .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .admin-stats { grid-template-columns: 1fr; } }

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.admin-stat__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-stat__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.admin-stat__delta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-stat__delta--up { color: #15803d; }
.admin-stat__delta--down { color: #b91c1c; }

/* Subtle colored icon badge sitting top-right of a stat tile */
.admin-stat { position: relative; }

.admin-stat__icon {
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  pointer-events: none;
}

.admin-stat__icon svg { width: 16px; height: 16px; display: block; }

.admin-stat__icon--green  { background: rgba(49, 196, 122, 0.14); color: #15803d; }
.admin-stat__icon--lime   { background: rgba(190, 242, 100, 0.4);  color: var(--color-heading); }
.admin-stat__icon--blue   { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.admin-stat__icon--purple { background: rgba(139, 92, 246, 0.16); color: #6d28d9; }
.admin-stat__icon--amber  { background: rgba(245, 158, 11, 0.16); color: #92400e; }

/* ───────── Activity list ───────── */
.admin-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.admin-activity li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  font-size: 0.9rem;
}

.admin-activity li:last-child { border-bottom: 0; }

.admin-activity__time {
  flex-shrink: 0;
  min-width: 5rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.admin-activity__who {
  font-weight: 600;
  color: var(--color-heading);
}

/* ───────── Status pill — aligned to customer-portal .status-pill ─────────
   Shared colour palette across customer + admin so the same colour means
   the same thing on both sides. Use SEMANTIC names (--awaiting / --proof /
   --changes / --approved / --ready / --completed / --blocked) in new markup.
   Colour-named aliases (--amber etc.) are kept for legacy markup and remap
   to the same semantic colours below. */
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--color-bg);
  color: var(--color-heading);
}

/* Semantic — preferred. Match portal palette exactly. */
.admin-status--awaiting  { background: #fce7f3; color: #9d174d; } /* pink   — operator action needed / awaiting review */
.admin-status--assigned  { background: #dbeafe; color: #1e40af; } /* blue   — assigned / in design */
.admin-status--proof     { background: #ede9fe; color: #5b21b6; } /* violet — proof flow */
.admin-status--changes   { background: #ffedd5; color: #9a3412; } /* orange — changes / awaiting customer */
.admin-status--approved  { background: #e4f6ec; color: #1f7d4b; } /* green  — approved / delivered */
.admin-status--ready     { background: #ffedd5; color: #c2410c; } /* orange — final files ready (printer orange) */
.admin-status--completed { background: var(--color-bg); color: var(--color-heading); } /* grey */
.admin-status--blocked   { background: #fee2e2; color: #991b1b; } /* red    — blocked / payment issue (admin-only) */

/* Legacy colour-named aliases — same colour, same meaning, just kept so
   pre-existing markup keeps working. Migrate to semantic names over time. */
.admin-status--amber  { background: #fce7f3; color: #9d174d; } /* → awaiting */
.admin-status--blue   { background: #dbeafe; color: #1e40af; } /* → assigned */
.admin-status--purple { background: #ede9fe; color: #5b21b6; } /* → proof    */
.admin-status--orange { background: #ffedd5; color: #9a3412; } /* → changes  */
.admin-status--red    { background: #fee2e2; color: #991b1b; } /* → blocked  */
.admin-status--green  { background: #e4f6ec; color: #1f7d4b; } /* → approved */
.admin-status--grey   { background: var(--color-bg); color: var(--color-text); } /* → completed */

/* ───────── Compact data table (used everywhere) ───────── */
.admin-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-table thead th {
  background: var(--color-bg);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: rgba(15, 23, 42, 0.025); }

.admin-table__strong { font-weight: 600; color: var(--color-heading); }
.admin-table__muted  { color: var(--color-text-muted); }

.admin-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ───────── Order row — expand chevron, urgency flags, inline jobs peek ─────────
   Used by the Orders page to (a) tag urgent rows (paid for Priority 24h,
   or waiting too long) and (b) peek at the order's artwork jobs inline.
   The jobs peek is READ-ONLY — id · name+spec · stage · price. No designer
   assignment, no stage controls, no actions: those live on the order
   detail page and the Artwork jobs board. Toggle re-uses the shared
   [data-row-toggle] handler in admin.js. */
.admin-order-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.admin-order-toggle:hover { color: var(--color-heading); background: var(--color-bg); }
.admin-order-toggle svg { width: 12px; height: 12px; transition: transform 0.15s ease; }
.admin-order-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Priority flag — RED + WHITE, loud. Roll-up only: shown when at least
   one job in the order is priority. The order row deliberately does NOT
   carry the tier ("24h" / "48h"), because turnaround is a per-job promise
   and the order may mix priority and non-priority jobs. The exact tier
   lives on the specific job line inside the accordion. Same visual
   language as the board's priority addon (.admin-board__item-addon--priority).
   TODO (Laravel): render this flag from `order.jobs.any(j => j.priority)`. */
.admin-order-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: #dc2626;
  color: #fff;
  vertical-align: middle;
  text-transform: none;
  white-space: nowrap;
}
.admin-order-flag--priority::before { content: "\26A1"; font-size: 0.85rem; line-height: 1; }

/* Waiting indicator — quieter than Priority on purpose. Order-level signal
   ("this has been on my desk too long"), not the customer-paid-for-speed
   signal. Soft tinted pill with coloured text — NOT a filled-red capsule —
   so an operator can tell the two apart at a glance.
     --amber : soft threshold crossed (currently > 12h on Awaiting validation)
     --red   : hard threshold crossed (currently > 24h)
   TODO (Laravel): both thresholds are server-tunable; the row receives
   the bucket + label, not the raw hours. */
.admin-order-wait {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}
.admin-order-wait::before { content: "\23F1"; font-size: 0.8rem; line-height: 1; }
.admin-order-wait--amber { background: #fef3c7; color: #92400e; }
.admin-order-wait--red   { background: #fee2e2; color: #991b1b; }

/* Defined badge zone on the order cell — chevron + ref + both roll-up
   flags stay inline on a single row. Max one Priority + one Waiting per
   row; if both are present, render order is ref → Priority → Waiting
   (see the order rows in orders.html). nowrap so the two badges never
   stack; max-width keeps the cell from sprawling on wide viewports. */
.admin-order-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

/* Order date — sits INLINE next to the ref + badges in the same row so
   the order cell stays one slim line. Muted weight + tabular numerals so
   it doesn't compete with the ref. */
.admin-order-cell__date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Item-count pill — subtle, small, neutral. The count is a number, not
   a status, so it should read as quiet metadata rather than as a badge
   competing with the Status pill. Used in the Orders list ITEMS column. */
.admin-items-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  background: var(--color-bg);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Paid pill — green tick for "paid", muted dash for "unpaid". The order
   date already shows on the left under the ref, so this column is now a
   yes/no indicator only — no need for the date repeated. */
.admin-paid-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  background: rgba(31, 125, 75, 0.14);
  color: #1f7d4b;
}
.admin-paid-pill--no {
  background: rgba(153, 27, 27, 0.12);
  color: #991b1b;
}

/* Sub-status — secondary condition flag rendered UNDER the primary
   status pill on the same row (e.g. blue "In production" + "Awaiting
   customer input"). Visibly subordinate: smaller font, softer fill,
   leading ↳ glyph so it reads as a note on the primary state, not as a
   second equal status. The primary pill is the order's derived status;
   this pill flags a sub-condition that an operator can act on (Chase
   customer) — see the orders.html "In production" rows. */
.admin-substatus {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.3rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 237, 213, 0.7);
  color: #9a3412;
}
.admin-substatus::before { content: "\21B3"; opacity: 0.6; font-weight: 700; }

/* Orders page — tighten the vertical rhythm. The list is the whole point
   of the page; the header is just a name, the controls fold into one
   bar, the table starts immediately under it. Scoped via :has() so
   other admin pages keep the default spacing. */
body:has(.orders-controls) .admin-main { padding-top: 1.1rem; padding-bottom: 1.75rem; }
body:has(.orders-controls) .admin-page-header { margin-bottom: 0.55rem; }
body:has(.orders-controls) .admin-main--stack { gap: 0.65rem; }

/* Orders page — single-bar control surface. Folds the tab chips, the
   awaiting-customer filter toggle (In production only), search, and the
   compact sort select into one .admin-filter-bar row. The toggle is
   hidden via :has() unless the In production tab panel is active —
   the filter is a condition on that tab, not a global setting. */
.orders-controls { flex-wrap: nowrap; }
.orders-controls__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
}
body:has(#status-in-production.is-active) .orders-controls__toggle {
  display: inline-flex;
}
.orders-controls__search {
  flex: 0 1 14rem;
  min-width: 0;
}
.orders-controls__sort {
  flex: 0 0 auto;
  padding: 0.28rem 0.45rem;
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  max-width: 9.5rem;
}
/* Stack on narrow screens so the row doesn't crush — chips first, then
   right-hand controls wrap onto a second visual line. */
@media (max-width: 1100px) {
  .orders-controls { flex-wrap: wrap; }
  .orders-controls__search { flex-basis: 12rem; }
}

/* ───────── Orders page — phone-width strategy ─────────
   Don't reflow the data table on narrow viewports — keep the columns as
   they are and let the table slide horizontally inside its wrapper. The
   admin-table-wrap already has overflow-x: auto; mobile rules below just
   force every cell to nowrap so the table widens cleanly instead of
   word-wrapping into a tall mess. The CONTROL bar (chips + search +
   sort + toggle) still wraps — it's controls, not data. */
@media (max-width: 640px) {
  /* Tighten the page chrome around the slim list. */
  body:has(.orders-controls) .admin-main { padding-left: 0.7rem; padding-right: 0.7rem; padding-top: 0.75rem; }
  body:has(.orders-controls) .admin-main--stack { gap: 0.5rem; }
  body:has(.orders-controls) .admin-page-header { margin-bottom: 0.4rem; }

  /* Control bar wraps onto a tappable layout — that's fine, it's controls. */
  .orders-controls { gap: 0.45rem; padding: 0.55rem 0.65rem; }
  .orders-controls .admin-filter-bar__group { flex-basis: 100%; gap: 0.3rem; }
  .orders-controls__search,
  .orders-controls__sort { flex-basis: 100%; max-width: none; }
  .orders-controls__toggle { flex-basis: 100%; justify-content: flex-start; }
  .orders-controls .admin-filter-bar__spacer { display: none; }
  .admin-chip { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

  /* Table — let it slide. Every cell stays on a single line; the wider-
     than-viewport table scrolls horizontally inside its wrapper. */
  .admin-table-wrap { -webkit-overflow-scrolling: touch; }
  .admin-table { width: max-content; min-width: 100%; }
  .admin-table th,
  .admin-table td { white-space: nowrap; padding: 0.55rem 0.7rem; }
  .admin-table thead th { font-size: 0.7rem; letter-spacing: 0.01em; }
  .admin-order-cell { max-width: none; }
  .admin-table__actions { flex-wrap: nowrap; }

  /* Accordion peek follows the same rule — let each job line stay on
     one row and slide if needed. The peek's td still spans all cols. */
  .admin-jobs-peek > td { padding: 0.5rem 0.7rem 0.7rem 1.05rem; white-space: normal; }
  .admin-jobs-peek ul { max-width: none; }
  .admin-jobs-peek li { white-space: nowrap; }
  .admin-jobs-peek__name { white-space: normal; min-width: 14rem; }
}

/* Inline jobs peek — a quiet nested table under the parent order row.
   Recessed background on the wrapping td signals "this belongs INSIDE
   that order"; the ul is a single bordered block with thin row dividers
   (NOT individual cards). Every job line is the same height, same grid,
   one line — no wrapping, no per-row borders, no tall cards next to
   short strips. Read-only by design — see comment block above. */
.admin-jobs-peek > td {
  background: rgba(15, 23, 42, 0.04);
  /* Left indent puts the block under the order ref; right padding pulls
     the accordion's right edge in by the Actions column width so the
     job Price column lines up with the order row's Total column. */
  padding: 0.4rem 10rem 0.55rem 3.05rem;
}

/* Date column on the Orders list — smaller font; the chevron + date
   are subordinate to the order ref next door. */
.admin-order-row > td:first-child {
  font-size: 0.76rem;
}
.admin-jobs-peek:hover > td { background: rgba(15, 23, 42, 0.04); }
.admin-jobs-peek ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  overflow: hidden;
  max-width: none;
}
.admin-jobs-peek li {
  display: grid;
  /* service · spec · badge zone · wish · status · price · slack.
     All columns sized to content + packed to the LEFT; trailing 1fr
     track soaks up the extra width on wide viewports so the operator
     can scan the list down the left side. Same template applies to the
     header row, so cells line up vertically across every li. */
  grid-template-columns: 9rem minmax(0, 22rem) 13rem 6.5rem 1fr 8rem 5rem;
  gap: 0.7rem;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0;
  background: transparent;
  font-size: 0.85rem;
}
.admin-jobs-peek li:last-child { border-bottom: 0; }

/* Subtle column headers row — same grid as the lis, muted + uppercase. */
.admin-jobs-peek__head {
  display: grid;
  grid-template-columns: 9rem minmax(0, 22rem) 13rem 6.5rem 1fr 8rem 5rem;
  gap: 0.7rem;
  align-items: center;
  padding: 0.35rem 0.85rem;
  background: rgba(15, 23, 42, 0.025);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Service column — readable text, the operator scans down this to see
   what kind of work an order contains. Source of truth is the Services
   module; this is just the display name. Not a pill, not a code, not
   muted into invisibility. */
.admin-jobs-peek__id {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-heading);
  letter-spacing: 0;
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description — truncate before the row grows. Single line, ellipsis. */
.admin-jobs-peek__name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge zone — fixed-width slot for Priority + small quiet flags. Never
   wraps; overflow clips so the row height stays uniform. */
.admin-jobs-peek__badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.admin-jobs-peek__badges:empty { visibility: hidden; }

/* Extra revision / Editable source file — quiet flag, NOT a loud pill.
   Muted text on a barely-there background; secondary weight. */
.admin-jobs-peek__extra {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(15, 23, 42, 0.05);
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* Wish date — quietest thing on the line. NO background fill, small
   muted text, tiny pink heart glyph. */
.admin-jobs-peek__wish {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  background: none;
  padding: 0;
}
.admin-jobs-peek__wish:empty { visibility: hidden; }
.admin-jobs-peek__wish::before {
  content: "\2665";  /* ♥ */
  color: #db2777;
  font-size: 0.78rem;
  line-height: 1;
}

.admin-jobs-peek__price {
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  grid-column: 7;  /* anchored to the right track */
}

/* Status pill sits in track 6 (next to price). The 1fr slack track sits
   between Wish and Status so the right-hand pair lines up with the order
   row's Status + Total columns above. */
.admin-jobs-peek li > .admin-status { grid-column: 6; }
.admin-jobs-peek__head > span:nth-child(5) { grid-column: 6; } /* "Status" */
.admin-jobs-peek__head > span:nth-child(6) { grid-column: 7; text-align: right; } /* "Price" */

/* ───────── Buttons (admin-scoped to avoid public-site collision) ───────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  min-height: 36px;
  background: var(--color-heading);
  color: #fff;
  border: 1px solid var(--color-heading);
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-btn:hover { background: #000; border-color: #000; }

.admin-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.admin-btn--primary:hover {
  background: var(--color-primary-hover, #29b06d);
  border-color: var(--color-primary-hover, #29b06d);
}

.admin-btn--ghost {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-border);
}
.admin-btn--ghost:hover {
  background: var(--color-bg);
  border-color: #b8bcc0;
}

.admin-btn--small {
  padding: 0.3rem 0.7rem;
  min-height: 30px;
  font-size: 0.82rem;
}

/* Extra-small — for stacked action columns where the default small still
   reads too loud (e.g. four Validate buttons stacked on the dashboard). */
.admin-btn--xs {
  padding: 0.22rem 0.6rem;
  min-height: 26px;
  font-size: 0.78rem;
}

/* ───────── Capacity bar (Workload-this-week panel) ─────────
   Single proportional fill = (daily avg ÷ ceiling). Colour zone communicates
   pressure: green comfortable → amber busy → red at/near ceiling. The fill
   element carries .is-amber / .is-red modifiers when crossing thresholds. */
.admin-capacity__track {
  position: relative;
  height: 8px;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
}

.admin-capacity__fill {
  display: block;
  height: 100%;
  background: #15803d;
  border-radius: 999px;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.admin-capacity__fill.is-amber { background: #f59e0b; }
.admin-capacity__fill.is-red   { background: #dc2626; }

/* ───────── Filter bar (Payments etc.) ───────── */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 0 0 1rem;
}


.admin-filter-bar__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.2rem;
}

.admin-filter-bar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.admin-filter-bar__spacer { flex: 1; }

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-heading);
  cursor: pointer;
  text-decoration: none;
}

.admin-chip:hover { background: #ebebe8; }

.admin-chip.is-active {
  background: #fff;
  border-color: var(--color-heading);
  font-weight: 600;
}

.admin-filter-bar input[type="date"] {
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-heading);
}

.admin-filter-bar input[type="date"]:focus-visible {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

/* ───────── Multi-line chart (one line per system) ───────── */
.admin-chart-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.7rem;
  margin-top: 0.4rem;
}

.admin-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 180px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  grid-column: 1;
  grid-row: 1;
  user-select: none;
}

.admin-chart {
  width: 100%;
  height: 180px;
  display: block;
  grid-column: 2;
  grid-row: 1;
}

.admin-chart-grid line {
  stroke: rgba(15, 23, 42, 0.07);
  stroke-width: 1;
}

.admin-chart-line {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.admin-chart-line--printvine { stroke: var(--system-printvine); }
.admin-chart-line--website   { stroke: var(--system-website); }
.admin-chart-line--platform  { stroke: var(--system-platform); }

.admin-chart__x {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  grid-column: 2;
  grid-row: 2;
  padding-top: 0.5rem;
  user-select: none;
}

/* Chart key (system swatches above the chart) */
.admin-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
}

.admin-chart-key__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin-chart-key__swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.admin-chart-key__swatch--printvine { background: var(--system-printvine); }
.admin-chart-key__swatch--website   { background: var(--system-website); }
.admin-chart-key__swatch--platform  { background: var(--system-platform); }

.admin-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.admin-chart-legend strong {
  color: var(--color-heading);
  font-weight: 700;
}

/* ───────── Trend indicator inside stat tiles ───────── */
.admin-stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.admin-stat__trend--up   { color: #15803d; }
.admin-stat__trend--down { color: #b91c1c; }

/* ───────── Stat card with internal period toggle (Orders) ───────── */
.admin-stat--toggleable .admin-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
}

.admin-stat__toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--color-bg);
  border-radius: 999px;
}

.admin-stat__toggle button {
  padding: 0.18rem 0.55rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-stat__toggle button:hover { color: var(--color-heading); }

.admin-stat__toggle button.is-active {
  background: #fff;
  color: var(--color-heading);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Two-up layout helpers — name reflects column-weight ratio (left:right) */
.admin-grid-2-1 {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
}

.admin-grid-1-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem;
}

@media (max-width: 980px) {
  .admin-grid-2-1,
  .admin-grid-1-2 { grid-template-columns: 1fr; }
}

/* Tight card variant — used on Reminders + Health panels so headings
   top-align cleanly with the taller chart/activity cards beside them. */
.admin-card--tight {
  padding-top: 0.85rem;
}

.admin-card--tight .admin-card__head {
  margin-bottom: 0.6rem;
}

/* ───────── Cross-system "Needs attention" panel (platform dashboard) ───────── */
.admin-attention {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-attention li + li { border-top: 1px solid rgba(15, 23, 42, 0.06); }

.admin-attention a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.2rem;
  text-decoration: none;
  color: inherit;
}

.admin-attention a:hover { background: rgba(15, 23, 42, 0.025); }

.admin-attention__name {
  font-weight: 600;
  color: var(--color-heading);
}

.admin-attention__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.admin-attention__count strong {
  color: var(--color-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-attention__chev {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  transition: transform 0.15s ease, color 0.15s ease;
}

.admin-attention a:hover .admin-attention__chev {
  transform: translateX(3px);
  color: var(--color-heading);
}

.admin-attention__zero {
  padding: 1rem 0.2rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* ───────── Task list (Printvine dashboard sections) ───────── */
.admin-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-task-row {
  display: grid;
  /* ref (wide enough for "Order #1043" tag + number) · body · badges
     (priority/wait/wish) · status pill · actions. Same template across
     every triage list so cells align across rows. */
  grid-template-columns: 7rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Badge zone — sits between the row body and the status pill. Contains
   the priority pill (loud red), the waiting pill (amber/red small), and
   the wish pill (quiet grey heart) in that order of loudness. Stays in
   the grid even when empty so the columns to its right (status pill,
   actions) keep their x position across every row — otherwise the View
   buttons in rows with no badges drift left and lose vertical alignment. */
.admin-task-row__badges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Wish pill — the QUIETEST of the three urgency signals. No fill, no
   border, just a small pink heart + muted date. Murmurs; never competes
   with the loud red Priority pill or the amber/red Waiting pill. */
.admin-wish-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  background: none;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-task-row:last-child { border-bottom: 0; }

/* Object-type tag — small labelled prefix on the ref ("Order" / "Job")
   so the operator sees the row's scope WITHOUT learning a colour code.
   Bare colour bars were ambiguous (amber clashed with the amber waiting
   pill) — text is unambiguous. Uppercase, muted, sits tight to the ref
   number. */
.admin-task-row__tag {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: 0.08rem;
}

.admin-task-row__ref {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-heading);
  letter-spacing: -0.005em;
}

/* Body is now a SINGLE-LINE inline-flex — title (bold) + meta (muted)
   sit on one row, separated by spacing. Same slim discipline as the
   Orders list rows. The meta truncates with ellipsis if it overflows. */
.admin-task-row__body {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.admin-task-row__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.admin-task-row__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-task-row__actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Slim the row CTAs (View / Validate / Chase / Resolve / Reply) so
   they're proportionate to the slimmer rows. Scoped to .admin-task-row
   so other places that use the same buttons stay untouched. */
.admin-task-row .admin-btn--small {
  min-height: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 6px;
}

/* Triage lists are stacked full-width on the dashboard now — no 2-col
   split, no internal scroll. Each list is a capped PREVIEW (4–5 rows)
   + "View all →"; the page itself scrolls normally. The old triage-grid
   + scroll rules were removed for this reason. */

/* Header + business-pulse strip — sits across the top of the Printvine
   dashboard on the plain page background (no coloured fill, no border).
   Title is a proper page h1 — clearly larger and heavier than the
   section headings. Pulse stats sit quiet + muted beside (or wrapping
   below) the title. */
.admin-pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 0 0.6rem;
}
.admin-pulse-header .admin-page-header__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.admin-pulse-strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: 0.85rem;
}
.admin-pulse-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text);
}
.admin-pulse-strip__item strong { color: var(--color-heading); font-weight: 700; }
.admin-pulse-strip__label { color: var(--color-text-muted); }
.admin-pulse-strip__label a { color: inherit; text-decoration: underline; text-decoration-color: rgba(15,23,42,0.25); }
.admin-pulse-strip__item > svg { color: var(--color-text-muted); flex-shrink: 0; }

/* Value + sparkbars row inside a stat card. Value sits left, bars sit
   right (small inline column chart). For toggleable cards (Orders /
   Revenue), each period gets its own __main block with [data-period]
   so the stat-toggle JS swaps both the number AND the chart in lockstep
   when the operator clicks Today/Week/Month. */
.admin-stat__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

/* Sparkbars — tiny inline column chart. Last bar = current period
   (Printvine green); the rest are prior periods (muted grey). Pure
   CSS — bar heights set inline as `style="height: NN%"`. Decorative;
   aria-hidden so screen readers stay on the value + delta line. */
.admin-sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  width: 84px;
  flex-shrink: 0;
  margin: 0;
}
.admin-sparkbars > span {
  flex: 1;
  min-width: 0;
  background: rgba(15, 23, 42, 0.16);
  border-radius: 2px 2px 0 0;
}
.admin-sparkbars > span.is-current { background: var(--color-primary); }

/* Waiting-time pill — quiet amber when getting long, red past the
   hard threshold. Used in the "Needs reply" list to flag how long
   the customer has been waiting on the operator. ⏱ glyph included
   in the markup so it can be omitted if needed. */
.admin-wait-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Waiting is always amber — there is no red threshold. The number on
   the pill carries severity ("Waiting 26h" vs "2d"); the colour stays
   constant. Red is reserved for Priority. */
.admin-wait-pill--amber { background: #fef3c7; color: #92400e; }

/* Manage-service-types dialog — flat list of service types (Menus,
   Business Cards, etc.) with inline add + rename/delete actions. Slug
   + service-count sit muted under the name. Industry Categories (the
   /print-design-for-* hubs) live elsewhere — see the Categories admin. */
.admin-service-type-add {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}
.admin-service-type-add input { flex: 1 1 auto; min-width: 0; }
.admin-service-type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.admin-service-type-list__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 14rem) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.admin-service-type-list__row:last-child { border-bottom: 0; }
.admin-service-type-list__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  font-size: 0.92rem;
}
.admin-service-type-list__slug {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.admin-service-type-list__actions {
  display: inline-flex;
  gap: 0.35rem;
  justify-self: end;
}
.admin-service-type-list__delete { color: #b91c1c; }
.admin-service-type-list__delete:hover { background: #fee2e2; border-color: #fecaca; }
.admin-service-type-list__lock {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-service-type-list__row--locked .admin-service-type-list__name { color: var(--color-text); }
@media (max-width: 540px) {
  .admin-service-type-list__row {
    grid-template-columns: 1fr;
    row-gap: 0.3rem;
  }
  .admin-service-type-list__actions { justify-self: start; }
}

@media (max-width: 720px) {
  .admin-task-row {
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-areas:
      "ref body"
      ".   badges"
      ".   status"
      ".   actions";
    row-gap: 0.4rem;
  }
  .admin-task-row__ref { grid-area: ref; }
  .admin-task-row__body { grid-area: body; }
  .admin-task-row__badges { grid-area: badges; justify-self: start; }
  .admin-task-row__status { grid-area: status; justify-self: start; }
  .admin-task-row__actions { grid-area: actions; justify-self: start; }
}

/* Order-level variant — Awaiting review (and any other order list).
   Adds a leading chevron column for the expand control that reveals the
   artwork jobs contained in the order. Row identity is order+customer;
   the jobs list lives inside the row and spans the full width when open. */
.admin-task-row--order {
  grid-template-columns: 1.5rem 4.5rem minmax(0, 1fr) auto auto;
}

.admin-task-row__expand {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.admin-task-row__expand:hover { color: var(--color-heading); background: var(--color-bg); }
.admin-task-row__expand svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.admin-task-row__expand[aria-expanded="true"] svg { transform: rotate(90deg); }

.admin-task-row__jobs {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0.5rem 0 0.1rem;
  padding: 0.5rem 0 0.1rem 5.95rem; /* chevron col 1.5rem + gap 0.85rem + ref col 4.5rem + space, aligns under title */
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

.admin-task-row__jobs > li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--color-text);
}

.admin-task-row__job-id {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

.admin-task-row__job-name { min-width: 0; }

.admin-task-row__job-price {
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  font-weight: 600;
}

@media (max-width: 720px) {
  .admin-task-row--order {
    grid-template-columns: 1.5rem 1fr;
    grid-template-areas:
      "exp  ref"
      "exp  body"
      ".    status"
      ".    actions";
  }
  .admin-task-row__expand { grid-area: exp; align-self: start; }
  .admin-task-row__jobs { padding-left: 1.5rem; }
}

/* Section heading with count badge — matches customer-portal .job-section.
   Larger heading (clamp 1.2–1.5rem) + filled coloured count badge. */
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.6rem;
}

.admin-section-head__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--color-heading);
}

/* Filled count badge — one spec for every section heading. Only the
   fill colour varies (per --modifier). Identical size, padding, shape,
   text weight so the row of section heads reads as one consistent
   pattern, not three slightly-different chips. */
.admin-section-head__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  background: var(--color-heading);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Per-section count tints — colour-matched to status pill meanings.
   Aligned to customer-portal palette so the colour-to-meaning mapping is
   the same on both sides. */
.admin-section-head__count--awaiting  { background: #db2777; } /* pink   — needs operator action */
.admin-section-head__count--changes   { background: #ea580c; } /* orange — changes / chase */
.admin-section-head__count--proof     { background: #7c3aed; } /* violet — proof flow */
.admin-section-head__count--progress  { background: #2563eb; } /* blue   — in production */
.admin-section-head__count--approved  { background: #1f7d4b; } /* green  — done / approved */
.admin-section-head__count--blocked   { background: #b91c1c; } /* red    — blocked / payment issue */

/* Legacy aliases — colour-named classes that pre-date the semantic ones.
   Mapped to portal palette so existing markup gets the new colours without
   churn. Prefer semantic names in new code. */
.admin-section-head__count--amber  { background: #db2777; } /* → awaiting */
.admin-section-head__count--red    { background: #b91c1c; } /* → blocked  */
.admin-section-head__count--blue   { background: #2563eb; } /* → progress */
.admin-section-head__count--green  { background: #1f7d4b; } /* → approved */

.admin-section-head__link {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.admin-section-head__link:hover { color: var(--color-heading); }

.admin-empty {
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ───────── Toolbar above tables (search + filter chips) ───────── */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 0 0 1rem;
}

.admin-toolbar__spacer { flex: 1; }

.admin-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 16rem;
}

.admin-search svg {
  position: absolute;
  left: 0.7rem;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.admin-search input {
  width: 100%;
  padding: 0.45rem 0.7rem 0.45rem 2.1rem;
  font: inherit;
  font-size: 0.88rem;
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-heading);
}

.admin-search input::placeholder { color: var(--color-text-muted); }
.admin-search input:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

/* ───────── Detail-page tabs (orders, jobs, customers) ───────── */
/* Tabs — matches customer-portal .tab-strip + .tab.
   1.05rem text, primary-green underline on active, rounded count chips. */
.admin-tabs {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  /* Top margin so every tab strip sits cleanly below the page
     header or whatever preceding card it follows. Was 0 — caused
     a tight flush against the H1 / preceding card on every admin
     surface that used `.admin-tabs` (page-list, page-edit,
     category-edit, blast-edit, customer-show, job-show, etc.).
     One CSS edit fixes all 12 consumers. */
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.95rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
  position: relative;
  text-decoration: none;
}

.admin-tab:hover { color: var(--color-heading); }

.admin-tab.is-active {
  color: var(--color-heading);
  font-weight: 700;
}
.admin-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.admin-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  background: var(--color-bg);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.admin-tab.is-active .admin-tab__count { background: rgba(15, 23, 42, 0.08); }

/* Tab count variants — purple alert (proofs awaiting customer action),
   dark (unread messages from customer). Both differentiated, both
   active-state stable so the active tab keeps the same colour. */
.admin-tab__count--alert,
.admin-tab.is-active .admin-tab__count--alert { background: #8b5cf6; color: #fff; }
.admin-tab__count--dark,
.admin-tab.is-active .admin-tab__count--dark { background: var(--color-heading); color: #fff; }

.admin-tab-panel { display: none; }
.admin-tab-panel.is-active { display: block; }

/* Vertical tabs (settings-style left rail) */
.admin-tabs--vertical {
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  border-bottom: 0;
  overflow: visible;
  align-items: stretch;
}
.admin-tabs--vertical .admin-tab {
  width: 100%;
  justify-content: flex-start;
  border-bottom: 0;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0;
  font-size: 0.9rem;
}
.admin-tabs--vertical .admin-tab:hover {
  background: var(--color-bg);
}
.admin-tabs--vertical .admin-tab.is-active {
  background: rgba(15, 23, 42, 0.06);
  border-bottom-color: transparent;
  color: var(--color-heading);
  font-weight: 600;
}
/* Vertical tabs use a fill, not an underline — hide the horizontal underline. */
.admin-tabs--vertical .admin-tab.is-active::after { display: none; }

/* Settings page two-column shell — sticky left rail + content */
.admin-settings-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 56rem);
  gap: 1.5rem;
  align-items: start;
}
.admin-settings-shell__rail {
  position: sticky;
  top: 76px;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.admin-settings-shell__content {
  min-width: 0;
}
.admin-settings-shell__content > .admin-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-settings-shell__content .admin-card {
  margin-top: 0 !important;
}

/* Stacked checkbox/radio row — predictable two-column layout */
.admin-check-row {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}
.admin-check-row > input[type="checkbox"],
.admin-check-row > input[type="radio"] {
  margin: 0.2rem 0 0;
  width: 1rem;
  height: 1rem;
}
.admin-check-row__title {
  display: block;
  font-weight: 600;
  color: var(--color-heading);
}
.admin-check-row__hint {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85em;
  margin-top: 0.1rem;
}
.admin-check-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 880px) {
  .admin-settings-shell {
    grid-template-columns: 1fr;
  }
  .admin-settings-shell__rail {
    position: static;
  }
  .admin-tabs--vertical {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .admin-tabs--vertical .admin-tab {
    width: auto;
  }
}

/* ───────── Detail-page header strip (large meta below page header) ───────── */
/* Detail header — portal job-hero pattern.
   Top row: ref/title + status pill on the right.
   Spec strip below: each field is "uppercase eyebrow label / bold value",
   distributed evenly with vertical separators between fields. Matches
   the customer-portal .job-hero so admin and customer detail pages
   read as the same product. */
.admin-detail-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.admin-detail-header__main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.admin-detail-header__ref {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-heading);
  letter-spacing: -0.005em;
}

.admin-detail-header__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}

/* Spec strip — even grid of label/value cells with vertical rules. */
.admin-detail-header__meta {
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.admin-detail-header__meta > span {
  padding: 0 1rem;
}
.admin-detail-header__meta > span + span {
  border-left: 1px solid var(--color-border);
}
.admin-detail-header__meta > span:first-child { padding-left: 0; }
.admin-detail-header__meta > span:last-child { padding-right: 0; }

/* The bold value sits on its own line below the eyebrow label. */
.admin-detail-header__meta strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.005em;
  text-transform: none;
}

.admin-detail-header__actions { margin-left: auto; display: inline-flex; gap: 0.45rem; flex-wrap: wrap; }

/* Add-ons row in the header — paid-for extras as pills, sits just below
   the spec strip so the designer/operator sees them at a glance. */
.admin-detail-header__addons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* ───────── Two-column key/value grid (for detail panels) ───────── */
.admin-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem 1.5rem;
  margin: 0;
}

@media (min-width: 640px) {
  .admin-kv { grid-template-columns: 9rem minmax(0, 1fr); }
}

.admin-kv dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-kv dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-heading);
  line-height: 1.5;
}

.admin-kv dd a { color: var(--color-heading); text-decoration: underline; text-decoration-color: rgba(15,23,42,0.25); text-underline-offset: 3px; }
.admin-kv dd a:hover { text-decoration-color: var(--color-heading); }

/* ───────── Form layout ───────── */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-form-field--full { grid-column: 1 / -1; }

.admin-form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading);
}

.admin-form-field input[type="text"],
.admin-form-field input[type="email"],
.admin-form-field input[type="number"],
.admin-form-field input[type="url"],
.admin-form-field input[type="date"],
.admin-form-field input[type="tel"],
.admin-form-field input[type="search"],
.admin-form-field input[type="password"],
.admin-form-field input[type="time"],
.admin-form-field select,
.admin-form-field textarea,
.admin-form-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--color-heading);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
}

.admin-form-field input:focus-visible,
.admin-form-field select:focus-visible,
.admin-form-field textarea:focus-visible,
.admin-form-field__input:focus-visible {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.admin-form-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-heading);
  display: block;
  margin-bottom: 0.35rem;
}

textarea.admin-form-field__input {
  min-height: 5rem;
  resize: vertical;
}

/* ───────── Dialog (native <dialog> wrapper) ─────────
   Used for the Validate-order confirmation that prompts designer assignment.
   Reusable for other confirm-with-side-effects flows later. */
.admin-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(28rem, 92vw);
  width: 100%;
  color: inherit;
}
.admin-dialog--wide { max-width: min(44rem, 96vw); }
.admin-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.admin-dialog__inner {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.25rem 1.35rem 1.35rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.admin-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 0.65rem;
}

.admin-dialog__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-heading);
}

.admin-dialog__close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 0.2rem;
}
.admin-dialog__close:hover { color: var(--color-heading); }

.admin-dialog__body {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.5;
}

.admin-dialog__body p { margin: 0 0 0.85rem; }
.admin-dialog__body p:last-child { margin-bottom: 0; }

.admin-dialog__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.admin-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.admin-dialog__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.admin-form-field__hint {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin-left: 0.3rem;
}

/* Per-job deadlines table inside the Validate dialog.
   5-col grid: id · name · wish · confirmed-date · designer-due-date. */
.admin-dialog__jobs-head,
.admin-dialog__job-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 7rem 8.5rem 8.5rem;
  gap: 0.5rem 0.65rem;
  align-items: center;
}

.admin-dialog__jobs-head {
  margin: 0.35rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.admin-dialog__jobs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-dialog__job-row {
  padding: 0.45rem 0;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
  font-size: 0.85rem;
}

.admin-dialog__job-row:first-child { border-top: 0; }

.admin-dialog__job-id {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

.admin-dialog__job-name {
  min-width: 0;
  color: var(--color-heading);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dialog__job-wish {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.admin-dialog__job-wish--empty {
  font-style: italic;
  color: var(--color-text-muted);
}

.admin-dialog__job-input {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-heading);
  width: 100%;
  box-sizing: border-box;
}
.admin-dialog__job-input:focus-visible {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
  .admin-dialog__jobs-head { display: none; }
  .admin-dialog__job-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "id   id"
      "name name"
      "wish wish"
      "conf des";
    gap: 0.35rem 0.6rem;
  }
  .admin-dialog__job-id   { grid-area: id; }
  .admin-dialog__job-name { grid-area: name; }
  .admin-dialog__job-wish { grid-area: wish; }
  .admin-dialog__job-row > input:nth-of-type(1) { grid-area: conf; }
  .admin-dialog__job-row > input:nth-of-type(2) { grid-area: des; }
}

/* Compact inline select — for in-row controls like the Assign-designer picker
   inside a table cell. Operator-only; keeps row height tight.
   Min-width sized to fit the longest expected option ("Unassigned" / "Nilesh (me)")
   so the value doesn't clip when the column is narrow. */
.admin-inline-select {
  padding: 0.3rem 1.6rem 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-heading);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  -webkit-appearance: none;
          appearance: none;
  min-width: 8rem;
  max-width: 100%;
}

.admin-inline-select:focus-visible {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.admin-form-field textarea { min-height: 120px; resize: vertical; }

.admin-form-field__hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.admin-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.admin-form-actions__spacer { flex: 1; }

/* ───────── Two-column detail page (main + side) ─────────
   Left side carries the dense work (Artwork-jobs table, items, timeline).
   Right side carries narrow summary panels (Customer, Payment, Notes).
   Ratio biased toward the left so multi-column tables breathe; the right
   column has a hard min-width so it stays useful without bloating. */
.admin-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(280px, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1080px) {
  .admin-detail-grid { grid-template-columns: 1fr; }
}

/* Job-detail variant — wider right rail (carries 4 blocks of reference
   material + designer), main column trimmed a touch. Rail stays the
   secondary side; it doesn't become a co-equal second column. */
.admin-detail-grid--job {
  grid-template-columns: minmax(0, 1fr) 360px;
}
@media (max-width: 1080px) {
  .admin-detail-grid--job { grid-template-columns: 1fr; }
}

/* Job-detail only — rail is Overview-tab reference material; hide it on
   Proofs / Messages / Final files / History so those views aren't
   crowded by a dead column. Scoped to the --job grid so the rule
   doesn't leak to customer-detail (which also uses __side). */
body:has(.admin-detail-grid--job):not(:has(#job-overview.is-active)) .admin-detail-grid--job {
  grid-template-columns: 1fr;
}
body:has(.admin-detail-grid--job):not(:has(#job-overview.is-active)) .admin-detail-grid__side {
  display: none;
}

/* Order-detail + customer-detail pages — same cap + centring + flat
   header treatment as job-detail so all three detail pages read at the
   same scale. (Order page is a vertical stack; customer page is a
   C-shape with a slim right rail — handled by their own grid rules.) */
.admin-main--order,
.admin-main--customer {
  width: 100%;
  max-width: 1380px;
  box-sizing: border-box;
  justify-self: center;
}
.admin-main--order.admin-main--stack,
.admin-main--customer.admin-main--stack { gap: 0.85rem; }
.admin-main--order .admin-page-header,
.admin-main--customer .admin-page-header { margin-bottom: 0.4rem; }

/* Spec strip = page header, not a content panel — strip the card
   chrome. Inner dividers (border-top between title row and meta, and
   the vertical separators between fields) stay. */
.admin-main--order .admin-detail-header,
.admin-main--customer .admin-detail-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Header top row — refline / status pill (left) + actions (right). */
.admin-main--order .admin-detail-header__top,
.admin-main--customer .admin-detail-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.admin-main--order .admin-detail-header__actions,
.admin-main--customer .admin-detail-header__actions {
  display: inline-flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Customer-detail C-shape — main column + right rail (Contact +
   Account). Rail wider than the job-detail one (420px vs 360px) so
   the business name + address don't wrap mid-word in the kv list. */
.admin-detail-grid--customer {
  grid-template-columns: minmax(0, 1fr) 420px;
}
.admin-detail-grid--customer .admin-kv { grid-template-columns: 7.5rem minmax(0, 1fr); }
@media (max-width: 1080px) {
  .admin-detail-grid--customer { grid-template-columns: 1fr; }
}

/* Marketing-consent toggle row inside the Account card — proper control,
   not static text. Operator flips the switch when a customer requests
   opt-out; the label swaps to reflect state. */
.admin-marketing-consent {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}
.admin-marketing-consent__label {
  font-size: 0.88rem;
  color: var(--color-text);
}

/* Customer note — quiet alert at the top of the order page. Soft
   border, calm fill, leading note icon. Surfaces a checkout
   instruction without screaming for attention; reads as context,
   not an emergency. Absent entirely when the order has no note. */
.admin-customer-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-muted);
  border-radius: 8px;
}
.admin-customer-note__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-text-muted);
}
.admin-customer-note__icon svg { width: 18px; height: 18px; }
.admin-customer-note__body { min-width: 0; }
.admin-customer-note__body strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.admin-customer-note__body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* Compact reference pair — two cards side by side on wide viewports,
   stacks below ~720px. Used for Customer + Payment under the full-
   width Artwork jobs panel. */
.admin-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .admin-pair-grid { grid-template-columns: 1fr; }
}

/* Payment card — two related payment-document actions sit together at
   the foot of the card. Side-by-side on a normal-width card; stacks on
   very narrow widths. */
.admin-payment-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.admin-payment-actions > .admin-btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 520px) {
  .admin-payment-actions { flex-direction: column; }
}

/* Card-flush — drops the inner padding on cards that wrap a table or
   list, so the table sits flush with the card edge. The card head keeps
   its own padding. Used on the order-detail Artwork jobs section. */
.admin-card--flush { padding: 0; }
.admin-card--flush > .admin-card__head { padding: 1rem 1.1rem 0.6rem; margin-bottom: 0; }
.admin-card--flush > .admin-table-wrap { padding: 0; }

/* Slimmer Artwork jobs table — less heavy padding to match the
   job-detail density. */
.admin-table--jobs th,
.admin-table--jobs td { padding: 0.55rem 0.85rem; }
.admin-table--jobs thead th { font-size: 0.7rem; }

/* Empty-state cell — calm muted italic, reads as "no value" not error. */
.admin-empty { font-style: italic; opacity: 0.85; }

/* Order totals rows in the Artwork jobs table — clean alignment with
   the Price column, no inline borders chopping the right side of the
   row. A single hairline above the first totals row gives the visual
   break; the Order total row is bolder. */
.admin-order-totals td { border-top: 0 !important; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.admin-table--jobs tbody tr.admin-order-totals:first-of-type td { border-top: 1px solid var(--color-border) !important; padding-top: 0.7rem; }
.admin-order-totals--final td {
  font-weight: 800;
  color: var(--color-heading);
  font-size: 0.98rem;
  padding-top: 0.55rem;
  padding-bottom: 0.7rem;
}

/* Action bar — page's primary actions, sits directly under the tabs on
   the job-detail page. Send proof is the loud verb (it's the transition
   that moves the job to Proof out); Message customer + Reassign designer
   are secondary. Replaces the old top-right buttons. */
.admin-job-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0; /* sits in flow, not a card */
  background: transparent;
  border: 0;
  border-radius: 0;
}
.admin-job-actions .admin-btn--primary {
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
}
.admin-job-actions .admin-btn--primary svg { margin-right: 0.1rem; }

/* Compact card — used in the slim right rail so cards don't bloat the
   narrow column. */
.admin-card--compact { padding: 0.85rem 1rem; }
.admin-card--compact .admin-card__head { margin-bottom: 0.6rem; }

/* Urgency on the spec strip — Designer due colours amber (close) or red
   (at-risk) so opening the job page immediately signals risk. Same
   threshold logic as the kanban card border colours. Bumped selector
   specificity (strong.x) to win over .admin-detail-header__meta strong.
   TODO (Laravel): server adds the modifier from
   (designer_due_date - now) vs the buffer threshold. */
strong.admin-detail-header__urgent {
  color: #b45309;  /* amber-700 — the "watch this" colour */
}
strong.admin-detail-header__urgent--red {
  color: #b91c1c;  /* red-700 — past the hard threshold */
}

/* Cap the job-detail page width — generous main column + slim rail,
   not edge-to-edge on large monitors. Bumped from 1180 → 1380 so the
   Artwork content panel and the Style brief quote get room. */
body:has(.admin-job-actions) .admin-main {
  width: 100%;
  max-width: 1380px;
  box-sizing: border-box;
  justify-self: center;
}

/* Tighter rhythm on the job-detail page — the spec strip, action bar,
   banners, and content sections sit closer together so Artwork content
   is higher up the fold. */
body:has(.admin-job-actions) .admin-main--stack { gap: 0.85rem; }
body:has(.admin-job-actions) .admin-page-header { margin-bottom: 0.4rem; }

/* Spec strip is the page header, not a content panel — strip the card
   chrome (background, border, radius). The title block, meta line,
   fields row and extras pills sit on the plain page background. Keep
   the inner divider between title and fields, and the vertical
   separators between fields — those still do the real structuring. */
body:has(.admin-job-actions) .admin-detail-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Top row inside the header — ref line (left) + status pill (right),
   mirrors the customer-portal .job-hero__top pattern. */
.admin-detail-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

/* Reference line — Order # + Customer as small muted metadata. */
.admin-detail-header__refline {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-detail-header__refline strong { color: var(--color-heading); font-weight: 700; }
.admin-detail-header__refline a { color: inherit; text-decoration: underline; text-decoration-color: rgba(15,23,42,0.25); text-underline-offset: 2px; }

/* Big page title — matches the customer .job-hero__title scale. */
.admin-detail-header__title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--color-heading);
}

/* Spec strip — readable but reference-weight. Labels are uppercase eyebrow,
   values are bold below. Bumped back up from the over-tight pass. */
.admin-detail-header { padding: 0.95rem 1.1rem; gap: 0.6rem; }
.admin-detail-header__meta { padding-top: 0.75rem; gap: 0.45rem 0; font-size: 0.7rem; }
.admin-detail-header__meta > span { padding: 0 0.85rem; }
.admin-detail-header__meta strong { font-size: 0.98rem; margin-top: 0.15rem; }

/* Addon pills — LOUD red when --priority is on (customer paid for speed,
   must shout); other addons get a contrast green tint so they're not
   washed-out on the plain page background (the spec-strip card is gone). */
.admin-detail-header__addons { gap: 0.35rem; margin-top: 0.25rem; }
.admin-detail-header__addons .admin-board__item-addon {
  font-size: 0.74rem;
  padding: 0.2rem 0.6rem;
  background: var(--color-primary-soft);
  color: #1f5d3c;
  font-weight: 600;
  border: 1px solid rgba(31, 196, 122, 0.25);
}
.admin-detail-header__addons .admin-board__item-addon--priority {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  border-color: #dc2626;
}
.admin-detail-header__addons .admin-board__item-addon--priority::before {
  color: #fff;
}

/* Job-detail tabs — sticky like the customer-portal .tab-strip so the
   bar stays put as the operator scrolls long content. Same underline
   indicator and count pill treatment as the customer side. */
body:has(.admin-job-actions) .admin-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
  margin-bottom: 0.5rem;
}

/* PILL tabs — matches the customer-side feel: rounded chip backgrounds,
   filled on the active tab, no underline indicator. Scoped to the --pill
   modifier so other admin tabs keep their existing underline style. */
.admin-tabs--pill { gap: 0.4rem; border-bottom: 0; padding: 0.25rem 0; margin-bottom: 0.7rem; }
.admin-tabs--pill .admin-tab {
  padding: 0.5rem 0.95rem;
  background: var(--color-bg);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.admin-tabs--pill .admin-tab:hover { background: rgba(15, 23, 42, 0.06); color: var(--color-heading); }
.admin-tabs--pill .admin-tab.is-active {
  background: var(--color-heading);
  color: #fff;
  font-weight: 700;
}
.admin-tabs--pill .admin-tab.is-active::after { display: none; }
.admin-tabs--pill .admin-tab.is-active .admin-tab__count { background: rgba(255,255,255,0.2); color: #fff; }

/* Job-page alert strip — sits between tabs and action bar, slim row. */
.admin-job-alerts { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 0.7rem; }

/* Final files — LOCKED banner variant (the green "ready" banner from
   the customer side is for the approved state; admin's pre-approval
   state needs a muted/locked look). */
.final-files-card__banner--locked {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
.final-files-card__banner--locked svg { color: var(--color-text-muted); }

/* Admin proofs — collapsible proof-version cards stack with a small
   gap so they read as a list, and the first card sits flush with the
   panel header. The customer side gets the gap from .messages-card and
   tab-panel layouts; admin needs it explicit. */
.admin-card .proof-version + .proof-version { margin-top: 0.6rem; }
.admin-card .proof-version:first-of-type { margin-top: 0.4rem; }

/* History card inside an admin-card — drop the admin-card padding so
   the table sits flush, then re-pad the heading. Matches the customer
   .history-card { padding: 0 !important; } pattern. */
.admin-card.history-card { padding: 0; }
.admin-card.history-card .admin-card__title { padding: 1.1rem 1.2rem 0.4rem; margin: 0; }

/* Slim the banner CTAs ("Review proof", "Read messages") so they don't
   rival the primary "Send proof" button in the action bar below. The
   base .btn rule sets min-height: 46px which makes them chunky — we
   override that here (with .btn in the selector to win specificity)
   plus tighten padding/font. Banner styling itself is untouched. */
.admin-job-alerts .tab-alert__cta.btn,
.admin-job-alerts .btn.tab-alert__cta {
  min-height: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
}

/* Compact Designer strip — sits at the BOTTOM of the rail. One line:
   avatar + name · role + Reassign. Half the height of the old card. */
.admin-job-designer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.55rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.admin-job-designer__name { flex: 1; min-width: 0; }
.admin-job-designer__name strong { color: var(--color-heading); font-weight: 700; }
.admin-job-designer__reassign {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(15,23,42,0.25);
}
.admin-job-designer__reassign:hover { color: var(--color-heading); }

/* Copy-text pill — anchored to the Artwork content block itself, not
   parked in the panel header. Top-right of the content box, low-key
   chip with a faint surface so it doesn't compete with the content. */
.admin-artwork-content__copy {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.admin-artwork-content__copy:hover { color: var(--color-heading); border-color: var(--color-text-muted); }

/* Links card — with the wider rail, let titles use the available width
   and don't truncate aggressively. The title is the primary identifier;
   the source domain in the meta line is secondary. */
.admin-detail-grid__side .admin-file-list__name {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Slim the tab banners — they're alerts (one line: icon + text + CTA),
   not panels. Less padding, smaller body text. */
body:has(.admin-job-actions) .tab-alert {
  padding: 0.55rem 0.75rem;
  gap: 0.6rem;
  align-items: center;
}
body:has(.admin-job-actions) .tab-alert__icon svg { width: 18px; height: 18px; }
body:has(.admin-job-actions) .tab-alert__body strong { font-size: 0.88rem; }
body:has(.admin-job-actions) .tab-alert__body p { margin: 0.1rem 0 0; font-size: 0.78rem; line-height: 1.35; }
body:has(.admin-job-actions) .tab-alert__cta { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
body:has(.admin-job-actions) .tab-alerts { gap: 0.45rem !important; margin-bottom: 0.7rem !important; }

/* ───────── Kanban-style board (jobs by status) ─────────
   Panable horizontally — columns are fixed-width so the board scrolls
   instead of squashing. Drag-to-pan on background empty space via JS
   (see admin.js); trackpad/wheel horizontal scroll also works natively.
   Card style mirrors the customer-portal job-card vibe (soft shadow,
   bigger heading, prominent status pill). */
.admin-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 1.1rem;
  background: transparent;    /* board sits on the plain page background — no coloured wash */
  cursor: grab;
  /* Fill the remaining vertical space inside admin-main so columns can
     run the full height of the page (panels visually extend down). */
  flex: 1 1 auto;
  min-height: 70vh;
  align-items: stretch;
  /* Full-bleed: escape admin-main's horizontal + bottom padding so the board
     reaches the edges of the content area (right of sidebar, top of topbar).
     Edge-to-edge: drop the border-radius so corners sit flush. */
  margin: 0 calc(-1 * clamp(1.25rem, 2.5vw, 2.25rem)) -3rem;
  border-radius: 0;
}
.admin-board.is-grabbing { cursor: grabbing; user-select: none; }
.admin-board::-webkit-scrollbar { height: 8px; }
.admin-board::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.16); border-radius: 999px; }

/* Column — transparent, no panel fill. Just a subtle vertical divider on
   the right to separate adjacent columns. Last column drops the divider.
   On mobile, columns stack and the divider flips to a bottom rule. */
.admin-board__col {
  flex: 0 0 320px;
  background: transparent;
  padding: 0 0.9rem;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  transition: background-color 0.15s ease;
}

.admin-board__col:last-child { border-right: 0; }

/* Column header — text only on the column panel, NO background fill.
   The column reads as plain text + cards separated by a thin vertical rule
   (matches the customer "Awaiting your review" panel which has no header band). */
.admin-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0 0.85rem;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Drop-target highlight while a card is being dragged over a column —
   soft violet wash, no hard outline. */
.admin-board__col.is-drop-target {
  background: rgba(124, 58, 237, 0.07);
}

/* Mobile — columns stack vertically, divider flips from right to bottom. */
@media (max-width: 640px) {
  .admin-board {
    flex-direction: column;
    overflow-x: visible;
    align-items: stretch;
  }
  .admin-board__col {
    flex: 1 1 auto;
    padding: 0.5rem 0 0.85rem;
    border-right: 0;
    border-bottom: 1px solid rgba(124, 58, 237, 0.16);
  }
  .admin-board__col:last-child { border-bottom: 0; }
}

.admin-board__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  background: var(--color-heading);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Per-stage count tints — colour-matched to the per-stage status pill on
   each card, so the column header and the cards inside speak the same colour. */
/* Per-stage count badge colours — matched to the per-stage card pill.
   Full 7-state lifecycle: brief → assignment → design → revision → proof
   → approved → completed. */
.admin-board__col--brief     .admin-board__count { background: #0891b2; } /* cyan   — awaiting customer brief (distinct from awaiting-assignment pink) */
.admin-board__col--awaiting  .admin-board__count { background: #db2777; } /* pink   — awaiting operator (assignment) */
.admin-board__col--design    .admin-board__count { background: #2563eb; } /* blue   */
.admin-board__col--revision  .admin-board__count { background: #ea580c; } /* orange */
.admin-board__col--proof     .admin-board__count { background: #7c3aed; } /* violet */
.admin-board__col--approved  .admin-board__count { background: #1f7d4b; } /* green  — signed off, needs final files */
.admin-board__col--completed .admin-board__count { background: #6b7280; } /* grey   — done */

/* Card — bigger, with portal-style soft lift. */
.admin-board__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  margin-top: 0.55rem;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 6px 16px -12px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-board__item:hover {
  border-color: var(--color-text-muted);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.03), 0 14px 26px -16px rgba(15, 23, 42, 0.16);
}

/* Pill row at the top of each card. Status pill flows in, open-arrow
   (link to job detail) sits at the right. The whole card is draggable;
   only the arrow opens the detail page so click-to-drag and click-to-open
   don't conflict. */
.admin-board__item-pillrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-board__item-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px 0;
  color: var(--color-text-muted);
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-board__item-open:hover {
  color: var(--color-heading);
  background: rgba(15, 23, 42, 0.06);
}
.admin-board__item-open svg { width: 14px; height: 14px; }

/* Draggable cards — visual handles for the drag state. */
.admin-board__item { cursor: grab; }
.admin-board__item:active { cursor: grabbing; }
.admin-board__item.is-dragging { opacity: 0.45; }

/* Inner link used on Awaiting-assignment cards where the wrapping element
   is a <div> (so the inline Assign <select> can sit as a sibling). */
.admin-board__item-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

/* Urgency modifiers — driven by designer_due_date vs today.
   Amber = approaching due date · Red = at/past due date.
   TODO (Laravel): server computes which class to apply based on
   (designer_due_date − today) thresholds; defined in Settings. */
.admin-board__item--amber {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: inset 3px 0 0 #f59e0b;
}
.admin-board__item--red {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: inset 3px 0 0 #dc2626;
}
.admin-board__item--amber .admin-board__item-due { color: #92400e; font-weight: 600; }
.admin-board__item--red   .admin-board__item-due { color: #991b1b; font-weight: 700; }

/* Inline Assign picker on Awaiting-assignment cards.
   Compact one-pick control — like Trello's "Assign a member". Styled to
   match the small-button look but with native select behaviour. Sits in the
   card's meta row; clicks/changes are stopped so the card-level link isn't
   followed when interacting with it. */
.admin-board__assign {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.18rem 1.4rem 0.18rem 0.55rem;
  color: var(--color-heading);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  max-width: 8rem;
}
.admin-board__assign:hover { border-color: var(--color-heading); }
.admin-board__assign:focus-visible {
  outline: none;
  border-color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

/* Bottom-of-card "extras" row — wraps the customer wish pill, any add-on
   pills, and any other display-only metadata. Wraps cleanly when several
   extras stack up. */
.admin-board__item-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

/* Shared small-pill base for wish / addon / time */
.admin-board__item-wish,
.admin-board__item-addon,
.admin-board__item-time {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  background: rgba(15, 23, 42, 0.05);
  color: var(--color-text-muted);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Standalone pills (no extras wrapper) keep their own top margin so they
   still sit clear of the meta line when used alone. */
.admin-board__item > .admin-board__item-wish,
.admin-board__item > .admin-board__item-addon,
.admin-board__item > .admin-board__item-time {
  align-self: flex-start;
  margin-top: 0.15rem;
}

/* Pink heart marker on the wish pill — the customer's wished date. */
.admin-board__item-wish::before {
  content: "♥";
  font-size: 0.78rem;
  line-height: 1;
  color: #db2777;
}

/* Green plus marker on the addon pill — extras the customer paid for
   (Extra revision round, Editable source file, etc.). */
.admin-board__item-addon::before {
  content: "+";
  font-size: 0.85rem;
  line-height: 1;
  color: #1f7d4b;
  font-weight: 800;
}

/* PRIORITY variant — Priority 24h turnaround paid for. RED + WHITE,
   bold, lightning bolt glyph. Loud on purpose: customer paid extra, we
   need to move. Apply --priority modifier wherever this add-on appears
   (kanban cards, job-detail header, anywhere else operator-facing). */
.admin-board__item-addon--priority {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
}
.admin-board__item-addon--priority::before {
  content: "\26A1"; /* ⚡ */
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
}

/* Blue clock marker on the time pill — the time budget for this job,
   sourced from the service's time_estimate_hours field. Frames the work
   for the designer (e.g. "Est. 3h" vs "Est. 6h" is a different shape).
   TODO (Laravel): server renders the actual estimate from the service. */
.admin-board__item-time::before {
  content: "◷";
  font-size: 0.85rem;
  line-height: 1;
  color: #2563eb;
  font-weight: 800;
}

/* Card-level contextual task button — same visual rhythm as the Assign
   select on Awaiting-assignment cards. Used on Approved cards ("Add final
   files") and any future to-do column action. */
.admin-board__task {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-board__task:hover {
  background: var(--color-primary-hover, #29b06d);
  border-color: var(--color-primary-hover, #29b06d);
}

/* ───────── File list (downloadable assets on detail pages) ─────────
   Used for customer-supplied logos/images on job-detail, and for any
   other download-affordance list (final files, reference assets). */
.admin-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-file-list > li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  background: var(--color-bg);
  border-radius: 10px;
}
.admin-file-list__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.admin-file-list__icon svg { width: 20px; height: 20px; }
.admin-file-list__body { min-width: 0; }
.admin-file-list__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-file-list__meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ───────── Upload zone (dropzone) ─────────
   Used for the Final files upload on job-detail; mirrors the
   customer-portal Logos & images upload card. */
.admin-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  background: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-upload-zone:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
}
.admin-upload-zone__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.admin-upload-zone__icon svg { width: 20px; height: 20px; }
.admin-upload-zone__body strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}
.admin-upload-zone__body p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Locked state — visible but un-actionable until upstream state allows
   it (e.g. final-files upload locked until proof approved). */
.admin-upload-zone--locked {
  cursor: not-allowed;
  opacity: 0.7;
}
.admin-upload-zone--locked:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.admin-board__item-ref {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.admin-board__item-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--color-heading);
  line-height: 1.2;
}

.admin-board__item-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.admin-board__item-meta > * { min-width: 0; }

/* ───────── Settings sections (left rail + main) ───────── */
.admin-settings-grid {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 860px) { .admin-settings-grid { grid-template-columns: 1fr; } }

.admin-settings-rail {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.admin-settings-rail a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
}

.admin-settings-rail a:hover { background: var(--color-bg); color: var(--color-heading); }
.admin-settings-rail a.is-active { background: var(--color-bg); color: var(--color-heading); font-weight: 600; }

/* ───────── Toggle switch (used in settings & feature flags) ───────── */
.admin-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.admin-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-toggle__slider {
  position: absolute;
  inset: 0;
  background: #d9d9d4;
  border-radius: 999px;
  transition: background 0.15s ease;
  cursor: pointer;
}

.admin-toggle__slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.admin-toggle input:checked + .admin-toggle__slider { background: var(--color-primary); }
.admin-toggle input:checked + .admin-toggle__slider::before { transform: translateX(16px); }
.admin-toggle input:disabled + .admin-toggle__slider { opacity: 0.5; cursor: not-allowed; }

/* ───────── Avatar (used in users, customers, designers) ───────── */
.admin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-heading);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-avatar--lg { width: 56px; height: 56px; font-size: 1.2rem; }

/* Star rating for reviews */
.admin-stars { display: inline-flex; gap: 0.1rem; color: #f59e0b; line-height: 1; }
.admin-stars--muted { color: var(--color-border); }

/* ───────── System health status indicator (small dot + text) ─────────
   Used in the System health panel on the platform dashboard.
   Honest simple signals only. CPU/RAM/server load comes from a
   dedicated monitoring service (UptimeRobot / Better Stack) later. */
.admin-health {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.admin-health::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.admin-health--online { color: #15803d; }
.admin-health--issue  { color: #b91c1c; }
.admin-health--warn   { color: #92400e; }
.admin-health--idle   { color: var(--color-text-muted); }

.admin-health__errors {
  font-variant-numeric: tabular-nums;
}

.admin-health__errors--zero { color: var(--color-text-muted); }
.admin-health__errors--some { color: #92400e; font-weight: 600; }
.admin-health__errors--many { color: #9a3412; font-weight: 700; }

/* System-health list for the side card (next to the chart) */
.admin-health-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-health-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.admin-health-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.admin-health-list__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-heading);
}

.admin-health-list__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ───────── Reminders panel — dated checklist (NOT a task manager) ─────────
   Each row: label, due date, done (checkbox), dismiss (×).
   Date-aware: overdue = red, due soon (within ~30 days) = amber, distant = quiet.
   Pre-loaded with fixed UK sole-trader dates. */
.admin-reminders {
  list-style: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  /* Show ~4.5 rows, then scroll. Hints at more content below. */
  max-height: 20.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-reminders::-webkit-scrollbar { width: 6px; }
.admin-reminders::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 6px; }
.admin-reminders::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.25); }

.admin-reminder {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem 0.55rem;
  background: var(--color-bg);
  border-left: 3px solid transparent;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}

.admin-reminder--soon {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}

/* "Overdue" uses ORANGE not red — admin palette is warm: orange / amber / green / lime, no red. */
.admin-reminder--overdue {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, 0.08);
}

.admin-reminder input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.admin-reminder__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  cursor: pointer;
}

.admin-reminder__label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.3;
}

.admin-reminder__date {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.admin-reminder--soon .admin-reminder__date {
  color: #92400e;
  font-weight: 600;
}

.admin-reminder--overdue .admin-reminder__date {
  color: #9a3412;
  font-weight: 600;
}

.admin-reminder__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-reminder__dismiss:hover {
  background: rgba(15, 23, 42, 0.08);
  color: var(--color-heading);
}

/* Done state — fade + strike */
.admin-reminder:has(input[type="checkbox"]:checked) {
  opacity: 0.5;
}

.admin-reminder:has(input[type="checkbox"]:checked) .admin-reminder__label {
  text-decoration: line-through;
}


/* ───────── Tablet / mobile ───────── */
@media (max-width: 1023px) {
  .admin-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .admin-sidebar__label { display: none; }
  .admin-sidebar__logo { display: none; }
  .admin-nav__item { justify-content: center; padding: 0.7rem; position: relative; }
  .admin-nav__item span:not(.admin-nav__count) { display: none; }
  .admin-nav__count { display: none; }
  .admin-nav__item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.3rem 0.55rem;
    background: #171717;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .admin-nav__item:hover::after { opacity: 1; }
}

/* ───────── Service edit page ─────────
   Aligns with services / customer-detail / order-detail standard: slim
   breadcrumb above, page-header with title + meta strip + actions, flush
   table cards, compact number inputs, normalized radio/toggle rows. */
.admin-main--service-edit .admin-page-header { margin-bottom: 0.4rem; }

/* Content column — caps editor / form / list pages at a comfortable width
   on wide viewports so body editors and long-form fields don't sprawl
   edge to edge. Applied to service-edit / blog-post-edit / email-blast-edit
   (all use admin-main--service-edit) and to the blog list via the
   admin-main--column modifier. Each direct child of the main element
   gets centred at the same width so header, tabs, panels and action bars
   all line up vertically. */
.admin-main--service-edit > *,
.admin-main--column > * {
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
}

/* Tab panels host multiple cards (Basics + Status; Formats + Add-ons +
   Specs; Hero + Images + Content tabs + USP + Related). admin-main--stack's
   gap only reaches its direct children, so cards inside a panel land
   flush — give the active panel its own gapped flex column. */
.admin-main--service-edit .admin-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-main--service-edit .admin-tabs { margin-bottom: 1rem; }
.admin-main--service-edit .admin-page-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.admin-main--service-edit .admin-page-header__meta strong { color: var(--color-heading); font-weight: 600; }
.admin-main--service-edit .admin-page-header__meta .admin-page-header__meta-sep { color: var(--color-border); }

/* Compact number input used inside table rows (price, +£). */
.admin-input--num {
  width: 5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--color-surface);
}
.admin-input--num--narrow { width: 4.5rem; }

/* Stack of radio rows with a strong title + muted sub. */
.admin-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.admin-radio-list__item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: start;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  text-align: left;
}
.admin-radio-list__item input[type="radio"] {
  margin: 0.2rem 0 0;
  width: auto;
  justify-self: start;
}
.admin-radio-list__item:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(49, 196, 122, 0.06);
}
.admin-radio-list__body { min-width: 0; }
.admin-radio-list__body strong {
  display: block;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.15rem;
}
.admin-radio-list__body span { color: var(--color-text-muted); }

/* Status toggle row — same shape as admin-marketing-consent, plus a
   muted hint underneath. Used standalone (no card body padding fight). */
.admin-status-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.admin-status-toggle__label { font-weight: 600; color: var(--color-heading); }
.admin-status-toggle__hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0.15rem 0 0;
}

/* Pending-decision banner — sits inside a card whose structure is
   intentionally provisional (data model not yet settled). Calm amber
   inset; reads as a flag, not an alarm. */
.admin-pending-decision {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem;
  margin: 0 0 0.85rem;
  background: rgba(217, 119, 6, 0.05);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-left: 3px solid #d97706;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.55;
}
.admin-pending-decision strong {
  display: block;
  color: #92400e;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

/* Media picker — assigned-thumbs grid + assign button. Operator picks
   from the central Website Media library; one tile is starred as
   "main" and becomes the hero. Files / alt text live in the library,
   not here. */
.admin-media-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}
.admin-media-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.3rem;
}
.admin-media-tile--main {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.admin-media-tile__badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.15rem 0.4rem;
  background: var(--color-primary);
  color: #052e16;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
}
.admin-media-tile__remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.admin-media-tile__set-main {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  padding: 0.15rem 0.4rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--color-heading);
  cursor: pointer;
}
.admin-media-tile--empty {
  border-style: dashed;
  cursor: pointer;
  background: transparent;
}
.admin-media-tile--empty:hover {
  border-color: var(--color-primary);
  color: var(--color-heading);
}

/* Repeatable block list — content tabs, FAQs, custom spec groups.
   Each item is a soft card with handle, body, and remove. */
.admin-repeat-list { display: flex; flex-direction: column; gap: 0.55rem; }
.admin-repeat-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  align-items: start;
}
.admin-repeat-item__handle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: grab;
  font-size: 0.95rem;
  margin-top: 0.4rem;
  user-select: none;
}
.admin-repeat-item__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.admin-repeat-item__body input[type="text"],
.admin-repeat-item__body textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.86rem;
  background: var(--color-surface);
}
.admin-repeat-item__body textarea {
  min-height: 64px;
  resize: vertical;
  font-family: var(--font-sans);
}
.admin-repeat-item__remove {
  padding: 0.3rem 0.55rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 0.25rem;
}
.admin-repeat-item__remove:hover { color: #b91c1c; border-color: #fca5a5; }

/* Chip list — related products, assigned items. */
.admin-chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--color-heading);
}
.admin-chip__remove {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.admin-chip__remove:hover { color: #b91c1c; }

/* Spec-group editor — Pricing > Additional spec options. Top row =
   group meta (type + display name + default-value), value rows below. */
.admin-spec-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.admin-spec-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.admin-spec-group__name {
  font-weight: 700;
  color: var(--color-heading);
  font-size: 0.95rem;
}
.admin-spec-group__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.admin-spec-group__values {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.admin-spec-group__values--off {
  opacity: 0.45;
  pointer-events: none;
}
.admin-spec-value-row {
  display: grid;
  grid-template-columns: 1fr 5.5rem 5.5rem auto;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.85rem;
}
.admin-spec-value-row__label {
  font-weight: 600;
  color: var(--color-heading);
}
.admin-spec-value-row input[type="number"] {
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.admin-spec-value-row__default {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.admin-spec-value-row__head {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* SEO meta-field with char counter under the input. Amber when the
   value exceeds the recommended length — it's a recommendation, not
   an error, so the signal is calm warning, not alarm. */
.admin-meta-field__counter {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  align-self: flex-end;
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
}
.admin-meta-field__counter--over {
  color: #92400e;
  background: rgba(217, 119, 6, 0.1);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Slug live-preview placeholder state — when the slug input is empty,
   the preview shows "your-slug" in italic muted so it reads as a hint,
   not a hardcoded default that's stuck on screen. */
[data-slug-preview].is-empty {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ───────── PVIcons — picker dialog, tiles, icon buttons ─────────
   Used wherever an operator assigns an icon (USP rows first; later
   category icons, "how it works" steps, etc.). One curated style — no
   Outline/Solid/Mini tabs. Icons render at currentColor so context
   tokens drive the colour. */

/* Inline-rendered icon (the SVG injected into <span data-icon="…">). */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
[data-icon] svg { display: block; width: 1em; height: 1em; }

/* Picker dialog — wider than a form dialog so the grid breathes. */
.admin-icon-picker-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.admin-icon-picker-dialog .admin-dialog__inner { width: min(640px, 92vw); }
.admin-icon-picker-search {
  margin-bottom: 0.85rem;
}

.admin-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}
.admin-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-heading);
  font: inherit;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.admin-icon-tile:hover {
  border-color: var(--color-primary);
  background: rgba(49, 196, 122, 0.04);
}
.admin-icon-tile.is-selected {
  border-color: var(--color-primary);
  background: rgba(49, 196, 122, 0.1);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.admin-icon-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-heading);
}
.admin-icon-tile__icon svg { width: 24px; height: 24px; }
.admin-icon-tile__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* Icon-picker trigger button — small square showing the currently
   assigned icon, click to open the picker. Used inline in editable
   rows (USP entries, etc.). */
.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-heading);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.admin-icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.admin-icon-btn svg { width: 20px; height: 20px; }
.admin-icon-btn--empty {
  color: var(--color-text-muted);
  border-style: dashed;
}

/* USP entry editor — used in the Custom mode of the USP block. Each
   row is icon-button + text input + remove. */
.admin-usp-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-usp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
}
.admin-usp-row input[type="text"] {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--color-surface);
}
.admin-usp-row__remove {
  padding: 0.3rem 0.55rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
.admin-usp-row__remove:hover { color: #b91c1c; border-color: #fca5a5; }

/* USP preview list (read-only) — used in the Inherit option of the USP
   radio list. Icon + text pairs, compact, muted text. */
.admin-usp-preview {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-usp-preview li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.admin-usp-preview [data-icon] {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-primary);
  flex: 0 0 auto;
}
.admin-usp-preview [data-icon] svg { width: 1.05rem; height: 1.05rem; }

/* Custom-mode editor reveal — only show the USP entry editor when the
   "Custom" radio is selected. CSS-only via :has() on the card. */
.admin-usp-custom-editor { display: none; }
.admin-card:has([data-usp-mode="custom"]:checked) .admin-usp-custom-editor {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

/* Chip-style multi-select checkbox group — used for the Industries /
   Categories field on Service-edit Basics. Each chip is a label-wrapped
   checkbox; checked chips fill green. Six fixed options → flat layout
   rather than a multi-line <select>. */
.admin-chip-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-chip-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.82rem;
  color: var(--color-heading);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.admin-chip-check input[type="checkbox"] { margin: 0; }
.admin-chip-check:has(input:checked) {
  background: rgba(49, 196, 122, 0.12);
  border-color: var(--color-primary);
  color: #166534;
}

/* ───────── Featured-services list (Category edit, Tab 2) ─────────
   Each row references an existing Service (never free-typed). The row
   carries the service ref + read-only "from £X" + a per-category blurb
   textarea + a "Show in mega-menu" toggle + remove. Drag-handle to
   reorder; the order drives the category page and the mega-menu. */
.admin-featured-list { display: flex; flex-direction: column; gap: 0.55rem; }
.admin-featured-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  align-items: start;
}
.admin-featured-row__handle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: grab;
  user-select: none;
  margin-top: 0.3rem;
}
.admin-featured-row__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.admin-featured-row__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.admin-featured-row__service {
  font-weight: 600;
  color: var(--color-heading);
  text-decoration: none;
  font-size: 0.95rem;
}
.admin-featured-row__service:hover { text-decoration: underline; }
.admin-featured-row__price {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}
.admin-featured-row__price strong { color: var(--color-heading); font-weight: 600; }
.admin-featured-row__body textarea {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.86rem;
  background: var(--color-surface);
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 52px;
}
.admin-featured-row__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 10rem;
}
.admin-featured-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.admin-featured-row__remove {
  padding: 0.25rem 0.55rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
}
.admin-featured-row__remove:hover { color: #b91c1c; border-color: #fca5a5; }

@media (max-width: 720px) {
  .admin-featured-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
  }
  .admin-featured-row__controls {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 767px) {
  .admin-topbar { padding: 0 0.85rem; height: 56px; gap: 0.55rem; }
  .admin-topbar__logo span { display: none; }
  .admin-user__name { display: none; }
  .admin-topbar__logout { display: none; }
  .admin-shell { grid-template-columns: 60px minmax(0, 1fr); min-height: calc(100vh - 56px); }
  .admin-sidebar { top: 56px; height: calc(100vh - 56px); max-height: calc(100vh - 56px); padding: 0.85rem 0.45rem; }
  .admin-main { padding: 1rem 0.95rem 2.5rem; }
  .admin-switcher__menu { left: -52px; min-width: 220px; }
}

/* Parked-tenant preview wash. Applied via `.page-admin--preview` on
   <body>. Persistent banner at the top of main, plus a slight
   desaturation on the content so it never reads as live admin. The
   sidebar stays full-colour so navigation is still legible. */
.admin-preview-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem clamp(1.25rem, 2.5vw, 2.25rem);
  margin: calc(-1 * clamp(1.5rem, 2.5vw, 2.25rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2.25rem)) 1.25rem;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  font-size: 0.82rem;
  line-height: 1.4;
}
.admin-preview-banner svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.admin-preview-banner strong { color: #78350f; font-weight: 700; }

.page-admin--preview .admin-main { filter: saturate(0.65); }
.page-admin--preview .admin-main > .admin-preview-banner { filter: none; }

/* Copy-button pulse — used when a [data-copy-text] / [data-copy-from]
   trigger has no inline label to flip. The brief green tint + bump
   acknowledges the click for the static-prototype case. */
@keyframes admin-copy-pulse {
  0%   { background-color: rgba(49, 196, 122, 0.4); transform: scale(1.08); }
  100% { background-color: transparent;             transform: scale(1); }
}
.is-copied { animation: admin-copy-pulse 1.2s ease-out; }
.page-admin--preview .admin-sidebar__label::after {
  content: "preview";
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
  border-radius: 999px;
}

/* =============================================================
   LARAVEL HOST OVERRIDES
   These exist because the admin layout co-loads a legacy NM
   app.css that asserts `h1,h2,h3,h4,h5 { color: var(--nm-brand) !important }`
   and default <button> styles bleed into .admin-topbar__logout
   (which became a <button> inside a logout form). All overrides
   are scoped to `body.page-admin` so the public site is untouched.
   ============================================================= */
body.page-admin h1,
body.page-admin h2,
body.page-admin h3,
body.page-admin h4,
body.page-admin h5 { color: var(--color-heading) !important; }

body.page-admin .admin-page-header__sub,
body.page-admin .admin-form-field__hint { color: var(--color-text-muted) !important; }

body.page-admin .admin-card__title { color: var(--color-heading) !important; }

/* Log out — Laravel renders it as <button> inside a form, not <a>.
   Strip the default user-agent button chrome so it matches the
   static text-link spec. */
body.page-admin .admin-topbar__logout-form { margin: 0; display: inline-flex; }
body.page-admin button.admin-topbar__logout {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  line-height: 1.2;
}
body.page-admin button.admin-topbar__logout:hover {
  color: var(--color-heading);
  background: var(--color-bg);
}

/* Sidebar — make sure it fills the shell even when page content is
   shorter than the viewport. The static spec uses `height: calc(100vh - 60px)`
   on the sidebar with `position: sticky`, but legacy CSS interference
   can collapse the grid row. Pin it to the shell explicitly. */
body.page-admin .admin-shell { min-height: 100vh; }
body.page-admin .admin-sidebar { align-self: stretch; }

/* =============================================================
   ACCOUNTING SECTION
   Components used across pages/admin/platform/accounting/*.
   Scoped to .acct- prefix. Reuses .admin-* shell wherever possible
   (topbar / sidebar / cards / tables / stats / btns).
   ============================================================= */

/* Source colours — one token per income stream. Job and Printvine
   reuse the system colours so the dashboard reads consistent with
   the platform overview. */
:root {
  --acct-job:        var(--system-website);    /* PAYE / employment — blue */
  --acct-rental:     #e0a32e;                  /* Rental — amber */
  --acct-printvine:  var(--system-printvine);  /* Printvine business — green */
  --acct-dividends:  #7c5cd6;                  /* Share dividends — violet */
  --acct-expense:    var(--color-accent);      /* Expenses — pink */
  --acct-personal:   #8b9198;                  /* Personal spending — grey */
  --acct-job-soft:        rgba(59, 130, 246, 0.10);
  --acct-rental-soft:     rgba(224, 163, 46, 0.14);
  --acct-printvine-soft:  rgba(47, 195, 122, 0.12);
  --acct-dividends-soft:  rgba(124, 92, 214, 0.12);
  --acct-expense-soft:    rgba(236, 91, 181, 0.10);
}

/* --- Topbar: tax-year selector + Cash-basis badge --- */
.admin-tax-year {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
}
.admin-tax-year:hover { background: var(--color-surface-2); }
.admin-tax-year__label {
  color: var(--color-text-muted); font-weight: 500;
}
.admin-tax-year__caret { color: var(--color-text-muted); font-size: 0.65rem; }

.admin-basis-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--acct-dividends-soft);
  color: #5f43b8;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.admin-basis-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acct-dividends);
}

/* --- Section sub-nav: 9 child pages of Accounting --- */
.acct-subnav {
  display: flex; gap: 0.1rem; align-items: center;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 1.25rem;
  overflow-x: auto;
}
.acct-subnav__item {
  padding: 0.7rem 0.95rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
}
.acct-subnav__item:hover { color: var(--color-text); }
.acct-subnav__item.is-active {
  color: var(--color-heading);
  border-bottom-color: var(--color-primary);
}

/* --- KPI accent variants (left-edge colour strip on .admin-stat) --- */
.admin-stat--acct {
  position: relative; overflow: hidden;
  padding-left: calc(1rem + 4px);
}
.admin-stat--acct::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.admin-stat--acct-net::before      { background: var(--color-primary); }
.admin-stat--acct-income::before   { background: var(--acct-job); }
.admin-stat--acct-expenses::before { background: var(--acct-expense); }
.admin-stat--acct-cash::before     { background: var(--acct-rental); }

/* --- Source pills for ledger rows --- */
.acct-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 650;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.acct-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.acct-pill--job        { background: var(--acct-job-soft);       color: #1d4ed8; }
.acct-pill--job::before        { background: var(--acct-job); }
.acct-pill--rental     { background: var(--acct-rental-soft);    color: #92400e; }
.acct-pill--rental::before     { background: var(--acct-rental); }
.acct-pill--printvine  { background: var(--acct-printvine-soft); color: #15803d; }
.acct-pill--printvine::before  { background: var(--acct-printvine); }
.acct-pill--dividends  { background: var(--acct-dividends-soft); color: #5f43b8; }
.acct-pill--dividends::before  { background: var(--acct-dividends); }
.acct-pill--expense    { background: var(--acct-expense-soft);   color: #b91c79; }
.acct-pill--expense::before    { background: var(--acct-expense); }
.acct-pill--personal   { background: var(--color-bg);            color: var(--color-text-muted); }
.acct-pill--personal::before   { background: var(--acct-personal); }

/* --- Category tag (HMRC-shaped, smaller, neutral) --- */
.acct-cat-tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  white-space: nowrap;
}
.acct-cat-tag__box {
  font-size: 0.65rem; color: var(--color-text-muted); margin-left: 0.25rem;
}

/* --- Income vs Expenses stacked bars (dashboard) --- */
.acct-bars { display: flex; flex-direction: column; gap: 0.95rem; }
.acct-bar__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.35rem;
}
.acct-bar__name {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 600;
}
.acct-bar__dot {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
}
.acct-bar__figs { font-size: 0.78rem; color: var(--color-text-muted); }
.acct-bar__figs b { color: var(--color-heading); font-weight: 700; }
.acct-bar__track {
  height: 24px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 6px;
  display: flex; overflow: hidden;
}
.acct-bar__fill {
  height: 100%; display: flex; align-items: center; padding: 0 0.45rem;
}
.acct-bar__fill span {
  font-size: 0.65rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.acct-bar__fill--income    { background: var(--acct-job); }
.acct-bar__fill--rental    { background: var(--acct-rental); }
.acct-bar__fill--printvine { background: var(--acct-printvine); }
.acct-bar__fill--dividends { background: var(--acct-dividends); }
.acct-bar__fill--expense   { background: var(--acct-expense); }
.acct-bars__legend {
  display: flex; gap: 1rem; margin-top: 0.9rem; padding-top: 0.85rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.74rem; color: var(--color-text-muted);
  flex-wrap: wrap;
}
.acct-bars__legend .acct-bar__dot { width: 10px; height: 10px; }
.acct-bars__legend-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
}

/* --- Tax-quarter strip --- */
.acct-quarters { display: flex; flex-direction: column; gap: 0.55rem; }
.acct-quarter {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.75rem; border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.acct-quarter.is-current {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.acct-quarter__q {
  font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted);
  width: 30px; flex-shrink: 0;
}
.acct-quarter.is-current .acct-quarter__q { color: #15803d; }
.acct-quarter__dates {
  font-size: 0.72rem; color: var(--color-text-muted);
  flex-shrink: 0; min-width: 130px;
}
.acct-quarter__progress {
  flex: 1; height: 5px; background: var(--color-border);
  border-radius: 3px; overflow: hidden;
}
.acct-quarter__progress i {
  display: block; height: 100%; background: var(--color-primary);
}
.acct-quarter__status {
  font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.55rem;
  border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
.acct-quarter__status--submitted { background: var(--color-primary-soft); color: #15803d; }
.acct-quarter__status--due       { background: #fcf3df; color: #92400e; }
.acct-quarter__status--open      { background: var(--color-bg); color: var(--color-text-muted); }

/* --- Entity (property/tenant) rows --- */
.acct-entity-list {
  display: flex; flex-direction: column;
}
.acct-entity {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: background 0.1s;
}
.acct-entity:last-child { border-bottom: 0; }
.acct-entity:hover { background: var(--color-surface-2); }
.acct-entity__icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.82rem; color: #fff;
  letter-spacing: -0.02em;
}
.acct-entity__icon--printvine { background: linear-gradient(135deg, var(--acct-printvine), #249a60); }
.acct-entity__icon--property-1 { background: linear-gradient(135deg, var(--acct-rental), #a07415); }
.acct-entity__icon--property-2 { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.acct-entity__icon--property-3 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.acct-entity__icon--add {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1.5px dashed var(--color-border);
}
.acct-entity__meta { flex: 1; min-width: 0; }
.acct-entity__name { font-size: 0.85rem; font-weight: 700; color: var(--color-heading); }
.acct-entity__tag  { font-size: 0.72rem; color: var(--color-text-muted); }
.acct-entity__figs { text-align: right; flex-shrink: 0; }
.acct-entity__net  {
  font-size: 0.92rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.acct-entity__net--pos { color: #15803d; }
.acct-entity__net--neg { color: #b91c79; }
.acct-entity__sub  { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.acct-entity--add  { color: var(--color-text-muted); font-weight: 600; }

/* --- HMRC-shaped table extras (extends .admin-table) --- */
.admin-table--acct tbody tr.acct-row-group td {
  background: var(--color-surface-2);
  font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.admin-table--acct tbody tr.acct-row-subtotal td {
  background: #fbfcfd;
  font-weight: 750; font-size: 0.86rem;
  border-top: 1px solid var(--color-border);
}
.admin-table--acct tbody tr.acct-row-net td {
  background: var(--color-heading);
  color: #fff; font-weight: 750; font-size: 0.9rem;
}
.admin-table--acct td.acct-num {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 650;
}
.admin-table--acct td.acct-num--in  { color: #15803d; }
.admin-table--acct td.acct-num--out { color: var(--color-heading); }
.admin-table--acct td.acct-num--muted { color: var(--color-text-muted); font-weight: 550; }
.acct-cat-name { display: flex; flex-direction: column; gap: 0.1rem; }
.acct-cat-name__main { font-weight: 600; color: var(--color-heading); }
.acct-cat-name__box  { font-size: 0.7rem; color: var(--color-text-muted); }

/* People-cost sub-row indicator (payroll/freelance) */
.acct-people-sub {
  padding-left: 2rem !important; position: relative;
}
.acct-people-sub::before {
  content: ""; position: absolute; left: 1.2rem; top: 50%;
  width: 6px; height: 1px; background: var(--color-border);
}
.acct-tag-payroll {
  display: inline-block;
  font-size: 0.6rem; font-weight: 700;
  background: var(--acct-job-soft); color: #1d4ed8;
  padding: 0.05rem 0.4rem; border-radius: 4px;
  margin-left: 0.4rem;
}
.acct-tag-freelance {
  display: inline-block;
  font-size: 0.6rem; font-weight: 700;
  background: var(--acct-dividends-soft); color: #5f43b8;
  padding: 0.05rem 0.4rem; border-radius: 4px;
  margin-left: 0.4rem;
}

/* --- Callouts (basis explainer, VAT-ready note, etc.) --- */
.acct-callout {
  display: flex; gap: 0.6rem; align-items: flex-start;
  border-radius: 8px; padding: 0.75rem 0.85rem;
  font-size: 0.78rem; line-height: 1.5;
  border: 1px solid;
}
.acct-callout svg { flex-shrink: 0; margin-top: 0.15rem; }
.acct-callout b { font-weight: 700; }
.acct-callout--basis {
  background: var(--acct-dividends-soft);
  border-color: #d9ccf5; color: #5f43b8;
}
.acct-callout--basis b { color: #4a3494; }
.acct-callout--vat {
  background: var(--acct-job-soft);
  border-color: #cfe1fb; color: #2c5aa0;
}
.acct-callout--vat b { color: #1f4480; }
.acct-callout--info {
  background: #fcf3df; border-color: #f0dca6; color: #8a6518;
}
.acct-callout--info b { color: #6e4f12; }
.acct-callout--firewall {
  background: var(--color-bg); border-color: var(--color-border); color: var(--color-text);
}
.acct-callout--firewall b { color: var(--color-heading); }

/* --- Page-shell prototype note (small dashed pill at bottom) --- */
.acct-proto-note {
  margin-top: 1.5rem; padding: 0.7rem 0.9rem;
  border-radius: 7px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  font-size: 0.74rem; color: var(--color-text-muted);
  display: flex; gap: 0.55rem; align-items: center;
}
.acct-proto-note code {
  background: var(--color-surface);
  padding: 0.05rem 0.35rem; border-radius: 4px;
  font-size: 0.72rem; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Submit-quarter card (right rail of tax page) --- */
.acct-submit { padding: 1rem; }
.acct-submit__title { font-size: 0.86rem; font-weight: 700; margin-bottom: 0.2rem; }
.acct-submit__desc  {
  font-size: 0.76rem; color: var(--color-text-muted); margin-bottom: 0.85rem; line-height: 1.5;
}
.acct-checklist { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.9rem; }
.acct-checklist__item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.78rem; }
.acct-checklist__mark {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 0.05rem;
}
.acct-checklist__mark--done { background: var(--color-primary); color: #fff; }
.acct-checklist__mark--todo {
  background: var(--color-surface-2); border: 1.5px solid var(--color-border);
}
.acct-checklist__item.is-done .acct-checklist__text { color: var(--color-heading); }
.acct-checklist__text { color: var(--color-text); }

.acct-copy-block {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 0.75rem; margin-bottom: 0.85rem;
}
.acct-copy-block__head {
  font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
  display: flex; align-items: center; justify-content: space-between;
}
.acct-copy-btn {
  font-size: 0.65rem; font-weight: 700; color: #15803d;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem;
  background: none; border: 0;
}
.acct-copy-row {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; padding: 0.25rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.acct-copy-row:last-child { border-bottom: 0; }
.acct-copy-row span { color: var(--color-text-muted); }
.acct-copy-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.acct-copy-row--total {
  border-bottom: 0; border-top: 1px solid var(--color-border);
  margin-top: 0.15rem; padding-top: 0.45rem;
}
.acct-copy-row--total b { font-size: 0.85rem; }

/* --- Deadline banner (top of tax page) --- */
.acct-deadline {
  display: flex; align-items: center; gap: 0.8rem;
  background: #fcf3df; border: 1px solid #f0dca6;
  border-radius: 10px; padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.acct-deadline__icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: #e0a32e; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.acct-deadline__text { flex: 1; }
.acct-deadline__title { font-size: 0.86rem; font-weight: 750; color: #7a5a13; }
.acct-deadline__sub   { font-size: 0.78rem; color: #8a6518; margin-top: 0.1rem; }
.acct-deadline__count { text-align: right; flex-shrink: 0; }
.acct-deadline__days  { font-size: 1.65rem; font-weight: 800; color: #7a5a13; line-height: 1; }
.acct-deadline__days-label {
  font-size: 0.66rem; font-weight: 700; color: #a07415;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* --- Tax-type tabs (MTD ITSA / VAT / SA Summary) --- */
.acct-tabs {
  display: flex; gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.1rem;
}
.acct-tabs__tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 0.95rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0;
}
.acct-tabs__tab:hover { color: var(--color-text); }
.acct-tabs__tab.is-active {
  color: var(--color-heading);
  border-bottom-color: var(--color-primary);
}
.acct-tabs__badge {
  font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.acct-tabs__badge--live { background: var(--color-primary-soft); color: #15803d; }
.acct-tabs__badge--soon { background: var(--color-bg); color: var(--color-text-muted); }

/* --- Quarter-chip selector --- */
.acct-q-selector {
  display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.acct-q-chip {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  cursor: pointer; min-width: 148px; transition: 0.12s;
}
.acct-q-chip:hover { border-color: var(--color-text-muted); }
.acct-q-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.acct-q-chip__top {
  display: flex; align-items: center; justify-content: space-between;
}
.acct-q-chip__q { font-size: 0.82rem; font-weight: 750; }
.acct-q-chip.is-active .acct-q-chip__q { color: #15803d; }
.acct-q-chip__dates { font-size: 0.7rem; color: var(--color-text-muted); }

/* --- Mini investments / CGT widget --- */
.acct-inv-summary {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: 0.85rem;
}
.acct-inv-summary__val {
  font-size: 1.4rem; font-weight: 750; letter-spacing: -0.02em;
}
.acct-inv-summary__gain { font-size: 0.78rem; font-weight: 700; }
.acct-inv-summary__gain--up { color: #15803d; }
.acct-cgt-box {
  margin-top: 0.85rem; padding: 0.75rem;
  border-radius: 7px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.acct-cgt-top {
  display: flex; justify-content: space-between;
  font-size: 0.74rem; margin-bottom: 0.45rem;
}
.acct-cgt-top b { font-weight: 700; }
.acct-cgt-track {
  height: 7px; background: var(--color-border); border-radius: 4px; overflow: hidden;
}
.acct-cgt-track i {
  display: block; height: 100%; background: var(--acct-expense); border-radius: 4px;
}
.acct-cgt-note { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.45rem; }

/* --- VAT-ready field placeholder --- */
.acct-vat-zero { color: var(--color-border); font-weight: 500; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .acct-quarter__dates { display: none; }
}

/* --- Headline row (Dashboard True cash + Net position pair) --- */
.acct-headline {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
  margin-bottom: 1rem;
}
.acct-headline__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  position: relative; overflow: hidden;
}
.acct-headline__card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.acct-headline__card--net::before        { background: var(--color-primary); }
.acct-headline__card--truecash::before   { background: var(--acct-dividends); }
.acct-headline__label {
  font-size: 0.74rem; font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-headline__label .acct-headline__hint {
  font-size: 0.68rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--color-text-muted); margin-left: 0.45rem;
}
.acct-headline__value {
  font-size: 1.9rem; font-weight: 750; letter-spacing: -0.025em;
  margin: 0.45rem 0 0.55rem; color: var(--color-heading);
}
.acct-headline__value--positive { color: #15803d; }
.acct-headline__breakdown {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--color-text-muted);
  border-top: 1px dashed var(--color-border); padding-top: 0.55rem;
}
.acct-headline__breakdown b { color: var(--color-text); font-weight: 700; }
.acct-headline__breakdown span { white-space: nowrap; }
@media (max-width: 760px) {
  .acct-headline { grid-template-columns: 1fr; }
}

/* "Owed to you" stat variant */
.admin-stat--acct-owed::before { background: #92400e; }

/* =============================================================
   ACCOUNTING DASHBOARD — v4 RESTRUCTURE
   The dashboard pivots around one question (How much did I make?)
   across two axes (time window, entity), plus a running tax pot.
   ============================================================= */

/* --- Dashboard toolbar (time-window + entity selectors) --- */
.acct-dash-toolbar {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.acct-dash-toolbar__label {
  font-size: 0.74rem; font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Segmented time-window control */
.acct-window {
  display: inline-flex; align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px; padding: 3px;
  gap: 1px;
}
.acct-window__btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer; background: none; border: 0;
  border-radius: 6px;
  white-space: nowrap;
  font-family: inherit;
}
.acct-window__btn:hover { color: var(--color-text); }
.acct-window__btn.is-active {
  background: var(--color-surface);
  color: var(--color-heading);
  box-shadow: 0 1px 2px rgba(20, 25, 30, 0.08);
}

/* Entity selector (matches the tax-year selector look) */
.acct-entity-pick {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
  font-family: inherit;
}
.acct-entity-pick:hover { background: var(--color-surface-2); }
.acct-entity-pick__label {
  color: var(--color-text-muted); font-weight: 500;
}

/* --- Dashboard headline statement (§12.3) --- */
.acct-statement {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
  position: relative; overflow: hidden;
}
.acct-statement::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--color-primary);
}
.acct-statement__line {
  font-size: 1.4rem; font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.acct-statement__amt {
  font-size: 2rem; font-weight: 800;
  color: #15803d; letter-spacing: -0.025em;
  margin: 0 0.15rem;
}
.acct-statement__amt--negative { color: #b91c79; }
.acct-statement__compare {
  margin-top: 0.65rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.acct-statement__delta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 700; padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
}
.acct-statement__delta--up   { background: var(--color-primary-soft); color: #15803d; }
.acct-statement__delta--down { background: #fee2e2; color: #b91c1c; }

/* Day-level cash-movement caveat */
.acct-day-note {
  display: flex; gap: 0.4rem; align-items: center;
  margin-top: 0.55rem;
  font-size: 0.74rem; color: var(--color-text-muted);
  font-style: italic;
}

/* --- Entity ranking (§12.4) --- */
.acct-rank-list { display: flex; flex-direction: column; }
.acct-rank-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 0.9rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line-2);
}
.acct-rank-row:last-child { border-bottom: 0; }
.acct-rank-row__num {
  font-size: 0.74rem; font-weight: 700; color: var(--color-text-muted);
}
.acct-rank-row__entity {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.86rem; font-weight: 600;
  min-width: 0;
}
.acct-rank-row__entity-name { color: var(--color-heading); }
.acct-rank-row__entity-tag {
  font-size: 0.7rem; font-weight: 500;
  color: var(--color-text-muted);
}
.acct-rank-row__net {
  font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  min-width: 90px; text-align: right;
}
.acct-rank-row__net--neg { color: #b91c79; }
.acct-rank-row__margin {
  font-size: 0.7rem; font-weight: 650;
  color: var(--color-text-muted);
  padding: 0.18rem 0.5rem;
  background: var(--color-bg);
  border-radius: 5px;
  white-space: nowrap;
  min-width: 76px; text-align: center;
}
.acct-rank-row__delta {
  font-size: 0.78rem; font-weight: 700;
  min-width: 70px; text-align: right;
  white-space: nowrap;
}
.acct-rank-row__delta--up { color: #15803d; }
.acct-rank-row__delta--down { color: #b91c1c; }
.acct-rank-row__delta--flat { color: var(--color-text-muted); }

/* When entity ≠ All, the breakdown changes to income/expenses/wages/freelancers */
.acct-decomp-list {
  display: flex; flex-direction: column;
}
.acct-decomp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line-2);
  font-size: 0.86rem;
}
.acct-decomp-row__label { color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; }
.acct-decomp-row__amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.acct-decomp-row--total {
  background: var(--color-surface-2);
  font-weight: 750;
  border-bottom: 0;
}

/* --- Tax pot tile (§12.6) --- */
.acct-pot {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.acct-pot__head {
  padding: 0.95rem 1.1rem 0.5rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem;
}
.acct-pot__title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--color-heading);
}
.acct-pot__verdict {
  font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.acct-pot__verdict--behind { background: #fee2e2; color: #991b1b; }
.acct-pot__verdict--ahead  { background: var(--color-primary-soft); color: #15803d; }
.acct-pot__verdict--ontrack { background: var(--color-bg); color: var(--color-text); }
.acct-pot__body {
  padding: 0.2rem 1.1rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.acct-pot__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.84rem;
}
.acct-pot__row span { color: var(--color-text-muted); }
.acct-pot__row b {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--color-heading);
}
.acct-pot__row--gap b { color: #b91c1c; }
.acct-pot__row--gap.acct-pot__row--ahead b { color: #15803d; }
.acct-pot__topup {
  margin: 0.65rem 1.1rem 0.95rem;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--color-border);
  border-radius: 7px;
  text-align: center;
}
.acct-pot__topup-label {
  font-size: 0.72rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600;
}
.acct-pot__topup-value {
  display: block;
  font-size: 1.5rem; font-weight: 800;
  color: var(--color-heading);
  margin: 0.2rem 0 0.1rem;
  letter-spacing: -0.02em;
}
.acct-pot__topup-note {
  font-size: 0.72rem; color: var(--color-text-muted);
}
.acct-pot__caveat {
  padding: 0 1.1rem 0.95rem;
  font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5;
}

/* True cash position — refreshed for v3 formula */
.acct-true-cash {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
}
.acct-true-cash__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.45rem;
}
.acct-true-cash__title {
  font-size: 0.92rem; font-weight: 700;
}
.acct-true-cash__hint {
  font-size: 0.7rem; color: var(--color-text-muted);
}
.acct-true-cash__value {
  font-size: 1.85rem; font-weight: 800;
  color: #15803d; letter-spacing: -0.025em;
  margin: 0.1rem 0 0.65rem;
}
.acct-true-cash__rows {
  display: flex; flex-direction: column;
  border-top: 1px dashed var(--color-border); padding-top: 0.55rem;
}
.acct-true-cash__row {
  display: flex; justify-content: space-between;
  font-size: 0.78rem;
  padding: 0.2rem 0;
}
.acct-true-cash__row span { color: var(--color-text-muted); }
.acct-true-cash__row b { font-variant-numeric: tabular-nums; font-weight: 650; }
.acct-true-cash__row--sub { color: var(--color-text-muted); }

/* =============================================================
   MISSION CONTROL — OBLIGATIONS & VAULT
   v6 adds Obligations and Vault as siblings to Accounting under
   the Mission Control nav group. CSS prefix stays .acct-* / .admin-*
   per v6 §14.3 — no rename of internal classes.
   ============================================================= */

/* --- Always-visible "Next obligation" banner on the dashboard --- */
.acct-next-oblig {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-amber-wash, #fcf3df);
  border: 1px solid #f0dca6;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.acct-next-oblig--red {
  background: #fee2e2;
  border-color: #fbb6b6;
}
.acct-next-oblig__pulse {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #e0a32e; color: #fff;
}
.acct-next-oblig--red .acct-next-oblig__pulse { background: #b91c1c; }
.acct-next-oblig__text { flex: 1; }
.acct-next-oblig__label {
  font-size: 0.7rem; font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-next-oblig__title {
  font-size: 0.95rem; font-weight: 750; color: #7a5a13;
  margin-top: 0.1rem;
}
.acct-next-oblig--red .acct-next-oblig__title { color: #7f1d1d; }
.acct-next-oblig__sub {
  font-size: 0.78rem; color: #8a6518; margin-top: 0.15rem;
}
.acct-next-oblig--red .acct-next-oblig__sub { color: #991b1b; }
.acct-next-oblig__cta { flex-shrink: 0; }

/* --- Honesty banner (Obligations top) --- */
.acct-honesty {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-left: 5px solid var(--color-primary);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.acct-honesty__icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--color-primary-soft);
  color: #15803d;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-honesty__body { flex: 1; }
.acct-honesty__title {
  font-size: 0.95rem; font-weight: 750;
  color: var(--color-heading);
}
.acct-honesty__text {
  font-size: 0.84rem; color: var(--color-text);
  line-height: 1.5; margin-top: 0.3rem;
}
.acct-honesty__text b { color: var(--color-heading); }
.acct-honesty__actions {
  display: flex; gap: 0.5rem; margin-top: 0.75rem;
}

/* --- Origin badge (Generated / You added / Needs setup) --- */
.acct-origin {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.acct-origin--generated { background: var(--color-primary-soft); color: #15803d; }
.acct-origin--manual    { background: var(--acct-job-soft); color: #1d4ed8; }
.acct-origin--needs     { background: #fcf3df; color: #92400e; }

/* --- Obligation family group header --- */
.acct-family {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.acct-family__head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--color-line-2);
}
.acct-family__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-family__icon--tax    { background: var(--acct-printvine-soft); color: #15803d; }
.acct-family__icon--people { background: var(--acct-job-soft); color: #1d4ed8; }
.acct-family__icon--prop   { background: var(--acct-rental-soft); color: #92400e; }
.acct-family__icon--ops    { background: var(--acct-dividends-soft); color: #5f43b8; }
.acct-family__title {
  font-size: 0.98rem; font-weight: 750;
  color: var(--color-heading);
}
.acct-family__count {
  margin-left: auto;
  font-size: 0.72rem; font-weight: 650;
  color: var(--color-text-muted);
}
.acct-family__count b { color: var(--color-heading); }
.acct-family__count--alert { color: #b91c1c; }

/* --- Obligation row --- */
.acct-oblig-row {
  display: grid;
  grid-template-columns: 5px 1fr auto auto;
  align-items: center; gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-line-2);
}
.acct-oblig-row:last-child { border-bottom: 0; }
.acct-oblig-row__band {
  height: 32px; width: 5px; border-radius: 3px; align-self: center;
}
.acct-oblig-row__band--grey   { background: var(--color-border); }
.acct-oblig-row__band--amber  { background: #e0a32e; }
.acct-oblig-row__band--red    { background: #b91c1c; }
.acct-oblig-row__band--done   { background: var(--color-primary); }
.acct-oblig-row__body {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
}
.acct-oblig-row__line {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.acct-oblig-row__title {
  font-size: 0.92rem; font-weight: 700; color: var(--color-heading);
}
.acct-oblig-row__title--muted { color: var(--color-text-muted); font-weight: 600; }
.acct-oblig-row__meta {
  font-size: 0.74rem; color: var(--color-text-muted);
}
.acct-oblig-row__meta b { color: var(--color-text); font-weight: 650; }
.acct-oblig-row__due {
  font-size: 0.85rem; font-weight: 750;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.acct-oblig-row__due--far    { color: var(--color-text); }
.acct-oblig-row__due--near   { color: #92400e; }
.acct-oblig-row__due--overdue { color: #b91c1c; }
.acct-oblig-row__due--done   { color: #15803d; }
.acct-oblig-row__due-label {
  display: block; font-size: 0.66rem; font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Level chip — re-uses acct-pill colours per entity */
.acct-level-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 650;
  padding: 0.12rem 0.45rem; border-radius: 4px;
  background: var(--color-bg); color: var(--color-text);
}

/* --- Vault document card --- */
.acct-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.acct-vault-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.acct-vault-card__head {
  display: flex; align-items: flex-start; gap: 0.55rem;
}
.acct-vault-card__icon {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-vault-card__icon--reference { background: var(--acct-job-soft); color: #1d4ed8; }
.acct-vault-card__icon--template  { background: var(--acct-dividends-soft); color: #5f43b8; }
.acct-vault-card__icon--record    { background: var(--color-primary-soft); color: #15803d; }
.acct-vault-card__title {
  font-size: 0.88rem; font-weight: 700; color: var(--color-heading);
  line-height: 1.3; flex: 1; min-width: 0;
}
.acct-vault-card__type {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem; border-radius: 4px;
}
.acct-vault-card__type--reference { background: var(--acct-job-soft); color: #1d4ed8; }
.acct-vault-card__type--template  { background: var(--acct-dividends-soft); color: #5f43b8; }
.acct-vault-card__type--record    { background: var(--color-primary-soft); color: #15803d; }
.acct-vault-card__meta {
  font-size: 0.72rem; color: var(--color-text-muted);
  line-height: 1.5;
}
.acct-vault-card__meta b { color: var(--color-text); font-weight: 600; }
.acct-vault-card__link {
  font-size: 0.74rem; font-weight: 600;
  color: var(--color-primary-hover);
  text-decoration: none;
  margin-top: auto;
}
.acct-vault-card__link:hover { text-decoration: underline; }
.acct-vault-card__attached {
  font-size: 0.7rem; color: var(--color-text-muted);
  padding: 0.4rem 0.55rem;
  background: var(--color-surface-2); border-radius: 5px;
}
.acct-vault-card__attached b { color: var(--color-text); }

/* --- Setup gap callout (Obligations bottom) --- */
.acct-setup-gap {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  background: #fcf3df;
  border: 1px solid #f0dca6;
  border-radius: 10px;
  margin-top: 1rem;
}
.acct-setup-gap__icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: #e0a32e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-setup-gap__body { flex: 1; }
.acct-setup-gap__title {
  font-size: 0.92rem; font-weight: 750; color: #7a5a13;
}
.acct-setup-gap__text {
  font-size: 0.82rem; color: #8a6518;
  line-height: 1.5; margin-top: 0.3rem;
}

/* --- v7 §15: data-source markers on ledger rows + "Connect a feed" stubs --- */
.acct-source {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.66rem; font-weight: 650;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
.acct-source::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
}
.acct-source--manual { background: var(--color-bg); color: var(--color-text-muted); }
.acct-source--manual::before { background: var(--color-text-muted); }
.acct-source--feed { background: var(--color-primary-soft); color: #15803d; }
.acct-source--feed::before { background: var(--color-primary); }
.acct-source--feed-pending {
  background: var(--color-bg); color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  font-style: italic;
}
.acct-source--feed-pending::before { background: var(--color-text-muted); }

/* Stub "Connect a feed" affordance — visibly unwired */
.acct-feed-stub {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}
.acct-feed-stub__icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-feed-stub__body { flex: 1; }
.acct-feed-stub__title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--color-heading);
}
.acct-feed-stub__title .acct-feed-stub__tier {
  font-size: 0.65rem; font-weight: 700;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  margin-left: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.acct-feed-stub__text {
  font-size: 0.74rem; color: var(--color-text-muted);
  margin-top: 0.2rem; line-height: 1.5;
}
.acct-feed-stub__action {
  flex-shrink: 0;
}

/* =============================================================
   AUDIT-READINESS (v8 §16)
   Cross-cutting UI vocabulary: change-log history, period lock,
   evidence flags, reconciliation status, honesty strip.
   ============================================================= */

/* --- Locked-period badge (filed quarters / tax years) --- */
.acct-locked-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.66rem; font-weight: 700;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.acct-locked-banner {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.acct-locked-banner__icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-locked-banner__body { flex: 1; font-size: 0.82rem; color: var(--color-text); line-height: 1.5; }
.acct-locked-banner__body b { color: var(--color-heading); font-weight: 700; }

/* --- Evidence indicator (per row) --- */
.acct-evidence {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.66rem; font-weight: 650;
  padding: 0.12rem 0.45rem; border-radius: 4px;
  white-space: nowrap;
}
.acct-evidence--attached {
  background: var(--color-primary-soft); color: #15803d;
}
.acct-evidence--missing {
  background: #fee2e2; color: #991b1b;
}
.acct-evidence--manual-ok {
  background: var(--color-bg); color: var(--color-text-muted);
}
.acct-evidence::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.acct-evidence--attached::before { background: var(--color-primary); }
.acct-evidence--missing::before { background: #b91c1c; }
.acct-evidence--manual-ok::before { background: var(--color-text-muted); }

/* --- Reconciliation status --- */
.acct-recon {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; font-weight: 650;
  padding: 0.12rem 0.45rem; border-radius: 4px;
  white-space: nowrap;
}
.acct-recon--matched   { background: var(--color-primary-soft); color: #15803d; }
.acct-recon--unmatched { background: #fcf3df; color: #92400e; }
.acct-recon--no-stmt   { background: var(--color-bg); color: var(--color-text-muted); }

/* --- History affordance + inline popover --- */
.acct-history-btn {
  font-size: 0.7rem; font-weight: 600;
  color: var(--color-text-muted);
  background: none; border: 1px solid transparent;
  padding: 0.18rem 0.45rem; border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.acct-history-btn:hover {
  background: var(--color-bg);
  color: var(--color-heading);
  border-color: var(--color-border);
}
.acct-history-popover {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  box-shadow: 0 4px 12px rgba(20, 25, 30, 0.08);
}
.acct-history-popover__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.65rem;
}
.acct-history-popover__title { font-weight: 700; color: var(--color-heading); font-size: 0.84rem; }
.acct-history-popover__meta { font-size: 0.72rem; color: var(--color-text-muted); }
.acct-history-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.acct-history-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.acct-history-entry__when {
  font-size: 0.7rem; color: var(--color-text-muted);
  font-weight: 600; white-space: nowrap;
}
.acct-history-entry__who {
  font-size: 0.74rem; color: var(--color-heading); font-weight: 650;
}
.acct-history-entry__diff {
  grid-column: 1 / -1;
  background: var(--color-surface-2);
  border-radius: 5px;
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
}
.acct-history-entry__diff code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--color-surface);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.acct-history-entry__diff .acct-history-old { color: #b91c1c; text-decoration: line-through; }
.acct-history-entry__diff .acct-history-new { color: #15803d; font-weight: 650; }

/* --- Standing honesty strip (bottom of audit-relevant pages) --- */
.acct-audit-strip {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--acct-dividends);
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.78rem; color: var(--color-text); line-height: 1.5;
}
.acct-audit-strip svg { flex-shrink: 0; color: var(--acct-dividends); }
.acct-audit-strip b { color: var(--color-heading); font-weight: 700; }

/* --- Audit-readiness summary card (dashboard) --- */
.acct-audit-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.acct-audit-summary__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.7rem;
}
.acct-audit-summary__title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--color-heading);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.acct-audit-summary__title svg { color: var(--acct-dividends); }
.acct-audit-summary__hint {
  font-size: 0.7rem; color: var(--color-text-muted);
}
.acct-audit-summary__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem;
}
.acct-audit-summary__row {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; padding: 0.35rem 0.6rem;
  background: var(--color-surface-2);
  border-radius: 6px;
}
.acct-audit-summary__row b { font-weight: 700; }
.acct-audit-summary__row--ok b { color: #15803d; }
.acct-audit-summary__row--warn b { color: #b91c1c; }
.acct-audit-summary__row--info b { color: var(--color-heading); }
.acct-audit-summary__foot {
  font-size: 0.72rem; color: var(--color-text-muted);
  margin-top: 0.65rem; line-height: 1.5;
}
.acct-audit-summary__foot b { color: var(--color-text); }

/* --- Adjusted-after-lock row marker (a dated adjustment, not an in-place edit) --- */
.acct-adjusted {
  display: inline-block;
  font-size: 0.6rem; font-weight: 700;
  background: #fcf3df; color: #92400e;
  padding: 0.05rem 0.4rem; border-radius: 4px;
  margin-left: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* --- v9 §4.1 Pinned secondary headline (sits below the main statement) --- */
.acct-pinned {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--acct-printvine);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}
.acct-pinned__pin {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--acct-printvine-soft);
  color: #15803d;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-pinned__body { flex: 1; min-width: 0; }
.acct-pinned__label {
  font-size: 0.66rem; font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-pinned__line {
  font-size: 0.92rem; font-weight: 700;
  color: var(--color-heading);
  margin-top: 0.15rem;
}
.acct-pinned__amt {
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0.1rem;
}
.acct-pinned__amt--positive { color: #15803d; }
.acct-pinned__amt--negative { color: #b91c79; }
.acct-pinned__delta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.74rem; font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.45rem;
}
.acct-pinned__delta--up   { background: var(--color-primary-soft); color: #15803d; }
.acct-pinned__delta--down { background: #fee2e2; color: #b91c1c; }
.acct-pinned__delta--flat { background: var(--color-bg); color: var(--color-text-muted); }
.acct-pinned__settings {
  font-size: 0.7rem; color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
}
.acct-pinned__settings:hover { color: var(--color-primary-hover); }

/* ============================================================
   Investment Research module — Mission Control → Accounting → Research
   pages/admin/platform/accounting/research*.html
   See SCOPE-investment-research.md. Static prototype; FMP price feed +
   AI affordances are stubbed (Laravel-phase). Honesty principle throughout.
   ============================================================ */

/* "Prices as of [time] · delayed" stamp (research-page topbar pill) */
.acct-price-stamp {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.72rem; color: var(--color-text-muted);
}
.acct-price-stamp::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
}
.acct-price-stamp b { color: var(--color-heading); font-weight: 650; }

/* Vision banner — dark intro card explaining the method */
.acct-research-vision {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: linear-gradient(100deg, #1b2027, #23303a);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  margin: 0.9rem 0 1.1rem;
  color: #dfe4e8;
}
.acct-research-vision__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(47, 195, 122, 0.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.acct-research-vision__body { flex: 1; }
.acct-research-vision__title {
  font-size: 0.86rem; font-weight: 700; color: #ffffff;
  margin: 0 0 0.2rem;
}
.acct-research-vision__text {
  font-size: 0.78rem; line-height: 1.55; color: #aeb6bd;
}
.acct-research-vision__text b { color: #dfe4e8; font-weight: 650; }
.acct-research-vision__text em { color: #c7ccd2; font-style: italic; }

/* Strip — legend + sort */
.acct-research-strip {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.acct-research-strip__spacer { flex: 1; }
.acct-research-legend { display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; }
.acct-research-legend__item {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; color: var(--color-text-muted); font-weight: 550;
}

/* Signal dots — shared with cards, verdict, legend, log */
.acct-signal-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.acct-signal-dot--buy  { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.acct-signal-dot--near { background: #e0a32e; box-shadow: 0 0 0 3px #fcf3df; }
.acct-signal-dot--hold { background: var(--color-text-muted); }
.acct-signal-dot--over { background: #b91c1c; box-shadow: 0 0 0 3px #fee2e2; }
.acct-signal-dot--sm   { width: 8px; height: 8px; }
.acct-signal-dot--xs   { width: 7px; height: 7px; box-shadow: none !important; }

/* Segmented sort control */
.acct-seg {
  display: flex; background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 2px;
}
.acct-seg__btn {
  padding: 0.3rem 0.7rem; font-size: 0.72rem; font-weight: 650;
  color: var(--color-text-muted); border-radius: 4px;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit;
}
.acct-seg__btn.is-active {
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 1px 2px rgba(20, 25, 30, 0.06);
}

/* Alert bar — "N stocks in buy zone" */
.acct-research-alert {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-primary-soft);
  border: 1px solid #b6e8ce;
  border-radius: var(--radius-md);
  margin-bottom: 1.1rem;
}
.acct-research-alert__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.acct-research-alert__text { flex: 1; font-size: 0.8rem; color: #1d6b45; }
.acct-research-alert__text b { font-weight: 750; color: #155235; }
.acct-research-alert__tickers { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.acct-research-alert__tick {
  background: var(--color-surface);
  border: 1px solid #b6e8ce;
  border-radius: 5px;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem; font-weight: 700; color: #15803d;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.acct-research-alert__tick:hover { background: #fff; border-color: var(--color-primary); }

/* Grid header */
.acct-research-grid-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.75rem; gap: 0.85rem; flex-wrap: wrap;
}
.acct-research-grid-head h2 { font-size: 0.95rem; font-weight: 700; color: var(--color-heading); margin: 0; }
.acct-research-grid-head__sub { font-size: 0.76rem; color: var(--color-text-muted); }

/* Watchlist grid */
.acct-research-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem; margin-bottom: 1.65rem;
}
@media (max-width: 1100px) { .acct-research-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .acct-research-grid { grid-template-columns: 1fr; } }

/* Stock card */
.acct-stock {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow 0.14s, transform 0.14s, border-color 0.14s;
}
.acct-stock:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.acct-stock::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.acct-stock--buy::before  { background: var(--color-primary); }
.acct-stock--near::before { background: #e0a32e; }
.acct-stock--hold::before { background: var(--color-border); }
.acct-stock--over::before { background: #b91c1c; }

.acct-stock__top {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.85rem 0.95rem 0.65rem;
}
.acct-stock__id { flex: 1; min-width: 0; }
.acct-stock__name {
  font-size: 0.88rem; font-weight: 700; color: var(--color-heading);
  display: flex; align-items: center; gap: 0.45rem;
  letter-spacing: -0.01em;
}
.acct-stock__ticker {
  font-size: 0.66rem; color: var(--color-text-muted);
  font-weight: 650; margin-top: 0.15rem; letter-spacing: 0.04em;
}
.acct-stock__price { text-align: right; flex-shrink: 0; }
.acct-stock__now {
  font-size: 1.05rem; font-weight: 750; color: var(--color-heading);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.acct-stock__day {
  font-size: 0.66rem; font-weight: 650; margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.acct-stock__day--up   { color: #15803d; }
.acct-stock__day--down { color: #b91c79; }

/* Verdict line */
.acct-verdict {
  padding: 0.45rem 0.95rem;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.4rem;
}
.acct-verdict--buy  { background: var(--color-primary-soft); color: #15803d; }
.acct-verdict--near { background: #fcf3df; color: #92400e; }
.acct-verdict--hold { background: var(--color-bg); color: var(--color-text-muted); }
.acct-verdict--over { background: #fee2e2; color: #991b1b; }

/* Value gauge */
.acct-gauge { padding: 1rem 0.95rem 0.4rem; }
.acct-gauge__track {
  height: 26px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  position: relative;
  margin-bottom: 0.4rem;
}
.acct-gauge__buyzone {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--color-primary-soft);
  border-right: 1.5px dashed var(--color-primary);
  border-radius: 5px 0 0 5px;
}
.acct-gauge__fair {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: #5f43b8; border-radius: 2px;
}
.acct-gauge__fair::after {
  content: "FAIR"; position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem; font-weight: 800; color: #5f43b8;
  letter-spacing: 0.04em; white-space: nowrap;
}
.acct-gauge__now {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--color-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
.acct-gauge__now--buy  { background: var(--color-primary); }
.acct-gauge__now--near { background: #e0a32e; }
.acct-gauge__now--hold { background: var(--color-text-muted); }
.acct-gauge__now--over { background: #b91c1c; }
.acct-gauge__labels {
  display: flex; justify-content: space-between;
  font-size: 0.62rem; color: var(--color-text-muted); font-weight: 650;
}

/* Targets row */
.acct-targets {
  display: flex;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
.acct-target {
  flex: 1; padding: 0.55rem 0.4rem; text-align: center;
  border-right: 1px solid var(--color-border);
}
.acct-target:last-child { border-right: 0; }
.acct-target__label {
  font-size: 0.6rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-target__val {
  font-size: 0.86rem; font-weight: 750; margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.acct-target__val--buy   { color: #15803d; }
.acct-target__val--fair  { color: #5f43b8; }
.acct-target__val--sell  { color: #b91c79; }
.acct-target__val--unset { color: var(--color-border); font-weight: 600; }
.acct-target__mine {
  font-size: 0.58rem; color: var(--color-text-muted);
  font-weight: 600; margin-top: 0.1rem;
}

/* Conviction footer (on card) */
.acct-conv {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  margin-top: auto;
}
.acct-conv__dots { display: flex; gap: 2px; flex-shrink: 0; }
.acct-conv__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-border);
}
.acct-conv__dot.is-on { background: #5f43b8; }
.acct-conv__label {
  font-size: 0.64rem; color: var(--color-text-muted);
  font-weight: 650; flex-shrink: 0; letter-spacing: 0.02em;
}
.acct-conv__note {
  flex: 1; font-size: 0.68rem; color: var(--color-text-muted);
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}

/* Circle-of-competence chip */
.acct-conv-circle {
  font-size: 0.62rem; font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.acct-conv-circle--in   { background: var(--color-primary-soft); color: #15803d; }
.acct-conv-circle--edge { background: #fcf3df; color: #92400e; }
.acct-conv-circle--out  { background: #fee2e2; color: #991b1b; }

/* Conviction layer panel rows (used inside admin-card) */
.acct-conv-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.acct-conv-row:last-child { border-bottom: 0; }
.acct-conv-row__top {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.3rem; flex-wrap: wrap;
}
.acct-conv-row__tick {
  font-size: 0.68rem; font-weight: 800;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.02em;
  color: var(--color-heading);
  text-decoration: none;
}
.acct-conv-row__tick:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.acct-conv-row__text {
  font-size: 0.76rem; color: var(--color-text); line-height: 1.5;
}
.acct-conv-row__text b { color: var(--color-heading); font-weight: 650; }

/* Decision-log rows (used in research.html preview and research-log.html full) */
.acct-log-row {
  display: flex; gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.acct-log-row:last-child { border-bottom: 0; }
.acct-log-row__mark {
  width: 28px; height: 28px; border-radius: 7px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.acct-log-row__mark--buy  { background: var(--color-primary-soft); color: #15803d; }
.acct-log-row__mark--skip { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.acct-log-row__mark--sell { background: var(--acct-expense-soft); color: #b91c79; }
.acct-log-row__mark--rate { background: var(--acct-dividends-soft); color: #5f43b8; }
.acct-log-row__body { flex: 1; min-width: 0; }
.acct-log-row__line { font-size: 0.76rem; font-weight: 650; color: var(--color-text); }
.acct-log-row__act       { font-weight: 750; }
.acct-log-row__act--buy  { color: #15803d; }
.acct-log-row__act--skip { color: var(--color-text-muted); }
.acct-log-row__act--sell { color: #b91c79; }
.acct-log-row__act--rate { color: #5f43b8; }
.acct-log-row__why {
  font-size: 0.7rem; color: var(--color-text-muted);
  font-style: italic; margin-top: 0.15rem;
}
.acct-log-row__date {
  font-size: 0.66rem; color: var(--color-text-muted);
  flex-shrink: 0; white-space: nowrap; font-weight: 600;
}
.acct-log-row__ticker {
  font-size: 0.66rem; font-weight: 800; color: var(--color-heading);
  letter-spacing: 0.04em; margin-right: 0.3rem;
}

/* ===== research-stock.html — single stock detail ===== */

/* Hero header (replaces standard admin-page-header on stock detail) */
.acct-stock-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1rem;
  display: flex; gap: 1.3rem; align-items: flex-start; flex-wrap: wrap;
}
.acct-stock-hero__id { flex: 1; min-width: 200px; }
.acct-stock-hero__back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; color: var(--color-text-muted);
  font-weight: 600; text-decoration: none;
  margin-bottom: 0.55rem;
}
.acct-stock-hero__back:hover { color: var(--color-primary-hover); }
.acct-stock-hero__name {
  font-size: 1.4rem; font-weight: 750; color: var(--color-heading);
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
}
.acct-stock-hero__ticker {
  font-size: 0.74rem; color: var(--color-text-muted);
  font-weight: 650; letter-spacing: 0.04em; margin-top: 0.25rem;
}
.acct-stock-hero__price { text-align: right; min-width: 140px; }
.acct-stock-hero__now {
  font-size: 1.7rem; font-weight: 800; color: var(--color-heading);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.acct-stock-hero__day {
  font-size: 0.74rem; font-weight: 700; margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.acct-stock-hero__actions {
  display: flex; gap: 0.45rem; flex-wrap: wrap;
}

/* Margin-of-safety callout — large, prominent (value-investing key number) */
.acct-mos {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-primary-soft);
  border: 1px solid #b6e8ce;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}
.acct-mos__val {
  font-size: 1.7rem; font-weight: 800; color: #15803d;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; line-height: 1;
}
.acct-mos__body { flex: 1; min-width: 0; }
.acct-mos__label {
  font-size: 0.62rem; font-weight: 800; color: #15803d;
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 0.15rem;
}
.acct-mos__text {
  font-size: 0.76rem; color: #1d6b45; line-height: 1.45;
}
.acct-mos--thin { background: #fcf3df; border-color: #f0dca6; border-left-color: #e0a32e; }
.acct-mos--thin .acct-mos__val,
.acct-mos--thin .acct-mos__label { color: #92400e; }
.acct-mos--thin .acct-mos__text { color: #8a6518; }
.acct-mos--neg  { background: #fee2e2; border-color: #fca5a5; border-left-color: #b91c1c; }
.acct-mos--neg .acct-mos__val,
.acct-mos--neg .acct-mos__label { color: #991b1b; }
.acct-mos--neg .acct-mos__text { color: #7f1d1d; }

/* Thesis card — NM's prose */
.acct-thesis {
  padding: 0.95rem 1.05rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.84rem; line-height: 1.6; color: var(--color-text);
}
.acct-thesis__quote {
  font-style: italic;
  border-left: 3px solid var(--color-primary);
  padding-left: 0.85rem;
  color: var(--color-heading);
}

/* "What changes my mind" callout — thesis-breaker */
.acct-breaker {
  padding: 0.85rem 1rem;
  background: #fcf3df;
  border: 1px solid #f0dca6;
  border-radius: var(--radius-md);
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.78rem; color: #8a6518; line-height: 1.5;
}
.acct-breaker svg { flex-shrink: 0; margin-top: 0.1rem; color: #a07415; }
.acct-breaker b { color: #6e4f12; font-weight: 700; }

/* Macro-sensitivity tags */
.acct-macro-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.acct-macro-tag {
  font-size: 0.66rem; font-weight: 650;
  background: var(--acct-dividends-soft); color: #5f43b8;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Plan + days-held progress */
.acct-plan {
  padding: 1rem 1.1rem;
}
.acct-plan__heads {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.65rem; margin-bottom: 0.4rem;
}
.acct-plan__left {
  font-size: 0.78rem; color: var(--color-text);
}
.acct-plan__left b { color: var(--color-heading); font-weight: 700; }
.acct-plan__right {
  font-size: 0.72rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.acct-plan__track {
  height: 10px; background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.acct-plan__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #249a60);
  border-radius: 999px;
}
.acct-plan__caption {
  font-size: 0.7rem; color: var(--color-text-muted);
  margin-top: 0.45rem; line-height: 1.5;
}
.acct-plan__caption b { color: var(--color-text); font-weight: 650; }

/* AI affordance — stubbed button block */
.acct-ai-stub {
  display: flex; gap: 0.65rem; align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--acct-dividends-soft);
  border: 1px dashed #b6a4e7;
  border-radius: var(--radius-md);
}
.acct-ai-stub__icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: #5f43b8; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.acct-ai-stub__body { flex: 1; min-width: 0; }
.acct-ai-stub__title {
  font-size: 0.78rem; font-weight: 700; color: #4a3494;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.acct-ai-stub__tier {
  font-size: 0.6rem; font-weight: 700;
  background: var(--color-surface); color: #5f43b8;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.acct-ai-stub__text {
  font-size: 0.74rem; color: #4a3494; line-height: 1.5;
}
.acct-ai-stub__actions {
  display: flex; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap;
}
.acct-ai-stub__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--color-surface);
  border: 1px solid #b6a4e7;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.7rem; font-weight: 650; color: #5f43b8;
  cursor: not-allowed;
}
.acct-ai-stub__btn:hover { background: var(--acct-dividends-soft); }

/* ===== research-allocation.html — £50k allocation view ===== */

/* Capital overview row */
.acct-capital {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem; margin-bottom: 1rem;
}
@media (max-width: 900px) { .acct-capital { grid-template-columns: repeat(2, 1fr); } }
.acct-capital__tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.acct-capital__label {
  font-size: 0.66rem; color: var(--color-text-muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-capital__val {
  font-size: 1.4rem; font-weight: 750; color: var(--color-heading);
  font-variant-numeric: tabular-nums; margin-top: 0.2rem;
  letter-spacing: -0.02em;
}
.acct-capital__sub {
  font-size: 0.72rem; color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* Propositions table — ranked */
.acct-prop-table .acct-num-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.acct-prop-table .acct-num-pct--good { color: #15803d; }
.acct-prop-table .acct-num-pct--mid  { color: #92400e; }
.acct-prop-table .acct-num-pct--low  { color: var(--color-text-muted); }

/* Mini conviction dots inline */
.acct-conv-mini {
  display: inline-flex; gap: 1.5px; vertical-align: middle;
}
.acct-conv-mini__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border);
}
.acct-conv-mini__dot.is-on { background: #5f43b8; }

/* Concentration mirror — horizontal stacked bar by sector */
.acct-concentration {
  padding: 0.95rem 1.05rem;
}
.acct-concentration__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.55rem;
}
.acct-concentration__title { font-size: 0.82rem; font-weight: 700; color: var(--color-heading); }
.acct-concentration__hint  { font-size: 0.7rem; color: var(--color-text-muted); }
.acct-concentration__bar {
  display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.acct-concentration__seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden;
}
.acct-concentration__seg--auto { background: var(--color-primary); }
.acct-concentration__seg--tech { background: #3b82f6; }
.acct-concentration__seg--cons { background: #e0a32e; }
.acct-concentration__seg--def  { background: #5f43b8; }
.acct-concentration__seg--cash { background: var(--color-text-muted); }
.acct-concentration__legend {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: 0.55rem;
  font-size: 0.7rem; color: var(--color-text-muted);
}
.acct-concentration__legend-item { display: flex; align-items: center; gap: 0.35rem; }
.acct-concentration__sw {
  width: 9px; height: 9px; border-radius: 2px;
}
.acct-concentration__sw--auto { background: var(--color-primary); }
.acct-concentration__sw--tech { background: #3b82f6; }
.acct-concentration__sw--cons { background: #e0a32e; }
.acct-concentration__sw--def  { background: #5f43b8; }
.acct-concentration__sw--cash { background: var(--color-text-muted); }
.acct-concentration__caution {
  margin-top: 0.7rem; padding: 0.55rem 0.7rem;
  background: #fcf3df; border: 1px solid #f0dca6;
  border-radius: var(--radius-sm);
  font-size: 0.7rem; color: #8a6518;
}
.acct-concentration__caution b { color: #6e4f12; }

/* Switch comparison card */
.acct-switch-compare {
  padding: 0.95rem 1.05rem;
}
.acct-switch-compare__pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem; align-items: center;
  margin-bottom: 0.85rem;
}
.acct-switch-compare__side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: var(--color-bg);
}
.acct-switch-compare__side--out {
  background: var(--acct-expense-soft); border-color: rgba(236, 91, 181, 0.3);
}
.acct-switch-compare__side--in {
  background: var(--color-primary-soft); border-color: #b6e8ce;
}
.acct-switch-compare__role {
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.acct-switch-compare__name {
  font-size: 0.88rem; font-weight: 750; color: var(--color-heading);
  margin: 0.2rem 0 0.3rem;
}
.acct-switch-compare__meta {
  font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5;
}
.acct-switch-compare__meta b { color: var(--color-heading); font-weight: 650; }
.acct-switch-compare__arrow {
  font-size: 1.2rem; color: var(--color-text-muted); text-align: center;
}
.acct-switch-compare__checks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem; margin-bottom: 0.6rem;
}
@media (max-width: 720px) { .acct-switch-compare__checks { grid-template-columns: repeat(2, 1fr); } }
.acct-switch-check {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.acct-switch-check__label {
  font-size: 0.6rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.acct-switch-check__val {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 700;
}
.acct-switch-check__val--pass { color: #15803d; }
.acct-switch-check__val--fail { color: #b91c1c; }
.acct-switch-check__val--warn { color: #92400e; }
.acct-switch-verdict {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem; font-weight: 650; line-height: 1.5;
}
.acct-switch-verdict--hold {
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border);
}
.acct-switch-verdict--go {
  background: var(--color-primary-soft); color: #15803d;
  border: 1px solid #b6e8ce;
}
.acct-switch-verdict b { font-weight: 750; }

/* ISA-allowance tracker — uses .acct-cgt-* pattern but green */
.acct-isa-track i { background: var(--color-primary) !important; }

/* ===== research-log.html — full decision log ===== */

.acct-log-filters {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.acct-log-filter {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem; font-weight: 650;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer; font-family: inherit;
}
.acct-log-filter:hover { border-color: var(--color-text-muted); }
.acct-log-filter.is-active {
  background: var(--color-heading); color: #fff; border-color: var(--color-heading);
}
.acct-log-filter__count {
  font-size: 0.62rem; font-weight: 700;
  padding: 0 0.35rem; border-radius: 999px;
  background: var(--color-bg); color: var(--color-text-muted);
}
.acct-log-filter.is-active .acct-log-filter__count { background: rgba(255,255,255,0.2); color: #fff; }

/* Mini-stats row for log page */
.acct-log-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem; margin-bottom: 1rem;
}
@media (max-width: 720px) { .acct-log-stats { grid-template-columns: repeat(2, 1fr); } }

/* ===== Stocks / Crypto switch + tax wrapper flags (SCOPE §13 / §14) ===== */

/* Asset-type toggle — two-mode pill (reuse .acct-seg pattern, taller) */
.acct-asset-toggle {
  display: inline-flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.acct-asset-toggle__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.76rem; font-weight: 650;
  color: var(--color-text-muted);
  background: transparent; border: 0; cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
}
.acct-asset-toggle__btn.is-active {
  background: var(--color-surface);
  color: var(--color-heading);
  box-shadow: 0 1px 2px rgba(20, 25, 30, 0.06);
}
.acct-asset-toggle__btn svg { flex-shrink: 0; }
.acct-asset-toggle__count {
  font-size: 0.62rem; font-weight: 700;
  padding: 0 0.4rem; border-radius: 999px;
  background: var(--color-bg); color: var(--color-text-muted);
}
.acct-asset-toggle__btn.is-active .acct-asset-toggle__count {
  background: var(--color-primary-soft); color: #15803d;
}

/* Tax-wrapper chip — sits next to ticker / on rows / in headers */
.acct-wrapper-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.62rem; font-weight: 750;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acct-wrapper-chip--isa {
  background: var(--color-primary-soft); color: #15803d;
  border-color: #b6e8ce;
}
.acct-wrapper-chip--taxable {
  background: #fcf3df; color: #92400e;
  border-color: #f0dca6;
}
.acct-wrapper-chip__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

/* Asset-class section divider (between stocks and crypto on watchlist) */
.acct-asset-section {
  display: flex; align-items: baseline; gap: 0.85rem;
  margin: 1.6rem 0 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--color-border);
}
.acct-asset-section__title {
  font-size: 0.95rem; font-weight: 700; color: var(--color-heading);
  display: flex; align-items: center; gap: 0.5rem;
}
.acct-asset-section__sub {
  font-size: 0.76rem; color: var(--color-text-muted);
}
.acct-asset-section__sub b { color: var(--color-text); font-weight: 650; }

/* ===== Behavioural target — "selling winners too early" (SCOPE §15) ===== */

/* Outcome line — appears on sell-type log rows showing what happened since */
.acct-outcome {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.66rem; font-weight: 700;
  border-radius: 5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.acct-outcome--up   { background: #fee2e2; color: #991b1b; }  /* up since sale = bad outcome for the seller */
.acct-outcome--down { background: var(--color-primary-soft); color: #15803d; }  /* down since sale = vindicated */
.acct-outcome--flat { background: var(--color-bg); color: var(--color-text-muted); }
.acct-outcome svg { flex-shrink: 0; }

/* Inline classifier — itch vs disciplined */
.acct-classifier {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.66rem; font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.acct-classifier--disciplined { background: var(--color-primary-soft); color: #15803d; border-color: #b6e8ce; }
.acct-classifier--itch        { background: #fcf3df; color: #92400e; border-color: #f0dca6; }

/* Sell-discipline prompt — the designed "Why are you selling?" interrupt */
.acct-sell-prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
}
.acct-sell-prompt__head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.acct-sell-prompt__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.acct-sell-prompt__label {
  font-size: 0.6rem; font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.acct-sell-prompt__title {
  font-size: 0.95rem; font-weight: 700; color: var(--color-heading);
  margin: 0 0 0.4rem;
}
.acct-sell-prompt__context {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.7rem;
  font-size: 0.76rem; line-height: 1.5; color: var(--color-text);
}
.acct-sell-prompt__context b { color: var(--color-heading); font-weight: 700; }
.acct-sell-prompt__q {
  font-size: 0.85rem; font-weight: 700; color: var(--color-heading);
  margin: 0 0 0.5rem;
}
.acct-sell-prompt__choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem; margin-bottom: 0.55rem;
}
@media (max-width: 600px) { .acct-sell-prompt__choices { grid-template-columns: 1fr; } }
.acct-sell-prompt__choice {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.acct-sell-prompt__choice:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.acct-sell-prompt__choice-label {
  font-size: 0.76rem; font-weight: 700; color: var(--color-heading);
}
.acct-sell-prompt__choice-sub {
  font-size: 0.68rem; color: var(--color-text-muted); line-height: 1.4;
}
.acct-sell-prompt__footer {
  font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5;
  font-style: italic;
}
.acct-sell-prompt__footer b { color: var(--color-text); font-style: normal; font-weight: 650; }

/* Sell-discipline mini panel for the stock-detail Plan card */
.acct-sell-discipline {
  margin-top: 0.85rem;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.74rem; line-height: 1.55; color: var(--color-text);
}
.acct-sell-discipline__title {
  font-size: 0.7rem; font-weight: 800; color: var(--color-accent);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.acct-sell-discipline b { color: var(--color-heading); font-weight: 700; }

/* ===== Visual direction (SCOPE §8) — Google-Finance-calm within MC shell =====
   Coloured ticker badges + airier card spacing + larger price anchors.
   The dark sidebar, topbar, green/pink MC tokens all stay; this just lightens
   the *lists* inside the shell. Calm, not loud — colour used with purpose. */

/* Ticker badge — leading element on each row/card. Variants pick a muted
   accent per ticker (deterministic assignment kept stable per asset). */
.acct-ticker-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0.4rem 0.55rem;
  min-width: 52px;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 7px;
  background: var(--color-heading);
  color: #fff;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.acct-ticker-badge--blue     { background: #1e40af; }
.acct-ticker-badge--red      { background: #9f1239; }
.acct-ticker-badge--green    { background: #15803d; }
.acct-ticker-badge--violet   { background: #5b21b6; }
.acct-ticker-badge--amber    { background: #b45309; }
.acct-ticker-badge--graphite { background: #27272a; }
.acct-ticker-badge--orange   { background: #c2410c; }
.acct-ticker-badge--teal     { background: #0f766e; }

/* Smaller variant for inline use (decision log, table cells, breadcrumb-style) */
.acct-ticker-badge--sm {
  padding: 0.18rem 0.4rem;
  min-width: 38px;
  font-size: 0.62rem;
  border-radius: 5px;
}
/* Larger variant for stock-detail hero */
.acct-ticker-badge--lg {
  padding: 0.55rem 0.75rem;
  min-width: 64px;
  font-size: 0.95rem;
  border-radius: 9px;
}

/* Refine the existing card top — give it room to breathe + the price more weight */
.acct-stock__top {
  padding: 1rem 1.1rem 0.75rem;
  gap: 0.85rem;
}
.acct-stock__name {
  font-size: 0.92rem;
}
.acct-stock__ticker {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
.acct-stock__now {
  font-size: 1.2rem;
}

/* ===== Row-based stock list (SCOPE §8 — Google-Finance-calm rows) =====
   Used on the watchlist instead of the card grid for at-a-glance scannability.
   The card component remains for the stock-detail page primary panel. */

.acct-stock-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.acct-stock-row {
  display: grid;
  grid-template-columns:
    62px
    minmax(180px, 1.5fr)
    minmax(160px, 1.1fr)
    minmax(130px, 0.9fr)
    minmax(190px, 1.1fr)
    96px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s;
}
.acct-stock-row:first-of-type { border-top: 0; }
.acct-stock-row:hover         { background: var(--color-surface-2); }
.acct-stock-row--buy  { border-left-color: var(--color-primary); }
.acct-stock-row--near { border-left-color: #e0a32e; }
.acct-stock-row--hold { border-left-color: var(--color-border); }
.acct-stock-row--over { border-left-color: #b91c1c; }

.acct-stock-row__id { min-width: 0; }
.acct-stock-row__name {
  font-size: 0.95rem; font-weight: 700; color: var(--color-heading);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.5rem;
}
.acct-stock-row__meta {
  font-size: 0.64rem; color: var(--color-text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 0.22rem;
}

.acct-stock-row__verdict {
  font-size: 0.74rem; font-weight: 650;
  display: flex; align-items: center; gap: 0.4rem;
  line-height: 1.35;
}
.acct-stock-row__verdict--buy  { color: #15803d; }
.acct-stock-row__verdict--near { color: #92400e; }
.acct-stock-row__verdict--hold { color: var(--color-text-muted); }
.acct-stock-row__verdict--over { color: #991b1b; }

.acct-stock-row__price {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.acct-stock-row__now {
  font-size: 1.2rem; font-weight: 750; color: var(--color-heading);
  letter-spacing: -0.02em;
  display: block; line-height: 1.1;
}
.acct-stock-row__day {
  font-size: 0.68rem; font-weight: 650;
  margin-top: 0.2rem;
}
.acct-stock-row__day--up   { color: #15803d; }
.acct-stock-row__day--down { color: #b91c79; }

.acct-stock-row__targets {
  display: flex; gap: 1.05rem; align-items: baseline;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.acct-stock-row__t {
  display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 0;
}
.acct-stock-row__t-label {
  font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.acct-stock-row__t-val       { font-weight: 700; white-space: nowrap; }
.acct-stock-row__t-val--unset { color: var(--color-border); font-weight: 600; }

.acct-stock-row__conv {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem;
  text-align: right;
}
.acct-stock-row__conv-label {
  font-size: 0.58rem; font-weight: 650; color: var(--color-text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Stock-list section header — replaces .acct-research-grid-head when the list
   is row-based. Lighter, more compact. */
.acct-stock-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0.85rem 0 0.55rem;
  gap: 0.85rem; flex-wrap: wrap;
}
.acct-stock-list-head h2 {
  font-size: 0.86rem; font-weight: 700; color: var(--color-heading);
  display: flex; align-items: center; gap: 0.55rem; margin: 0;
}
.acct-stock-list-head__sub {
  font-size: 0.7rem; color: var(--color-text-muted);
}

/* ===== Position-type / volatility tag — Core / Cyclical / Speculative =====
   Separate axis from conviction. Tells you how volatile-by-design a holding is,
   which is the bit that lets a sharp drop on a speculative stock read as
   expected noise rather than as a sell signal. Anti-"sell-too-early". */
.acct-postype {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.58rem; font-weight: 750;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acct-postype::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.acct-postype--core        { background: var(--color-primary-soft); color: #15803d; border-color: #b6e8ce; }
.acct-postype--cyclical    { background: var(--color-bg);           color: var(--color-text-muted); border-color: var(--color-border); }
.acct-postype--speculative { background: #fcf3df;                   color: #92400e; border-color: #f0dca6; }

/* The verdict on a speculative row gets a calmer, "noise expected" framing —
   visually still uses the verdict colour but layered with a speculative hint. */
.acct-stock-row__meta .acct-postype { vertical-align: middle; }

/* ===== Watchlist sections — sticky-header, scrollable-by-signal (SCOPE §8.x) =====
   Section by signal: Buy zone / Closing in / Watching / Above fair value.
   Each is its own contained scrollable card. Section size = actual count
   (not a fixed cap). Buy zone open by default; quieter sections collapsed. */

.acct-stock-section {
  display: flex; flex-direction: column;
  max-height: 440px;            /* generous — inner scroll only kicks in when really long */
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
}
.acct-stock-section.is-collapsed { max-height: none; }
.acct-stock-section.is-collapsed .acct-stock-section__body { display: none; }

.acct-stock-section__header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; user-select: none;
  font-size: 0.86rem; font-weight: 700; color: var(--color-heading);
  letter-spacing: -0.01em;
  transition: background 0.12s;
}
.acct-stock-section__header:hover { background: var(--color-surface-2); }
.acct-stock-section.is-collapsed .acct-stock-section__header { border-bottom: 0; }
.acct-stock-section.is-collapsed { max-height: 50px; }

.acct-stock-section__sig {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.acct-stock-section--buy  .acct-stock-section__sig { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.acct-stock-section--near .acct-stock-section__sig { background: #e0a32e; box-shadow: 0 0 0 3px #fcf3df; }
.acct-stock-section--hold .acct-stock-section__sig { background: var(--color-text-muted); }
.acct-stock-section--over .acct-stock-section__sig { background: #b91c1c; box-shadow: 0 0 0 3px #fee2e2; }

.acct-stock-section__count {
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-bg); color: var(--color-text-muted);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.acct-stock-section--buy  .acct-stock-section__count { background: var(--color-primary-soft); color: #15803d; }
.acct-stock-section--near .acct-stock-section__count { background: #fcf3df; color: #92400e; }
.acct-stock-section--over .acct-stock-section__count { background: #fee2e2; color: #991b1b; }

.acct-stock-section__hint {
  font-size: 0.7rem; color: var(--color-text-muted); font-weight: 500;
  margin-left: 0.3rem;
}
.acct-stock-section__chevron {
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform 0.18s;
}
.acct-stock-section.is-collapsed .acct-stock-section__chevron { transform: rotate(-90deg); }

.acct-stock-section__body {
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
}
.acct-stock-section__body::-webkit-scrollbar { width: 6px; }
.acct-stock-section__body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* When inside a section, rows lose the rounded corners + outer border (the
   section card already provides those). */
.acct-stock-section .acct-stock-row {
  border-radius: 0;
}
.acct-stock-section .acct-stock-row:first-of-type { border-top: 0; }

@media (max-width: 1180px) {
  .acct-stock-row {
    grid-template-columns: 62px 1fr auto;
    grid-template-areas:
      "badge id      price"
      "verdict verdict price"
      "targets targets conv";
    row-gap: 0.55rem;
    column-gap: 0.85rem;
  }
  .acct-stock-row > .acct-ticker-badge { grid-area: badge; align-self: start; }
  .acct-stock-row__id      { grid-area: id; }
  .acct-stock-row__price   { grid-area: price; align-self: start; }
  .acct-stock-row__verdict { grid-area: verdict; }
  .acct-stock-row__targets { grid-area: targets; }
  .acct-stock-row__conv    { grid-area: conv; flex-direction: row; align-items: center; gap: 0.5rem; }
}
@media (max-width: 640px) {
  .acct-stock-row { padding: 0.85rem 1rem; gap: 0.65rem; }
  .acct-stock-row__targets { gap: 0.7rem; }
}


/* =========================================================
   App-specific additions (not in design prototype).

   These rules support Laravel-app-side UI patterns that the
   static prototype doesn't model: success/error flash banners,
   toast notifications (A-7), brief cards on job-detail pages
   (A-2 / A-25), job-action button bars, and detail-page header
   layouts. They lived only in public/css/printvine/admin.css
   before the CSS source-sync (this commit) and were preserved
   here at the tail of the file so they win specificity ties
   over the source's earlier rules.

   When the design prototype models any of these patterns
   (e.g. a future static gains a Flash component), fold the
   prototype's version into source and remove the corresponding
   block here.
   ========================================================= */

body.page-admin .admin-flash {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.05rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.98rem;
  line-height: 1.5;
}

body.page-admin .admin-flash__icon {
  flex: 0 0 1.35rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.page-admin .admin-flash__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

body.page-admin .admin-flash__body {
  flex: 1;
  min-width: 0;
}

body.page-admin .admin-flash__body p {
  margin: 0;
  font-weight: 500;
}

body.page-admin .admin-flash--success {
  background: #e4f6ec;
  color: #1f4d2f;
  border-color: #b5e0c2;
  border-left-color: #1f7d4b;
}

body.page-admin .admin-flash--error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
  border-left-color: #b91c1c;
}

body.page-admin .admin-toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  z-index: 9000;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}

body.page-admin .admin-toast {
  pointer-events: auto;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  width: 380px;
  max-width: 100%;
  padding: 0.9rem 1rem;
  background: #fff;
  color: var(--color-heading);
  border: 1px solid var(--color-border);
  border-left: 4px solid #1f7d4b;
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.28), 0 4px 8px -4px rgba(0, 0, 0, 0.12);
  font-size: 0.92rem;
  line-height: 1.45;
  animation: admin-toast-in 200ms ease-out;
}

body.page-admin .admin-toast.is-dismissing {
  animation: admin-toast-out 180ms ease-in forwards;
}

body.page-admin .admin-toast__icon {
  flex: 0 0 1.35rem;
  color: #1f7d4b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
}

body.page-admin .admin-toast__body {
  flex: 1;
  min-width: 0;
}

body.page-admin .admin-toast__msg {
  margin: 0 0 0.3rem;
  font-weight: 500;
  color: var(--color-heading);
}

body.page-admin .admin-toast__action {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}

body.page-admin .admin-toast__action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

body.page-admin .admin-toast__dismiss {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  margin: -0.1rem -0.2rem -0.1rem 0;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 6px;
  flex: 0 0 auto;
}

body.page-admin .admin-toast__dismiss:hover {
  background: var(--color-bg);
  color: var(--color-heading);
}

body.page-admin .admin-toast__dismiss:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@keyframes admin-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes admin-toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-admin .admin-toast,
  body.page-admin .admin-toast.is-dismissing {
    animation-duration: 0.01ms;
  }
}

body.page-admin .admin-detail-header__title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

body.page-admin .admin-detail-header__title-row .admin-detail-header__title {
  margin: 0;
}

body.page-admin .admin-detail-header__stage {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  text-transform: none;
}

body.page-admin .admin-detail-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  margin: 0 0.3rem 0 -0.55rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

body.page-admin .admin-detail-header__back:hover {
  background: var(--color-bg);
  color: var(--color-heading);
  text-decoration: none;
}

body.page-admin .admin-detail-header__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body.page-admin .admin-job-actions .admin-btn--primary {
  padding: 0.65rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

body.page-admin .admin-job-actions__divider {
  flex: 1 1 0;
}

body.page-admin .admin-job-actions .admin-btn--ghost {
  font-weight: 500;
  color: var(--color-text-muted);
}

body.page-admin .admin-job-actions .admin-btn--ghost:hover {
  color: var(--color-heading);
}

body.page-admin .admin-job-actions .admin-btn--primary[aria-expanded="true"] {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  font-weight: 500;
  box-shadow: none;
}

body.page-admin .admin-job-actions .admin-btn--primary[aria-expanded="true"]:hover {
  background: var(--color-bg);
  color: var(--color-heading);
}

body.page-admin .admin-toast-stack {
  right: 1.75rem;
  bottom: 2.5rem;
}

body.page-admin .admin-detail-header__back {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.3rem 0.65rem;
  margin: 0 0.4rem 0 -0.65rem;
}

body.page-admin .admin-detail-header__back:hover {
  background: var(--color-bg);
  color: var(--color-primary-hover, #29b06d);
  text-decoration: underline;
}

body.page-admin .admin-detail-header__title-row {
  gap: 1rem;
}

body.page-admin .admin-detail-header__title-row .admin-detail-header__stage {
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  line-height: 1.1;
}

body.page-admin:has(.admin-job-actions) .admin-detail-header__refline {
  align-items: baseline;
}

.admin-brief-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 0.55rem;
}

.admin-brief-card__helper {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.admin-brief-card__pills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

.admin-brief-card__content {
  padding: 0.9rem 1.05rem;
  background: var(--color-bg);
  border-radius: 10px;
  line-height: 1.6;
  font-size: 0.92rem;
}

.admin-brief-card__content-heading {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}

.admin-brief-card__content-list {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}

.admin-brief-card__empty {
  margin: 0;
  padding: 0.6rem 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.admin-brief-location-block {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.9rem;
  background: #ffedd5;                 /* matches admin-status--changes */
  border-left: 3px solid #9a3412;      /* matches admin-status--changes text */
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
}

.admin-brief-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-brief-card__list-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-brief-card__list-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.admin-brief-actions {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}

.admin-brief-actions__lede {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.admin-brief-actions__row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.admin-brief-form {
  margin-top: 0.6rem;
  padding: 0.9rem 1.05rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.admin-brief-form__lede {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.admin-brief-form__caveat {
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.7rem;
  background: #ffedd5;
  border-left: 3px solid #9a3412;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text);
}

.admin-brief-form__field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.admin-brief-form__field-helper {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.admin-brief-form__input,
.admin-brief-form__textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  background: var(--color-surface);
}

.admin-brief-form__field-error {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: #991b1b;                      /* error red — matches existing in-form error tone */
}

.admin-brief-form__links-row {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}

.admin-brief-form__links-row .admin-brief-form__input[type="text"] {
  flex: 0 0 30%;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
}

.admin-brief-form__links-row .admin-brief-form__input[type="url"] {
  flex: 1;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
}

.admin-brief-form__footer {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.8rem;
}

.admin-brief-area {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-brief-area[data-edit-mode="false"] [data-brief-card-edit] {
  display: none;
}

.admin-brief-area[data-edit-mode="true"] [data-brief-card-display] {
  display: none;
}

.admin-brief-form--inline {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: 8px;
}

form[data-action-key="brief-location"]:not([hidden]) ~ .admin-brief-location-block {
  display: none;
}

.admin-brief-cards-form__footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0;
}

.admin-brief-card [data-brief-card-edit] {
  margin-top: 0.4rem;
}

.admin-brief-card [data-brief-card-edit] .admin-brief-form__field-helper {
  margin-top: 0;
}

.admin-brief-card__list-open {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--color-heading);
  background: var(--color-surface);
}

.admin-brief-card__list-open:hover {
  background: var(--color-bg);
}


/* Hero-slide / generic media-preview thumbnail.
   The shared media-picker (`partials/media-picker.blade.php`)
   writes the chosen asset into the preview container as:
     <img src="…">
     <span class="media-picker__preview-name">filename</span>
   …with NO inline styling on the <img>. Server-side renders of the
   same preview (slide row pre-fill from MediaAsset on page load)
   carried inline `width: 88px; height: 88px; object-fit: cover`,
   so on initial render the thumb sat tight in its 88×88 box but on
   change the picker-injected raw <img> overflowed and got cropped
   weirdly by `overflow: hidden`. This rule normalises both paths:
   the box class scopes the rules so other picker consumers (e.g.
   block-card's single-image inline preview) aren't affected.
   `.media-picker__preview-name` is hidden inside the thumb box —
   the filename isn't useful in a square thumbnail. */
.hero-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slide-thumb .media-picker__preview-name {
  display: none;
}


/* ============================================================
   Disabled-state clarity (P2.e — services-editor parity)

   The admin shell carries several read-only or not-yet-wired
   surfaces: the Pricing tab on the services edit screen, the
   SEO tab, the FAQs tab, the categories chip-list, the addon
   override toggles. Their inputs are server-rendered with the
   `disabled` attribute, but the visual baseline (white
   background, default border) still reads as fully editable —
   you only discover it's inert by clicking and getting nothing.

   This rule scopes a clear "inert" treatment to disabled form
   controls inside admin-card and admin-tab-panel surfaces:
   muted background, muted text, not-allowed cursor. Avoids
   the customer-portal / public-site side-effects of a global
   `:disabled` rule by gating on the admin-card / admin-tab-panel
   ancestor selectors.

   .admin-toggle already had its own disabled treatment (see
   above) — extending it for the bare input/button/textarea/
   select cases here.
   ============================================================ */
.admin-card :disabled,
.admin-tab-panel :disabled {
  background-color: #f4f4f5;
  color: var(--color-text-muted, #71717a);
  cursor: not-allowed;
  opacity: 0.85;
}
.admin-card input:disabled,
.admin-card textarea:disabled,
.admin-card select:disabled,
.admin-tab-panel input:disabled,
.admin-tab-panel textarea:disabled,
.admin-tab-panel select:disabled {
  border-color: #e4e4e7;
}
.admin-card .admin-btn:disabled,
.admin-tab-panel .admin-btn:disabled {
  background-color: #f4f4f5;
  border-color: #e4e4e7;
  color: var(--color-text-muted, #71717a);
}
.admin-card .admin-btn--primary:disabled,
.admin-tab-panel .admin-btn--primary:disabled {
  background-color: #d4d4d8;
  color: #ffffff;
}