/* ==========================================================================
   demo-polish.css — loaded last, deliberately.

   Two jobs:
   1. Style the `customers` (CRM & Pipeline) and `systems` (My Apps) views that
      app.js renders. These tenant-specific view ids previously had no container
      at all, which blanked the page.
   2. Settle a few places where the button cascade produced three different
      treatments for controls that sit side by side.

   Kept in one file so it is trivial to revert.
   ========================================================================== */

:root {
  --ez-ink: var(--wx-ink, var(--text-main, #17212f));
  --ez-muted: var(--wx-muted, var(--text-muted, #526173));
  --ez-line: var(--wx-border, var(--border-subtle, #e2e8f0));
  --ez-surface: var(--bg-surface, #fff);
  --ez-canvas: var(--bg-canvas, #f5f7fa);
  --ez-brand: var(--brand-primary, #2456a6);
  --ez-brand-rgb: var(--brand-primary-rgb, 36, 86, 166);
  --ez-radius: 12px;
  --ez-shadow: 0 4px 16px rgba(20, 16, 24, .05);
  --ez-shadow-lift: 0 10px 28px rgba(20, 16, 24, .09);
}

/* --------------------------------------------------------------------------
   1. Top bar tabs — one flat treatment instead of bevelled boxes
   -------------------------------------------------------------------------- */

.topbar .vp-topnav { gap: 2px; }

.topbar .vp-topnav button {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ez-muted) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.topbar .vp-topnav button:hover {
  background: rgba(var(--ez-brand-rgb), .07) !important;
  color: var(--ez-brand) !important;
}

.topbar .vp-topnav button:focus-visible {
  outline: 2px solid rgba(var(--ez-brand-rgb), .45);
  outline-offset: 2px;
}

/* Breadcrumb needs air before the tabs start. */
.topbar .breadcrumb { padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--ez-line); }

/* --------------------------------------------------------------------------
   2. Demo banner — "Customize workspace", "Make your own demo", "Exit & reset"
      sat side by side in three different styles because the middle one carries
      no class. One row, one language, one accent.
   -------------------------------------------------------------------------- */

.wx-text-button,
button[data-demo-personalize],
button[data-demo-exit] {
  box-shadow: none !important;
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 12px !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.wx-text-button,
button[data-demo-exit] {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ez-muted) !important;
}

.wx-text-button:hover,
button[data-demo-exit]:hover {
  background: rgba(var(--ez-brand-rgb), .07) !important;
  color: var(--ez-brand) !important;
}

/* The one genuine call to action in the row. */
button[data-demo-personalize] {
  border: 1px solid var(--ez-brand) !important;
  background: var(--ez-brand) !important;
  color: #fff !important;
}

button[data-demo-personalize]:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(var(--ez-brand-rgb), .28) !important;
}

/* --------------------------------------------------------------------------
   3. Tool strip — solid affordance, and no dead white band when it is empty
   -------------------------------------------------------------------------- */

.wx-tool-connect,
.wx-tools-empty {
  border: 1px solid var(--ez-line) !important;
  border-radius: 10px !important;
  background: var(--ez-canvas) !important;
  color: var(--ez-ink);
  font-weight: 650;
}

.wx-tool-connect:hover {
  border-color: rgba(var(--ez-brand-rgb), .35) !important;
  background: rgba(var(--ez-brand-rgb), .05) !important;
}

/* --------------------------------------------------------------------------
   4. Stop the third dashboard column collapsing to one word per line
   -------------------------------------------------------------------------- */

.vp-main-grid { grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 1.1fr) minmax(300px, .9fr); }

@media (max-width: 1240px) {
  .vp-main-grid { grid-template-columns: 1fr 1fr; }
  .vp-assistant-panel { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .vp-main-grid { grid-template-columns: 1fr; }
  .vp-assistant-panel { grid-column: auto; }
}

/* The ask box was narrow enough to clip its own placeholder. */
.vp-assistant-panel form { flex-wrap: nowrap; }
.vp-assistant-panel input { min-width: 0; flex: 1 1 auto; font-size: 12px; padding: 10px; }
.vp-assistant-panel form button { flex: 0 0 auto; min-width: 38px; }

/* --------------------------------------------------------------------------
   5. CRM & Pipeline view
   -------------------------------------------------------------------------- */

#customers-view .ez-card-source,
#systems-view .ez-card-source {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ez-line);
  font-size: 11px;
  color: var(--ez-muted);
}

.ez-funnel { display: grid; gap: 10px; margin-top: 6px; }

.ez-funnel-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}

.ez-funnel-label { font-size: 12px; font-weight: 600; color: var(--ez-ink); }

.ez-funnel-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ez-canvas);
  overflow: hidden;
  display: block;
}

.ez-funnel-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 6px;
  background: var(--ez-brand);
  transition: width .35s ease;
}

.ez-funnel-bar.tone-discovery { background: linear-gradient(90deg, #2f72cf, #4f92e8); }
.ez-funnel-bar.tone-qualified { background: linear-gradient(90deg, #168f88, #34b3aa); }
.ez-funnel-bar.tone-proposal  { background: linear-gradient(90deg, #b7791f, #dda032); }
.ez-funnel-bar.tone-closing   { background: linear-gradient(90deg, #187a52, #29a06d); }

.ez-funnel-count { font-size: 15px; font-weight: 800; text-align: right; color: var(--ez-ink); }

.ez-pipeline-metrics .ez-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.ez-pipeline-metrics .ez-metric-row strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ez-ink);
}

.ez-pipeline-metrics .ez-metric-row span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ez-muted);
}

.ez-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 2px 10px;
}

.ez-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px;
}

.ez-account-card,
.ez-system-card {
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius);
  background: var(--ez-surface);
  box-shadow: var(--ez-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ez-account-card:hover,
.ez-system-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ez-shadow-lift);
  border-color: rgba(var(--ez-brand-rgb), .22);
}

.ez-account-top,
.ez-system-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ez-account-mark,
.ez-system-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(var(--ez-brand-rgb), .1);
  color: var(--ez-brand);
  flex: 0 0 auto;
}

.ez-account-stage,
.ez-system-pill {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--ez-line);
  background: var(--ez-canvas);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ez-muted);
  white-space: nowrap;
}

