/* ============================================================
   BW-THEME.CSS
   Unified Black & White Liquid Glass Color System
   ------------------------------------------------------------
   Pure grayscale, no color hue. Saturation reduced to 0.
   Liquid glass via backdrop-filter blur.
   Override strategy: !important on all color overrides.
   Preserves layout, spacing, fonts, and functionality.
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS VARIABLES (Design Tokens)
   ------------------------------------------------------------ */
:root {
    /* Background layers */
    --bw-bg: #000000;
    --bw-surface: #0a0a0a;
    --bw-surface-2: #1a1a1a;
    --bw-surface-3: #2a2a2a;
    --bw-surface-4: #3a3a3a;
    --bw-surface-5: #4a4a4a;
    --bw-surface-6: #5a5a5a;
    --bw-surface-7: #6a6a6a;
    --bw-surface-8: #7a7a7a;
    --bw-surface-9: #8a8a8a;
    --bw-surface-10: #9a9a9a;

    /* Borders */
    --bw-border: rgba(255, 255, 255, 0.08);
    --bw-border-light: rgba(255, 255, 255, 0.04);
    --bw-border-strong: rgba(255, 255, 255, 0.15);

    /* Text */
    --bw-text: #ffffff;
    --bw-text-soft: #e0e0e0;
    --bw-text-muted: #a0a0a0;
    --bw-text-dim: #606060;

    /* Glow */
    --bw-glow: rgba(255, 255, 255, 0.05);
    --bw-glow-strong: rgba(255, 255, 255, 0.1);
    --bw-glow-focus: rgba(255, 255, 255, 0.15);

    /* Glass */
    --bw-glass-bg: rgba(20, 20, 20, 0.55);
    --bw-glass-bg-hover: rgba(255, 255, 255, 0.05);
    --bw-glass-border: rgba(255, 255, 255, 0.08);
    --bw-glass-blur: 20px;

    /* Transitions */
    --bw-transition: 0.2s ease;
}

/* ------------------------------------------------------------
   2. GLOBAL RESET / BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    color: var(--bw-text) !important;
    border-color: var(--bw-border) !important;
    transition: background-color var(--bw-transition),
                border-color var(--bw-transition),
                color var(--bw-transition),
                box-shadow var(--bw-transition),
                opacity var(--bw-transition) !important;
}

html {
    background: var(--bw-bg) !important;
}

body {
    background: var(--bw-bg) !important;
    background-color: var(--bw-bg) !important;
    color: var(--bw-text) !important;
    filter: saturate(0) !important;
}

/* Force all text to grayscale spectrum */
h1, h2, h3, h4, h5, h6,
p, span, a, label, small, strong, em, b, i,
li, td, th, caption, blockquote, code, pre {
    color: var(--bw-text) !important;
}

/* ------------------------------------------------------------
   3. SATURATION KILL - drain all color hue
   ------------------------------------------------------------ */
/* Target any element that might carry brand color */
img {
    filter: grayscale(1) !important;
}

svg,
svg * {
    color: var(--bw-text) !important;
    fill: currentColor !important;
}

/* ------------------------------------------------------------
   4. LIQUID GLASS PANELS
   ------------------------------------------------------------ */
.glass,
.glass-panel,
.glass-card,
.card,
.panel,
.surface,
.well,
.box,
.tile,
.container-fluid > .row > div,
.modal-content,
.dropdown-menu,
.popover,
.tooltip-inner {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    border: 1px solid var(--bw-glass-border) !important;
    border-color: var(--bw-glass-border) !important;
    color: var(--bw-text) !important;
    box-shadow: 0 0 20px var(--bw-glow) !important;
}

/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */
.btn,
button,
.button,
a.btn,
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"] {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    backdrop-filter: blur(10px) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.0) !important;
    box-shadow: none !important;
    transition: all var(--bw-transition) !important;
}

