/* ---------------------------------------------------------------------------
   App shell styled after the GoHighLevel layout in the reference screenshots:
   dark rail on the left, light workspace on the right, card-based widgets.
   Tokens first so the whole thing can be re-themed per agency later — GHL
   white-labels this, and every colour below is a variable for that reason.
--------------------------------------------------------------------------- */
:root {
  --rail: #1c2434;
  --rail-hover: #27314a;
  --rail-active: #2d3952;
  --rail-text: #c7cfdd;
  --rail-text-dim: #8e99ad;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --line: #e4e8ee;
  --line-soft: #eef1f5;
  --text: #1a2231;
  --muted: #68758a;
  --dim: #97a2b4;
  /* Row hover and chip fills. It was referenced in four rules before it was
     declared anywhere, so `background: var(--hover)` resolved to nothing and
     those rows quietly had no hover state at all. */
  --hover: #f2f5f9;

  --brand: #2f6fed;
  --brand-soft: #eaf1fe;
  --green: #1aa260;
  --amber: #e2a03f;
  --red: #e45c5c;
  --purple: #8b5cf6;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --rail-w: 232px;
}

* { box-sizing: border-box; }
/* Line icons from public/icons.js. They draw in the text colour, so a
   button's hover and active colours reach its icon too. */
.ico { display: inline-block; flex: none; vertical-align: -0.15em; }
.has-ico { display: inline-flex; align-items: center; gap: 6px; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- layout ----- */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; height: 100vh; overflow: hidden; }

