/**
    Estes brand skin for the Backpack admin panel (Tabler theme).
    Loaded after the theme's colors.css — see config/backpack/theme-tabler.php.
*/

@import url('https://fonts.bunny.net/css?family=roboto:400,400i,500,700,700i,900i');

:root {
    --estes-red: #D81E05;
    --estes-yellow: #FCD116;
    --estes-yellow-dark: #E3BC0F;
    --estes-black: #000;
    --estes-link: #0054C8;

    --tblr-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --tblr-border-radius: 12px;
    --tblr-border-radius-sm: 8px;
    --tblr-border-radius-lg: 18px;
    --tblr-border-radius-xl: 24px;
    --estes-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

/* Brand colors, in both color modes */
:root, [data-bs-theme=light], [data-bs-theme=dark], [data-menu-theme=light], [data-menu-theme=dark] {
    --tblr-primary: var(--estes-yellow);
    --tblr-primary-rgb: 252, 209, 22;
    --tblr-primary-fg: #000;
    --tblr-primary-darken: var(--estes-yellow-dark);
    --tblr-tabler: var(--estes-yellow);
    --tblr-tabler-rgb: 252, 209, 22;
    --tblr-danger: var(--estes-red);
    --tblr-danger-rgb: 216, 30, 5;
    --tblr-red: var(--estes-red);
    --tblr-red-rgb: 216, 30, 5;
    --tblr-yellow: var(--estes-yellow);
    --tblr-yellow-rgb: 252, 209, 22;
    --tblr-warning: var(--estes-yellow);
    --tblr-warning-rgb: 252, 209, 22;
    --tblr-form-invalid-color: var(--estes-red);
    --tblr-form-invalid-border-color: var(--estes-red);
    --tblr-focus-ring-color: rgba(252, 209, 22, .5);
    --bg-switch-checked-color: #000;
}

/* Light mode neutrals: swap the theme's purple-tinted greys for plain ones */
:root:not([data-bs-theme=dark]), [data-bs-theme=light] {
    --tblr-gray: #555;
    --tblr-gray-dark: #1a1a1a;
    --tblr-gray-100: #f2f2f2;
    --tblr-gray-200: #e6e6e6;
    --tblr-gray-300: #d0d0d0;
    --tblr-gray-400: #b3b3b3;
    --tblr-gray-500: #777;
    --tblr-gray-600: #555;
    --tblr-gray-700: #333;
    --tblr-gray-800: #1a1a1a;
    --tblr-gray-900: #0d0d0d;
    --tblr-secondary: #555;
    --tblr-secondary-rgb: 85, 85, 85;
    --tblr-muted: #555;
    --tblr-muted-rgb: 85, 85, 85;
    --tblr-dark: #000;
    --tblr-dark-rgb: 0, 0, 0;
    --tblr-light: #f2f2f2;
    --tblr-light-rgb: 242, 242, 242;
    --tblr-body-color: #000;
    --tblr-body-color-rgb: 0, 0, 0;
    --tblr-body-bg: #f2f2f2;
    --tblr-body-bg-rgb: 242, 242, 242;
    --tblr-secondary-color: rgba(0, 0, 0, .7);
    --tblr-secondary-color-rgb: 0, 0, 0;
    --tblr-secondary-bg: #e6e6e6;
    --tblr-tertiary-color: rgba(0, 0, 0, .5);
    --tblr-tertiary-bg: #f2f2f2;
    --tblr-link-color: var(--estes-link);
    --tblr-link-color-rgb: 0, 84, 200;
    --tblr-link-hover-color: #003E96;
    --tblr-link-hover-color-rgb: 0, 62, 150;
    --tblr-border-color: #dcdcdc;
    --tblr-border-color-translucent: rgba(0, 0, 0, .14);
    --tblr-primary-text-emphasis: #000;
    --tblr-primary-bg-subtle: #FFF6CC;
    --tblr-primary-border-subtle: #FBE580;
    --tblr-danger-bg-subtle: #FBDDD8;
    --tblr-danger-border-subtle: #F2A99E;
}

/* Dark mode neutrals */
[data-bs-theme=dark] {
    --tblr-body-color: #d6d6d6;
    --tblr-body-color-rgb: 214, 214, 214;
    --tblr-body-bg: #121212;
    --tblr-body-bg-rgb: 18, 18, 18;
    --tblr-bg-surface: #1c1c1c;
    --tblr-bg-main-color: #121212;
    --tblr-secondary-bg: #262626;
    --tblr-tertiary-bg: #1c1c1c;
    --tblr-border-color: #303030;
    --tblr-dark-mode-border-color: #303030;
    --tblr-light-border-subtle: #303030;
    --tblr-primary-border-subtle: #444;
    --tblr-primary-bg-subtle: #332B05;
    --tblr-primary-text-emphasis: var(--estes-yellow);
    --tblr-link-color: var(--estes-yellow);
    --tblr-link-color-rgb: 252, 209, 22;
    --tblr-link-hover-color: #FFE56B;
    --tblr-link-hover-color-rgb: 255, 229, 107;
    --tblr-code-color: var(--estes-yellow);
}

body {
    font-family: var(--tblr-font-sans-serif);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title {
    font-weight: 700;
    color: var(--tblr-emphasis-color);
}

/* ---------- Top navigation: black bar, like estes-express.com ---------- */
header.top[data-bs-theme=dark],
aside.navbar[data-bs-theme=dark],
aside.navbar-vertical[data-bs-theme=dark] {
    --tblr-bg-surface: #000;
    --tblr-navbar-bg: #000;
    --tblr-navbar-color: #fff;
    --tblr-navbar-hover-color: var(--estes-yellow);
    --tblr-navbar-active-color: var(--estes-yellow);
    --tblr-navbar-active-border-color: var(--estes-yellow);
    --tblr-body-color: #fff;
    --tblr-border-color: #2a2a2a;
    --tblr-light-border-subtle: #2a2a2a;
    background-color: #000;
}

header.top .navbar .nav-link,
aside.navbar[data-bs-theme=dark] .nav-link {
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
}

@media (min-width: 992px) {
    header.top .navbar .navbar-nav > .nav-item > .nav-link {
        padding-left: .625rem;
        padding-right: .625rem;
    }
}

header.top .navbar .nav-link:hover,
header.top .navbar .nav-link:focus,
aside.navbar[data-bs-theme=dark] .nav-link:hover {
    color: var(--estes-yellow);
}

/* The current page is a yellow pill */
header.top .navbar .nav-item.active > .nav-link,
header.top .navbar .nav-link.active,
header.top .navbar .nav-link.show,
aside.navbar[data-bs-theme=dark] .nav-link.active {
    color: #000;
    background: var(--estes-yellow);
    border-radius: 999px;
}

@media (min-width: 992px) {
    header.top .navbar .navbar-nav > .nav-item > .nav-link {
        margin: .5rem .125rem;
        min-height: 0;
        padding-top: .45rem;
        padding-bottom: .45rem;
        border-radius: 999px;
        border-bottom: 0;
    }
}

header.top .navbar .nav-link .nav-icon,
header.top .navbar .nav-link i {
    color: inherit;
    opacity: 1;
}

header.top .dropdown-menu,
aside.navbar[data-bs-theme=dark] .dropdown-menu {
    --tblr-dropdown-bg: #000;
    --tblr-dropdown-color: #fff;
    --tblr-dropdown-link-color: #fff;
    --tblr-dropdown-link-hover-color: #000;
    --tblr-dropdown-link-hover-bg: var(--estes-yellow);
    --tblr-dropdown-link-active-color: #000;
    --tblr-dropdown-link-active-bg: var(--estes-yellow);
    --tblr-dropdown-border-color: #2a2a2a;
    font-weight: 500;
}

header.top .dropdown-menu .dropdown-item:hover i,
header.top .dropdown-menu .dropdown-item.active i {
    color: inherit;
}

/* Wordmark */
.nav-brand .nav-link {
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    color: #fff !important;
    white-space: nowrap;
}

/* The brand is a plain link back home: never hover- or active-styled */
header.top .navbar .nav-brand .nav-link,
header.top .navbar .nav-brand .nav-link:hover,
header.top .navbar .nav-brand .nav-link:focus,
header.top .navbar .nav-brand .nav-link.active {
    color: #fff !important;
    background: transparent !important;
    border-radius: 0;
    text-decoration: none;
}

.estes-logo {
    height: 1.5rem;
    width: auto;
    vertical-align: middle;
}

/* The wordmark is yellow, so it sits on a black plate wherever the surface is light (auth pages) */
:root:not([data-bs-theme=dark]) .page-center .estes-logo {
    box-sizing: content-box;
    padding: .625rem .875rem;
    background: #000;
}

/* ---------- Page header: title followed by the red rule ---------- */
[bp-section=page-header] {
    align-items: center !important;
    margin-bottom: 1.25rem !important;
}

[bp-section=page-header]::after {
    content: '';
    flex: 1 1 3rem;
    height: 4px;
    margin-left: .875rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--estes-red), #FF6B3D);
}

[bp-section=page-heading] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

[bp-section=page-subheading] {
    color: var(--tblr-secondary-color);
}

.breadcrumb {
    font-size: .8125rem;
}

/* ---------- Cards: rounded white panels, hairline border, soft shadow ---------- */
.card {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: var(--estes-shadow);
}

[data-bs-theme=dark] .card {
    border: 1px solid var(--tblr-border-color);
    box-shadow: none;
}

.card-header {
    border-bottom-color: rgba(0, 0, 0, .06);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 999px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-weight: 700;
    box-shadow: none;
    transition: background-color .15s, box-shadow .15s, transform .15s;
}

.btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
    transform: translateY(-1px);
}

