/*! microsvc UI kit v1.0.1 - tokens + Material layer for Bootstrap 5 - https://ui.microsvcapi.com/ */
:root {
  /* Theme-independent tokens. Declarations only: lib/bundle.js wraps
     them in a :root rule. Every token is prefixed --msvc- so it cannot clash
     with the host page. */
  --msvc-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --msvc-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --msvc-type-title: 500 1rem/1.5rem var(--msvc-font);
  --msvc-type-label: 500 0.875rem/1.25rem var(--msvc-font);
  --msvc-type-body: 400 0.875rem/1.25rem var(--msvc-font);
  --msvc-type-caption: 400 0.75rem/1rem var(--msvc-font);
  --msvc-radius-xs: 4px;
  --msvc-radius-sm: 6px;
  --msvc-radius-md: 12px;
  --msvc-radius-lg: 16px;
  --msvc-radius-xl: 28px;
  --msvc-space-1: 4px;
  --msvc-space-2: 8px;
  --msvc-space-3: 12px;
  --msvc-space-4: 16px;
  --msvc-space-5: 24px;
  --msvc-bar-height: 52px;
  --msvc-z-bar: 1040;
  --msvc-motion-fast: 120ms;
  --msvc-motion-std: 200ms;
  --msvc-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root,
[data-bs-theme="light"] {
  /* Light scheme: Material 3 colour roles (blue seed). Declarations only. */
  --msvc-primary: #0b57d0;
  --msvc-primary-rgb: 11, 87, 208;
  --msvc-on-primary: #ffffff;
  --msvc-primary-container: #d3e3fd;
  --msvc-on-primary-container: #041e49;
  --msvc-secondary: #00639b;
  --msvc-secondary-container: #c2e7ff;
  --msvc-on-secondary-container: #001d35;
  --msvc-tertiary: #146c2e;
  --msvc-tertiary-container: #c4eed0;
  --msvc-on-tertiary-container: #072711;
  --msvc-error: #b3261e;
  --msvc-on-error: #ffffff;
  --msvc-error-container: #f9dedc;
  --msvc-on-error-container: #410e0b;
  --msvc-surface: #f8fafd;
  --msvc-surface-rgb: 248, 250, 253;
  --msvc-surface-container-lowest: #ffffff;
  --msvc-surface-container-low: #f0f4f9;
  --msvc-surface-container: #e9eef6;
  --msvc-surface-container-high: #dde3ea;
  --msvc-surface-container-highest: #d3dbe5;
  --msvc-on-surface: #1f1f1f;
  --msvc-on-surface-rgb: 31, 31, 31;
  --msvc-on-surface-variant: #444746;
  --msvc-outline: #747775;
  --msvc-outline-variant: #c4c7c5;
  --msvc-inverse-surface: #303030;
  --msvc-inverse-on-surface: #f2f2f2;
  --msvc-scrim: rgba(0, 0, 0, 0.32);
  --msvc-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --msvc-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] {
  /* Dark scheme: Material 3 colour roles (blue seed). Declarations only. */
  --msvc-primary: #a8c7fa;
  --msvc-primary-rgb: 168, 199, 250;
  --msvc-on-primary: #062e6f;
  --msvc-primary-container: #0842a0;
  --msvc-on-primary-container: #d3e3fd;
  --msvc-secondary: #7fcfff;
  --msvc-secondary-container: #004a77;
  --msvc-on-secondary-container: #c2e7ff;
  --msvc-tertiary: #6dd58c;
  --msvc-tertiary-container: #0f5223;
  --msvc-on-tertiary-container: #c4eed0;
  --msvc-error: #f2b8b5;
  --msvc-on-error: #601410;
  --msvc-error-container: #8c1d18;
  --msvc-on-error-container: #f9dedc;
  --msvc-surface: #131314;
  --msvc-surface-rgb: 19, 19, 20;
  --msvc-surface-container-lowest: #0e0e0e;
  --msvc-surface-container-low: #1b1b1b;
  --msvc-surface-container: #1e1f20;
  --msvc-surface-container-high: #282a2c;
  --msvc-surface-container-highest: #333537;
  --msvc-on-surface: #e3e3e3;
  --msvc-on-surface-rgb: 227, 227, 227;
  --msvc-on-surface-variant: #c4c7c5;
  --msvc-outline: #8e918f;
  --msvc-outline-variant: #444746;
  --msvc-inverse-surface: #e3e3e3;
  --msvc-inverse-on-surface: #303030;
  --msvc-scrim: rgba(0, 0, 0, 0.6);
  --msvc-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --msvc-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    /* Dark scheme: Material 3 colour roles (blue seed). Declarations only. */
    --msvc-primary: #a8c7fa;
    --msvc-primary-rgb: 168, 199, 250;
    --msvc-on-primary: #062e6f;
    --msvc-primary-container: #0842a0;
    --msvc-on-primary-container: #d3e3fd;
    --msvc-secondary: #7fcfff;
    --msvc-secondary-container: #004a77;
    --msvc-on-secondary-container: #c2e7ff;
    --msvc-tertiary: #6dd58c;
    --msvc-tertiary-container: #0f5223;
    --msvc-on-tertiary-container: #c4eed0;
    --msvc-error: #f2b8b5;
    --msvc-on-error: #601410;
    --msvc-error-container: #8c1d18;
    --msvc-on-error-container: #f9dedc;
    --msvc-surface: #131314;
    --msvc-surface-rgb: 19, 19, 20;
    --msvc-surface-container-lowest: #0e0e0e;
    --msvc-surface-container-low: #1b1b1b;
    --msvc-surface-container: #1e1f20;
    --msvc-surface-container-high: #282a2c;
    --msvc-surface-container-highest: #333537;
    --msvc-on-surface: #e3e3e3;
    --msvc-on-surface-rgb: 227, 227, 227;
    --msvc-on-surface-variant: #c4c7c5;
    --msvc-outline: #8e918f;
    --msvc-outline-variant: #444746;
    --msvc-inverse-surface: #e3e3e3;
    --msvc-inverse-on-surface: #303030;
    --msvc-scrim: rgba(0, 0, 0, 0.6);
    --msvc-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
    --msvc-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
    --msvc-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* Material look layered on Bootstrap 5.3. Opt-in: a host that loads
   tokens.css AFTER bootstrap.css gets Material colour roles, typography,
   elevation and rounded surfaces on the stock Bootstrap components. Light and
   dark follow data-bs-theme on <html> (or any subtree), as Bootstrap does.
   Only CSS custom properties and a few component rules; no markup changes. */

:root,
[data-bs-theme] {
  --bs-body-font-family: var(--msvc-font);
  --bs-body-bg: var(--msvc-surface);
  --bs-body-bg-rgb: var(--msvc-surface-rgb);
  --bs-body-color: var(--msvc-on-surface);
  --bs-body-color-rgb: var(--msvc-on-surface-rgb);
  --bs-emphasis-color: var(--msvc-on-surface);
  --bs-secondary-color: var(--msvc-on-surface-variant);
  --bs-tertiary-color: var(--msvc-outline);
  --bs-secondary-bg: var(--msvc-surface-container);
  --bs-tertiary-bg: var(--msvc-surface-container-low);
  --bs-border-color: var(--msvc-outline-variant);
  --bs-border-color-translucent: var(--msvc-outline-variant);
  --bs-primary: var(--msvc-primary);
  --bs-primary-rgb: var(--msvc-primary-rgb);
  --bs-primary-bg-subtle: var(--msvc-primary-container);
  --bs-primary-text-emphasis: var(--msvc-on-primary-container);
  --bs-primary-border-subtle: var(--msvc-primary-container);
  --bs-link-color: var(--msvc-primary);
  --bs-link-color-rgb: var(--msvc-primary-rgb);
  --bs-link-hover-color: var(--msvc-primary);
  --bs-link-hover-color-rgb: var(--msvc-primary-rgb);
  --bs-border-radius: var(--msvc-radius-sm);
  --bs-border-radius-sm: var(--msvc-radius-xs);
  --bs-border-radius-lg: var(--msvc-radius-md);
  --bs-border-radius-xl: var(--msvc-radius-lg);
  --bs-box-shadow-sm: var(--msvc-elevation-1);
  --bs-box-shadow: var(--msvc-elevation-2);
  --bs-box-shadow-lg: var(--msvc-elevation-3);
  --bs-focus-ring-color: rgba(var(--msvc-primary-rgb), 0.35);
}

.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--msvc-radius-sm);
  --bs-btn-padding-x: 0.75rem;
  letter-spacing: 0.01em;
}

