/* Bootstrap Replacement — only the classes this site actually uses */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; }

/* === Containers === */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.container-fluid { width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.75rem; padding-right: 0.75rem; }

/* === Grid (CSS Grid, 12-col) === */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.row > * { grid-column: span 12; min-width: 0; }
.col-12 { grid-column: span 12; }
.g-4 { gap: 1.5rem; }
@media (min-width: 576px) {
	.col-sm-6  { grid-column: span 6; }
	.col-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
	.col-md-4 { grid-column: span 4; }
	.col-md-6 { grid-column: span 6; }
	.col-md-8 { grid-column: span 8; }
}
@media (min-width: 992px) {
	.col-lg-2  { grid-column: span 2; }
	.col-lg-3  { grid-column: span 3; }
	.col-lg-4  { grid-column: span 4; }
	.col-lg-5  { grid-column: span 5; }
	.col-lg-6  { grid-column: span 6; }
	.col-lg-7  { grid-column: span 7; }
	.col-lg-8  { grid-column: span 8; }
	.col-lg-9  { grid-column: span 9; }
	.col-lg-10 { grid-column: span 10; }
	.col-lg-12 { grid-column: span 12; }
}

/* === Navbar === */
.navbar { display: flex; align-items: center; padding: 0.5rem 0; flex-wrap: wrap; }
.navbar > .container { display: flex; align-items: center; flex-wrap: wrap; }
.navbar-brand { font-size: 1.25rem; text-decoration: none; color: #fff; white-space: nowrap; margin-right: 1rem; }
.navbar-toggler { background: none; border: 1px solid rgba(255,255,255,0.1); padding: 0.25rem 0.75rem; cursor: pointer; border-radius: 0.375rem; display: block; margin-left: auto; }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.navbar-collapse { display: none; flex-basis: 100%; flex-grow: 1; }
.navbar-collapse.show { display: flex; }
.navbar-nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.nav-item { }
.nav-link { display: block; padding: 0.5rem 0; text-decoration: none; color: rgba(255,255,255,0.55); }
.nav-link:hover { color: rgba(255,255,255,0.75); }
.navbar-dark { }
.bg-dark { background-color: #212529; }
.sticky-top { position: sticky; top: 0; z-index: 1020; }
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-toggler { display: none; }
	.navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
	.navbar-expand-lg .navbar-nav { flex-direction: row; }
	.navbar-expand-lg .nav-link { padding: 0.5rem 1rem; }
}

/* === Carousel === */
.carousel { position: relative; overflow: hidden; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item { display: none; width: 100%; }
.carousel-item.active { display: block; }
.carousel-indicators { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 0; margin: 0 15%; list-style: none; z-index: 2; gap: 4px; }
.carousel-indicators button { width: 30px; height: 3px; border: 0; background-color: rgba(255,255,255,0.5); cursor: pointer; padding: 0; opacity: 0.5; transition: opacity 0.3s; }
.carousel-indicators button.active { opacity: 1; background-color: #fff; }
.carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15%; padding: 0; color: #fff; text-align: center; background: none; border: 0; opacity: 0.5; transition: opacity 0.15s; cursor: pointer; }
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 0.9; }
.carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: 50%; background-size: 100% 100%; }
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

/* === Buttons === */
.btn { display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.375rem; transition: color 0.15s, background-color 0.15s, border-color 0.15s; text-decoration: none; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; }
.btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.5rem; }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; background-color: transparent; }
.btn-outline-light:hover { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-info { color: #fff; background-color: #0dcaf0; border-color: #0dcaf0; }
.btn-info:hover { background-color: #31d2f2; border-color: #25cff2; }
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.btn-group > .btn:last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }

/* === Cards === */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--sk-surface, #1e1e1e); background-clip: border-box; border: 1px solid var(--sk-border, #2d2d2d); border-radius: 0.375rem; }
.card-header { padding: 0.5rem 1rem; border-bottom: 1px solid var(--sk-border, #2d2d2d); }
.card-body { flex: 1 1 auto; padding: 1rem; }
.card-footer { padding: 0.5rem 1rem; border-top: 1px solid var(--sk-border, #2d2d2d); }

/* === Tables === */
.table { width: 100%; margin-bottom: 1rem; vertical-align: top; border-color: var(--sk-border, #2d2d2d); }
.table th, .table td { padding: 0.5rem; }
.table-condensed th, .table-condensed td { padding: 0.25rem; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === Progress === */
.progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: #e9ecef; border-radius: 0.375rem; }
.progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: #0d6efd; transition: width 0.6s ease; }

/* === Ratio === */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-16x9::before { padding-top: 0; }
.ratio-16x9 > * { position: relative; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x3::before { padding-top: 0; }
.ratio-4x3 > * { position: relative; }

/* === Lists === */
.list-inline { list-style: none; padding-left: 0; }
.list-inline-item { display: inline-block; }
.list-unstyled { list-style: none; padding-left: 0; }

/* === Display === */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }
@media (min-width: 768px) { .d-md-inline { display: inline !important; } }

/* === Flex === */
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* === Spacing === */
.m-2  { margin: 0.5rem !important; }
.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-2 { margin-top: 0.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 992px) { .mb-lg-0 { margin-bottom: 0 !important; } }

/* === Text === */
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end   { text-align: right !important; }
.text-left  { text-align: left !important; }
.text-muted { color: #6c757d !important; }
@media (min-width: 992px) { .text-lg-end { text-align: right !important; } }

/* === Images === */
.img-fluid { max-width: 100%; height: auto; }

/* === Sizing === */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }

/* === Misc === */
.shadow { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; }
.rounded { border-radius: 0.375rem !important; }
.lead { font-size: 1.25rem; font-weight: 300; }
.small { font-size: 0.875em; }
.visually-hidden, .sr-only { 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; }
.position-relative { position: relative !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.bg-transparent { background-color: transparent !important; }
.border { border: 1px solid var(--sk-border, #dee2e6) !important; }
.collapse:not(.show) { display: none; }

/* === Nav pills === */
.nav-pills { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-pills .nav-link { border-radius: 0.375rem; padding: 0.5rem 1rem; color: var(--sk-text, #212529); text-decoration: none; }
.nav-pills .nav-link.active { background-color: #0d6efd; color: #fff; }

/* === Legacy BS3 === */
.panel { border: 1px solid var(--sk-border, #dee2e6); border-radius: 4px; margin-bottom: 1rem; }
.panel-default { }
.panel-info { border-color: #0dcaf0; }
.btn-toolbar { display: flex; flex-wrap: wrap; }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover { background-color: #e6e6e6; border-color: #adadad; }