.ez-system-pill.connected { background: #e9f8ef; border-color: #bfe6d0; color: #187a52; }
.ez-system-pill.demo { background: rgba(var(--ez-brand-rgb), .08); border-color: rgba(var(--ez-brand-rgb), .2); color: var(--ez-brand); }

.ez-account-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ez-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ez-account-meta {
  font-size: 11.5px;
  color: var(--ez-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. My Apps view
   -------------------------------------------------------------------------- */

.ez-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
}

.ez-system-card strong { font-size: 14px; font-weight: 700; color: var(--ez-ink); }
.ez-system-category { font-size: 11.5px; color: var(--ez-muted); }

.ez-system-open {
  margin-top: 12px;
  align-self: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ez-brand);
  cursor: pointer;
}

.ez-system-open:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .ez-account-grid,
  .ez-system-grid { grid-template-columns: 1fr; }
  .ez-funnel-row { grid-template-columns: 76px minmax(0, 1fr) 30px; gap: 9px; }
  .ez-pipeline-metrics .ez-metric-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. The light/dark toggle control
   -------------------------------------------------------------------------- */

.ez-color-mode-toggle {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--ez-muted);
  transition: background .15s ease, color .15s ease;
}

.ez-color-mode-toggle:hover {
  color: var(--ez-brand);
  background: rgba(var(--ez-brand-rgb), .08);
}

.ez-color-mode-toggle svg { display: block; }

/* ==========================================================================
   8. DARK MODE

   `styles/tokens.css` already defines the base token flip under
   html[data-color-mode="dark"]. What it does NOT cover is the workspace
   layer, which hardcodes light values (`--wx-ink:#242634`, `--wx-canvas:#f5f6fa`,
   `.topbar{background:#fff!important}`) plus a scattering of literal #fff
   surfaces. This block re-points those at the theme tokens.

   EVERY rule below is scoped to html[data-color-mode="dark"], so light mode —
   the demo default — cannot be affected by any of it.
   ========================================================================== */

