/* Fluo Bootstrap 5 adapter. Load Bootstrap -> fluo-tokens.css -> this file.
   Put class="fluo-bootstrap" on <body> or the application root.
   Explicit fallbacks cover 5.0/5.1; local component variables cover 5.2/5.3.
   This is an adapter, not a copy of Bootstrap. */
.fluo-bootstrap {
  --bs-primary: var(--fluo-action); --bs-primary-rgb: 32, 69, 232;
  --bs-body-color: var(--fluo-ink); --bs-body-color-rgb: 11, 31, 92;
  --bs-body-bg: var(--fluo-canvas); --bs-body-bg-rgb: 247, 249, 254;
  --bs-body-font-family: var(--fluo-body);
  --bs-emphasis-color: var(--fluo-ink); --bs-secondary-color: var(--fluo-muted);
  --bs-secondary-bg: var(--fluo-mist); --bs-tertiary-bg: var(--fluo-surface);
  --bs-link-color: var(--fluo-action); --bs-link-color-rgb: 32, 69, 232;
  --bs-link-hover-color: var(--fluo-action-hover); --bs-link-hover-color-rgb: 25, 55, 189;
  --bs-border-color: var(--fluo-line); --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1.5rem; --bs-border-radius-sm: .5rem;
  --bs-primary-text-emphasis: var(--fluo-action); --bs-primary-bg-subtle: var(--fluo-mist);
  --bs-primary-border-subtle: var(--fluo-line);
  font-family: var(--fluo-body); color: var(--fluo-ink); background-color: var(--fluo-canvas);
}
.fluo-bootstrap[data-bs-theme="dark"], [data-bs-theme="dark"] .fluo-bootstrap,
.fluo-bootstrap[data-fluo-theme="dark"], [data-fluo-theme="dark"] .fluo-bootstrap {
  --bs-primary-rgb: 77, 178, 255; --bs-link-color-rgb: 77, 178, 255;
  --bs-link-hover-color-rgb: 166, 202, 255; --bs-body-color-rgb: 240, 245, 252;
  --bs-body-bg-rgb: 10, 18, 48;
}
.fluo-bootstrap :is(h1,h2,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6) { font-family: var(--fluo-display); font-weight: 400; letter-spacing: -.025em; }
.fluo-bootstrap a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item) { color: var(--fluo-action); text-underline-offset: .2em; }
.fluo-bootstrap a:not(.btn):hover { color: var(--fluo-action-hover); }
.fluo-bootstrap :focus-visible { outline: 3px solid var(--fluo-focus); outline-offset: 3px; }
.fluo-bootstrap .btn { min-height: var(--fluo-target); padding: .65rem 1.2rem; border-radius: var(--fluo-radius-pill); font-weight: 600; }
.fluo-bootstrap .btn-primary {
  --bs-btn-color: var(--fluo-on-action); --bs-btn-bg: var(--fluo-action); --bs-btn-border-color: var(--fluo-action);
  --bs-btn-hover-color: var(--fluo-on-action); --bs-btn-hover-bg: var(--fluo-action-hover); --bs-btn-hover-border-color: var(--fluo-action-hover);
  --bs-btn-active-color: var(--fluo-on-action); --bs-btn-active-bg: var(--fluo-action-hover); --bs-btn-active-border-color: var(--fluo-action-hover);
  --bs-btn-disabled-color: var(--fluo-on-action); --bs-btn-disabled-bg: var(--fluo-action); --bs-btn-disabled-border-color: var(--fluo-action);
  --bs-btn-focus-shadow-rgb: 32, 69, 232;
  color: var(--fluo-on-action); background-color: var(--fluo-action); border-color: var(--fluo-action);
}
.fluo-bootstrap .btn-primary:is(:hover,:active,.active), .fluo-bootstrap .show > .btn-primary.dropdown-toggle { color: var(--fluo-on-action); background-color: var(--fluo-action-hover); border-color: var(--fluo-action-hover); }
.fluo-bootstrap .btn-primary:disabled, .fluo-bootstrap .btn-primary.disabled { color: var(--fluo-on-action); background-color: var(--fluo-action); border-color: var(--fluo-action); }
.fluo-bootstrap .btn-outline-primary {
  --bs-btn-color: var(--fluo-action); --bs-btn-border-color: var(--fluo-action);
  --bs-btn-hover-color: var(--fluo-on-action); --bs-btn-hover-bg: var(--fluo-action); --bs-btn-hover-border-color: var(--fluo-action);
  --bs-btn-active-color: var(--fluo-on-action); --bs-btn-active-bg: var(--fluo-action-hover); --bs-btn-active-border-color: var(--fluo-action-hover);
  --bs-btn-disabled-color: var(--fluo-action); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--fluo-action);
  color: var(--fluo-action); background-color: transparent; border-color: var(--fluo-action);
}
.fluo-bootstrap .btn-outline-primary:is(:hover,:active,.active) { color: var(--fluo-on-action); background-color: var(--fluo-action); border-color: var(--fluo-action); }
.fluo-bootstrap .btn-outline-primary:disabled, .fluo-bootstrap .btn-outline-primary.disabled { color: var(--fluo-action); background-color: transparent; border-color: var(--fluo-action); }
.fluo-bootstrap .text-primary, .fluo-bootstrap .link-primary, .fluo-bootstrap .btn-link { color: var(--fluo-action) !important; }
.fluo-bootstrap .link-primary:hover, .fluo-bootstrap .btn-link:hover { color: var(--fluo-action-hover) !important; }
.fluo-bootstrap .bg-primary, .fluo-bootstrap .text-bg-primary { background-color: var(--fluo-action) !important; }
.fluo-bootstrap .text-bg-primary { color: var(--fluo-on-action) !important; }
.fluo-bootstrap .border-primary { border-color: var(--fluo-action) !important; }
.fluo-bootstrap .bg-primary-subtle, .fluo-bootstrap .bg-fluo-soft { background-color: var(--fluo-mist) !important; }
.fluo-bootstrap .text-muted, .fluo-bootstrap .form-text { color: var(--fluo-muted) !important; }
.fluo-bootstrap .card { --bs-card-bg: var(--fluo-surface); --bs-card-color: var(--fluo-ink); --bs-card-border-color: var(--fluo-line); background: var(--fluo-surface); color: var(--fluo-ink); border-color: var(--fluo-line); border-radius: var(--fluo-radius-card); }
.fluo-bootstrap :is(.form-control,.form-select) { min-height: var(--fluo-target); color: var(--fluo-ink); background-color: var(--fluo-surface); border-color: var(--fluo-control); border-radius: var(--fluo-radius-control); }
.fluo-bootstrap .form-control::placeholder { color: var(--fluo-muted); opacity: 1; }
.fluo-bootstrap :is(.form-control,.form-select,.form-check-input):focus { border-color: var(--fluo-focus); box-shadow: none; outline: 3px solid var(--fluo-focus); outline-offset: 3px; }
.fluo-bootstrap .form-control:disabled, .fluo-bootstrap .form-select:disabled { background-color: var(--fluo-mist); }
.fluo-bootstrap .form-check-input { border-color: var(--fluo-control); }
/* Keep white checks readable in both modes; input affordances never use signature blue. */
.fluo-bootstrap .form-check-input:checked { background-color: #2045E8; border-color: #2045E8; }
.fluo-bootstrap .form-check-label { min-height: var(--fluo-target); padding-inline-start: .3rem; }
.fluo-bootstrap .progress { --bs-progress-bg: var(--fluo-mist); background: var(--fluo-mist); border-radius: var(--fluo-radius-pill); }
.fluo-bootstrap .progress-bar { --bs-progress-bar-bg: var(--fluo-action); background: var(--fluo-action); color: var(--fluo-on-action); }
.fluo-bootstrap .nav-pills .nav-link.active, .fluo-bootstrap .nav-pills .show > .nav-link { background: var(--fluo-action); color: var(--fluo-on-action); }
.fluo-bootstrap .nav-link, .fluo-bootstrap .page-link { color: var(--fluo-action); }
.fluo-bootstrap .page-link { background: var(--fluo-surface); border-color: var(--fluo-control); }
.fluo-bootstrap .page-item.active .page-link { background: var(--fluo-action); border-color: var(--fluo-action); color: var(--fluo-on-action); }
.fluo-bootstrap .alert-primary { --bs-alert-color: var(--fluo-action); --bs-alert-bg: var(--fluo-mist); --bs-alert-border-color: var(--fluo-line); color: var(--fluo-action); background: var(--fluo-mist); border-color: var(--fluo-line); }
.fluo-bootstrap .accordion { --bs-accordion-bg: var(--fluo-surface); --bs-accordion-color: var(--fluo-ink); --bs-accordion-border-color: var(--fluo-line); --bs-accordion-btn-color: var(--fluo-ink); --bs-accordion-btn-bg: var(--fluo-surface); --bs-accordion-active-bg: var(--fluo-mist); --bs-accordion-active-color: var(--fluo-action); }
.fluo-bootstrap .accordion-item, .fluo-bootstrap .accordion-button { background: var(--fluo-surface); color: var(--fluo-ink); border-color: var(--fluo-line); }
.fluo-bootstrap .accordion-button:not(.collapsed) { background: var(--fluo-mist); color: var(--fluo-action); }
.fluo-bootstrap .accordion { border-radius: var(--fluo-radius-control); overflow: hidden; }
.fluo-bootstrap .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232045E8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); }
.fluo-bootstrap .nav-pills .nav-link { border-radius: var(--fluo-radius-pill); }
.fluo-bootstrap .alert, .fluo-bootstrap .list-group { border-radius: var(--fluo-radius-control); }
.fluo-bootstrap .table { --bs-table-bg: var(--fluo-surface); --bs-table-color: var(--fluo-ink); --bs-table-border-color: var(--fluo-line); --bs-table-striped-bg: var(--fluo-mist); --bs-table-striped-color: var(--fluo-ink); --bs-table-hover-bg: var(--fluo-mist); --bs-table-hover-color: var(--fluo-ink); color: var(--fluo-ink); border-color: var(--fluo-line); }
.fluo-bootstrap .modal-content, .fluo-bootstrap .dropdown-menu, .fluo-bootstrap .list-group-item { background: var(--fluo-surface); color: var(--fluo-ink); border-color: var(--fluo-line); }
.fluo-bootstrap .dropdown-item { color: var(--fluo-ink); }
.fluo-bootstrap .dropdown-item:is(:hover,:focus) { background: var(--fluo-mist); color: var(--fluo-action); }
.fluo-bootstrap .dropdown-item.active, .fluo-bootstrap .list-group-item.active { background: var(--fluo-action); color: var(--fluo-on-action); border-color: var(--fluo-action); }
.fluo-bootstrap .navbar { --bs-navbar-color: var(--fluo-muted); --bs-navbar-hover-color: var(--fluo-action); --bs-navbar-active-color: var(--fluo-ink); --bs-navbar-brand-color: var(--fluo-ink); }
.fluo-bootstrap .navbar .nav-link { color: var(--fluo-muted); }
.fluo-bootstrap .navbar .nav-link.active { color: var(--fluo-action); }
.fluo-bootstrap .navbar-toggler { border-color: var(--fluo-control); min-height: var(--fluo-target); }
.fluo-bootstrap .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%232045E8' stroke-width='2' stroke-linecap='round' d='M5 7h20M5 15h20M5 23h20'/%3E%3C/svg%3E"); }
.fluo-bootstrap[data-bs-theme="dark"] .accordion-button::after, [data-bs-theme="dark"] .fluo-bootstrap .accordion-button::after,
.fluo-bootstrap[data-fluo-theme="dark"] .accordion-button::after, [data-fluo-theme="dark"] .fluo-bootstrap .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234DB2FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); }
.fluo-bootstrap[data-bs-theme="dark"] .navbar-toggler-icon, [data-bs-theme="dark"] .fluo-bootstrap .navbar-toggler-icon,
.fluo-bootstrap[data-fluo-theme="dark"] .navbar-toggler-icon, [data-fluo-theme="dark"] .fluo-bootstrap .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%234DB2FF' stroke-width='2' stroke-linecap='round' d='M5 7h20M5 15h20M5 23h20'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .fluo-bootstrap *, .fluo-bootstrap *::before, .fluo-bootstrap *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .fluo-bootstrap :focus-visible { outline-color: Highlight; } }
