/* =============================================================
   Clover Dashboard — local styles
   Builds on colors_and_type.css (Inter + green tones).
   ============================================================= */

:root {
  /* Brand-only accents — navy = structural, green = data/charts (no blue/purple) */
  --src-dsp:   #041e3f;        /* Campaign — navy (structural) */
  --src-dsp-50:  #f2f4f5;
  --src-dsp-100: #d7e0ea;
  --src-hat:   #00d59f;        /* Website — brand green */
  --src-hat-50:  #f2fdfa;
  --src-hat-100: #ccf7ec;
  --src-attr:  #00d59f;        /* Attribution — brand green */
  --src-attr-50:  #f2fdfa;
  --src-attr-100: #ccf7ec;
  --src-platform: #52525b;     /* metadata neutral */

  --freshness-fresh:    #008a67;
  --freshness-fresh-bg: #ccf7ec;
  --freshness-stale:    #b07000;
  --freshness-stale-bg: #fff6e1;

  --hdr-h: 64px;
  --rail-h: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted-foreground);
}
.eyebrow--src-dsp  { color: var(--src-dsp); }
.eyebrow--src-hat  { color: var(--src-hat); }
.eyebrow--src-attr { color: var(--color-primary-accessible); }
.eyebrow--src-platform { color: var(--src-platform); }

/* ============================================================
   Top brand rail
   ============================================================ */
.brand-rail {
  height: var(--rail-h);
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ============================================================
   Header
   ============================================================ */
.app-header {
  background: var(--color-navy);
  border-bottom: 1px solid var(--color-navy-600);
  position: sticky;
  top: var(--rail-h);
  z-index: 50;
}

/* Navy header — dark treatment for controls (scoped: .hdr-select is reused in white bands) */
.app-header .brand-mark__product {
  color: rgba(255,255,255,.55);
  border-left-color: rgba(255,255,255,.16);
}
.app-header .hdr-divider { background: rgba(255,255,255,.16); }
.app-header .hdr-select {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.app-header .hdr-select:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.app-header .hdr-select__label { color: rgba(255,255,255,.55); }
.app-header .hdr-select__val { color: #fff; }
.app-header .hdr-select__caret { color: rgba(255,255,255,.6); }
.app-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
}
.brand-mark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.brand-mark__logo {
  height: 26px;
  width: auto;
  display: block;
}
.brand-mark__dot {
  width: 26px; height: 26px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  position: relative;
}
/* Tiny clover-leaf glyph */
.brand-mark__dot svg { width: 16px; height: 16px; }
.brand-mark__name {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--color-foreground);
}
.brand-mark__product {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted-foreground);
  padding-left: 10px;
  border-left: 1px solid var(--color-border-muted);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.hdr-divider {
  width: 1px; height: 26px;
  background: var(--color-border-muted);
}

.hdr-select {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 150ms, background-color 150ms;
}
.hdr-select { white-space: nowrap; }
.hdr-select:hover { border-color: var(--color-neutral-400); background: var(--color-neutral-50); }
.hdr-select__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted-foreground);
  font-weight: 600;
}
.hdr-select__val { font-weight: 600; color: var(--color-foreground); }
.hdr-select__caret { color: var(--color-muted-foreground); }

.hdr-spacer { flex: 1; }

.hdr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 12px;
  color: var(--color-muted-foreground);
  font-weight: 500;
  white-space: nowrap;
}
.hdr-pill:hover { border-color: var(--color-neutral-400); color: var(--color-foreground); }
.hdr-pill__dot {
  width: 6px; height: 6px;
  background: var(--freshness-fresh);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(2,132,99,0.16);
}

.hdr-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--color-primary-700);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Pivot picker
   ============================================================ */
.pivot-row {
  background: #fff;
  border-bottom: 1px solid var(--color-border-muted);
  position: sticky;
  top: calc(var(--rail-h) + 65px);
  z-index: 40;
}
.pivot-row__inner {
  padding: 14px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pivot-row__or {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--color-neutral-400);
  padding: 0 4px;
}

.menu--wide { min-width: 320px; }