html[data-color-mode="dark"] {
  /* themeInjector.js injects `<style id="ez-tenant-theme">:root{--bg-surface:#FFFFFF…}`
     at runtime from the tenant's stored config, which overrides the dark block
     in tokens.css. The viewer's own choice has to outrank that, so these carry
     !important. Brand tokens (--brand-primary/-secondary/-accent) are
     deliberately NOT redeclared — tenant colours must survive the mode flip. */
  --bg-surface: #0B0F19 !important;
  --bg-card: #111827 !important;
  --bg-canvas: #070B12 !important;
  --text-main: #F9FAFB !important;
  --text-muted: #9CA3AF !important;
  --border-subtle: #1F2937 !important;

  --wx-ink: #F9FAFB !important;
  --wx-muted: #9CA3AF !important;
  --wx-border: #1F2937 !important;
  --wx-canvas: #070B12 !important;

  --ez-shadow: 0 4px 16px rgba(0, 0, 0, .34);
  --ez-shadow-lift: 0 10px 28px rgba(0, 0, 0, .46);
}

/* Tenant skins pin these per-tenant; keep them following the tokens in dark. */
html[data-color-mode="dark"][data-tenant] {
  --wx-ink: var(--text-main);
  --wx-muted: var(--text-muted);
  --wx-border: var(--border-subtle);
  --wx-canvas: var(--bg-canvas);
}

html[data-color-mode="dark"] body { background: var(--bg-canvas); color: var(--text-main); }

/* Top bar — the one place with !important light values. */
html[data-color-mode="dark"] .topbar {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-bottom-color: var(--border-subtle) !important;
}

html[data-color-mode="dark"] .breadcrumb,
html[data-color-mode="dark"] .breadcrumb span,
html[data-color-mode="dark"] .breadcrumb strong { color: var(--text-muted) !important; }

html[data-color-mode="dark"] .topbar .breadcrumb strong { color: var(--text-main) !important; }

html[data-color-mode="dark"] .topbar .icon-button {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-subtle) !important;
}