.btn-primary {
  --bs-btn-bg: var(--msvc-primary);
  --bs-btn-border-color: var(--msvc-primary);
  --bs-btn-color: var(--msvc-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--msvc-primary) 88%, var(--msvc-on-primary));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-hover-color: var(--msvc-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--msvc-primary) 80%, var(--msvc-on-primary));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-active-color: var(--msvc-on-primary);
  --bs-btn-disabled-bg: var(--msvc-primary);
  --bs-btn-disabled-border-color: var(--msvc-primary);
  --bs-btn-disabled-color: var(--msvc-on-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--msvc-primary);
  --bs-btn-border-color: var(--msvc-outline);
  --bs-btn-hover-bg: rgba(var(--msvc-primary-rgb), 0.08);
  --bs-btn-hover-border-color: var(--msvc-outline);
  --bs-btn-hover-color: var(--msvc-primary);
  --bs-btn-active-bg: rgba(var(--msvc-primary-rgb), 0.12);
  --bs-btn-active-border-color: var(--msvc-outline);
  --bs-btn-active-color: var(--msvc-primary);
}

.btn-secondary {
  --bs-btn-bg: var(--msvc-secondary-container);
  --bs-btn-border-color: var(--msvc-secondary-container);
  --bs-btn-color: var(--msvc-on-secondary-container);
  --bs-btn-hover-bg: color-mix(in srgb, var(--msvc-secondary-container) 88%, var(--msvc-on-secondary-container));
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-hover-color: var(--msvc-on-secondary-container);
  --bs-btn-active-bg: color-mix(in srgb, var(--msvc-secondary-container) 80%, var(--msvc-on-secondary-container));
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-active-color: var(--msvc-on-secondary-container);
}

.card {
  --bs-card-bg: var(--msvc-surface-container-low);
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--msvc-radius-md);
  --bs-card-inner-border-radius: var(--msvc-radius-md);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--msvc-elevation-1);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--msvc-surface-container);
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: var(--msvc-radius-sm);
  --bs-dropdown-box-shadow: var(--msvc-elevation-2);
  --bs-dropdown-link-active-bg: var(--msvc-secondary-container);
  --bs-dropdown-link-active-color: var(--msvc-on-secondary-container);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.modal {
  --bs-modal-bg: var(--msvc-surface-container-high);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--msvc-radius-xl);
  --bs-modal-box-shadow: var(--msvc-elevation-3);
}

.form-control,
.form-select {
  background-color: var(--msvc-surface-container-lowest);
  border-color: var(--msvc-outline);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--msvc-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--msvc-primary-rgb), 0.25);
}

.badge.text-bg-primary {
  background-color: var(--msvc-primary-container) !important;
  color: var(--msvc-on-primary-container) !important;
}