/* Maps the brand tokens from brand.css onto AdminLTE, Bootstrap and Kendo; change the colours there.
   Loaded after AdminLTE and Kendo so it overrides both. Dark mode is derived, not designed: the
   design system only defines light, see docs/huisstijl.md. Anything set for light must be scoped
   to light, or it leaks into dark. */

/* --- Typography ------------------------------------------------------------------------------ */
:root {
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --kendo-font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* --- Bootstrap / AdminLTE tokens ------------------------------------------------------------- */
/* Light only: a bare :root would also match <html data-bs-theme=dark> and, loading last, put the
   dark ink text on AdminLTE's dark page. */
:root:not([data-bs-theme=dark]),
[data-bs-theme=light] {
  --bs-body-color: var(--text-body);
  --bs-body-color-rgb: 61, 74, 84;
  --bs-heading-color: var(--text-heading);
  --bs-emphasis-color: var(--text-heading);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-default);
  --bs-tertiary-bg: var(--surface-alt);
  --bs-primary: var(--twc-blue);
  --bs-primary-rgb: var(--twc-blue-rgb);
  --bs-primary-text-emphasis: var(--twc-blue-800);
  --bs-primary-bg-subtle: var(--twc-blue-100);
  --bs-primary-border-subtle: color-mix(in srgb, var(--twc-blue) 40%, #fff);
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 0, 128, 184;
  --bs-link-hover-color: var(--brand-primary-press);
  --bs-focus-ring-color: rgba(var(--twc-blue-rgb), 0.35);
  --bs-danger: var(--twc-error);
  --bs-danger-rgb: 208, 52, 44;
  --bs-success: var(--twc-success);
  --bs-success-rgb: 46, 157, 91;
}

/* Dark keeps AdminLTE's surfaces and borders; the text takes the brand's cool greys, read the
   other way round: line for body text (about 12:1 on the page), mist for headings, and a muted grey
   between line and ink-3 (about 7:1, 6:1 on the tertiary background). */
[data-bs-theme=dark] {
  --bs-body-color: var(--twc-line);
  --bs-body-color-rgb: 221, 227, 232;
  --bs-heading-color: var(--twc-mist);
  --bs-emphasis-color: var(--twc-white);
  --bs-secondary-color: color-mix(in srgb, var(--twc-line) 55%, var(--twc-ink-3));
  --bs-primary-text-emphasis: color-mix(in srgb, var(--twc-blue) 60%, #fff);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--twc-blue) 20%, #000);
  --bs-primary-border-subtle: color-mix(in srgb, var(--twc-blue) 60%, #000);
  --bs-link-color: color-mix(in srgb, var(--twc-blue) 75%, #fff);
  --bs-link-color-rgb: 64, 183, 234;
  --bs-link-hover-color: color-mix(in srgb, var(--twc-blue) 55%, #fff);
}

/* Bootstrap compiles these components with literal colours rather than the tokens above. */
.btn-primary {
  --bs-btn-color: var(--text-on-brand);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--text-on-brand);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--twc-blue-rgb);
  --bs-btn-active-color: var(--text-on-brand);
  --bs-btn-active-bg: var(--brand-primary-press);
  --bs-btn-active-border-color: var(--brand-primary-press);
  --bs-btn-disabled-color: var(--text-on-brand);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary-hover);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--text-on-brand);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--twc-blue-rgb);
  --bs-btn-active-color: var(--text-on-brand);
  --bs-btn-active-bg: var(--brand-primary-press);
  --bs-btn-active-border-color: var(--brand-primary-press);
  --bs-btn-disabled-color: var(--brand-primary-hover);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
}

.bg-primary,
.card-primary,
.text-bg-primary {
  --lte-card-variant-bg: var(--twc-blue);
  --lte-card-variant-bg-rgb: var(--twc-blue-rgb);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--text-on-brand);
  --bs-nav-pills-link-active-bg: var(--brand-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--text-on-brand);
  --bs-dropdown-link-active-bg: var(--brand-primary);
}

.list-group {
  --bs-list-group-active-color: var(--text-on-brand);
  --bs-list-group-active-bg: var(--brand-primary);
  --bs-list-group-active-border-color: var(--brand-primary);
}

.pagination {
  --bs-pagination-active-color: var(--text-on-brand);
  --bs-pagination-active-bg: var(--brand-primary);
  --bs-pagination-active-border-color: var(--brand-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--brand-primary);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--brand-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--brand-primary);
}

/* --- Sidebar: the brand's dark ink, with the brand blue for the page you are on ---------------- */
.app-sidebar[data-bs-theme] {
  --lte-sidebar-active-color: var(--text-on-brand);
  --lte-sidebar-menu-active-color: var(--text-on-brand);
  --lte-sidebar-menu-active-bg: var(--brand-primary);
  --lte-sidebar-submenu-active-color: var(--text-on-brand);
  --lte-sidebar-submenu-active-bg: var(--brand-primary);
  --bs-border-color: rgba(255, 255, 255, 0.12);
  background-color: var(--surface-dark);
}

.app-sidebar .sidebar-brand {
  background-color: var(--surface-dark);
}

.app-sidebar .sidebar-brand .brand-text {
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.app-sidebar .sidebar-menu .nav-link.active {
  font-weight: var(--fw-semibold);
}

/* --- Kendo UI: its theme derives hover, active and subtle shades from the primary colour. ------ */
:root {
  --kendo-color-primary: var(--twc-blue);
  --kendo-color-on-primary: var(--text-on-brand);
}