/* =====================================================================
   NetBilling — Bootstrap brand bridge
   =====================================================================
   Bootstrap ships its own complete --bs-* variable set (blue primary,
   generic grays). Recompiling its Sass isn't an option here - there's no
   build step in this project, only the precompiled CSS already vendored -
   so this file overrides just the variables, on top of the already-loaded
   bootstrap.min.css, pointing them at the same brand tokens app.css defines
   (:root / [data-bs-theme="dark"]) instead of Bootstrap's defaults. Loaded
   last (after both bootstrap.min.css and app.css), so every Bootstrap
   component - as pages migrate to it - already matches this app's palette
   with no per-component overrides needed. */

:root {
  --bs-primary:               var(--primary);
  --bs-primary-rgb:           79, 70, 229;
  --bs-primary-text-emphasis: var(--primary-600);
  --bs-primary-bg-subtle:     var(--primary-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 35%, transparent);

  --bs-success:               var(--ok);
  --bs-success-bg-subtle:     var(--ok-soft);
  --bs-danger:                var(--danger);
  --bs-danger-bg-subtle:      var(--danger-soft);
  --bs-warning:                var(--warn);
  --bs-warning-bg-subtle:     var(--warn-soft);
  --bs-info:                  var(--info);
  --bs-info-bg-subtle:        var(--info-soft);

  --bs-body-font-family: var(--font);
  --bs-body-bg:    var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color:  var(--muted);
  --bs-tertiary-bg:     var(--surface-2);
  --bs-secondary-bg:    var(--surface-3);
  --bs-emphasis-color:  var(--text);

  /* The -rgb twins matter on their own: Bootstrap builds translucent
     colours as rgba(var(--bs-X-rgb), alpha), which reads *this* variable,
     not --bs-X. Bridging only the solid one leaves every translucent
     variant still mixing Bootstrap's default grey. */
  --bs-body-bg-rgb:        245, 246, 250;
  --bs-body-color-rgb:      16,  24,  40;
  --bs-emphasis-color-rgb:  16,  24,  40;
  --bs-secondary-color-rgb: 71,  84, 103;
  --bs-tertiary-color-rgb: 135, 146, 168;

  --bs-border-color:  var(--border);
  --bs-border-color-translucent: var(--border-strong);
  --bs-link-color:       var(--primary);
  --bs-link-hover-color: var(--primary-600);
  --bs-link-color-rgb:       79, 70, 229;
  --bs-link-hover-color-rgb: 67, 56, 202;

  /* Bootstrap's default focus ring is its own blue (rgba(13,110,253,.25)) -
     the one brand colour the variable bridge above can't reach, since it is
     a literal rgba() rather than a reference to --bs-primary. Left alone it
     puts a blue ring on an indigo app. */
  --bs-focus-ring-color: var(--primary-ring);
  --bs-form-valid-color:        var(--ok);
  --bs-form-valid-border-color: var(--ok);
  --bs-form-invalid-color:        var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  --bs-code-color: var(--danger);

  /* This app's own radius scale, not Bootstrap's rem-based one. */
  --bs-border-radius:      var(--r);
  --bs-border-radius-sm:   var(--r-sm);
  --bs-border-radius-lg:   var(--r-lg);
  --bs-border-radius-xl:   var(--r-xl);
  --bs-border-radius-xxl:  var(--r-2xl);
  --bs-border-radius-2xl:  var(--r-2xl);
  --bs-border-radius-pill: var(--r-full);

  --bs-box-shadow:    var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-font-sans-serif: var(--font);
  --bs-font-monospace:  var(--mono);

  /* Sidebar mobile drawer (bootstrap.Offcanvas, see .sidebar's offcanvas/
     offcanvas-lg classes) - width matches .sidebar's own --sidebar-w so the
     two agree instead of one silently winning the cascade, and a stronger
     shadow than the default --bs-box-shadow-sm reads better on a drawer
     that slides fully over the content instead of a small popover. */
  --bs-offcanvas-width:      var(--sidebar-w);
  --bs-offcanvas-box-shadow: var(--shadow-lg);
}

