/* ============================================================
   bootstrap-bridge.css — teach Bootstrap our tokens

   Bootstrap 5.3 is driven almost entirely by its own CSS custom
   properties, so restyling it means overriding *variables* rather
   than properties. That is why this file needs no !important:
   we never fight a Bootstrap declaration, we feed it new values.

   The one exception is the utility section at the bottom, where
   Bootstrap itself ships !important and we have to match it.
   ============================================================ */

:root,
:root[data-bs-theme="dark"]{
  /* --- Body / typography ------------------------------------ */
  --bs-body-bg:            var(--bd-bg);
  --bs-body-bg-rgb:        var(--bd-bg-rgb);
  --bs-body-color:         var(--bd-text);
  --bs-body-color-rgb:     var(--bd-text-rgb);
  --bs-body-font-family:   var(--bd-font-sans);
  --bs-body-font-size:     var(--bd-font-md);
  --bs-body-line-height:   var(--bd-line-normal);
  --bs-emphasis-color:     var(--bd-text-strong);
  --bs-heading-color:      var(--bd-text-strong);

  --bs-secondary-color:    var(--bd-muted);
  --bs-secondary-bg:       var(--bd-surface-2);
  --bs-tertiary-color:     var(--bd-faint);
  --bs-tertiary-bg:        var(--bd-surface-3);

  /* --- Borders / radius ------------------------------------- */
  --bs-border-color:             var(--bd-border);
  --bs-border-color-translucent: var(--bd-border);
  --bs-border-width:             var(--bd-border-w-1);
  --bs-border-radius-sm:  var(--bd-radius-1);
  --bs-border-radius:     var(--bd-radius-2);
  --bs-border-radius-lg:  var(--bd-radius-3);
  --bs-border-radius-xl:  var(--bd-radius-4);
  --bs-border-radius-pill: var(--bd-radius-pill);

  /* --- Links ------------------------------------------------- */
  --bs-link-color:       var(--bd-accent-text);
  --bs-link-color-rgb:   var(--bd-accent-rgb);
  --bs-link-hover-color: var(--bd-accent-hover);

  /* --- Theme colours --------------------------------------- */
  --bs-primary:     var(--bd-accent);
  --bs-primary-rgb: var(--bd-accent-rgb);
  --bs-success:     var(--bd-success);
  --bs-success-rgb: var(--bd-success-rgb);
  --bs-danger:      var(--bd-danger);
  --bs-danger-rgb:  var(--bd-danger-rgb);
  --bs-warning:     var(--bd-warning);
  --bs-warning-rgb: var(--bd-warning-rgb);
  --bs-info:        var(--bd-info);
  --bs-info-rgb:    var(--bd-info-rgb);

  --bs-primary-bg-subtle:      rgba(var(--bd-accent-rgb), .12);
  --bs-primary-border-subtle:  rgba(var(--bd-accent-rgb), .30);
  --bs-primary-text-emphasis:  var(--bd-accent-text);
  --bs-success-bg-subtle:      rgba(var(--bd-success-rgb), .12);
  --bs-success-border-subtle:  rgba(var(--bd-success-rgb), .30);
  --bs-success-text-emphasis:  var(--bd-success);
  --bs-danger-bg-subtle:       rgba(var(--bd-danger-rgb), .12);
  --bs-danger-border-subtle:   rgba(var(--bd-danger-rgb), .30);
  --bs-danger-text-emphasis:   var(--bd-danger);
  --bs-warning-bg-subtle:      rgba(var(--bd-warning-rgb), .12);
  --bs-warning-border-subtle:  rgba(var(--bd-warning-rgb), .30);
  --bs-warning-text-emphasis:  var(--bd-warning);
  --bs-info-bg-subtle:         rgba(var(--bd-info-rgb), .12);
  --bs-info-border-subtle:     rgba(var(--bd-info-rgb), .30);
  --bs-info-text-emphasis:     var(--bd-info);

  /* --- Focus ring ------------------------------------------- */
  --bs-focus-ring-color: rgba(var(--bd-accent-rgb), .28);
  --bs-focus-ring-width: 3px;

  /* --- Misc ------------------------------------------------- */
  --bs-code-color:   var(--bd-accent-text);
  --bs-highlight-bg: rgba(var(--bd-accent-rgb), .18);
}