.pivot-chip--preset {
  background: var(--color-neutral-50);
  border-color: var(--color-border-muted);
}
.pivot-chip--preset:hover { background: var(--color-neutral-100); }
.pivot-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--color-foreground);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 150ms, border-color 150ms;
}
.pivot-chip:hover { background: var(--color-neutral-50); }
.pivot-chip--empty {
  border-style: dashed;
  border-color: var(--color-neutral-400);
  color: var(--color-muted-foreground);
  font-weight: 500;
}
.pivot-chip__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted-foreground);
  font-weight: 600;
}
.pivot-chip__source {
  display: inline-flex; align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.src--dsp  { background: var(--src-dsp-50);  color: var(--src-dsp); }
.src--hat  { background: var(--src-hat-50);  color: var(--src-hat); }
.src--attr { background: var(--src-attr-50); color: var(--color-primary-accessible); }
.src--platform { background: var(--color-neutral-100); color: var(--src-platform); }
.src--cross    { background: #fff3d1; color: #8a6a00; }

.pivot-cross {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-neutral-400);
}
.pivot-chip-add {
  width: 32px; height: 32px;
  border: 1px dashed var(--color-neutral-400);
  border-radius: 8px;
  background: #fff;
  color: var(--color-muted-foreground);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pivot-chip-add:hover { border-color: var(--color-foreground); color: var(--color-foreground); }

/* Collapsed pivot row */
.pivot-row--collapsed .pivot-row__inner { padding: 8px 28px; }
.pivot-row--collapsed .pivot-chip { height: 28px; font-size: 12px; padding: 0 10px; gap: 6px; }
.pivot-row--collapsed .pivot-chip-add { width: 24px; height: 24px; font-size: 14px; }

/* ============================================================
   Breadcrumb + filter row
   ============================================================ */
.crumb-row {
  background: #fff;
  border-bottom: 1px solid var(--color-border-muted);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--color-muted-foreground);
}
.crumb__seg {
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
}
.crumb__seg--active {
  color: var(--color-foreground);
  font-weight: 600;
  background: var(--color-primary-50);
}
.crumb__seg:hover { background: var(--color-neutral-50); color: var(--color-foreground); cursor: pointer; }
.crumb__sep { color: var(--color-neutral-400); font-size: 11px; }

.crumb-spacer { flex: 1; }

.crumb-input {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border-muted);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--color-muted-foreground);
  min-width: 200px;
}
.crumb-input:hover, .crumb-input:focus-within {
  border-color: var(--color-neutral-400);
  color: var(--color-foreground);
}
.crumb-input input {
  border: none; outline: none; background: transparent;
  font-size: 12px; flex: 1;
  color: var(--color-foreground);
}

/* ============================================================
   Bands
   ============================================================ */
.band {
  border-top: 1px solid var(--color-border-muted);
  background: #fff;
  position: relative;
}
.band--first { border-top: none; }
.band__hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 28px 0;
}
.band__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.band__tag {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
}
.band__source-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 30px;
  background: var(--color-neutral-50);
  padding: 2px;
  gap: 0;
}
.band__source-toggle button {
  background: transparent;
  border: none;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted-foreground);
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill);
}
.band__source-toggle button:hover { color: var(--color-foreground); }
.band__source-toggle button.active {
  background: #fff;
  color: var(--color-foreground);
  box-shadow: var(--shadow-sm);
}
.band__source-toggle button.active--dsp  { color: var(--src-dsp); }
.band__source-toggle button.active--hat  { color: var(--src-hat); }
.band__source-toggle button.active--attr { color: var(--color-primary-accessible); }
.band__source-toggle__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.band__hdr-spacer { flex: 1; }
.band__hdr-tools {
  display: flex; align-items: center; gap: 10px;
}

.band__freshness {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
}
.band__freshness--fresh {
  background: var(--freshness-fresh-bg);
  color: var(--freshness-fresh);
}
.band__freshness--stale {
  background: var(--freshness-stale-bg);
  color: var(--freshness-stale);
}
.band__freshness__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.95;
}
.band__freshness--fresh .band__freshness__dot { box-shadow: 0 0 0 3px rgba(2,132,99,0.18); }
.band__freshness--stale .band__freshness__dot { box-shadow: 0 0 0 3px rgba(176,112,0,0.18); }

.band__body {
  padding: 16px 28px 24px;
}

.band__caption {
  font-size: 11px;
  color: var(--color-muted-foreground);
  margin-top: 10px;
}

/* Side rail — navy structural accent (brand) */
.band--dsp  { box-shadow: inset 3px 0 0 var(--color-navy); }
.band--hat  { box-shadow: inset 3px 0 0 var(--color-navy); }
.band--attr { box-shadow: inset 3px 0 0 var(--color-navy); }