/* ----- left rail ----- */
.rail { background: var(--rail); display: flex; flex-direction: column; min-height: 0; }
.rail-logo { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--purple));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
}
.switcher {
  margin: 6px 12px 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--rail-hover); color: var(--rail-text);
  display: flex; align-items: center; gap: 9px; cursor: pointer; border: 0; width: calc(100% - 24px);
  text-align: left;
}
.switcher:hover { background: var(--rail-active); }
.switcher-icon {
  width: 24px; height: 24px; border-radius: 50%; background: #3b4761;
  display: grid; place-items: center; font-size: 11px; flex-shrink: 0; color: #fff;
}
.switcher-text { min-width: 0; flex: 1; }
.switcher-title { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-sub { font-size: 11px; color: var(--rail-text-dim); }
.chev { color: var(--rail-text-dim); font-size: 11px; flex-shrink: 0; }

.rail-search { margin: 0 12px 10px; position: relative; }
.rail-search input {
  width: 100%; padding: 7px 10px 7px 30px; border-radius: 7px; border: 1px solid #333e56;
  background: #222b3e; color: var(--rail-text); font-size: 13px;
}
.rail-search input::placeholder { color: var(--rail-text-dim); }
.rail-search input:focus { outline: none; border-color: var(--brand); }
.rail-search .mag { position: absolute; left: 9px; top: 8px; color: var(--rail-text-dim); display: flex; }

.nav { flex: 1; overflow-y: auto; padding: 2px 8px 16px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: #39445c; border-radius: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 11px; border-radius: 7px; border: 0; background: none;
  color: var(--rail-text); font-size: 13.5px; text-align: left; margin-bottom: 1px;
}
.nav-item:hover { background: var(--rail-hover); color: #fff; }
.nav-item.on { background: var(--rail-active); color: #fff; font-weight: 550; }
.nav-item > .ico { opacity: 0.9; flex-shrink: 0; }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sep { height: 1px; background: #2c3650; margin: 9px 11px; }
.tagline {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--amber); color: #3a2a06;
}
.tagline.beta { background: #3b4761; color: var(--rail-text); }

/* ----- workspace ----- */
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.banner {
  background: #fdecec; color: #8d2b2b; border-bottom: 1px solid #f6d5d5;
  padding: 9px 18px; display: flex; align-items: center; gap: 12px; font-size: 13.5px;
}
.banner .pager { color: #b05a5a; display: flex; gap: 8px; align-items: center; }
.banner .grow { flex: 1; text-align: center; }
.banner button.resolve {
  background: #fff; border: 1px solid #e3bcbc; color: #8d2b2b;
  padding: 5px 13px; border-radius: 7px; font-weight: 600; font-size: 13px;
}
.banner button.x { background: none; border: 0; color: #b05a5a; line-height: 1; display: inline-flex; padding: 2px; }

.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px 18px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.topbar .grow { flex: 1; }
.circle-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #6b7a90; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.select {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 550;
}
.select:hover { border-color: #ccd4e0; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600;
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line); font-weight: 550; }
.btn.ghost:hover { border-color: #ccd4e0; }
.btn.link { background: none; border: 0; color: var(--brand); font-weight: 600; padding: 6px 4px; }

/* Dashboard chrome, matching the reference: the dashboard picker and New sit
   in one bordered group with a hairline between them, rather than reading as
   two unrelated buttons. */
.btn-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.btn-group > button { border: 0; border-radius: 0; background: var(--surface); }
.btn-group > button + button { border-left: 1px solid var(--line); }
.btn-group > button:hover { background: var(--hover); }
.kebab {
  border: 0; background: none; color: var(--muted);
  padding: 4px 6px; border-radius: 7px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.kebab:hover { background: var(--hover); color: var(--text); }

/* The quick-filter strip above the widgets. The trailing rule is part of the
   reference's look: it reads as the start of a filter bar you can add to,
   not as a stray link. */
.quick-filters {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 16px;
}
.quick-filters .rule { align-self: stretch; width: 1px; background: var(--line); }

/* A bar chart with an axis frame, rather than a bare list of tracks. The
   gridlines are a background gradient instead of elements: they are
   decoration, and six empty divs per widget would be six more things for a
   screen reader to walk through. */
.axis-chart { display: flex; gap: 12px; min-height: 170px; }
.axis-cats {
  display: flex; flex-direction: column; justify-content: space-around;
  gap: 10px; padding: 4px 0;
}
.axis-cat {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; color: var(--muted); text-align: center;
}
.axis-plot {
  flex: 1; display: flex; flex-direction: column; justify-content: space-around;
  gap: 10px; padding: 4px 0;
  background-image: repeating-linear-gradient(
    to right, var(--line-soft) 0 1px, transparent 1px 16.666%);
}
.axis-row { display: flex; align-items: center; gap: 9px; }
.axis-bar { height: 22px; border-radius: 3px; background: var(--brand); min-width: 2px; }
.axis-val { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); }


.page { flex: 1; overflow-y: auto; min-height: 0; }
.page-head {
  padding: 18px 26px 0; display: flex; align-items: flex-end; gap: 22px;
}
.page-title { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.subtabs { display: flex; gap: 20px; }
.subtab {
  padding: 6px 1px 11px; border: 0; background: none; color: var(--muted);
  font-size: 14px; border-bottom: 2px solid transparent; font-weight: 550;
}
.subtab.on { color: var(--brand); border-bottom-color: var(--brand); }
/* GHL's module header (Conversations, Contacts): a white row with the title
   and the section tabs side by side, the active tab's underline sitting on
   the row's bottom border, which divides it from the screen below. */
.page-head.module-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 16px; align-items: stretch; gap: 20px;
}
.module-head .page-title { align-self: center; font-size: 20px; font-weight: 600; padding: 13px 0; }
/* One line of tabs, scrolling sideways when the row runs out; the strip
   reaches down over the border so the underline replaces it. */
.module-head .subtabs {
  gap: 8px; align-items: stretch; margin-bottom: -1px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.module-head .subtab {
  padding: 0 8px; font-size: 14px; font-weight: 500; color: #344054;
  border-bottom-width: 2px; cursor: pointer; white-space: nowrap;
}
.module-head .subtab:hover { color: var(--brand); }
.module-head .subtab.on { color: var(--brand); }
/* The underline marks the tab; a click's focus box on top of it is noise. */
.module-head .subtab:focus:not(:focus-visible) { outline: none; }
.page-body { padding: 18px 26px 40px; }
.section-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.01em; }

.notice {
  background: #eef4ff; border: 1px solid #d3e2fd; border-radius: var(--radius);
  padding: 12px 15px; display: flex; gap: 10px; font-size: 13.5px; color: #26406e; margin-bottom: 18px;
}
.notice .i { color: var(--brand); flex-shrink: 0; }
.notice a { color: var(--brand); font-weight: 600; }

/* ----- cards & widgets ----- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 15px; margin-bottom: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.kpi { padding: 18px 20px; }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg);
  display: grid; place-items: center; font-size: 16px; margin-bottom: 14px; color: var(--muted);
}
.kpi-label { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 5px; }
.kpi-value { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; margin-top: 3px; }
.info { color: var(--dim); font-size: 12px; cursor: help; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 15px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 15px; margin-bottom: 15px; }
.widget-head {
  padding: 15px 18px 0; display: flex; align-items: flex-start; gap: 10px;
}
.widget-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.widget-sub { font-size: 12.5px; color: var(--muted); }
.widget-body { padding: 16px 18px 20px; }
.widget-foot { text-align: center; padding: 0 18px 16px; }
.widget-foot .cap { color: var(--muted); font-size: 12.5px; }
.widget-foot .val { font-size: 20px; font-weight: 650; margin-top: 1px; }
.mini-select {
  margin-left: auto; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); font-size: 12.5px; color: var(--text); max-width: 160px;
}
.icon-btn {
  border: 0; background: none; color: var(--dim); font-size: 15px; padding: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text); }

.legend { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.legend-row { display: flex; align-items: center; gap: 8px; }
.swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.donut-wrap { display: flex; align-items: center; gap: 24px; justify-content: center; flex-wrap: wrap; }
.center-label { text-align: center; }
.center-num { font-size: 27px; font-weight: 650; }
.center-cap { font-size: 12px; color: var(--muted); }
.empty-chart {
  display: grid; place-items: center; min-height: 170px; color: var(--dim); font-size: 13.5px;
  gap: 9px; text-align: center;
}
.empty-chart .ring {
  width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--line-soft);
  display: grid; place-items: center; color: var(--dim);
}
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: 11px; align-items: center; font-size: 13px; }
.bar-track { background: var(--line-soft); border-radius: 5px; height: 9px; overflow: hidden; }
.bar-fill { background: var(--brand); height: 100%; border-radius: 5px; transition: width .35s ease; }
.bar-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1a2231; color: #fff; padding: 10px 16px; border-radius: 9px;
  font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 50;
}
.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, #f7f9fb 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 1000px) {
  .app { grid-template-columns: 64px 1fr; }
  .nav-item .label, .switcher-text, .rail-search, .tagline { display: none; }
  .nav-item { justify-content: center; }
  .page-head, .page-body { padding-left: 14px; padding-right: 14px; }
}

/* ----- kanban board ----- */
.board {
  display: flex; gap: 13px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 14px;
}
.col {
  background: #eef1f5; border-radius: var(--radius);
  width: 282px; flex-shrink: 0; display: flex; flex-direction: column;
  max-height: calc(100vh - 230px);
}
.col.over { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -2px; }
.col-head { padding: 12px 14px 10px; }
.col-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.col-count {
  background: #dde3ec; color: var(--muted); border-radius: 20px;
  padding: 0 7px; font-size: 11.5px; font-weight: 600;
}
.col-total { color: var(--muted); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.col-cards { padding: 0 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.oppo {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 12px; box-shadow: var(--shadow); cursor: grab;
}
.oppo:active { cursor: grabbing; }
.oppo.dragging { opacity: .45; }
.oppo-name { font-weight: 550; font-size: 13.5px; margin-bottom: 5px; }
.oppo-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.oppo-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- opportunities, matching the reference ---------- */

/* The toolbar rows above the board. Three of them in the reference, each a
   different kind of control: what you are looking at, which slice of it, and
   how it is filtered. Kept as separate rows rather than one wrapped strip,
   because collapsing them puts the pipeline picker next to a search box and
   they do unrelated things. */
.oppo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.oppo-bar .grow { flex: 1; }
.count-pill {
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-toggle button {
  border: 0; background: var(--surface); padding: 6px 10px; color: var(--muted);
  display: grid; place-items: center;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button.on { background: var(--brand-soft); color: var(--brand); }

/* Saved views. The "+ List" affordance sits in the same row because adding a
   view and choosing one are the same decision seen from two sides. */
.oppo-views {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.oppo-view {
  border: 0; background: none; padding: 8px 10px; font-size: 13.5px; color: var(--muted);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
}
.oppo-view.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 6px 13px; font-size: 13px; color: var(--brand); font-weight: 550;
}
.chip-btn:hover { border-color: var(--brand); }
.oppo-search {
  display: flex; align-items: center; gap: 7px; flex: 1; max-width: 330px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; background: var(--surface);
}
.oppo-search input { border: 0; outline: none; flex: 1; font: inherit; font-size: 13px; background: none; }

/* A collapsed column keeps its header so the stage is still countable at a
   glance — hiding it entirely would make a pipeline look shorter than it is. */
.col.collapsed { width: 58px; min-width: 58px; }
.col.collapsed .col-cards, .col.collapsed .col-sub { display: none; }
.col.collapsed .col-name { writing-mode: vertical-rl; transform: rotate(180deg); gap: 10px; }
.col-sub {
  color: var(--muted); font-size: 12px; margin-top: 3px;
  display: flex; align-items: center; gap: 8px;
}
.col-sub .tot { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 550; }
.col-collapse { border: 0; background: none; color: var(--dim); margin-left: auto; padding: 0 2px; }
.col-collapse:hover { color: var(--text); }

.oppo-top { display: flex; align-items: flex-start; gap: 8px; }
.oppo-top .oppo-name { flex: 1; margin-bottom: 0; }
.oppo-assignee {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
  background: var(--hover); color: var(--muted); border: 1px solid var(--line);
}
/* Labelled rows rather than a bare value: the reference shows what each
   number IS, which matters on a card carrying two of them. */
.oppo-field { display: flex; gap: 8px; font-size: 12.5px; margin-top: 6px; }
.oppo-field .k { color: var(--muted); }
.oppo-field .v { color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }

/* The pipeline picker as a menu. A native <select> cannot carry a "New
   pipeline" row, and putting creation elsewhere means the empty state has
   nowhere to send you. */
.pipe-picker { position: relative; }
.pipe-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.pipe-menu-head { padding: 7px 11px; font-size: 13px; color: var(--dim); }
.pipe-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: none; text-align: left; font-size: 13.5px;
  padding: 8px 11px; border-radius: 7px; color: var(--text);
}
.pipe-item:hover { background: var(--hover); }
.pipe-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pipe-item .tick { margin-left: auto; }
.pipe-menu .sep { height: 1px; background: var(--line); margin: 5px 0; }
.pipe-item.new { color: var(--brand); font-weight: 600; }

/* Pipelines table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--hover); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl-foot {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  padding: 11px 14px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap;
}

/* Forecast */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 15px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kpi .cap { color: var(--muted); font-size: 13px; }
.kpi .big { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin: 5px 0 4px; }
.kpi .big.good { color: var(--green); }
.kpi .sub { color: var(--dim); font-size: 12.5px; }
.risk-row {
  border-left: 4px solid var(--line); border-radius: 7px; background: var(--surface);
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.risk-row .nm { font-weight: 600; font-size: 14px; }
.risk-row .rule { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.risk-row .amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.risk-high { border-left-color: var(--red); }
.risk-med { border-left-color: var(--amber); }
.risk-low { border-left-color: var(--green); }
.quality-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px;
}
.quality-row .nm { font-weight: 600; font-size: 14px; }
.quality-row .why { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.quality-row .n { margin-left: auto; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.blocked-note {
  border: 1px dashed var(--line); border-radius: 9px; padding: 13px 14px;
  color: var(--muted); font-size: 12.5px; line-height: 1.55;
}

/* The icon in a "fix your data" row. A coloured disc rather than a bare
   glyph, so the three rows read as a severity list at a glance. */
.q-ico {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; flex: 0 0 auto; background: var(--hover); color: var(--muted);
}
.q-ico.warn { background: #fdf3e3; color: var(--amber); }
.q-ico.bad { background: #fdeceb; color: var(--red); }

/* Opportunities by status/stage.

   Three overlaid series on one track, not three stacked bars: won, expected
   and max potential are nested quantities (won ≤ expected ≤ max), so laying
   them end to end would draw a total that does not exist. Each is drawn from
   the same left edge and the shorter ones sit on top, which is why the
   segments are absolutely positioned and ordered widest-first in the DOM. */
.fc-legend { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.fc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fc-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.fc-won { background: var(--green); }
.fc-exp { background: var(--brand); }
.fc-max { background: #c3d4f6; }

.fc-plot { display: flex; flex-direction: column; gap: 13px; }
.fc-row { display: flex; align-items: center; gap: 14px; }
.fc-label { width: 96px; flex: 0 0 auto; font-size: 13px; color: var(--muted); text-align: right; }
.fc-track { position: relative; flex: 1; height: 22px; background: var(--line-soft); border-radius: 5px; }
.fc-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; min-width: 2px; }
.fc-empty { position: absolute; left: 9px; top: 0; height: 100%; display: flex; align-items: center;
  font-size: 11.5px; color: var(--dim); }
.fc-axis {
  display: flex; justify-content: space-between; margin: 10px 0 0 110px;
  font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums;
}

/* The summary table. Expected is blue and won is green so a column scan
   matches the chart it sits under, without a legend repeated twice. */
.tbl .fc-exp-cell { color: var(--brand); font-weight: 600; }
.tbl .fc-won-cell { color: var(--green); font-weight: 600; }
.tbl tr.fc-total td { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 650; background: var(--hover); }
.tbl tr.fc-total:hover td { background: var(--hover); }

/* Timeline: the buckets that are not months. Set apart from the month rows
   because "Overdue" and "No close date" are answers to a different question
   — they say the timeline is incomplete, not when money arrives. */
.tbl tr.fc-aside td { color: var(--muted); background: var(--line-soft); }
.tbl tr.fc-aside:hover td { background: var(--line-soft); }
.fc-label-bad { color: var(--red); font-weight: 600; }
.kpi .big.bad { color: var(--red); }


.oppo-contact { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.oppo-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0; }
.status-chip { padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
.status-OPEN { background: #e6f1fd; color: #2563c9; }
.status-WON { background: #e3f6ec; color: #11794a; }
.status-LOST { background: #fdeaea; color: #b03636; }
.status-ABANDONED { background: #eef1f5; color: #6b7889; }
.col-empty { color: var(--dim); font-size: 12.5px; text-align: center; padding: 18px 6px; }

/* ----- calendars ----- */
.cal-layout { display: grid; grid-template-columns: 270px 1fr; gap: 15px; align-items: start; }
.cal-list .cal-row {
  display: flex; gap: 11px; align-items: center; padding: 12px 15px;
  border-top: 1px solid var(--line-soft); cursor: pointer;
}
.cal-list .cal-row:hover { background: var(--bg); }
.cal-list .cal-row.on { background: var(--brand-soft); }
.cal-ico {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
}
.cal-row.on .cal-ico { background: var(--brand); color: #fff; }
.cal-name { font-weight: 550; font-size: 13.5px; }
.cal-meta { color: var(--muted); font-size: 12px; }

.tabs-row { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.tab-btn {
  border: 0; background: none; padding: 11px 1px; font-size: 13.5px; font-weight: 550;
  color: var(--muted); border-bottom: 2px solid transparent;
}
.tab-btn.on { color: var(--brand); border-bottom-color: var(--brand); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; font-weight: 550; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--surface); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.hint { font-size: 12px; color: var(--dim); margin-top: 3px; }

.day-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.day-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 550; }
.day-times { display: flex; align-items: center; gap: 8px; }
.day-times input { width: 104px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.day-off { color: var(--dim); font-size: 13px; }

.slot-day { margin-bottom: 18px; }
.slot-day-name { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot {
  padding: 9px 6px; text-align: center; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.appt-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.appt-when { width: 160px; font-size: 13px; font-variant-numeric: tabular-nums; }
.appt-main { flex: 1; min-width: 0; }
.appt-title { font-weight: 550; font-size: 13.5px; }
.appt-sub { color: var(--muted); font-size: 12.5px; }
.st-SCHEDULED { background: #e6f1fd; color: #2563c9; }
.st-CONFIRMED { background: #e3f6ec; color: #11794a; }
.st-SHOWED    { background: #e3f6ec; color: #11794a; }
.st-NO_SHOW   { background: #fdeaea; color: #b03636; }
.st-CANCELLED { background: #eef1f5; color: #6b7889; text-decoration: line-through; }

/* ----- payments ----- */
.pay-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 650; padding: 0 12px 9px; border-bottom: 1px solid var(--line);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--bg); }
.doc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.doc-total { margin-left: auto; text-align: right; }
.doc-total .lbl { font-size: 12px; color: var(--muted); }
.doc-total .amt { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.totals { margin-left: auto; width: 260px; }
.totals .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.totals .row.grand {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 9px;
  font-weight: 650; font-size: 15px;
}
.totals .row.due { color: var(--brand); font-weight: 600; }
.st-DRAFT { background: #eef1f5; color: #6b7889; }
.st-SENT, .st-VIEWED { background: #e6f1fd; color: #2563c9; }
.st-PARTIALLY_PAID { background: #fdf3e2; color: #8a5a07; }
.st-PAID { background: #e3f6ec; color: #11794a; }
.st-OVERDUE { background: #fdeaea; color: #b03636; }
.st-VOID { background: #eef1f5; color: #97a2b4; text-decoration: line-through; }
.st-TRIALING { background: #f1ebfd; color: #6d3fd4; }
.st-ACTIVE { background: #e3f6ec; color: #11794a; }
.st-PAUSED { background: #fdf3e2; color: #8a5a07; }
.st-PAST_DUE, .st-UNPAID { background: #fdeaea; color: #b03636; }
.line-editor { display: grid; grid-template-columns: 1fr 70px 110px 34px; gap: 8px; margin-bottom: 8px; }
.line-editor input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; width: 100%; }
.line-editor .rm { border: 0; background: none; color: var(--dim); font-size: 16px; }
.line-editor .rm:hover { color: var(--red); }

/* ----- workflow builder ----- */
.wf-layout { display: grid; grid-template-columns: 290px 1fr; gap: 15px; align-items: start; }
.wf-row { display: flex; gap: 11px; align-items: center; padding: 12px 15px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.wf-row:hover { background: var(--bg); }
.wf-row.on { background: var(--brand-soft); }
.wf-name { font-weight: 550; font-size: 13.5px; }
.wf-meta { color: var(--muted); font-size: 12px; }

.steps { display: flex; flex-direction: column; gap: 0; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; position: relative;
}
.step.cond { border-color: #d9c9f6; background: #faf7ff; }
.step.wait { border-color: #f3dfb5; background: #fffcf4; }
.step.terminal { border-style: dashed; color: var(--muted); }
.step-head { display: flex; gap: 10px; align-items: center; }
.step-ico {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 13px; flex-shrink: 0;
}
.step.cond .step-ico { background: #ece2fc; color: #6d3fd4; }
.step.wait .step-ico { background: #fbeccd; color: #8a5a07; }
.step-title { font-weight: 550; font-size: 13.5px; flex: 1; }
.step-type { font-size: 11px; color: var(--dim); font-family: ui-monospace, monospace; }
.step-body { margin-top: 8px; padding-left: 36px; font-size: 13px; color: var(--muted); }
.step-body input, .step-body select, .step-body textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13px; margin-top: 5px; background: var(--surface); color: var(--text);
}
.connector { display: grid; place-items: center; height: 22px; color: var(--dim); font-size: 13px; }
.branch-label {
  font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 20px;
  background: #ece2fc; color: #6d3fd4; margin-left: 36px;
}
.branch-label.no { background: #f1f3f6; color: #6b7889; }
.branch-col { border-left: 2px solid var(--line); padding-left: 14px; margin-left: 12px; }
.problems { background: #fdf3e2; border: 1px solid #f0dcb4; color: #7a5208; padding: 10px 13px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; }
.enr { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.enr-steps { font-size: 12px; color: var(--muted); margin-top: 3px; }
.st-COMPLETED { background: #e3f6ec; color: #11794a; }
.st-WAITING { background: #fdf3e2; color: #8a5a07; }
.st-STOPPED { background: #eef1f5; color: #6b7889; }
.st-FAILED { background: #fdeaea; color: #b03636; }
.st-PUBLISHED { background: #e3f6ec; color: #11794a; }
.st-ARCHIVED { background: #eef1f5; color: #97a2b4; }

/* ----- sign in ----- */
.signin-wrap {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 100; padding: 20px;
}
.signin {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16,24,40,.08); padding: 28px 26px;
}
.signin .logo-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; margin-bottom: 16px; }
.signin h1 { font-size: 20px; margin: 0 0 4px; letter-spacing: -0.02em; }
.signin .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.signin .field { margin-bottom: 13px; }
.signin input { font-size: 14px; padding: 10px 12px; }
.signin button { width: 100%; justify-content: center; padding: 11px; margin-top: 4px; }
.signin-error {
  background: #fdecec; border: 1px solid #f6d5d5; color: #8d2b2b;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px;
}
.signin-hint {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.signin-hint code {
  background: var(--bg); padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--text);
}
.user-menu { display: flex; align-items: center; gap: 9px; }
.user-menu .who { text-align: right; line-height: 1.25; }
.user-menu .who .nm { font-size: 12.5px; font-weight: 550; }
.user-menu .who .em { font-size: 11px; color: var(--muted); }

/* ----- team & permissions ----- */
.member { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.member:last-child { border-bottom: 0; }
.member-main { flex: 1; min-width: 0; }
.member-name { font-weight: 550; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.member-sub { color: var(--muted); font-size: 12.5px; }
.role-chip { padding: 1px 9px; border-radius: 20px; font-size: 11px; font-weight: 650; }
.role-OWNER  { background: #f1ebfd; color: #6d3fd4; }
.role-ADMIN  { background: #e6f1fd; color: #2563c9; }
.role-USER   { background: #e3f6ec; color: #11794a; }
.role-VIEWER { background: #eef1f5; color: #6b7889; }
.you { font-size: 11px; color: var(--dim); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px 16px; margin-top: 12px; }
.perm {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.perm input { margin: 0; }
.perm .state { margin-left: auto; font-size: 10px; padding: 0 5px; border-radius: 4px; font-family: inherit; }
.perm .state.role { background: var(--line-soft); color: var(--muted); }
.perm .state.granted { background: #e3f6ec; color: #11794a; }
.perm .state.revoked { background: #fdeaea; color: #b03636; }
.perm-group { margin-bottom: 16px; }
.perm-group h4 {
  margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 650;
}

/* ----- activity log ----- */
.audit-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.audit-row:last-child { border-bottom: 0; }
.audit-when { width: 130px; flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-main { flex: 1; min-width: 0; }
.audit-action { font-weight: 550; font-size: 13.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.audit-meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.audit-changes { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.audit-change { font-size: 12px; font-family: ui-monospace, monospace; display: flex; gap: 6px; flex-wrap: wrap; }
.audit-change .k { color: var(--muted); }
.audit-change .from { color: #b03636; text-decoration: line-through; opacity: .75; }
.audit-change .to { color: #11794a; }
.source-chip {
  font-size: 10.5px; padding: 1px 7px; border-radius: 20px;
  background: var(--panel-2, var(--line-soft)); color: var(--muted); font-family: ui-monospace, monospace;
}
.audit-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.audit-filters select, .audit-filters input {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
}

/* ----- dialog ----- */
.dlg-backdrop {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .38);
  display: grid; place-items: center; z-index: 200; padding: 20px;
  animation: dlg-fade .12s ease-out;
}
@keyframes dlg-fade { from { opacity: 0 } to { opacity: 1 } }
.dlg {
  background: var(--surface); border-radius: 13px; width: 100%; max-width: 440px;
  box-shadow: 0 16px 48px rgba(16,24,40,.22); overflow: hidden;
  animation: dlg-rise .14s ease-out;
}
@keyframes dlg-rise { from { transform: translateY(6px); opacity: .6 } to { transform: none; opacity: 1 } }
.dlg-head { padding: 18px 20px 0; }
.dlg-title { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; }
.dlg-desc { font-size: 13px; color: var(--muted); margin-top: 3px; }
.dlg-body { padding: 16px 20px 4px; max-height: 60vh; overflow-y: auto; }
.dlg-foot {
  padding: 14px 20px 18px; display: flex; gap: 9px; justify-content: flex-end;
  border-top: 1px solid var(--line-soft); margin-top: 12px;
}
.dlg .field { margin-bottom: 13px; }
.dlg .field:last-child { margin-bottom: 4px; }
.dlg input, .dlg select, .dlg textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--surface); color: var(--text);
}
.dlg input:focus, .dlg select:focus, .dlg textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.dlg .err { color: var(--red); font-size: 12.5px; margin-top: 4px; }
.dlg-option-hint { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 1em; }

/* A text button that sits under a form's primary action. Not an <a>: there is
   nowhere to navigate to, and an href="#" in a form is a way to lose state. */
.link-btn {
  width: 100%;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 10px 0 2px;
  cursor: pointer;
  text-align: center;
}
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.has-ico { justify-content: center; }

/* ---------- tasks ---------- */
.task-toolbar { display: flex; gap: 8px; margin: 14px 0; }
.task-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--hover); }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }

.task-check {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line-strong, #c9ced6); border-radius: 6px;
  background: var(--card); cursor: pointer; color: #fff;
  font-size: 12px; line-height: 1; display: grid; place-items: center;
}
.task-check:hover { border-color: var(--brand); }
.task-check.on { background: var(--brand); border-color: var(--brand); }
.task-check.series { border: 0; background: none; color: var(--muted); cursor: default; font-size: 15px; }

.task-main { flex: 1 1 auto; min-width: 0; }
.task-title { font-size: 14px; font-weight: 500; }
.task-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--muted);
}
.task-dot { opacity: 0.5; }
.task-body {
  margin-top: 5px; font-size: 13px; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Overdue is the only state worth colouring. If everything is coloured,
   nothing reads as urgent. */
.task-due.due-over { color: var(--danger, #d64545); font-weight: 500; }
.task-due.due-soon { color: var(--text); }
.task-due.due-none { opacity: 0.7; }
.task-repeat { opacity: 0.85; }
.btn.small { padding: 5px 9px; font-size: 12px; }

@media (max-width: 720px) {
  .task-row { padding: 12px 12px; }
  .task-body { display: none; }
}

/* ---------- settings: taxonomy ---------- */
.tax-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.tax-row:last-child { border-bottom: 0; }
.tax-row:hover { background: var(--hover); }
.tax-main { flex: 1 1 auto; min-width: 0; }
.tax-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.tax-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--muted);
}
.tax-type { font-weight: 500; }
/* The key is what appears in automations and payloads, so it is shown in a
   monospace face to read as an identifier rather than as prose. */
.tax-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: var(--hover); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}
.tax-req {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--danger, #d64545); border: 1px solid currentColor;
  border-radius: 4px; padding: 0 4px; font-weight: 600;
}
/* The open custom object. A left edge rather than a background fill: the
   row already uses background for :hover, and two meanings on one property
   makes the hovered row look selected. */
.tax-row.on { box-shadow: inset 3px 0 0 var(--brand); background: var(--hover); }
.tax-pill {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand); border: 1px solid currentColor;
  border-radius: 4px; padding: 0 4px; font-weight: 600;
}
.co-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--hover);
}
.co-filter select, .co-filter input { max-width: 190px; }

.tag-chip {
  display: inline-block; font-size: 12.5px; font-weight: 500;
  padding: 2px 9px; border-radius: 999px;
  background: var(--hover); border: 1px solid var(--line); color: var(--text);
}

/* ---------- segments ---------- */
.seg-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.seg-chip {
  font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer;
}
.seg-chip:hover { color: var(--text); border-color: var(--line-strong, #c9ced6); }
.seg-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg-chip.add { border-style: dashed; }
.seg-chip.danger { color: var(--danger, #d64545); border-color: currentColor; }
/* A private segment is marked rather than labelled: the distinction matters
   when you are looking for yours, not while you are reading the list. */
.seg-private { margin-left: 5px; opacity: 0.55; }

.seg-dlg { max-width: 620px; }
.seg-match {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin: 4px 0 10px;
}
.seg-match select { font: inherit; font-size: 13px; padding: 5px 8px; }
.seg-rules { display: flex; flex-direction: column; gap: 7px; }
.seg-rule { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr auto; gap: 6px; }
.seg-rule select, .seg-rule input {
  font: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; min-width: 0; background: var(--card);
}
.seg-novalue { }
.seg-summary {
  margin-top: 12px; font-size: 13px; color: var(--muted);
  padding: 8px 11px; background: var(--bg); border-radius: 7px;
}
.seg-summary.bad { color: var(--danger, #d64545); }
.seg-shared {
  margin-right: auto; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}

@media (max-width: 720px) {
  .seg-rule { grid-template-columns: 1fr 1fr; }
}
.seg-chip.act { border-color: var(--brand); color: var(--brand); }

/* ---------- launchpad ----------
   GHL's V1 Launchpad (GHL-TEARDOWN-LAUNCHPAD.md): a centred Roboto title
   over a 650px card of rows at least 90px tall, with GHL's greys, its
   #38a169 button and a 50px round check for a done row. */
.lp-page { padding-top: 34px; padding-bottom: 40px; }
.lp-heading {
  text-align: center; margin: 0 0 25px;
  font: 500 25px/1.3 Roboto, var(--font, system-ui), sans-serif; color: #1f2937;
}
.lp-card {
  position: relative; max-width: 650px; margin: 0 auto;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 5px;
}
.lp-row {
  position: relative; display: flex; align-items: center;
  min-height: 90px; padding: 12px 18px 12px 0; border-bottom: 1px solid #cbd5e0;
}
.lp-row:last-child { border-bottom: 0; }
.lp-mark {
  flex: 0 0 56px; width: 56px; height: 56px; margin: 0 16px;
  display: grid; place-items: center;
}
.lp-mark svg { width: 56px; height: 56px; }
/* GHL's hl_disable_action: a done row's icon fades back. */
.lp-mark.is-done { opacity: .5; }
.lp-dot { font-size: 28px; color: #a0aec0; }
.lp-main { flex: 0 1 450px; min-width: 0; font-size: 14px; color: #667085; line-height: 1.45; }
.lp-small { font-size: 12px; margin-top: 3px; }
.lp-note { font-size: 12px; font-style: italic; color: #718096; margin-top: 3px; }
.lp-detail {
  font-size: 12px; color: #b9792a; margin-top: 6px;
  background: #fdf2e2; border-radius: 4px; padding: 3px 8px;
  display: inline-block; overflow-wrap: anywhere;
}
.lp-row.is-done .lp-detail { color: #718096; background: #f7fafc; }
.lp-side { flex: 1 0 auto; display: flex; justify-content: flex-end; padding-left: 12px; }
.lp-btn {
  background: #38a169; color: #fff; border: 0; border-radius: 3px;
  padding: .65rem 1.5rem; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.lp-btn:hover:not(:disabled) { background: #2f855a; }
.lp-btn:disabled { opacity: .6; cursor: default; }
.lp-check {
  width: 50px; height: 50px; border-radius: 50%; background: #38a169;
  display: grid; place-items: center;
}
.lp-alert { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); color: #e53e3e; font-size: 18px; }

.lp-complete { text-align: center; margin: 0 auto 25px; max-width: 650px; }
.lp-complete-mark {
  width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%;
  background: #059669; display: grid; place-items: center;
}
.lp-complete-title { font: 600 25px/1.3 Roboto, var(--font, system-ui), sans-serif; color: #059669; }
.lp-complete-sub { font-size: 14px; color: #667085; margin-top: 6px; }

/* GHL's modals: Send Link's "sent" note and Add Users. */
.lp-dlg { max-width: 520px; }
.lp-sent-lead { font-size: 14px; color: #4a5568; text-align: center; padding-top: 10px; }
.lp-sent-to { font-weight: 600; color: #1f2937; text-align: center; margin-top: 6px; overflow-wrap: anywhere; }
.lp-au-label { display: block; font-size: 13px; color: #4a5568; margin-bottom: 6px; }
.lp-au-box {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 84px; padding: 8px;
  border: 1px solid #cbd5e0; border-radius: 4px; background: #fff; cursor: text; align-content: flex-start;
}
.lp-au-box .lp-au-input {
  flex: 1 0 160px; width: auto; min-height: 0; border: 0; outline: 0; box-shadow: none;
  font: inherit; font-size: 13px; padding: 3px 2px; background: transparent;
}
.lp-au-tag {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 4px 2px 8px; border-radius: 3px; font-size: 12.5px;
  background: #edf2f7; color: #2d3748; overflow-wrap: anywhere;
}
.lp-au-tag.is-error { background: #fed7d7; color: #c53030; }
.lp-au-tag.is-exists { background: #feebc8; color: #9c4221; }
.lp-au-x { border: 0; background: none; cursor: pointer; color: inherit; line-height: 1; padding: 0 2px; display: inline-flex; align-items: center; }
.lp-au-hint { font-size: 12px; color: #718096; margin-top: 6px; }
.lp-au-summary { margin-top: 10px; font-size: 13px; }
.lp-au-line { margin-top: 4px; }
.lp-au-line.is-error { color: #c53030; }
.lp-au-line.is-exists { color: #9c4221; }
.lp-au-line.is-new { color: #2f855a; }
.lp-au-link { border: 0; background: none; padding: 0; color: #3182ce; cursor: pointer; font: inherit; text-decoration: underline; }

/* Send Link's phone step and the webchat wizard. */
.lp-phone-lead { font-size: 14px; color: #4a5568; margin-bottom: 12px; line-height: 1.5; }
.lp-phone-input {
  width: 100%; padding: 9px 11px; border: 1px solid #cbd5e0; border-radius: 4px;
  font: inherit; font-size: 14px; background: #fff; color: #1f2937;
}
.lp-field-error { color: #c53030; font-size: 12.5px; margin-top: 6px; min-height: 1em; }
.lp-wiz { max-width: 640px; }
.lp-radios { display: grid; gap: 8px; margin-bottom: 14px; }
.lp-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #2d3748; cursor: pointer; }
.lp-cms-line { font-size: 13.5px; }
.lp-cms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lp-cms {
  padding: 16px 10px; border: 1px solid #cbd5e0; border-radius: 6px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: #2d3748; cursor: pointer;
}
.lp-cms:hover { border-color: #38a169; }
.lp-cms.on { border-color: #38a169; box-shadow: 0 0 0 2px rgba(56, 161, 105, .25); color: #2f855a; }
.lp-step-n {
  width: 34px; height: 34px; border-radius: 50%; background: #38a169; color: #fff;
  display: grid; place-items: center; font-weight: 700; margin-bottom: 10px;
}
.lp-step-text { font-size: 15px; color: #1f2937; line-height: 1.5; }
.lp-step-of { font-size: 12.5px; color: #718096; margin-top: 14px; }
.lp-code { margin-top: 14px; display: grid; gap: 8px; justify-items: start; }
.lp-code-title { font-size: 13px; font-weight: 600; color: #4a5568; }
.lp-check-status { margin-top: 14px; padding: 12px 14px; border-radius: 6px; font-size: 14px; background: #f7fafc; color: #4a5568; display: grid; gap: 4px; }
.lp-check-status.ok { background: #f0fff4; color: #276749; }
.lp-check-status.bad { background: #fff5f5; color: #9b2c2c; }
.lp-check-head { font-weight: 700; }
.lp-foot-split { justify-content: flex-end; }
.lp-foot-split > :first-child { margin-right: auto; }
.lp-foot-links { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.lp-included { margin-top: 12px; }
.lp-included-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: #4a5568; line-height: 1.7; }
.lp-sent-ok { margin-right: auto; color: #2f855a; font-size: 13.5px; align-self: center; }

/* The green on this screen is the action colour, not the brand colour: every
   button in the row means "set this up", and GHL draws them all the same. */
.btn.green {
  background: #2f9e5e; border-color: #2f9e5e; color: #fff;
}
.btn.green:hover:not(:disabled) { background: #2a8d54; border-color: #2a8d54; }
.btn.green:disabled { opacity: 0.6; }

/* The embed snippet. Monospace and selectable: people copy this by hand as
   often as they use the button. */
.embed-box {
  width: 100%; resize: vertical; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.5; color: var(--fg);
  background: var(--bg); overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .lp-page { padding-top: 20px; }
  .lp-heading { font-size: 21px; }
  /* Mark beside the text, action underneath and indented to line up with
     it: three on one line leaves a text column too narrow to read. */
  .lp-row { flex-wrap: wrap; padding: 12px 13px; column-gap: 11px; row-gap: 10px; }
  .lp-mark { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; align-self: flex-start; }
  .lp-mark svg { width: 38px; height: 38px; }
  .lp-main { flex: 1 1 calc(100% - 51px); }
  .lp-side { flex: 1 0 100%; justify-content: flex-start; padding-left: 51px; }
  .lp-check { width: 32px; height: 32px; }
  .lp-alert { position: static; transform: none; order: 2; }
}

/* ---------- conversations ----------
   Four columns: the inbox, the thread, the contact. The thread is the only
   one that grows; the other two are fixed, because a 600px-wide contact
   panel on a large screen is wasted and a 180px inbox is unreadable. */
.conv {
  display: grid;
  /* The rail is first and fixed: it is navigation, and navigation that
     changes width as the list beside it fills is navigation you have to
     look for twice. */
  grid-template-columns: 52px 300px minmax(0, 1fr) 320px;
  gap: 14px;
  height: calc(100vh - 150px);
  min-height: 520px;
}
.conv > * {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* the inbox rail: which inbox, and the two actions above every one of them */
.conv-rail { align-items: center; gap: 6px; padding: 10px 0; overflow: visible; }
.conv-rail-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 0; background: none;
  color: var(--dim); font-size: 15px; cursor: pointer; display: grid; place-items: center;
}
.conv-rail-btn:hover { background: var(--hover); color: var(--text); }
.conv-rail-btn.on { background: var(--brand-soft); color: var(--brand); }
.conv-rail-btn.primary { background: var(--brand); color: #fff; }
.conv-rail-btn.primary:hover { filter: brightness(1.05); color: #fff; }
/* Present but inert, because the feature behind it is not built. Dimmed
   rather than hidden: the rail is the product's own shape, and a gap says
   less than a button that can tell you why it does nothing. */
.conv-rail-btn.off { opacity: .4; }
.conv-rail-rule { width: 20px; height: 1px; background: var(--line); margin: 4px 0; }

.conv-bulk-acts { display: flex; gap: 2px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger, #d64545); }
.conv-more {
  width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--line-soft);
  background: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer;
}
.conv-more:hover { background: var(--brand-soft); }
.conv-more:disabled { color: var(--muted); cursor: default; background: none; }

.conv-loading, .conv-empty {
  padding: 28px 18px; color: var(--muted); font-size: 13px; text-align: center;
}

/* inbox */
.conv-list-head { display: flex; align-items: center; padding: 13px 14px 9px; }
.conv-list-title { font-weight: 650; font-size: 15px; flex: 1; }
.conv-tabs { display: flex; gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--line-soft); }
.conv-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 8px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 12px; border-bottom: 2px solid transparent;
}
.conv-tab:hover { color: var(--text); }
.conv-tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.conv-tab-ico { position: relative; line-height: 1; display: inline-flex; }
.conv-tab-badge {
  position: absolute; top: -7px; left: 11px;
  background: var(--brand); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700; padding: 0 5px; line-height: 15px;
}
.conv-bulk {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted);
}
.conv-bulk-label { flex: 1; }
.conv-rows { overflow-y: auto; flex: 1; }
.conv-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; border-left: 3px solid transparent;
}
.conv-row:hover { background: var(--hover); }
.conv-row.on { background: var(--brand-soft); border-left-color: var(--brand); }
.conv-row-check { margin-top: 4px; }
.conv-av {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 650; flex: none;
}
.conv-av.small { width: 30px; height: 30px; font-size: 11px; }
.conv-av-ch {
  position: absolute; right: -3px; bottom: -3px;
  color: #fff; border: 2px solid var(--surface); border-radius: 8px;
  font-size: 8px; font-weight: 700; line-height: 12px; padding: 0 3px;
}
.conv-row-main { min-width: 0; flex: 1; }
.conv-row-top { display: flex; align-items: center; gap: 7px; }
.conv-row-name {
  font-weight: 600; font-size: 13.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-row-date { color: var(--dim); font-size: 11.5px; flex: none; }
.conv-row-unread {
  background: var(--brand); color: #fff; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; flex: none;
}
.conv-row-bottom { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.conv-row-preview {
  color: var(--muted); font-size: 12.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-star { border: 0; background: none; cursor: pointer; color: var(--dim); padding: 0; display: inline-flex; }
.conv-star.on, .icon-btn.on { color: var(--amber); }

/* thread */
.conv-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.conv-thread-name { font-weight: 650; font-size: 15px; flex: 1; }
.conv-thread-actions { display: flex; gap: 4px; }
.conv-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; background: var(--bg); }
.conv-day { text-align: center; margin: 12px 0; }
.conv-day-pill {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 12px; font-size: 11.5px; color: var(--muted);
}
.msg { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 78%; }
.msg.in { align-items: flex-start; }
.msg.out { align-items: flex-end; margin-left: auto; }
.msg-bubble {
  padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.msg.in .msg-bubble { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg.out .msg-bubble { background: #eceafd; border: 1px solid #ddd8fb; border-top-right-radius: 4px; }
.msg-bubble.failed { background: #fdf0f0; border-color: #f4cfcf; }
.msg-warn { display: flex; gap: 8px; align-items: flex-start; }
.msg-warn-ico { color: var(--red); }
.msg-meta {
  display: flex; gap: 6px; align-items: center;
  margin-top: 3px; font-size: 11px; color: var(--dim);
}
.msg-ticks { display: inline-flex; vertical-align: middle; }
.msg-ticks.read { color: var(--brand); }
.msg-ch { font-size: 9.5px; font-weight: 700; }
.msg-sys { text-align: center; margin: 10px 0; font-size: 11.5px; color: var(--muted); }

/* composer */
.conv-composer { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--surface); }
.conv-comp-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.conv-comp-tab {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--muted); padding: 3px 2px; border-bottom: 2px solid transparent;
}
.conv-comp-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.conv-comp-addr { display: flex; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.conv-comp-key { font-weight: 600; color: var(--text); }
.conv-comp-area {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical;
}
.conv-comp-area:disabled { background: var(--bg); color: var(--dim); }
.conv-comp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.conv-comp-hint { flex: 1; font-size: 11.5px; color: var(--dim); }
.conv-window {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  padding: 12px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}

/* contact panel */
.conv-detail-inner { overflow-y: auto; padding: 14px; }
.conv-detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.conv-detail-name { font-weight: 650; font-size: 14.5px; }
.conv-detail-grid {
  display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px;
  font-size: 12.5px; margin-bottom: 14px;
}
.conv-detail-key { color: var(--muted); }
.conv-detail-val { color: var(--text); word-break: break-word; }
.conv-detail-sec { margin-bottom: 14px; }
.conv-detail-sec-title {
  font-weight: 650; font-size: 12.5px; margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.conv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.conv-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.conv-detail-note { font-size: 11.5px; color: var(--dim); margin-top: 8px; line-height: 1.5; }
.conv-opp { display: flex; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.conv-opp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-opp-val { color: var(--muted); }
.conv-detail-foot {
  border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 10px;
  font-size: 11.5px; color: var(--dim); display: flex; flex-direction: column; gap: 3px;
}

@media (max-width: 1280px) {
  .conv { grid-template-columns: 270px minmax(0, 1fr); }
  .conv-detail { display: none; }
}

/* ---------- Calendars → calendar view ---------- */
/* The grid in public/calendar.js. Sizes here must agree with HOUR_PX there;
   the column heights are set inline from it so only the hour-row rhythm and
   the colours live in CSS. */

.calv-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.calv-tab {
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 14px; font:inherit; font-weight:550; color:var(--muted); cursor:pointer;
}
.calv-tab:hover { color:var(--text); }
.calv-tab.is-on { color:var(--brand); border-bottom-color:var(--brand); }

.calv-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.calv-nav { display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:9px; padding:2px; }
.calv-range { padding:0 14px; font-weight:600; font-size:14px; white-space:nowrap; }

.calv-main { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.calv-main.has-panel { grid-template-columns:minmax(0,1fr) 300px; }
.calv-gridhost { min-width:0; }

.calv-grid { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.calv-head { display:grid; grid-template-columns:64px repeat(var(--cols),1fr); border-bottom:1px solid var(--line); }
.calv-zone { font-size:11px; color:var(--dim); padding:10px 6px; text-align:center; line-height:1.2; }
.calv-dayhead { padding:10px 8px; text-align:center; font-weight:600; font-size:13.5px; color:var(--muted); border-left:1px solid var(--line-soft); }
.calv-dayhead.is-today { color:var(--brand); }

.calv-allday { display:grid; grid-template-columns:64px repeat(var(--cols),1fr); border-bottom:1px solid var(--line); min-height:34px; }
.calv-allday-label { font-size:11.5px; color:var(--dim); padding:8px 6px; text-align:right; }
.calv-allday-cell { border-left:1px solid var(--line-soft); padding:4px; display:flex; flex-direction:column; gap:3px; }

/* The scroll container. A fixed height keeps the page from growing to 1,152px
   of hour rows; the grid scrolls internally like every calendar does. */
.calv-body { display:grid; grid-template-columns:64px repeat(var(--cols),1fr); max-height:62vh; overflow-y:auto; position:relative; }
.calv-axis { position:relative; }
.calv-hour { position:relative; border-bottom:1px solid transparent; }
.calv-hour span { position:absolute; top:-7px; right:8px; font-size:11px; color:var(--dim); background:var(--card); padding:0 2px; }
.calv-col { position:relative; border-left:1px solid var(--line-soft); }
.calv-col.is-today { background:var(--brand-soft); }
.calv-line { position:absolute; left:0; right:0; height:1px; background:var(--line-soft); }

.calv-now { position:absolute; left:0; right:0; height:2px; background:#e5484d; z-index:3; pointer-events:none; }
.calv-now::before { content:''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#e5484d; }

.calv-ev {
  position:absolute; border-radius:7px; padding:3px 6px; overflow:hidden; cursor:pointer;
  font-size:11.5px; line-height:1.3; z-index:2; border-left:3px solid;
}
.calv-ev:hover { filter:brightness(0.97); z-index:4; }
.calv-ev-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calv-ev-time, .calv-ev-sub { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calv-appointment { background:var(--brand-soft); border-left-color:var(--brand); color:var(--text); }
.calv-block {
  /* Hatched, not just a colour: a block is an absence, and it should not be
     mistakeable for a booking at a glance or in greyscale. */
  background:repeating-linear-gradient(45deg, var(--line-soft), var(--line-soft) 5px, transparent 5px, transparent 10px);
  border-left-color:var(--muted); color:var(--muted);
}
.calv-ev.is-cancelled { opacity:0.55; text-decoration:line-through; }
.calv-ev.is-allday { position:static; height:auto; }

.calv-panel { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--card); position:sticky; top:12px; }
.calv-panel-head { display:flex; align-items:center; margin:4px 0 8px; }
.calv-panel-label { font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.calv-typebox { background:var(--brand-soft); border-radius:10px; padding:12px; margin-bottom:14px; }
.calv-check { display:flex; align-items:center; gap:9px; padding:5px 2px; font-size:13.5px; cursor:pointer; }
.calv-search { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font:inherit; margin-bottom:10px; }
.calv-group { display:flex; align-items:center; gap:7px; font-weight:600; font-size:13px; margin:12px 0 4px; }
.calv-count { background:var(--brand-soft); color:var(--brand); border-radius:20px; padding:0 7px; font-size:11.5px; }
.calv-empty, .calv-loading { color:var(--muted); padding:28px; text-align:center; }

.calv-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.calv-list-row { display:grid; grid-template-columns:1.6fr 2fr 1fr 1.4fr 1fr; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line-soft); font-size:13.5px; cursor:pointer; }
.calv-list-row:last-child { border-bottom:0; }
.calv-list-row:hover { background:var(--brand-soft); }
.calv-list-row.is-head { font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.03em; cursor:default; background:none; }
.calv-list-when { font-weight:550; }
.calv-list-dim { color:var(--muted); }

@media (max-width: 900px) {
  .calv-main.has-panel { grid-template-columns:1fr; }
  .calv-list-row { grid-template-columns:1fr 1fr; }
}

/* ---------- Calendars → month view ---------- */

.calm { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.calm-head { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); }
.calm-weekday { padding:9px 8px; text-align:center; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }

/* Each week is a cell layer with a bar layer stacked on top of it, so a bar
   can span columns without the cells having to know about it. */
.calm-week { position:relative; display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line-soft); min-height:104px; }
.calm-week:last-child { border-bottom:0; }
.calm-cell { border-left:1px solid var(--line-soft); padding:4px; }
.calm-cell:first-child { border-left:0; }
.calm-cell.is-other { background:var(--line-soft); }
.calm-cell.is-today { background:var(--brand-soft); }

.calm-daynum {
  appearance:none; background:none; border:0; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:6px; line-height:1.4;
}
.calm-daynum:hover { background:var(--card); color:var(--text); }
.calm-cell.is-today .calm-daynum { color:var(--brand); }
.calm-cell.is-other .calm-daynum { color:var(--dim); }

/* The bar layer sits over the cells, offset below the day numbers. */
.calm-bars {
  position:absolute; inset:26px 4px 4px 4px; display:grid;
  grid-template-columns:repeat(7,1fr); grid-auto-rows:20px; gap:2px; pointer-events:none;
}
.calm-bar {
  pointer-events:auto; cursor:pointer; border-radius:5px; padding:1px 6px; font-size:11.5px;
  line-height:16px; overflow:hidden; border-left:3px solid; min-width:0;
}
.calm-bar-text { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calm-bar.calv-appointment { background:var(--brand-soft); border-left-color:var(--brand); color:var(--text); }
.calm-bar.calv-block {
  background:repeating-linear-gradient(45deg, var(--line-soft), var(--line-soft) 5px, transparent 5px, transparent 10px);
  border-left-color:var(--muted); color:var(--muted);
}
.calm-bar.is-cancelled { opacity:0.55; text-decoration:line-through; }
.calm-more {
  pointer-events:auto; appearance:none; background:none; border:0; font:inherit; font-size:11px;
  font-weight:600; color:var(--brand); cursor:pointer; text-align:left; padding:0 6px;
}

/* The drag-to-create ghost in the week/day grid. */
.calv-ghost {
  position:absolute; left:2px; right:3px; z-index:5; pointer-events:none;
  border:1.5px dashed var(--brand); border-radius:7px; background:var(--brand-soft);
  color:var(--brand); font-size:11px; font-weight:600; padding:2px 6px; overflow:hidden;
}
.calv-col { cursor:crosshair; }
.calv-ev { cursor:pointer; }

/* ---------- reporting ---------- */
.rep-toolbar { display: flex; gap: 8px; margin: 14px 0; }
.rep-range {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.rep-summary { display: flex; flex-wrap: wrap; gap: 28px; padding: 18px 20px; margin-bottom: 14px; }
.rep-stat-value { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.rep-stat-value.bad { color: var(--danger, #d64545); }
.rep-stat-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.rep-chart { padding-bottom: 6px; }
.rep-plot { display: flex; gap: 10px; padding: 16px 20px 6px; height: 260px; }
.rep-axis {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; color: var(--muted); text-align: right;
  min-width: 34px; padding-bottom: 22px;
}
.rep-bars {
  flex: 1 1 auto; display: flex; align-items: flex-end; gap: 3px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-left: 6px;
  /* min-width: 0 is load-bearing. Without it a flex row cannot shrink below
     its min-content width, which the nowrap x-labels set — so 31 daily
     columns pushed the chart 344px past the card edge and the only bars in
     the series rendered off-screen. The chart looked empty while being
     entirely correct. */
  min-width: 0;
  overflow: hidden;
}
.rep-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100%; }
/* The stack fills the column so an empty bucket still occupies its slot —
   a gap must read as a zero, not as a missing column. */
.rep-stack { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.rep-seg { width: 100%; border-radius: 2px 2px 0 0; min-height: 2px; }
.rep-seg + .rep-seg { border-radius: 0; }
.rep-xlabel {
  height: 22px; font-size: 10px; color: var(--muted); text-align: center;
  white-space: nowrap; padding-top: 4px;
  /* Visible, not hidden: a column is ~30px and "17 Sep" is wider, so
     clipping turned every label into "17 S". Only every Nth column carries
     one, so they have room to spill into their empty neighbours, and
     .rep-bars clips anything reaching the card edge. */
  overflow: visible;
}
.rep-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 20px 16px; font-size: 12.5px; color: var(--muted); }
.rep-key { display: inline-flex; align-items: center; gap: 6px; }
.rep-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

@media (max-width: 720px) {
  .rep-summary { gap: 18px; }
  .rep-xlabel { font-size: 0; }
}
.conv-status-chip {
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  border-radius: 20px; padding: 2px 9px; font-size: 11px; margin-left: 8px;
}

/* ---------- Calendars → settings list ---------- */

.cals-subtabs { display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.cals-subtab {
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 2px; font:inherit; font-weight:600; font-size:14.5px; color:var(--muted); cursor:pointer;
}
.cals-subtab:hover { color:var(--text); }
.cals-subtab.is-on { color:var(--brand); border-bottom-color:var(--brand); }

.cals-filters { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.cals-pick { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:9px; padding:4px 10px; }
.cals-pick-label { font-size:13px; color:var(--muted); white-space:nowrap; }
.cals-pick .mini-select { border:0; padding:2px 4px; background:none; }
.cals-search { padding:8px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; min-width:230px; }

.cals-main { display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start; }
.cals-rail { display:flex; flex-direction:column; gap:2px; }
.cals-railbtn {
  appearance:none; border:0; background:none; font:inherit; font-size:14px; text-align:left;
  padding:11px 14px; border-radius:10px; cursor:pointer; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.cals-railbtn:hover { background:var(--line-soft); }
.cals-railbtn.is-on { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.cals-railhead { font-size:17px; font-weight:700; margin:16px 0 6px 14px; }
.cals-pill { margin-left:auto; background:var(--line-soft); border-radius:20px; padding:1px 8px; font-size:12px; color:var(--muted); }
.cals-newgroup {
  appearance:none; border:0; background:var(--brand-soft); color:var(--brand); font:inherit;
  font-weight:600; padding:11px 14px; border-radius:10px; cursor:pointer; margin-top:10px; text-align:center;
}

.cals-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.cals-row {
  display:grid; grid-template-columns:2.2fr 1fr 0.8fr 1fr 0.9fr 1.1fr 0.9fr;
  gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:14px;
}
.cals-row:last-child { border-bottom:0; }
.cals-row.is-head { font-weight:600; color:var(--muted); font-size:13px; background:var(--line-soft); }
.cals-name { font-weight:600; font-size:15px; }
.cals-id {
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); margin-top:3px;
  /* The id is a full uuid and the copy button must stay on its line, so the
     text ellipsises rather than wrapping the button onto a second row. */
  min-width:0;
}
.cals-id > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cals-copy { flex:0 0 auto; }
.cals-copy { appearance:none; border:0; background:none; cursor:pointer; color:var(--dim); font-size:13px; padding:0 2px; }
.cals-copy:hover { color:var(--brand); }
.cals-dim { color:var(--muted); }
.cals-when { font-size:13.5px; }

.cals-chip { border-radius:20px; padding:3px 12px; font-size:12.5px; font-weight:600; }
.cals-chip.is-active { background:#e8f7ee; color:#1b7f4b; }
.cals-chip.is-inactive { background:#fdecec; color:#c0352f; }

.cals-actions { display:flex; gap:4px; }
.cals-act {
  appearance:none; border:0; background:none; cursor:pointer; color:var(--muted);
  font-size:15px; padding:5px 7px; border-radius:7px;
}
.cals-act:hover { background:var(--line-soft); color:var(--brand); }

.cals-notbuilt { border:1px dashed var(--line); border-radius:12px; padding:36px; text-align:center; color:var(--muted); }
.cals-notbuilt-title { font-weight:600; color:var(--text); margin-bottom:6px; }

@media (max-width: 1100px) {
  .cals-main { grid-template-columns:1fr; }
  .cals-row { grid-template-columns:2fr 1fr 1fr; }
  .cals-row > :nth-child(n+4):nth-child(-n+6) { display:none; }
}
.notbuilt { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 70ch; }
.notbuilt p { margin: 0 0 8px; }
.link-url { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.link-url code {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 2px 7px; font-size: 12px; color: var(--text);
}

/* Rooms / Equipment share the settings table, with their own columns. */
.cals-row.res-row { grid-template-columns:2.2fr 1fr 2fr 1fr 0.8fr; }
.cals-blurb { color:var(--muted); font-size:13.5px; max-width:760px; line-height:1.5; }

/* ---------- marketing ---------- */
.mk-layout { display: grid; grid-template-columns: 320px 1fr; gap: 15px; align-items: start; }
.mk-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mk-row:last-child { border-bottom: 0; }
.mk-row:hover, .mk-row.on { background: var(--hover); }
.mk-main { flex: 1 1 auto; min-width: 0; }
.mk-name { font-size: 14px; font-weight: 550; }
.mk-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mk-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.mk-status.sent { background: #e8f5ec; color: #2f9e5e; }
.mk-pane { padding: 20px; min-height: 420px; }
.mk-title { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.mk-field-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 4px; }
.mk-subject { font-size: 14px; font-weight: 500; }
.mk-body {
  font: inherit; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0;
}
.mk-preview { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mk-count { font-size: 15px; font-weight: 600; }
.mk-skips { display: flex; flex-direction: column; gap: 2px; }
.mk-skip { font-size: 12.5px; color: var(--muted); }
.mk-warn { font-size: 12.5px; color: #b9792a; background: #fdf2e2; border-radius: 6px; padding: 7px 10px; }
.mk-sample { margin: 6px 0; }
.mk-preview .btn { align-self: flex-start; margin-top: 6px; }
.mk-sent { margin-top: 18px; padding: 14px 16px; background: #e8f5ec; border-radius: 8px; }
.mk-sent-title { font-weight: 600; color: #2f9e5e; }

@media (max-width: 860px) { .mk-layout { grid-template-columns: 1fr; } }
.manual-draft {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 8px 11px; margin: 5px 0; font-size: 13px; color: var(--text);
  white-space: pre-wrap; max-width: 70ch;
}

/* Service menus: a card per menu, with its ordered services. */
.menu-card { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:16px 18px; margin-bottom:14px; }
.menu-head { display:flex; align-items:center; gap:12px; }
.menu-head .cals-actions { margin-left:auto; }
.menu-url { font-size:12.5px; color:var(--brand); text-decoration:none; }
.menu-url:hover { text-decoration:underline; }
.menu-items { margin-top:12px; border-top:1px solid var(--line-soft); }
.menu-item { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.menu-item:last-child { border-bottom:0; }
.menu-item.is-off { opacity:0.65; }
.menu-pos { width:22px; height:22px; border-radius:50%; background:var(--line-soft); color:var(--muted); font-size:11.5px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.menu-name { font-weight:550; }
.menu-price { margin-left:auto; font-weight:600; }
.menu-warn { color:#c0352f; font-size:12px; }
.menu-move { display:flex; gap:2px; }
.menu-move button:disabled { opacity:0.3; cursor:default; }
.menu-empty { color:var(--muted); font-size:13.5px; margin-top:10px; }

/* ---------- reputation ---------- */
.rv-new { margin-left: 4px; position: relative; top: -9px; font-size: 9.5px; font-weight: 600; background: #f5c542; color: #3d2c00; padding: 1px 5px; border-radius: 4px; }
.rv-subbar { display: flex; align-items: center; gap: 28px; padding: 10px 26px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.rv-subbar-title { font-size: 17px; font-weight: 600; padding-bottom: 10px; }
.rv-subbar .subtabs { flex: 1 1 auto; }
.rv-send { margin-bottom: 8px; }
.rv-panel { padding: 22px 24px; }
.rv-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.rv-sources { min-width: 240px; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.rv-filters-right { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-sections-btn { height: 40px; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.rv-dates { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 40px; }
.rv-dates input { border: 0; padding: 0 12px; font: inherit; color: var(--text); background: transparent; min-width: 150px; }
.rv-dates input + input { border-left: 1px solid var(--line); }
.rv-pop { position: absolute; z-index: 50; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); padding: 6px; }
.rv-pop-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.rv-pop-row:hover { background: var(--bg); }
.rv-content { display: flex; flex-direction: column; gap: 22px; }
.rv-content [hidden] { display: none !important; }

.rv-onboard { display: grid; grid-template-columns: minmax(220px, 1fr) 2.6fr; gap: 28px; border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.rv-wave { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 24px; }
.rv-hi { font-size: 20px; font-weight: 600; margin: 14px 0 8px; }
.rv-onboard-text { color: var(--muted); line-height: 1.5; }
.rv-skip { padding: 0; margin-top: 10px; }
.rv-onboard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rv-onboard-head { font-weight: 600; }
.rv-progress { display: flex; gap: 8px; align-items: center; }
.rv-progress span:not(.rv-progress-n) { width: 38px; height: 6px; border-radius: 999px; background: var(--line); }
.rv-progress span.on { background: var(--brand); }
.rv-progress-n { margin-left: 6px; font-size: 13px; color: var(--muted); }
.rv-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-step { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 14px; background: var(--bg); }
.rv-step:not(.done) { background: transparent; }
.rv-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 11px; flex: none; }
.rv-step.done .rv-check { border-color: var(--brand); color: var(--brand); }
.rv-step.done .rv-step-label { text-decoration: line-through; color: var(--muted); }
.rv-step-label { flex: 1 1 auto; }
.rv-go { padding: 0; white-space: nowrap; }

.rv-section { border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.rv-section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rv-section-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.rv-info { color: var(--muted); font-size: 13px; cursor: help; font-weight: 400; }
.rv-tag { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 1px 7px; border-radius: 999px; }
.rv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.rv-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-stat { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.rv-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; margin-bottom: 12px; }
.rv-ico.amber { background: #fdf0d5; color: #d98a00; }
.rv-ico.blue { background: #e3ecfd; color: #2f6fe4; }
.rv-ico.violet { background: #efe8fd; color: #7c4ddb; }
.rv-ico.green { background: #ddf5e3; color: #1f9d4c; }
.rv-ico.grey { background: var(--bg); color: var(--muted); }
.rv-stat-label { font-size: 14px; color: var(--text); margin-bottom: 6px; }
.rv-stat-row { display: flex; justify-content: space-between; align-items: center; }
.rv-stat-value { font-size: 22px; font-weight: 600; }
.rv-badge { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.rv-badge.up { background: #e3f6e9; color: #1f8f47; }
.rv-badge.down { background: #fde6e4; color: #c0352f; }
.rv-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rv-charts.one { grid-template-columns: 1fr; }
.rv-chart { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; min-width: 0; }
.rv-chart-title { font-weight: 600; margin-bottom: 10px; }
.rv-chart-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; font-size: 13.5px; }
.rv-line { display: block; max-height: 260px; }
.rv-line .rv-axis { fill: var(--muted); font-size: 13px; }
.rv-line .rv-axis-title { fill: var(--muted); font-size: 13.5px; }
.rv-donut { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding: 8px 0; }
.rv-legend { display: grid; gap: 10px 48px; }
.rv-legend-row { display: flex; gap: 8px; align-items: flex-start; }
.rv-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.rv-legend-num { font-weight: 600; font-size: 15px; }
.rv-legend-label { color: var(--muted); font-size: 13px; }
.rv-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rv-bar-row { display: grid; grid-template-columns: 76px 1fr 72px; gap: 10px; align-items: center; font-size: 13px; }
.rv-bar-track { height: 22px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.rv-bar-fill { height: 100%; background: var(--brand); border-radius: 6px; }
.rv-bar-n { text-align: right; color: var(--muted); }
.rv-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; }
.rv-banner-text { font-size: 15px; }
.rv-banner-link { padding: 0; text-decoration: underline; font-size: 15px; color: var(--text); font-weight: 500; }
.rv-banner-x { background: none; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; }

.rv-tabbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rv-tabbar-left { display: flex; gap: 14px; align-items: center; }
.rv-tabbar-title { font-size: 16px; font-weight: 600; }
.rv-table-wrap { overflow-x: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rv-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rv-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rv-table tr:last-child td { border-bottom: 0; }
.rv-strong { font-weight: 500; }
.rv-pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.rv-pill.ok { background: #e3f6e9; color: #1f8f47; }
.rv-pill.info { background: #e3ecfd; color: #2f6fe4; }
.rv-pill.bad { background: #fde6e4; color: #c0352f; }
.rv-notbuilt { padding: 28px; text-align: center; }
.rv-notbuilt-title { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.rv-settings { padding: 22px 24px; max-width: 620px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; align-items: flex-start; }
.rv-settings .field { width: 100%; }
.rv-note { font-size: 12.5px; color: var(--muted); }

.rv-row { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rv-row:last-child { border-bottom: 0; }
.rv-rowstars { color: #e0a33e; white-space: nowrap; }
.rv-starrow { display: inline-flex; gap: 1px; vertical-align: middle; }
.rv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.rv-body { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-response { font-size: 13px; color: var(--muted); background: var(--bg); border-left: 3px solid var(--brand); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.rv-stars { display: flex; gap: 6px; justify-content: center; margin: 6px 0 16px; }
.rv-star { background: none; border: 0; color: var(--line-strong, #cfd4dc); cursor: pointer; line-height: 1; padding: 2px; display: inline-flex; }
.rv-star.on { color: #e0a33e; }
.rv-star:focus-visible { outline: 2px solid var(--brand); border-radius: 4px; }
.rv-share { margin-top: 14px; display: inline-block; text-align: center; text-decoration: none; }

@media (max-width: 900px) {
  .rv-onboard { grid-template-columns: 1fr; }
  .rv-steps, .rv-charts, .rv-stats, .rv-stats.two { grid-template-columns: 1fr; }
  .rv-subbar { flex-wrap: wrap; gap: 12px; padding: 10px 14px 0; }
  .rv-panel { padding: 16px 14px; }
  .rv-sources { min-width: 0; width: 100%; }
  .rv-filters-right { width: 100%; }
  .rv-dates { flex: 1 1 100%; }
  .rv-dates input { min-width: 0; flex: 1 1 0; width: 0; }
  .rv-subbar .subtabs { overflow-x: auto; }
  .rv-head { flex-wrap: wrap; }
  .rv-head .subtabs { overflow-x: auto; max-width: 100%; min-width: 0; }
  .rv-head .subtab { white-space: nowrap; }
}
.ma-filters { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.ma-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ma-table th {
  text-align: left; font-size: 11.5px; font-weight: 650; color: var(--muted);
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ma-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ma-table tr:hover td { background: var(--hover); }
.ma-person { display: flex; align-items: center; gap: 8px; }
.ma-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ma-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.ma-foot .tax-meta { flex: 1; }

/* Drag an event to move it; drag its grip to change the length. */
.calv-ev { cursor: grab; }
.calv-ev:active { cursor: grabbing; }
.calv-grip {
  position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize;
  border-bottom-left-radius:7px; border-bottom-right-radius:7px;
}
.calv-ev:hover .calv-grip { background:rgba(0,0,0,0.12); }
.calv-ev.is-allday .calv-grip { display:none; }

/* Snippets: the tab strip sits inside the card, under its header. */
.card > .subtabs { padding: 0 16px; border-bottom: 1px solid var(--line); }
.ma-filters .input { flex: 1 1 240px; }

/* ---------- bulk actions ---------- */
.ba-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ba-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.ba-sub { color: var(--muted); font-size: 13.5px; }
.ba-card { padding: 22px 16px 14px; }
.ba-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 0 10px 16px; }
.ba-filters-label { color: var(--muted); font-size: 13.5px; }
.ba-dates { height: 30px; }
.ba-dates input { min-width: 0; width: 150px; font-size: 14px; }
.ba-select { height: 30px; min-width: 200px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.ba-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.ba-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ba-table th { text-align: left; font-weight: 600; font-size: 14px; padding: 9px 12px; background: var(--bg); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; }
.ba-table th:last-child, .ba-table td:last-child { border-right: 0; }
.ba-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; }
.ba-table tr:last-child td { border-bottom: 0; }
.ba-label { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-pill { display: inline-block; font-size: 12.5px; padding: 3px 8px; border-radius: 5px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.ba-pill.ok { background: #e3f6e9; color: #1d7a42; }
.ba-pill.info { background: #e3ecfd; color: #2357c6; }
.ba-pill.warn { background: #fdf0d5; color: #9a5b00; }
.ba-pill.bad { background: #fde6e4; color: #b4302a; }
.ba-user { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ba-avatar { width: 22px; height: 22px; border-radius: 50%; background: #fbe3c8; color: #9a5b00; font-size: 10px; font-weight: 600; display: grid; place-items: center; flex: none; }
.ba-when { white-space: nowrap; }
.ba-day { display: inline-block; margin-right: 8px; }
.ba-time { color: var(--muted); font-size: 11.5px; }
.ba-center { text-align: center; }
.ba-icon { background: none; border: 0; color: var(--text); padding: 2px 6px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; }
.ba-icon:hover { background: var(--hover); }
.ba-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px 0; }
.ba-page { color: var(--muted); font-size: 13px; }
.ba-pager { display: flex; gap: 6px; }
.ba-pager button:disabled { opacity: .45; cursor: default; }
.ba-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; }
.ba-menu-item:hover { background: var(--bg); }
.ba-menu-item.danger { color: #b4302a; }
.ba-stats { width: min(520px, calc(100vw - 32px)); }
.ba-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ba-tile { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.ba-tile-n { font-size: 20px; font-weight: 600; }
.ba-tile.ok .ba-tile-n { color: #1d7a42; }
.ba-tile.bad .ba-tile-n { color: #b4302a; }
.ba-tile-l { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.ba-tally { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin-bottom: 14px; }
.ba-tally-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.ba-progress { height: 8px; margin-bottom: 14px; }
.ba-times { display: flex; gap: 20px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.ba-err-head { font-weight: 600; margin: 14px 0 6px; }
.ba-errors { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ba-err { font-size: 12.5px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); color: #b4302a; }
@media (max-width: 760px) {
  .ba-top { flex-direction: column; }
  .ba-dates { flex: 1 1 100%; }
  .ba-dates input { flex: 1 1 0; width: 0; }
  .ba-select { flex: 1 1 100%; min-width: 0; }
  .ba-tiles { grid-template-columns: 1fr 1fr 1fr; }
}

/* Trigger links: the merge-field token and the share-of-clicks bar. */
.ma-table .link-url { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ma-table .link-url code { font-size: 12px; }
.tl-bar { background: var(--line-soft); border-radius: 999px; height: 7px; width: 160px; }
.tl-bar-fill { background: var(--brand); border-radius: 999px; height: 7px; }

/* ---------- Calendars → appointment list view ---------- */

.apt-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.apt-title { font-size:26px; font-weight:700; margin:0; }
.apt-tabs { display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.apt-tab {
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 2px; font:inherit; font-weight:600; font-size:14.5px; color:var(--muted); cursor:pointer;
}
.apt-tab:hover { color:var(--text); }
.apt-tab.is-on { color:var(--brand); border-bottom-color:var(--brand); }

.apt-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.apt-barlabel { font-size:13px; color:var(--muted); }

.apt-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.apt-row {
  display:grid; grid-template-columns:var(--cols); gap:14px; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--line-soft); font-size:14px;
}
.apt-row:last-child { border-bottom:0; }
.apt-row:not(.is-head) { cursor:pointer; }
.apt-row:not(.is-head):hover { background:var(--brand-soft); }
.apt-row.is-head {
  font-weight:600; color:var(--muted); font-size:12px; background:var(--line-soft);
  text-transform:uppercase; letter-spacing:0.03em;
}
.apt-num { color:var(--dim); font-size:13px; }
.apt-cell-title { font-weight:600; }

.apt-chip { border-radius:20px; padding:3px 11px; font-size:12px; font-weight:600; text-transform:capitalize; }
.apt-chip.st-SCHEDULED { background:var(--brand-soft); color:var(--brand); }
.apt-chip.st-CONFIRMED { background:#e8f7ee; color:#1b7f4b; }
.apt-chip.st-SHOWED    { background:#e8f7ee; color:#1b7f4b; }
.apt-chip.st-NO_SHOW   { background:#fff4e5; color:#9a5b00; }
.apt-chip.st-CANCELLED { background:#fdecec; color:#c0352f; }

.apt-pager { display:flex; align-items:center; gap:10px; padding:14px 2px; font-size:13.5px; }
.apt-pagenum { color:var(--muted); min-width:120px; text-align:center; }

.apt-empty { text-align:center; padding:56px 24px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.apt-empty-art { font-size:46px; line-height:1; margin-bottom:14px; opacity:0.55; }
.apt-empty-title { font-size:17px; font-weight:600; margin-bottom:6px; }
.apt-empty .btn { margin-top:16px; }

@media (max-width: 900px) {
  .apt-row { grid-template-columns:40px 1.6fr 1fr; }
  .apt-row > :nth-child(n+4) { display:none; }
}

/* Panel rows that carry an action on the right (followers, workflow runs). */
.conv-detail-sec .conv-opp { align-items: center; gap: 8px; }
.conv-detail-sec .ma-person { gap: 7px; }

/* Smart lists sit beside the scope tabs; a broken one says so. */
.apt-tab-add { color:var(--brand); font-weight:600; }
.apt-tab.is-broken { color:#c0352f; }
.apt-tab.is-broken::after {
  content:''; display:inline-block; width:1em; height:1em; margin-left:4px; vertical-align:-0.15em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.apt-active {
  display:inline-flex; align-items:center; gap:4px; background:var(--brand-soft);
  color:var(--brand); border-radius:20px; padding:3px 6px 3px 12px; font-size:12.5px; font-weight:600;
}
.btn.ghost.is-on { border-color:var(--brand); color:var(--brand); }

/* ---------------------------------------------------------------------------
   Sub-account dashboard.

   The reference stacks a dozen widgets of very different shapes down one
   column, so the spacing lives on a wrapper rather than on each card: a
   `.card` that sets its own margin would carry it onto every other screen
   that uses one.
--------------------------------------------------------------------------- */
.dash > .card, .dash > .grid-2, .dash > .grid-3, .dash > .eff-row { margin-bottom: 15px; }
.dash > :last-child { margin-bottom: 0; }

/* Up to three pickers in one header — Tasks has status, sort and assignee. */
.widget-controls { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.widget-controls .mini-select { max-width: 150px; }

/* The reference's empty state. */
.no-data {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 180px; color: var(--muted); font-size: 13.5px;
}
.no-data .disc {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}

/* A widget whose subject has no connector here. Dashed, because a solid card
   full of zeroes reads as a measurement and this is the absence of one. */
.not-wired {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; padding: 18px 14px; color: var(--muted); font-size: 13px;
  line-height: 1.55; border: 1px dashed var(--line); border-radius: 9px;
}
.not-wired .nw-mark { font-size: 20px; color: var(--dim); line-height: 1; }
.not-wired .nw-line { max-width: 560px; }

/* ----- funnel ----- */
.funnel { font-size: 13px; }
.funnel-head, .funnel-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px 104px; gap: 8px;
}
.funnel-head { align-items: end; margin-bottom: 9px; }
.funnel-scale {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.funnel-cap { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.25; }
.funnel-row { margin-bottom: 5px; align-items: stretch; }
.funnel-bar-cell { display: flex; }
.funnel-bar {
  padding: 9px 12px; border-radius: 3px; overflow: hidden;
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  /* A floor, so the stage name stays readable when the proportion is tiny.
     Below it the length stops being a measurement, which is why an empty
     stage is also drawn grey — the colour carries "none", not the width. */
  min-width: 132px;
}
/* A stage nothing has reached is grey rather than a sliver of brand colour:
   full width with no fill says "empty", a 7% blue stub says "nearly none". */
.funnel-bar.empty { background: var(--line-soft); border-left-color: var(--line); }
.funnel-bar .nm { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-bar .vl { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Pointing down the funnel: the percentage is about the step to the next row,
   not about the row it sits beside. */
.funnel-chev {
  background: var(--line-soft); display: grid; place-items: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums; padding-bottom: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}

/* ----- tasks widget ----- */
.dash-tasks { display: flex; flex-direction: column; }
.dash-task {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 2px; border-bottom: 1px solid var(--line-soft);
}
.dash-task:last-child { border-bottom: 0; }
.dash-task-main { flex: 1; min-width: 0; }
.dash-task-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dash-task-title { font-weight: 550; font-size: 13.5px; }
.dash-task-body { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.dash-task-meta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px;
  color: var(--muted); font-size: 12.5px;
}
.due-pill {
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.due-pill.over { border-color: #f3c6c6; color: #c0352f; background: #fdf3f3; }

/* The kebab's menu. Fixed, so a widget that scrolls does not clip it. */
.row-menu {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(16,24,40,.14); padding: 5px; min-width: 160px; z-index: 60;
}
.row-menu-item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text);
}
.row-menu-item:hover { background: var(--hover); }
.row-menu-item.danger { color: #c0352f; }

/* ----- manual actions widget ----- */
.ma-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  text-align: center; padding: 22px 0 10px;
}
.ma-stat .cap { color: var(--muted); font-size: 13px; }
.ma-stat .big { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; margin-top: 6px; }
.ma-link { display: flex; gap: 7px; margin: 10px auto 0; }

/* ----- lead source report ----- */
.lead-n { font-weight: 600; color: var(--brand); }
.lead-v { color: var(--dim); font-size: 12px; }
.lead-unknown { font-style: italic; color: var(--muted); }
.page-num {
  min-width: 26px; text-align: center; border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 7px; font-size: 12.5px; color: var(--text);
}

/* ----- Google Business Profile ----- */
.gbp-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
.gbp-total { text-align: center; }
.gbp-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.gbp-grid .cap { color: var(--muted); font-size: 12.5px; }
.gbp-grid .big { font-size: 24px; font-weight: 650; margin-top: 2px; }
.gbp-total .big { font-size: 34px; }
.gbp-cell { text-align: center; }

/* ----- sales efficiency ----- */
/* A third of the row, as in the reference, rather than a lone card stretched
   across the full width: three figures do not need 1400px, and the widgets
   above it are all a third or a half wide. */
.eff-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.eff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 14px; padding: 14px 0 6px; }
.eff-stat .cap { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.eff-stat .big {
  font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.eff-note { color: var(--dim); font-size: 12.5px; margin-top: 14px; }

@media (max-width: 1000px) {
  .eff-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .funnel-head, .funnel-row { grid-template-columns: minmax(0, 1fr) 64px 72px; }
  .gbp-grid { grid-template-columns: minmax(0, 1fr); }
  .gbp-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}