/* ============================================================================
   Brand Center design tokens — Sprint 46 (CPG Customer Data Platform)
   ----------------------------------------------------------------------------
   Every value below was read off the live DoorDash Brand Center via computed
   styles on 2026-10-21 (Sales, Retailers, Catalog pages; brand 20949630).
   Prefix: --bc-*  (keeps it from colliding with the dashboard's theme.css).

   Usage:  import this file, then build with the .bc-* classes at the bottom
   or map the custom properties into your own components.
   ========================================================================== */

/* ---- Fonts ----------------------------------------------------------------
   Brand Center uses TWO families:
     DD Norms   — headings, page/card titles, stat values, sidebar + topbar
     system-ui  — body copy, buttons, chips, table cells, labels
   The woff2 files are self-hosted in the repo at web/public/fonts/dd-norms/
   (Vite copies web/public/ to dist/ root, Flask serves dist/, so they resolve
   at /fonts/dd-norms/ in `npm run dev` and in the deployed Databricks App).
   Each src list tries the local copy first and falls back to DoorDash's CDN —
   the exact URLs the portal loads — so this file also works when opened from
   somewhere /fonts/ doesn't exist (e.g. reference-mock.html from docs/).     */
@font-face { font-family: "DD Norms"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/dd-norms/DDNorms-Regular.woff2") format("woff2"),
       url("https://img.cdn4dd.com/t/dd-norms/DDNorms-Regular.woff2") format("woff2"); }
@font-face { font-family: "DD Norms"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/dd-norms/DDNorms-Medium.woff2") format("woff2"),
       url("https://img.cdn4dd.com/t/dd-norms/DDNorms-Medium.woff2") format("woff2"); }
@font-face { font-family: "DD Norms"; font-weight: 600 700; font-style: normal; font-display: swap;
  src: url("/fonts/dd-norms/DDNorms-Bold.woff2") format("woff2"),
       url("https://img.cdn4dd.com/t/dd-norms/DDNorms-Bold.woff2") format("woff2"); }
@font-face { font-family: "DD Norms"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/fonts/dd-norms/DDNorms-ExtraBold.woff2") format("woff2"),
       url("https://img.cdn4dd.com/t/dd-norms/DDNorms-ExtraBold.woff2") format("woff2"); }

