/* =========================
   FILTERS (SCOPED TO .dashboard-filters)
   ========================= */
.dashboard-filters .filter-wrap { margin-bottom: 20px; }

/* Match the metric cards' surface treatment (radius + soft elevation-2 shadow). */
.dashboard-filters .filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: var(--kp-white); border-radius: 4px; padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); border: 1px solid var(--kp-gray-bs-100);
}

/* MudBlazor control widths (replaces former filter-chip wrappers) */
.dashboard-filters .filter-control { min-width: 0; }
.dashboard-filters .filter-control-md { width: 220px; }
.dashboard-filters .filter-control-lg { width: 320px; }

.dashboard-filters .download-spinner { display: inline-flex; align-items: center; margin-left: 8px; font-size: 18px; color: var(--kp-yellow); }

/* Visibility toggles (scoped) */
.dashboard-filters .filters-desktop { display: block; }
.dashboard-filters .filters-mobile { display: none; }

@media (max-width: 959.95px) {
  .dashboard-filters .filters-desktop { display: none; }
  .dashboard-filters .filters-mobile { display: block; }

  .dashboard-filters .filter-bar { padding: 12px; }
  .dashboard-filters .filter-control,
  .dashboard-filters .filter-control-md,
  .dashboard-filters .filter-control-lg { width: 100% !important; }
}

/* =========================
   METRICS styles (unchanged)
   ========================= */
.metric-current-value { font-size: 2.5rem!important; font-weight: 700!important; color: var(--kp-blue-primary)!important; line-height: 1.2!important; margin: 0!important; }
.trend-arrow { font-size: 1.5rem!important; vertical-align: middle!important; margin-left: 8px!important; }
.trend-arrow.up { color: var(--kp-olive)!important; }
.trend-arrow.down { color: var(--kp-danger-bright)!important; }

/* KÄRCHER Gray button */
.btn-karcher-gray {
  background-color: var(--kp-gray-65) !important;
  color: var(--kp-white) !important;
  border: 1px solid var(--kp-gray-65) !important;
}
.btn-karcher-gray:hover { background-color: var(--kp-gray-65) !important; }
.btn-karcher-gray:active { background-color: var(--kp-gray-65) !important; }
.btn-karcher-gray .mud-button-start-icon { color: inherit !important; }