/* Tables — RSA Leaderboard, Classic Daily Report, Tree (Store Detail), Bedding sleep table, conditional cell colors. */

.table-container {
  background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}

.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; }

.table-header h3 { font-size: 14px; color: #334155; font-weight: 600; }

.search-input {
  padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; width: 220px; font-family: var(--font-stack);
}

.search-input:focus { outline: none; border-color: var(--primary-blue); }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-stack); }

.data-table th {
  background: var(--table-header-bg); color: var(--navy); font-weight: 600; text-align: left;
  padding: 11px 14px; cursor: pointer; user-select: none; white-space: nowrap;
  position: sticky; top: 0; z-index: 10; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 2px solid #e2e5e9;
}

/* Freeze the leftmost column (Store / Date / etc.) so it stays visible when
   the user scrolls the metric columns horizontally. The thead/first-col
   intersection sits on top with z-index 15. */
.data-table th:first-child {
  position: sticky; left: 0; z-index: 15;
  background: var(--table-header-bg);
}

.data-table td:first-child {
  position: sticky; left: 0; z-index: 5;
  background: #fff;
}

.data-table tr.top-row td:first-child    { background: #ecfdf5; }
.data-table tr.bottom-row td:first-child { background: #fef2f2; }
.data-table tr:hover td:first-child      { background: var(--light-bg); }

.data-table th:hover { background: #E4EAF0; }

.data-table th .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.4; }

.data-table th.sorted .sort-arrow { opacity: 1; color: var(--ashley-orange); }

.data-table td { padding: 9px 14px; border-bottom: 1px solid #f1f3f5; font-variant-numeric: tabular-nums; }

.data-table tr:hover td { background: var(--light-bg); }

.data-table tr.top-row td { background: #ecfdf5; }

.data-table tr.bottom-row td { background: #fef2f2; }

.store-link { color: var(--primary-blue); cursor: pointer; font-weight: 500; text-decoration: none; }

.store-link:hover { text-decoration: underline; color: var(--ashley-orange); }

.table-scroll { max-height: 600px; overflow-y: auto; }

.table-container { border: 1px solid #e2e5e9; border-radius: 10px; overflow: hidden; background: #fff; }

.back-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--primary-blue); color: #fff; border: none; border-radius: 6px;
  font-size: 13px; cursor: pointer; font-family: var(--font-stack); margin-bottom: 16px;
}

.back-btn:hover { background: var(--navy); }

.rsa-top-bar, .rsa-summary-bar { display: none !important; }

/* Bedding > Stores table card -- replaces the legacy chart-card+h3 wrapper
   that put a "Stores" heading awkwardly between the charts and the data.
   The .sleep-table-head row keeps the title flush with the CSV button. */
/* No overflow:hidden — that creates a sticky-positioning containing block,
   which traps the inner thead inside the card and breaks the page-scroll
   sticky behavior. The card's rounded corners still clip via border-radius
   on the head + last row's cells where it matters. */
.sleep-table-card {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
  margin-top: 16px;
}
.sleep-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #E5E7EB;
}
.sleep-table-head h3 {
  font-size: 14px; font-weight: 700; color: var(--navy); margin: 0;
}

/* Page-scroll model. The wrap MUST NOT have any overflow that creates a
   scroll container, because sticky thead inside pins to the nearest
   scrolling ancestor. With overflow: visible the page itself is that
   ancestor, so the thead pins below the page chrome at top: var(--chrome-h).
   IMPORTANT: setting only `overflow-x: auto` doesn't work -- the browser
   then computes overflow-y to auto as well (CSS spec quirk: any non-visible
   overflow on one axis forces the other to auto). Use `overflow: visible`
   and rely on the table fitting in the content width. */
#sleepTableWrap {
  overflow: visible;
  background: #fff;
}

#sleepTableWrap table { border-collapse: separate; border-spacing: 0; }

#sleepTableWrap thead .sleep-th {
  position: sticky; top: var(--chrome-h, 88px); z-index: 10;
  background: #f9fafb; border-bottom: 2px solid #E5E7EB;
}

#sleepTableWrap thead .sleep-th:first-child {
  position: sticky; left: 0; z-index: 5; background: #fff;
}

