/* KPI drill-down — selected tile + clickable tiles */
.kpi-drill-clickable {
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.kpi-drill-clickable:active {
  transform: scale(0.98);
}
/* clip-path tiles clip outer rings — use inset glow + brighter fill */
#daily-top-grid .kpi-tile.kpi-drill-selected,
#month-mtd-grid .kpi-tile.month-perf-kpi-selected {
  z-index: 3;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kpi-accent) 55%, transparent) 0%, transparent 50%),
    #0b1220 !important;
  box-shadow: inset 0 0 0 3px #38bdf8, inset 0 0 22px rgba(56, 189, 248, 0.45) !important;
}
#daily-top-grid .kpi-tile.kpi-drill-selected::before,
#month-mtd-grid .kpi-tile.month-perf-kpi-selected::before {
  opacity: 1;
  width: 5px;
  box-shadow: 0 0 12px var(--kpi-accent);
}
.kpi-drill-csa-clickable {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.kpi-drill-csa-clickable:hover {
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}
.kpi-drill-csa-selected {
  background: rgba(56, 189, 248, 0.2) !important;
  box-shadow: inset 4px 0 0 #38bdf8, 0 0 0 2px rgba(56, 189, 248, 0.85) !important;
}
.chart-panel.kpi-drill-mode .chart-view-toggle,
.chart-panel.kpi-drill-mode #chart-toggles,
.chart-panel.kpi-drill-mode .chart-interval-wrap {
  display: none !important;
}
.chart-panel.kpi-drill-mode #chart-desc::after {
  content: " · Tap a bar for that day's CSA rankings · tap a CSA for their worked days · tap again to clear";
  color: #64748b;
}
.chart-panel.kpi-drill-csa-mode #chart-desc::after {
  content: " · Bars show days this CSA worked · tap again to clear";
  color: #64748b;
}
.chart-panel.kpi-drill-csa-mode.kpi-drill-cap #chart-desc::after {
  content: " · Personal cap when POS data exists; otherwise site cap on days they worked · tap again to clear";
  color: #64748b;
}
#csa-rankings-panel.kpi-drill-rank-focus {
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35);
}
.kpi-drill-rank-date {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0.15rem;
}

/* Mobile drill-down: taller chart + easier tap targets (dashboard only) */
@media (max-width: 1400px) {
  body:not(.display-mode) .chart-panel.kpi-drill-mode #chart-viewport-box {
    height: clamp(11rem, 36vh, 14.5rem) !important;
    min-height: 11rem !important;
  }
  body:not(.display-mode) #daily-top-grid .kpi-drill-clickable {
    touch-action: manipulation;
  }
  body:not(.display-mode) .kpi-drill-csa-clickable {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(56, 189, 248, 0.15);
  }
  body:not(.display-mode) .chart-panel.kpi-drill-mode #chart-viewport-box canvas {
    touch-action: manipulation;
  }
}
@media (max-width: 1400px) and (orientation: landscape) {
  body:not(.display-mode) .chart-panel.kpi-drill-mode #chart-viewport-box {
    height: clamp(11.5rem, 40vh, 15rem) !important;
    min-height: 11.5rem !important;
  }
}