.btn:hover,
.btn:focus,
button:hover,
button:focus,
.button:hover,
.button:focus,
a.btn:hover,
a.btn:focus,
a.button:hover,
a.button:focus,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    color: var(--bw-text) !important;
    border-color: var(--bw-border-strong) !important;
    box-shadow: 0 0 15px var(--bw-glow-strong) !important;
}

.btn:active,
button:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    box-shadow: 0 0 10px var(--bw-glow) !important;
}

/* Convert any colored button variants to grayscale */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-light,
.btn-dark,
.button-primary,
.button-success,
.button-danger,
.button-warning,
.button-info {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border-strong) !important;
    border-color: var(--bw-border-strong) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-light:hover,
.btn-dark:hover,
.button-primary:hover,
.button-success:hover,
.button-danger:hover,
.button-warning:hover,
.button-info:hover {
    background: var(--bw-text) !important;
    background-color: var(--bw-text) !important;
    color: var(--bw-bg) !important;
    box-shadow: 0 0 20px var(--bw-glow-strong) !important;
}

/* Disabled buttons */
.btn:disabled,
.btn.disabled,
button:disabled,
button.disabled,
.button:disabled,
.button.disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    background: var(--bw-surface) !important;
    background-color: var(--bw-surface) !important;
    color: var(--bw-text-dim) !important;
    border-color: var(--bw-border-light) !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ------------------------------------------------------------
   6. INPUTS / FORM CONTROLS
   ------------------------------------------------------------ */
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="range"],
input[type="file"],
select,
textarea,
.form-control,
.form-select,
.form-check-input,
.input,
.input-field {
    background: rgba(0, 0, 0, 0.4) !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    backdrop-filter: blur(8px) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.0) !important;
    box-shadow: none !important;
    transition: all var(--bw-transition) !important;
}

input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--bw-text-dim) !important;
    opacity: 1 !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover,
.input:hover,
.input-field:hover {
    border-color: var(--bw-border-strong) !important;
    background: rgba(20, 20, 20, 0.5) !important;
    background-color: rgba(20, 20, 20, 0.5) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.input:focus,
.input-field:focus {
    background: rgba(10, 10, 10, 0.7) !important;
    background-color: rgba(10, 10, 10, 0.7) !important;
    color: var(--bw-text) !important;
    border-color: var(--bw-border-strong) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--bw-glow-focus) !important;
}

/* Select dropdown arrow area */
select option,
select optgroup {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
}

/* Range slider track/thumb */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--bw-surface-2) !important;
    height: 4px !important;
    border-radius: 2px !important;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--bw-text) !important;
    box-shadow: 0 0 10px var(--bw-glow-strong) !important;
    cursor: pointer !important;
}
input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--bw-text) !important;
    border: none !important;
    box-shadow: 0 0 10px var(--bw-glow-strong) !important;
    cursor: pointer !important;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"],
.form-check-input {
    accent-color: #ffffff !important;
    filter: grayscale(1) !important;
}

/* Labels */
label,
.form-label,
.form-text {
    color: var(--bw-text-soft) !important;
}

/* ------------------------------------------------------------
   7. LINKS
   ------------------------------------------------------------ */
a {
    color: var(--bw-text) !important;
    text-decoration: none !important;
    transition: all var(--bw-transition) !important;
}
a:hover,
a:focus {
    color: var(--bw-text) !important;
    text-shadow: 0 0 8px var(--bw-glow-strong) !important;
}
a:active {
    color: var(--bw-text-muted) !important;
}

/* ------------------------------------------------------------
   8. TABLES
   ------------------------------------------------------------ */
table,
.table {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--bw-text) !important;
    border-collapse: collapse !important;
}

table thead,
table th,
.table thead,
.table th,
.table-dark thead,
.table-dark th {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
    border-color: var(--bw-border) !important;
    border-bottom: 1px solid var(--bw-border-strong) !important;
}

table tbody tr,
.table tbody tr,
.table-dark tbody tr {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--bw-text) !important;
    border-color: var(--bw-border-light) !important;
    transition: background-color var(--bw-transition) !important;
}