.btn-sm, .btn-link {
    padding-left: .75rem;
    padding-right: .75rem;
}

.btn-primary,
.btn-warning {
    --tblr-btn-color: #000;
    --tblr-btn-bg: var(--estes-yellow);
    --tblr-btn-border-color: var(--estes-yellow);
    --tblr-btn-hover-color: #000;
    --tblr-btn-hover-bg: var(--estes-yellow-dark);
    --tblr-btn-hover-border-color: var(--estes-yellow-dark);
    --tblr-btn-active-color: #000;
    --tblr-btn-active-bg: var(--estes-yellow-dark);
    --tblr-btn-active-border-color: var(--estes-yellow-dark);
    --tblr-btn-disabled-color: #000;
    --tblr-btn-disabled-bg: var(--estes-yellow);
    --tblr-btn-disabled-border-color: var(--estes-yellow);
    font-style: italic;
    text-transform: uppercase;
}

.btn-primary .la, .btn-primary .las, .btn-primary .lar,
.btn-warning .la, .btn-warning .las, .btn-warning .lar {
    font-style: normal;
}

.btn-outline-primary {
    --tblr-btn-color: #000;
    --tblr-btn-border-color: #000;
    --tblr-btn-hover-color: #000;
    --tblr-btn-hover-bg: var(--estes-yellow);
    --tblr-btn-hover-border-color: var(--estes-yellow);
    --tblr-btn-active-color: #000;
    --tblr-btn-active-bg: var(--estes-yellow);
    --tblr-btn-active-border-color: var(--estes-yellow);
}

