/**
 * bootstrap-compat.css
 *
 * Purpose: Replaces Bootstrap's CDN for layout and UI component classes
 * (cards, grid rows/columns) and defines Bootstrap CSS custom properties so
 * that components referencing --bs-* variables continue to work after
 * Bootstrap is removed from a layout.
 *
 * Why a separate file: Keeps Bootstrap compatibility concerns isolated from
 * site-specific styles in style.css, making it easy to audit remaining
 * Bootstrap dependencies and remove or replace individual sections as
 * migration to Tailwind CSS progresses.
 *
 * Load order: must come before Bootstrap CDN in layouts that still load it,
 * so Bootstrap can override variables and classes when present.
 */

/* ============================================================
   CSS Custom Properties
   Fallbacks active when Bootstrap CDN is not loaded.
   Bootstrap overrides these (loads after this file) when present.
   ============================================================ */

/* Light mode (Bootstrap defaults) */
:root {
  --bs-body-color:        #212529;
  --bs-body-bg:           #fff;
  --bs-border-color:      #dee2e6;
  --bs-border-width:      1px;
  --bs-border-radius:     0.375rem;
  --bs-primary:           #0d6efd;
  --bs-secondary:         #6c757d;
  --bs-secondary-bg:      #e9ecef;
  --bs-secondary-color:   rgba(33, 37, 41, 0.75);
  --bs-link-color:        #0d6efd;
  --bs-link-hover-color:  #0a58ca;
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
  --bs-card-cap-bg:       rgba(33, 37, 41, 0.03);
}

/* Dark mode overrides */
html.dark,
:root[data-bs-theme='dark'] {
  --bs-body-color:        #dee2e6;
  --bs-body-bg:           #212529;
  --bs-border-color:      #495057;
  --bs-primary:           #0d6efd;
  --bs-secondary:         #6c757d;
  --bs-secondary-bg:      #343a40;
  --bs-secondary-color:   rgba(222, 226, 230, 0.75);
  --bs-link-color:        #6ea8fe;
  --bs-link-hover-color:  #9ec5fe;
  --bs-card-bg:           #212529;
  --bs-card-border-color: rgba(255, 255, 255, 0.125);
  --bs-card-cap-bg:       rgba(222, 226, 230, 0.03);
}

