/* ==========================================================================
   VENDEFACIL - MODERN DARK THEME SYSTEM (SLATE PREMIUM)
   ========================================================================== */

:root[data-theme="dark"],
html.dark-theme {
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-card-subtle: #182234;
    --bg-card-elevated: #243044;
    --bg-card-hover: #293548;
    
    --border-color: #334155;
    --border-subtle: #243044;
    --border-focus: #6777ef;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;
    
    --input-bg: #182234;
    --input-border: #334155;
    --input-focus-border: #6777ef;
    --input-focus-shadow: rgba(103, 119, 239, 0.25);
    
    --table-stripe: #182234;
    --table-hover: #273549;
}

/* Base Body & Layout */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--bg-main) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] #app,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .main-content {
    background-color: var(--bg-main) !important;
    color: var(--text-secondary) !important;
}

/* Headings and generic typography */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card .card-header h4 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.badge):not(.btn):not(.select2-selection__choice),
html[data-theme="dark"] div:not(.badge):not(.btn):not(.alert):not(.progress-bar) {
    color: inherit;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* Top Navbar */
html[data-theme="dark"] .navbar-bg {
    background-color: var(--bg-card) !important;
}

html[data-theme="dark"] .main-navbar {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .main-navbar .nav-link {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .main-navbar .nav-link:hover {
    color: #6777ef !important;
}

html[data-theme="dark"] .main-navbar .collapse-btn i,
html[data-theme="dark"] .main-navbar .fullscreen-btn i {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .dropdown-menu .dropdown-title {
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* Sidebar Menu */
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] #sidebar-wrapper {
    background-color: var(--bg-card) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .sidebar-brand a {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .custom-sidebar-brand {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .sidebar-menu li.menu-header {
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .sidebar-menu li a {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .sidebar-menu li a:hover {
    background-color: var(--bg-card-elevated) !important;
    color: #818cf8 !important;
}

html[data-theme="dark"] .sidebar-menu li.active a {
    background-color: var(--bg-card-elevated) !important;
    color: #818cf8 !important;
    font-weight: 600;
}

/* Sidebar Dropdown Menus in Dark Mode */
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu,
html[data-theme="dark"] .main-sidebar.sidebar-style-2 .sidebar-menu li ul.dropdown-menu,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu,
html[data-theme="dark"] .main-sidebar .sidebar-menu li.active ul.dropdown-menu {
    background-color: #131d2e !important;
    border: 1px solid #243044 !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li {
    background-color: transparent !important;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a,
html[data-theme="dark"] .main-sidebar.sidebar-style-2 .sidebar-menu li ul.dropdown-menu li a,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li a,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu li a,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu li a,
html[data-theme="dark"] .sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:before,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li a:before {
    color: #64748b !important;
}

/* Hover on dropdown item */
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li a:hover,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a:hover,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a:hover,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu li a:hover {
    background-color: #1e293b !important;
    color: #818cf8 !important;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover:before,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li a:hover:before {
    color: #818cf8 !important;
}

/* Active dropdown item */
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a,
html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active>a,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li.active a,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li.active a,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li.active a,
html[data-theme="dark"] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active ul.dropdown-menu li.active a {
    background-color: #1e293b !important;
    color: #818cf8 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active a:before,
html[data-theme="dark"] .sidebar-style-2 .sidebar-menu li ul.dropdown-menu li.active a:before {
    color: #818cf8 !important;
}

/* Floating submenu when sidebar is mini */
html[data-theme="dark"].sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu {
    background-color: #131d2e !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"].sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a {
    background-color: #131d2e !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"].sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a:hover,
html[data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a:hover {
    background-color: #1e293b !important;
    color: #818cf8 !important;
}

/* Cards & Statistics */
html[data-theme="dark"] .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .card .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .card .card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .card-statistic-1 .card-header h4,
html[data-theme="dark"] .card-statistic-2 .card-header h4 {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .card-statistic-1 .card-body,
html[data-theme="dark"] .card-statistic-2 .card-body {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .card.card-statistic-4 {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .card .card-stats {
    background-color: var(--bg-card-subtle) !important;
    border-top: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .card .card-stats .card-stats-title {
    background-color: var(--bg-card-subtle) !important;
    color: var(--text-muted) !important;
}

/* Forms, Inputs & Floating Labels */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select.form-control:focus,
html[data-theme="dark"] textarea.form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: #111a26 !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-card-elevated) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .form-group>label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] select option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Custom enhanced branch selector */
html[data-theme="dark"] .branch-select-button {
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .branch-select-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .branch-select-option {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .branch-select-option:hover {
    background: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   TABLES & DATATABLES IN DARK MODE
   (Explicitly overrides any .theme-white or custom color: #000000 rules)
   ========================================================================== */
html[data-theme="dark"] table,
html[data-theme="dark"] table.dataTable {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table thead th,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] .table:not(.table-sm) thead th {
    background-color: var(--bg-card-subtle) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-top: none !important;
}

html[data-theme="dark"] table tbody td,
html[data-theme="dark"] table.dataTable tbody td {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd td,
html[data-theme="dark"] table.dataTable.display tbody tr.odd td {
    background-color: var(--table-stripe) !important;
}

html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover td {
    background-color: var(--table-hover) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-card-elevated) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #6777ef !important;
    border-color: #6777ef !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Modals */
html[data-theme="dark"] .modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .modal-header .modal-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* UI Autocomplete (Buscador de productos, etc.) */
html[data-theme="dark"] .ui-autocomplete {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .ui-menu-item .ui-menu-item-wrapper {
    color: var(--text-secondary) !important;
    padding: 8px 14px !important;
}

html[data-theme="dark"] .ui-menu-item .ui-menu-item-wrapper:hover,
html[data-theme="dark"] .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* Punto de Venta (POS) Adaptations */
html[data-theme="dark"] .pos-page,
html[data-theme="dark"] .pos-topbar {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .pos-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .pos-total {
    color: #4ade80 !important;
}

html[data-theme="dark"] .pos-items,
html[data-theme="dark"] .pos-card-product {
    background-color: var(--bg-card-subtle) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* SweetAlert2 Adaptations */
html[data-theme="dark"] .swal2-popup {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .swal2-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .swal2-html-container {
    color: var(--text-secondary) !important;
}

/* Nav Tabs & Pills */
html[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color) var(--border-color) transparent !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) var(--border-color) transparent !important;
    color: #818cf8 !important;
}

/* Footer */
html[data-theme="dark"] .main-footer {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Dark Mode Toggle Button Animations */
#btn-toggle-theme {
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

#btn-toggle-theme:hover {
    transform: scale(1.1);
}

#theme-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

html[data-theme="dark"] #theme-icon {
    color: #fbbf24 !important; /* Gold sun in dark mode */
}

html:not([data-theme="dark"]) #theme-icon {
    color: #64748b !important; /* Slate moon in light mode */
}

/* Portal del Empleado Support */
html[data-theme="dark"] .portal-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .portal-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* User Profile Specific Overrides (views/usuarios/perfil.php) */
html[data-theme="dark"] #formularioPerfil label {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #formularioPerfil [style*="border-top: 1px solid"] {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #formularioPerfil div[style*="border: 2px dashed"] {
    background: var(--bg-card-subtle) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #formularioPerfil h6 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #formularioPerfil p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] #formularioPerfil .text-secondary {
    color: var(--text-secondary) !important;
}

/* Login Screen in Dark Mode */
html[data-theme="dark"] .login-image-section {
    background-color: #0b1120 !important;
}

html[data-theme="dark"] .login-form-section {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .login-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .login-card .header-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn-biometria {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #818cf8 !important;
    border-color: #4f46e5 !important;
}

html[data-theme="dark"] .btn-biometria:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .copyright-text {
    color: var(--text-muted) !important;
}

/* General Buttons in Dark Mode */
html[data-theme="dark"] .btn-light {
    background-color: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
}

/* Modern Dark Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}