[data-bs-theme=dark] .btn-outline-primary {
    --tblr-btn-color: var(--estes-yellow);
    --tblr-btn-border-color: var(--estes-yellow);
}

.btn-danger {
    --tblr-btn-bg: var(--estes-red);
    --tblr-btn-border-color: var(--estes-red);
    --tblr-btn-hover-bg: #B01804;
    --tblr-btn-hover-border-color: #B01804;
    --tblr-btn-active-bg: #B01804;
    --tblr-btn-active-border-color: #B01804;
}

.btn-link {
    font-weight: 500;
}

/* ---------- Yellow is a fill, never text on a light surface ---------- */
.bg-primary, .badge.bg-primary, .bg-warning, .badge.bg-warning, .bg-yellow, .badge.bg-yellow,
.text-bg-primary, .text-bg-warning {
    color: #000 !important;
}

:root:not([data-bs-theme=dark]) .text-primary,
:root:not([data-bs-theme=dark]) .text-warning,
:root:not([data-bs-theme=dark]) .text-yellow {
    color: #000 !important;
}

.text-danger, .text-red {
    color: var(--estes-red) !important;
}

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text,
.select2-container--bootstrap .select2-selection {
    border-radius: 10px !important;
}

.input-group > .form-control:not(:last-child), .input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:not(:first-child), .input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.form-control:focus, .form-select:focus {
    border-color: #000;
    box-shadow: 0 0 0 .2rem rgba(252, 209, 22, .5);
}

.form-label, label {
    font-weight: 500;
}

.form-check-input:checked,
[data-bs-theme=dark] input[type=checkbox]:checked.form-check-input {
    background-color: var(--estes-yellow);
    border-color: var(--estes-yellow-dark);
}

.form-check-input:checked[type=checkbox] {
    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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M4 8.5l3 3 5-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23000' cx='8' cy='8'/%3e%3c/svg%3e");
}

/* ---------- Tables (List operation) ---------- */
.table thead th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
    background: #fff;
    border-bottom: 3px solid var(--estes-yellow) !important;
}

[data-bs-theme=dark] .table thead th {
    color: #fff;
    background: var(--tblr-bg-surface);
}

#crudTable_wrapper .table,
.table.rounded {
    border-radius: var(--tblr-border-radius-lg) !important;
}

