/* (c) MarketCast, all rights reserved -- BE dashboard design system */

:root {
  --mc-blue: #35b0e6;
  --mc-blue-600: #1f97cf;
  --mc-blue-050: #eaf7fd;
  --mc-ink: #3a3d42;
  --mc-slate: #58595b;
  --mc-muted: #8a9099;
  --mc-line: #e8ecf1;
  --mc-bg: #f5f7fa;
  --mc-card: #ffffff;
  --mc-good: #1aa66b;
  --mc-bad: #e0564f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(30,40,60,.04), 0 6px 20px rgba(30,40,60,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--mc-bg); color: var(--mc-ink);
  font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ---- app shell: fixed sidebar + content ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; min-width: 248px; background: var(--mc-card); border-right: 1px solid var(--mc-line);
  padding: 26px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  transition: width .18s ease, min-width .18s ease, padding .18s ease;
}
/* collapse toggle: a half-oval tucked against the sidebar's right edge (flat right, curve bulges in) */
.sidebar-toggle {
  position: absolute; bottom: 74px; right: 0; width: 22px; height: 44px; z-index: 30;
  border: 1px solid var(--mc-line); border-right: none; background: var(--mc-blue-050); cursor: pointer;
  border-radius: 16px 0 0 16px; color: var(--mc-blue-600); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.sidebar-toggle:hover { background: var(--mc-blue); color: #fff; }
/* collapsed: sidebar shrinks to a thin strip, its contents hidden (only the toggle remains) */
.sidebar-collapsed .sidebar { width: 22px; min-width: 22px; padding-left: 0; padding-right: 0; overflow: visible; }
.sidebar-collapsed .sidebar > *:not(.sidebar-toggle) { display: none; }
.sidebar .brand { display: flex; align-items: center; margin-bottom: 26px; padding: 0 6px; }
.sidebar .brand img { height: 30px; }
/* Nav groups: Exploration / Reporting. A small uppercase header + the links on a left rail with a
   short tick per item (the ----|---- connector look). */
.nav-group { margin-bottom: 14px; }
.nav-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mc-muted); padding: 2px 14px 6px;
}
.nav-group-items { position: relative; margin-left: 20px; padding-left: 10px;
  border-left: 2px solid var(--mc-line); }
.nav-group-items .nav-link { position: relative; }
.nav-group-items .nav-link::before {   /* the tick joining the rail to each item */
  content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 2px;
  background: var(--mc-line);
}
.nav-group-items .nav-link.active::before { background: var(--mc-blue); }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px;
  color: var(--mc-slate); text-decoration: none; font-weight: 550; font-size: 14px; transition: all .12s ease;
}
.nav-link:hover { background: var(--mc-bg); color: var(--mc-ink); }
.nav-link.active { background: var(--mc-blue-050); color: var(--mc-blue-600); }
/* Nav icons: SVG painted via a CSS mask so each follows the link's text colour (muted by default,
   blue when .active). Relative url() resolves against this file -> /assets/icons/<name>.svg. */