/* ============================================================
   Components
   ============================================================ */

.card{
  --bs-card-bg:                  var(--bd-surface);
  --bs-card-color:               var(--bd-text);
  --bs-card-border-color:        var(--bd-border);
  --bs-card-border-radius:       var(--bd-radius-3);
  --bs-card-inner-border-radius: calc(var(--bd-radius-3) - 1px);
  --bs-card-cap-bg:              transparent;
  --bs-card-cap-color:           var(--bd-text-strong);
  --bs-card-title-color:         var(--bd-text-strong);
  --bs-card-subtitle-color:      var(--bd-muted);
  --bs-card-spacer-x:            var(--bd-space-5);
  --bs-card-spacer-y:            var(--bd-space-4);
}

.table{
  --bs-table-color:        var(--bd-text);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--bd-border);
  --bs-table-striped-bg:   var(--bd-surface-2);
  --bs-table-striped-color: var(--bd-text);
  --bs-table-hover-bg:     rgba(var(--bd-accent-rgb), .09);
  --bs-table-hover-color:  var(--bd-text);
  --bs-table-active-bg:    rgba(var(--bd-accent-rgb), .14);
  --bs-table-active-color: var(--bd-text);
}

/* Legacy markup still asks for table-dark; make it inherit the theme. */
.table-dark{
  --bs-table-color:        var(--bd-text);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--bd-border);
  --bs-table-striped-bg:   var(--bd-surface-2);
  --bs-table-striped-color: var(--bd-text);
  --bs-table-hover-bg:     rgba(var(--bd-accent-rgb), .09);
  --bs-table-hover-color:  var(--bd-text);
  --bs-table-active-bg:    rgba(var(--bd-accent-rgb), .14);
  --bs-table-active-color: var(--bd-text);
}

.btn{
  --bs-btn-padding-y:    10px;
  --bs-btn-padding-x:    16px;
  --bs-btn-font-size:    var(--bd-font-md);
  --bs-btn-font-weight:  550;
  --bs-btn-line-height:  var(--bd-line-tight);
  --bs-btn-border-radius: var(--bd-radius-2);
  --bs-btn-focus-box-shadow: var(--bd-focus-ring);
}
.btn-sm{
  --bs-btn-padding-y:    7px;
  --bs-btn-padding-x:    12px;
  --bs-btn-font-size:    var(--bd-font-sm);
  --bs-btn-border-radius: var(--bd-radius-1);
}
.btn-lg{
  --bs-btn-padding-y:    13px;
  --bs-btn-padding-x:    22px;
  --bs-btn-font-size:    var(--bd-font-lg);
  --bs-btn-border-radius: var(--bd-radius-3);
}

.btn-primary{
  --bs-btn-bg:               var(--bd-accent);
  --bs-btn-border-color:     var(--bd-accent);
  --bs-btn-color:            var(--bd-on-accent);
  --bs-btn-hover-bg:         var(--bd-accent-hover);
  --bs-btn-hover-border-color: var(--bd-accent-hover);
  --bs-btn-hover-color:      var(--bd-on-accent);
  --bs-btn-active-bg:        var(--bd-accent-hover);
  --bs-btn-active-border-color: var(--bd-accent-hover);
  --bs-btn-active-color:     var(--bd-on-accent);
  --bs-btn-disabled-bg:      var(--bd-accent);
  --bs-btn-disabled-border-color: var(--bd-accent);
  --bs-btn-disabled-color:   var(--bd-on-accent);
}

.btn-outline-primary{
  --bs-btn-color:            var(--bd-accent-text);
  --bs-btn-border-color:     rgba(var(--bd-accent-rgb), .55);
  --bs-btn-hover-bg:         var(--bd-accent);
  --bs-btn-hover-border-color: var(--bd-accent);
  --bs-btn-hover-color:      var(--bd-on-accent);
  --bs-btn-active-bg:        var(--bd-accent-hover);
  --bs-btn-active-border-color: var(--bd-accent-hover);
  --bs-btn-active-color:     var(--bd-on-accent);
  --bs-btn-disabled-color:   var(--bd-faint);
  --bs-btn-disabled-border-color: var(--bd-border);
}