:root {
  /* ---- Typography ---- */
  --bc-font-display: "DD Norms", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bc-font-body:    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* type scale  (size / line-height / weight)  — measured */
  --bc-text-page-title:    700 32px/40px var(--bc-font-display);   /* h1 "Sales" */
  --bc-text-card-title:    700 24px/28px var(--bc-font-display);   /* "Business performance" */
  --bc-text-stat-value:    700 24px/28px var(--bc-font-display);   /* "$62,246,308.10" */
  --bc-text-brand-name:    700 20px/24px var(--bc-font-display);   /* sidebar "Molson Coors" */
  --bc-text-wordmark:      700 18px/22px var(--bc-font-display);   /* topbar "Brand Center" */
  --bc-text-nav-item:      500 14px/20px var(--bc-font-display);   /* sidebar links */
  --bc-text-nav-section:   500 12px/18px var(--bc-font-display);   /* "Business", "Marketing" */
  --bc-text-nav-sub:       400 14px/20px var(--bc-font-display);   /* "Consumer brand" */
  --bc-text-topbar-link:   700 14px/20px var(--bc-font-display);   /* "Get support" */
  --bc-text-page-subtitle: 400 16px/22px var(--bc-font-body);      /* under h1 */
  --bc-text-card-subtitle: 500 14px/20px var(--bc-font-body);      /* under card title */
  --bc-text-button:        600 16px/22px var(--bc-font-body);      /* all buttons + chips */
  --bc-text-segment:       700 16px/22px var(--bc-font-body);      /* Day / Week / Month */
  --bc-text-stat-label:    700 14px/20px var(--bc-font-body);      /* "Total sales" (dashed underline) */
  --bc-text-table-header:  700 12px/18px var(--bc-font-body);
  --bc-text-table-cell:    500 14px/20px var(--bc-font-body);
  --bc-text-table-strong:  600 14px/20px var(--bc-font-body);      /* row primary name */
  --bc-text-badge:         600 12px/18px var(--bc-font-body);
  --bc-text-footnote:      500 16px/20px var(--bc-font-body);      /* "Based on local retailer time zones" */
  --bc-letter-spacing:     -0.01px;

  /* ---- Color: neutrals ---- */
  --bc-color-text:            #181818;   /* rgb(24,24,24)  primary content text */
  --bc-color-text-chrome:     #191919;   /* rgb(25,25,25)  topbar + sidebar brand text (effectively same) */
  --bc-color-text-secondary:  #6C6C6C;   /* rgb(108,108,108) subtitles, muted cells, inactive segment */
  --bc-color-text-tertiary:   #606060;   /* rgb(96,96,96)   nav items, section labels, axis labels, icons */
  --bc-color-text-disabled:   rgba(16, 16, 16, 0.30);
  --bc-color-text-inverse:    #FFFFFF;

  --bc-color-bg-page:         #F8F8F8;   /* rgb(248,248,248) content area behind cards */
  --bc-color-bg-surface:      #FFFFFF;   /* cards, topbar, sidebar, table */
  --bc-color-bg-subtle:       #F7F7F7;   /* nav item hover */
  --bc-color-bg-control:      #E1E1E1;   /* rgb(225,225,225) secondary buttons, chips, segmented-control track, current page dot */

  --bc-color-border-chrome:   #E7E7E7;   /* rgb(231,231,231) topbar bottom + sidebar right */
  --bc-color-border:          #E9E9E9;   /* rgb(233,233,233) card inner panels, table rows, input ring */
  --bc-color-border-strong:   #858585;   /* checkbox */

  /* ---- Color: brand ---- */
  --bc-color-brand:           #EB1700;   /* rgb(235,23,0)  DoorDash red — active nav text+icon, logo, notification badge */
  --bc-color-brand-tint:      #FFF0ED;   /* rgb(255,240,237) active nav item background */

  /* ---- Color: data viz (the Sales chart + daypart heatmap) ---- */
  --bc-viz-series-1:          #66CBF0;   /* rgb(102,203,240) "Total sales" line, toggle on */
  --bc-viz-series-2:          #23748F;   /* rgb(35,116,143)  "Total units" line, toggle on */
  --bc-viz-seq-1:             #DCF7FF;   /* heatmap lightest */
  --bc-viz-seq-2:             #66CBF0;
  --bc-viz-seq-3:             #4AB1D5;
  --bc-viz-seq-4:             #2086A4;   /* heatmap darkest */
  --bc-viz-grid:              #E9E9E9;
  --bc-viz-axis-text:         #606060;

  /* ---- Color: status badges (Catalog page) ---- */
  --bc-badge-info-bg:         #C4E7ED;   /* "In active campaign" */
  --bc-badge-info-text:       #10434B;
  --bc-badge-success-bg:      #C9F6C7;   /* "Recently updated" */
  --bc-badge-success-text:    #0F3310;
  /* not observed on these pages; derived to the same recipe (tinted bg, deep ink) */
  --bc-badge-warning-bg:      #FDEBC8;
  --bc-badge-warning-text:    #5A3A00;
  --bc-badge-danger-bg:       #FFE0DA;
  --bc-badge-danger-text:     #7A1200;
  --bc-badge-neutral-bg:      #E1E1E1;
  --bc-badge-neutral-text:    #181818;

  /* ---- Radii ---- */
  --bc-radius-sm:    4px;      /* checkbox */
  --bc-radius-md:    8px;      /* nav item, inner panel (stat tile, chart panel) */
  --bc-radius-lg:    12px;     /* search input, badge */
  --bc-radius-xl:    16px;     /* page cards */
  --bc-radius-pill:  9999px;   /* every button, chip, segmented control, pagination dot */

  /* ---- Shadows ---- */
  --bc-shadow-float:   0 4px 12px 0 rgba(33, 32, 31, 0.15);   /* selected segment */
  --bc-shadow-raised:  0 1px 2px 0 rgba(33, 32, 31, 0.15);    /* avatar / logo disc */
  --bc-ring-control:   inset 0 0 0 1px var(--bc-color-bg-control);
  --bc-ring-input:     inset 0 0 0 1px var(--bc-color-border);
  --bc-ring-segment:   inset 0 0 0 2px #FFFFFF;

  /* ---- Layout ---- */
  --bc-topbar-height:      64px;
  --bc-topbar-padding:     12px 24px;
  --bc-sidebar-width:      270px;
  --bc-sidebar-padding-x:  12px;
  --bc-content-padding-x:  24px;
  --bc-content-padding-y:  32px;    /* page header block has 32px top/bottom */
  --bc-content-max-width:  none;    /* portal is full-bleed; cards stretch */
  --bc-card-padding:       24px;
  --bc-card-gap:           32px;    /* vertical gap between cards */
  --bc-panel-padding:      24px;    /* inner bordered panel (chart area) */
  --bc-stat-padding:       12px 16px;
  --bc-stat-gap:           12px;
  --bc-nav-item-height:    36px;
  --bc-nav-item-gap:       12px;    /* icon ↔ label */
  --bc-nav-icon:           24px;
  --bc-button-height:      36px;
  --bc-button-height-lg:   38px;    /* Export in panel */
  --bc-button-height-icon: 40px;    /* topbar icon buttons */
  --bc-segment-height:     28px;    /* inner pill */
  --bc-segment-track:      38px;    /* outer track: 4px padding + 28 + ... with 1px border */
  --bc-chip-gap:           8px;
  --bc-input-height:       36px;
  --bc-table-header-h:     48px;
  --bc-table-cell-pad:     16px;
  --bc-table-row-h:        80px;    /* 48px avatar rows; text-only rows ~72px */
  --bc-checkbox:           20px;
  --bc-toggle-w:           40px;
  --bc-toggle-h:           24px;
  --bc-page-dot:           32px;
}