.tag--dsp  { background: var(--src-dsp-50);  color: var(--src-dsp); }
.tag--hat  { background: var(--src-hat-50);  color: var(--src-hat); }
.tag--attr { background: var(--src-attr-50); color: var(--color-primary-accessible); }

/* ============================================================
   Band 1 — Campaign metric grid
   ============================================================ */
.metric-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-border-muted);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.metric-grid--6 { grid-template-columns: repeat(6, 1fr); }
.metric-grid--4 { grid-template-columns: repeat(4, 1fr); }
.metric-grid + .metric-grid { margin-top: 12px; }

.metric {
  padding: 14px 16px;
  border-right: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
}
.metric:nth-child(6n) { border-right: none; }
.metric-grid--4 .metric:nth-child(4n) { border-right: none; }
.metric:last-child { border-right: none; }

.metric__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
}
.metric__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.metric__delta {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.metric__delta--pos { color: var(--color-positive-dark); }
.metric__delta--neg { color: var(--color-negative-dark); }
.metric__delta--muted { color: var(--color-muted-foreground); }
.metric__note {
  font-size: 10px;
  color: var(--color-muted-foreground);
  font-style: italic;
}
.metric--muted .metric__value { color: var(--color-neutral-400); }

/* ============================================================
   Band 2 — Website metric with stacked progress bars
   ============================================================ */
.hat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hat-card {
  border: 1px solid var(--color-border-muted);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: #fff;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms, box-shadow 150ms;
}
.hat-card:hover {
  border-color: var(--color-neutral-400);
  box-shadow: var(--shadow-md);
}
.hat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
}
.hat-card__total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hat-card__bars {
  position: relative;
  height: 8px;
  background: var(--color-primary-100);
  border-radius: 4px;
  overflow: hidden;
}
.hat-card__bar-ad {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-primary-600);
  border-radius: 4px;
}
.hat-card__sub {
  font-size: 11px;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.hat-card__sub strong { color: var(--color-primary-700); font-weight: 700; }

/* ============================================================
   Band 3 — Attribution AMC + Polk
   ============================================================ */
.attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.attr-card {
  border: 1px solid var(--color-border-muted);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
}
.attr-card__hdr {
  display: flex; align-items: center; justify-content: space-between;
}
.attr-card__title {
  display: flex; align-items: baseline; gap: 10px;
}
.attr-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.attr-card__meth {
  font-size: 11px;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-step {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-muted);
}
.funnel-step:last-child { border-bottom: none; padding-bottom: 0; }
.funnel-step__label {
  font-size: 13px;
  font-weight: 500;
}
.funnel-step__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.funnel-step__rate {
  font-size: 11px;
  color: var(--color-primary-accessible);
  background: var(--src-attr-50);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.funnel-bar {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--src-attr-50);
  border-radius: 3px;
  overflow: hidden;
}
.funnel-bar__fill {
  height: 100%;
  background: var(--src-attr);
  border-radius: 3px;
}

.polk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.polk-cell {
  padding: 12px;
  border: 1px solid var(--color-border-muted);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--color-bg);
}
.polk-cell__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-muted-foreground);
}
.polk-cell__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.polk-cell__sub {
  font-size: 11px;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.polk-cell--pos .polk-cell__sub { color: var(--color-positive-dark); font-weight: 600; }

/* ============================================================
   Pivot matrix view (Strategy × Media Type)
   ============================================================ */
.matrix-wrap {
  border: 1px solid var(--color-border-muted);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.matrix-table th, .matrix-table td {
  padding: 10px 12px;
  text-align: right;
  font-size: 13px;
  border-right: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  position: relative;
}
.matrix-table th:first-child, .matrix-table td:first-child { text-align: left; }
.matrix-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-border-muted);
}
.matrix-table tbody td.row-name {
  font-weight: 600;
  font-size: 13px;
}
.matrix-table tbody tr:last-child td { border-bottom: none; }
.matrix-table tbody td:last-child, .matrix-table thead th:last-child { border-right: none; }
.matrix-cell { font-weight: 500; }
.matrix-cell--zero { color: var(--color-neutral-400); }
.matrix-cell__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-primary);
  z-index: 0;
}
.matrix-cell__txt { position: relative; z-index: 1; }
.matrix-row-total { font-weight: 700; background: var(--color-neutral-50); }

/* ============================================================
   Widget grid (per-band)
   ============================================================ */