#sleepTableWrap thead .sleep-th:first-child { background: #f9fafb; z-index: 15; }

/* Sticky-left for the body's Store column so it stays visible while scrolling
   the metric columns horizontally. Background is solid white so the cell
   doesn't show the row beneath through it. */
#sleepTableWrap tbody td:first-child {
  position: sticky; left: 0; z-index: 5; background: #fff;
}

#sleepTableWrap tbody tr:hover td { background: #f8fafb; }

#sleepTableWrap tbody tr:hover td:first-child { background: #f8fafb; }

/* The WRAP is the scroll container for both axes. This is the only model
   that gives us:
     - Sticky-thead pinned to the wrap top (works reliably in table layout).
     - Sticky-left first column pinned to the wrap's left edge.
   The max-height ceiling fills almost all available vertical space below
   the chrome (--chrome-h). The previous `220px` ceiling cropped grids
   into a tight card; `--chrome-h + 12px` gives a 4-5x taller surface. */
.classic-report-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--chrome-h, 92px) - 12px);
  max-width: 100%;
  border: 1px solid var(--table-border); border-radius: 6px;
}

.classic-report { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-stack); }

/* Two header rows stack inside the wrap's scroll context -- top:0 pins
   row 1 to the wrap top, top:38px pins row 2 just below it. */
.classic-report thead tr { position: sticky; z-index: 5; }
.classic-report thead tr:first-child  { top: 0;    z-index: 6; }
.classic-report thead tr:nth-child(2) { top: 38px; z-index: 5; }

.classic-report th {
  background: var(--table-header-bg); color: var(--navy); padding: 10px 12px; text-align: center;
  font-weight: 600; font-size: 11px; white-space: nowrap;
  border-bottom: 2px solid var(--table-border); border-right: 1px solid var(--table-border);
  text-transform: uppercase; letter-spacing: 0.3px;
}

.classic-report th.period-group {
  background: var(--navy); color: #fff; font-size: 12px; letter-spacing: 0.6px;
  font-weight: 700; border-bottom: 2px solid var(--navy-border); border-right: 2px solid rgba(255,255,255,0.15);
  padding: 10px 16px;
}

.classic-report th.period-group:last-child { border-right: none; }

.classic-report th.metric-header {
  text-align: left; min-width: 220px; position: sticky; left: 0; z-index: 2;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 12px;
  border-right: 2px solid var(--table-border);
}

.classic-report th.period-divider { border-left: 2px solid var(--table-border); }

.classic-report td {
  padding: 8px 12px; border-bottom: 1px solid var(--table-border); border-right: 1px solid #E5E7EB;
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}

.classic-report td.period-divider { border-left: 2px solid var(--table-border); }

.classic-report td.metric-name {
  text-align: left; font-weight: 500; color: var(--navy); position: sticky; left: 0;
  z-index: 1; min-width: 220px; background: inherit; border-right: 2px solid var(--table-border);
}

