/*--------------------------------------------------------------
# BetTrackr dashboard stylesheet - dashboard_v2.css (token-driven dark)
#
# Widget cards, stat values/labels, filter controls, chart sizing,
# and the edit-mode widget picker.
#
# Requires tokens_v1.css AND theme_v1.css to be loaded first
# (in that order, before this file). Form controls (.form-select),
# generic cards, buttons and tone helpers are owned by
# theme_v1.css and are not duplicated here.
#
# Every color resolves to a var(--bettrackr-*) token; there are no
# raw color literals. Per the design system (one green accent,
# everything else muted) the ~20 per-widget saturated icon fills
# have been collapsed into a single neutral chip: a surface-alt
# background with a green icon. Stat values/labels adopt the
# bt-stat-value / bt-stat-label sizing (22px/700 tabular,
# 11px/700 uppercase). Chart container sizing is preserved.
--------------------------------------------------------------*/

/* Widget icon chip - one muted treatment for every widget.
   Kills the old saturated per-widget fills; keeps the green accent. */
.dashboard .card-icon {
  color: var(--bettrackr-primary);
  background: var(--bettrackr-surface-alt);
  font-size: 24px;
  line-height: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: var(--bettrackr-text-muted);
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 20px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--bettrackr-primary);
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--bettrackr-text-muted);
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Dashboard filter select - appearance/layout only; color, bg,
   border, radius and focus ring come from theme_v1.css .form-select.
   The old custom green SVG arrow (which carried a hardcoded hex) is
   dropped so Bootstrap's themed arrow shows instead. */
.section.dashboard .dashboard-filter-select {
  cursor: pointer;
  text-align-last: center; /* Ensures selected option text is centered */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.5rem 2rem;
}

.section.dashboard .form-select option {
  color: var(--bettrackr-text);
}

/* Hover effect */
.section.dashboard .form-select:hover {
  background-color: var(--bettrackr-surface-hover);
}

/* Custom styling for the form-select elements */
.section.dashboard .form-select {
  font-family: inherit;
  font-weight: normal;
}

/* Focus effect for accessibility */
.section.dashboard .form-select:focus {
  box-shadow: 0 0 0 0.2rem var(--bettrackr-focus-ring);
  outline: none;
}

/* Compact widget picker tile - card recipe: surface bg, no border. */
.compact-widget {
  width: 115px; /* Compact size */
  background: var(--bettrackr-surface);
  border: none;
  border-radius: var(--bettrackr-r-card);
}

/* Stat value - bt-stat-value sizing (22px / 700 / tabular). */
.widget-value {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bettrackr-text);
  margin: 4px 0;
}

/* Stat label - bt-stat-label sizing (11px / 700 / uppercase). */
.widget-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bettrackr-text-muted);
}

.widget-col {
  transition: all 0.3s ease;
}

.widget-expanded {
  flex: 0 0 100%;
  max-width: 100%;
  transition: flex 0.3s ease, max-width 0.3s ease;
}

.dashboard.edit {
  background-color: var(--bettrackr-surface-alt);
  padding: 10px;
  border-radius: var(--bettrackr-r-card);
}

.dashboard.edit .compact-widget:hover {
  cursor: pointer;
}
.dashboard.edit .compact-widget.inactive:hover {
  opacity: 0.8;
  filter: grayscale(0%);
  box-shadow: var(--bettrackr-shadow);
  transform: scale(1.03);
}

/* Chart container sizing (preserved). */
.widget-col canvas {
  max-height: 400px;
}
.widget-col.widget-expanded canvas {
  max-height: 600px !important;
}

.compact-widget.inactive {
  opacity: 0.6;
  filter: grayscale(60%);
  user-select: none;
  transition: opacity 0.2s ease, filter 0.2s ease; /* smooth fade */
}

.delete-link:hover {
  text-decoration: underline !important;
}

/* Per-widget icon accents: one hue per widget (tokens_v1.css widget accent set), wash background */

.revenue-card .card-icon {
  color: var(--bettrackr-widget-revenue);
  background: color-mix(in srgb, var(--bettrackr-widget-revenue) 16%, transparent);
}

.turnover-card .card-icon {
  color: var(--bettrackr-widget-turnover);
  background: color-mix(in srgb, var(--bettrackr-widget-turnover) 16%, transparent);
}

