/* 
 * WLA PREMIUM HUB - CSS FRAMEWORK v1.0
 * Dual Theme support (Dark/Light) with specialized Lottery Prediction UI components.
 * IMPORTANT: All styles scoped to .wla-hub-root to avoid WordPress theme conflicts.
 */

/* Variables scoped ONLY to plugin root — never :root to avoid WP conflict */
.wla-hub-root,
.wla-hub-root[data-bs-theme="dark"],
.wla-hub-root [data-bs-theme="dark"] { 
    --primary-tool: #0ea5e9; 
    --kumat-tool: #ef4444; 
    
    /* Default Dark Theme — Custom Vars */
    --app-bg:       #0d1117;
    --card-bg:      #161b22;
    --border-color: #30363d;
    --text-main:    #f0f6fc;
    --text-muted:   #8b949e;
    --nav-bg:       #010409;
    --input-bg:     #0d1117;
    --bs-theme-icon-filter: invert(1) grayscale(100%) brightness(200%);

    /* Bootstrap 5 internal vars — override so BS components go dark inside plugin */
    --bs-body-bg:           #0d1117;
    --bs-body-color:        #f0f6fc;
    --bs-secondary-bg:      #161b22;
    --bs-tertiary-bg:       #21262d;
    --bs-border-color:      #30363d;
    --bs-secondary-color:   #8b949e;
    --bs-emphasis-color:    #f0f6fc;
    --bs-card-bg:           #161b22;
    --bs-card-border-color: #30363d;
    --bs-card-color:        #f0f6fc;
    --bs-modal-bg:          #161b22;
    --bs-dropdown-bg:       #161b22;
    --bs-dropdown-border-color: #30363d;
    --bs-list-group-bg:     #161b22;
    --bs-list-group-border-color: #30363d;
    --bs-accordion-bg:      #0d1117;
    --bs-accordion-btn-bg:  #161b22;
    --bs-accordion-btn-color: #f0f6fc;
    --bs-accordion-body-padding-y: 12px;
    color-scheme: dark;
}


.wla-hub-root[data-bs-theme="light"],
.wla-hub-root [data-bs-theme="light"] {
    --app-bg:       #f6f8fa;
    --card-bg:      #ffffff;
    --border-color: #d0d7de;
    --text-main:    #24292f;
    --text-muted:   #57606a;
    --nav-bg:       #f6f8fa;
    --input-bg:     #ffffff;
    --bs-theme-icon-filter: none;

    /* Bootstrap vars — light override */
    --bs-body-bg:           #ffffff;
    --bs-body-color:        #24292f;
    --bs-secondary-bg:      #f6f8fa;
    --bs-tertiary-bg:       #e9ecef;
    --bs-border-color:      #d0d7de;
    --bs-secondary-color:   #57606a;
    --bs-emphasis-color:    #000;
    --bs-card-bg:           #ffffff;
    --bs-card-border-color: #d0d7de;
    --bs-card-color:        #24292f;
    --bs-modal-bg:          #ffffff;
    --bs-dropdown-bg:       #ffffff;
    --bs-dropdown-border-color: #d0d7de;
    --bs-list-group-bg:     #ffffff;
    --bs-list-group-border-color: #d0d7de;
    --bs-accordion-bg:      #f6f8fa;
    --bs-accordion-btn-bg:  #ffffff;
    --bs-accordion-btn-color: #24292f;
    color-scheme: light;
}


/* BASE STYLES - Scoped strictly to plugin root */
.wla-hub-root {
    font-family: 'Inter', sans-serif;
    color: var(--text-main) !important;
    background-color: var(--app-bg) !important;
    transition: background-color 0.3s, color 0.3s;
    /* Prevent bleeding into WordPress theme layout */
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

/* Isolate the app shell so it doesn't affect theme float/flex layout */
.wla-hub-root .wla-app-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Make Form Inputs Adapt Based on Theme */
.wla-hub-root .form-control,
.wla-hub-root .form-select,
.wla-hub-root .input-group-text,
.wla-hub-root .card,
.wla-hub-root .premium-card {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.wla-hub-root .premium-card { background-color: var(--card-bg) !important; }
.wla-hub-root .form-control:focus,
.wla-hub-root .form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--primary-tool) !important;
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25) !important;
}

/* --- COMPONENTS --- */