.band-widgets {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-border-muted);
}
.band-widgets__hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.band-widgets__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.band-widgets__add {
  height: 28px;
}

.widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.widget {
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: 10px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 280px;
  transition: border-color 150ms, box-shadow 150ms;
}
.widget:hover {
  border-color: var(--color-neutral-400);
  box-shadow: var(--shadow-sm);
}
.widget__hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.widget__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.widget__sub {
  font-size: 11px;
  color: var(--color-muted-foreground);
  margin-top: 2px;
}
.widget__menu {
  border: none;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 16px;
  width: 24px; height: 24px;
  border-radius: 6px;
}
.widget__menu:hover { background: var(--color-neutral-50); color: var(--color-foreground); }

.widget__body { flex: 1; display: flex; flex-direction: column; }

/* Bar list (horizontal) */
.barlist { display: flex; flex-direction: column; gap: 8px; }
.barlist__row {
  display: grid;
  grid-template-columns: 160px 1fr 64px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.barlist__name { font-weight: 500; }
.barlist__track {
  position: relative;
  height: 14px;
  background: var(--color-neutral-100);
  border-radius: 4px;
  overflow: hidden;
}
.barlist__fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 4px;
}
.barlist__fill--dsp  { background: var(--src-dsp); }
.barlist__fill--attr { background: var(--src-attr); }
.barlist__fill--neg  { background: var(--color-negative-dark); }
.barlist__fill--hat  { background: var(--src-hat); }
.barlist__val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* Stacked bar list (ad vs organic) */
.barlist__stack {
  display: flex;
  height: 14px;
  background: var(--color-neutral-100);
  border-radius: 4px;
  overflow: hidden;
}
.barlist__stack-ad      { background: var(--src-hat); }
.barlist__stack-org     { background: var(--src-hat-100); }

.widget__legend {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px;
  color: var(--color-muted-foreground);
  margin-top: 6px;
}
.widget__legend-dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 5px;
  vertical-align: -1px;
}

/* Geo map widget */
.geomap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
  border: 1px solid var(--color-border-muted);
  border-radius: 8px;
  overflow: hidden;
}
.geomap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.geomap__dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.geomap__dot--green { background: var(--src-attr); box-shadow: 0 0 0 2px rgba(4,214,161,0.28); }
.geomap__dot--red   { background: var(--color-negative-dark); box-shadow: 0 0 0 2px rgba(180,35,24,0.18); }
.geomap__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.geomap__badge .tabular { font-weight: 700; margin-right: 4px; }

.widget--add {
  background: transparent;
  border: 1px dashed var(--color-border-muted);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--color-muted-foreground);
  min-height: 110px;
}
.widget--add:hover { border-color: var(--color-foreground); color: var(--color-foreground); background: #fff; }
.widget--add__plus { font-size: 22px; line-height: 1; }
.widget--add__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* ============================================================
   Dimension picker dropdown
   ============================================================ */
.dim-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 520px;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 540px;
  display: flex;
  flex-direction: column;
}
.dim-picker__search {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-muted);
}
.dim-picker__search input {
  flex: 1; border: none; outline: none;
  font-size: 14px;
  color: var(--color-foreground);
}
.dim-picker__search input::placeholder { color: var(--color-neutral-400); }
.dim-picker__search-icon { color: var(--color-muted-foreground); font-size: 14px; }
.dim-picker__esc {
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--color-border-muted);
  border-radius: 4px;
  color: var(--color-muted-foreground);
  font-family: ui-monospace, monospace;
}
.dim-picker__body {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}
.dim-group { padding: 6px 0; }
.dim-group__title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-muted-foreground);
  padding: 8px 14px 4px;
}
.dim-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  align-items: center;
}
.dim-item:hover { background: var(--color-primary-50); }
.dim-item--selected { background: var(--color-primary-100); }
.dim-item--selected:hover { background: var(--color-primary-100); }
.dim-item__name {
  font-size: 13px;
  font-weight: 600;
}
.dim-item__alt {
  font-style: italic;
  color: var(--color-muted-foreground);
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
}
.dim-item__desc {
  font-size: 11px;
  color: var(--color-muted-foreground);
}
.dim-item__source {
  display: inline-flex; align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dim-picker__footer {
  border-top: 1px solid var(--color-border-muted);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--color-muted-foreground);
  background: var(--color-bg);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.dim-picker__footer-kbd {
  display: inline-flex; gap: 4px;
}
.dim-picker__footer-kbd span {
  border: 1px solid var(--color-border-muted);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  background: #fff;
}

/* dropdowns generic */
.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 60;
  padding: 4px 0;
  max-height: 360px;
  overflow-y: auto;
}
.menu__item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.menu__item:hover { background: var(--color-primary-50); }
.menu__item--active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
}
.menu__item-sub {
  font-size: 11px;
  color: var(--color-muted-foreground);
  margin-left: 12px;
}
.menu__sep {
  height: 1px;
  background: var(--color-border-muted);
  margin: 4px 0;
}
.menu__header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-muted-foreground);
  padding: 8px 14px 4px;
}