/* ============================================================================
   Component classes (drop-in). All measured from the portal.
   ========================================================================== */

.bc-app { font: 400 16px/22px var(--bc-font-body); color: var(--bc-color-text); background: var(--bc-color-bg-page); letter-spacing: var(--bc-letter-spacing); -webkit-font-smoothing: antialiased; }

/* Shell ------------------------------------------------------------------- */
.bc-topbar  { height: var(--bc-topbar-height); padding: var(--bc-topbar-padding); background: var(--bc-color-bg-surface); border-bottom: 1px solid var(--bc-color-border-chrome); display: flex; align-items: center; justify-content: space-between; }
.bc-wordmark { font: var(--bc-text-wordmark); color: var(--bc-color-text-chrome); display: flex; align-items: center; gap: 10px; }
.bc-topbar-link { font: var(--bc-text-topbar-link); color: var(--bc-color-text-chrome); height: var(--bc-button-height-icon); padding: 0 12px; border-radius: var(--bc-radius-pill); display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; }
.bc-topbar-link:hover { background: var(--bc-color-bg-subtle); }

.bc-sidebar { width: var(--bc-sidebar-width); background: var(--bc-color-bg-surface); border-right: 1px solid var(--bc-color-border-chrome); padding: 20px var(--bc-sidebar-padding-x) 24px; box-sizing: border-box; }
.bc-brand-name { font: var(--bc-text-brand-name); color: var(--bc-color-text-chrome); padding: 0 8px; display: flex; align-items: center; gap: 8px; }
.bc-brand-sub  { font: var(--bc-text-nav-sub); color: var(--bc-color-text-chrome); padding: 2px 8px 0; }
.bc-nav-section { font: var(--bc-text-nav-section); color: var(--bc-color-text-tertiary); padding: 16px 12px 4px; }
.bc-nav-item { height: var(--bc-nav-item-height); padding: 0 12px; border-radius: var(--bc-radius-md); display: flex; align-items: center; gap: var(--bc-nav-item-gap); font: var(--bc-text-nav-item); color: var(--bc-color-text-tertiary); text-decoration: none; cursor: pointer; }
.bc-nav-item svg { width: var(--bc-nav-icon); height: var(--bc-nav-icon); flex: none; }
.bc-nav-item:hover { background: var(--bc-color-bg-subtle); }
.bc-nav-item[aria-current="page"] { background: var(--bc-color-brand-tint); color: var(--bc-color-brand); }

.bc-main { background: var(--bc-color-bg-page); padding: 0 var(--bc-content-padding-x) 48px; min-height: calc(100vh - var(--bc-topbar-height)); }