/* Sidebar & Navigation */
/* NOTE: sidebar & bottom-nav are scoped to wla-app-shell to avoid interfering with WordPress theme columns */
.wla-hub-root .bottom-nav { position: sticky; bottom: 0; left: 0; width: 100%; background: var(--nav-bg); border-top: 1px solid var(--border-color); height: 75px; z-index: 200; display: flex; justify-content: space-around; align-items: center; }
.wla-hub-root .sidebar { display: block; position: relative; width: 260px; height: auto; background: var(--nav-bg); border-right: 1px solid var(--border-color); padding: 40px 20px; z-index: 100; }
.wla-hub-root .nav-link-m { color: var(--text-muted); text-decoration: none; font-size: 11px; font-weight: 600; text-align: center; display: flex; flex-direction: column; align-items: center; transition: color 0.2s; }
.wla-hub-root .nav-link-m.active { color: var(--primary-tool); }
.wla-hub-root .nav-link-m i { font-size: 22px; margin-bottom: 2px; }

.wla-hub-root .premium-card { 
    background: var(--card-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
    position: relative; 
    overflow: visible; 
}
.wla-hub-root .premium-card::before { 
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; 
    background: linear-gradient(90deg, var(--primary-tool), #1e3a8a, var(--primary-tool)); 
    background-size: 200% auto; 
}

/* Dashboard Cards */
.wla-hub-root .app-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px 10px; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; }
.wla-hub-root .app-card:hover { transform: translateY(-5px); background: var(--card-bg); border-color: var(--primary-tool); }
.wla-hub-root .app-icon { width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 10px; color: #fff; }

/* Icon Gradients */
.wla-hub-root .icon-blue { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.wla-hub-root .icon-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.wla-hub-root .icon-green { background: linear-gradient(135deg, #10b981, #059669); }
.wla-hub-root .icon-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wla-hub-root .icon-pink { background: linear-gradient(135deg, #ec4899, #db2777); }
.wla-hub-root .icon-gray { background: linear-gradient(135deg, #64748b, #475569); }

/* Inputs & Form Elements — scoped to prevent WP leakage */
.wla-hub-root .card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; }
.wla-hub-root textarea.form-control,
.wla-hub-root input.form-control { background-color: var(--input-bg) !important; color: var(--text-main) !important; border-color: var(--border-color); }
.wla-hub-root textarea.form-control:focus,
.wla-hub-root input.form-control:focus { border-color: var(--primary-tool); box-shadow: 0 0 10px rgba(14, 165, 233, 0.2); }
.wla-hub-root .rank-textarea { background: var(--input-bg); border-radius: 10px; border: 1px solid var(--border-color); font-size: 16px; letter-spacing: 2.5px; height: 110px; padding: 12px; width: 100%; resize: none; color: var(--text-main); }

/* Buttons & Toggles */
.wla-hub-root .theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}
.wla-hub-root .theme-toggle-btn:hover { border-color: var(--primary-tool); color: var(--primary-tool); }

/* Theme Helpers — scoped to plugin root only */
.wla-hub-root[data-bs-theme="dark"] .d-block-light,
.wla-hub-root [data-bs-theme="dark"] .d-block-light { display: none !important; }
.wla-hub-root[data-bs-theme="light"] .d-block-dark,
.wla-hub-root [data-bs-theme="light"] .d-block-dark { display: none !important; }
.wla-hub-root[data-bs-theme="dark"] .d-none-dark,
.wla-hub-root [data-bs-theme="dark"] .d-none-dark { display: none !important; }
.wla-hub-root[data-bs-theme="light"] .d-none-light,
.wla-hub-root [data-bs-theme="light"] .d-none-light { display: none !important; }

/* --- SELECT2 (Searchable Dropdown) THEME HUB --- */
.wla-hub-root .select2-container { width: 100% !important; margin-bottom: 0; }
.wla-hub-root .select2-container--default .select2-selection--single {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 33px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.wla-hub-root .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    padding-left: 8px;
}
.wla-hub-root .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 5px;
}
.wla-hub-root .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-tool);
}

/* Match Filter (.simple-select) inputs */
.wla-hub-root .simple-select + .select2-container .select2-selection--single { height: 33px; border-radius: 4px; }
.wla-hub-root .simple-select + .select2-container .select2-selection__rendered { font-size: 14px; padding-left: 8px; font-weight: normal; }

/* Match Scanner (.scan-select) inputs */
.wla-hub-root .scan-select + .select2-container .select2-selection--single { height: 33px; border-radius: 4px; }
.wla-hub-root .scan-select + .select2-container .select2-selection__rendered { font-size: 13px; font-weight: 600; padding-left: 8px; }

/* Mobile Height Matching */
@media (max-width: 576px) {
    .wla-hub-root .select2-container--default .select2-selection--single { height: 23px; }
    
    .wla-hub-root .simple-select + .select2-container .select2-selection--single { height: 23px; }
    .wla-hub-root .simple-select + .select2-container .select2-selection__rendered { font-size: 11px; padding-left: 4px; }
    
    .wla-hub-root .scan-select + .select2-container .select2-selection--single { height: 22px; }
    .wla-hub-root .scan-select + .select2-container .select2-selection__rendered { font-size: 11px; padding-left: 4px; }
    
    .wla-hub-root .select2-container--default .select2-selection--single .select2-selection__arrow b { transform: scale(0.8); }
}

.wla-hub-root .select2-dropdown {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1055;
    overflow: hidden;
}
.wla-hub-root .select2-search--dropdown {
    padding: 10px;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
}
.wla-hub-root .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-main);
    padding: 6px 12px;
    outline: none;
}
.wla-hub-root .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-tool);
}
.wla-hub-root .select2-results__option {
    padding: 8px 15px;
    font-size: 13px;
    color: var(--text-main);
    transition: all 0.15s;
}
.wla-hub-root .select2-container--default .select2-results__option--highlighted[aria-selected],
.wla-hub-root .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: var(--primary-tool) !important;
}
.wla-hub-root .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-tool);
    color: white;
}