/* The neutral workhorse buttons across the app. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-light,
.btn-light,
.btn-dark{
  --bs-btn-color:            var(--bd-text);
  --bs-btn-bg:               var(--bd-surface-2);
  --bs-btn-border-color:     var(--bd-border);
  --bs-btn-hover-color:      var(--bd-text-strong);
  --bs-btn-hover-bg:         var(--bd-surface-3);
  --bs-btn-hover-border-color: var(--bd-border-strong);
  --bs-btn-active-color:     var(--bd-text-strong);
  --bs-btn-active-bg:        var(--bd-surface-3);
  --bs-btn-active-border-color: var(--bd-border-strong);
  --bs-btn-disabled-color:   var(--bd-faint);
  --bs-btn-disabled-bg:      var(--bd-surface-2);
  --bs-btn-disabled-border-color: var(--bd-border);
}
.btn-outline-secondary,
.btn-outline-light{
  --bs-btn-bg: transparent;
}

.btn-success{
  --bs-btn-bg: var(--bd-success); --bs-btn-border-color: var(--bd-success);
  --bs-btn-color: var(--bd-on-status);
  --bs-btn-hover-bg: var(--bd-success); --bs-btn-hover-border-color: var(--bd-success);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-success); --bs-btn-active-border-color: var(--bd-success);
  --bs-btn-active-color: var(--bd-on-status);
}
.btn-danger{
  --bs-btn-bg: var(--bd-danger); --bs-btn-border-color: var(--bd-danger);
  --bs-btn-color: var(--bd-on-status);
  --bs-btn-hover-bg: var(--bd-danger); --bs-btn-hover-border-color: var(--bd-danger);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-danger); --bs-btn-active-border-color: var(--bd-danger);
  --bs-btn-active-color: var(--bd-on-status);
}
.btn-warning{
  --bs-btn-bg: var(--bd-warning); --bs-btn-border-color: var(--bd-warning);
  --bs-btn-color: var(--bd-on-status);
  --bs-btn-hover-bg: var(--bd-warning); --bs-btn-hover-border-color: var(--bd-warning);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-warning); --bs-btn-active-border-color: var(--bd-warning);
  --bs-btn-active-color: var(--bd-on-status);
}
.btn-outline-success{
  --bs-btn-color: var(--bd-success);
  --bs-btn-border-color: rgba(var(--bd-success-rgb), .55);
  --bs-btn-hover-bg: var(--bd-success); --bs-btn-hover-border-color: var(--bd-success);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-success); --bs-btn-active-border-color: var(--bd-success);
  --bs-btn-active-color: var(--bd-on-status);
}
.btn-outline-danger{
  --bs-btn-color: var(--bd-danger);
  --bs-btn-border-color: rgba(var(--bd-danger-rgb), .55);
  --bs-btn-hover-bg: var(--bd-danger); --bs-btn-hover-border-color: var(--bd-danger);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-danger); --bs-btn-active-border-color: var(--bd-danger);
  --bs-btn-active-color: var(--bd-on-status);
}
.btn-outline-warning{
  --bs-btn-color: var(--bd-warning);
  --bs-btn-border-color: rgba(var(--bd-warning-rgb), .55);
  --bs-btn-hover-bg: var(--bd-warning); --bs-btn-hover-border-color: var(--bd-warning);
  --bs-btn-hover-color: var(--bd-on-status);
  --bs-btn-active-bg: var(--bd-warning); --bs-btn-active-border-color: var(--bd-warning);
  --bs-btn-active-color: var(--bd-on-status);
}

.nav-pills{
  --bs-nav-link-color:            var(--bd-muted);
  --bs-nav-link-hover-color:      var(--bd-text-strong);
  --bs-nav-link-padding-x:        var(--bd-space-3);
  --bs-nav-link-padding-y:        var(--bd-space-2);
  --bs-nav-link-font-size:        var(--bd-font-sm);
  --bs-nav-link-font-weight:      550;
  --bs-nav-pills-border-radius:   var(--bd-radius-2);
  --bs-nav-pills-link-active-bg:  var(--bd-accent);
  --bs-nav-pills-link-active-color: var(--bd-on-accent);
}

.modal{
  --bs-modal-bg:                  var(--bd-surface);
  --bs-modal-color:               var(--bd-text);
  --bs-modal-border-color:        var(--bd-border);
  --bs-modal-border-radius:       var(--bd-radius-3);
  --bs-modal-header-border-color: var(--bd-border);
  --bs-modal-footer-border-color: var(--bd-border);
  --bs-modal-header-padding:      var(--bd-space-4) var(--bd-space-5);
  --bs-modal-padding:             var(--bd-space-5);
  --bs-modal-box-shadow:          var(--bd-shadow-3);
}

.dropdown-menu{
  --bs-dropdown-bg:            var(--bd-surface);
  --bs-dropdown-color:         var(--bd-text);
  --bs-dropdown-border-color:  var(--bd-border);
  --bs-dropdown-border-radius: var(--bd-radius-2);
  --bs-dropdown-link-color:    var(--bd-text);
  --bs-dropdown-link-hover-bg: var(--bd-surface-2);
  --bs-dropdown-link-hover-color: var(--bd-text-strong);
  --bs-dropdown-link-active-bg: rgba(var(--bd-accent-rgb), .14);
  --bs-dropdown-link-active-color: var(--bd-accent-text);
  --bs-dropdown-box-shadow:    var(--bd-shadow-2);
}

.alert{
  --bs-alert-border-radius: var(--bd-radius-2);
  --bs-alert-padding-x:     var(--bd-space-4);
  --bs-alert-padding-y:     var(--bd-space-3);
}

.list-group{
  --bs-list-group-bg:           var(--bd-surface);
  --bs-list-group-color:        var(--bd-text);
  --bs-list-group-border-color: var(--bd-border);
  --bs-list-group-border-radius: var(--bd-radius-2);
  --bs-list-group-action-hover-bg: var(--bd-surface-2);
  --bs-list-group-action-hover-color: var(--bd-text-strong);
}

.badge{
  --bs-badge-border-radius: var(--bd-radius-pill);
  --bs-badge-font-weight:   600;
  --bs-badge-padding-x:     var(--bd-space-2);
  --bs-badge-padding-y:     4px;
}

.navbar{
  --bs-navbar-color:            var(--bd-muted);
  --bs-navbar-hover-color:      var(--bd-text-strong);
  --bs-navbar-active-color:     var(--bd-text-strong);
  --bs-navbar-brand-color:      var(--bd-text-strong);
  --bs-navbar-brand-hover-color: var(--bd-text-strong);
  --bs-navbar-padding-y:        var(--bd-space-2);
}

/* ============================================================
   Utility bridge

   Bootstrap's colour utilities ship with !important, so these
   have to as well. They exist because legacy markup (and a few
   JS-generated strings) still carry bg-dark / bg-black /
   border-secondary from the previous dark-only design; mapping
   them to tokens keeps every page coherent in both themes.
   ============================================================ */
.bg-dark, .bg-black, .bg-body, .bg-body-tertiary{
  background-color: var(--bd-surface) !important;
}
.bg-light, .bg-body-secondary{
  background-color: var(--bd-surface-2) !important;
}
.text-light, .text-white{
  color: var(--bd-text) !important;
}
.text-secondary, .text-body-secondary{
  color: var(--bd-muted) !important;
}
.text-dark, .text-black, .text-body{
  color: var(--bd-text) !important;
}
.border-secondary, .border-dark, .border-light{
  border-color: var(--bd-border) !important;
}
.text-primary{ color: var(--bd-accent-text) !important; }
.text-success{ color: var(--bd-success) !important; }
.text-danger{  color: var(--bd-danger) !important; }
.text-warning{ color: var(--bd-warning) !important; }
.text-info{    color: var(--bd-info) !important; }