.customers-card .card-icon {
  color: var(--bettrackr-widget-customers);
  background: color-mix(in srgb, var(--bettrackr-widget-customers) 16%, transparent);
}

.win-rate-card .card-icon {
  color: var(--bettrackr-widget-win-rate);
  background: color-mix(in srgb, var(--bettrackr-widget-win-rate) 16%, transparent);
}

.bonus-retention-card .card-icon {
  color: var(--bettrackr-widget-bonus-retention);
  background: color-mix(in srgb, var(--bettrackr-widget-bonus-retention) 16%, transparent);
}

.mug-bet-rate-card .card-icon {
  color: var(--bettrackr-widget-mug-bet-rate);
  background: color-mix(in srgb, var(--bettrackr-widget-mug-bet-rate) 16%, transparent);
}

.roi-card .card-icon {
  color: var(--bettrackr-widget-roi);
  background: color-mix(in srgb, var(--bettrackr-widget-roi) 16%, transparent);
}

.average-profit-card .card-icon {
  color: var(--bettrackr-widget-average-profit);
  background: color-mix(in srgb, var(--bettrackr-widget-average-profit) 16%, transparent);
}

.widget-pending-card .card-icon {
  color: var(--bettrackr-widget-pending);
  background: color-mix(in srgb, var(--bettrackr-widget-pending) 16%, transparent);
}

.widget-ev-card .card-icon {
  color: var(--bettrackr-widget-ev);
  background: color-mix(in srgb, var(--bettrackr-widget-ev) 16%, transparent);
}

.widget-shared-card .card-icon {
  color: var(--bettrackr-widget-shared);
  background: color-mix(in srgb, var(--bettrackr-widget-shared) 16%, transparent);
}

.widget-exposure-card .card-icon {
  color: var(--bettrackr-widget-exposure);
  background: color-mix(in srgb, var(--bettrackr-widget-exposure) 16%, transparent);
}

.widget-bonus-balance-card .card-icon {
  color: var(--bettrackr-widget-bonus-balance);
  background: color-mix(in srgb, var(--bettrackr-widget-bonus-balance) 16%, transparent);
}

.widget-commission-card .card-icon {
  color: var(--bettrackr-widget-commission);
  background: color-mix(in srgb, var(--bettrackr-widget-commission) 16%, transparent);
}

.widget-cashflow-card .card-icon {
  color: var(--bettrackr-widget-cashflow);
  background: color-mix(in srgb, var(--bettrackr-widget-cashflow) 16%, transparent);
}

.average-odds-card .card-icon {
  color: var(--bettrackr-widget-average-odds);
  background: color-mix(in srgb, var(--bettrackr-widget-average-odds) 16%, transparent);
}

.average-stake-card .card-icon {
  color: var(--bettrackr-widget-average-stake);
  background: color-mix(in srgb, var(--bettrackr-widget-average-stake) 16%, transparent);
}

.avg-clv-card .card-icon {
  color: var(--bettrackr-widget-avg-clv);
  background: color-mix(in srgb, var(--bettrackr-widget-avg-clv) 16%, transparent);
}

.beat-line-card .card-icon {
  color: var(--bettrackr-widget-beat-line);
  background: color-mix(in srgb, var(--bettrackr-widget-beat-line) 16%, transparent);
}

.widget-balance-card .card-icon {
  color: var(--bettrackr-widget-balance);
  background: color-mix(in srgb, var(--bettrackr-widget-balance) 16%, transparent);
}
/* Filters pill: matches .period-chip-select so the chip row reads
   as one family of controls. */
.filter-pill {
  cursor: pointer;
  background-color: var(--bettrackr-surface);
  color: var(--bettrackr-text);
  border: 0;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-weight: normal;
}

.filter-pill .bi-filter {
  color: var(--bettrackr-primary);
}

.filter-pill:hover,
.filter-pill:focus {
  background-color: var(--bettrackr-surface-hover);
  color: var(--bettrackr-text);
}
/* Widget glow: the icon chip and value carry a soft halo in their own
   color (currentColor picks up each widget's accent hue / value tone). */
.dashboard .card-icon {
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 30%, transparent);
}

.dashboard .card-icon i {
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent));
}

.dashboard .widget-value,
.dashboard .widget-value span {
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 35%, transparent);
}