.nav-link .ico {
  width: 18px; height: 18px; flex: none; display: inline-block; background-color: var(--mc-blue);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico-scope { -webkit-mask-image: url(icons/scope.svg); mask-image: url(icons/scope.svg); }
.ico-audiences { -webkit-mask-image: url(icons/audiences.svg); mask-image: url(icons/audiences.svg); }
.ico-aggregate { -webkit-mask-image: url(icons/aggregate.svg); mask-image: url(icons/aggregate.svg); }
.ico-views { -webkit-mask-image: url(icons/views.svg); mask-image: url(icons/views.svg); }
.ico-questions { -webkit-mask-image: url(icons/questions.svg); mask-image: url(icons/questions.svg); }
.ico-survey { -webkit-mask-image: url(icons/survey.svg); mask-image: url(icons/survey.svg); }
.ico-deck { -webkit-mask-image: url(icons/deck.svg); mask-image: url(icons/deck.svg); }
.ico-sheet { -webkit-mask-image: url(icons/sheet.svg); mask-image: url(icons/sheet.svg); }
.sidebar .foot { margin-top: auto; font-size: 11.5px; color: var(--mc-muted); padding: 0 8px; line-height: 1.5; }
.sidebar .scope-chip {
  margin-top: 14px; padding: 12px 14px; background: var(--mc-bg); border-radius: 10px;
  border: 1px solid var(--mc-line); font-size: 12px; color: var(--mc-slate);
}
.sidebar .scope-chip b { color: var(--mc-ink); display: block; font-size: 13px; margin-bottom: 2px; }

/* ---- content ---- */
.content { flex: 1; padding: 22px 32px 44px; max-width: 1180px; }
.sidebar-collapsed .content { max-width: none; }  /* collapsed sidebar -> let tables use the room */
.page-title { font-size: 23px; font-weight: 680; letter-spacing: -.4px; color: var(--mc-ink); margin: 0 0 2px; }
.page-sub { color: var(--mc-muted); font-size: 13.5px; margin: 0 0 16px; }

.card {
  background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 640; color: var(--mc-ink); }
.card .hint { color: var(--mc-muted); font-size: 12px; margin: 0 0 10px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }
.field label { display: block; font-size: 11px; font-weight: 600; color: var(--mc-slate);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }

/* grouped filter sections */
.filter-group { padding: 10px 0 2px; border-top: 1px solid var(--mc-line); margin-top: 4px; }
.filter-group:first-of-type { border-top: none; margin-top: 0; padding-top: 2px; }
.group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--mc-blue-600); margin-bottom: 8px; }
/* header row: group label on the left, an inline control (e.g. include-client) on the right.
   Fixed height + zeroed child margins so the row is the same height whether or not the inline
   control is shown, keeping the buttons below aligned across cut and norm modes. */
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 18px; margin-bottom: 8px; }
.group-head .group-label { margin-bottom: 0; line-height: 18px; white-space: nowrap; }
.group-head .mc-radio { margin: 0; }
.group-head .mc-radio label { margin: 0; font-size: 12px; line-height: 18px; white-space: nowrap; }
.group-head .mc-radio input { margin: 0; width: 14px; height: 14px; }

/* Custom Aggregation two-column layout: compact controls rail + wide results */
.agg-layout { display: flex; gap: 18px; align-items: flex-start; }
.controls-rail { flex: 0 0 290px; width: 290px; align-self: flex-start; position: sticky; top: 12px;
  z-index: 20; background: var(--mc-card);
  border: 1px solid var(--mc-line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 16px;
  /* pin to the viewport and scroll internally so the rail (and the plot) stay in view.
     Safe to clip now that the date calendar opens in a portal, not inside the rail. */
  max-height: calc(100vh - 26px); overflow-y: auto; overflow-x: hidden; }
.results-pane { flex: 1; min-width: 0; position: relative; z-index: 1; }
.agg-strip { padding: 12px 16px; }
.agg-strip .row { gap: 14px; align-items: stretch; }
/* vertical rule between the aggregate/weighting controls and the comparison pickers */
.strip-divider { flex: 0 0 1px !important; min-width: 1px !important; align-self: stretch;
  background: var(--mc-line); margin: 0 4px; }
/* fixed-width left controls so "Aggregate by" / "Weighting" match across cut and norm modes */
.agg-strip .field--fixed { flex: 0 0 200px !important; min-width: 200px !important; }
/* norm builder has no comparison pickers: keep the strip compact instead of full-width */
.agg-strip--narrow { max-width: 460px; }
/* per-slide cut/norm picker inside a deck slide's preview */
.ov-picker { margin-bottom: 12px; padding: 10px 12px; background: #f7f9fb;
  border: 1px solid var(--mc-line); border-radius: 10px; }
.ov-picker .pair-label { margin-bottom: 8px; }
/* collapsible "Report defaults" section on the deck page */
.deck-defaults > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 12px; padding: 4px 0; }
.deck-defaults > summary::-webkit-details-marker { display: none; }
.deck-defaults > summary .s-title { font-weight: 650; font-size: 15px; color: var(--mc-ink); }
/* click-to-zoom slide previews + the lightbox overlay */
img.zoomable { cursor: zoom-in; }
#img-zoom-overlay { display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 20, 30, .82); align-items: center; justify-content: center;
  padding: 28px; cursor: zoom-out; }