/* Accent Class Integrations with Select2 */
.wla-hub-root .s-yellow + .select2-container--default .select2-selection--single,
.wla-hub-root .bg-yellow-light + .select2-container--default .select2-selection--single { 
    background-color: rgba(250, 204, 21, 0.1) !important; 
    border-color: #85610e !important; 
}
.wla-hub-root .s-yellow + .select2-container--default .select2-selection__rendered,
.wla-hub-root .bg-yellow-light + .select2-container--default .select2-selection__rendered { color: #85610e !important; }

.wla-hub-root[data-bs-theme="dark"] .s-yellow + .select2-container--default .select2-selection--single,
.wla-hub-root[data-bs-theme="dark"] .bg-yellow-light + .select2-container--default .select2-selection--single { 
    background-color: #1a1607 !important; 
}
.wla-hub-root[data-bs-theme="dark"] .s-yellow + .select2-container--default .select2-selection__rendered,
.wla-hub-root[data-bs-theme="dark"] .bg-yellow-light + .select2-container--default .select2-selection__rendered { color: #facc15 !important; }


/* WordPress-style Submenu */
.wla-hub-root .submenu-wp {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 5px 0;
}
.wla-hub-root .submenu-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 15px 8px 45px;
    display: block;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.wla-hub-root .submenu-link:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}
.wla-hub-root .submenu-link.active {
    color: white;
    font-weight: 700;
    background: rgba(14, 165, 233, 0.15);
    border-left: 3px solid var(--primary-tool);
}

/* Mobile Subnav for Settings */
.wla-hub-root .mobile-subnav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 15px;
    padding: 0 5px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}
.wla-hub-root .mobile-subnav::-webkit-scrollbar { display: none; }
.wla-hub-root .mobile-subnav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 5px;
    position: relative;
    white-space: nowrap;
}
.wla-hub-root .mobile-subnav-link.active {
    color: var(--primary-tool);
}
.wla-hub-root .mobile-subnav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-tool);
    border-radius: 3px 3px 0 0;
}

/* ══════════════════════════════════════════════════════════════
   ELEMENT OVERRIDES — work for both dark & light via var tokens
   ══════════════════════════════════════════════════════════════ */

/* BG utilities — force plugin vars */
.wla-hub-root .bg-white,
.wla-hub-root .bg-body          { background-color: var(--card-bg) !important; }
.wla-hub-root .bg-light,
.wla-hub-root .bg-body-secondary { background-color: var(--nav-bg) !important; }

/* Text utilities */
.wla-hub-root .text-dark        { color: var(--text-main) !important; }
.wla-hub-root .text-muted,
.wla-hub-root .text-secondary   { color: var(--text-muted) !important; }
.wla-hub-root .text-body        { color: var(--text-main) !important; }
.wla-hub-root p,
.wla-hub-root span,
.wla-hub-root label             { color: var(--text-main); }

