/* =============================================================================
Hoopsalytics modern theme — APP COMPATIBILITY LAYER
Loaded (after modern.css) on logged-in app pages that set $app_page = 1 before
including template/head-modern.php (template/nav-user-modern.php loads it as a
fallback). It implements, in the dark theme, the bootstrap 4 classes the app
markup actually uses (grid, utilities, buttons, forms, tables, modals, dropdowns,
tooltips) so pages keep their existing markup and bootstrap.min.js keeps driving
modals / tooltips / dropdowns. bootstrap.css itself is NOT loaded on these pages.
============================================================================= */
/* ---- page wrappers (old template markup) ---- */
.contain-wrapp { padding: 20px 0 80px; }
.contain-wrapp.padding-bottom-clear { padding-bottom: 80px; }
.container, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 48px;
}
.container-fluid { width: 100%; margin: 0 auto; padding: 0 24px; }
.container-xl { max-width: 1400px; }
/* rows that sit directly in (lib/alert.php is included before the page wrapper on app pages):
align them with the content column instead of bleeding past the viewport via the negative gutters */
body > .row { max-width: 1200px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 767px) { body > .row { padding: 0 4px; } }
body > .row > .col-12 .alert { margin-top: 20px; }
/* app page headings are smaller than marketing headings */
.contain-wrapp h1, .container-fluid > h1 { font-size: 30px; margin: 4px 0 10px; }
.contain-wrapp h2 { font-size: 22px; margin: 18px 0 8px; }
.contain-wrapp h3 { font-size: 19px; margin: 16px 0 6px; }
h4 { font-size: 17px; font-weight: 700; margin: 14px 0 6px; }
h5 { font-size: 15px; font-weight: 700; margin: 12px 0 4px; }
h6 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; }
p { margin: 0 0 12px; }
hr { margin: 14px 0; } /* app pages use
as a list separator (event logs etc.); modern.css's 28px is for marketing pages */
.contain-wrapp h1 i, .contain-wrapp h2 i, .contain-wrapp h3 i { color: var(--brand); margin-right: 4px; }
/* old mini-hero (template/mini-hero.php) */
.inner-head { padding: 28px 0 6px; text-align: center; }
.inner-head .title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.inner-head .subtitle { font-size: 16px; color: var(--body); margin-top: 6px; }
/* ---- grid ---- */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > * { box-sizing: border-box; padding: 0 12px; min-width: 0; }
.no-gutters { margin: 0; } .no-gutters > * { padding: 0; }
.form-row { display: flex; flex-wrap: wrap; margin: 0 -6px; } .form-row > * { padding: 0 6px; }
.col { flex: 1 0 0%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.offset-1 { margin-left: 8.3333%; } .offset-2 { margin-left: 16.6667%; } .offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.3333%; } .offset-5 { margin-left: 41.6667%; } .offset-6 { margin-left: 50%; }
/* responsive columns: below their breakpoint they stack full width (like bootstrap) */
[class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
.col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.offset-sm-1 { margin-left: 8.3333%; } .offset-sm-2 { margin-left: 16.6667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.3333%; }
}
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; }
.offset-md-1 { margin-left: 8.3333%; } .offset-md-2 { margin-left: 16.6667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.3333%; }
}
@media (min-width: 992px) {
.col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.offset-lg-1 { margin-left: 8.3333%; } .offset-lg-2 { margin-left: 16.6667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.3333%; }
}
@media (min-width: 1200px) {
.col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
.col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
.offset-xl-2 { margin-left: 16.6667%; } .offset-xl-3 { margin-left: 25%; }
}
/* small screens: fixed-fraction cols narrower than a third stack too, so labels/inputs don't crush */
@media (max-width: 767px) {
.col-1, .col-2, .col-3, .col-4, .offset-1, .offset-2, .offset-3, .offset-4 { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
.container, .container-sm, .container-md, .container-lg, .container-xl { padding: 0 16px; }
.container-fluid { padding: 0 12px; }
}
.align-items-center { align-items: center; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; } .justify-content-start { justify-content: flex-start; }
.flex-wrap { flex-wrap: wrap; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; }
.d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; }
/* ---- display / visibility utilities ---- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
@media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-flex { display: flex !important; } }
@media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-flex { display: flex !important; } .d-md-table-cell { display: table-cell !important; } }
@media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-flex { display: flex !important; } .d-lg-table-cell { display: table-cell !important; } }
@media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-block { display: block !important; } .d-xl-inline { display: inline !important; } .d-xl-flex { display: flex !important; } }
.invisible { visibility: hidden !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.position-relative { position: relative; } .position-absolute { position: absolute; }
.overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; }
.w-100 { width: 100% !important; } .w-50 { width: 50% !important; } .w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.float-right { float: right !important; } .float-left { float: left !important; } .float-none { float: none !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }
.text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-muted { color: var(--faint) !important; }
.text-primary { color: var(--brand-hot) !important; }
.text-secondary { color: var(--body) !important; }
.text-warning { color: #ecc978 !important; }
.text-success { color: #4cd97e !important; }
.text-danger { color: #ee6b6b !important; }
.text-info { color: #6cb6ff !important; }
.text-white { color: #fff !important; }
.text-dark { color: var(--ink) !important; }
.text-uppercase { text-transform: uppercase; }
.font-weight-bold, .font-weight-bolder { font-weight: 700 !important; } .font-weight-normal { font-weight: 400 !important; }
.font-italic { font-style: italic; }
.small, small { font-size: 85%; }
.lead { font-size: 18px; color: var(--body); }
.rounded { border-radius: 8px; } .rounded-circle { border-radius: 50%; }
.border { border: 1px solid var(--line); } .border-0 { border: 0 !important; }
.shadow-sm, .shadow { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8); }
.img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; max-width: 100%; height: auto; }
/* spacing scale: 0 .25rem .5rem 1rem 1.5rem 3rem */
.m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mr-0 { margin-right: 0 !important; }
.m-1 { margin: .25rem !important; } .mt-1 { margin-top: .25rem !important; } .mb-1 { margin-bottom: .25rem !important; } .ml-1 { margin-left: .25rem !important; } .mr-1 { margin-right: .25rem !important; }
.m-2 { margin: .5rem !important; } .mt-2 { margin-top: .5rem !important; } .mb-2 { margin-bottom: .5rem !important; } .ml-2 { margin-left: .5rem !important; } .mr-2 { margin-right: .5rem !important; }
.m-3 { margin: 1rem !important; } .mt-3 { margin-top: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; } .ml-3 { margin-left: 1rem !important; } .mr-3 { margin-right: 1rem !important; }
.m-4 { margin: 1.5rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .ml-4 { margin-left: 1.5rem !important; } .mr-4 { margin-right: 1.5rem !important; }
.m-5 { margin: 3rem !important; } .mt-5 { margin-top: 3rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !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; }
.pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; }
.pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .25rem !important; } .pb-2 { padding-bottom: .5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; }
.pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: .25rem !important; } .pl-2 { padding-left: .5rem !important; } .pl-3 { padding-left: 1rem !important; }
.pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: .25rem !important; } .pr-2 { padding-right: .5rem !important; } .pr-3 { padding-right: 1rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
/* ---- buttons (bootstrap class names, dark palette; icons are Font Awesome) ---- */
.btn, .btn-e {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.25;
padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent;
cursor: pointer; text-decoration: none; white-space: nowrap; vertical-align: middle;
background: var(--input); color: var(--ink);
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.btn:hover, .btn-e:hover { color: var(--ink); filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(247, 147, 29, 0.25); }
.btn:focus-visible { outline: 2px solid var(--sa-video); outline-offset: 2px; box-shadow: none; } /* keyboard focus ring */
.btn-primary, .btn-e-primary { background: var(--brand); color: #14171c; }
.btn-primary:hover, .btn-e-primary:hover { background: var(--brand-hot); color: #14171c; }
.btn-success { background: #2fbf63; color: #0f1a13; } .btn-success:hover { background: #4cd97e; color: #0f1a13; }
.btn-info { background: #4ba3f5; color: #0e1620; } .btn-info:hover { background: #6cb6ff; color: #0e1620; }
.btn-danger { background: #e05656; color: #fff; } .btn-danger:hover { background: #ee6b6b; color: #fff; }
.btn-warning { background: #e7b84a; color: #1a1406; } .btn-warning:hover { background: #f3c85f; color: #1a1406; }
.btn-secondary { background: #3a4250; color: var(--ink); border-color: var(--sa-slate-edge); } /* the edge lifts the component boundary to 3.24:1 on the page bg (WCAG 1.4.11); the fill alone is 1.84:1 */ .btn-secondary:hover { background: #4a5364; }
.btn-back { background: #3568b8; color: #fff; } .btn-back:hover { background: #4a7fd0; color: #fff; } /* "Back to ..." navigation, site-wide */
.btn-learn { background: #cfd6e0; border-color: #cfd6e0; color: #14171c; font-weight: 600; } .btn-learn:hover { background: #e2e8f0; border-color: #e2e8f0; color: #14171c; filter: none; } /* "Learn More" help links, site-wide: light gray fill - visible, but neutral next to the orange/green/blue action colors */
/* ---- button hierarchy (tokens in css/modern.css :root) ----
Weight carries hierarchy, hue carries meaning:
tier 1 .btn-primary solid brand orange - at most ONE per screen (the page's single primary action)
tier 2 .btn-accent-soft tinted brand - section-level actions
tier 3 .btn-row neutral slate - per-row controls; the color coding lives in the leading icon (.icon-lead + .is-video / .is-analytics) */
.btn-accent-soft { background: var(--sa-brand-tint); color: var(--sa-brand); border-color: var(--sa-brand-tint-edge); }
.btn-accent-soft:hover { background: #30230f; color: var(--sa-brand); }
.btn-row { background: var(--sa-slate); color: var(--sa-ink); border-color: var(--sa-slate-edge); }
.btn-row:hover { background: var(--sa-slate-hover); color: var(--sa-ink); }
.btn-row .icon-lead { color: var(--sa-ink-dim); }
.btn-row.is-video .icon-lead { color: var(--sa-video); }
.btn-row.is-analytics .icon-lead { color: var(--sa-brand); }
/* ---- jersey color picker strip (games/start-game.php etc.) ---- */
/* the current-color swatch opens the picker; a caret signals it's clickable.
Drawn via ::after because the page JS rewrites the button's inner html on every pick */
#home-color-display::after, #visitor-color-display::after {
content: ""; display: inline-block; margin-left: 8px; vertical-align: 2px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor;
}
.jersey-picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.jersey-picker-close {
width: 26px; height: 26px; padding: 0;
background: none; border: 1px solid var(--input-line); border-radius: 50%;
color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer;
}
.jersey-picker-close:hover { color: var(--ink); border-color: #4a5462; }
/* ---- stats toolbar with segmented controls (template/subnav-show-stats*.php) ----
groups of exclusive, instant-effect choices render as connected segments;
the active segment is orange (orange = analytics) */
.stats-toolbar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 12px 30px; padding: 8px 0 6px;
}
.tb-group { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.tb-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--faint); text-transform: uppercase; }
.seg { display: inline-flex; border: 1px solid var(--input-line); border-radius: 8px; overflow: hidden; background: var(--input); }
.seg a {
display: block; padding: 7px 14px; white-space: nowrap; cursor: pointer;
font-size: 13.5px; font-weight: 600; color: var(--body);
border-right: 1px solid var(--input-line);
}
.seg a:last-child { border-right: none; }
.seg a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.seg a.on { background: var(--brand); color: #14171c; }
.seg a.on:hover { background: var(--brand-hot); color: #14171c; }
/* per-game / totals toggle at the right of the comparison table (api/get-summary.php) */
.values-toggle { display: inline-flex; vertical-align: middle; }
.tb-gear { color: #4ba3f5; cursor: pointer; font-size: 15px; } /* customize cog: blue, site-wide (matches btn-info "Customize View" buttons) */
.tb-gear:hover { color: #8ec7ec; }
.tb-gear i { color: inherit !important; }
.tb-reset {
font-size: 13.5px; font-weight: 600; color: var(--faint); cursor: pointer;
border: 1px solid transparent; border-radius: 8px; padding: 7px 12px;
}
.tb-reset:hover { color: var(--ink); border-color: var(--input-line); }
/* a fixed box for the View select: its width can't follow the longest option (which spilled over the next group),
and long names clip with an ellipsis instead */
.stats-toolbar select { width: 240px; min-width: 0; max-width: 240px; flex: 0 0 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.btn-light { background: #d4dae2; color: #14171c; } .btn-dark { background: #0b0d11; color: var(--ink); border-color: var(--line); }
.btn-link { background: none; color: var(--brand); padding-left: 4px; padding-right: 4px; } .btn-link:hover { color: var(--brand-hot); filter: none; text-decoration: underline; }
.btn-outline-primary { background: none; border-color: var(--brand); color: var(--brand); } .btn-outline-primary:hover { background: var(--brand-tint); color: var(--brand-hot); }
.btn-outline-info { background: none; border-color: #4ba3f5; color: #6cb6ff; } .btn-outline-info:hover { background: rgba(75, 163, 245, 0.14); color: #8ec7ec; }
.btn-outline-success { background: none; border-color: #2fbf63; color: #4cd97e; } .btn-outline-success:hover { background: rgba(47, 191, 99, 0.14); }
.btn-outline-danger { background: none; border-color: #e05656; color: #ee6b6b; } .btn-outline-danger:hover { background: rgba(224, 86, 86, 0.14); }
.btn-outline-warning { background: none; border-color: #e7b84a; color: #ecc978; } .btn-outline-warning:hover { background: rgba(231, 184, 74, 0.14); }
.btn-outline-secondary { background: none; border-color: var(--input-line); color: var(--body); } .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.btn-outline-dark, .btn-outline-light { background: none; border-color: var(--input-line); color: var(--ink); }
.btn-sm, .btn-group-sm > .btn { font-size: 13px; padding: 5px 11px; border-radius: 6px; }
.btn-lg, .btn-group-lg > .btn { font-size: 16px; padding: 12px 22px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
.btn-group, .btn-group-vertical { display: inline-flex; vertical-align: middle; }
/* joined strip: square off the shared inner edges only (mirrors bootstrap 4). A dropdown toggle keeps its
right corners because its .dropdown-menu sibling always follows it, so it is never :last-child */
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1.5px; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group-vertical { flex-direction: column; }
/* loose row of separate action buttons (NOT a joined .btn-group): wraps inside a table cell instead of forcing the table wider than the page */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.btn .badge { margin-left: 4px; }
button.btn.btn-primary.option-button { margin-right: 4px; margin-bottom: 4px; }
/* a plain