.table tbody tr:hover > * {
    background-color: #FFFBE5;
}

[data-bs-theme=dark] .table tbody tr:hover > * {
    background-color: #26220a;
}

.pagination {
    --tblr-pagination-border-radius: 999px;
    --tblr-pagination-active-color: #000;
    --tblr-pagination-active-bg: var(--estes-yellow);
    --tblr-pagination-hover-color: #000;
}

.page-link {
    margin: 0 .125rem;
    border-radius: 999px !important;
    font-weight: 500;
}

.page-item.active .page-link,
[data-bs-theme=dark] ul.pagination li.paginate_button.page-item.active a.page-link {
    color: #000 !important;
    background-color: var(--estes-yellow);
}

/* ---------- Tabs, alerts, misc ---------- */
.nav-tabs {
    gap: .375rem;
    border-bottom: 0;
    margin-bottom: .75rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    font-weight: 500;
    color: var(--tblr-secondary-color);
    background: rgba(0, 0, 0, .05);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: #000;
    background: var(--estes-yellow);
}

[data-bs-theme=dark] .nav-tabs .nav-link {
    background: rgba(255, 255, 255, .08);
}

.alert, .modal-content, .toast {
    border-radius: var(--tblr-border-radius-lg);
}

.dropdown-menu {
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.badge {
    border-radius: 999px;
    padding: .35em .75em;
    font-weight: 700;
}

.progress {
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--estes-yellow);
    color: #000;
}

.card-footer a:hover .text-primary {
    text-decoration-color: #000;
}

footer.footer {
    font-size: .8125rem;
}

/* ---------- Light-mode fixes: yellow cannot be link text on white ---------- */
:root:not([data-bs-theme=dark]) .page-body .btn-link,
:root:not([data-bs-theme=dark]) .page-body .btn-link.text-primary,
:root:not([data-bs-theme=dark]) .page-body a.text-primary {
    --tblr-btn-color: var(--estes-link);
    --tblr-btn-hover-color: #003E96;
    color: var(--estes-link) !important;
}

:root:not([data-bs-theme=dark]) .page-body .btn-link:hover {
    color: #003E96 !important;
}

/* Save / success actions use the brand yellow, matching the primary button */
.btn-success {
    --tblr-btn-color: #000;
    --tblr-btn-bg: var(--estes-yellow);
    --tblr-btn-border-color: var(--estes-yellow);
    --tblr-btn-hover-color: #000;
    --tblr-btn-hover-bg: var(--estes-yellow-dark);
    --tblr-btn-hover-border-color: var(--estes-yellow-dark);
    --tblr-btn-active-color: #000;
    --tblr-btn-active-bg: var(--estes-yellow-dark);
    --tblr-btn-active-border-color: var(--estes-yellow-dark);
    font-style: italic;
    text-transform: uppercase;
}

/* Backpack adds .text-white to some buttons; on a yellow fill the text must stay black */
.btn-success.text-white,
.btn-primary.text-white,
.btn-warning.text-white,
.btn-success.text-white:hover,
.btn-primary.text-white:hover,
.btn-warning.text-white:hover,
.btn-success.text-light,
.btn-primary.text-light,
.btn-warning.text-light {
    color: #000 !important;
}

/* ---------- Dashboard stat tiles: big rounded color blocks with a white icon disc ---------- */
.stat-tile {
    --tile-from: #1a1a1a;
    --tile-to: #3a3a3a;
    --tile-fg: #fff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.125rem 1.5rem;
    border-radius: 999px;
    color: var(--tile-fg);
    background: linear-gradient(135deg, var(--tile-from), var(--tile-to));
    box-shadow: 0 8px 20px -8px var(--tile-from);
    transition: transform .15s, box-shadow .15s;
}

.stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px var(--tile-from);
}