/* Page header --------------------------------------------------------------- */
.bc-page-header { padding: var(--bc-content-padding-y) 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bc-page-title    { font: var(--bc-text-page-title); color: var(--bc-color-text); margin: 0; }
.bc-page-subtitle { font: var(--bc-text-page-subtitle); color: var(--bc-color-text-secondary); margin: 16px 0 0; max-width: 960px; }
.bc-page-subtitle a { color: var(--bc-color-text); font-weight: 600; text-decoration: underline; }
.bc-page-actions  { display: flex; gap: 8px; flex: none; }

/* Buttons ------------------------------------------------------------------- */
.bc-btn { font: var(--bc-text-button); height: var(--bc-button-height); padding: 0 16px; border-radius: var(--bc-radius-pill); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; letter-spacing: var(--bc-letter-spacing); }
.bc-btn-primary   { background: var(--bc-color-text); color: var(--bc-color-text-inverse); }
.bc-btn-primary:hover { background: #333333; }
.bc-btn-secondary { background: var(--bc-color-bg-control); color: var(--bc-color-text); box-shadow: var(--bc-ring-control); }
.bc-btn-secondary:hover { background: #D6D6D6; }
.bc-btn-tertiary  { background: transparent; color: var(--bc-color-text); }
.bc-btn-tertiary:hover { background: var(--bc-color-bg-subtle); }
.bc-btn-icon { width: var(--bc-button-height-icon); height: var(--bc-button-height-icon); padding: 0; border-radius: var(--bc-radius-pill); background: transparent; border: 0; color: var(--bc-color-text-chrome); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.bc-btn-icon:hover { background: var(--bc-color-bg-subtle); }
.bc-btn-icon .bc-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--bc-radius-pill); background: var(--bc-color-brand); color: #fff; font: 700 11px/16px var(--bc-font-body); text-align: center; }

/* Filter chip (dropdown-style button) --------------------------------------- */
.bc-chip, .bc-filter-chip { font: var(--bc-text-button); height: var(--bc-button-height); padding: 0 12px 0 16px; border-radius: var(--bc-radius-pill); background: var(--bc-color-bg-control); color: var(--bc-color-text); box-shadow: var(--bc-ring-control); border: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bc-filter-row { display: flex; flex-wrap: wrap; gap: var(--bc-chip-gap); align-items: center; }

/* Segmented control (Day / Week / Month, Sales / Share / Competitors) -------- */
.bc-segment { display: inline-flex; gap: 2px; padding: 4px; background: var(--bc-color-bg-control); border: 1px solid var(--bc-color-bg-control); border-radius: var(--bc-radius-pill); box-sizing: border-box; }
.bc-segment > button { font: var(--bc-text-segment); height: var(--bc-segment-height); padding: 0 12px; border: 0; border-radius: var(--bc-radius-pill); background: transparent; color: var(--bc-color-text-secondary); cursor: pointer; }
.bc-segment > button[aria-pressed="true"], .bc-segment > button.is-active { background: #fff; color: var(--bc-color-text); box-shadow: var(--bc-ring-segment), var(--bc-shadow-float); }

/* Cards & panels ------------------------------------------------------------ */
.bc-card  { background: var(--bc-color-bg-surface); border-radius: var(--bc-radius-xl); padding: var(--bc-card-padding); }
.bc-card + .bc-card { margin-top: var(--bc-card-gap); }
.bc-card-title    { font: var(--bc-text-card-title); color: var(--bc-color-text); margin: 0; }
.bc-card-subtitle { font: var(--bc-text-card-subtitle); color: var(--bc-color-text-secondary); margin: 2px 0 0; }
.bc-card-toolbar  { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.bc-panel { border: 1px solid var(--bc-color-border); border-radius: var(--bc-radius-md); padding: var(--bc-panel-padding); }

/* Stat tiles ---------------------------------------------------------------- */
.bc-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--bc-stat-gap); margin-bottom: var(--bc-card-padding); }
.bc-stat { border: 1px solid var(--bc-color-border); border-radius: var(--bc-radius-md); padding: var(--bc-stat-padding); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bc-stat-label { font: var(--bc-text-stat-label); color: var(--bc-color-text); text-decoration: underline dashed var(--bc-color-text-secondary); text-underline-offset: 3px; }
.bc-stat-value { font: var(--bc-text-stat-value); color: var(--bc-color-text); margin-top: 8px; }
.bc-stat-delta { font: var(--bc-text-table-cell); color: var(--bc-color-text-secondary); margin-top: 4px; }

/* Toggle (40×24, 2px border same colour as fill, white knob) ---------------- */
.bc-toggle { appearance: none; width: var(--bc-toggle-w); height: var(--bc-toggle-h); border-radius: var(--bc-radius-pill); border: 2px solid var(--bc-color-border-strong); background: var(--bc-color-border-strong); position: relative; cursor: pointer; box-sizing: border-box; flex: none; }
.bc-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.bc-toggle:checked::after { transform: translateX(16px); }
.bc-toggle:checked { background: var(--bc-viz-series-1); border-color: var(--bc-viz-series-1); }
.bc-toggle.bc-toggle-2:checked { background: var(--bc-viz-series-2); border-color: var(--bc-viz-series-2); }

/* Search input -------------------------------------------------------------- */
.bc-search { height: var(--bc-input-height); padding: 0 12px; border-radius: var(--bc-radius-lg); background: #fff; box-shadow: var(--bc-ring-input); display: flex; align-items: center; gap: 8px; width: 345px; max-width: 100%; box-sizing: border-box; }
.bc-search input { border: 0; outline: 0; flex: 1; font: 400 16px/22px var(--bc-font-body); color: var(--bc-color-text); background: transparent; min-width: 0; }
.bc-search input::placeholder { color: var(--bc-color-text-secondary); }
.bc-search svg { width: 20px; height: 20px; color: var(--bc-color-text); flex: none; }

/* Table --------------------------------------------------------------------- */
.bc-table { width: 100%; border-collapse: collapse; }
.bc-table th { height: var(--bc-table-header-h); padding: 0 var(--bc-table-cell-pad); font: var(--bc-text-table-header); color: var(--bc-color-text); text-align: left; background: #fff; white-space: nowrap; }
.bc-table th.is-sortable { cursor: pointer; }
.bc-table th.is-sorted  { text-decoration: underline; text-underline-offset: 3px; }
.bc-table th .bc-sort { display: inline-block; margin-left: 4px; color: var(--bc-color-text-tertiary); vertical-align: -2px; }
.bc-table td { padding: var(--bc-table-cell-pad); border-bottom: 1px solid var(--bc-color-border); font: var(--bc-text-table-cell); color: var(--bc-color-text); vertical-align: middle; }
.bc-table td.is-muted, .bc-table .is-muted { color: var(--bc-color-text-secondary); }
.bc-table td.is-num, .bc-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.bc-table td.is-center, .bc-table th.is-center { text-align: center; }
.bc-table .bc-row-title { font: var(--bc-text-table-strong); color: var(--bc-color-text); }
.bc-table tbody tr:hover td { background: #FAFAFA; }
.bc-avatar { width: 48px; height: 48px; border-radius: 50%; box-shadow: var(--bc-shadow-raised); object-fit: cover; background: #fff; flex: none; }
.bc-avatar-sm { width: 32px; height: 32px; }
.bc-checkbox { appearance: none; width: var(--bc-checkbox); height: var(--bc-checkbox); border: 2px solid var(--bc-color-border-strong); border-radius: var(--bc-radius-sm); background: transparent; cursor: pointer; box-sizing: border-box; display: inline-grid; place-content: center; }
.bc-checkbox:checked { background: var(--bc-color-text); border-color: var(--bc-color-text); }
.bc-checkbox:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }

/* Badges -------------------------------------------------------------------- */
.bc-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--bc-radius-lg); font: var(--bc-text-badge); white-space: nowrap; }
.bc-badge-info    { background: var(--bc-badge-info-bg);    color: var(--bc-badge-info-text); }
.bc-badge-success { background: var(--bc-badge-success-bg); color: var(--bc-badge-success-text); }
.bc-badge-warning { background: var(--bc-badge-warning-bg); color: var(--bc-badge-warning-text); }
.bc-badge-danger  { background: var(--bc-badge-danger-bg);  color: var(--bc-badge-danger-text); }
.bc-badge-neutral { background: var(--bc-badge-neutral-bg); color: var(--bc-badge-neutral-text); }
.bc-badge-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }

/* Pagination ---------------------------------------------------------------- */
.bc-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 0; }
.bc-pagination button { width: var(--bc-page-dot); height: var(--bc-page-dot); border-radius: var(--bc-radius-pill); border: 0; background: transparent; color: #000; font: 500 14px/20px var(--bc-font-body); cursor: pointer; }
.bc-pagination button[aria-current="page"] { background: var(--bc-color-bg-control); box-shadow: var(--bc-ring-control); }
.bc-pagination button:disabled { color: var(--bc-color-text-disabled); cursor: default; }

/* Chart legend -------------------------------------------------------------- */
.bc-legend { display: flex; gap: 16px; font: var(--bc-text-table-cell); color: var(--bc-color-text-secondary); margin-top: 16px; }
.bc-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--dot, var(--bc-viz-series-1)); }

/* Footnote ------------------------------------------------------------------ */
.bc-footnote { font: var(--bc-text-footnote); color: var(--bc-color-text-secondary); }