/* Alternating rows */
table tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(10, 10, 10, 0.5) !important;
    background-color: rgba(10, 10, 10, 0.5) !important;
}
table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd),
.table-striped tbody tr:nth-of-type(even) {
    background: rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

table tbody tr:hover,
.table tbody tr:hover,
.table-hover tbody tr:hover {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
}

table td,
.table td,
.table-dark td {
    color: var(--bw-text) !important;
    border-color: var(--bw-border-light) !important;
    border-top: 1px solid var(--bw-border-light) !important;
}

/* ------------------------------------------------------------
   9. NAVIGATION
   ------------------------------------------------------------ */
nav,
.navbar,
.nav,
.navbar-nav,
.header,
.topbar,
.sidebar,
.menu,
.toolbar,
.breadcrumb {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    color: var(--bw-text) !important;
}

nav a,
.navbar a,
.nav-link,
.nav-item a,
.menu-item a,
.sidebar a,
.breadcrumb-item a {
    color: var(--bw-text-soft) !important;
    transition: all var(--bw-transition) !important;
}

nav a:hover,
.navbar a:hover,
.nav-link:hover,
.nav-link.active,
.nav-link:focus,
.nav-item a:hover,
.nav-item.active a,
.menu-item a:hover,
.menu-item.active a,
.sidebar a:hover,
.sidebar a.active,
.breadcrumb-item a:hover {
    color: var(--bw-text) !important;
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    text-shadow: 0 0 8px var(--bw-glow-strong) !important;
}

.navbar-brand,
.brand,
.logo-text {
    color: var(--bw-text) !important;
    text-shadow: 0 0 12px var(--bw-glow) !important;
}

/* ------------------------------------------------------------
   10. CARDS
   ------------------------------------------------------------ */
.card,
.card-body,
.card-header,
.card-footer,
.list-group,
.list-group-item {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    color: var(--bw-text) !important;
}

.card-header,
.card-footer,
.list-group-item {
    border-color: var(--bw-border-light) !important;
}

.card-header,
.list-group-item:first-child {
    border-bottom: 1px solid var(--bw-border) !important;
}

.card:hover,
.list-group-item:hover {
    border-color: var(--bw-border-strong) !important;
    box-shadow: 0 0 20px var(--bw-glow) !important;
}

.card-title {
    color: var(--bw-text) !important;
}
.card-text,
.card-subtitle {
    color: var(--bw-text-muted) !important;
}

/* ------------------------------------------------------------
   11. BADGES / TAGS / PILLS
   ------------------------------------------------------------ */
.badge,
.tag,
.pill,
.chip,
.label-pill {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    filter: grayscale(1) !important;
}

.badge-primary,
.badge-success,
.badge-danger,
.badge-warning,
.badge-info,
.badge-secondary,
.badge-light,
.badge-dark,
.tag-primary,
.tag-success,
.tag-danger,
.tag-warning,
.tag-info {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border-strong) !important;
    border-color: var(--bw-border-strong) !important;
}

/* ------------------------------------------------------------
   12. ALERTS / NOTIFICATIONS
   ------------------------------------------------------------ */
.alert,
.alert-primary,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info,
.alert-secondary,
.alert-light,
.alert-dark,
.notification,
.toast,
.toast-body {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    backdrop-filter: blur(12px) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.0) !important;
    filter: grayscale(1) !important;
}

.alert-primary,
.alert-info {
    border-left: 3px solid var(--bw-text) !important;
}
.alert-success {
    border-left: 3px solid var(--bw-surface-9) !important;
}
.alert-warning {
    border-left: 3px solid var(--bw-surface-7) !important;
}
.alert-danger {
    border-left: 3px solid var(--bw-surface-5) !important;
}

/* ------------------------------------------------------------
   13. STATUS INDICATORS (brightness levels, not colors)
   ------------------------------------------------------------ */
.status,
.status-indicator,
.status-dot,
.dot,
.indicator {
    filter: grayscale(1) !important;
}

/* Good / online / active = bright white */
.status-success,
.status-online,
.status-active,
.status-ok,
.status-available,
.dot-success,
.dot-online,
.dot-active {
    background: var(--bw-text) !important;
    background-color: var(--bw-text) !important;
    box-shadow: 0 0 10px var(--bw-glow-strong) !important;
}

/* Warning / pending = dim */
.status-warning,
.status-pending,
.status-waiting,
.status-paused,
.dot-warning,
.dot-pending {
    background: var(--bw-surface-7) !important;
    background-color: var(--bw-surface-7) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.03) !important;
}

/* Error / offline / disabled = dark */
.status-error,
.status-offline,
.status-failed,
.status-disabled,
.status-stopped,
.dot-error,
.dot-offline,
.dot-failed {
    background: var(--bw-surface-4) !important;
    background-color: var(--bw-surface-4) !important;
    box-shadow: none !important;
}

/* Progress bars */
.progress,
.progress-bar {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    border: 1px solid var(--bw-border-light) !important;
    filter: grayscale(1) !important;
}
.progress-bar {
    background: var(--bw-text) !important;
    background-color: var(--bw-text) !important;
    box-shadow: 0 0 8px var(--bw-glow-strong) !important;
}

/* Spinners */
.spinner-border,
.spinner-grow,
.loader,
.loading {
    color: var(--bw-text) !important;
    border-color: var(--bw-border) !important;
    border-top-color: var(--bw-text) !important;
    filter: grayscale(1) !important;
}

/* ------------------------------------------------------------
   14. MODALS / OVERLAYS
   ------------------------------------------------------------ */
.modal,
.modal-backdrop,
.overlay,
.backdrop,
.mask {
    background: rgba(0, 0, 0, 0.75) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.0) !important;
}

.modal-dialog,
.modal-content,
.overlay-content {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    border: 1px solid var(--bw-border-strong) !important;
    border-color: var(--bw-border-strong) !important;
    color: var(--bw-text) !important;
    box-shadow: 0 0 40px var(--bw-glow) !important;
}

.modal-header,
.modal-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--bw-border-light) !important;
    color: var(--bw-text) !important;
}

.modal-title {
    color: var(--bw-text) !important;
}

/* ------------------------------------------------------------
   15. DROPDOWNS / POPVERS / TOOLTIPS
   ------------------------------------------------------------ */
.dropdown-menu,
.popover,
.tooltip-inner {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    -webkit-backdrop-filter: blur(var(--bw-glass-blur)) saturate(1.0) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    color: var(--bw-text) !important;
    box-shadow: 0 0 20px var(--bw-glow) !important;
}

.dropdown-item {
    color: var(--bw-text-soft) !important;
    transition: all var(--bw-transition) !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    color: var(--bw-text) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    color: var(--bw-text) !important;
}

.dropdown-divider,
.dropdown-header {
    border-color: var(--bw-border-light) !important;
    color: var(--bw-text-muted) !important;
}

.tooltip .arrow::before,
.popover .arrow::after {
    border-color: var(--bw-border) !important;
}

/* ------------------------------------------------------------
   16. TABS / ACCORDIONS
   ------------------------------------------------------------ */
.nav-tabs,
.nav-pills {
    border-color: var(--bw-border-light) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--bw-text-muted) !important;
    border-color: transparent !important;
    transition: all var(--bw-transition) !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--bw-text) !important;
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    border-color: var(--bw-border) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--bw-text) !important;
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    border-color: var(--bw-border-strong) !important;
    border-bottom-color: var(--bw-bg) !important;
    box-shadow: 0 0 12px var(--bw-glow) !important;
}

.tab-content,
.tab-pane {
    color: var(--bw-text) !important;
}

.accordion-item,
.accordion-button,
.accordion-body {
    background: var(--bw-glass-bg) !important;
    background-color: var(--bw-glass-bg) !important;
    color: var(--bw-text) !important;
    border-color: var(--bw-border-light) !important;
}

.accordion-button:not(.collapsed) {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    color: var(--bw-text) !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 2px var(--bw-glow-focus) !important;
}

/* ------------------------------------------------------------
   17. CODE / PRE / KBD
   ------------------------------------------------------------ */
code,
pre,
kbd,
samp,
.code-block,
pre code {
    background: var(--bw-surface) !important;
    background-color: var(--bw-surface) !important;
    color: var(--bw-text-soft) !important;
    border: 1px solid var(--bw-border-light) !important;
    border-color: var(--bw-border-light) !important;
    filter: grayscale(1) !important;
}

kbd {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    color: var(--bw-text) !important;
    box-shadow: 0 2px 0 var(--bw-surface-5) !important;
}

/* ------------------------------------------------------------
   18. SCROLLBARS
   ------------------------------------------------------------ */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--bw-surface-6) var(--bw-surface) !important;
}

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

::-webkit-scrollbar-track {
    background: var(--bw-surface) !important;
    background-color: var(--bw-surface) !important;
    border: 1px solid var(--bw-border-light) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--bw-surface-6) !important;
    background-color: var(--bw-surface-6) !important;
    border: 2px solid var(--bw-surface) !important;
    border-radius: 5px !important;
    transition: background-color var(--bw-transition) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bw-surface-8) !important;
    background-color: var(--bw-surface-8) !important;
}

::-webkit-scrollbar-corner {
    background: var(--bw-surface) !important;
    background-color: var(--bw-surface) !important;
}

/* ------------------------------------------------------------
   19. SELECTION / HIGHLIGHT
   ------------------------------------------------------------ */
::selection {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--bw-text) !important;
}
::-moz-selection {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--bw-text) !important;
}

::marker {
    color: var(--bw-text-muted) !important;
}

/* ------------------------------------------------------------
   20. DIVIDERS / LINES / RULES
   ------------------------------------------------------------ */
