/* Event-window chrome — used by the Beat the Rush view (window-comparison
   grid + chip selector) and Bedgear contest landing.

   Token policy: every CONTEST-SPECIFIC color (active-window highlight,
   region-badge tint, etc.) is declared in css/tokens.css and referenced
   via var(--…). The neutral UI greys baked into this file (#fff, #6b7280,
   #9ca3af, #cbd5e1, #d1d5db, #374151, #4b5563, #f3f4f6, #f8fafb,
   #eef0f3) are the same grays used as bare literals throughout
   css/components/table.css and css/layout.css; they aren't tokenized
   anywhere yet, and tokenizing them is out of scope for the BTR/Bedgear
   port. If/when a `--text-muted` / `--text-body` / `--surface-hover`
   palette lands in tokens.css, this file should be migrated alongside
   table.css and layout.css in one sweep. */

/* BTR sub-tabs (Overview / Summary / Store Scorecard) live in #btrTabs in
   the top bar -- they reuse the .view-tab styling defined in
   css/components/sub-tabs.css (same convention as #dailyTabs for Sales
   Performance), so no per-view tab styling is needed here. */

/* No padding: BTR content sits flush against .content's 24px padding,
   same as every other view (Sales / Bedding / RSA / Bedgear). The
   previous 16px inset made BTR visibly narrower than the others. */
.btr-content { padding: 0; }