.stat-tile--red    { --tile-from: #D81E05; --tile-to: #FF5A36; }
.stat-tile--orange { --tile-from: #FCD116; --tile-to: #FFAE00; --tile-fg: #000; }
.stat-tile--blue   { --tile-from: #111;    --tile-to: #3d3d3d; }
.stat-tile--green  { --tile-from: #0E9F6E; --tile-to: #34D399; }

.stat-tile__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.75rem;
    color: var(--tile-from);
    background: #fff;
}

.stat-tile--orange .stat-tile__icon { color: #000; }

.stat-tile__body {
    min-width: 0;
    flex: 1;
    text-align: right;
}

.stat-tile__label {
    font-size: .875rem;
    font-weight: 500;
    opacity: .92;
}

.stat-tile__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-tile__hint {
    font-size: .75rem;
    opacity: .85;
}

/* Soft pastel wells behind charts, in the same spirit as the tiles */
.apexcharts-canvas {
    border-radius: var(--tblr-border-radius);
}

/* Active nav item is a pill, so drop Tabler's underline */
header.top .navbar .nav-item.active::after,
header.top .navbar .nav-link.active::after,
header.top .navbar .nav-item.active > .nav-link::after {
    display: none !important;
}

/* Tab content panels (create/edit forms) */
.tab-container .tab-content,
.tab-content.bg-white,
.nav-tabs-custom + .tab-content {
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: var(--estes-shadow);
}

/* ---------- List filters: black, not yellow ---------- */
.navbar-filters {
    --tblr-primary: #000;
    --tblr-primary-rgb: 0, 0, 0;
    --tblr-link-color: #000;
    --tblr-link-hover-color: #000;
    --tblr-focus-ring-color: rgba(0, 0, 0, .2);
    border-radius: var(--tblr-border-radius-lg) !important;
}

[data-bs-theme=dark] .navbar-filters {
    --tblr-primary: #fff;
    --tblr-primary-rgb: 255, 255, 255;
    --tblr-link-color: #fff;
    --tblr-link-hover-color: #fff;
}

.navbar-filters .la-filter,
.navbar-filters .nav-item > a:not(.nav-link) {
    color: #000;
}

[data-bs-theme=dark] .navbar-filters .la-filter,
[data-bs-theme=dark] .navbar-filters .nav-item > a:not(.nav-link) {
    color: #fff;
}

.navbar-filters .nav-link:hover,
.navbar-filters .nav-item.active > .nav-link,
.navbar-filters .nav-item.show > .nav-link {
    color: #000 !important;
}

[data-bs-theme=dark] .navbar-filters .nav-link:hover,
[data-bs-theme=dark] .navbar-filters .nav-item.active > .nav-link,
[data-bs-theme=dark] .navbar-filters .nav-item.show > .nav-link {
    color: #fff !important;
}

.navbar-filters .dropdown-item {
    --tblr-dropdown-link-hover-bg: #000;
    --tblr-dropdown-link-hover-color: #fff;
    --tblr-dropdown-link-active-bg: #000;
    --tblr-dropdown-link-active-color: #fff;
}

.navbar-filters .dropdown-item:hover,
.navbar-filters .dropdown-item.active,
.navbar-filters .dropdown-item:active {
    color: #fff;
    background-color: #000;
}

[data-bs-theme=dark] .navbar-filters .dropdown-item:hover,
[data-bs-theme=dark] .navbar-filters .dropdown-item.active,
[data-bs-theme=dark] .navbar-filters .dropdown-item:active {
    color: #000;
    background-color: #fff;
}

.navbar-filters .select2-results__option--highlighted,
.navbar-filters .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    color: #fff !important;
    background-color: #000 !important;
}

[data-bs-theme=dark] .navbar-filters .select2-results__option--highlighted {
    color: #000 !important;
    background-color: #fff !important;
}

/* Filter dropdowns in dark mode: neutral greys, white highlight (the theme tints them purple) */
[data-bs-theme=dark] .navbar-filters .select2-container .select2-dropdown,
[data-bs-theme=dark] .navbar-filters .select2-container .select2-results,
[data-bs-theme=dark] .navbar-filters .select2-container .select2-search,
[data-bs-theme=dark] .navbar-filters .select2-container .select2-search input.select2-search__field {
    background-color: #1c1c1c !important;
    border-color: #303030 !important;
    color: #e6e6e6 !important;
}

[data-bs-theme=dark] .navbar-filters .select2-results ul.select2-results__options li.select2-results__option {
    color: #e6e6e6 !important;
    background-color: #1c1c1c !important;
}

[data-bs-theme=dark] .navbar-filters .select2-results ul.select2-results__options li.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: #fff !important;
    background-color: #333 !important;
}

[data-bs-theme=dark] .navbar-filters .select2-results ul.select2-results__options li.select2-results__option--highlighted {
    color: #000 !important;
    background-color: #fff !important;
}

/* Switches: yellow track with a black knob when on, so the knob never disappears */
.form-switch .form-check-input:checked {
    background-color: var(--estes-yellow) !important;
    border-color: var(--estes-yellow-dark) !important;
    --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
    background-image: var(--tblr-form-switch-bg) !important;
}
.form-switch .form-check-input:not(:checked) {
    background-color: #e5e7eb;
}