/* ============================================================
   Bootstrap bridge
   Maps Bootstrap 5.3 CSS variables onto PBW tokens so the
   JS-driven components (modal, dropdown, toast, tooltip,
   offcanvas, collapse) adopt the PBW look in light AND dark.

   Load order (in <head>):
     1. bootstrap.min.css      (Bootstrap defaults)
     2. styles.css             (PBW system — wins the cascade)
     3. bootstrap-bridge.css   (re-themes Bootstrap components)
   ============================================================ */

:root,
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--paper);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-sm: 8px;
  --bs-link-color: var(--azure);
  --bs-link-hover-color: var(--azure-700);
  --bs-primary: var(--azure);
  --bs-focus-ring-color: color-mix(in srgb, var(--azure) 40%, transparent);
  --bs-box-shadow: var(--shadow);
  --bs-box-shadow-lg: var(--shadow-lg);
  --bs-heading-color: var(--ink);
  --bs-code-color: var(--azure);

  /* Accessible state colors (AA): fix .text-*, .bg-*, .text-bg-* contrast */
  --bs-success: #1E7A47; --bs-success-rgb: 30, 122, 71;
  --bs-danger:  #B0453E; --bs-danger-rgb: 176, 69, 62;
  --bs-info:    #2F7690; --bs-info-rgb: 47, 118, 144;
  --bs-warning: #C08A2A; --bs-warning-rgb: 192, 138, 42;
}

/* Bootstrap gives .text-bg-info/-warning black text, which fails on the darker state colors above. White text:
   5.1:1 on info; warning is darkened a quarter so white reaches 5:1. */
.text-bg-info { color: #fff !important; }
.text-bg-warning {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--bs-warning) 75%, #000) !important;
}

/* modal */
.modal {
  --bs-modal-bg: var(--white);
  --bs-modal-color: var(--text);
  --bs-modal-border-color: var(--line);
  --bs-modal-border-radius: var(--radius);
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-header-border-color: var(--line);
  --bs-modal-footer-border-color: var(--line);
}
.modal-title { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.modal-backdrop { --bs-backdrop-bg: #0B111A; --bs-backdrop-opacity: .55; }

/* dropdown */
.dropdown-menu {
  --bs-dropdown-bg: var(--white);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--radius-sm);
  --bs-dropdown-box-shadow: var(--shadow);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--mist);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--azure);
  --bs-dropdown-header-color: var(--muted);
  --bs-dropdown-font-size: .92rem;
  --bs-dropdown-padding-y: 6px;
  font-family: var(--font-body);
}
.dropdown-item { border-radius: 7px; }
.dropdown-menu { padding-left: 6px; padding-right: 6px; }

/* toast */
.toast {
  --bs-toast-bg: color-mix(in srgb, var(--white) 92%, transparent);
  --bs-toast-color: var(--text);
  --bs-toast-border-color: var(--line);
  --bs-toast-border-radius: var(--radius-sm);
  --bs-toast-box-shadow: var(--shadow-lg);
  --bs-toast-header-color: var(--muted);
  backdrop-filter: saturate(160%) blur(10px);
}

/* tooltip + popover */
.tooltip { --bs-tooltip-bg: var(--surface-invert); --bs-tooltip-color: #fff; --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: .78rem; }
.popover {
  --bs-popover-bg: var(--white);
  --bs-popover-border-color: var(--line);
  --bs-popover-border-radius: var(--radius-sm);
  --bs-popover-header-bg: var(--mist);
  --bs-popover-header-color: var(--ink);
  --bs-popover-body-color: var(--text);
}

/* offcanvas */
.offcanvas {
  --bs-offcanvas-bg: var(--paper);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-border-color: var(--line);
  --bs-offcanvas-box-shadow: var(--shadow-lg);
}
.offcanvas-title { font-family: var(--font-display); color: var(--ink); }

/* close button: invert the glyph in dark mode so it stays visible */
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* ============================================================
   Admin components (forms, tables, buttons, feedback)
   WCAG 2.1 AA: solid fills use accessible --*-solid tokens,
   every interactive control gets a visible 2px focus outline.
   ============================================================ */

/* Brand-align Bootstrap's primary family (buttons, badges, links, active states) */
:root {
  --bs-primary: #3F6DA6;
  --bs-primary-rgb: 63, 109, 166;
  --bs-primary-text-emphasis: #2F5480;
  --bs-primary-bg-subtle: #E7EEF6;
  --bs-primary-border-subtle: #C3D4E8;
}
[data-bs-theme="dark"] {
  --bs-primary: #6E97CC;
  --bs-primary-rgb: 110, 151, 204;
  --bs-primary-text-emphasis: #9DBBE0;
  --bs-primary-bg-subtle: #15202E;
  --bs-primary-border-subtle: #2A3D53;
}

/* Visible focus indicator on every interactive control (WCAG 2.4.7 / 1.4.11) */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.list-group-item-action:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  box-shadow: none;
}

