/* ══════════════════════════════════════════════════════════════
   SVS MSP Calculator — Retro Cyberpunk Theme
   Warm parchment paper base with neon-warm accents —
   hot rose highlights, electric amber secondary, warm teal pop,
   dark charcoal header. Vintage paper meets neon signage.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ────────────────────────────────────────── */
  --retro-cream: #f0e4d0;
  --retro-muted-warm: #c0aa98;
  --retro-dark: #1c1317;
  --retro-dark-mid: #2a1e22;
  --retro-dark-deep: #140e11;
  --retro-cta-gradient: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  --retro-dark-gradient: linear-gradient(180deg, var(--retro-dark-mid) 0%, var(--retro-dark) 100%);
  --ink: #1c1317;
  --paper: #f0e4c8;
  --accent: #e11d48;
  --muted: #8a7a72;
  --border: #d0c4b0;
  --border-soft: #d8ccb8;
  --card: #e8dcc0;
  --green: #0d9488;
  --amber: #d97706;
  --sky: #6366f1;
  --focus-ring-soft: rgba(225, 29, 72, 0.2);

  /* ── Top bar ─────────────────────────────────────────────── */
  --top-bar-bg: var(--retro-dark);
  --top-bar-border: rgba(225, 29, 72, 0.35);
  --top-bar-meta: var(--retro-muted-warm);
  --top-bar-shadow: 0 4px 16px rgba(28, 19, 23, 0.2);

  /* ── Theme chip ──────────────────────────────────────────── */
  --theme-chip-bg: rgba(225, 29, 72, 0.1);
  --theme-chip-hover: rgba(225, 29, 72, 0.18);
  --theme-chip-active: rgba(225, 29, 72, 0.26);
  --theme-chip-fg: var(--retro-cream);

  /* ── Surfaces ────────────────────────────────────────────── */
  --surface-section: #e4d5b5;
  --surface-feature: #dccda8;
  --surface-settings: #d6c49e;
  --surface-settings-divider: #c4ae8a;
  --surface-input: #efe2c4;
  --surface-term-wrap: #e0d0ad;
  --surface-term-tile: transparent;
  --surface-term-tile-hover: rgba(225, 29, 72, 0.05);
  --surface-term-tile-active: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  --border-term-wrap: #c4ae8a;
  --border-term-tile-active: rgba(225, 29, 72, 0.3);
  --shadow-term-wrap: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-term-tile-active: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* ── Term text ───────────────────────────────────────────── */
  --text-term-name: #8a7a72;
  --text-term-sub: #6a5a50;
  --text-term-sub-active: #fff;
  --text-term-name-active: #fff;
  --text-term-discount: #1c1317;
  --text-term-discount-active: #ffffff;

  /* ── Best value badge ────────────────────────────────────── */
  --surface-best-value: rgba(13, 148, 136, 0.12);
  --border-best-value: rgba(13, 148, 136, 0.32);
  --text-best-value: #0d9488;
  --surface-best-value-active: rgba(255, 255, 255, 0.2);
  --border-best-value-active: rgba(255, 255, 255, 0.4);
  --text-best-value-active: #ffffff;

  /* ── Sidebar ─────────────────────────────────────────────── */
  --surface-sidebar: #e0d4b6;
  --surface-sidebar-header: var(--retro-dark);
  --surface-sidebar-body: #e6d8b8;
  --surface-sidebar-utility: #d0be98;
  --surface-export: #ccba94;
  --border-sidebar: #c4ae8a;
  --surface-sidebar-utility-border: #b5a07a;
  --border-export-top: #c4ae8a;

  /* ── Compare / Modal ─────────────────────────────────────── */
  --surface-compare: #d6c8a6;
  --border-compare: #c4ae8a;
  --surface-modal: var(--surface-input);
  --surface-backdrop: rgba(28, 19, 23, 0.6);
  --shadow-modal: 0 16px 50px rgba(28, 19, 23, 0.35);

  /* ── Mobile ──────────────────────────────────────────────── */
  --surface-mobile-sheet: var(--surface-section);
  --surface-mobile-close-row: var(--surface-settings);
  --surface-mobile-actions: var(--surface-settings);
  --surface-mobile-sidebar: transparent;
  --surface-mobile-close-btn: rgba(28, 19, 23, 0.08);
  --surface-mobile-close-btn-active: rgba(28, 19, 23, 0.14);
  --border-mobile-sheet: #c4ae8a;
  --border-mobile-row: #c4ae8a;

  /* ── Ghost / Utility surfaces ────────────────────────────── */
  --surface-accent-soft: rgba(225, 29, 72, 0.05);
  --surface-summary-badge: rgba(225, 29, 72, 0.08);
  --border-summary-badge: rgba(225, 29, 72, 0.2);
  --surface-chevron: rgba(28, 19, 23, 0.05);
  --surface-chevron-active: rgba(28, 19, 23, 0.09);
  --surface-ghost: rgba(28, 19, 23, 0.06);
  --surface-ghost-hover: rgba(28, 19, 23, 0.12);
  --surface-step: var(--surface-input);
  --surface-step-hover: var(--surface-settings);
  --surface-step-active: var(--accent);
  --surface-step-border: #b5a07a;
  --text-step: var(--accent);

  /* ── State surfaces ──────────────────────────────────────── */
  --surface-success: #dceee6;
  --surface-success-border: #6db89a;
  --surface-danger: #f5dcd6;
  --surface-danger-border: #d4827a;
  --text-danger: #b91c1c;
  --surface-warning: #f0e4c4;
  --surface-warning-panel: #ecdcb8;
  --surface-warning-border: #d4a860;
  --surface-compare-success: rgba(13, 148, 136, 0.12);
  --surface-compare-warning: rgba(217, 119, 6, 0.12);
  --surface-selected: rgba(225, 29, 72, 0.06);
  --surface-addon-hover: rgba(225, 29, 72, 0.04);
  --border-addon-hover: rgba(225, 29, 72, 0.18);
  --text-selected-accent: #9f1239;

  /* ── Text colours ────────────────────────────────────────── */
  --text-sidebar-kicker: rgba(255, 255, 255, 0.84);
  --text-sidebar-heading: #fff;
  --text-sidebar-placeholder: rgba(255, 255, 255, 0.72);
  --text-money: var(--ink);
  --text-money-hero: var(--ink);
  --text-vs-heading: var(--ink);
  --text-vs-accent: #be123c;
  --text-vs-muted: var(--muted);
  --text-incentive: #0d9488;
  --text-pill-savings-active: #ccfbf1;

  /* ── Section interaction ─────────────────────────────────── */
  --group-strip: rgba(225, 29, 72, 0.12);
  --section-hover-border: rgba(225, 29, 72, 0.18);
  --section-hover-shadow: -3px 0 0 0 rgba(225, 29, 72, 0.2);
  --section-open-border: rgba(225, 29, 72, 0.3);
  --section-open-shadow: -3px 0 0 0 rgba(225, 29, 72, 0.35);

  /* ── Buttons ─────────────────────────────────────────────── */
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #be123c;
  --surface-pill-icon: rgba(255, 255, 255, 0.2);
  --sidebar-zone-services: rgba(0, 0, 0, 0.04);
  --sidebar-zone-invoice: rgba(0, 0, 0, 0.06);
  --sidebar-zone-value: rgba(13, 148, 136, 0.04);
  --sidebar-zone-summary: rgba(0, 0, 0, 0.025);
  --sidebar-row-stripe: rgba(0, 0, 0, 0.025);
  --sidebar-line-rule: color-mix(in srgb, var(--border) 60%, transparent);
  --sidebar-total-rule: color-mix(in srgb, var(--border) 85%, transparent);
  --surface-switch-off: #c0b4a0;
  --surface-switch-on: var(--green);
}