/* Performance (Month) desktop drill-down */
.month-perf-chart-wrap {
  border-bottom: 1px solid #334155;
}
.month-perf-chart-box {
  height: 16rem;
  position: relative;
}
.month-perf-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}
body:not(.display-mode) .month-perf-kpi-clickable {
  cursor: pointer;
}
.month-perf-csa-clickable {
  cursor: pointer;
}
#matrix-tbody tr.month-perf-csa-selected,
#matrix-tbody tr.month-perf-csa-selected .matrix-name {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #7dd3fc !important;
}
#matrix-tbody tr.month-perf-csa-selected .matrix-name {
  box-shadow: inset 4px 0 0 #38bdf8;
}
.month-perf-footer-clickable {
  cursor: pointer;
}
#matrix-tfoot tr.month-perf-footer-selected .matrix-totals-label {
  box-shadow: inset 4px 0 0 #38bdf8;
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
}
/* Footer chart mode: hide numbers, keep row height; overlay chart on value area */
#month-matrix-panel.month-perf-footer-mode #matrix-tfoot .matrix-totals-cell {
  visibility: hidden !important;
}
.month-footer-chart-panel {
  position: absolute;
  z-index: 12;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.55rem 0.3rem;
  box-sizing: border-box;
  background: #0f172a;
  border-left: 1px solid #334155;
  pointer-events: none;
}
.month-footer-chart-panel:not(.hidden) {
  pointer-events: auto;
}
.month-perf-footer-chart-head {
  flex: 0 0 auto;
  margin-bottom: 0.1rem;
}
.month-perf-footer-chart-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  line-height: 1.2;
}
.month-perf-footer-chart-hint {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  color: #64748b;
  line-height: 1.2;
}
.month-perf-footer-chart-box {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.month-perf-footer-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}
#month-perf-back-btn.hidden {
  display: none !important;
}
@media (max-width: 1400px) {
  #month-perf-chart-wrap.hidden,
  .rev-mobile-chart-wrap.hidden {
    display: none !important;
  }
  #month-perf-chart-wrap:not(.hidden),
  .rev-mobile-chart-wrap:not(.hidden) {
    display: block !important;
  }
  #month-perf-chart-wrap:not(.hidden) .month-perf-chart-box,
  .rev-mobile-chart-wrap:not(.hidden) .month-perf-chart-box {
    height: clamp(11rem, 36vh, 14.5rem) !important;
    min-height: 11rem !important;
    position: relative;
  }
  .month-footer-chart-panel,
  #revenue-hist-chart-panel,
  #revenue-day-chart-panel {
    display: none !important;
  }
  body:not(.display-mode) .month-perf-kpi-clickable,
  body:not(.display-mode) .rev-drill-clickable,
  #rev-day-tbody td.rev-metric-label.rev-row-clickable {
    cursor: pointer;
    touch-action: manipulation;
  }
}
body.display-mode #month-perf-chart-wrap {
  display: none !important;
}

/* Revenue matrix desktop drill-down */
body:not(.display-mode) .rev-drill-clickable {
  cursor: pointer;
}
#revenue-mtd-grid .rev-drill-kpi-tile.month-perf-kpi-selected,
#revenue-stats-grid .rev-drill-kpi-tile.month-perf-kpi-selected {
  z-index: 3;
  box-shadow: inset 0 0 0 3px #10b981, inset 0 0 22px rgba(16, 185, 129, 0.35) !important;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, transparent 50%),
    #0b1220 !important;
}
#rev-day-tbody td.rev-metric-label.rev-row-clickable {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#rev-day-tbody td.rev-metric-label.rev-row-selected {
  box-shadow: inset 4px 0 0 #10b981;
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}
#revenue-day-panel.rev-day-chart-mode #rev-day-thead,
#revenue-day-panel.rev-day-chart-mode #rev-day-tbody td:not(.rev-metric-label) {
  visibility: hidden !important;
}
.rev-day-chart-panel .month-perf-footer-chart-box {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.rev-hist-full-chart-panel {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.55rem 0.35rem;
  box-sizing: border-box;
  background: #1e293b;
  pointer-events: none;
}
.rev-hist-full-chart-panel:not(.hidden) {
  pointer-events: auto;
}
.rev-hist-chart-title {
  flex: 0 0 auto;
  margin: 0 0 0.35rem;
  padding: 0 0.15rem;
}
.rev-hist-chart-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.rev-hist-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
@media (min-width: 1401px) {
  body:not(.display-mode) #view-revenue #revenue-hist-panel.rev-hist-chart-mode {
    flex: 0.6 1 0%;
    min-height: 0;
    max-height: 26rem;
  }
}
#revenue-hist-panel.rev-hist-chart-mode #revenue-hist-caption,
#revenue-hist-panel.rev-hist-chart-mode #revenue-hist-note,
#revenue-hist-panel.rev-hist-chart-mode #revenue-hist-pace-approx,
#revenue-hist-panel.rev-hist-chart-mode #revenue-hist-scroll {
  visibility: hidden !important;
}
@media (max-width: 1400px) {
  #revenue-hist-chart-panel,
  #revenue-day-chart-panel {
    display: none !important;
  }
}
body.display-mode #revenue-hist-chart-panel,
body.display-mode #revenue-day-chart-panel {
  display: none !important;
}