/* ============================================================
   Card Component
   ============================================================ */

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
  --bs-card-border-radius: 0.375rem;
  --bs-card-inner-border-radius: 0.25rem;
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(33, 37, 41, 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

html.dark .card,
:root[data-bs-theme='dark'] .card {
  --bs-card-border-color: rgba(255, 255, 255, 0.125);
  --bs-card-cap-bg: rgba(222, 226, 230, 0.03);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Grid — Row and Columns
   ============================================================ */

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* Default (all breakpoints) */
.col    { flex: 1 0 0%; }
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* md (768px+) */
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* lg (992px+) */
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* xl (1200px+) */
@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-xl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   Grid — Gap Utilities
   ============================================================ */

.g-0  { --bs-gutter-x: 0;      --bs-gutter-y: 0; }
.g-1  { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.g-2  { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem; }
.g-3  { --bs-gutter-x: 1rem;    --bs-gutter-y: 1rem; }
.g-4  { --bs-gutter-x: 1.5rem;  --bs-gutter-y: 1.5rem; }
.g-5  { --bs-gutter-x: 3rem;    --bs-gutter-y: 3rem; }

@media (min-width: 768px) {
  .g-md-0 { --bs-gutter-x: 0;      --bs-gutter-y: 0; }
  .g-md-1 { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
  .g-md-2 { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem; }
  .g-md-3 { --bs-gutter-x: 1rem;    --bs-gutter-y: 1rem; }
  .g-md-4 { --bs-gutter-x: 1.5rem;  --bs-gutter-y: 1.5rem; }
  .g-md-5 { --bs-gutter-x: 3rem;    --bs-gutter-y: 3rem; }
}

/* ============================================================
   Flexbox Alignment Utilities
   ============================================================ */

.justify-content-start   { justify-content: flex-start; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around; }

.align-items-start   { align-items: flex-start; }
.align-items-center  { align-items: center; }
.align-items-end     { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }

/* ============================================================
   Misc Layout Utilities
   ============================================================ */

.h-100 { height: 100% !important; }

/* ============================================================
   Display Utilities
   ============================================================ */

.d-none   { display: none !important; }
.d-inline { display: inline !important; }
.d-block  { display: block !important; }
.d-flex   { display: flex !important; }

.text-decoration-none { text-decoration: none !important; }

/* ============================================================
   Spacing Utilities — Margin
   ============================================================ */

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* ============================================================
   Spacing Utilities — Padding
   ============================================================ */

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

/* ============================================================
   Typography Utilities
   ============================================================ */

/* Heading size utility classes — same scale as .fs-* */
.h1 { font-size: calc(1.375rem + 1.5vw) !important; }
.h2 { font-size: calc(1.325rem + 0.9vw) !important; }
.h3 { font-size: calc(1.3rem + 0.6vw) !important; }
.h4 { font-size: calc(1.275rem + 0.3vw) !important; }
.h5 { font-size: 1.25rem !important; }
.h6 { font-size: 1rem !important; }

@media (min-width: 1200px) {
  .h1 { font-size: 2.5rem !important; }
  .h2 { font-size: 2rem !important; }
  .h3 { font-size: 1.75rem !important; }
  .h4 { font-size: 1.5rem !important; }
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

.fw-semibold { font-weight: 600 !important; }

/* Fluid scale matches Bootstrap 5 — clamps at 1200px+ */
.fs-1 { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-2 { font-size: calc(1.325rem + 0.9vw) !important; }
.fs-3 { font-size: calc(1.3rem + 0.6vw) !important; }
.fs-4 { font-size: calc(1.275rem + 0.3vw) !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

@media (min-width: 1200px) {
  .fs-1 { font-size: 2.5rem !important; }
  .fs-2 { font-size: 2rem !important; }
  .fs-3 { font-size: 1.75rem !important; }
  .fs-4 { font-size: 1.5rem !important; }
}

.small       { font-size: 0.875em !important; }
.initialism  { font-size: 0.75em; text-transform: uppercase; }

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   Table Component
   ============================================================ */

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.008);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.05);
  --bs-table-hover-color: var(--bs-body-color);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
  border-collapse: collapse;
}

.table > :not(caption) > * > * {
  padding: 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom: var(--bs-border-width, 1px) solid var(--bs-table-border-color);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, transparent));
}

.table > tbody { vertical-align: inherit; }
.table > thead { vertical-align: bottom; }

.table th {
  text-align: inherit;
  font-weight: inherit;
}

.table thead th {
  font-weight: 700;
}

.caption-top { caption-side: top; }


.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-bordered > :not(caption) > * {
  border-top: var(--bs-border-width, 1px) solid var(--bs-table-border-color);
}

.table-bordered > :not(caption) > * > * {
  border-left: var(--bs-border-width, 1px) solid var(--bs-table-border-color);
  border-right: var(--bs-border-width, 1px) solid var(--bs-table-border-color);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-bg-type: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

html.dark .table,
:root[data-bs-theme='dark'] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.008);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Navigation Utilities
   ============================================================ */

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-tabs {
  border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.nav-item { list-style: none; }

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bs-link-color, #0d6efd);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--bs-link-hover-color, #0a58ca);
}

/* ============================================================
   List Group Component
   ============================================================ */

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg, #fff);
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: inherit;
  border-top-right-radius: 0;
}

.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-border-width, 1px);
  border-left-width: 0;
}

html.dark .list-group-item,
:root[data-bs-theme='dark'] .list-group-item {
  background-color: var(--bs-body-bg, #212529);
  border-color: var(--bs-border-color, #495057);
}