/* DTS Vision–inspired tokens for VkdocTool (Bootstrap + flat surfaces) */

:root {
  --state-online: #4CAF50;
  --state-offline: #F44336;
  --state-degraded: #FF9800;
  --state-unknown: #9E9E9E;
  --ha-primary: #03A9F4;
  --ha-primary-dark: #0288D1;
  --vision-sidebar-width: 256px;
  --vision-radius: 12px;
  --vision-surface: #ffffff;
  --vision-background: #f5f5f5;
  --vision-sidebar-bg: #ffffff;
  --vision-border: rgba(0, 0, 0, 0.12);
  --vision-text: rgba(0, 0, 0, 0.87);
  --vision-text-secondary: rgba(0, 0, 0, 0.6);
  --vision-nav-active-bg: rgba(3, 169, 244, 0.12);
  --vision-hover: rgba(3, 169, 244, 0.06);
  --bs-primary: #03A9F4;
  --bs-primary-rgb: 3, 169, 244;
  --bs-link-color: #03A9F4;
  --bs-link-hover-color: #0288D1;
  --bs-body-bg: var(--vision-background);
  --bs-body-color: var(--vision-text);
  --bs-border-color: var(--vision-border);
}

html.vision-dark,
body.vision-dark,
.vision-dark {
  --vision-surface: #1c1c1c;
  --vision-background: #111111;
  --vision-sidebar-bg: #1c1c1c;
  --vision-border: rgba(255, 255, 255, 0.12);
  --vision-text: rgba(255, 255, 255, 0.87);
  --vision-text-secondary: rgba(255, 255, 255, 0.6);
  --vision-nav-active-bg: rgba(3, 169, 244, 0.18);
  --vision-hover: rgba(3, 169, 244, 0.1);
  color-scheme: dark;
}

html, body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--vision-background);
  color: var(--vision-text);
}

.status-online { color: var(--state-online); }
.status-offline { color: var(--state-offline); }
.status-degraded { color: var(--state-degraded); }
.status-unknown { color: var(--state-unknown); }

.vision-page-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--vision-text);
  margin: 0 0 0.25rem;
}

.vision-page-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vision-text-secondary);
  margin: 0 0 1rem;
}

.vision-card {
  background: var(--vision-surface);
  border: 1px solid var(--vision-border);
  border-radius: var(--vision-radius);
  box-shadow: none !important;
  color: var(--vision-text);
}

.vision-section {
  margin-bottom: 1.5rem;
}

.vision-section-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--vision-text);
}

.vision-table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--vision-text);
  --bs-table-border-color: var(--vision-border);
  --bs-table-hover-bg: var(--vision-hover);
}

.vision-table thead th {
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--vision-text-secondary);
  border-bottom-width: 1px;
}

.vision-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.vision-bulk-bar {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--vision-surface);
  border: 1px solid var(--vision-border);
  border-radius: var(--vision-radius);
  margin-top: 1rem;
}

.vision-bulk-bar .count {
  font-weight: 500;
  color: var(--vision-text);
}

.vision-nav-group {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vision-text-secondary);
}

.vision-yaml {
  background: var(--vision-background);
  border: 1px solid var(--vision-border);
  border-radius: var(--vision-radius);
  padding: 0.75rem 1rem;
  max-height: 28rem;
  overflow: auto;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--vision-text);
}

.btn-primary {
  --bs-btn-bg: var(--ha-primary);
  --bs-btn-border-color: var(--ha-primary-dark);
  --bs-btn-hover-bg: var(--ha-primary-dark);
  --bs-btn-hover-border-color: var(--ha-primary-dark);
  --bs-btn-active-bg: var(--ha-primary-dark);
  --bs-btn-active-border-color: var(--ha-primary-dark);
  --bs-btn-disabled-bg: var(--ha-primary);
  --bs-btn-disabled-border-color: var(--ha-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--ha-primary);
  --bs-btn-border-color: var(--ha-primary);
  --bs-btn-hover-bg: var(--ha-primary);
  --bs-btn-hover-border-color: var(--ha-primary);
  --bs-btn-active-bg: var(--ha-primary-dark);
  --bs-btn-active-border-color: var(--ha-primary-dark);
}

.btn-outline-danger {
  --bs-btn-color: var(--state-offline);
  --bs-btn-border-color: var(--state-offline);
  --bs-btn-hover-bg: var(--state-offline);
  --bs-btn-hover-border-color: var(--state-offline);
}

.alert {
  border-radius: var(--vision-radius);
  box-shadow: none;
}

.form-control, .form-select {
  background-color: var(--vision-surface);
  color: var(--vision-text);
  border-color: var(--vision-border);
}

.form-control:focus, .form-select:focus {
  border-color: var(--ha-primary);
  box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.45);
}

.form-check-input:checked {
  background-color: var(--ha-primary);
  border-color: var(--ha-primary);
}

a {
  color: var(--ha-primary);
}

.text-muted {
  color: var(--vision-text-secondary) !important;
}

.vision-profile-selector .form-label,
.vision-company-selector .form-label {
  margin-bottom: 0.35rem;
}

.vision-company-selector .form-text {
  margin-top: 0.35rem;
}