/* ── Retro cyberpunk typography ───────────────────────────── */
.top-bar,
.section-header .section-title,
.sidebar-header,
.sidebar-mrr,
.sidebar-hero-label {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.04em;
}

/* ── Top bar — warm dark with hot rose neon edge ─────────── */
.top-bar {
  background: linear-gradient(180deg, var(--retro-dark-mid) 0%, var(--retro-dark) 60%, var(--retro-dark-deep) 100%) !important;
  border-bottom: 1px solid rgba(225, 29, 72, 0.3) !important;
  box-shadow: 0 2px 16px rgba(225, 29, 72, 0.06) !important;
  color: var(--retro-cream) !important;
}
.top-bar .top-bar-meta { color: var(--retro-muted-warm) !important; }

/* ── Logo fix — SVG text paths hardcoded #0c0c0c,
     override to cream so they pop on the dark header ─────── */
.top-bar-logo path {
  fill: var(--retro-cream) !important;
}

/* ── Sidebar header — matches top bar ────────────────────── */
.sidebar-header {
  background: var(--retro-dark-gradient) !important;
  color: var(--text-on-accent) !important;
}

/* ── Section number — hot rose (faded on paper) ──────────── */
.section-num {
  color: rgba(225, 29, 72, 0.15) !important;
}

