/* ============================================================================
   DreamClear — Vendor Bridge
   ----------------------------------------------------------------------------
   THE UPGRADE SEAM. This file re-points Bootstrap's and AdminLTE's own CSS
   custom properties at our brand tokens.

   Why it is written this way:
     Bootstrap 5.3 and AdminLTE 4 are both driven by CSS custom properties. If
     we re-point their variables, their own rules compute our colours and every
     component they ship — including ones we have never used — is on-brand for
     free. If instead we overrode their rules by selector, every vendor upgrade
     would silently shift which rule wins and the theme would rot.

   RULES FOR THIS FILE
     - Re-point variables. Do not override vendor rules by selector.
     - No !important. Needing one means the variable seam was missed.
     - Never edit anything under wwwroot/lib — it is generated and replaced.

   Upgrading: bump the version in package.json, `npm install`, re-check this
   file against the new vendor variable names. That is the entire procedure.
   ============================================================================ */

/* ============================================================================
   1. Bootstrap core variables
   ============================================================================ */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  /* Brand palette -> Bootstrap semantic colours.
     Note: --bs-primary is BLUE, not red. Red is reserved for the single
     accent action per screen and is exposed as .btn-accent, never as
     Bootstrap's "primary". This is the brand's scarcity rule expressed
     in code — if red were --bs-primary, every stock Bootstrap component
     would render red and the rule would be unenforceable. */
  --bs-primary:   var(--dc-blue);
  --bs-secondary: var(--dc-ink-2);
  --bs-success:   var(--dc-success);
  --bs-warning:   var(--dc-warning);
  --bs-danger:    var(--dc-error);
  --bs-info:      var(--dc-info);

  --bs-primary-rgb: 46, 123, 255;
  --bs-danger-rgb:  255, 59, 87;

  /* Surfaces and ink */
  --bs-body-bg:            var(--dc-void);
  --bs-body-color:         var(--dc-ink);
  --bs-secondary-color:    var(--dc-ink-2);
  --bs-tertiary-color:     var(--dc-ink-3);
  --bs-emphasis-color:     var(--dc-ink);
  --bs-secondary-bg:       var(--dc-surface);
  --bs-tertiary-bg:        var(--dc-raised);
  --bs-border-color:       var(--dc-line);
  --bs-border-color-translucent: var(--dc-line);

  /* Links */
  --bs-link-color:       var(--dc-blue);
  --bs-link-hover-color: var(--dc-blue-bright);
  --bs-link-color-rgb:   46, 123, 255;

  /* Type */
  --bs-body-font-family: var(--dc-font-sans);
  --bs-body-font-size:   0.875rem;   /* 14px — console density */
  --bs-body-line-height: 1.6;
  --bs-font-monospace:   var(--dc-font-mono);

  /* Shape — the guide's 10px buttons / 16px cards */
  --bs-border-radius:    var(--dc-radius-btn);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--dc-radius-card);
  --bs-border-radius-xl: var(--dc-radius-card);
}

[data-bs-theme="light"] {
  --bs-primary-rgb:    26, 99, 224;
  --bs-danger-rgb:     217, 30, 60;
  --bs-link-color-rgb: 26, 99, 224;
}

/* ============================================================================
   2. Components whose vendor defaults need re-pointing
   ============================================================================ */
.card {
  --bs-card-bg:            var(--dc-surface);
  --bs-card-border-color:  var(--dc-line);
  --bs-card-border-radius: var(--dc-radius-card);
  --bs-card-cap-bg:        transparent;
  --bs-card-color:         var(--dc-ink);
  box-shadow: var(--dc-shadow);
}

.table {
  --bs-table-bg:          transparent;
  --bs-table-color:       var(--dc-ink-2);
  --bs-table-border-color: var(--dc-line);
  --bs-table-hover-bg:    var(--dc-blue-tint-soft);
  --bs-table-hover-color: var(--dc-ink);
}

.form-control,
.form-select {
  --bs-body-bg:         var(--dc-void);
  --bs-border-color:    var(--dc-line-strong);
  background-color:     var(--dc-void);
  color:                var(--dc-ink);
  border-color:         var(--dc-line-strong);
  min-height:           var(--dc-h-md);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--dc-void);
  color:            var(--dc-ink);
  border-color:     var(--dc-blue);
  box-shadow:       0 0 0 3px rgba(var(--bs-primary-rgb), 0.22);
}

.form-control::placeholder { color: var(--dc-ink-3); }

.form-check-input {
  background-color: var(--dc-void);
  border-color:     var(--dc-line-strong);
}
.form-check-input:checked {
  background-color: var(--dc-blue);
  border-color:     var(--dc-blue);
}
.form-check-input:focus {
  border-color: var(--dc-blue);
  box-shadow:   0 0 0 3px rgba(var(--bs-primary-rgb), 0.22);
}

.dropdown-menu {
  --bs-dropdown-bg:           var(--dc-raised);
  --bs-dropdown-border-color: var(--dc-line);
  --bs-dropdown-link-color:   var(--dc-ink-2);
  --bs-dropdown-link-hover-bg:    var(--dc-blue-tint-soft);
  --bs-dropdown-link-hover-color: var(--dc-ink);
  --bs-dropdown-border-radius: 12px;
  box-shadow: var(--dc-shadow);
}

.modal {
  --bs-modal-bg:           var(--dc-surface);
  --bs-modal-border-color: var(--dc-line);
  --bs-modal-border-radius: var(--dc-radius-card);
}

.nav-tabs {
  --bs-nav-tabs-border-color:      var(--dc-line);
  --bs-nav-tabs-link-active-bg:    transparent;
  --bs-nav-tabs-link-active-color: var(--dc-blue);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--dc-blue);
  --bs-nav-link-color:             var(--dc-ink-2);
  --bs-nav-link-hover-color:       var(--dc-ink);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--dc-ink-3);
  --bs-breadcrumb-item-active-color: var(--dc-ink-2);
  font-size: 0.8125rem;
}

/* ============================================================================
   3. AdminLTE shell variables
   ============================================================================ */
.app-wrapper {
  --lte-sidebar-width:       var(--dc-sidebar-w);
  --lte-sidebar-transition-duration: .2s;
}

.app-sidebar {
  background-color: var(--dc-surface);
  border-right:     1px solid var(--dc-line);
}

.app-header {
  background-color: var(--dc-surface);
  border-bottom:    1px solid var(--dc-line);
  min-height:       var(--dc-topbar-h);
}

.app-main {
  background-color: var(--dc-void);
}

/* ============================================================================
   4. Focus — one visible ring everywhere, per the brand guide
   ============================================================================ */
:focus-visible {
  outline:        var(--dc-focus-ring);
  outline-offset: 2px;
}

/* Vendor components that suppress the ring in favour of a shadow: put it back.
   A keyboard user must always be able to see where they are. */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline:        var(--dc-focus-ring);
  outline-offset: 2px;
  box-shadow:     none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}