/* ========================================================================== bootstrap_fallback.css — same-origin safety net for the Bootstrap CDN. Loaded in BEFORE the Bootstrap CDN . When the CDN loads (the normal case) Bootstrap's later, equal-specificity rules win and this file has ZERO effect. When the CDN fails to load — a weak mobile/field connection, a CDN hiccup, or offline use — these rules keep pages laid out and readable instead of collapsing into an unstyled, staggered mess. Scope: static layout only (grid, forms, buttons, cards, tables, common utilities). Bootstrap's *JS* is also CDN-hosted, so interactive components (dropdowns, modals) can't function when the CDN is down regardless; this file just keeps the page usable. Colors use --portal-* tokens (injected inline by base.html, so they resolve without the CDN) — no raw literals, per the theme-purity contract. ========================================================================== */ /* ---- Reset / reboot basics ---- */ *, *::before, *::after { box-sizing: border-box; } /* Root tokens this file leans on, with token-to-token fallbacks only. */ :root { --bsf-fg: var(--portal-body-color, var(--bs-body-color)); --bsf-muted: var(--portal-muted-color, var(--bs-secondary-color)); --bsf-bg: var(--portal-body-bg, var(--bs-body-bg)); --bsf-surface: var(--portal-surface-bg, var(--bs-tertiary-bg)); --bsf-border: var(--portal-border-color, var(--bs-border-color)); --bsf-accent: var(--portal-accent, var(--bs-primary)); --bsf-on-accent: var(--portal-on-accent, var(--token-color-on-accent)); --bsf-success: var(--portal-success, var(--bs-success)); --bsf-danger: var(--portal-danger, var(--bs-danger)); --bsf-warning: var(--portal-warning, var(--bs-warning)); } /* ---- Grid: containers, rows, responsive columns ---- */ .container, .container-fluid { width: 100%; margin-inline: auto; padding-inline: .75rem; } .container { max-width: 1140px; } .row { display: flex; flex-wrap: wrap; gap: 0; margin: 0 -.75rem; } .row > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding-inline: .75rem; } .row.g-0 { margin: 0; } .row.g-0 > * { padding-inline: 0; } .row.g-1 { gap: .25rem 0; } .row.g-2 { gap: .5rem 0; } .row.g-3 { gap: 1rem 0; } .row.g-4 { gap: 1.5rem 0; } .col { flex: 1 0 0%; width: auto; } .col-auto { flex: 0 0 auto; width: auto; } .col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%} .col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%} .col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%} /* col-md / col-lg columns: full width below the breakpoint, split at/above it. */ @media (min-width: 768px) { .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%} .col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%} .col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%} .col-md{flex:1 0 0%;width:auto}.col-md-auto{flex:0 0 auto;width:auto} } @media (min-width: 992px) { .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%} .col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%} .col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%} .col-xl-3{width:25%}.col-xl-4{width:33.3333%}.col-xl-5{width:41.6667%} .col-xl-6{width:50%}.col-xl-7{width:58.3333%}.col-xl-8{width:66.6667%}.col-xl-9{width:75%} } /* ---- Display / flex / spacing utilities ---- */ .d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important} .d-inline-block{display:inline-block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important} @media (min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}} @media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}} .flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important} .flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-fill{flex:1 1 auto!important} .align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important} .align-items-end{align-items:flex-end!important}.align-items-stretch{align-items:stretch!important} .justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important} .justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important} .justify-content-around{justify-content:space-around!important} .gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important} .text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important} .text-muted{color:var(--bsf-muted)!important}.text-nowrap{white-space:nowrap!important} .fw-normal{font-weight:400!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important} .small{font-size:.875em!important}.w-100{width:100%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important} .m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important} .mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important} .me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-auto{margin-left:auto!important} .p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important} .py-2{padding-block:.5rem!important}.py-3{padding-block:1rem!important}.px-2{padding-inline:.5rem!important}.px-3{padding-inline:1rem!important} /* ---- Forms ---- */ .form-label{display:inline-block;margin-bottom:.4rem;font-weight:600;color:var(--bsf-fg)} .form-control,.form-select{ display:block;width:100%;padding:.5rem .75rem;font-size:max(16px,1rem);line-height:1.5; color:var(--bsf-fg);background-color:var(--bsf-bg);border:1px solid var(--bsf-border);border-radius:.5rem; } .form-select{padding-right:2rem} textarea.form-control{min-height:calc(1.5em + 1rem + 2px)} .form-control:focus,.form-select:focus{outline:0;border-color:var(--bsf-accent);box-shadow:0 0 0 .2rem color-mix(in srgb, var(--bsf-accent) 22%, transparent)} .form-text{display:block;margin-top:.35rem;font-size:.85em;color:var(--bsf-muted)} .form-check{display:block;min-height:1.5rem;padding-left:1.6em;margin-bottom:.25rem} .form-check .form-check-input{float:left;margin-left:-1.6em} .input-group{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%} .input-group>.form-control,.input-group>.form-select{flex:1 1 auto;width:1%;min-width:0} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:.5rem .9rem;min-height:40px;border:1px solid transparent;border-radius:.5rem; font-weight:600;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer; color:var(--bsf-fg);background:transparent; } .btn-sm{padding:.3rem .6rem;min-height:32px;font-size:.875rem} .btn-lg{padding:.65rem 1.1rem;font-size:1.1rem} .btn-primary{background:var(--bsf-accent);border-color:var(--bsf-accent);color:var(--bsf-on-accent)} .btn-secondary{background:var(--bsf-muted);border-color:var(--bsf-muted);color:var(--bsf-on-accent)} .btn-success{background:var(--bsf-success);border-color:var(--bsf-success);color:var(--bsf-on-accent)} .btn-danger{background:var(--bsf-danger);border-color:var(--bsf-danger);color:var(--bsf-on-accent)} .btn-light{background:var(--bsf-surface);border-color:var(--bsf-border);color:var(--bsf-fg)} .btn-outline-primary{border-color:var(--bsf-accent);color:var(--bsf-accent)} .btn-outline-secondary{border-color:var(--bsf-border);color:var(--bsf-fg)} .btn:disabled,.btn.disabled{opacity:.55;cursor:default} /* ---- Card ---- */ .card{display:flex;flex-direction:column;min-width:0;background:var(--bsf-bg);border:1px solid var(--bsf-border);border-radius:.6rem} .card-body{flex:1 1 auto;padding:1rem} .card-header,.card-footer{padding:.65rem 1rem;background:var(--bsf-surface)} .card-header{border-bottom:1px solid var(--bsf-border)}.card-footer{border-top:1px solid var(--bsf-border)} .card-title{margin-bottom:.5rem;font-weight:700} /* ---- Table ---- */ .table{width:100%;margin-bottom:1rem;color:var(--bsf-fg);border-collapse:collapse;vertical-align:top} .table > :not(caption) > * > *{padding:.5rem .6rem;border-bottom:1px solid var(--bsf-border)} .table thead th{text-align:left;font-weight:700;border-bottom:2px solid var(--bsf-border)} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---- Badge / alert ---- */ .badge{display:inline-block;padding:.35em .6em;font-size:.75em;font-weight:700;line-height:1;border-radius:.4rem;color:var(--bsf-on-accent);background:var(--bsf-muted)} .badge.bg-primary{background:var(--bsf-accent)}.badge.bg-success{background:var(--bsf-success)}.badge.bg-danger{background:var(--bsf-danger)} .alert{position:relative;padding:.75rem 1rem;margin-bottom:1rem;border:1px solid var(--bsf-border);border-radius:.5rem;background:var(--bsf-surface);color:var(--bsf-fg)} .alert-danger{border-color:color-mix(in srgb,var(--bsf-danger) 45%,var(--bsf-border));background:color-mix(in srgb,var(--bsf-danger) 10%,var(--bsf-bg))} .alert-success{border-color:color-mix(in srgb,var(--bsf-success) 45%,var(--bsf-border));background:color-mix(in srgb,var(--bsf-success) 10%,var(--bsf-bg))} /* ---- Nav / navbar (layout only) ---- */ .navbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem} .navbar .container-fluid{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:100%} .nav{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0} .nav-link{display:block;padding:.4rem .65rem;color:var(--bsf-fg);text-decoration:none} .navbar-nav{display:flex;flex-direction:row;flex-wrap:wrap;list-style:none;margin:0;padding:0} .dropdown-menu{display:none;position:absolute;z-index:1000;min-width:10rem;padding:.35rem 0;background:var(--bsf-bg);border:1px solid var(--bsf-border);border-radius:.5rem} .dropdown-menu.show{display:block} .dropdown-item{display:block;width:100%;padding:.4rem 1rem;color:var(--bsf-fg);text-decoration:none;background:transparent;border:0;text-align:inherit}