/* Button variants → accessible solid tokens */
.btn-primary   { --bs-btn-bg: var(--primary-solid); --bs-btn-border-color: var(--primary-solid); --bs-btn-hover-bg: var(--primary-solid-h); --bs-btn-hover-border-color: var(--primary-solid-h); --bs-btn-active-bg: var(--primary-solid-h); --bs-btn-active-border-color: var(--primary-solid-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--primary-solid); --bs-btn-disabled-border-color: var(--primary-solid); }
.btn-success   { --bs-btn-bg: var(--success-solid); --bs-btn-border-color: var(--success-solid); --bs-btn-hover-bg: var(--success-solid-h); --bs-btn-hover-border-color: var(--success-solid-h); --bs-btn-active-bg: var(--success-solid-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--success-solid); }
.btn-danger    { --bs-btn-bg: var(--danger-solid); --bs-btn-border-color: var(--danger-solid); --bs-btn-hover-bg: var(--danger-solid-h); --bs-btn-hover-border-color: var(--danger-solid-h); --bs-btn-active-bg: var(--danger-solid-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--danger-solid); }
.btn-info      { --bs-btn-bg: var(--info-solid); --bs-btn-border-color: var(--info-solid); --bs-btn-hover-bg: var(--info-solid-h); --bs-btn-hover-border-color: var(--info-solid-h); --bs-btn-active-bg: var(--info-solid-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--info-solid); }
.btn-warning   { --bs-btn-bg: var(--warning-solid); --bs-btn-border-color: var(--warning-solid); --bs-btn-hover-bg: var(--warning-solid-h); --bs-btn-hover-border-color: var(--warning-solid-h); --bs-btn-active-bg: var(--warning-solid-h); --bs-btn-color: var(--on-warning); --bs-btn-hover-color: var(--on-warning); --bs-btn-active-color: var(--on-warning); --bs-btn-disabled-bg: var(--warning-solid); --bs-btn-disabled-color: var(--on-warning); }
.btn-secondary { --bs-btn-bg: var(--mist); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--tint); --bs-btn-hover-border-color: var(--azure); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--tint); --bs-btn-active-color: var(--ink); }
.btn-outline-primary { --bs-btn-color: var(--azure); --bs-btn-border-color: var(--azure); --bs-btn-hover-bg: var(--primary-solid); --bs-btn-hover-border-color: var(--primary-solid); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--primary-solid-h); --bs-btn-active-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--mist); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--azure); }

/* Forms */
.form-control, .form-select {
  --bs-border-radius: var(--radius-sm);
  background-color: var(--white);
  border-color: var(--line);
  color: var(--text);
  font-family: var(--font-body);
}
.form-control::placeholder { color: var(--muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--azure);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--azure) 28%, transparent);
}
.form-label { color: var(--ink); font-weight: 500; font-size: .9rem; }
.form-text { color: var(--muted); }
.input-group-text { background-color: var(--mist); border-color: var(--line); color: var(--muted); }
.form-check-input { border-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.form-check-input:checked { background-color: var(--primary-solid); border-color: var(--primary-solid); }
.form-check-input:focus { border-color: var(--azure); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--azure) 28%, transparent); }
:root, [data-bs-theme="dark"] {
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
}

/* Tables */
.table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: color-mix(in srgb, var(--ink) 3%, transparent);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: color-mix(in srgb, var(--azure) 9%, transparent);
}
.table > thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  border-bottom-color: var(--line);
}

/* Pagination */
.pagination {
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--white);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--mist);
  --bs-pagination-hover-border-color: var(--line);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-focus-bg: var(--mist);
  --bs-pagination-active-bg: var(--primary-solid);
  --bs-pagination-active-border-color: var(--primary-solid);
  --bs-pagination-active-color: #fff;
  --bs-pagination-border-radius: var(--radius-sm);
}

/* Nav tabs / pills */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--line);
  --bs-nav-tabs-link-active-color: var(--ink);
  --bs-nav-tabs-link-active-bg: var(--white);
  --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--white);
  --bs-nav-tabs-link-hover-border-color: var(--line);
}
.nav-tabs .nav-link, .nav-pills .nav-link { color: var(--muted); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary-solid); --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-border-radius: var(--radius-sm); }

/* List group */
.list-group {
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: var(--white);
  --bs-list-group-border-color: var(--line);
  --bs-list-group-action-hover-bg: var(--mist);
  --bs-list-group-action-hover-color: var(--ink);
  --bs-list-group-active-bg: var(--primary-solid);
  --bs-list-group-active-border-color: var(--primary-solid);
  --bs-list-group-active-color: #fff;
}

/* Progress */
.progress {
  --bs-progress-bg: var(--mist);
  --bs-progress-bar-bg: var(--primary-solid);
  --bs-progress-border-radius: 999px;
  height: .55rem;
}

/* Breadcrumb */
.breadcrumb { --bs-breadcrumb-divider-color: var(--muted); font-size: .9rem; }
.breadcrumb-item a { color: var(--azure); }
.breadcrumb-item.active { color: var(--muted); }

/* Cards using Bootstrap's structure (see .card:has() reset in styles.css) */
.card > .card-header { background: var(--tint); border-bottom-color: var(--line); font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.card > .card-footer { background: var(--tint); border-top-color: var(--line); }

/* Server-side validation (asp-validation-for / tag helpers): Bootstrap's invalid look without its .is-invalid markup. */
.input-validation-error { border-color: var(--bs-form-invalid-border-color); }
.input-validation-error:focus { border-color: var(--bs-form-invalid-border-color); box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25); }
.field-validation-error { display: block; margin-top: .25rem; font-size: .875em; color: var(--bs-form-invalid-color); }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin-bottom: .75rem; padding-left: 1.25rem; }