#img-zoom-overlay img { max-width: 94vw; max-height: 94vh; border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .5); }
/* norm builder */
.nrm-name-input { border: 1px solid var(--mc-line); border-radius: 10px; padding: 9px 11px;
  font-family: var(--font); font-size: 13.5px; }
.nrm-name-input:focus { outline: none; border-color: var(--mc-blue); }
.norm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--mc-line); font-size: 13.5px; }
.norm-row:last-child { border-bottom: none; }
/* "Building and saving norm..." spinner shown while the save hits Redshift */
.nrm-saving { display: flex; align-items: center; gap: 11px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--mc-blue-600); }
/* Branded loader: the MarketCast mark gently "breathes" (scale + fade) with a soft blue halo. */
.nrm-spin { position: relative; width: 26px; height: 26px; flex: 0 0 auto; border: none;
  border-radius: 7px; background: url("mc_mark.jpeg") center/contain no-repeat;
  animation: mc-breathe 1.25s ease-in-out infinite; }
.nrm-spin::after { content: ""; position: absolute; inset: -4px; border-radius: 10px;
  background: radial-gradient(circle, var(--mc-blue) 0%, transparent 68%); opacity: .0;
  animation: mc-halo 1.25s ease-in-out infinite; z-index: -1; }
@keyframes mc-breathe { 0%, 100% { transform: scale(.82); opacity: .55; }
                        50% { transform: scale(1.05); opacity: 1; } }
@keyframes mc-halo { 0%, 100% { opacity: 0; } 50% { opacity: .28; } }
/* medium branded loader (Build deck progress) */
.nrm-saving.md { gap: 12px; font-size: 13px; }
.nrm-saving.md .nrm-spin { width: 34px; height: 34px; border-radius: 9px; }
.nrm-saving.md .nrm-spin::after { inset: -5px; border-radius: 13px; }
/* larger branded loader for the big centred panes (Custom Aggregation / Norm Builder results) */
.nrm-saving.lg { gap: 15px; font-size: 14px; }
.nrm-saving.lg .nrm-spin { width: 52px; height: 52px; border-radius: 13px; }
.nrm-saving.lg .nrm-spin::after { inset: -7px; border-radius: 18px; }
/* The aggregation results card is tall, so dcc.Loading centres the spinner low. Its overlay <div>
   carries the Loading id and centres via inline `display:flex; align-items:center`; override that to
   start at the top so "Crunching the numbers..." sits near the top of the panel. */
#agg-loading { align-items: flex-start !important; padding-top: 64px !important; }
/* keep the filled-preview area a consistent height so the loader always centres (not top on first run) */
.fill-prev { min-height: 260px; display: flex; align-items: center; justify-content: center; }
.fill-prev img { width: 100%; }
/* date-range calendar popup must float above the plot, not get clipped by the rail */
.controls-rail .DateRangePicker { position: relative; }
.DateRangePicker_picker { z-index: 60 !important; }
.results-pane .card:first-child { margin-top: 0; }
.ctrl-group { padding: 11px 0; border-top: 1px solid var(--mc-line); }
.ctrl-group:first-child { border-top: none; padding-top: 2px; }
.ctrl-group .field { margin-bottom: 10px; }
.ctrl-group .field:last-child { margin-bottom: 0; }
/* slim date picker so it fits the rail */
.controls-rail .DateInput { width: 104px; }
.controls-rail .DateInput_input { font-size: 12px; padding: 6px 7px; font-weight: 500; }
@media (max-width: 860px) {
  .agg-layout { flex-wrap: wrap; }
  .controls-rail { position: static; flex-basis: 100%; width: 100%; max-height: none; }
}