/* ── Window-comparison grid ───────────────────────────────────────────── */
.btr-window-grid {
  display: grid; grid-template-columns: 200px repeat(8, minmax(0, 1fr));
  gap: 1px; background: var(--table-border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px; font-size: var(--fs-body);
  box-shadow: var(--shadow);
}
.btr-wg-group-label {
  background: var(--navy-hover); padding: 6px 12px; font-size: var(--fs-label);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.65); text-align: center;
}
.btr-wg-group-label.past {
  border-left: 2px solid rgba(255,255,255,0.1);
}
.btr-wg-header {
  background: var(--navy); color: rgba(255,255,255,0.6); padding: 9px 12px;
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btr-wg-header.win { text-align: center; }
.btr-wg-header.win.active-win { color: var(--ashley-orange); }
.btr-wg-header.win.hist-win {
  color: rgba(255,255,255,0.5); border-left: 2px solid rgba(255,255,255,0.1);
}
.btr-wg-header .btr-wg-dates {
  display: block; font-size: 11px; font-weight: 400; color: #cbd5e1;
  margin-top: 2px; text-transform: none; letter-spacing: 0.1px;
}
.btr-wg-label {
  background: var(--table-header-bg); padding: 9px 12px; color: #374151;
  font-size: var(--fs-body); display: flex; align-items: center;
}
.btr-wg-cell {
  background: #fff; padding: 9px 12px; text-align: center;
  color: var(--navy); font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
.btr-wg-cell.na { color: #cbd5e1; }
.btr-wg-cell.active-col { background: var(--contest-soft); }
.btr-wg-cell.hist-col { border-left: 2px solid var(--table-border); }
.btr-wg-cell .btr-wg-vsly { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.btr-wg-cell .btr-wg-vsly.pos { color: var(--success-green); }
.btr-wg-cell .btr-wg-vsly.neg { color: var(--danger-red); }
.btr-wg-cell .btr-wg-vsly.muted { color: #9ca3af; font-style: italic; font-weight: 400; }

/* ── Window selector chips ────────────────────────────────────────────── */
.btr-win-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--table-border);
  border-radius: var(--radius); margin-bottom: 16px;
}
/* CSV button at the right end of the BTR Scorecard drill-down row. */
.btr-win-row .btr-inline-csv { margin-left: auto; }
.btr-win-row-label {
  font-size: var(--fs-label); color: #6b7280; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.btr-win-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: #6b7280; padding: 0 4px; align-self: center;
}
.btr-win-group-label.past { color: var(--primary-blue); }
.btr-win-divider {
  width: 1px; height: 22px; background: var(--table-border); margin: 0 4px;
}
.btr-win-btn {
  padding: 5px 12px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; color: #6b7280; font-size: 12px; cursor: pointer;
  transition: all 0.15s; font-weight: 500; font-family: var(--font-stack);
}
.btr-win-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.btr-win-btn.active {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700;
}
.btr-win-btn.hist {
  background: var(--contest-past); border-color: var(--contest-past-border);
}
.btr-win-btn.hist:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.btr-win-btn.hist.active {
  background: var(--primary-blue); border-color: var(--primary-blue); color: #fff;
}

/* ── BTR KPI / hero rows ──────────────────────────────────────────────── */
/* `auto-fit + minmax` so the grid adapts to the cards present (5 in the
   KPI block, 3 in the Financing hero block). Cards stretch to fill the
   row at any reasonable viewport without leaving an end-of-row gap.
   The inline `grid-template-columns: repeat(3, ...)` set on the Financing
   row in btr.js still wins for that specific block. */
.btr-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 16px; }
.btr-kpi-card {
  background: #fff; border: 1px solid var(--table-border); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.btr-kpi-name {
  font-size: var(--fs-label); color: #6b7280; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.btr-kpi-value { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 6px; }
.btr-kpi-lift { font-size: 12px; font-weight: 600; }
.btr-kpi-lift.pos { color: var(--success-green); }
.btr-kpi-lift.neg { color: var(--danger-red); }
.btr-kpi-lift.muted { color: #6b7280; font-weight: 400; }
.btr-kpi-lift-label { font-size: 10px; color: #9ca3af; font-weight: 400; margin-left: 3px; }

/* Section heads -- "ALL WINDOWS — SIDE BY SIDE", etc. */
.btr-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--navy); margin: 4px 0 12px; display: flex; align-items: center; gap: 8px;
}
.btr-section-title::after {
  content: ""; flex: 1; height: 1px; background: var(--table-border);
}
.btr-section-subtitle {
  font-size: var(--fs-label); color: var(--primary-blue); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

/* ── BTR Store Scorecard table ─────────────────────────────────────────
   Reuses .rsa-table styles (sticky thead, sticky-left col, var-driven
   colors). Only the column-group header band needs its own treatment. */
.btr-table-wrap {
  /* Wrap is the scroll container for both axes (sticky thead pins to
     wrap top, sticky-left first column pins to wrap left). */
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--chrome-h, 92px) - 12px);
  border: 1px solid var(--table-border); border-radius: 10px; background: #fff;
}
.btr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); font-family: var(--font-stack); }
.btr-table thead { position: sticky; top: 0; z-index: 10; }
/* Single-row header. The legacy iframe used a two-row group/sub-header
   band, but rowspan cells don't co-exist cleanly with sticky positioning
   (the cell is removed from normal table flow, so it can't span its
   declared rowcount visually -- you get a blank strip below the rowspan
   labels). Flattening matches the RSA Leaderboard / Detailed Report
   convention used elsewhere in the portal. */
.btr-table th {
  background: var(--navy); color: rgba(255,255,255,0.85);
  text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--fs-label);
  padding: 9px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.btr-table th:first-child,
