/* =============================================================================
   BOUTIQUE — Unavoidable CRM design system
   Warm editorial aesthetic for tour operators and consumer brands.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Neutrals */
  --bg: #FAFAF9;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FDFAF4;
  --line: #E9E3DB;
  --line-strong: #D8CFC0;

  /* Ink (text) */
  --ink: #1A1815;
  --ink-soft: #6B6560;
  --ink-mute: #7A736B;
  --ink-white: #F7F5F0;

  /* Accents */
  --accent: #7C3AED;         /* terracotta */
  --accent-hover: #A2481B;
  --accent-soft: #FBECD9;
  --accent-line: #F1D2A7;

  --teal: #0F766E;
  --teal-soft: #CFF0E9;
  --sage: #6B8E5B;
  --sage-soft: #DDEBD1;

  --gold: #B08D57;
  --gold-soft: #F1E4CB;

  /* Semantic */
  --green: #14804A;
  --green-soft: #D6EDDA;
  --red: #B91C1C;
  --red-soft: #F6D5D5;
  --amber: #B45309;
  --amber-soft: #F8E4C4;
  --blue: #1E5AA2;
  --blue-soft: #D4E4F5;

  /* Layout */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.04);
  --shadow: 0 4px 12px rgba(26, 24, 21, 0.05), 0 1px 3px rgba(26, 24, 21, 0.03);
  --shadow-lg: 0 12px 40px rgba(26, 24, 21, 0.08);

  --sidebar-w: 250px;
  --topbar-h: 64px;
}

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.serif { font-family: 'Fraunces', serif; }
.italic { font-style: italic; }

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.main {
  overflow-x: hidden;
  min-width: 0;
}
.main-inner {
  padding: 32px 48px 64px;
  max-width: 1400px;
  margin: 0 auto;
}
.main-inner-full { padding: 32px 48px 64px; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 24px 0 24px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.brand {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.brand-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), #FF8E53);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: white; font-family: 'Fraunces', serif;
  font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-sub { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

.nav-section {
  padding: 16px 24px 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 24px;
  color: var(--ink-soft);
  font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--ink);
  border-left-color: var(--accent);
  font-weight: 600;
}
.nav-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
}
.nav-item.active .dot { background: var(--accent); }
.nav-item .count {
  margin-left: auto;
  font-size: 11px; color: var(--ink-mute);
  font-weight: 500;
}
.nav-item.active .count { color: var(--accent); }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 24px 8px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.sidebar-user-name { font-size: 13px; font-weight: 600; }
.sidebar-user-role { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.breadcrumb {
  font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.breadcrumb .divider { color: var(--ink-mute); }
.breadcrumb .active { color: var(--ink); font-weight: 500; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px; color: var(--ink-soft);
  width: 320px;
}
.search-box input {
  border: none; background: none; outline: none;
  flex: 1; font: inherit; color: var(--ink);
}
.search-box .kbd {
  font-size: 10px; padding: 1px 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink-mute);
  font-family: inherit;
}

/* ---------- Buttons ---------- */
.btn {
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.btn:hover { background: var(--bg); border-color: var(--line-strong); }
.btn-primary { background: var(--ink); color: white; border-color: var(--ink); }
.btn-primary:hover { background: #2A2621; border-color: #2A2621; }
.btn-accent { background: var(--accent); color: white; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card-lg { padding: 32px; }
.card-sm { padding: 16px; }
.card-flush { padding: 0; overflow: hidden; }
.card-warm { background: var(--surface-2); }
.card-accent {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
  border-color: var(--accent-line);
}

.card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.card-head-simple { margin-bottom: 16px; }

.card-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-title-sm { font-size: 16px; }
.card-subtitle {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 2px;
}
.card-eyebrow {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
.card-link {
  font-size: 12px; color: var(--accent);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.card-link:hover { color: var(--accent-hover); }

/* ---------- KPI card ---------- */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.kpi-label {
  font-size: 12px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.kpi-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kpi-figure {
  font-family: 'Fraunces', serif;
  font-size: 36px; font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0;
  color: var(--ink);
}
.kpi-figure .currency {
  font-size: 22px; color: var(--ink-soft);
  font-weight: 400; vertical-align: super;
  margin-right: 2px;
}
.kpi-sub {
  font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}

/* ---------- Pills / Badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  line-height: 1.4;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-accent { background: var(--accent-soft); color: var(--accent-hover); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-teal { background: var(--teal-soft); color: var(--teal); }
.pill-sage { background: var(--sage-soft); color: var(--sage); }
.pill-gold { background: var(--gold-soft); color: var(--gold); }
.pill-neutral { background: var(--bg-2); color: var(--ink-soft); }
.pill-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); }

/* ---------- Tables ---------- */
.table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.table thead th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-align: left;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.table thead th:first-child { border-top-left-radius: var(--radius); }
.table thead th:last-child { border-top-right-radius: var(--radius); }
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.table tbody tr:hover td { background: var(--bg); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.table .num { text-align: right; }
.table .name { font-weight: 500; }
.table .muted { color: var(--ink-soft); font-size: 12px; }

/* ---------- Forms ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 86, 33, 0.1);
}
.form-help { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Activity/List items ---------- */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-item:first-child { padding-top: 0; }
.activity-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 14px; font-weight: 600;
}
.activity-icon.green { background: var(--green-soft); color: var(--green); }
.activity-icon.red { background: var(--red-soft); color: var(--red); }
.activity-icon.amber { background: var(--amber-soft); color: var(--amber); }
.activity-icon.accent { background: var(--accent-soft); color: var(--accent); }
.activity-icon.blue { background: var(--blue-soft); color: var(--blue); }
.activity-body { flex: 1; min-width: 0; }
.activity-title {
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.activity-meta {
  font-size: 12px; color: var(--ink-soft);
}
.activity-value {
  font-size: 14px; font-weight: 600;
  text-align: right;
}
.activity-value.green { color: var(--green); }
.activity-value.red { color: var(--red); }

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.split-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.split-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; }
.stack > * + * { margin-top: 20px; }

/* ---------- Utilities ---------- */
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.hidden { display: none !important; }

/* ---------- Page hero ---------- */
.page-hero {
  margin-bottom: 32px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
}
.page-hero-eyebrow {
  font-size: 12px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 8px;
}
.page-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 40px; font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-hero-title em { font-weight: 700; font-style: italic; }
.page-hero-sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 10px;
  max-width: 640px;
}
.page-hero-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ---------- Section heading ---------- */
.section-heading {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.section-heading h2 {
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-heading .link {
  font-size: 13px; color: var(--accent);
  font-weight: 600;
}

/* ---------- Stage cards (pipeline) ---------- */
.stage {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column;
  min-height: 96px;
}
.stage.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.stage.risk {
  background: var(--red-soft);
  border-color: rgba(185, 28, 28, 0.2);
}
.stage.win {
  background: var(--green-soft);
  border-color: rgba(20, 128, 74, 0.2);
}
.stage-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.stage-count {
  font-family: 'Fraunces', serif;
  font-size: 32px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0;
}
.stage.risk .stage-count { color: var(--red); }
.stage-caption {
  font-size: 12px; color: var(--ink-soft);
  margin-top: auto;
}

/* ---------- Contact profile avatar ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tab {
  padding: 10px 0;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  font-size: 10px;
  color: var(--ink-soft);
}

/* ---------- Sparklines / mini charts ---------- */
.spark {
  display: flex; align-items: flex-end; gap: 3px;
  height: 40px;
}
.spark-bar {
  flex: 1; background: var(--accent);
  border-radius: 2px;
  min-height: 4px;
  opacity: 0.5;
}
.spark-bar.hi { opacity: 1; }

.chart-area {
  height: 200px;
  position: relative;
}

/* ---------- Empty state ---------- */
.empty {
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-title {
  font-family: 'Fraunces', serif;
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty-desc { font-size: 14px; margin-bottom: 16px; }

/* ---------- Callouts ---------- */
.callout {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 14px;
  color: var(--ink);
  display: flex; gap: 12px; align-items: flex-start;
}
.callout-icon { font-size: 18px; flex-shrink: 0; }
.callout.warn { border-left-color: var(--amber); background: var(--amber-soft); }
.callout.danger { border-left-color: var(--red); background: var(--red-soft); }
.callout.info { border-left-color: var(--blue); background: var(--blue-soft); }
.callout.success { border-left-color: var(--green); background: var(--green-soft); }


/* =============================================================================
   GLOBAL BOUTIQUE OVERRIDES — applied to every page of the live CRM
   These transform the existing dark-theme app to warm editorial Boutique.
   Uses high specificity to beat pc-theme.css and app.css.
   ============================================================================= */

html body,
html body.dark,
html body[data-theme="dark"] {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Override the CRM's core CSS variables */
:root, html {
  --bg-base:       #FAFAF9 !important;
  --bg-surface:    #FFFFFF !important;
  --bg-card:       #FFFFFF !important;
  --bg-elevated:   #FFFFFF !important;
  --bg-hover:      #FFFFFF !important;
  --bg-input:      #FFFFFF !important;

  --text-primary:   #1A1815 !important;
  --text-secondary: #6B6560 !important;
  --text-muted:     #7A736B !important;
  --border:         #E9E3DB !important;
  --border-hover:   #D8CFC0 !important;
  --blue-light:     #1E5AA2 !important;
  --text-heading:   #1A1815 !important;

  --border-color: #E9E3DB !important;
  --border-strong: #D8CFC0 !important;

  --pc-accent: #7C3AED !important;
}

/* Sidebar override */
html body aside.sidebar,
html body #sidebar,
html body .sidebar-wrapper .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
html body .sidebar-header,
html body .sidebar .brand,
html body .sidebar-footer {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html body .sidebar .nav-section {
  color: var(--ink-mute) !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
}
html body .sidebar .nav-item,
html body .sidebar a.nav-item {
  color: var(--ink-soft) !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
html body .sidebar .nav-item:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html body .sidebar .nav-item.active,
html body .sidebar a.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}
html body .sidebar .nav-item svg { color: var(--ink-soft) !important; }
html body .sidebar .nav-item.active svg { color: var(--accent) !important; }

/* Topbar override */
html body header.topbar,
html body .topbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
html body .topbar h1,
html body .topbar-title {
  color: var(--ink) !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* Main content background */
html body .main-content,
html body main,
html body .content-wrapper {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* Cards */
html body .card,
html body .pc-card,
html body .pc-panel,
html body .panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Text elements * /
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .page-title, html body .pc-panel-title, html body .pc-card-title {
  color: var(--ink) !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
*/
html body .card-title, html body .pc-card-lbl {
  color: var(--ink-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Numbers - big figures */
html body .pc-card-pct,
html body .stat-value,
html body .kpi-value,
html body .big-number {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
}

/* Buttons */
html body .btn,
html body button.btn {
  border-radius: var(--radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body .btn-primary,
html body button.btn-primary {
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
}
html body .btn-secondary,
html body .btn-ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}
html body .btn-danger { background: var(--red) !important; color: white !important; border-color: var(--red) !important; }

/* Search box */
html body .topbar input[type="text"],
html body .topbar input[type="search"],
html body .search-input {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-pill) !important;
}

/* Kill terminal-y asterisk bullets, uppercase-shout labels */
html body .pc-card-lbl::before,
html body .stat-label::before { content: none !important; }

/* Tables */
html body table, html body .pc-table {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
}
html body table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body table tbody td {
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Pills / badges - reset the neon look */
html body .badge, html body .pill {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}

/* Sidebar footer / user chip */
html body .sidebar-footer,
html body .sidebar .user-chip {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
}

/* Company context box top of sidebar */
html body .company-context,
html body .viewing-context {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}


/* ---------- Kill remaining uppercase everywhere ---------- */
html body h1.page-title,
html body .page-title,
html body .breadcrumb .active,
html body .breadcrumb strong,
html body header.topbar .page-title,
html body .topbar h1,
html body .topbar h2 {
  text-transform: none !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

html body h2,
html body .card-title,
html body .panel-title,
html body .section-title,
html body .pc-panel-title {
  text-transform: none !important;
  font-family: 'Fraunces', serif !important;
  letter-spacing: -0.01em !important;
}

/* ---------- Old dashboard stat card asterisk bullets ---------- */
html body .pc-card-lbl,
html body .stat-label {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
}
html body .pc-card-lbl::before { content: none !important; }

/* ---------- Big numbers to Fraunces ---------- */
html body .pc-card-pct,
html body .pc-card-num,
html body .big-num,
html body .stat-value,
html body .stat-figure,
html body .kpi-value,
html body .kpi-figure,
html body .huge {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* ---------- Pill/badge styling ---------- */
html body .badge,
html body .pill,
html body .stage-badge,
html body .pc-stage-badge,
html body .pc-temp-badge {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  letter-spacing: normal !important;
}

/* ---------- Table hover ---------- */
html body table tbody tr:hover td,
html body .pc-table tbody tr:hover td {
  background: var(--bg-2) !important;
}

/* ---------- Filter chips ---------- */
html body .filter-chip,
html body .filter-btn,
html body .status-tab {
  background: var(--bg-2) !important;
  color: var(--ink-soft) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
}
html body .filter-chip.active,
html body .filter-btn.active,
html body .status-tab.active {
  background: var(--ink) !important;
  color: white !important;
}

/* ---------- Live pulse dot in topbar ---------- */
html body .topbar .live-dot,
html body .topbar .pulse {
  background: var(--accent) !important;
}

/* ---------- Ensure company context box in sidebar looks warm ---------- */
html body .viewing-context,
html body .company-context-box,
html body [class*="context"] {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

/* ---------- Buttons on topbar right ---------- */
html body .topbar .btn,
html body .topbar button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
  text-transform: none !important;
  font-weight: 600 !important;
}
html body .topbar .btn-primary {
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
}/* UIFIX-STRIPPED-20260915_005053



/* ---------- Nuclear option: kill uppercase almost everywhere ---------- * /
html body h1, html body h2, html body h3, html body h4, html body h5,
html body .card-title, html body .card-header,
html body .page-title, html body .page-hero-title,
html body .table-title, html body .list-title,
html body .modal-title, html body .form-title,
html body .breadcrumb strong, html body .breadcrumb .active,
html body button, html body .btn,
html body .filter-chip, html body .filter-btn,
html body .status-tab, html body .tab,
html body table thead th, html body th,
html body .pill, html body .badge, html body .stage-badge, html body .pc-stage-badge, html body .pc-temp-badge,
html body a.nav-item, html body .nav-item,
html body .btn-secondary, html body .btn-primary, html body .btn-ghost, html body .btn-danger {
  text-transform: none !important;
  letter-spacing: normal !important;
}
*/

/* Keep uppercase for sidebar section labels and eyebrow tags only */
html body .nav-section,
html body .card-eyebrow,
html body .page-hero-eyebrow,
html body .kpi-label,
html body .pc-card-lbl,
html body .stat-label,
html body .form-label {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--ink-soft) !important;
}

/* =============================================================
   ADDITIONAL COMPONENTS - Payments, Reports, Receptionist, Settings
   ============================================================= */

/* Health bars */
.health-bars { margin-top:12px; }
.health-row { display:grid; grid-template-columns: 140px 1fr 40px; gap:12px; align-items:center; margin-bottom:10px; }
.health-label { font-size:13px; color:var(--ink); }
.health-bar { height:8px; background:#EFE9E0; border-radius:99px; overflow:hidden; }
.health-fill { height:100%; border-radius:99px; }
.health-value { font-family:'Fraunces',serif; font-weight:600; font-size:15px; text-align:right; }

/* Bar mini (inline data-bar) */
.bar-mini { width:80px; height:6px; background:#EFE9E0; border-radius:99px; overflow:hidden; display:inline-block; vertical-align:middle; }
.bar-mini > div { height:100%; }

/* Live dot indicator */
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4b7f52; margin-right:6px; vertical-align:middle; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Segmented control */
.segmented { display:inline-flex; background:#FFF; border:1px solid var(--line); border-radius:99px; padding:3px; }
.seg-btn { background:transparent; border:none; padding:6px 14px; font-size:13px; font-weight:500; color:var(--ink-soft); border-radius:99px; cursor:pointer; }
.seg-btn.active { background:var(--accent); color:#FFF; }

/* Revenue hero (reports) */
.revenue-hero { display:grid; grid-template-columns: 1fr 1fr; gap:32px; background:#FFF; border:1px solid var(--line); border-radius:16px; padding:28px; }
.revenue-hero-value { font-family:'Fraunces',serif; font-weight:400; font-size:52px; letter-spacing:-0.02em; margin:8px 0 6px; }
.revenue-hero-sub { color:var(--ink-soft); font-size:14px; }
.hero-microstats { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.ms-num { font-family:'Fraunces',serif; font-size:22px; }
.ms-label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-top:2px; }
.spark-lg { width:100%; height:160px; }
.delta.positive { color:#4b7f52; font-weight:600; }
.delta.negative { color:#7C3AED; font-weight:600; }

/* Funnel */
.funnel { padding:8px 0; }
.funnel-step { display:grid; grid-template-columns: 130px 1fr; gap:12px; align-items:center; margin-bottom:10px; }
.funnel-label { font-size:13px; color:var(--ink); }
.funnel-bar { background:var(--accent); color:#FFF; padding:10px 14px; border-radius:6px; font-size:13px; font-weight:500; position:relative; }
.funnel-bar span { position:relative; z-index:1; }
.funnel-step:nth-child(2) .funnel-bar { background:#B14E1D; }
.funnel-step:nth-child(3) .funnel-bar { background:#A0451A; }
.funnel-step:nth-child(4) .funnel-bar { background:#8E3C17; }
.funnel-step:nth-child(5) .funnel-bar { background:#7C3413; }

/* Cell name */
.cell-name { display:flex; align-items:center; gap:10px; }
.cell-sub { font-size:12px; color:var(--ink-soft); margin-top:2px; margin-left:34px; }
.avatar.sm { width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; font-family:'Inter',sans-serif; }

/* Link button */
.link-btn { background:transparent; border:none; color:var(--accent); font-size:13px; font-weight:500; cursor:pointer; padding:0; }
.link-btn:hover { text-decoration:underline; }
.link { color:var(--accent); text-decoration:none; font-size:13px; font-weight:500; }
.link:hover { text-decoration:underline; }

/* Card divider */
.card-divider { height:1px; background:var(--line); margin:20px 0; }
.mini-h { font-family:'Fraunces',serif; font-size:15px; font-weight:500; margin:6px 0 10px; }

/* Card foot */
.card-foot { padding-top:14px; margin-top:14px; border-top:1px solid var(--line); }

/* Setting row */
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }
.setting-row:last-child { border-bottom:none; }
.setting-label { font-weight:500; font-size:14px; color:var(--ink); }
.setting-sub { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.btn.btn-sm { padding:6px 12px; font-size:12px; }

/* Chip row */
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { display:inline-block; padding:5px 10px; background:var(--accent-soft); color:var(--accent); border-radius:99px; font-size:12px; font-weight:500; }

/* Check list */
.check-list { list-style:none; padding:0; margin:8px 0 0; }
.check-list li { padding:6px 0 6px 22px; position:relative; font-size:13px; color:var(--ink); }
.check-list li:before { content:"✓"; position:absolute; left:0; color:#4b7f52; font-weight:600; }

/* Switch */
.switch { position:relative; display:inline-block; width:38px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; cursor:pointer; inset:0; background:#D4CFC5; border-radius:22px; transition:.2s; }
.switch span:before { position:absolute; content:""; height:16px; width:16px; left:3px; top:3px; background:#FFF; border-radius:50%; transition:.2s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span:before { transform:translateX(16px); }

/* Settings layout */
.settings-layout { display:grid; grid-template-columns: 220px 1fr; gap:24px; margin-top:24px; align-items:start; }
.settings-nav { background:#FFF; border:1px solid var(--line); border-radius:12px; padding:14px 0; position:sticky; top:24px; }
.settings-nav-section { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:600; padding:12px 16px 6px; }
.settings-nav-item { display:block; padding:8px 16px; font-size:13px; color:var(--ink); text-decoration:none; border-left:2px solid transparent; }
.settings-nav-item:hover { background:#FAFAF9; }
.settings-nav-item.active { background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); font-weight:500; }
.settings-content { display:flex; flex-direction:column; gap:24px; }

/* Mode picker */
.mode-picker { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px; }
.mode-card { border:1px solid var(--line); border-radius:12px; padding:16px; cursor:pointer; text-align:center; position:relative; }
.mode-card input { position:absolute; opacity:0; }
.mode-card.selected { border-color:var(--accent); background:var(--accent-soft); }
.mode-title { font-family:'Fraunces',serif; font-size:20px; font-weight:500; }
.mode-sub { font-size:12px; color:var(--ink-soft); margin-top:4px; }

/* Form grid */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px 20px; margin-top:12px; }
.form-row { display:flex; flex-direction:column; gap:6px; }
.form-row label { font-size:12px; color:var(--ink-soft); font-weight:500; }
.input { padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-family:'Inter',sans-serif; font-size:13px; background:#FFF; color:var(--ink); }
.input:focus { outline:none; border-color:var(--accent); }

/* Stage editor */
.stage-editor td.drag { color:var(--ink-soft); cursor:grab; width:24px; }
.stage-editor input.input { width:100%; }
.swatch { display:inline-block; width:16px; height:16px; border-radius:4px; vertical-align:middle; }

/* Callout */
.callout { display:flex; justify-content:space-between; align-items:center; gap:20px; background:#FFF; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:20px 24px; }
.callout-warning { border-left-color:#C89B3A; background:#FBF6EA; }
.callout-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:600; }
.callout-title { font-family:'Fraunces',serif; font-size:18px; font-weight:500; margin:4px 0 2px; }
.callout-body { font-size:13px; color:var(--ink-soft); margin:0; }

/* Grid 2 col */
.grid-2col { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.kpi-grid.four { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:24px; }

/* Small pill variants */
.pill-warning { background:#FBF0DE; color:#8b6a1a; }
.pill-danger { background:#F7DED3; color:#8E3C17; }
.pill-success { background:#E4EFDF; color:#3d6a44; }
.pill-neutral { background:#EFEBE3; color:#6a655c; }


/* =============================================================
   FINAL PORTACLOUD LEAK KILLERS
   ============================================================= */

/* Hide the old logo.png (dark navy Portacloud brand) and inject a Boutique mark */
html body .sidebar-header .logo-mark,
html body .sidebar .logo-mark,
html body .sidebar-brand img,
html body aside.sidebar img[src*="logo.png"] {
  background: var(--accent) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .sidebar-header .logo-mark img,
html body aside.sidebar img[src*="logo.png"] {
  opacity: 0 !important;
}
html body .sidebar-header .logo-mark:after,
html body aside .brand-block .logo-mark:after {
  content: "R";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
}

/* pc-stage-badge - kill cyan/purple, force Boutique palette by data value */
html body .pc-stage-badge,
html body .pc-stage-pill,
html body .stage-badge {
  background: #EFEBE3 !important;
  color: #6a655c !important;
  border: 1px solid transparent !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Colour by contained text (CSS attr trick) - fallback: colour by dataset */
html body .pc-stage-badge[data-stage="enquired"],
html body .pc-stage-badge[data-value="enquired"] {
  background: #F5F3FA !important; color: #8E3C17 !important;
}
html body .pc-stage-badge[data-stage="quoted"],
html body .pc-stage-badge[data-value="quoted"] {
  background: #FBF0DE !important; color: #8b6a1a !important;
}
html body .pc-stage-badge[data-stage="booked"],
html body .pc-stage-badge[data-value="booked"] {
  background: #E4EFDF !important; color: #3d6a44 !important;
}
html body .pc-stage-badge[data-stage="attended"],
html body .pc-stage-badge[data-value="attended"] {
  background: #DDECEE !important; color: #2f5f66 !important;
}
html body .pc-stage-badge[data-stage="payment_at_risk"],
html body .pc-stage-badge[data-value="payment_at_risk"] {
  background: #F7DED3 !important; color: #8E3C17 !important;
}

/* Kill the tiny coloured dot to left of stage badges */
html body .pc-stage-badge::before {
  background: currentColor !important;
  opacity: 0.6;
}

/* pc-btn primary - kill any pink/purple/gradient, force terracotta */
html body .pc-btn.primary,
html body a.pc-btn.primary,
html body button.pc-btn.primary {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
}
html body .pc-btn.primary:hover {
  background: #A94714 !important;
}

/* pc-btn (ghost) - keep white/cream, Boutique border */
html body .pc-btn:not(.primary) {
  background: #FFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', sans-serif !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Purple pc-pill background - override to neutral */
html body .pc-pill,
html body .pc-pill-neutral {
  background: #EFEBE3 !important;
  color: #6a655c !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
html body .pc-pill.marketing { background: #F7DED3 !important; color: #8E3C17 !important; }
html body .pc-pill.sales     { background: #FBF0DE !important; color: #8b6a1a !important; }
html body .pc-pill.leads     { background: #E4EFDF !important; color: #3d6a44 !important; }
html body .pc-pill.alerts    { background: #F7DED3 !important; color: #8E3C17 !important; }
html body .pc-pill.operations{ background: #DDECEE !important; color: #2f5f66 !important; }

/* Status tabs - the "Active/DNC/Archived" row */
html body .pc-status-tab {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 99px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', sans-serif !important;
  background-image: none !important;
}
html body .pc-status-tab.active {
  background: var(--accent) !important;
  color: #FFF !important;
  border-color: var(--accent) !important;
}
html body .pc-status-count {
  background: rgba(255,255,255,0.25) !important;
  color: inherit !important;
  padding: 1px 7px !important;
  border-radius: 99px !important;
  margin-left: 6px !important;
  font-weight: 500 !important;
}
html body .pc-status-tab:not(.active) .pc-status-count {
  background: #EFEBE3 !important;
}

/* Hero eyebrow - kill the weird strikethrough SALES · CRM look */
html body .pc-hero-overline {
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
}
html body .pc-hero-overline::before,
html body .pc-hero-overline::after {
  content: none !important;
  display: none !important;
}
html body .pc-live {
  background: #E4EFDF !important;
  color: #3d6a44 !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-left: 10px !important;
}

/* Force any legacy topbar/header block to be transparent or hidden */
html body .pc-topbar,
html body .pc-shell-header,
html body .pc-app-header {
  background: #FAFAF9 !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* Global search input in topbar */
html body #globalSearchInput,
html body .pc-search-input {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Force the sidebar 'context' switcher pill (Viewing context / Rave Tours) into Boutique */
html body .context-switcher,
html body .sidebar-context,
html body .viewing-context {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 10px !important;
}


/* =============================================================
   TOPBAR TITLE - beat .topbar .topbar-left .page-title (0,3,0 specificity)
   ============================================================= */
html body .topbar .topbar-left .page-title,
html body header.topbar .topbar-left h1.page-title,
html body header.topbar .topbar-left .page-title,
html body .topbar .topbar-left h1 {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
}

/* Also the "What's new" pill in topbar - kill uppercase */
html body .topbar span {
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body .topbar .whats-new,
html body .topbar [class*="whats-new"] {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* =============================================================
   POLISH SWEEP v7 - kill remaining leaks across every module
   ============================================================= */

/* .btn.btn-primary is our INK colour (rgb(26,24,21)) - must be terracotta */
html body button.btn.btn-primary,
html body a.btn.btn-primary,
html body .btn.btn-primary,
html body .btn-primary,
html body button[type="submit"].btn,
html body input[type="submit"] {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
html body .btn.btn-primary:hover,
html body a.btn.btn-primary:hover,
html body button.btn.btn-primary:hover,
html body .btn-primary:hover {
  background: #A94714 !important;
  color: #FFF !important;
}
html body .btn.btn-primary.btn-sm,
html body .btn-primary.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Secondary / ghost buttons - cream with border */
html body .btn.btn-secondary,
html body .btn.btn-ghost,
html body .btn:not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.btn-success) {
  background: #FFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .btn.btn-secondary:hover,
html body .btn.btn-ghost:hover {
  background: #FAFAF9 !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Danger + Warning kept but Boutique tone */
html body .btn.btn-danger { background: #B14E1D !important; color:#FFF !important; border:none !important; }
html body .btn.btn-warning { background: #C89B3A !important; color:#FFF !important; border:none !important; }
html body .btn.btn-success { background: #4b7f52 !important; color:#FFF !important; border:none !important; }

/* KILL the dark navy .stat-card gradient - use cream/white Boutique card */
html body .stat-card,
html body .pc-stat-card,
html body div.stat-card {
  background: #FFF !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(26,24,21,0.03) !important;
  padding: 16px !important;
}
html body .stat-card .stat-label,
html body .stat-card .stat-value,
html body .stat-card * {
  color: inherit !important;
}
html body .stat-card .stat-label {
  color: var(--ink-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
html body .stat-card .stat-value,
html body .stat-card .stat-num {
  font-family: 'Fraunces', serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}

/* Any residual dark card wrapper across modules */
html body [style*="background: linear-gradient(135deg, rgba(20, 20, 50"],
html body [style*="background:linear-gradient(135deg,rgba(20,20,50"] {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Kill purple accent numbers everywhere (was ff/8b5cf6/a78bfa) */
html body [style*="color:#8b5cf6"],
html body [style*="color: #8b5cf6"],
html body [style*="color:#a78bfa"],
html body [style*="color: #a78bfa"],
html body [style*="color:#7c3aed"],
html body [style*="color: #7c3aed"] {
  color: var(--accent) !important;
}

/* pc-hero-overline the SALES · CRM eyebrow - strip decorative underline */
html body .pc-hero-overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: var(--ink-soft) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}
html body .pc-hero-overline::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 14px !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
  margin-right: 2px !important;
}

/* Kill dividers between pill counts */
html body .pc-hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
html body .pc-hero-meta > * {
  border: none !important;
  padding: 4px 10px !important;
}

/* Fresh pill treatment across the whole app */
html body .pc-hero-meta a.pc-pill {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Temperature badges - hide 'Cold' junk in B2C mode via body attribute */
html body[data-b2c] .temp-badge[data-temp="cold"],
html body[data-b2c] .pc-temp-badge[data-temp="cold"],
html body[data-b2c] span.temp-cold {
  display: none !important;
}
/* Fallback: repaint 'Cold' colour to a soft neutral */
html body .temp-badge,
html body .pc-temp-badge,
html body span.temp-cold,
html body span.temp-warm,
html body span.temp-hot {
  background: #EFEBE3 !important;
  color: #6a655c !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .temp-hot, html body .pc-temp-badge[data-temp="hot"] {
  background: #F7DED3 !important; color: #8E3C17 !important;
}
html body .temp-warm, html body .pc-temp-badge[data-temp="warm"] {
  background: #FBF0DE !important; color: #8b6a1a !important;
}
/* B2C aliases if labels were rewritten */
html body .temp-first_time, html body .pc-temp-badge[data-temp="first_time"] {
  background: #E4EFDF !important; color: #3d6a44 !important;
}
html body .temp-repeat, html body .pc-temp-badge[data-temp="repeat"] {
  background: #DDECEE !important; color: #2f5f66 !important;
}
html body .temp-vip, html body .pc-temp-badge[data-temp="vip"] {
  background: #FBF0DE !important; color: #8b6a1a !important;
}

/* Sequence template cards - the washed pastel row */
html body .pc-template-card,
html body .sequence-template,
html body .template-card {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  padding: 16px !important;
  box-shadow: 0 1px 2px rgba(26,24,21,0.03) !important;
}

/* Filter chip row on emails / sequences */
html body .filter-chip,
html body .pc-filter-chip {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 99px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background-image: none !important;
}
html body .filter-chip.active,
html body .pc-filter-chip.active {
  background: var(--accent) !important;
  color: #FFF !important;
  border-color: var(--accent) !important;
}

/* Modal overlays currently 75% black - tone down to warm smoke */
html body .modal-overlay,
html body #reportIssueModal.modal-overlay {
  background: rgba(26, 24, 21, 0.5) !important;
}
html body .modal-content,
html body .modal-dialog {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  color: var(--ink) !important;
}

/* Sidebar viewing-context pill (Rave Tours) */
html body .sidebar-context,
html body [class*="viewing-context"] {
  background: var(--accent-soft) !important;
  border: 1px solid #E8D9CB !important;
  color: var(--accent) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

/* Nav item badge counts (Contacts 4164) - Boutique pill */
html body .sidebar .count,
html body .nav-item .count,
html body .sidebar-nav .badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: 99px !important;
  padding: 1px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  margin-left: auto !important;
}

/* Topbar action buttons - kill dark background */
html body .topbar .topbar-actions button,
html body .topbar .topbar-actions a,
html body header.topbar .btn.btn-primary,
html body header.topbar button.btn-primary {
  background: var(--accent) !important;
  color: #FFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  background-image: none !important;
}
html body header.topbar .btn:not(.btn-primary) {
  background: #FFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

/* Kill uppercase on ALL topbar buttons/links */
html body header.topbar *,
html body .topbar * {
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* Except intentional labels */
html body .topbar .page-eyebrow,
html body .topbar [class*="eyebrow"] {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}


/* Kanban traveller badges + card polish */
html body .kanban-card {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 2px rgba(26,24,21,0.03) !important;
  color: var(--ink) !important;
}
html body .kanban-card-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
html body .kanban-card-meta {
  font-size: 12px !important;
  color: var(--ink-soft) !important;
  margin-top: 2px !important;
}
html body .kanban-card-footer {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body .badge,
html body .kanban-card .badge {
  background: #EFEBE3 !important;
  color: #6a655c !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .badge.badge-first     { background: #F5F3FA !important; color: #8E3C17 !important; }
html body .badge.badge-repeat    { background: #DDECEE !important; color: #2f5f66 !important; }
html body .badge.badge-vip       { background: #FBF0DE !important; color: #8b6a1a !important; }
html body .badge.badge-hot       { background: #F7DED3 !important; color: #8E3C17 !important; }
html body .badge.badge-warm      { background: #FBF0DE !important; color: #8b6a1a !important; }
html body .badge.badge-cold      { background: #EFEBE3 !important; color: #6a655c !important; }
html body .kanban-col-count {
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Kanban column header */
html body .kanban-col {
  background: transparent !important;
  border-radius: 12px !important;
}
html body .kanban-col-header {
  padding: 12px 14px !important;
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
}
html body .kanban-col-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Reports page - kill purple bar charts */
html body .report-bar,
html body .bar-chart-bar,
html body .chart-bar,
html body [style*="background:#8b5cf6"],
html body [style*="background: #8b5cf6"],
html body [style*="background:#a78bfa"],
html body [style*="background: #a78bfa"],
html body [style*="background:#7c3aed"] {
  background: var(--accent) !important;
}
html body [style*="background:#a78bfa"] div,
html body [style*="background: #a78bfa"] div {
  background: var(--accent) !important;
}
/* Bar chart wrappers - Tone the shape */
html body [style*="background:linear-gradient(180deg,#a78bfa"] {
  background: var(--accent) !important;
}
/* Report tabs (Overview / Pipeline / Contacts / Activity) */
html body .report-tab.active,
html body .report-tabs button.active,
html body .tab.active,
html body button.tab.active {
  background: var(--accent) !important;
  color: #FFF !important;
  border-color: var(--accent) !important;
  background-image: none !important;
}
html body .report-tab,
html body .report-tabs button,
html body .tab {
  background: #FFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 14px !important;
  background-image: none !important;
}

/* Big KPI number colour - purple → terracotta */
html body .kpi-number,
html body .stat-value,
html body .stat-num,
html body .report-kpi-value {
  color: var(--accent) !important;
}
/* Except green success + red danger */
html body .kpi-number.positive,
html body .stat-value.positive { color: #4b7f52 !important; }
html body .kpi-number.negative,
html body .stat-value.negative { color: #B14E1D !important; }

/* Pipeline breakdown bars - use Boutique warm scale */
html body .pipeline-breakdown-bar,
html body .breakdown-bar,
html body .bar-fill {
  background: linear-gradient(90deg, var(--accent) 0%, #B14E1D 100%) !important;
}

/* Contact source bars (import 4124 etc) */
html body .source-bar,
html body .horizontal-bar {
  background: var(--accent) !important;
}

/* Task completion 0% red - warm terracotta */
html body [style*="color:#ef4444"] {
  color: #B14E1D !important;
}

/* Segmented control 7d/30d/90d/365d in topbar */
html body .topbar button:not(.btn):not(.btn-primary) {
  background: transparent !important;
  border: none !important;
  color: var(--ink-soft) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
}
html body .topbar button.active {
  color: var(--accent) !important;
  font-weight: 600 !important;
}


/* =============================================================
   CSS VARIABLE HIJACK - redirect legacy purple to Boutique terracotta
   ============================================================= */
:root, html, body {
  --purple: #7C3AED !important;
  --purple-light: #E8D9CB !important;
  --purple-soft: #F5F3FA !important;
  --purple-dark: #A94714 !important;
  --violet: #7C3AED !important;
  --indigo: #7C3AED !important;

  /* Common accent aliases used across the codebase */
  --pc-accent-hover: #A94714 !important;
  --brand: #7C3AED !important;
  --brand-primary: #7C3AED !important;
  --primary: #7C3AED !important;
  --primary-color: #7C3AED !important;
  --link: #7C3AED !important;
  --link-color: #7C3AED !important;
}

/* Ensure headings and hero areas on reports look right */
html body [style*="var(--purple)"] {
  background: var(--accent) !important;
  color: var(--accent) !important;
}


/* Final tuning: purple-light was too pale, needs to be readable */
:root, html, body {
  --purple-light: #7C3AED !important;  /* was pale peach - now full terracotta for KPI numbers */
  --purple-soft: #F5F3FA !important;
}

/* Fix the .tab.active override that may have hidden text */
html body a.report-tab,
html body .report-tab,
html body [href*="reports"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Explicit report-page tab styling */
html body .report-tabs a,
html body .report-nav a {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none !important;
}
html body .report-tabs a[style*="var(--purple)"],
html body .report-tabs a[style*="background:var(--purple)"] {
  background: var(--accent) !important;
  color: #FFF !important;
}

/* Pipeline breakdown mini-bars on reports - override the dark navy fill */
html body .report-bar,
html body [style*="background:#374151"],
html body [style*="background: #374151"],
html body [style*="background:#1f2937"],
html body [style*="background: #1f2937"] {
  background: var(--accent) !important;
}
/* Also for progress bar wrappers */
html body [style*="background:rgba(139"],
html body [style*="background: rgba(139"] {
  background: var(--accent-soft) !important;
}


/* =============================================================
   POLISH PASS v9 - sequences template gallery + contact profile tabs
   ============================================================= */

/* Sequence template gallery cards - kill pastel washed backgrounds */
html body .sequence-template-card,
html body .template-gallery-card,
html body [data-template-card] {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  padding: 16px !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(26,24,21,0.03) !important;
}
html body .sequence-template-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-1px);
  transition: all 0.15s ease;
}
html body .sequence-template-card .template-title,
html body .sequence-template-card h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
}

/* Category filter pills (Trades / LSA / Sales / Retention) */
html body .sequence-category-pill,
html body .template-category {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 99px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Contact profile - tab underline colour */
html body .profile-tabs .tab.active,
html body [role="tablist"] [aria-selected="true"],
html body .profile-tab.active {
  border-bottom-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Contact profile - quick action buttons in sidebar - subtle Boutique treatment */
html body .quick-actions .btn-secondary {
  background: #FFF !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  text-align: left !important;
  justify-content: flex-start !important;
  background-image: none !important;
}
html body .quick-actions .btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Sequence "Active" pill on live sequence cards */
html body .sequence-status-badge,
html body .sequence-badge.active {
  background: #E4EFDF !important;
  color: #3d6a44 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Step chip on sequences (5 steps / Sms / Task etc) */
html body .sequence-step-chip,
html body .step-badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}


/* =============================================================
   SIDEBAR FULL HEIGHT - stick it to viewport
   ============================================================= */
html body aside.sidebar,
html body .sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  align-self: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure the outer layout is a flex row so sticky sidebar has a proper reference */
html body .app-shell,
html body .layout,
html body .main-wrap,
html body [class*="layout-wrap"] {
  display: flex !important;
  align-items: stretch !important;
  min-height: 100vh !important;
}

/* Push the user footer block to the bottom of the sidebar */
html body aside.sidebar .sidebar-footer,
html body .sidebar [class*="sidebar-user"],
html body .sidebar > *:last-child {
  margin-top: auto !important;
}

/* Sidebar scroll bar - subtle Boutique tone */
html body .sidebar::-webkit-scrollbar { width: 4px; }
html body .sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
html body .sidebar::-webkit-scrollbar-track { background: transparent; }


/* Sidebar footer (Andrew's user block) locked to bottom */
html body aside.sidebar {
  padding-bottom: 0 !important;
}
html body aside.sidebar > .sidebar-footer,
html body aside.sidebar > [class*="sidebar-user"],
html body aside.sidebar > [class*="account"],
html body aside.sidebar > div:last-child:not(.nav-section):not(.nav-item) {
  margin-top: auto !important;
  border-top: 1px solid var(--line) !important;
  padding: 12px 14px !important;
  background: #FFF !important;
}

/* Sidebar footer - absolute-position to bottom so it sits at viewport bottom
   regardless of nav content height. Sidebar is position:sticky so it acts as
   the positioning context. margin-top:auto was being defeated by overflow-y:auto. */
html body aside.sidebar {
  position: sticky !important;
  overflow-y: visible !important;  /* let content flow, footer positions absolutely */
  padding-bottom: 72px !important; /* reserve room so nav doesn't slide under footer */
}
html body aside.sidebar .sidebar-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: #FFF !important;
  border-top: 1px solid var(--line) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 2 !important;
}
/* If the nav content overflows the viewport, the inner nav list should scroll on its own */
html body aside.sidebar > nav,
html body aside.sidebar > .sidebar-nav,
html body aside.sidebar > ul {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ============================================================
   SIDEBAR - fixed positioning (sticky was defeated by parent overflow).
   Fixed always follows the viewport. Add left padding to main so
   content isn't hidden underneath.
   ============================================================ */
html body aside.sidebar,
html body .sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 220px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 100 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFF !important;
  border-right: 1px solid var(--line) !important;
  padding-bottom: 78px !important;
}
/* Push all non-sidebar top-level children right so content clears the fixed sidebar */
html body > *:not(aside.sidebar):not(.sidebar):not(script):not(style):not(.modal-overlay):not(dialog):not([role="dialog"]) {
  margin-left: 220px !important;
}
/* Footer inside sidebar - fixed to sidebar bottom via absolute against fixed parent */
html body aside.sidebar .sidebar-footer {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--line) !important;
  background: #FFF !important;
  z-index: 2 !important;
}

/* ============================================================
   SIDEBAR TOP AREA POLISH - logo, toggle, LIVE, viewing context
   ============================================================ */

/* Header bar - tidy padding, cleaner divider */
html body aside.sidebar .sidebar-header {
  padding: 16px !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #FFF !important;
  min-height: 68px !important;
}

/* Logo mark - stays terracotta 36x36 with clean rounded corners */
html body aside.sidebar .logo-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(192,86,33,0.15) !important;
}

/* Green online dot on the R logo - clean corner indicator */
html body aside.sidebar .logo-mark::after,
html body aside.sidebar .sidebar-header .status-dot,
html body aside.sidebar .sidebar-header [class*="online"] {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4b7f52;
  border: 2px solid #FFF;
  z-index: 3;
}
/* Hide the actual duplicate dot elements since we're using ::after */
html body aside.sidebar .sidebar-header [class*="live-dot"],
html body aside.sidebar .sidebar-header [class*="status-indicator"] {
  display: none !important;
}

/* Sidebar toggle (collapse chevron) - subtle ghost button */
html body aside.sidebar .sidebar-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--ink-soft) !important;
  padding: 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  transition: all 0.15s ease !important;
  margin-left: auto !important;
  margin-right: 6px !important;
}
html body aside.sidebar .sidebar-toggle:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
html body aside.sidebar .sidebar-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

/* LIVE pill in header - clean Boutique tag, not a big block */
html body aside.sidebar .sidebar-header [class*="live"],
html body aside.sidebar .sidebar-header .live-badge,
html body aside.sidebar .sidebar-header .env-badge {
  background: #E4EFDF !important;
  color: #3d6a44 !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}

/* Viewing context card - clean Boutique treatment (was beige beige) */
html body aside.sidebar .company-switcher {
  margin: 12px !important;
  padding: 10px 12px !important;
  background: var(--accent-soft) !important;
  border: 1px solid #E8D9CB !important;
  border-radius: 10px !important;
  color: var(--accent) !important;
}
html body aside.sidebar .company-switcher .cs-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  opacity: 0.7 !important;
  margin-bottom: 2px !important;
  font-family: 'Inter', sans-serif !important;
}
html body aside.sidebar .company-switcher .cs-value {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--accent) !important;
  font-style: normal !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
/* "Isolated to this company" subtitle */
html body aside.sidebar .company-switcher > div:last-child,
html body aside.sidebar .company-switcher [class*="subtitle"],
html body aside.sidebar .company-switcher [class*="isolated"] {
  font-size: 11px !important;
  color: var(--accent) !important;
  opacity: 0.7 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* Kill any purple gradient bar under the header */
html body aside.sidebar [class*="nav-active-bar"] {
  background: var(--accent) !important;
  background-image: none !important;
}

/* Kill the diamond bullet before "VIEWING CONTEXT" if present */
html body aside.sidebar .company-switcher .cs-label::before {
  content: none !important;
  display: none !important;
}


/* Restore the R letter in the logo mark using ::before (::after taken by green dot) */
html body aside.sidebar .logo-mark::before {
  content: "R";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  z-index: 2;
}

/* ============================================================
   NUCLEAR: sidebar nav-cat section labels - kill rainbow dots
   ============================================================ */
html body aside.sidebar .nav-cat::before,
html body aside.sidebar .nav-section::before,
html body aside.sidebar [class*="section-label"]::before {
  background: var(--accent) !important;
  color: var(--accent) !important;
}
/* Alternative: remove them entirely for a cleaner look */
html body aside.sidebar .nav-cat,
html body aside.sidebar .nav-section {
  padding: 16px 16px 6px !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  font-family: 'Inter', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: none !important;
}
html body aside.sidebar .nav-cat::before {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: transparent !important;
  flex-shrink: 0 !important;
}
html body aside.sidebar .nav-cat::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--line) !important;
  margin-left: 8px !important;
}

/* Cleaner active row - Dashboard highlight */
html body aside.sidebar .nav-item.active,
html body aside.sidebar a.nav-item[aria-current] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 13px !important;
  font-weight: 600 !important;
}
html body aside.sidebar .nav-item.active svg,
html body aside.sidebar .nav-item.active img {
  color: var(--accent) !important;
  filter: none !important;
}

/* Viewing context - remove any decorative left tab / gradient */
html body aside.sidebar .company-switcher {
  border-left: 1px solid #E8D9CB !important;
  background: var(--accent-soft) !important;
  background-image: none !important;
  position: relative !important;
  overflow: hidden !important;
}
html body aside.sidebar .company-switcher::before,
html body aside.sidebar .company-switcher::after {
  content: none !important;
  display: none !important;
}
/* "Isolated to this company" - clean up the checkmark rendering */
html body aside.sidebar .company-switcher > div:last-child {
  color: var(--accent) !important;
  opacity: 0.75 !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chevron toggle - make it a subtle absolute overlay top-right of logo area
   so it doesn't compete with the LIVE badge for header real estate */
html body aside.sidebar .sidebar-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}
html body aside.sidebar .sidebar-toggle:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
/* Header layout - logo left, LIVE right, chevron absolute */
html body aside.sidebar .sidebar-header {
  position: relative !important;
  padding-right: 44px !important;
}

/* The R logo green dot - smaller, cleaner corner indicator */
html body aside.sidebar .logo-mark::after {
  width: 8px !important;
  height: 8px !important;
  top: -1px !important;
  right: -1px !important;
  border: 1.5px solid #FFF !important;
  background: #4b7f52 !important;
}

/* Any remaining gradient bar in sidebar top */
html body aside.sidebar div[style*="linear-gradient"],
html body aside.sidebar div[class*="gradient"] {
  background: transparent !important;
  background-image: none !important;
}


/* ============================================================
   READABILITY EMERGENCY PASS v10
   - Kill white-on-light-bg (invisible text)
   - Fix stage badges that had color:accent + bg:accent (invisible)
   - Redo top-left LIVE + viewing context properly
   ============================================================ */

/* NUCLEAR: any element with a light background must have DARK text.
   This catches template cards, explainers, badges where earlier fixes
   accidentally set color to the same tone as background. */
html body [style*="background:rgba(251, 191, 36"],
html body [style*="background: rgba(251, 191, 36"],
html body [style*="background:rgba(251, 236, 217"],
html body [style*="background: rgba(251, 236, 217"],
html body [style*="background:rgba(167, 139, 250"],
html body [style*="background: rgba(167, 139, 250"] {
  color: var(--ink) !important;
}
html body [style*="background:rgba(251, 191, 36"] *,
html body [style*="background:rgba(251, 236, 217"] *,
html body [style*="background:rgba(167, 139, 250"] *,
html body [style*="background: rgba(251, 191, 36"] *,
html body [style*="background: rgba(251, 236, 217"] *,
html body [style*="background: rgba(167, 139, 250"] * {
  color: var(--ink) !important;
}

/* Fix earlier bug where I redirected purple inline backgrounds AND set color:accent
   which made text invisible when the badge had text content. */
html body [style*="8b5cf6"],
html body [style*="a78bfa"],
html body [style*="7c3aed"] {
  color: #FFF !important;  /* white text on the terracotta bg is readable */
}

/* Stage badges specifically - always dark text on peach background */
html body .pc-stage-badge,
html body .pc-stage-pill,
html body .stage-badge {
  background: #F5F3FA !important;
  color: #8E3C17 !important;
  border: 1px solid #F1DDD0 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'Inter', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  white-space: nowrap !important;
}
html body .pc-stage-badge::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}
/* Colour variants by data-stage attribute (contacts module writes this) */
html body .pc-stage-badge[data-stage="new_lead"],
html body .pc-stage-badge[data-stage="enquired"] { background:#F5F3FA !important; color:#8E3C17 !important; }
html body .pc-stage-badge[data-stage="contacted"],
html body .pc-stage-badge[data-stage="quoted"] { background:#FBF0DE !important; color:#8b6a1a !important; }
html body .pc-stage-badge[data-stage="interested"] { background:#FBF0DE !important; color:#8b6a1a !important; }
html body .pc-stage-badge[data-stage="proposal_sent"] { background:#DDECEE !important; color:#2f5f66 !important; }
html body .pc-stage-badge[data-stage="follow_up"] { background:#EFEBE3 !important; color:#6a655c !important; }
html body .pc-stage-badge[data-stage="won"],
html body .pc-stage-badge[data-stage="deposit_paid"],
html body .pc-stage-badge[data-stage="booked"] { background:#E4EFDF !important; color:#3d6a44 !important; }
html body .pc-stage-badge[data-stage="lost"],
html body .pc-stage-badge[data-stage="cancelled"] { background:#EFEBE3 !important; color:#8a827a !important; }
html body .pc-stage-badge[data-stage="attended"] { background:#DDECEE !important; color:#2f5f66 !important; }
html body .pc-stage-badge[data-stage="payment_at_risk"] { background:#F7DED3 !important; color:#8E3C17 !important; }

/* Template card titles on sequences page - white text was invisible on pastel */
html body [class*="template-card"] > div,
html body .sequence-template > div,
html body .pc-template-card > div,
html body [class*="quick-start"] [class*="card"] > div {
  color: var(--ink) !important;
}
html body [class*="template-card"] .template-title,
html body [class*="template-card"] h3,
html body [class*="template-card"] h4,
html body .sequence-template h3,
html body .sequence-template h4 {
  color: var(--ink) !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
}
/* "Click to create →" CTA on template hover */
html body [style*="rgba(255, 255, 255, 0.5)"] {
  color: var(--accent) !important;
}

/* Explainer boxes (page tutorial banners) - dark text on light peach */
html body [id^="pex_"],
html body [id^="pex_"] * {
  color: var(--ink) !important;
}
html body [id^="pex_"] {
  background: var(--accent-soft) !important;
  border: 1px solid #E8D9CB !important;
  border-radius: 12px !important;
}
html body [id^="pex_"] strong {
  color: var(--accent) !important;
}
html body [id^="pex_"] [style*="color:#fbbf24"],
html body [id^="pex_"] [style*="color: #fbbf24"] {
  color: var(--accent) !important;
}
html body [id^="pex_"] [style*="color:#c4b5fd"] {
  color: var(--accent) !important;
}

/* Sequence step chips ("Sms +6h Sms +1d Task") — dark text on peach */
html body .sequence-step,
html body [class*="step-badge"],
html body [class*="step-chip"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid #E8D9CB !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ============================================================
   TOP-LEFT AREA REDO — logo + LIVE + Viewing Context
   ============================================================ */

/* Sidebar header - vertical stack: logo row above LIVE badge */
html body aside.sidebar .sidebar-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #FFF !important;
  position: relative !important;
  min-height: 64px !important;
  padding-right: 16px !important;
}

/* Logo bigger + tidier */
html body aside.sidebar .logo-mark {
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 2px 4px rgba(192,86,33,0.18) !important;
  flex-shrink: 0 !important;
}
html body aside.sidebar .logo-mark::before {
  content: "R";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFF;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
/* Online dot - smaller, cleaner */
html body aside.sidebar .logo-mark::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4b7f52;
  border: 2px solid #FFF;
  z-index: 3;
}

/* LIVE badge — clean small pill sitting to the right of the logo */
html body aside.sidebar .sidebar-header [class*="live"],
html body aside.sidebar .sidebar-header .env-badge,
html body aside.sidebar .live-pill {
  background: #E4EFDF !important;
  color: #3d6a44 !important;
  border: 1px solid #C7DBBF !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 20px !important;
  line-height: 1 !important;
}
html body aside.sidebar .sidebar-header [class*="live"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4b7f52;
  box-shadow: 0 0 0 2px rgba(75,127,82,0.15);
  animation: rt-pulse 2s ease-in-out infinite;
}
@keyframes rt-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Sidebar toggle button - subtle icon, top right corner absolute */
html body aside.sidebar .sidebar-toggle {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  transform: none !important;
  margin: 0 !important;
  width: 22px !important; height: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-soft) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  opacity: 0.5 !important;
}
html body aside.sidebar .sidebar-toggle:hover {
  opacity: 1 !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* Viewing context - refined card */
html body aside.sidebar .company-switcher {
  margin: 10px 12px 14px !important;
  padding: 12px 14px !important;
  background: #FAFAFB !important;
  border: 1px solid #E8D9CB !important;
  border-radius: 10px !important;
  color: var(--accent) !important;
  position: relative !important;
}
html body aside.sidebar .company-switcher .cs-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  opacity: 0.65 !important;
  margin-bottom: 4px !important;
}
html body aside.sidebar .company-switcher .cs-value {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: var(--accent) !important;
  font-style: normal !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
html body aside.sidebar .company-switcher > div:last-child {
  color: var(--accent) !important;
  opacity: 0.7 !important;
  font-size: 11px !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure any remaining faded text has good contrast */
html body [style*="color:rgba(255,255,255,0.7)"],
html body [style*="color: rgba(255,255,255,0.7)"],
html body [style*="color:rgba(255,255,255,0.5)"],
html body [style*="color: rgba(255,255,255,0.5)"],
html body [style*="color:rgba(255, 255, 255, 0.7)"],
html body [style*="color: rgba(255, 255, 255, 0.7)"] {
  color: var(--ink-soft) !important;
}
html body [style*="color:#fff"],
html body [style*="color: #fff"],
html body [style*="color:#FFF"],
html body [style*="color: #FFF"],
html body [style*="color:rgb(255,255,255)"] {
  color: var(--ink) !important;
}
/* Exception: elements with a genuinely dark bg should keep white text */
html body button.btn-primary[style*="color:#fff"],
html body .btn-primary[style*="color:#fff"],
html body [style*="background:var(--accent)"][style*="color:#fff"] {
  color: #FFF !important;
}


/* ============================================================
   TYPOGRAPHY v2 - Neo-Grotesque Cool
   Bricolage Grotesque (display) + Space Grotesk (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Root font stack overrides */
html, body {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif !important;
  font-feature-settings: "ss01", "ss02" !important;
  -webkit-font-smoothing: antialiased !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Every place we used Fraunces → Bricolage Grotesque (display) * /
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .page-title,
html body .demo-h1,
html body .card-title,
html body .kpi-value, html body .kpi-val,
html body .stat-value, html body .stat-num,
html body .revenue-hero-value,
html body .callout-title,
html body .mini-h,
html body .brand-name,
html body .page-hero-title,
html body .table-title,
html body .list-title,
html body .modal-title,
html body .form-title,
html body [style*="font-family:'Fraunces'"],
html body [style*='font-family:"Fraunces"'] {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}
*//* UIFIX-STRIPPED-20260915_005053


/* Every place we used Inter → Space Grotesk (body) * /
html body .btn, html body button, html body a, html body p, html body div, html body span,
html body input, html body select, html body textarea, html body label,
html body td, html body th,
html body .pill, html body .badge, html body .chip,
html body .filter-chip, html body .filter-btn,
html body .nav-item, html body .nav-section, html body .nav-cat,
html body .cs-label, html body .cs-value,
html body [style*="font-family:'Inter'"],
html body [style*='font-family:"Inter"'] {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
*/

/* HEADLINE SIZE SCALE — bigger, more present */
html body h1, html body .page-title,
html body .revenue-hero-value {
  font-size: 44px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
}
html body .revenue-hero-value {
  font-size: 68px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
html body h2, html body .card-title {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
}
html body h3 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
html body h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
html body .kpi-value,
html body .kpi-val,
html body .stat-value,
html body .stat-num {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
}
html body .mini-h {
  font-size: 17px !important;
  font-weight: 600 !important;
}
html body .callout-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Dashboard greeting - specifically make it big and confident */
html body .greeting,
html body [class*="greeting"] h1,
html body h1[class*="hero"],
html body .pc-hero-name {
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  color: var(--ink) !important;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
}
/* Italic emphasis on names in greetings */
html body .greeting em,
html body [class*="greeting"] em,
html body h1 em {
  font-style: italic !important;
  font-weight: 700 !important;
}

/* Section eyebrows / labels - Space Grotesk, uppercase, tight */
html body .card-eyebrow,
html body .page-eyebrow,
html body .kpi-label,
html body .stat-label,
html body .demo-eyebrow,
html body .nav-cat,
html body .nav-section {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
  color: var(--ink-soft) !important;
}

/* Nav items - crisp and readable */
html body aside.sidebar .nav-item,
html body aside.sidebar a.nav-item {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
html body aside.sidebar .nav-item.active {
  font-weight: 700 !important;
}

/* Brand name in sidebar */
html body aside.sidebar .brand-name,
html body aside.sidebar .company-switcher .cs-value {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.015em !important;
  font-style: normal !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Buttons - crisp Space Grotesk with slight weight boost * /
html body .btn,
html body button.btn,
html body a.btn {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
}
*/

/* Table headers */
html body table thead th,
html body th {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-soft) !important;
}
html body table tbody td,
html body td {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}

/* Serif italic overrides that assumed Fraunces - kill italic on numbers */
html body .revenue-hero-value,
html body .kpi-value,
html body .stat-value {
  font-style: normal !important;
}

/* Ensure ALL text on light backgrounds is dark and readable */
html body .card,
html body .card * {
  color: inherit;
}
html body .card {
  color: var(--ink) !important;
}
html body .card h1, html body .card h2, html body .card h3, html body .card h4 {
  color: var(--ink) !important;
}/* UIFIX-STRIPPED-20260915_002606



/* ============================================================
   TYPOGRAPHY v3 - NUCLEAR Inter/Fraunces removal
   Anything still on Inter needs Space Grotesk, anything on Fraunces needs Bricolage
   ============================================================ * /
html body *:not(svg):not(path):not(circle):not(rect):not(line):not(polygon):not(g) {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}/* UIFIX-STRIPPED-20260915_005053

* /
/* Display headlines exception - use Bricolage * /
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .page-title,
html body .card-title,
html body .kpi-value, html body .kpi-val,
html body .stat-value, html body .stat-num,
html body .revenue-hero-value,
html body .callout-title,
html body .mini-h,
html body .brand-name,
html body .page-hero-title,
html body .pc-hero-name,
html body .company-switcher .cs-value,
html body .greeting,
html body .hero-num .val,
html body [class*="hero-value"],
html body [class*="hero-name"] {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}
*/

/* Buttons - ensure Space Grotesk with proper weight */
html body .pc-btn,
html body .pc-btn.primary,
html body a.pc-btn,
html body button.pc-btn {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
/* Status tabs (Active/DNC/Archived) */
html body .pc-status-tab {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}/* UIFIX-STRIPPED-20260915_002606


/* Kill any font-feature-settings that might trigger small caps * /
html body, html body * {
  font-feature-settings: normal !important;
  font-variant-caps: normal !important;
}
*/

/* Make sure ALL uppercase labels stay uppercase */
html body .pc-hero-overline,
html body .card-eyebrow,
html body .page-eyebrow,
html body .kpi-label,
html body .stat-label,
html body .nav-cat,
html body .nav-section,
html body table thead th,
html body th,
html body .cs-label {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Restore sentence case on things that shouldn't be uppercase * /
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .page-title,
html body .card-title,
html body .pc-hero-name,
html body .greeting,
html body button, html body .btn, html body a.btn,
html body .nav-item, html body a.nav-item,
html body .pill, html body .badge, html body .chip,
html body .filter-chip, html body .pc-status-tab,
html body p, html body span, html body div,
html body td,
html body input, html body select, html body textarea {
  text-transform: none !important;
  letter-spacing: normal !important;
}
*/

/* Restore heading sizes AFTER the nuclear rules */
html body h1, html body .page-title, html body .pc-hero-name {
  font-size: 40px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}
html body h2, html body .card-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
html body h3 { font-size: 18px !important; font-weight: 600 !important; }
html body h4 { font-size: 16px !important; font-weight: 600 !important; }

/* Revenue hero XL */
html body .revenue-hero-value,
html body .hero-num .val {
  font-size: 64px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

/* KPI numbers */
html body .kpi-value, html body .kpi-val,
html body .stat-value, html body .stat-num {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

/* PH13-SIDEBAR-SCROLL-FIX */
/* Root cause: sidebar-footer was position:absolute overlaying the last ~85px
   of the scrollable nav content. Fix: flex column layout so nav takes remaining
   space, footer sits below it, no overlap. */
#sidebar {
  display: flex !important;
  flex-direction: column !important;
}
#sidebar .sidebar-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#sidebar .sidebar-footer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
/* PH13-SIDEBAR-SCROLL-FIX END */


/* enterprise-polish-v1 */
html body aside.sidebar .company-switcher {
  margin: 14px 12px !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-left: 3px solid #7C3AED !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04) !important;
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
}
html body aside.sidebar .company-switcher .cs-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
html body aside.sidebar .company-switcher .cs-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}
html body aside.sidebar .company-switcher > div:last-child {
  margin-top: 6px !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}
header.topbar {
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 24px !important;
  gap: 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
}
header.topbar .topbar-left,
header.topbar .topbar-right {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
header.topbar .topbar-right > * {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
header.topbar .topbar-right input,
header.topbar .topbar-right .search-box,
header.topbar .topbar-right [class*='search'] {
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  background: #FAFAFB !important;
  font-size: 13px !important;
}
header.topbar .topbar-right button,
header.topbar .topbar-right a.icon-btn {
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}
header.topbar .topbar-right .company-chip,
header.topbar .topbar-right [class*='current-company'],
header.topbar .topbar-right .tenant-chip {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: #F3F0FA !important;
  color: #5B21B6 !important;
  border: 1px solid #E9E4F5 !important;
}
header.topbar .topbar-right select,
header.topbar .topbar-right .company-dropdown {
  height: 36px !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-width: 180px !important;
}
header.topbar .topbar-right .clock,
header.topbar .topbar-right [class*='time'] {
  color: #6B7280 !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-left: 1px solid #E5E7EB !important;
  padding-left: 12px !important;
  margin-left: 4px !important;
}
header.topbar .topbar-left {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  letter-spacing: -0.01em !important;
}


/* enterprise-polish-v2 */
.tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  gap: 4px !important;
  padding: 0 8px !important;
  min-height: 48px !important;
  height: 48px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
  align-items: center !important;
  scroll-behavior: smooth !important;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
.tabs > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
  line-height: 1 !important;
}
.tabs > *:hover {
  background: #F3F4F6 !important;
  color: #111827 !important;
}
.tabs > .active, .tabs > [aria-selected='true'], .tabs > .tab.active {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  font-weight: 600 !important;
}
.tabs > * > img, .tabs > * > i, .tabs > * > svg {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
}
.sidebar-footer {
  padding: 12px !important;
  border-top: 1px solid #E5E7EB !important;
  background: #FAFAFB !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.sidebar-footer > * {
  min-width: 0 !important;
}
.sidebar-footer .avatar,
.sidebar-footer [class*='avatar'] {
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.sidebar-footer .user-info,
.sidebar-footer .user-name-wrap,
.sidebar-footer > div:not(.avatar):not([class*='logout']) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sidebar-footer .user-name,
.sidebar-footer strong,
.sidebar-footer b {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
.sidebar-footer .user-role,
.sidebar-footer small {
  display: block !important;
  font-size: 11px !important;
  color: #6B7280 !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
.sidebar-footer a[href*='logout'],
.sidebar-footer button[title*='ogout' i] {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6B7280 !important;
  border-radius: 6px !important;
  transition: background .15s !important;
}
.sidebar-footer a[href*='logout']:hover {
  background: #F3F4F6 !important;
  color: #DC2626 !important;
}


/* enterprise-polish-v3 */
.logo-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  height: 40px !important;
  width: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.logo-mark img {
  display: none !important;
}
.logo-mark::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%) !important;
  box-shadow: 0 1px 3px rgba(124,58,237,0.3) !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.logo-mark::after {
  content: 'Unavoidable' !important;
  font-family: 'Space Grotesk', 'Calibri', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0A0A0B !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.sidebar-header .ulog { display: none !important; }
.sidebar-header {
  padding: 16px 14px !important;
  border-bottom: 1px solid #F3F4F6 !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
}


/* enterprise-polish-v4-killlive */
.sidebar-header::before,
.sidebar-header::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}
html body aside.sidebar .sidebar-header .logo-mark::before {
  content: '' !important;
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%) !important;
  box-shadow: 0 1px 3px rgba(124,58,237,0.3) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}
html body aside.sidebar .sidebar-header .logo-mark::after {
  content: 'Unavoidable' !important;
  font-family: 'Space Grotesk', 'Calibri', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0A0A0B !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-left: 8px !important;
  background: transparent !important;
  display: inline-block !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
html body aside.sidebar .sidebar-header {
  position: relative !important;
  overflow: visible !important;
}


/* enterprise-polish-v5-logoclean */
html body aside.sidebar .sidebar-header .logo-mark::before,
html body aside.sidebar .sidebar-header .logo-mark::after,
.logo-mark::before,
.logo-mark::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.logo-mark img {
  display: block !important;
  height: 32px !important;
  width: auto !important;
  max-width: 32px !important;
  object-fit: cover !important;
  object-position: left center !important;
  clip-path: inset(0 60% 0 0) !important;
  transform: scale(2.5) translateX(-30%) !important;
  transform-origin: left center !important;
}
html body aside.sidebar .sidebar-header .logo-mark img { display: none !important; }
html body aside.sidebar .sidebar-header .logo-mark .ulog,
html body aside.sidebar .sidebar-header .ulog {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Space Grotesk', 'Calibri', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0A0A0B !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: transparent !important;
}
html body aside.sidebar .sidebar-header .logo-mark {
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  position: static !important;
}
.logo-mark > .logo-text { display: inline-block !important; }
.logo-mark > .logo-text .logo-primary { font-weight: 700 !important; color: #0A0A0B !important; font-size: 14px !important; }
.logo-mark > .logo-text .logo-secondary { font-weight: 500 !important; color: #6B7280 !important; font-size: 11px !important; letter-spacing: 0.08em !important; display: block !important; }


/* enterprise-polish-v6-usercard */
.sidebar-footer, .sidebar-footer * {
  min-width: 0 !important;
}
.sidebar-footer {
  padding: 10px 12px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-footer div,
.sidebar-footer span,
.sidebar-footer strong,
.sidebar-footer b {
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.sidebar-footer .avatar,
.sidebar-footer [class*='avatar'] {
  width: 30px !important;
  height: 30px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}


/* enterprise-topbar-v7 */
header.topbar {
  display: grid !important;
  grid-template-columns: minmax(140px, auto) 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 0 24px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
}
header.topbar .topbar-left {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}
header.topbar .topbar-right {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: center !important;
  height: 100% !important;
}
header.topbar .topbar-right > #globalSearchWrap {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: 16px !important;
}
header.topbar .topbar-right > *:not(#globalSearchWrap) {
  grid-column: 2 !important;
}
header.topbar .topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100% !important;
  justify-content: flex-end !important;
}
header.topbar .topbar-right > #globalSearchWrap {
  flex: 1 1 auto !important;
  max-width: 480px !important;
  margin-right: auto !important;
}
#globalSearchWrap {
  height: 38px !important;
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}
#globalSearchWrap:hover, #globalSearchWrap:focus-within {
  background: #FFFFFF !important;
  border-color: #7C3AED !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}
#globalSearchWrap input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  width: 100% !important;
  font-size: 13px !important;
  color: #0A0A0B !important;
  padding: 0 8px !important;
}
header.topbar .topbar-right > div:has(> select[onchange*='switchContext']) > div:first-child {
  display: none !important;
}
header.topbar select[onchange*='switchContext'] {
  height: 36px !important;
  padding: 0 32px 0 14px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #0A0A0B !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-width: 200px !important;
  max-width: 240px !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  transition: border-color 0.15s !important;
}
header.topbar select[onchange*='switchContext']:hover {
  border-color: #7C3AED !important;
}
#notifWrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
#notifWrap:hover { background: #F3F4F6 !important; }
#topbarTime {
  padding-left: 14px !important;
  border-left: 1px solid #E5E7EB !important;
  color: #6B7280 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 4px !important;
}


/* polish-hdr-dialog-v1 */
html body .main-wrap {
  margin-left: 240px !important;
  width: calc(100% - 240px) !important;
  max-width: none !important;
}
html body .main-wrap header.topbar {
  width: 100% !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.modal, .modal-content, .modal-body, .dialog, [role='dialog'], .confirm-dialog {
  background: #FFFFFF !important;
  color: #0A0A0B !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}
.modal *, .dialog *, [role='dialog'] * {
  color: inherit;
}
.modal .btn-danger, .modal button[class*='delete' i], .modal button[class*='danger' i], 
.dialog .btn-danger, .dialog button[class*='delete' i], .dialog button[class*='danger' i],
[role='dialog'] .btn-danger, [role='dialog'] button[class*='delete' i], [role='dialog'] button[class*='danger' i],
button.delete-btn, button.btn-delete {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.modal .btn-danger:hover, [role='dialog'] .btn-danger:hover { background: #B91C1C !important; }
.modal .btn-cancel, .modal .btn-secondary, [role='dialog'] .btn-cancel {
  background: #F3F4F6 !important;
  color: #374151 !important;
  border: 1px solid #E5E7EB !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.swal-overlay .swal-modal, .swal2-popup { background: #FFFFFF !important; color: #0A0A0B !important; }
.modal-overlay, .modal-backdrop, .dialog-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}


/* polish-hdr-idfix-v1 */
html body #mainWrap {
  margin-left: 240px !important;
  width: calc(100vw - 240px) !important;
  max-width: none !important;
}
html body #mainWrap > header.topbar {
  width: 100% !important;
  border-bottom: 1px solid #E5E7EB !important;
}


/* polish-visible-v1 */
header.topbar .topbar-right button,
header.topbar .topbar-right a[class*='btn'],
header.topbar .topbar-right .btn {
  min-width: auto !important;
  width: auto !important;
  padding: 0 16px !important;
  height: 36px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
header.topbar button[class*='primary' i],
header.topbar a[class*='primary' i],
header.topbar button.btn-primary,
header.topbar .btn-primary {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  height: 36px !important;
}
.main-wrap button.btn-primary,
.main-wrap .btn-primary,
.main-wrap a.btn-primary {
  min-width: auto !important;
  width: auto !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}
.main-wrap a, .card a, p a, li a, div a {
  text-decoration: none !important;
}
.main-wrap a:hover, .card a:hover, p a:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.main-wrap a, .main-wrap p a, .main-wrap li a, .card a, .card p a {
  text-decoration-line: none !important;
}
/* WhatsApp/LinkedIn quick-setup area polish */


/* polish-batch-v2 */
.btn, button.btn, a.btn, button[class*='btn-'], a[class*='btn-'] {
  min-width: auto !important; width: auto !important;
  white-space: nowrap !important; overflow: visible !important;
  padding: 8px 16px !important; font-size: 13px !important;
  line-height: 1.3 !important; height: auto !important; min-height: 36px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
}
.btn-primary, button.btn-primary, a.btn-primary {
  background: #7C3AED !important; color: #FFFFFF !important;
  border: none !important; border-radius: 8px !important;
  font-weight: 600 !important; padding: 8px 18px !important;
}
.btn-primary:hover { background: #6D28D9 !important; }
a, a:visited, a:hover, a:active { text-decoration-line: none !important; }
.main-wrap a, .main-wrap p a, .main-wrap li a, .card a, .card p a,
.tab-link, .nav-link, .breadcrumb a, .settings-link {
  text-decoration: none !important; text-decoration-line: none !important;
}
.main-wrap a:hover, .card a:hover {
  text-decoration: underline !important; text-underline-offset: 2px !important;
}
.modal, .modal-content, .modal-body, .dialog, [role='dialog'], .confirm-dialog,
.swal-modal, .swal2-popup, .popup, .popup-content {
  background: #FFFFFF !important; color: #0A0A0B !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; padding: 20px !important;
}
.modal *, .dialog *, [role='dialog'] *, .popup * { color: inherit; }
.modal h1, .modal h2, .modal h3, .modal h4, .modal p, .modal span,
.dialog h1, .dialog h2, .dialog h3, .dialog h4, .dialog p, .dialog span,
[role='dialog'] h1, [role='dialog'] h2, [role='dialog'] p {
  color: #0A0A0B !important;
}
.modal .btn-danger, .modal button[class*='delete' i], .modal button[class*='danger' i],
.dialog .btn-danger, .dialog button[class*='delete' i],
[role='dialog'] .btn-danger, [role='dialog'] button[class*='delete' i],
button.btn-delete, .swal-button--danger, .swal2-confirm.swal2-danger {
  background: #DC2626 !important; color: #FFFFFF !important;
  border: none !important; padding: 10px 20px !important;
  border-radius: 6px !important; font-weight: 600 !important;
}
.modal .btn-cancel, .modal .btn-secondary, .dialog .btn-cancel,
[role='dialog'] .btn-cancel, .swal-button--cancel, .swal2-cancel {
  background: #F3F4F6 !important; color: #374151 !important;
  border: 1px solid #E5E7EB !important;
  padding: 10px 20px !important; border-radius: 6px !important;
}
.quick-setup, .quick-setup-card, .provider-card, .setup-panel {
  background: #FFFFFF !important; border: 1px solid #E5E7EB !important;
  border-radius: 12px !important; padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.search-bar, input[type=search], input.search, .search-input {
  background: #F9FAFB !important; border: 1px solid #E5E7EB !important;
  border-radius: 8px !important; padding: 8px 12px !important;
  font-size: 14px !important; height: 40px !important;
  color: #111827 !important;
}
.search-bar:focus, input[type=search]:focus {
  outline: none !important; border-color: #7C3AED !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}
.sequence-row .btn-delete, .sequence-card .btn-delete {
  background: transparent !important; color: #DC2626 !important;
  border: 1px solid #FECACA !important;
  padding: 6px 12px !important; border-radius: 6px !important; font-size: 12px !important;
}
.sequence-row .btn-delete:hover, .sequence-card .btn-delete:hover {
  background: #FEF2F2 !important; border-color: #FCA5A5 !important;
}


/* polish-inline-links-v1 */
.form-hint a, .hint a, .help-text a, p a.no-btn, small a {
  background: transparent !important;
  color: #7C3AED !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
}
.form-hint a:hover, .hint a:hover, .help-text a:hover, small a:hover { color: #6D28D9 !important; }
p a:not([class]), small a:not([class]), .form-hint a:not([class]), .hint a:not([class]) {
  background: transparent !important;
  color: #7C3AED !important;
  text-decoration: underline !important;
  padding: 0 !important;
  display: inline !important;
  border-radius: 0 !important;
}


/* polish-reports-wa-v1 */
.report-kpi, .kpi-card, .stat-card, .metric-card, [data-kpi] {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.15s ease !important;
}
.report-kpi:hover, .kpi-card:hover, .stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: #D1D5DB !important;
}
.report-kpi .value, .kpi-value, .stat-value, .metric-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #0A0A0B !important;
  line-height: 1.1 !important;
  margin: 4px 0 !important;
}
.report-kpi .label, .kpi-label, .stat-label, .metric-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}
.report-kpi .sub, .kpi-sub, .stat-sub, .metric-sub {
  font-size: 12px !important;
  color: #6B7280 !important;
  margin-top: 4px !important;
}
.report-section, .reports-section {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
.report-section h2, .report-section h3, .reports-section h2, .reports-section h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0A0A0B !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F3F4F6 !important;
}
.report-grid, .kpi-grid, .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
.empty-state, .no-data, .zero-state {
  text-align: center !important;
  padding: 40px 20px !important;
  color: #6B7280 !important;
  font-size: 14px !important;
}
.empty-state svg, .no-data svg { color: #D1D5DB !important; margin-bottom: 12px !important; }
.wa-quick-setup, .quicksetup, [data-quicksetup] {
  background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
.wa-quick-setup .step, .wa-quick-setup .provider, .quicksetup .step, .quicksetup .provider {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.wa-quick-setup .step-num, .quicksetup .step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #7C3AED !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.seq-delete-btn:hover {
  background: #FEF2F2 !important;
  border-color: #FCA5A5 !important;
  color: #B91C1C !important;
}
.howto-panel details[open] summary { border-bottom: 1px solid #E9D5FF; }
.howto-panel summary::-webkit-details-marker { display: none; }
.howto-panel summary:hover { background: rgba(124,58,237,0.03); }

/* UM-CONTRAST-V1: readable text on the light theme (added 25 Sep 2026) */
:root, html {
  --pc-text-muted: #6B6560 !important;
  --pc-text: #1A1815 !important;
}
html body .empty-state .empty-desc,
html body .empty-state p,
html body .pc-empty .pc-empty-desc,
html body #lcRecentEmpty { color: #6B6560 !important; }
html body .helper-text { color: #7A736B !important; }
html body #mainWrap .empty-state .empty-desc,
html body #mainWrap .empty-desc { color: #6B6560 !important; }
html body #mainWrap .form-label .helper-text,
html body #mainWrap span.helper-text { color: #7A736B !important; }
html body .priv-tabs .priv-tab.active { color: #1A1815 !important; }
html body .sg-time { color: #B45309 !important; }
html body #um-mcr-card h3 { color: #1A1815 !important; }
html body .ea-badge.template { color: #92400E !important; }
html body .ea-badge.active { color: #14804A !important; }
html body .ea-badge.type { color: #6D28D9 !important; }
html body .pc-score { color: color-mix(in srgb, var(--pc-score-color, #B45309) 60%, #000) !important; }
html body a[style*="#a78bfa"] { color: #6D28D9 !important; }
html body [style*="color:#25d366"] { color: #128C4A !important; }
html body [style*="color:#9ca3af"] { color: #6B7280 !important; }
/* Invisible helpers must not steal page width on wide screens */
html body > #sidebarOverlay,
html body > div:has(> #supportChatBtn) { margin-left: 0 !important; }