/* Card and panel surfaces that are literal #fff in the light stylesheets. */
html[data-color-mode="dark"] .card,
html[data-color-mode="dark"] .vp-panel,
html[data-color-mode="dark"] .table-card,
html[data-color-mode="dark"] .wx-slot,
html[data-color-mode="dark"] .wx-tools,
html[data-color-mode="dark"] .wx-tool,
html[data-color-mode="dark"] .wx-metric,
html[data-color-mode="dark"] .report-section,
html[data-color-mode="dark"] .report-metric-grid > *,
html[data-color-mode="dark"] .integration-card,
html[data-color-mode="dark"] .ez-account-card,
html[data-color-mode="dark"] .ez-system-card,
html[data-color-mode="dark"] .vp-kpi-card,
html[data-color-mode="dark"] .vp-event-card,
html[data-color-mode="dark"] .search-dialog {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

html[data-color-mode="dark"] .ez-account-stage,
html[data-color-mode="dark"] .ez-system-pill,
html[data-color-mode="dark"] .ez-funnel-track,
html[data-color-mode="dark"] .vp-quick-grid button,
html[data-color-mode="dark"] .vp-signal-list > div {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

/* Tables. */
html[data-color-mode="dark"] .data-table th {
  background: var(--bg-card);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
html[data-color-mode="dark"] .data-table td {
  color: var(--text-main);
  border-color: var(--border-subtle);
}

/* Form controls. */
html[data-color-mode="dark"] input,
html[data-color-mode="dark"] select,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] .report-toolbar select {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

/* Headings and body copy that inherit a hardcoded ink colour. */
html[data-color-mode="dark"] .page-head h1,
html[data-color-mode="dark"] .card-label,
html[data-color-mode="dark"] .metric-value,
html[data-color-mode="dark"] .ez-account-name,
html[data-color-mode="dark"] .ez-funnel-label,
html[data-color-mode="dark"] .ez-funnel-count,
html[data-color-mode="dark"] .ez-system-card strong,
html[data-color-mode="dark"] .ez-pipeline-metrics .ez-metric-row strong { color: var(--text-main); }

html[data-color-mode="dark"] .page-head p,
html[data-color-mode="dark"] .metric-meta,
html[data-color-mode="dark"] .ez-account-meta,
html[data-color-mode="dark"] .ez-system-category,
html[data-color-mode="dark"] .ez-card-source { color: var(--text-muted); }

/* Keep the demo banner readable without losing its accent. */
html[data-color-mode="dark"] .preview-report-banner {
  background: rgba(var(--ez-brand-rgb), .12);
  border-color: rgba(var(--ez-brand-rgb), .3);
  color: var(--text-main);
}

/* The toggle itself in dark. */
html[data-color-mode="dark"] .ez-color-mode-toggle { color: var(--text-muted); }
html[data-color-mode="dark"] .ez-color-mode-toggle:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ==========================================================================
   9. DARK MODE — workspace component coverage

   Section 8 handles the token layer and the base shell. This block covers the
   `wx-*` / `ix-*` component families and the demo/action surfaces, which
   hardcode near-white backgrounds and therefore ignore the tokens entirely.

   These selectors were not guessed: they were derived by walking the live DOM
   in dark mode and collecting every element whose computed background was
   still near-white, then verified back to zero remaining offenders.

   Deliberately NOT overridden (they are meant to be light):
     .ez-theme-swatches i   — theme colour swatches
     .wx-donut > div        — donut chart centre
     .wx-event-image span   — date chip on event artwork
     .wx-document-preview   — document thumbnails ("paper")
   ========================================================================== */

html[data-color-mode="dark"] .wx-panel,
html[data-color-mode="dark"] .wx-work,
html[data-color-mode="dark"] .wx-agenda,
html[data-color-mode="dark"] .wx-documents,
html[data-color-mode="dark"] .wx-performance,
html[data-color-mode="dark"] .wx-composition,
html[data-color-mode="dark"] .wx-events,
html[data-color-mode="dark"] .wx-activity,
html[data-color-mode="dark"] .wx-drawer,
html[data-color-mode="dark"] .wx-connect,
html[data-color-mode="dark"] .wx-document,
html[data-color-mode="dark"] .wx-event,
html[data-color-mode="dark"] .ix-tool-card,
html[data-color-mode="dark"] .ix-summary,
html[data-color-mode="dark"] .ix-demo-banner,
html[data-color-mode="dark"] .demo-env-card,
html[data-color-mode="dark"] .demo-reset-notice,
html[data-color-mode="dark"] .action-modal,
html[data-color-mode="dark"] .action-tile,
html[data-color-mode="dark"] .action-connector-section,
html[data-color-mode="dark"] .ez-demo-entry-card,
html[data-color-mode="dark"] .ez-demo-entry-curated,
html[data-color-mode="dark"] .ez-demo-entry-privacy {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-main) !important;
}

html[data-color-mode="dark"] .status,
html[data-color-mode="dark"] .wx-status,
html[data-color-mode="dark"] .wx-task-marker,
html[data-color-mode="dark"] .wx-change,
html[data-color-mode="dark"] .source-pill,
html[data-color-mode="dark"] .ix-pill,
html[data-color-mode="dark"] .wx-periods,
html[data-color-mode="dark"] .wx-progress,
html[data-color-mode="dark"] .wx-metric-icon,
html[data-color-mode="dark"] .integration-logo,
html[data-color-mode="dark"] .ix-logo {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

html[data-color-mode="dark"] .secondary-button,
html[data-color-mode="dark"] .wx-work-action,
html[data-color-mode="dark"] .ix-more,
html[data-color-mode="dark"] .action-close,
html[data-color-mode="dark"] .ez-demo-entry-close,
html[data-color-mode="dark"] .sidebar-collapse-toggle,
html[data-color-mode="dark"] .demo-env-resume,
html[data-color-mode="dark"] .ez-entry-theme-choice,
html[data-color-mode="dark"] .action-mode,
html[data-color-mode="dark"] .wx-periods > button,
html[data-color-mode="dark"] .ix-filter-tabs > button,
html[data-color-mode="dark"] .vp-modal-head > button,
html[data-color-mode="dark"] .ez-entry-modes > button,
html[data-color-mode="dark"] header > button,
html[data-color-mode="dark"] footer > button {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-main) !important;
}

/* Selected states keep the tenant's brand colour. */
html[data-color-mode="dark"] .wx-periods > button.active,
html[data-color-mode="dark"] .ix-filter-tabs > button.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Warning / review states stay legible instead of going flat grey. */
html[data-color-mode="dark"] .status.warn,
html[data-color-mode="dark"] .wx-status.review,
html[data-color-mode="dark"] .wx-task-marker.review {
  background-color: #3A2C0B !important;
  border-color: #5A4410 !important;
  color: #F0C674 !important;
}

html[data-color-mode="dark"] .destructive {
  background-color: #3B1113 !important;
  border-color: #6B1F22 !important;
  color: #F2A5A5 !important;
}