/* Bootstrap's .offcanvas-backdrop has no CSS variable for its colour (it's
   a flat #000 in bootstrap.min.css) - overridden directly here instead,
   loading after it is enough to win. Same navy tint .sidebar__backdrop
   used to be, opacity/fade timing stay Bootstrap's own. */
.offcanvas-backdrop { background-color: #080d18; }

/* Bootstrap's own dark-mode block (bootstrap.min.css, loaded before this
   file) already redefines every one of these variables under the same
   [data-bs-theme="dark"] selector - this one loads after it, so it wins,
   the same "last one loads, last one wins" rule the whole cascade here
   relies on. Re-pointing at the *same* app.css tokens as :root above is
   enough: those tokens already carry their own dark values (app.css's own
   [data-bs-theme="dark"] block, right next to :root there) - nothing here
   needs to branch on light vs dark itself. */
[data-bs-theme="dark"] {
  --bs-primary:               var(--primary);
  --bs-primary-rgb:           99, 102, 241;
  --bs-primary-text-emphasis: var(--primary-600);
  --bs-primary-bg-subtle:     var(--primary-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--primary) 35%, transparent);

  --bs-success:               var(--ok);
  --bs-success-bg-subtle:     var(--ok-soft);
  --bs-danger:                var(--danger);
  --bs-danger-bg-subtle:      var(--danger-soft);
  --bs-warning:                var(--warn);
  --bs-warning-bg-subtle:     var(--warn-soft);
  --bs-info:                  var(--info);
  --bs-info-bg-subtle:        var(--info-soft);

  --bs-body-bg:    var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color:  var(--muted);
  --bs-tertiary-bg:     var(--surface-2);
  --bs-secondary-bg:    var(--surface-3);
  --bs-emphasis-color:  var(--text);

  /* Same reasoning as the :root block - and these need restating here even
     though the solid colours above already point at theme-aware tokens,
     because an -rgb value is a literal triplet, not a reference that can
     follow the token into dark mode on its own. */
  --bs-body-bg-rgb:         10,  15,  29;
  --bs-body-color-rgb:     232, 236, 244;
  --bs-emphasis-color-rgb: 232, 236, 244;
  --bs-secondary-color-rgb: 169, 180, 200;
  --bs-tertiary-color-rgb:  123, 135, 159;

  --bs-border-color:  var(--border);
  --bs-border-color-translucent: var(--border-strong);
  --bs-link-color:       var(--primary-2);
  --bs-link-hover-color: var(--primary);
  --bs-link-color-rgb:       167, 139, 250;
  --bs-link-hover-color-rgb: 99, 102, 241;
}

/* Note on .radio-cards / .dl / .kv (no Bootstrap equivalent, per the
   migration plan): deliberately NOT redefined here. app.css already has
   working versions of all three, they don't collide with any Bootstrap
   class name, and this file loads after app.css - redefining them here
   would silently reskin every not-yet-migrated page still using them,
   exactly the failure mode the bootstrap-before-app.css load order exists
   to prevent. Bootstrap-migrated pages keep using app.css's versions of
   these three components unchanged, alongside their new Bootstrap markup
   elsewhere on the same page. */

/* Bootstrap's real .dropdown-item has no built-in "destructive action" tone
   (only .active/.disabled) - this is the migrated equivalent of the old
   .dropdown__item--danger BEM modifier, new name so it rides alongside the
   real .dropdown-item instead of the retired custom class. */
.dropdown-item--danger { color: var(--danger); }
.dropdown-item--danger:hover, .dropdown-item--danger:focus { background: var(--danger-soft); color: var(--danger); }

/* .dropdown-menu's own variable block (bootstrap.css) hardcodes
   --bs-dropdown-link-active-bg/-color to Bootstrap's stock blue/white
   rather than pointing at --bs-primary like every other component here -
   the one dropdown value the bridge above can't reach by redefining
   --bs-primary alone, so it needs restating on the same selector. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--primary);
  --bs-dropdown-link-active-color: #fff;
}