.classic-report tr.color-1 td { background: #fff8e1; border-bottom: 1px solid #f0d580; }

.classic-report tr.color-1 td.metric-name { background: #fff8e1; font-weight: 700; font-size: 13px; color: var(--navy); }

.classic-report tr.color-2 td { background: #fff; }

.classic-report tr.color-2 td.metric-name { background: #fff; }

.classic-report tr.color-3 td { background: var(--light-bg); }

.classic-report tr.color-3 td.metric-name { background: var(--light-bg); }

.classic-report tbody tr.color-2:nth-child(even) td { background: #FAFAFA; }

.classic-report tbody tr.color-2:nth-child(even) td.metric-name { background: #FAFAFA; }

.classic-report tbody tr:hover td { background: #eef4f8 !important; }

.classic-report tbody tr:hover td.metric-name { background: #eef4f8 !important; }

.classic-report .var-pos { color: #059669; font-weight: 600; }

.classic-report .var-neg { color: #dc2626; font-weight: 600; }

.classic-report .var-neutral { color: #6b7280; }

.dtl-period-tabs { display: flex; gap: 0; margin-bottom: 20px; }

.dtl-period-btn {
  padding: 8px 20px; border: 1px solid #d1d5db; background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #374151; font-family: var(--font-stack); transition: all 0.15s;
}

.dtl-period-btn:first-child { border-radius: 6px 0 0 6px; }

.dtl-period-btn:last-child { border-radius: 0 6px 6px 0; }

.dtl-period-btn:not(:first-child) { border-left: none; }

.dtl-period-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.dtl-period-btn:hover:not(.active) { background: var(--icy-blue); border-color: var(--primary-blue); }

.rsa-top-bar {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;
  flex-wrap: wrap; gap: 16px; position: sticky; top: 0; z-index: 40; background: #fff;
  padding: 16px 0 12px; border-bottom: 1px solid #e5e7eb;
}

.rsa-top-left {}

.rsa-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }

.rsa-subtitle { font-size: 14px; color: #6b7280; }

.rsa-top-right { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

.rsa-filter-group { display: flex; flex-direction: column; gap: 2px; }

.rsa-filter-group label { font-size: 12px; font-weight: 600; color: #6b7280; }

.rsa-store-select {
  padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; font-family: var(--font-stack); background: #fff; color: var(--navy); min-width: 180px;
}

.rsa-date-input {
  padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; font-family: var(--font-stack);
}

.rsa-apply-btn {
  padding: 8px 20px; background: var(--primary-blue); color: #fff; border: none;
  border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; align-self: flex-end;
  height: 36px; box-sizing: border-box; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}

.rsa-apply-btn:hover { background: var(--navy); }

.rsa-fullscreen-btn {
  padding: 8px 20px; background: #f3f4f6; border: 1px solid #d1d5db;
  border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; align-self: flex-end; white-space: nowrap;
  height: 36px; box-sizing: border-box; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}

.rsa-fullscreen-btn:hover { background: #e5e7eb; }

.rsa-summary-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 12px;
}

.rsa-summary-left { display: flex; align-items: center; gap: 10px; }

.rsa-summary-icon { font-size: 20px; }

.rsa-summary-left strong { font-size: 14px; color: var(--navy); }

.rsa-summary-sub { display: block; font-size: 12px; color: #9ca3af; }

/* Tables flow at their natural height; the PAGE scrolls. Sticky thead pins
   below the chrome bar (--chrome-h, declared in tokens.css) so it stays
   visible while the user scrolls down a long grid. The previous
   `max-height: calc(100vh - 220px)` clipped the grid inside its card --
   the user explicitly asked to lift that. `overflow-x: auto` is still
   needed so wide tables can scroll horizontally without overflowing. */
/* Wrap is the scroll container for both axes (sticky thead and sticky-
   left first column both pin to it). Height ceiling = viewport - chrome.
   See `.classic-report-wrap` above for why this is the only model that
   actually works for these tables. */
.rsa-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;
}

.rsa-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-stack); }

/* Sticky thead inside the wrap's scroll context. The Goal row is a
   second TR inside thead (uses td's, not th's); both rows pin together
   because the thead is the sticky element. The opaque background on
   thead prevents tbody rows from peeking through any 1px subpixel gap
   between the header tr and the goal tr while scrolling. */
.rsa-table thead {
  position: sticky; top: 0; z-index: 10;
  background: var(--table-header-bg);
}

.rsa-table th {
  background: var(--table-header-bg); color: var(--navy); padding: 11px 14px; text-align: right;
  font-weight: 600; font-size: 12px; white-space: nowrap;
  border-bottom: 2px solid var(--table-border); cursor: pointer; user-select: none;
  text-transform: uppercase; letter-spacing: 0.4px;
}

.rsa-table th:first-child { text-align: left; position: sticky; left: 0; z-index: 15; background: var(--table-header-bg); min-width: 160px; }

.rsa-table th:hover { background: #E4EAF0; }

.rsa-table th .sort-icon { font-size: 10px; color: #94a3b8; margin-left: 3px; }

.rsa-table td { padding: 9px 14px; border-bottom: 1px solid #f1f3f5; font-size: 13px; text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; }

.rsa-table td:first-child { text-align: left; font-weight: 600; color: var(--navy); font-size: 13px; position: sticky; left: 0; z-index: 5; background: inherit; min-width: 160px; }

/* Goal row is the first row of tbody (see rsa.js). It scrolls with the
   data — used to live inside <thead> for sticky pin, but the freeze let
   tbody rows bleed through during scroll. Unfreezing is cleaner. */
.rsa-table tr.rsa-goal { background: #fef7f0; }
.rsa-table tr.rsa-goal td { background: #fef7f0; font-weight: 700; color: #9a3412; border-bottom: 2px solid #fcd5b4; font-size: 13px; }

.rsa-table tr.rsa-goal td:first-child { color: #c2410c; font-size: 13px; background: #fef7f0; }

.rsa-table tr:hover td { background: #f8fafb; }

.rsa-table tr td:first-child { background: #fff; }

.rsa-table tr:hover td:first-child { background: #f8fafb; }

.rsa-table tr.rsa-goal:hover td { background: #fef7f0; }

.rsa-table tr.rsa-total td { background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; border-top: 2px solid var(--navy-border); }

.rsa-table tr.rsa-total td:first-child { font-size: 14px; background: var(--navy); }

.rsa-table tr.rsa-total:hover td { background: var(--navy-hover); }

.rsa-footer { text-align: right; padding: 12px 0; font-size: 12px; color: #9ca3af; }

.rsa-fullscreen .main-content { margin-left: 0 !important; }

.rsa-fullscreen .main { margin-left: 0 !important; }

.rsa-fullscreen .sidebar { display: none !important; width: 0 !important; }

.rsa-fullscreen .sidebar.collapsed + .main { margin-left: 0 !important; }

.rsa-fullscreen .page-header { display: none !important; }

.rsa-fullscreen .top-bar { display: none !important; }

.rsa-fullscreen .sticky-header-wrap { display: none !important; }

.rsa-fullscreen .shared-filter-bar { display: none !important; }

.rsa-fullscreen #rsaView {
  padding: 56px 16px 16px; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; overflow: auto;
  background: var(--light-bg); z-index: 9999;
}

.rsa-fullscreen .rsa-table thead { top: 0 !important; }

#fullscreenExitFloater { display: none; }

.rsa-fullscreen #fullscreenExitFloater {
  display: inline-flex; align-items: center; gap: 6px;
  position: fixed; top: 12px; right: 16px; z-index: 10002;
  padding: 8px 18px; border-radius: 24px;
  background: var(--navy); color: #fff; border: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  font-family: var(--font-stack); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,59,74,0.35);
  transition: background 0.15s;
}

.rsa-fullscreen #fullscreenExitFloater:hover { background: #002833; }

.tree-controls {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #E5E7EB;
  flex-wrap: wrap; gap: 8px;
  position: sticky; top: 42px; z-index: 35;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.tree-controls > #treeExportBtn { margin-left: auto; }

.tree-date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tree-date-range label { font-size: 13px; font-weight: 600; color: var(--navy); }

/* Detailed Report controls -- aligned to the shared filter bar styles
   (.preset-btn / .filter-group input / .filter-group select) so this view's
   header looks the same as RSA / HR Min / Bedding / Sales Performance.
   Previously these were taller/bolder with an orange active state, which
   made the Detailed Report visually inconsistent with the rest of the portal. */
.tree-date-input {
  padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 12px; font-family: var(--font-stack); background: #fff; color: var(--navy);
  box-sizing: border-box;
}
.tree-date-input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(63,115,141,0.15); }

.tree-apply-btn {
  padding: 4px 12px; background: var(--primary-blue); color: #fff; border: none;
  border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s; box-sizing: border-box;
}
.tree-apply-btn:hover { background: var(--navy); }

.tree-presets { display: flex; gap: 6px; }

.tree-date-sep { font-size: 12px; color: #6b7280; }

.tree-filter-select {
  padding: 4px 22px 4px 6px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 12px; font-family: var(--font-stack); background: #fff; color: var(--navy);
  cursor: pointer; min-width: 110px; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.tree-filter-select:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(63,115,141,0.15); }

.tree-preset-btn {
  padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 11px; background: #fff; cursor: pointer; font-family: var(--font-stack);
  color: #374151; transition: all 0.15s; white-space: nowrap;
}
.tree-preset-btn:hover { background: var(--icy-blue); border-color: var(--primary-blue); }
.tree-preset-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.tree-search-input {
  padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 24px;
  font-size: 12px; font-family: var(--font-stack); width: 200px; height: 32px; box-sizing: border-box;
  background: #f9fafb; transition: all 0.15s;
}

.tree-search-input:focus { outline: none; border-color: var(--primary-blue); background: #fff; box-shadow: 0 0 0 3px rgba(63,115,141,0.1); }

.tree-search-input::placeholder { color: #9ca3af; }

.tree-table-wrapper {
  position: relative; background: #fff;
  border: 1px solid var(--table-border); border-radius: 6px; overflow: hidden;
}

/* Wrap is the scroll container for both axes -- sticky thead pins to
   wrap top:0, sticky-left first column pins to wrap left:0. The
   max-height fills viewport minus chrome (--chrome-h) so the grid
   feels tall, not cramped. */
.tree-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - var(--chrome-h, 92px) - 12px);
}

.tree-table {
  width: max-content; min-width: 100%; border-collapse: collapse;
  font-size: 13px; line-height: 1.35;
}

.tree-table thead { position: sticky; top: 0; z-index: 10; }

/* Headers wrap to two lines so columns stay narrow ("NET SALES / VS. LY"
   instead of one long row), but the font itself stays readable. The
   vertical-align keeps wrap text settled at the bottom of the row so a
   long header doesn't shove neighbors out of alignment. */
.tree-table th {
  background: var(--table-header-bg); color: var(--navy);
  padding: 8px 8px;
  text-align: right; font-size: 11px; font-weight: 700;
  white-space: normal; cursor: pointer; user-select: none;
  border-bottom: 2px solid #e2e5e9;
  text-transform: uppercase; letter-spacing: 0.3px;
  vertical-align: bottom; line-height: 1.25;
  max-width: 96px;
}

.tree-table th:hover { background: #E4EAF0; }

.tree-table th.tree-sorted { background: #E4EAF0; color: var(--navy); }

.tree-table th.tree-name-col, .tree-table td.tree-name-col {
  position: sticky; left: 0; z-index: 5;
  text-align: left; min-width: 180px; max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tree-table th.tree-name-col { z-index: 15; background: var(--table-header-bg); color: var(--navy); max-width: 240px; }

.tree-table td {
  padding: 6px 8px; text-align: right; border-bottom: 1px solid #f1f3f5;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.tree-row.tree-total td { background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; }

.tree-row.tree-total td.tree-name-col { background: var(--navy); color: #fff; font-size: 14px; }

/* Keep the navy bar continuous across the Total row -- the per-cell
   green/red tints from cell-light-green / cell-light-red were breaking the
   header bar visually. Inside the Total row, all delta-cell tints fall back
   to navy + white, with the +/- sign carrying the direction. */
.tree-row.tree-total td.cell-green,
.tree-row.tree-total td.cell-light-green,
.tree-row.tree-total td.cell-yellow,
.tree-row.tree-total td.cell-light-red,
.tree-row.tree-total td.cell-red {
  background: var(--navy) !important; color: #fff !important;
}
.tree-row.tree-total td .tree-pos,
.tree-row.tree-total td .tree-neg {
  color: #fff !important;
}

.tree-row.tree-total:hover td { background: var(--navy-hover); }

.tree-row.tree-total td.cell-red { background: var(--navy) !important; color: #fff !important; }

.tree-row.tree-total:hover td.cell-red { background: var(--navy-hover) !important; }

.tree-row.tree-total .tree-neg { color: #fff !important; }

/* Hierarchy bands -- Total navy, Region medium tint, Market lighter tint,
   Store white. The deltas between levels are now large enough that the eye
   immediately sees the nesting; the previous palette was so subtle that
   Region / Market / Store all read as "white-ish row". */
.tree-row.tree-region td { background: var(--row-region-bg); color: var(--navy); font-weight: 700; font-size: var(--fs-body); }
.tree-row.tree-region td.tree-name-col { background: var(--row-region-bg); }
.tree-row.tree-region:hover td { background: var(--row-region-bg-hover); }
.tree-row.tree-region:hover td.tree-name-col { background: var(--row-region-bg-hover); }

.tree-row.tree-market td { background: var(--row-market-bg); color: #1e293b; font-weight: 600; font-size: var(--fs-body); }
.tree-row.tree-market td.tree-name-col { background: var(--row-market-bg); }
.tree-row.tree-market:hover td { background: var(--row-market-bg-hover); }
.tree-row.tree-market:hover td.tree-name-col { background: var(--row-market-bg-hover); }

.tree-row.tree-store td { background: var(--row-store-bg); font-size: var(--fs-body); }
.tree-row.tree-store td.tree-name-col { background: var(--row-store-bg); font-weight: 500; }
.tree-row.tree-store:hover td { background: var(--row-store-bg-hover); }
.tree-row.tree-store:hover td.tree-name-col { background: var(--row-store-bg-hover); }

.tree-row.tree-rsa td { background: var(--row-store-bg); color: #555; font-size: 12px; }
.tree-row.tree-rsa td.tree-name-col { background: var(--row-store-bg); color: #64748b; font-weight: 400; padding-left: 40px; }
.tree-row.tree-rsa:hover td { background: var(--row-store-bg-hover); }
.tree-row.tree-rsa:hover td.tree-name-col { background: var(--row-store-bg-hover); }

.tree-arrow {
  cursor: pointer; display: inline-block; width: 16px; text-align: center;
  font-size: 10px; color: inherit; opacity: 0.7; transition: opacity 0.15s;
}

.tree-arrow:hover { opacity: 1; }

.tree-pos { color: #059669; font-weight: 600; }

.tree-neg { color: #dc2626; font-weight: 600; }

/* Signal tints. Strong (cell-green / cell-red) for "hit goal" / "miss
   goal" calls in RSA. Soft (cell-light-green / cell-light-red) for delta
   columns where direction matters but the row shouldn't shout. */
.cell-green       { background: var(--signal-green-bg)      !important; color: var(--signal-green-text) !important; }
.cell-light-green { background: var(--signal-green-bg-soft) !important; color: var(--signal-green-text) !important; }
.cell-yellow      { background: var(--signal-yellow-bg)     !important; color: var(--signal-yellow-text) !important; }
.cell-red         { background: var(--signal-red-bg)        !important; color: var(--signal-red-text) !important; }
.cell-light-red   { background: var(--signal-red-bg-soft)   !important; color: var(--signal-red-text) !important; }

/* Goal-line under column headers (e.g. "Goal $250") */
.goal-mini { display: block; font-size: 9px; font-weight: 500; color: #d97706; letter-spacing: 0.3px; margin-top: 2px; text-transform: none; }

/* HR Floor banner -- above the Min Standards table. Replaces the in-table goal row
   for clean separation from sticky thead. Mirrors the orange tone used by the
   RSA Leaderboard goal row. */
.hr-floor-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 10px 16px; margin: 0 0 12px;
  background: #fef7f0;
  border: 1px solid #fcd5b4;
  border-left: 3px solid var(--ashley-orange);
  border-radius: 8px;
  font-size: 13px;
}
.hr-floor-label {
  color: #c2410c; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; font-size: 11px;
}
.hr-floor-pill {
  background: #fff; padding: 4px 10px; border-radius: 16px;
  border: 1px solid #fcd5b4; color: #9a3412; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hr-floor-pill .hr-floor-metric {
  color: #6b7280; font-weight: 500; margin-right: 4px;
}
.hr-floor-source {
  margin-left: auto; color: #9ca3af; font-size: 11px; font-style: italic;
}

/* HR Min Standards table -- now matches RSA Leaderboard with sticky header
   and sticky-left "Sales Associate" column. The wrap is scrollable on both
   axes so the freeze actually has somewhere to freeze against. */
.hr-min-table-wrap {
  overflow-x: auto; overflow-y: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid var(--table-border);
  border-radius: 10px;
  background: #fff;
  margin-top: 0;
}
.hr-min-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-stack);
  table-layout: auto;
}
.hr-min-table thead {
  position: sticky; top: 0; z-index: 10;
  background: var(--table-header-bg);
}
.hr-min-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4b5563;
  text-align: right;
  background: var(--table-header-bg);
  border-bottom: 2px solid var(--table-border);
  white-space: nowrap;
}
.hr-min-table th:first-child {
  text-align: left; min-width: 160px;
  position: sticky; left: 0; z-index: 15;
  background: var(--table-header-bg);
}
.hr-min-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 13px;
  text-align: right;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hr-min-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  min-width: 160px;
  position: sticky; left: 0; z-index: 5;
  background: #fff;
}
.hr-min-table tr:hover td { background: #f8fafb; }
.hr-min-table tr:hover td:first-child { background: #f8fafb; }

/* HR Floor goal row pinned at the top of the table body. Cream tint matches
   the "RSA Goal" row styling on the RSA Leaderboard so the two policy views
   share visual vocabulary. Stronger weight + tabular-nums so the floor
   numbers line up cleanly under each metric column. Hover suppressed so the
   row reads as a benchmark, not a clickable data row. */
.hr-min-table tr.hr-min-floor-row td,
.hr-min-table tr.hr-min-floor-row td:first-child {
  background: var(--contest-soft);
  color: var(--navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--contest-soft-border);
}
.hr-min-table tr.hr-min-floor-row:hover td,
.hr-min-table tr.hr-min-floor-row:hover td:first-child {
  background: var(--contest-soft);
}

/* HR Min Standards has 4 KPI cards, not 6 -- stretch to fill the row. */
#hrMinKpiRow { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 900px) {
  #hrMinKpiRow { grid-template-columns: repeat(2, 1fr) !important; }
}

/* HR Min toolbar -- search input + count, lives between KPIs and the table. */
.hr-min-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
}
.hr-min-search {
  flex: 0 0 280px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-stack);
  font-size: 13px;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-min-search:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(63,115,141,0.15);
}
.hr-min-search::placeholder { color: #9ca3af; }
.hr-min-count { font-size: 12px; color: #6b7280; font-weight: 500; }

/* Standard "above the data" toolbar -- holds CSV button + optional search +
   optional Full screen. Used by RSA Leaderboard and HR Min Standards.
   Bedgear iframe has its own equivalent inside the iframe itself. */
.view-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.view-toolbar .view-toolbar-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.view-toolbar .view-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.view-toolbar input[type="search"] {
  flex: 0 0 280px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-stack); font-size: 13px;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.view-toolbar input[type="search"]:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(63,115,141,0.15);
}
.view-toolbar input[type="search"]::placeholder { color: #9ca3af; }
.view-toolbar .view-toolbar-count { font-size: 12px; color: #6b7280; font-weight: 500; }
.rsa-fullscreen .view-toolbar { display: none !important; }
.hr-floor-banner .hr-floor-csv {
  margin-left: auto;
  height: 28px;
  padding: 4px 14px;
  font-size: 12px;
}
.hr-floor-banner .hr-floor-search {
  margin-left: auto;
  flex: 0 0 220px;
  padding: 6px 10px;
  border: 1px solid #fcd5b4;
  border-radius: 16px;
  background: #fff;
  font-family: var(--font-stack);
  font-size: 12px;
  color: var(--navy);
  outline: none;
  height: 28px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-floor-banner .hr-floor-search:focus {
  border-color: var(--ashley-orange);
  box-shadow: 0 0 0 2px rgba(246,140,44,0.2);
}
.hr-floor-banner .hr-floor-search::placeholder { color: #c2810c; opacity: 0.6; }
/* When the search is present, CSV button keeps its right-edge spacing -- override
   the earlier margin-left:auto on .hr-floor-csv since search now claims that. */
.hr-floor-banner .hr-floor-search + .hr-floor-csv { margin-left: 6px; }