/* ---- controls ---- */
.Select-control, .is-focused .Select-control, .Select--multi .Select-control,
input[type=text], .DateInput_input {
  border-radius: 10px !important; border: 1px solid var(--mc-line) !important; font-family: var(--font) !important;
}
.Select-control:hover { border-color: var(--mc-blue) !important; }
.mc-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--mc-blue); color: #fff;
  border: none; border-radius: 10px; padding: 11px 20px; font-weight: 620; font-size: 14px;
  cursor: pointer; transition: background .12s ease; font-family: var(--font);
}
.mc-btn:hover { background: var(--mc-blue-600); }
.mc-btn.secondary { background: #fff; color: var(--mc-slate); border: 1px solid var(--mc-line); }
.mc-btn.secondary:hover { border-color: var(--mc-blue); color: var(--mc-blue-600); }
.mc-btn.sm { padding: 6px 12px; font-size: 12.5px; font-weight: 560; }
.mc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* radios / checklist */
.mc-radio label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px;
  font-size: 13.5px; color: var(--mc-ink); cursor: pointer; }
.mc-radio input { accent-color: var(--mc-blue); }

/* ---- summary table (key/value) ---- */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 10px 4px; border-bottom: 1px solid var(--mc-line); font-size: 13.5px; }
.kv td:first-child { color: var(--mc-muted); font-weight: 600; width: 210px; }
.kv td:last-child { color: var(--mc-ink); }
.kv tr:last-child td { border-bottom: none; }

/* ---- Dash DataTable polish ---- */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table { font-family: var(--font) !important; }
.metric-badge { font-weight: 640; }
.up { color: var(--mc-good); font-weight: 640; }
.down { color: var(--mc-bad); font-weight: 640; }

/* ---- empty state ---- */
.empty { text-align: center; padding: 60px 20px; color: var(--mc-muted); }
.empty h3 { color: var(--mc-slate); font-weight: 620; margin-bottom: 6px; }

/* ---- deck slide list (checkbox + collapsible preview) ---- */
.slide-list { margin-top: 6px; }
.slide-item { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--mc-line); }
.row-chk { padding-top: 11px; flex: 0 0 auto; }
.row-chk input { accent-color: var(--mc-blue); width: 15px; height: 15px; cursor: pointer; }
.slide-details { flex: 1; min-width: 0; }
.slide-summary { display: flex; align-items: center; gap: 14px; padding: 10px 4px; cursor: pointer;
  list-style: none; font-size: 13px; }