/* ── Pill toggle checked — hot rose gradient ─────────────── */
.pill-toggle input:checked + label {
  background: var(--retro-cta-gradient) !important;
  color: var(--text-on-accent) !important;
}
.pill-toggle input:checked + label .pill-price,
.pill-toggle input:checked + label .pill-desc {
  color: var(--text-on-accent) !important;
}

/* ── Export buttons — hot rose CTA ───────────────────────── */
.btn-export {
  background: var(--retro-cta-gradient) !important;
  color: var(--text-on-accent) !important;
}
.btn-export:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 2px 12px rgba(225, 29, 72, 0.3) !important;
}

/* ── Tier segment active — hot rose gradient ─────────────── */
.tier-seg.active {
  background: var(--retro-cta-gradient) !important;
  color: var(--text-on-accent) !important;
}

/* ── Import button hover — teal accent ───────────────────── */
.btn-import-quote:hover {
  background: color-mix(in srgb, var(--sky) 8%, transparent);
  border-color: color-mix(in srgb, var(--sky) 30%, transparent);
  color: var(--sky);
}

/* ── Addon selected — rose tint on paper ─────────────────── */
.addon-row.selected {
  background: rgba(225, 29, 72, 0.04) !important;
  border-color: rgba(225, 29, 72, 0.18) !important;
  box-shadow: inset 3px 0 0 0 var(--accent) !important;
}

/* ── Paper texture with warm scanlines ───────────────────── */
body {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(180, 150, 100, 0.03) 2px,
      rgba(180, 150, 100, 0.03) 4px
    );
}

/* ── Switch knob — hot rose when active ──────────────────── */
.switch input:checked + .switch-track {
  background: var(--accent) !important;
}

/* ── Nudge banners — warm paper tints ────────────────────── */
.nudge-banner.amber {
  background: #f0dab0 !important;
  border-color: #d4a040 !important;
}
.nudge-banner.green {
  background: #d6ece4 !important;
  border-color: #5aaa98 !important;
}

/* ── Callout boxes ───────────────────────────────────────── */
.callout-green {
  background: var(--surface-success) !important;
  border-color: var(--surface-success-border) !important;
  color: var(--green) !important;
}
.callout-red {
  background: var(--surface-danger) !important;
  border-color: var(--surface-danger-border) !important;
}

/* ── Mobile quote pill — hot rose with glow ──────────────── */
.mobile-quote-pill {
  background: var(--retro-cta-gradient) !important;
  color: var(--text-on-accent) !important;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.25) !important;
}

/* ── Progress bar — rose to teal gradient ────────────────── */
.progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%) !important;
}

/* ── Full-screen sidebar export-wrap ─────────────────────── */
body.sidebar-focus-open .side-col .export-wrap {
  background: transparent !important;
  border-top: none !important;
}