/* Misc */
.relative { position: relative; }
.icon-svg { width: 14px; height: 14px; flex-shrink: 0; }
.icon-svg--12 { width: 12px; height: 12px; }
.icon-svg--16 { width: 16px; height: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

/* Footer */
.app-footer {
  padding: 24px 28px;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  border-top: none;
  background: var(--color-navy);
  display: flex; justify-content: space-between;
}

/* ============================================================
   Search-menu (advertiser picker)
   ============================================================ */
.menu--search {
  width: 280px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 360px;
}
.menu__search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-muted);
}
.menu__search input {
  flex: 1; border: none; outline: none;
  font-size: 13px;
  color: var(--color-foreground);
  background: transparent;
}
.menu__search-icon { color: var(--color-muted-foreground); }
.menu__body {
  overflow-y: auto;
  padding: 4px 0;
  flex: 1;
}
.menu__empty {
  padding: 18px 14px;
  font-size: 12px;
  color: var(--color-muted-foreground);
  text-align: center;
}

/* ============================================================
   Date Range Picker
   ============================================================ */
.dp-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border-muted);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.dp-sidebar {
  width: 156px;
  padding: 10px 8px;
  border-right: 1px solid var(--color-border-muted);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-shortcut {
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  color: var(--color-foreground);
  cursor: pointer;
}
.dp-shortcut:hover { background: var(--color-neutral-100); }
.dp-shortcut--active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: 600;
}
.dp-shortcut--muted { color: var(--color-muted-foreground); font-weight: 500; }
.dp-sidebar-sep { height: 1px; background: var(--color-border-muted); margin: 6px 0; }

.dp-cal {
  display: flex;
  flex-direction: column;
}
.dp-cal-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-muted);
}
.dp-range-display {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.dp-nav {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-border-muted);
  background: #fff;
  font-size: 16px; line-height: 1;
  color: var(--color-foreground);
  cursor: pointer;
}
.dp-nav:hover { background: var(--color-neutral-50); border-color: var(--color-neutral-400); }
.dp-cal-body {
  display: flex;
  gap: 24px;
  padding: 12px 16px 4px;
}
.dp-month {
  width: 224px;
}
.dp-month__hdr {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0 8px;
}
.dp-dow, .dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.dp-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-align: center;
  padding-bottom: 4px;
}
.dp-cell {
  height: 30px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
  cursor: pointer;
  border-radius: 0;
  position: relative;
}
.dp-cell--empty { cursor: default; }
.dp-cell:not(.dp-cell--empty):hover {
  background: var(--color-neutral-100);
}
.dp-cell--in {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border-radius: 0;
}
.dp-cell--start, .dp-cell--end {
  background: var(--color-primary) !important;
  color: #fff;
  font-weight: 700;
}
.dp-cell--start { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.dp-cell--end   { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.dp-cell--today:not(.dp-cell--start):not(.dp-cell--end) {
  outline: 1px solid var(--color-primary);
  outline-offset: -3px;
  border-radius: 4px;
  font-weight: 700;
}

.dp-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-muted);
  background: var(--color-bg);
}
.dp-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.dp-btn--ghost {
  background: #fff;
  border-color: var(--color-border-muted);
  color: var(--color-foreground);
}
.dp-btn--ghost:hover { border-color: var(--color-neutral-400); }
.dp-btn--primary {
  background: var(--color-primary);
  color: var(--color-navy);
}
.dp-btn--primary:hover { background: var(--color-primary-600); }
.dp-btn--primary:disabled {
  background: var(--color-neutral-300);
  cursor: not-allowed;
}

/* Period chip styles to match other inputs */
button.crumb-input {
  cursor: pointer;
  font-family: inherit;
}