hr,
.divider,
hr:not([size]) {
    background: var(--bw-border) !important;
    background-color: var(--bw-border) !important;
    border: none !important;
    border-top: 1px solid var(--bw-border) !important;
    color: var(--bw-border) !important;
    height: 1px !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   21. IMAGES / AVATARS / THUMBNAILS
   ------------------------------------------------------------ */
.avatar,
.thumbnail,
.img-thumbnail,
figure img {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    border: 1px solid var(--bw-border) !important;
    border-color: var(--bw-border) !important;
    filter: grayscale(1) !important;
}

.avatar-placeholder,
.avatar-text,
.initials {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    color: var(--bw-text) !important;
}

/* ------------------------------------------------------------
   22. ICONS
   ------------------------------------------------------------ */
.icon,
.material-icons,
.fa,
.fas,
.far,
.fab,
.fad,
.fal,
.bi,
.bi::before,
svg.icon {
    color: var(--bw-text-soft) !important;
    filter: grayscale(1) !important;
    transition: all var(--bw-transition) !important;
}

.icon:hover,
a:hover .icon,
button:hover .icon,
a:hover .material-icons,
button:hover .material-icons,
a:hover .fa,
button:hover .fa {
    color: var(--bw-text) !important;
    filter: drop-shadow(0 0 6px var(--bw-glow-strong)) grayscale(1) !important;
}

/* ------------------------------------------------------------
   23. UTILITY BACKGROUNDS - convert ALL bg-* utilities to grayscale
   ------------------------------------------------------------ */
.bg-primary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info,
.bg-secondary,
.bg-light,
.bg-dark,
.bg-white,
.bg-black,
.bg-transparent,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary {
    filter: grayscale(1) !important;
}

.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-secondary {
    background: var(--bw-surface-3) !important;
    background-color: var(--bw-surface-3) !important;
    color: var(--bw-text) !important;
}

.bg-light,
.bg-white {
    background: var(--bw-surface-7) !important;
    background-color: var(--bw-surface-7) !important;
    color: var(--bw-bg) !important;
}

.bg-dark,
.bg-black {
    background: var(--bw-bg) !important;
    background-color: var(--bw-bg) !important;
    color: var(--bw-text) !important;
}

.bg-transparent {
    background: transparent !important;
    background-color: transparent !important;
}

/* Text color utilities */
.text-primary,
.text-success,
.text-danger,
.text-warning,
.text-info,
.text-secondary {
    color: var(--bw-text-soft) !important;
}
.text-muted {
    color: var(--bw-text-muted) !important;
}
.text-light {
    color: var(--bw-text) !important;
}
.text-dark {
    color: var(--bw-text-muted) !important;
}
.text-white {
    color: var(--bw-text) !important;
}
.text-black {
    color: var(--bw-bg) !important;
}

/* Border utilities */
.border,
.border-top,
.border-end,
.border-bottom,
.border-start,
.border-primary,
.border-success,
.border-danger,
.border-warning,
.border-info,
.border-secondary,
.border-light,
.border-dark {
    border-color: var(--bw-border) !important;
}

/* ------------------------------------------------------------
   24. SWITCHES / TOGGLES
   ------------------------------------------------------------ */
.switch,
.toggle,
.form-switch,
.custom-switch,
.toggle-switch {
    filter: grayscale(1) !important;
}

.form-switch .form-check-input,
.switch input:checked + .slider,
.toggle input:checked + .slider {
    background-color: var(--bw-text) !important;
    border-color: var(--bw-text) !important;
}

.form-switch .form-check-input:focus,
.switch input:focus + .slider,
.toggle input:focus + .slider {
    box-shadow: 0 0 0 2px var(--bw-glow-focus) !important;
}

.switch .slider,
.toggle .slider,
.form-switch .form-check-input:not(:checked) {
    background-color: var(--bw-surface-4) !important;
    border-color: var(--bw-border) !important;
}

/* ------------------------------------------------------------
   25. FOCUS STATES (global)
   ------------------------------------------------------------ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[contenteditable]:focus,
[role="button"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--bw-glow-focus) !important;
}

/* ------------------------------------------------------------
   26. MISCELLANEOUS / SAFETY NET
   ------------------------------------------------------------ */
/* Catch-all: drain any remaining colored backgrounds to grayscale */
[style*="background"],
[style*="color"],
[style*="border"] {
    filter: grayscale(1) !important;
}

/* Page-level containers */
main,
section,
article,
aside,
header,
footer,
div,
ul,
ol,
fieldset,
legend,
details,
summary,
figure,
figcaption {
    color: var(--bw-text) !important;
}

legend {
    color: var(--bw-text) !important;
    border-bottom: 1px solid var(--bw-border) !important;
}

blockquote {
    border-left: 3px solid var(--bw-border-strong) !important;
    color: var(--bw-text-muted) !important;
}

mark,
.mark {
    background: var(--bw-surface-7) !important;
    background-color: var(--bw-surface-7) !important;
    color: var(--bw-bg) !important;
}

abbr[title] {
    border-bottom: 1px dotted var(--bw-border-strong) !important;
    color: var(--bw-text-muted) !important;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--bw-text-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bw-text-dim) !important;
}

/* Pagination */
.pagination,
.page-item,
.page-link {
    color: var(--bw-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--bw-border) !important;
}
.page-link {
    background: var(--bw-surface-2) !important;
    background-color: var(--bw-surface-2) !important;
    color: var(--bw-text) !important;
    border: 1px solid var(--bw-border) !important;
}
.page-link:hover,
.page-link:focus {
    background: var(--bw-glass-bg-hover) !important;
    background-color: var(--bw-glass-bg-hover) !important;
    color: var(--bw-text) !important;
    box-shadow: 0 0 12px var(--bw-glow) !important;
}
.page-item.active .page-link {
    background: var(--bw-text) !important;
    background-color: var(--bw-text) !important;
    color: var(--bw-bg) !important;
    border-color: var(--bw-text) !important;
    box-shadow: 0 0 15px var(--bw-glow-strong) !important;
}
.page-item.disabled .page-link {
    background: var(--bw-surface) !important;
    background-color: var(--bw-surface) !important;
    color: var(--bw-text-dim) !important;
    border-color: var(--bw-border-light) !important;
}

/* ------------------------------------------------------------
   END OF bw-theme.css
   ------------------------------------------------------------ */