/* The dashboard's own styles, on top of the design system: Dolce Vita's
   colours, the logo, the charts, the filter row and a few text helpers.

   The four colours every design system colour is worked out from, measured on
   dolcevitawellnessspa.com (2026-10-07): the near-black of its dark sections,
   its warm white, the tan of its buttons and the olive of its logo. The light
   theme is derived from the same four by the design system. */
:root { --colour-ground: #171717; --colour-ink: #f7f5f3; --colour-primary: #bca788; --colour-accent: #777769; }

/* The logo: a mask, so it takes the brand tile's ink in either theme */
.rail-brand-mark {
  width: 26px; height: 26px; font-size: 0; color: transparent;
  background: var(--on-primary-cont);
  -webkit-mask: url(/dashboard/logo.png) center / contain no-repeat;
  mask: url(/dashboard/logo.png) center / contain no-repeat;
}

/* Chart colours are their own three slots, olive, slate and tan: stronger
   steps of the brand's hues (slate is the site's heading colour), because the
   brand colours themselves are too muted to tell apart as chart colours. These
   pass every check in both themes (dataviz validate_palette.js, all pairs):
   dark against #171717, light against #f7f7f7. The design system's script sets
   data-theme="light" for the light theme, including when it follows the device. */
:root { --chart-1: #637200; --chart-2: #1c8cb4; --chart-3: #cc7c37; }
[data-theme="light"] { --chart-1: #586600; --chart-2: #006e94; --chart-3: #bd7221; }

.dim { color: var(--dim); }
.is-mono { font-family: var(--mono); font-size: var(--text-4); }
.is-nowrap { white-space: nowrap; }

.dash-filters { align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.dash-filters.is-live .dash-apply { display: none; }
.dash-filter { display: inline-flex; align-items: center; }
.side-label .hint, .subnav-title .hint { text-transform: none; letter-spacing: 0; }
.filter-check, .filter-select { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-6); color: var(--on-variant); }
.dash-note { margin: 0 0 var(--space-3); font-size: var(--text-4); color: var(--dim); }
.dash-table td { vertical-align: top; }
/* The design system's table-wrap keeps the wheel to itself (overscroll contain), for a
   table in a fixed-height panel. Ours grow to full height, so there is nothing for the
   wheel to scroll there, and the page behind must get it, or it never scrolls. */
.screen-main .table-wrap { overscroll-behavior: auto; }
.dash-subtiles { margin-bottom: var(--space-3); }

/* The visitor list: the funnel's steps read left to right, so each step column's head
   carries the arrow from the one before it */
.dash-journeys th.is-step + th.is-step::before { content: "→ "; color: var(--dim); }
.dash-journeys td .chip { margin: 0 4px 4px 0; }
.dash-booked + .dash-booked { margin-top: var(--space-1); }

/* The campaign column is the design system's .subnav, made of links */
a.subnav-item { text-decoration: none; }
.dash-nav-empty { margin: var(--space-2) var(--control-x); font-size: var(--text-4); color: var(--dim); }
@media (max-width: 720px) {
  .panel.is-active:has(> .dash-campaigns) { flex-direction: column; }
  .dash-campaigns { flex: none; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* The People screen: the auth part's own markup (forms, sections, plain buttons),
   laid out as cards with the design system's tokens and its .ghost / .primary looks */
.dash-people { max-width: 780px; }
.dash-lede { margin: 0 0 var(--space-4); color: var(--on-variant); }
.dash-people h2 { flex-basis: 100%; margin: 0 0 var(--space-1); font-size: var(--text-8); }
.dash-people > form, .dash-people .person {
  margin-bottom: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-low);
}
.dash-people form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.dash-people .person > form, .dash-people li form { display: inline-flex; margin: var(--space-2) var(--space-2) 0 0; padding: 0; border: 0; background: none; }
.dash-people label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-5); color: var(--on-variant); }
.dash-people .person > p { margin: 0; font-size: var(--text-4); color: var(--dim); }
.dash-people .person ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.dash-people .person li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) 0; border-top: 1px solid var(--rule); font-size: var(--text-4); color: var(--on-variant); }
.dash-people li form { margin: 0; }
.dash-people input[readonly] { width: 100%; font-family: var(--mono); }
.dash-people button {
  display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--control-x);
  border: 1px solid var(--control-edge); border-radius: var(--radius-pill); background: transparent;
  color: var(--outline); font: inherit; font-size: var(--text-5); cursor: pointer;
}
.dash-people button:hover { color: var(--on); border-color: var(--outline); }
.dash-people button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dash-people > form[action$="/add"] button { border: 0; background: var(--primary); color: var(--on-primary); font-weight: 600; }
.dash-people > form[action$="/add"] button:hover { background: var(--on-primary-cont); }
.dash-people form[action$="/remove"] button { color: var(--error); border-color: color-mix(in srgb, var(--error) 75%, transparent); }

/* The Flow screen: a flow chart of steps joined by arrows, split where two
   things happen side by side and branched where a match has three outcomes */
.flow { max-width: 760px; }
.flow-step, .flow-outcome { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-low); }
.flow-step-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.flow-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-size: var(--text-2); font-weight: 700; }
.flow-where { padding: 1px var(--space-2); border-radius: var(--radius-pill); border: 1px solid currentColor; font-size: var(--text-2); }
.flow-where.is-ads { color: var(--chart-2); }
.flow-where.is-funnel { color: var(--chart-1); }
.flow-where.is-blvd { color: var(--chart-3); }
.flow-where.is-server { color: var(--on-variant); }
.flow-where.is-ghl { color: var(--primary); }
.flow-where.is-dash { color: var(--dim); }
.flow-title { font-weight: 600; color: var(--on); }
.flow-text { margin: var(--space-1) 0 0; font-size: var(--text-4); color: var(--on-variant); }
.flow-arrow { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; }
.flow-arrow::before { content: ""; position: absolute; top: 0; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; background: var(--outline); }
.flow-arrow::after { content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--outline); }
.flow-arrow span { position: relative; z-index: 1; padding: 0 var(--space-2); background: var(--surface); font-size: var(--text-2); color: var(--dim); }
.flow-split, .flow-branch { display: grid; gap: var(--space-3); }
.flow-split { grid-template-columns: 1fr 1fr; }
.flow-branch { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .flow-split, .flow-branch { grid-template-columns: 1fr; } }

/* The chart's legend, with the Line / Bars switch at its right */
.dash-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.dash-chart-head .chart-legend { margin-bottom: 0; }
a.segmented-option { text-decoration: none; }
a.segmented-option[aria-current] { background: var(--primary-cont); color: var(--on-primary-cont); }
.dash-table td:nth-child(2) { min-width: 14em; }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-4); color: var(--on-variant); }
.chart-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-box { position: relative; }
.chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart-tick { fill: var(--faint); font-size: 12px; font-family: inherit; }
.chart-hit { fill: transparent; }
.chart-day:hover .chart-hit { fill: var(--surface-low); }
.chart-cross { stroke: var(--outline); stroke-width: 1; opacity: 0; }
.chart-day:hover .chart-cross { opacity: 1; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--surface); stroke-width: 2; }

.chart-dot.s-0, .chart-swatch.s-0 { fill: var(--outline); background: var(--outline); }
.chart-line.s-0 { stroke: var(--outline); }
.chart-mark.s-1, .chart-dot.s-1, .chart-swatch.s-1 { fill: var(--chart-1); background: var(--chart-1); }
.chart-mark.s-2, .chart-dot.s-2, .chart-swatch.s-2 { fill: var(--chart-2); background: var(--chart-2); }
.chart-mark.s-3, .chart-dot.s-3, .chart-swatch.s-3 { fill: var(--chart-3); background: var(--chart-3); }
.chart-line.s-1 { stroke: var(--chart-1); }
.chart-line.s-2 { stroke: var(--chart-2); }
.chart-line.s-3 { stroke: var(--chart-3); }

.chart-tip {
  position: fixed; z-index: 50; pointer-events: none; min-width: 150px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface-cont); box-shadow: var(--shadow-snackbar); font-size: var(--text-4); color: var(--on);
}
.chart-tip-title { margin-bottom: 4px; color: var(--dim); }
.chart-tip-row { display: flex; align-items: center; gap: var(--space-2); }
.chart-tip-row strong { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

.chart-table { margin-top: var(--space-3); }
.chart-table summary { cursor: pointer; font-size: var(--text-4); color: var(--dim); }
.chart-table .table-wrap { margin-top: var(--space-2); }

@media (forced-colors: active) {
  .chart-mark, .chart-dot, .chart-swatch { fill: CanvasText; background: CanvasText; }
  .chart-line { stroke: CanvasText; }
}