.slide-summary::-webkit-details-marker { display: none; }
.slide-summary::marker { content: ""; }
.slide-summary:hover { background: var(--mc-bg); }
.s-num { color: var(--mc-muted); width: 26px; flex: 0 0 auto; }
.s-title { flex: 1; min-width: 0; color: var(--mc-ink); font-weight: 550; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.s-type { color: var(--mc-muted); width: 150px; flex: 0 0 auto; font-size: 12px; }
.s-fills { color: var(--mc-muted); width: 120px; flex: 0 0 auto; font-size: 12px; }
.s-fills.live { color: var(--mc-good); font-weight: 640; }
.s-eye { color: var(--mc-blue-600); font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.slide-details[open] .s-eye { color: var(--mc-muted); }
.slide-prev { padding: 2px 4px 16px 30px; }

/* ---- per-row ▾ actions menu (duplicate / remove / create new) ---- */
.row-menu { flex: 0 0 auto; position: relative; align-self: flex-start; margin-top: 6px; }
.row-menu > summary.row-menu-btn { list-style: none; cursor: pointer; user-select: none;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--mc-muted); font-size: 13px; }
.row-menu > summary.row-menu-btn::-webkit-details-marker { display: none; }
.row-menu > summary.row-menu-btn::marker { content: ""; }
.row-menu > summary.row-menu-btn:hover { background: var(--mc-bg); color: var(--mc-blue-600); }
.row-menu[open] > summary.row-menu-btn { background: var(--mc-bg); color: var(--mc-blue-600); }
.row-menu-pop { position: absolute; right: 0; top: 30px; z-index: 40; min-width: 210px;
  background: #fff; border: 1px solid var(--mc-line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(30,40,60,.16); padding: 6px; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--mc-ink); cursor: pointer;
  list-style: none; }
.menu-item::-webkit-details-marker { display: none; }
.menu-item::marker { content: ""; }
.menu-item:hover { background: var(--mc-bg); color: var(--mc-blue-600); }
.menu-item.danger { color: #d0453f; }
.menu-item.danger:hover { background: #fdecea; color: #b5322d; }
.menu-item.sm { font-size: 12px; padding: 6px 10px; }
.menu-sub > summary.menu-item { cursor: pointer; }
.menu-sub[open] > summary.menu-item { color: var(--mc-blue-600); font-weight: 600; }
.menu-subpop { padding: 2px 0 4px 10px; margin-left: 4px; border-left: 2px solid var(--mc-line); }
.menu-subpop.scroll { max-height: 260px; overflow-y: auto; }
.menu-group { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--mc-muted); padding: 8px 10px 3px; }

/* ---- demo section (audience OR manual, on builder + deck) ---- */
.demo-section .demo-or { text-align: center; font-size: 11px; color: var(--mc-muted); margin: 2px 0 6px;
  text-transform: uppercase; letter-spacing: .5px; }
.demo-manual > summary.demo-manual-sum { cursor: pointer; list-style: none; font-size: 12.5px;
  font-weight: 600; color: var(--mc-blue-600); padding: 4px 0; }
.demo-manual > summary.demo-manual-sum::-webkit-details-marker { display: none; }
.demo-manual > summary.demo-manual-sum::marker { content: ""; }
.demo-manual > summary.demo-manual-sum::before { content: "▸ "; }
.demo-manual[open] > summary.demo-manual-sum::before { content: "▾ "; }
.demo-tabs .tab { font-size: 12.5px !important; padding: 6px 12px !important; }

/* ---- audience builder ---- */
.aud-list { display: flex; flex-direction: column; }
.aud-item { display: flex; align-items: center; gap: 14px; padding: 9px 4px;
  border-bottom: 1px solid var(--mc-line); }
.aud-name { font-weight: 620; color: var(--mc-ink); min-width: 150px; flex: 0 0 auto; }
.aud-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-cond { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.aud-not { flex: 0 0 auto; }
.aud-not label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  font-weight: 600; color: var(--mc-muted); cursor: pointer; }
.aud-not input { accent-color: #d0453f; width: 14px; height: 14px; cursor: pointer; }
.mc-radio.sm label { font-size: 12.5px; }

/* ---- filled deck carousel ---- */
.carousel-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 14px; }
.carousel-label { font-size: 13px; font-weight: 650; color: var(--mc-ink); min-width: 150px; text-align: center; }
.carousel-view { max-width: 820px; margin: 0 auto; }
.carousel-view img { display: block; width: 100%; }

/* ---- filled preview: template vs live numbers, side by side ---- */
.preview-pair { margin-bottom: 22px; }
.pair-num { font-size: 12px; font-weight: 700; color: var(--mc-blue-600); letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 8px; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pair-label { font-size: 11px; font-weight: 600; color: var(--mc-muted); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 6px; }
@media (max-width: 860px) { .pair-grid { grid-template-columns: 1fr; } }

/* ---- preview-all fold ---- */
.preview-fold-summary { cursor: pointer; font-size: 12.5px; color: var(--mc-blue-600); font-weight: 600;
  padding: 8px 0; list-style: none; }
.preview-fold-summary::-webkit-details-marker { display: none; }
.preview-fold-summary::marker { content: ""; }
.preview-fold-summary::before { content: "▾ "; }
.preview-fold:not([open]) .preview-fold-summary::before { content: "▸ "; }

/* ---- progress bar ---- */
.progress { height: 8px; background: var(--mc-line); border-radius: 999px; overflow: hidden; max-width: 520px; }
.progress-bar { height: 100%; width: 0; background: var(--mc-blue); border-radius: 999px; transition: width .45s ease; }

/* ---- tabs ---- */
.mc-tabs { border-bottom: 1px solid var(--mc-line) !important; }
.mc-tabs .tab-container, .mc-tabs > div { border: none !important; }
.mc-tab {
  border: none !important; background: transparent !important; color: var(--mc-muted) !important;
  font-weight: 600 !important; font-size: 14px !important; padding: 12px 20px !important;
  font-family: var(--font) !important; border-bottom: 2px solid transparent !important;
}
.mc-tab:hover { color: var(--mc-ink) !important; }
.mc-tab--sel {
  color: var(--mc-blue-600) !important; background: transparent !important;
  border-bottom: 2px solid var(--mc-blue) !important; border-top: none !important;
  border-left: none !important; border-right: none !important; font-weight: 650 !important;
}
/* Aggregation page tab strip: two route links styled as tabs (Custom Aggregation / Norm Builder). */
.page-tabs { display: flex; gap: 2px; margin-bottom: 16px; }
.page-tabs .mc-tab { text-decoration: none; display: inline-block; cursor: pointer; margin-bottom: -1px; }
/* My Views saved-view tabs: each tab = label (switch) + × (delete); plus a New-view button. */
.view-tabs { flex-wrap: wrap; align-items: center; }
.view-tab { display: inline-flex; align-items: center; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.view-tab-label { padding: 10px 2px 10px 14px; font-family: var(--font); font-weight: 600; font-size: 14px;
  color: var(--mc-muted); cursor: pointer; white-space: nowrap; }
.view-tab:hover .view-tab-label { color: var(--mc-ink); }
.view-tab--sel { border-bottom: 2px solid var(--mc-blue); }
.view-tab--sel .view-tab-label { color: var(--mc-blue-600); font-weight: 650; }
.view-tab-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  margin: 0 8px 0 6px; border-radius: 4px; border: 1px solid var(--mc-line); background: var(--mc-bg);
  font-size: 12px; line-height: 1; color: var(--mc-muted); cursor: pointer; transition: all .1s ease; }
.view-tab-x:hover { background: var(--mc-red, #e0564f); border-color: var(--mc-red, #e0564f); color: #fff; }
.view-tab-new { border: none; background: transparent; color: var(--mc-blue-600); font-family: var(--font);
  font-weight: 600; font-size: 14px; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.view-tab-new:hover { color: var(--mc-blue); }
/* tabs on the left, New / Save-to-library / View-from-library toolbar on the right */
.views-tabwrap { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin-bottom: 18px; }
.views-tabwrap .view-tabs { flex: 1; min-width: 200px; margin-bottom: 0; }
.views-toolbar { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; }
.views-lib-pick { min-width: 180px; font-weight: 400; }
/* Save-to-library foldout: a button that drops a small panel (two save options) */
.lib-save { position: relative; display: inline-block; }
.lib-save-sum { list-style: none; cursor: pointer; }
.lib-save-sum::-webkit-details-marker { display: none; }
.lib-save-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000; width: 230px;
  background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lib-save-opt { border: 1px solid var(--mc-line); background: var(--mc-bg); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; font-family: var(--font); color: var(--mc-ink); cursor: pointer;
  text-align: left; }
.lib-save-opt:hover { border-color: var(--mc-blue); color: var(--mc-blue-600); }
.lib-save-or { font-size: 11px; color: var(--mc-muted); text-align: center; }
.lib-save-custom { display: flex; gap: 6px; }
.lib-save-input { flex: 1; min-width: 0; border: 1px solid var(--mc-line); border-radius: 7px;
  padding: 7px 9px; font-family: var(--font); font-size: 13px; }
.lib-save-go { flex: none; }
/* results tools row: benchmark bar + generate-graph menu above the table */
/* Deck entry page: BE / Client / Custom start cards + client-deck picker list */
.deck-start-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.deck-start-card { flex: 1 1 240px; min-width: 240px; text-decoration: none; color: inherit;
  display: block; transition: border-color .12s ease, box-shadow .12s ease; cursor: pointer; }
a.deck-start-card:hover { border-color: var(--mc-blue); box-shadow: 0 2px 10px rgba(53,176,230,.18); }
.deck-start-card h3 { margin: 0 0 6px; color: var(--mc-blue-600); }
.deck-start-card.is-disabled { opacity: .6; cursor: default; }
.deck-pick-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.deck-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--mc-line); text-decoration: none; color: var(--mc-ink); font-size: 13.5px; }
.deck-pick-row:hover { background: var(--mc-blue-050); border-color: var(--mc-blue); }
.results-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.views-display { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.xls-btn { display: inline-flex; align-items: center; gap: 6px; }
.xls-ico { width: 13px; height: 13px; border-radius: 2px; background: #1d7a46; flex: none;
           position: relative; }
.xls-ico::after { content: "x"; position: absolute; inset: 0; color: #fff; font-size: 9px;
                  font-weight: 700; line-height: 13px; text-align: center; }
.views-display .graph-axis-lbl { width: auto; }
.views-display .mc-radio label { margin-right: 12px; font-size: 12.5px; }
.views-display .mc-radio label:last-child { margin-right: 0; }
.graph-menu { position: relative; display: inline-block; }
.graph-menu-sum { list-style: none; cursor: pointer; }
.graph-menu-sum::-webkit-details-marker { display: none; }
.graph-menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; width: 230px;
  background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.graph-axes-title { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--mc-muted); margin: 8px 0 2px; }
.graph-axis { display: flex; align-items: center; gap: 8px; }
.graph-axis-lbl { width: 34px; font-size: 12px; color: var(--mc-muted); }
.graph-axis-dd { flex: 1; min-width: 0; font-weight: 400; }

/* My Views composable table (custom HTML so the header can carry + / - column controls). */
.vtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vtable th {
  font-weight: 650; color: var(--mc-muted); text-transform: uppercase; font-size: 11px;
  letter-spacing: .4px; text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--mc-line);
  white-space: nowrap; vertical-align: bottom;
}
.vtable td { padding: 11px 8px; border-bottom: 1px solid var(--mc-line); color: #3a3d42; }
.vtable .vcol-n, .vtable th.vcol-n { color: var(--mc-muted); }
.vcol-dim { position: relative; }
.vcol-del {
  border: none; background: transparent; color: var(--mc-muted); cursor: pointer; font-size: 14px;
  font-weight: 700; line-height: 1; margin-left: 6px; padding: 0 2px;
}
.vcol-del:hover { color: var(--mc-red, #e0564f); }
.vsort {
  border: none; background: transparent; color: var(--mc-muted); cursor: pointer; font-size: 11px;
  line-height: 1; margin-left: 5px; padding: 0 1px; opacity: .55;
}
.vsort:hover { opacity: 1; color: var(--mc-ink); }
.vsort--on { opacity: 1; color: var(--mc-blue-600); }
.info-i {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; box-sizing: border-box;
  border: 1.3px solid var(--mc-muted); color: var(--mc-muted); cursor: help; vertical-align: middle;
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1; text-transform: none;
  font-family: Georgia, "Times New Roman", serif; transition: all .12s ease;
}
.info-i:hover { border-color: var(--mc-blue); background: var(--mc-blue); color: #fff; }
.info-tip {
  position: absolute; left: 0; top: 150%; z-index: 2000; width: max-content; max-width: 150px;
  white-space: normal; text-transform: none; letter-spacing: normal; font-style: normal;
  font-family: var(--font); background: #2b2f36; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45;
  padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .08s ease; pointer-events: none;
}
.info-i:hover .info-tip { opacity: 1; visibility: visible; }
.vtable td.vfocus { cursor: context-menu; }
/* Right-click Focus menu (positioned by assets/views_context.js). */
.vctx-menu {
  position: absolute; z-index: 1000; background: #fff; border: 1px solid var(--mc-line);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px; min-width: 160px;
}
.vctx-item {
  padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--mc-ink); cursor: pointer;
  font-family: var(--font); white-space: nowrap;
}
.vctx-item:hover { background: var(--mc-blue-050); color: var(--mc-blue-600); }

/* My Views benchmark footer row */
.vtable tr.vbench td { border-top: 2px solid var(--mc-line); border-bottom: none; font-weight: 650;
  padding-top: 12px; }
.vbench-name { position: relative; }
.vbench-clear { border: none; background: transparent; color: var(--mc-muted); cursor: pointer;
  font-size: 15px; line-height: 1; margin-left: 8px; font-weight: 700; }
.vbench-clear:hover { color: var(--mc-red, #e0564f); }
/* benchmark picker: a toggle button that drops a panel floating OVER the table (no layout shift) */
.bench-bar { position: relative; display: inline-block; margin-bottom: 12px; }
.bench-bar-sum { cursor: pointer; list-style: none; display: inline-block; color: var(--mc-blue-600);
  font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid var(--mc-line);
  border-radius: 8px; background: var(--mc-card); }
.bench-bar-sum::-webkit-details-marker { display: none; }
.bench-bar-sum:hover, .bench-bar[open] .bench-bar-sum { border-color: var(--mc-blue); }
.bench-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; width: 380px;
  max-width: 92vw; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 12px 16px; font-weight: 400; }
.bench-picker-title { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--mc-blue-600); margin-bottom: 8px; }
.bench-sec { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--mc-muted); margin: 10px 0 5px; }
.bench-sublabel { display: block; font-size: 11.5px; color: var(--mc-muted); margin: 6px 0 3px; }
.bench-check { display: flex; flex-direction: column; gap: 3px; }
.bench-check label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mc-ink);
  cursor: pointer; }
.bench-check input { accent-color: var(--mc-blue); }
.bench-optlbl { display: inline-flex; align-items: center; }
.info-i:hover .bench-tip { opacity: 1; visibility: visible; }
.bench-name { position: relative; cursor: help; border-bottom: 1px dotted var(--mc-muted); }
.bench-tip {
  position: absolute; left: 0; top: 150%; z-index: 2000; width: max-content; max-width: 260px;
  white-space: normal; text-transform: none; letter-spacing: normal; font-style: normal; font-weight: 400;
  font-family: var(--font); background: #2b2f36; color: #fff; font-size: 12px; line-height: 1.45;
  padding: 9px 11px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .08s ease; pointer-events: none;
}
.bench-name:hover .bench-tip { opacity: 1; visibility: visible; }
.vcol-add { width: 130px; }
.vcol-add-dd { min-width: 120px; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* My Views pager (bottom): prev/next arrows + range label. */
.vpager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.vpager-info { font-size: 12.5px; color: var(--mc-muted); }
.vpager-btn {
  border: 1px solid var(--mc-line); background: #fff; color: var(--mc-ink); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 16px; line-height: 1; font-family: var(--font);
}
.vpager-btn:hover:not(:disabled) { border-color: var(--mc-blue); color: var(--mc-blue-600); }
.vpager-btn:disabled { opacity: .4; cursor: default; }

/* ---- misc ---- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--mc-blue-050);
  color: var(--mc-blue-600); font-size: 11.5px; font-weight: 640; }
a { color: var(--mc-blue-600); }
._dash-loading { color: var(--mc-blue); }

/* My Views: drag-to-reorder columns (metric/dim headers) and rows (assets/views_dragorder.js) */
.vtable th.vcol-drag { cursor: grab; }
.vtable th.vcol-drag:active { cursor: grabbing; }
.vtable tr.vrow-drag .vcol-key { cursor: grab; }
.vtable tr.vrow-drag:active .vcol-key { cursor: grabbing; }
.vtable .dragging { opacity: 0.45; }
/* make header/row grab as an element, not a text selection (native DnD) */
.vtable th.vcol-drag, .vtable tr.vrow-drag .vcol-key { -webkit-user-select: none; user-select: none; -webkit-user-drag: element; }
/* SortableJS drag feedback: ghost = where it will land, chosen = the picked item, fallback = cursor clone */
.vtable .vdrag-ghost { opacity: 0.35; background: #e8eefc !important; }
.vtable .vdrag-chosen { background: #f3f6fd; }
.sortable-fallback { opacity: 0.95; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* Deck "More info" disclosure: tuck the ad lists away so picking a month/campaign doesn't resize the panel. */
.deck-moreinfo > summary.more-info-toggle {
  cursor: pointer;
  color: var(--mc-muted);
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.deck-moreinfo > summary.more-info-toggle::-webkit-details-marker { display: none; }
.deck-moreinfo > summary.more-info-toggle::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.12s ease;
  font-size: 10px;
}
.deck-moreinfo[open] > summary.more-info-toggle::before { transform: rotate(90deg); }
.deck-moreinfo > summary.more-info-toggle:hover { color: var(--mc-blue, #35b0e6); }