/* Theme override tokens */
:root {
  --brand-primary: #94a3b8; /* lighter slate */
  --brand-primary-dark: #64748b; /* slate */
  --brand-secondary: #121212;
  --brand-accent: #cbd5e1; /* light accent */
  --sidebar-bg: #64748b;
  --navbar-bg: #64748b;
}

/* Navbar */
.navbar-inverse {
  background-color: var(--navbar-bg) !important;
  border-color: var(--navbar-bg) !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
  color: #fff !important;
}

/* Sidebar */
.sidebar { background-color: var(--sidebar-bg) !important; }

.navigation > li.active > a,
.navigation > li.active > a:hover,
.navigation > li.active > a:focus {
  background-color: var(--brand-secondary) !important;
  color: #fff !important;
}

/* Buttons - use neutral tone to avoid bright reds */
.btn-primary,
.btn-info,
.btn-danger,
.btn-success {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-danger:hover,
.btn-success:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

/* Datatables export button alignment with site */
.dt-button {
  background-color: var(--brand-primary) !important;
  border: none !important;
  color: #fff !important;
}
.dt-button:hover {
  background-color: var(--brand-primary-dark) !important;
}

/* Links and accents */
a { color: var(--brand-primary-dark); }
a:hover { color: #475569; }

/* Headings accents */
.page-title, h1, h2, h3, h4 {
  color: var(--brand-secondary);
}

/* Neutralize blue/indigo/info backgrounds to gray */
.bg-primary,
.bg-primary-300,
.bg-primary-400,
.bg-primary-600,
.bg-primary-700,
.bg-primary-800,
.bg-info,
.bg-info-300,
.bg-info-400,
.bg-info-600,
.bg-info-700,
.bg-info-800,
.bg-indigo,
.bg-indigo-300,
.bg-indigo-400,
.bg-indigo-600,
.bg-indigo-700,
.bg-indigo-800,
.bg-blue,
.bg-blue-300,
.bg-blue-400,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-teal,
.bg-teal-300,
.bg-teal-400,
.bg-teal-600,
.bg-teal-700,
.bg-teal-800 {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Neutralize text and border helpers */
.text-primary,
.text-primary-300,
.text-primary-400,
.text-primary-600,
.text-primary-700,
.text-primary-800,
.text-info,
.text-info-300,
.text-info-400,
.text-info-600,
.text-info-700,
.text-info-800 {
  color: var(--brand-primary-dark) !important;
}

.border-primary,
.border-primary-300,
.border-primary-400,
.border-primary-600,
.border-primary-700,
.border-primary-800,
.border-info,
.border-info-300,
.border-info-400,
.border-info-600,
.border-info-700,
.border-info-800 {
  border-color: var(--brand-primary) !important;
}

/* Panels, labels, badges */
.panel-primary > .panel-heading,
.panel-info > .panel-heading {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.label-primary,
.label-info,
.badge-primary,
.badge-info {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Project-specific: override custom blue class */
.bg-datagate {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
.btn.bg-datagate:hover,
.bg-datagate:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}