.btr-table th:nth-child(2),
.btr-table th:nth-child(3) { text-align: left; }
.btr-table thead th:first-child {
  position: sticky; left: 0; z-index: 15; background: var(--navy);
}
.btr-table tbody td {
  padding: 8px 10px; text-align: right; color: #4b5563;
  border-bottom: 1px solid #f3f4f6;
  font-variant-numeric: tabular-nums;
}
.btr-table tbody td:first-child {
  position: sticky; left: 0; z-index: 5; background: #fff;
  text-align: left; color: var(--navy); font-weight: 600;
}
.btr-table tbody tr:hover td { background: #f8fafb; }
.btr-table tbody tr:hover td:first-child { background: #f8fafb; }
.btr-table tbody tr.ecom-row td { color: #9ca3af; font-style: italic; }

.btr-table .btr-vsly-pos { color: var(--success-green); font-weight: 600; }
.btr-table .btr-vsly-neg { color: var(--danger-red); font-weight: 600; }
.btr-table .btr-vsly-na  { color: #cbd5e1; }

/* Region badges */
.btr-region-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
}
.btr-region-badge.East { background: var(--region-east-bg); color: var(--region-east-text); }
.btr-region-badge.West { background: var(--region-west-bg); color: var(--region-west-text); }

/* Scorecard search */
.btr-scorecard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.btr-scorecard-top .btr-section-title { margin: 0; flex: 1; }
.btr-scorecard-search {
  background: #fff; border: 1px solid var(--table-border); color: var(--navy);
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px;
  width: 220px; height: 32px; box-sizing: border-box; font-family: var(--font-stack);
}
.btr-scorecard-search:focus {
  outline: none; border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(63,115,141,0.15);
}

/* ── Bedgear-specific ─────────────────────────────────────────────────── */
/* Sub-tabs live in #bedgearTabs in the top bar -- they reuse the .view-tab
   styling defined in css/components/sub-tabs.css (same convention as
   #dailyTabs / #btrTabs), so no per-view tab styling is needed here. */

/* No padding: Bedgear content sits flush against .content's own padding
   (24px on wide screens), same as every other view. The earlier 16px
   inset made Bedgear visibly narrower than RSA/Bedding/Sales. */
.bg-content { padding: 0; }

/* Bedgear KPI rows have variable card counts (3-5+ depending on tab).
   `auto-fit + minmax` lets the row stretch each card to fill available
   width, so 5 cards on the Leaderboard fill the row instead of leaving an
   empty 6th-column gap from the global `.kpi-row` 6-column grid (which is
   tuned for Sales Performance's 6 KPIs). */
#bgContent .kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.bg-progress-cell { min-width: 130px; font-variant-numeric: tabular-nums; }
.bg-progress-bar {
  height: 6px; background: var(--table-border); border-radius: 3px;
  overflow: hidden; margin-top: 4px;
}
.bg-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.bg-progress-fill.green  { background: var(--success-green); }
.bg-progress-fill.yellow { background: var(--signal-yellow-text); }
.bg-progress-fill.red    { background: var(--danger-red); }

.bg-status-badge {
  padding: 2px 8px; border-radius: 10px; font-size: var(--fs-label);
  font-weight: 700;
}
.bg-status-badge.qualified { background: var(--signal-green-bg); color: var(--signal-green-text); }
.bg-status-badge.in-progress { background: var(--contest-soft); color: var(--ashley-orange); }
.bg-status-badge.not-started { background: #eef0f3; color: #6b7280; }

.bg-breadcrumb {
  display: flex; align-items: center; gap: 8px; padding: 0 0 12px;
  font-size: var(--fs-body); font-family: var(--font-stack);
}
.bg-breadcrumb a {
  color: #6b7280; cursor: pointer; text-decoration: none;
}
.bg-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.bg-breadcrumb .sep { color: var(--table-border); }
.bg-breadcrumb .current { color: var(--navy); font-weight: 600; }

.bg-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--chrome-h, 92px) - 12px);
  border: 1px solid var(--table-border); border-radius: 10px; background: #fff;
  margin-bottom: 16px;
}
.bg-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--table-border);
}
.bg-table-head h3 { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0; }

.bg-data-info {
  background: var(--contest-soft); border: 1px solid var(--contest-soft-border);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px;
  font-size: 12px; color: var(--navy);
}
.bg-data-warn {
  background: var(--signal-yellow-bg); border: 1px solid #FCD79B;
  color: var(--signal-yellow-text);
}

.bg-clickable { color: var(--primary-blue); cursor: pointer; }
.bg-clickable:hover { text-decoration: underline; }