:root {
  --vdm-bg: #1f2327;
  --vdm-surface: #2b3035;
  --vdm-surface-alt: #343a40;
  --vdm-border: #495057;
  --vdm-border-strong: #7a8896;
  --vdm-text: #f8f9fa;
  --vdm-text-muted: #cfd4da;
  --vdm-text-subtle: #9aa3ab;
  --vdm-primary: #0d6efd;
  --vdm-primary-strong: #0b5ed7;
  --vdm-primary-soft: #66b2ff;
  --vdm-secondary: #5c6770;
  --vdm-secondary-strong: #6f7b87;
  --vdm-secondary-quiet: #4a535c;
  --vdm-danger: #dc3545;
  --vdm-radius: 0.375rem;
  --vdm-focus-ring: 0 0 0 0.15rem rgba(13, 110, 253, 0.35);
  --vdm-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Base layout */
body, .app-entry {
  background-color: var(--vdm-bg);
  color: var(--vdm-text);
}

/* Navbar */
.vdm-navbar-logo {
  height: auto;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  mix-blend-mode: lighten;
  opacity: 0.6;
  filter: hue-rotate(110deg) saturate(80%);
}

.card, .dbc-card, .dash-card {
  background-color: var(--vdm-surface);
  border-color: var(--vdm-border);
  color: var(--vdm-text);
  border-radius: var(--vdm-radius);
}

/* Buttons */
.btn {
  border-width: 1px;
  border-radius: var(--vdm-radius);
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.btn:focus-visible {
  box-shadow: var(--vdm-focus-ring);
}
.btn-primary {
  background-color: var(--vdm-primary);
  border-color: var(--vdm-primary);
  color: #fff;
}

/* Provider badge custom colors */
.vdm-provider-poe {
  background-color: #6f42c1; /* bootstrap "purple" */
  color: #fff;
}

/* Recency dot used by Metrics grids + KPI cards */
.vdm-recency-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
  background-color: var(--vdm-primary-strong);
  border-color: var(--vdm-primary-strong);
}
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  background-color: var(--vdm-primary-strong);
  border-color: var(--vdm-primary-strong);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: #335c9c;
  border-color: #335c9c;
  color: #e2e6ea;
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--vdm-secondary);
  border-color: var(--vdm-border-strong);
  color: #fff;
}
.btn-secondary:hover {
  background-color: var(--vdm-secondary-strong);
  border-color: var(--vdm-border-strong);
}
.btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  background-color: #56606a;
  border-color: var(--vdm-border-strong);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  background-color: #474f57;
  border-color: #5a636c;
  color: #ced4da;
  opacity: 0.9;
}

.btn-outline-secondary {
  border-color: var(--vdm-border-strong);
  color: #e2e6ea;
  background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--vdm-secondary-quiet);
  border-color: var(--vdm-border-strong);
  color: #fff;
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  color: var(--vdm-text-subtle);
  border-color: #5a636c;
  background-color: transparent;
  opacity: 0.8;
}

/* Dropdowns (Dash dcc.Dropdown / react-select) */
.Select-control, .Select-menu-outer, .Select-menu, .dash-dropdown {
  background-color: var(--vdm-surface) !important;
  border-color: var(--vdm-primary) !important;
  color: var(--vdm-text) !important;
  border-radius: var(--vdm-radius) !important;
  box-shadow: none !important;
}
.Select-menu-outer, .Select-menu {
  box-shadow: var(--vdm-shadow) !important;
}
.Select-placeholder, .Select--single > .Select-control .Select-value-label, .Select-value-label {
  color: var(--vdm-text-muted) !important;
}
.Select-input > input {
  color: var(--vdm-text) !important;
}
.Select-option {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
}
.Select-option.is-focused {
  background-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}
.Select-clear-zone, .Select-arrow-zone, .Select-clear, .Select-arrow {
  color: #fff !important;
}
.Select-control:hover {
  border-color: var(--vdm-primary-soft) !important;
}
.Select-control.is-open, .Select-control.is-focused {
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
}
.Select--multi .Select-value {
  background-color: var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.dash-dropdown .Select-control {
  background-color: var(--vdm-surface) !important;
  border-color: var(--vdm-primary) !important;
  color: var(--vdm-text) !important;
}
.dash-dropdown .Select-menu-outer {
  box-shadow: var(--vdm-shadow) !important;
}
.dash-dropdown .Select-placeholder {
  color: var(--vdm-text-muted) !important;
}
.dash-dropdown .Select-menu-outer .Select-option.is-focused,
.dash-dropdown .Select-menu .Select-option.is-focused {
  background-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.dash-dropdown .Select-menu-outer .Select-option.is-selected,
.dash-dropdown .Select-menu .Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}
.dash-dropdown .Select-control.is-open,
.dash-dropdown .Select-control.is-focused {
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
}
.dash-dropdown .Select-control:hover {
  border-color: var(--vdm-primary-soft) !important;
}
.dash-dropdown .Select-arrow,
.dash-dropdown .Select-clear,
.dash-dropdown .Select-arrow-zone,
.dash-dropdown .Select-clear-zone {
  color: #fff !important;
}
.dash-dropdown .Select-input > input {
  color: var(--vdm-text) !important;
}
.dash-dropdown .Select--multi .Select-value {
  background-color: var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.dash-dropdown .Select-menu-outer,
.dash-dropdown .Select-menu {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
}
.dash-dropdown .Select-option {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
}
.dash-dropdown .Select-option:hover {
  background-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.dash-dropdown .Select-option.is-focused,
.dash-dropdown .Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}
.dash-dropdown .Select-menu-outer {
  border-color: var(--vdm-primary) !important;
}
.dash-dropdown .Select-control {
  border-width: 1px !important;
}
.dash-dropdown .Select-control:focus-visible {
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
}
.Select--single > .Select-control .Select-value,
.Select--single > .Select-control .Select-value-label {
  color: var(--vdm-text) !important;
}
.Select-placeholder {
  opacity: 0.9 !important;
}
.Select-control:hover .Select-arrow {
  color: #fff !important;
}
.Select-control.is-focused .Select-arrow {
  color: #fff !important;
}

/* Ensure min height for dropdown controls */
.Select-control {
  min-height: 32px !important;
}
.dash-dropdown .Select-control {
  min-height: 32px !important;
}

/* Apply to Dash v2 class as well */
.dash-dropdown .Select {
  color: var(--vdm-text) !important;
}
.dash-dropdown {
  color: var(--vdm-text) !important;
}

/* Fallback for native select elements if any */
select {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
  border-color: var(--vdm-primary) !important;
  border-radius: var(--vdm-radius) !important;
}
select:focus {
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
}
select:hover {
  border-color: var(--vdm-primary-soft) !important;
}

/* Search box helper (if reused) */
.search-input, .search-box input {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
  border-color: var(--vdm-primary) !important;
  border-radius: var(--vdm-radius) !important;
}
.search-input:focus, .search-box input:focus {
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
  border-color: var(--vdm-primary) !important;
}
.search-input::placeholder, .search-box input::placeholder {
  color: var(--vdm-text-muted) !important;
}

/* Force dash-bootstrap-components dropdowns to inherit contrast */
.dash-bootstrap .Select-control,
.dash-bootstrap .Select-menu-outer,
.dash-bootstrap .Select-menu {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
}
.dash-bootstrap .Select-control.is-focused,
.dash-bootstrap .Select-control.is-open {
  border-color: var(--vdm-primary) !important;
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
}
.dash-bootstrap .Select-placeholder {
  color: var(--vdm-text-muted) !important;
}
.dash-bootstrap .Select-option.is-focused,
.dash-bootstrap .Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}

/* Dash default dropdown class hook */
.dcc-dropdown {
  color: var(--vdm-text) !important;
}
.dcc-dropdown .Select-control,
.dcc-dropdown .Select-menu,
.dcc-dropdown .Select-menu-outer {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
}
.dcc-dropdown .Select-control {
  border-color: var(--vdm-primary) !important;
  min-height: 32px !important;
}
.dcc-dropdown .Select-menu {
  box-shadow: var(--vdm-shadow) !important;
}
.dcc-dropdown .Select-placeholder {
  color: var(--vdm-text-muted) !important;
}
.dcc-dropdown .Select-option.is-focused,
.dcc-dropdown .Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}
.dcc-dropdown .Select-control.is-open,
.dcc-dropdown .Select-control.is-focused {
  border-color: var(--vdm-primary) !important;
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
}
.dcc-dropdown .Select-clear,
.dcc-dropdown .Select-arrow,
.dcc-dropdown .Select-clear-zone,
.dcc-dropdown .Select-arrow-zone {
  color: #fff !important;
}
.dcc-dropdown .Select-input > input {
  color: var(--vdm-text) !important;
}
.dcc-dropdown .Select-control:hover {
  border-color: var(--vdm-primary-soft) !important;
}

/* Inputs (reinforce contrast) */
.form-control, .dbc-input, .dash-input {
  background-color: var(--vdm-surface) !important;
  color: var(--vdm-text) !important;
  border-color: var(--vdm-border) !important;
  border-radius: var(--vdm-radius) !important;
}
.form-control:focus, .dbc-input:focus, .dash-input:focus {
  border-color: var(--vdm-primary) !important;
  box-shadow: 0 0 0 1px var(--vdm-primary) !important;
}
.form-control:hover, .dbc-input:hover, .dash-input:hover {
  border-color: var(--vdm-primary-soft) !important;
}

/* Ensure placeholder contrast */
::placeholder {
  color: var(--vdm-text-muted) !important;
}

/* Fix for small dropdown heights in some dbc wrappers */
.dash-dropdown .Select-value-label,
.dcc-dropdown .Select-value-label {
  line-height: 1.2 !important;
}

/* Guarantee text color on Select value */
.Select-value-label {
  color: var(--vdm-text) !important;
}

/* Slight padding for dropdowns to avoid cramped text */
.Select-control,
.dcc-dropdown .Select-control,
.dash-dropdown .Select-control {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Border for menus to improve separation */
.Select-menu-outer,
.dcc-dropdown .Select-menu-outer,
.dash-dropdown .Select-menu-outer {
  border: 1px solid var(--vdm-primary) !important;
}

/* Fallback for old class names */
.Select-menu-outer .Select-option:hover {
  background-color: var(--vdm-primary) !important;
  color: #fff !important;
}
.Select-menu-outer .Select-option.is-selected {
  background-color: var(--vdm-primary-strong) !important;
  color: #fff !important;
}

/* Inputs */
.form-control, .dbc-input, .dash-input {
  background-color: var(--vdm-surface);
  color: var(--vdm-text);
  border-color: var(--vdm-border);
  border-radius: var(--vdm-radius);
}
.form-control:focus, .dbc-input:focus, .dash-input:focus {
  border-color: var(--vdm-primary);
  box-shadow: 0 0 0 1px var(--vdm-primary);
}
.form-text, .text-muted {
  color: var(--vdm-text-muted) !important;
}

/* Spacing utilities for toolbars */
.vdm-toolbar {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* Empty states */
.vdm-empty {
  background-color: var(--vdm-surface);
  border: 1px dashed var(--vdm-border);
  color: var(--vdm-text-muted);
  border-radius: var(--vdm-radius);
  padding: 1rem;
  text-align: center;
}

/* Toast tweaks */
.vdm-toast-wide {
  min-width: 320px;
}

/* Card headers */
.card-header, .dbc-card .card-header {
  background-color: var(--vdm-surface-alt);
  border-bottom-color: var(--vdm-border);
  color: var(--vdm-text);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Navbar compact */
.navbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar .container {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* AG Grid compact row padding */
.ag-theme-quartz .ag-cell,
.ag-theme-alpine .ag-cell {
  padding-top: 4px;
  padding-bottom: 4px;
}