/* Native inputs */
.wla-hub-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.wla-hub-root textarea,
.wla-hub-root select,
.wla-hub-root select.form-select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.wla-hub-root select option     { background-color: var(--card-bg); color: var(--text-main); }
.wla-hub-root input::placeholder,
.wla-hub-root textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
.wla-hub-root input:focus,
.wla-hub-root textarea:focus,
.wla-hub-root select:focus {
    border-color: var(--primary-tool) !important;
    box-shadow: 0 0 0 2px rgba(14,165,233,0.18) !important;
    outline: none;
}
.wla-hub-root .form-check-input { background-color: var(--input-bg); border-color: var(--border-color); }

/* Cards */
.wla-hub-root .card             { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.wla-hub-root .card-header,
.wla-hub-root .card-footer      { background-color: var(--nav-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.wla-hub-root .card-body        { color: var(--text-main) !important; }

/* Tables */
.wla-hub-root table,
.wla-hub-root .table            { color: var(--text-main) !important; border-color: var(--border-color) !important; }
.wla-hub-root th, .wla-hub-root td { border-color: var(--border-color) !important; color: var(--text-main) !important; }

/* Dropdowns */
.wla-hub-root .dropdown-menu    { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }
.wla-hub-root .dropdown-item    { color: var(--text-main) !important; }
.wla-hub-root .dropdown-item:hover { background-color: rgba(255,255,255,0.06) !important; }
.wla-hub-root[data-bs-theme="light"] .dropdown-item:hover { background-color: rgba(0,0,0,0.04) !important; }
.wla-hub-root .dropdown-divider { border-color: var(--border-color) !important; }

/* Modal */
.wla-hub-root .modal-content    { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.wla-hub-root .modal-header,
.wla-hub-root .modal-footer     { border-color: var(--border-color) !important; }

/* List group */
.wla-hub-root .list-group-item  { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }

/* Accordion */
.wla-hub-root .accordion-item   { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }
.wla-hub-root .accordion-button { background-color: var(--nav-bg) !important; color: var(--text-main) !important; box-shadow: none !important; }
.wla-hub-root .accordion-body   { background-color: var(--card-bg) !important; color: var(--text-main) !important; }
.wla-hub-root .accordion-button::after { filter: var(--bs-theme-icon-filter, invert(1)); }

/* Input group */
.wla-hub-root .input-group-text { background-color: var(--nav-bg) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; }

/* Nav tabs */
.wla-hub-root .nav-tabs         { border-color: var(--border-color); }
.wla-hub-root .nav-tabs .nav-link { color: var(--text-muted); }
.wla-hub-root .nav-tabs .nav-link.active { background-color: var(--card-bg); border-color: var(--border-color) var(--border-color) var(--card-bg); color: var(--text-main); }

/* Divider & badges */
.wla-hub-root hr                { border-color: var(--border-color); opacity: 1; }
.wla-hub-root .badge.bg-secondary { background-color: var(--border-color) !important; }
.wla-hub-root .badge.bg-light   { background-color: var(--nav-bg) !important; color: var(--text-main) !important; }

/* Scrollbar — only meaningful in dark */
.wla-hub-root                   { scrollbar-color: var(--border-color) var(--app-bg); }
.wla-hub-root ::-webkit-scrollbar       { width: 6px; height: 6px; }
.wla-hub-root ::-webkit-scrollbar-track { background: var(--app-bg); }
.wla-hub-root ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.wla-hub-root ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }



/* Override Bootstrap internal CSS vars so built-in components auto-adapt */
.wla-hub-root[data-bs-theme="dark"] {
    --bs-body-bg:         #0d1117;
    --bs-body-color:      #f0f6fc;
    --bs-secondary-bg:    #161b22;
    --bs-tertiary-bg:     #21262d;
    --bs-border-color:    #30363d;
    --bs-secondary-color: #8b949e;
    --bs-emphasis-color:  #f0f6fc;
    color-scheme: dark;
}
.wla-hub-root[data-bs-theme="light"] {
    --bs-body-bg:         #f6f8fa;
    --bs-body-color:      #24292f;
    --bs-secondary-bg:    #ffffff;
    --bs-tertiary-bg:     #f6f8fa;
    --bs-border-color:    #d0d7de;
    --bs-secondary-color: #57606a;
    color-scheme: light;
}

/* Background utilities */
.wla-hub-root[data-bs-theme="dark"] .bg-white,
.wla-hub-root[data-bs-theme="dark"] .bg-body,
.wla-hub-root[data-bs-theme="dark"] .bg-light       { background-color: var(--card-bg) !important; }
.wla-hub-root[data-bs-theme="dark"] .bg-body-secondary { background-color: var(--nav-bg) !important; }

/* Text utilities */
.wla-hub-root[data-bs-theme="dark"] .text-dark       { color: var(--text-main) !important; }
.wla-hub-root[data-bs-theme="dark"] .text-muted,
.wla-hub-root[data-bs-theme="dark"] .text-secondary  { color: var(--text-muted) !important; }
.wla-hub-root[data-bs-theme="dark"] .text-body        { color: var(--text-main) !important; }

/* Native select */
.wla-hub-root select,
.wla-hub-root select.form-select,
.wla-hub-root select.form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.wla-hub-root select option {
    background-color: var(--card-bg);
    color: var(--text-main);
}

/* All inputs & textareas (broader than just .form-control) */
.wla-hub-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.wla-hub-root textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.wla-hub-root input::placeholder,
.wla-hub-root textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
.wla-hub-root input:focus,
.wla-hub-root textarea:focus,
.wla-hub-root select:focus {
    border-color: var(--primary-tool) !important;
    box-shadow: 0 0 0 2px rgba(14,165,233,0.18) !important;
    outline: none;
}

/* form-check (checkbox / radio) */
.wla-hub-root .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

/* Cards */
.wla-hub-root .card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.wla-hub-root .card-header,
.wla-hub-root .card-footer {
    background-color: var(--nav-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.wla-hub-root .card-body { color: var(--text-main) !important; }

/* Tables */
.wla-hub-root table, .wla-hub-root .table { color: var(--text-main) !important; border-color: var(--border-color) !important; }
.wla-hub-root th, .wla-hub-root td,
.wla-hub-root .table th, .wla-hub-root .table td {
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.wla-hub-root[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.025) !important; }
.wla-hub-root[data-bs-theme="dark"] .table-hover > tbody > tr:hover > *             { background-color: rgba(255,255,255,0.05) !important; }

/* Dropdown menus */
.wla-hub-root .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
.wla-hub-root .dropdown-item { color: var(--text-main) !important; }
.wla-hub-root[data-bs-theme="dark"] .dropdown-item:hover  { background-color: rgba(255,255,255,0.06) !important; }
.wla-hub-root[data-bs-theme="light"] .dropdown-item:hover { background-color: rgba(0,0,0,0.04) !important; }
.wla-hub-root .dropdown-divider { border-color: var(--border-color) !important; }

/* Modal */
.wla-hub-root .modal-content  { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.wla-hub-root .modal-header,
.wla-hub-root .modal-footer   { border-color: var(--border-color) !important; }

/* List group */
.wla-hub-root .list-group-item { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }

/* Badges */
.wla-hub-root[data-bs-theme="dark"] .badge.bg-secondary { background-color: #30363d !important; }
.wla-hub-root[data-bs-theme="dark"] .badge.bg-light     { background-color: var(--nav-bg) !important; color: var(--text-main) !important; }

/* Alerts */
.wla-hub-root[data-bs-theme="dark"] .alert { border-color: var(--border-color); background-color: var(--card-bg); color: var(--text-main); }

/* Divider */
.wla-hub-root hr { border-color: var(--border-color); opacity: 1; }

/* Input group addons */
.wla-hub-root .input-group-text {
    background-color: var(--nav-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

/* Nav-tabs */
.wla-hub-root .nav-tabs { border-color: var(--border-color); }
.wla-hub-root .nav-tabs .nav-link { color: var(--text-muted); }
.wla-hub-root .nav-tabs .nav-link.active { background-color: var(--card-bg); border-color: var(--border-color) var(--border-color) var(--card-bg); color: var(--text-main); }

/* Accordion */
.wla-hub-root .accordion-item       { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }
.wla-hub-root .accordion-button     { background-color: var(--nav-bg) !important; color: var(--text-main) !important; }
.wla-hub-root .accordion-body       { background-color: var(--card-bg) !important; color: var(--text-main) !important; }
.wla-hub-root[data-bs-theme="dark"] .accordion-button::after { filter: invert(1); }

/* Scrollbar (dark mode) */
.wla-hub-root[data-bs-theme="dark"] { scrollbar-color: #30363d #0d1117; }
.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar       { width: 6px; height: 6px; }
.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; }
.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
.wla-hub-root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }