/* ==========================================================
   IMPERIAL THEME - BLACK & GOLD GLOBAL OVERRIDE
========================================================== */

/* 1. Global Font and Backgrounds */
:root {
    --tk-gold-gradient: linear-gradient(135deg, #f0b90b 0%, #ff8c00 100%); /* Match exact wapi Subscription style */
    --tk-glass-bg: rgba(30, 30, 38, 0.6);
    --tk-glass-border: rgba(255, 255, 255, 0.1);
    --tk-purple-accent: #8b5cf6;
    --tk-blue-accent: #3b82f6;
    --tk-success-green: #10b981;
    --tk-danger-red: #ef4444;
    --tk-dark-bg: #1e1e26; /* Exact match to Wapi background dark */
    --tk-darker-bg: #2d2d3d; /* Exact match to Wapi background darker */
    --tk-card-bg: rgba(30, 30, 38, 0.85);
    --tk-header-bg: rgba(30, 30, 38, 0.95);
    --tk-sidebar-bg: rgba(30, 30, 38, 0.95);
    --tk-border-color: rgba(255, 255, 255, 0.1);
    --tk-text-muted: #9ca3af;
    --tk-gold-text: #FDB931;
}

body, .page-wrapper, .body-wrapper, .container-fluid {
    background: linear-gradient(135deg, var(--tk-dark-bg) 0%, var(--tk-darker-bg) 100%) !important;
    background-attachment: fixed !important;
    color: #f8fafc !important;
    font-weight: 400 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.01em !important;
}

/* Global Headings */
h1, h2, h3, h4, h5, h6, .card-title, .modal-title {
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important; /* Refined minimal text instead of solid gold everywhere */
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    background: none !important;
}

/* Luxury Highlights (Safe Solid Colors) */
.tk-gold-shimmer, .brand-name, .logo-text-premium {
    color: #FDB931 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-weight: 900 !important;
}

.tk-text-purple {
    color: #a78bfa !important; /* Slightly lighter purple for dark mode visibility */
}

.tk-text-blue {
    color: #60a5fa !important; /* Slightly lighter blue for dark mode visibility */
}

/* 2. Sidebar & Header Styling */
.left-sidebar, .app-header {
    background: var(--tk-header-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-right: 1px solid var(--tk-glass-border) !important;
    border-bottom: 1px solid var(--tk-glass-border) !important;
}

.sidebar-link, .sidebar-nav ul .sidebar-item.selected>.sidebar-link,
.sidebar-nav ul .sidebar-item.selected>.sidebar-link.active,
.sidebar-nav ul .sidebar-item>.sidebar-link.active {
    color: #f8fafc !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Sidebar Hover / Active states */
.sidebar-link:hover, .sidebar-nav ul .sidebar-item.selected>.sidebar-link {
    background: rgba(212, 175, 55, 0.15) !important; /* Gold transparent bg */
    color: #D4AF37 !important; /* Gold text */
    transform: translateX(5px) !important; /* Hover animation */
}

/* Sidebar Icons */
.sidebar-link i {
    color: #D4AF37 !important; 
}

/* Navbar / Top Header icons */
.app-header .navbar-nav .nav-link, .nav-icon-hover i {
    color: #D4AF37 !important;
    transition: transform 0.3s ease !important;
}

.nav-icon-hover:hover i {
    transform: scale(1.15) !important; /* Animation */
}

/* 3. Cards & Containers (Glassmorphism) */
.card, .info-card, .stat-item {
    background: var(--tk-glass-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--tk-glass-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Card Hover Animation */
.card:hover, .info-card:hover, .stat-item:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(245, 166, 35, 0.3) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 166, 35, 0.05) !important;
}

.card-body {
    background: transparent !important;
}

/* 4. Buttons */
.btn-primary, .tk-btn-gold {
    background: var(--tk-gold-gradient) !important;
    border: none !important;
    color: #000000 !important; /* High contrast black text on gold */
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(245, 166, 35, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease !important;
}

.btn-success, .tk-btn-green {
    background: var(--tk-success-green) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.btn-primary:active, .btn-success:active, .btn-info:active {
    transform: scale(0.95) !important;
}

.btn-primary:hover, .btn-success:hover {
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Danger Buttons */
.btn-danger {
    background: linear-gradient(135deg, #ff4757, #c0392b) !important;
    border: none !important;
    color: #fff !important;
}

/* 5. Inputs, Forms, Selects */
.form-control, .form-select, input, select, textarea {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--tk-glass-border) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
}

/* Ensure native options are readable */
select option {
    background-color: #1a1e26 !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.form-control:focus, .form-select:focus, input:focus {
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
    border-color: #D4AF37 !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

::placeholder {
    color: var(--tk-text-muted) !important;
    opacity: 0.6;
}

/* 6. Tables & Lists - Force Dark Theme */
.table, .table th, .table td {
    color: #ffffff !important;
    border-color: rgba(245, 166, 35, 0.1) !important;
}

.table thead th, .table thead th a, .table thead th * {
    background: rgba(0, 0, 0, 0.3) !important;
    color: var(--tk-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.80rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
    border-top: none !important;
}

/* Fix any default gold overrides in sort icons or header wrappers */
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
    color: var(--tk-text-muted) !important;
}

/* Global Table Background Fix - No more white rows */
.table, 
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-hover > tbody > tr:hover,
.table > tbody > tr,
.table > tr,
.table > td {
    background-color: var(--tk-dark-bg) !important;
    color: #ffffff !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(245, 166, 35, 0.08) !important;
}

.table th {
    background-color: #0d1117 !important;
}

/* DataTables Specific Fixes */
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing {
    color: var(--tk-text-muted) !important;
}

/* Fix overlapping search text due to global input padding override */
.dataTables_wrapper .dataTables_filter input,
.table-global-search {
    color: #ffffff !important;
    padding-left: 45px !important; /* Make room for the magnifying glass icon */
}

/* Make base paginate buttons look like the subscription cards */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-link {
    color: #ffffff !important;
    background: var(--tk-card-bg) !important;
    border-radius: 6px !important;
    border: 1px solid var(--tk-border-color) !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
    transition: all 0.3s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.page-item:not(.active) .page-link:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--tk-success-green) !important;
    border: 1px solid var(--tk-success-green) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.active:hover,
.page-item.active .page-link,
.page-item.active .page-link:hover {
    background: linear-gradient(135deg, var(--tk-success-green) 0%, #0aa96e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* 7. Dropdowns & Modals (Glassmorphism) */
.dropdown-menu, .modal-content, .select2-dropdown {
    background: rgba(13, 17, 23, 0.6) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--tk-glass-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    border-radius: 20px !important;
}

.dropdown-item {
    color: #f8fafc !important;
    font-size: 13.5px !important;
    padding: 10px 20px !important;
}

.dropdown-item:hover, .dropdown-item:focus, .select2-results__option--highlighted {
    background: rgba(253, 185, 49, 0.15) !important;
    color: #FDB931 !important;
}

.dropdown-item i {
    color: #FDB931 !important;
    font-size: 15px !important;
}

/* Select2 Specific Overrides */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #0d1117 !important;
    border: 1px solid var(--tk-border-color) !important;
    border-radius: 12px !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding-left: 15px !important;
}

.select2-dropdown {
    background-color: #1a1e26 !important;
    border: 1px solid var(--tk-border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

.select2-results__option {
    color: #f8fafc !important;
    padding: 10px 15px !important;
}

/* Modals */
.modal-header {
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.modal-footer {
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* 8. Global Entry Animation (Removed to prevent stacking bugs) */

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* 9. Miscellaneous Elements */
hr {
    border-color: rgba(212, 175, 55, 0.3) !important;
}

.badge {
    background: rgba(212, 175, 55, 0.2) !important;
    color: #D4AF37 !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
}

/* SweetAlert Overrides */
.swal2-popup {
    background: #141414 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #f8fafc !important;
}
.swal2-title {
    color: #D4AF37 !important;
}

/* 10. Dashboard Specific Overrides */
.navbar, .navbar-light, .app-header, .topbar {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--tk-border-color) !important;
}

/* Dashboard Stat Values Visibility */
.stat-item h4, .info-card h4, .info-card h6, .true-kit-sub-days-number, .wapi-stat-content h5, .wapi-stat-content h6 {
    color: #FDB931 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 15px rgba(245, 166, 35, 0.3) !important;
}

.wapi-stat-content h5 {
    font-size: 1.1rem !important;
}

.info-card .text-muted, .stat-item small, .wapi-stat-content small {
    color: #848E9C !important;
    opacity: 0.8;
}

/* Info Cards Restyling */
.info-card.balance-card {
    border-color: var(--tk-success-green) !important;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.1) !important;
}

.info-card.inactive-sub {
    border-color: #ef4444 !important;
}

/* Hero Section Accents (Purple/Blue) */
.tk-text-purple {
    color: var(--tk-purple-accent) !important;
}

.tk-text-blue {
    color: var(--tk-blue-accent) !important;
}

/* Sidebar Icons & Text Unification */
.sidebar-link i {
    color: #FDB931 !important;
    filter: drop-shadow(0 0 5px rgba(245, 166, 35, 0.4)) !important;
}

.sidebar-link span {
    color: #eaecef !important; /* Slightly off-white for better readability */
    font-weight: 500 !important;
}

.sidebar-link.active span,
.sidebar-link:hover span {
    color: #F5A623 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.5) !important;
}

.sidebar-link.active i,
.sidebar-link:hover i {
    animation: truekit-shimmer 3s ease-in-out infinite !important;
    background-size: 200% auto !important;
    filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.8)) !important;
}

/* Dashboard Table Headers & Titles Unification */
.table thead th, 
.card-header,
.true-kit-sub-title,
.biauto-step-title,
.card-title,
h2.card-title,
.biauto-status-title {
    font-weight: 900 !important;
    color: #FDB931 !important;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.3) !important;
}

/* Info card typography fixes */
.info-card h6, .info-card h4, .stat-item h4 {
    color: #D4AF37 !important; 
}
.info-card h4 i {
    color: #D4AF37 !important;
}
.info-card small {
    color: #a1a1aa !important;
}

/* Profile Avatars */
.avatar-wrapper, .profile-avatar {
    background: #141414 !important;
    border-color: #D4AF37 !important;
}

/* Utility Backgrounds Overwrite - Force Dark */
.bg-white, .bg-light, .bg-light-info, .bg-light-primary, .bg-light-success, .bg-light-danger, .bg-light-warning {
    background-color: #0d1117 !important;
}

.bg-theme-header {
    background-color: var(--tk-header-bg) !important;
    border-bottom: 1px solid var(--tk-border-color) !important;
}

.text-dark {
    color: #f8fafc !important;
}

.card {
    background-color: var(--tk-card-bg) !important;
    border: 1px solid var(--tk-border-color) !important;
}

/* 11. Custom Text Logo Branding - "Free Device Check" Style */
/* Using multiple selectors to ensure highest CSS specificity */
.brand-logo-text,
a.brand-logo-text,
.brand-logo .brand-logo-text,
.left-sidebar .brand-logo-text {
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
}

/* The brand name text - styled like "Free Device Check" golden heading */
.brand-name {
    text-transform: none !important;
    display: inline-block !important;
    font-size: 1em !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #FFF0B3 0%, #F5A623 35%, #E8850A 65%, #FDB931 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: truekit-shimmer 3s ease-in-out infinite !important;
    filter: drop-shadow(0 0 10px rgba(245, 166, 35, 0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    letter-spacing: -0.5px !important;
    user-select: none !important;
}

/* Standardized Shimmer Animation */
@keyframes truekit-shimmer {
    0%   { background-position: 0%   center; filter: drop-shadow(0 0 8px rgba(245,166,35,0.5)); }
    50%  { background-position: 100% center; filter: drop-shadow(0 0 15px rgba(245,166,35,0.85)); }
    100% { background-position: 0%   center; filter: drop-shadow(0 0 8px rgba(245,166,35,0.5)); }
}

.brand-logo-text:hover {
    transform: scale(1.06) !important;
}

.brand-logo-text:hover .brand-name {
    filter: drop-shadow(0 0 18px rgba(245, 166, 35, 1)) drop-shadow(0 2px 6px rgba(0,0,0,0.7)) !important;
}

/* Specific scaling for mobile header logo */
.mobile-logo-text {
    font-size: 22px !important;
}

.mobile-logo-text .brand-name {
    font-size: 1em !important;
}

/* Specific scaling for login page logo */
.login-logo-text {
    font-size: 36px !important;
    margin-bottom: 20px !important;
}

.login-logo-text .brand-name {
    font-size: 1em !important;
}

/* 12. Preloader & Branding Centering */
.preloader {
    display: flex; /* Remove !important to allow jQuery .fadeOut() to work */
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    background: #0a0a0a !important;
    z-index: 100000 !important;
}

/* Crown Icon Brand Style */
/* Brand Icon Style (Apple Logo) */
.brand-icon {
    color: #D4AF37 !important;
    margin-right: 12px !important;
    font-size: 1.3em !important;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7)) !important;
    animation: apple-premium-anim 3.5s ease-in-out infinite !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative;
    background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA6C39 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

@keyframes apple-premium-anim {
    0%, 100% { 
        transform: translateY(0) scale(1) rotate(0deg);
        filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
    }
    33% {
        transform: translateY(-4px) scale(1.1) rotate(-5deg);
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.9));
    }
    66% {
        transform: translateY(-1px) scale(1.05) rotate(5deg);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7));
    }
}

/* 13. Visibility & Scrolling Fixes */
.app-header.fixed-header {
    background: #141414 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Prevent white-on-white visibility issues on scroll */
.page-wrapper, .body-wrapper {
    background: #0a0a0a !important;
}

/* Fix dropdown visibility in Call Backdoor page */
.dark-form-select option, 
select option,
.select2-results__option,
.select2-container--default .select2-selection--single,
.select2-dropdown {
    background-color: #141414 !important;
    color: #f8fafc !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected=true] {
    background-color: #D4AF37 !important;
    color: #0b0e11 !important;
}

.iti__country-name, .iti__dial-code {
    color: #f8fafc !important;
}

/* Scrollbar override for global consistency */
::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}
::-webkit-scrollbar-track {
    background: #0a0a0a !important;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37, #AA6C39) !important;
    border-radius: 5px !important;
    border: 2px solid #0a0a0a !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4AF37 !important;
}
/* 14. Consolidated Component Styles (Extracted from Views) */

/* Sidebar Admin Badge & Divider (from side.navbar.ctp) */
.true-kit-admin-divider { position: relative; margin: 25px 0 15px; padding: 0; }
.true-kit-admin-hr { margin: 0 20px; border: none; height: 3px; background: linear-gradient(90deg, transparent 0%, #b8bcc8 15%, #b8bcc8 85%, transparent 100%); position: relative; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.true-kit-admin-badge-wrapper { display: flex; align-items: center; justify-content: center; padding: 20px 20px 15px; margin: 0; }
.true-kit-admin-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; background: transparent; border: none; position: relative; transition: all 0.2s ease; }
.true-kit-admin-badge:hover { transform: translateY(-1px); }
.true-kit-admin-crown-icon { width: 16px; height: 16px; color: #71747c; transition: all 0.2s ease; }
.true-kit-admin-badge:hover .true-kit-admin-crown-icon { color: #FDB931; }
.true-kit-admin-badge-text { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #71747c; margin: 0; transition: all 0.2s ease; }
.true-kit-admin-badge:hover .true-kit-admin-badge-text { color: #FDB931; }
.true-kit-admin-end { margin: 15px 0 25px; }

/* Modal Styles - Binance Theme (from side.navbar.ctp) */
.true-kit-modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; animation: true-kitFadeInModal 0.3s ease-out; padding: 20px; }
.true-kit-modal-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(24px) saturate(180%); }
.true-kit-modal-container { position: relative; background: var(--tk-glass-bg); backdrop-filter: blur(24px) saturate(180%); border-radius: 24px; border: 1px solid var(--tk-glass-border); max-width: 420px; width: 100%; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7); animation: true-kitSlideUpModal 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; }
.true-kit-modal-heading { font-size: 28px; font-weight: 600; color: #ffffff; margin: 0 0 16px; }
.true-kit-modal-text { font-size: 16px; color: #b8b8b8; margin: 0 0 12px; }
.true-kit-modal-action-btn { padding: 14px 32px; border: none; border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; background: var(--tk-gold-gradient); color: #000; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; }

/* Select2 & Control Overrides */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--tk-card-bg) !important;
    border: 1px solid var(--tk-border-color) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
}

.select2-dropdown {
    background-color: #0d1117 !important;
    border: 1px solid var(--tk-border-color) !important;
    color: #ffffff !important;
}

.select2-results__option {
    background-color: #0d1117 !important;
    color: #ffffff !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--tk-gold-gradient) !important;
    color: #000 !important;
}

/* WhatsApp History Components (from whatsapp_history.ctp) */
.wa-history-card { background: var(--tk-glass-bg); backdrop-filter: blur(24px) saturate(180%); border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); overflow: hidden; margin: 20px 0; border: 1px solid var(--tk-glass-border); }
.wa-card-header { background: rgba(255, 255, 255, 0.03); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--tk-glass-border); }
.wa-card-title { color: #fff; font-size: 1.4rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px; }
.wa-stat-badge { background: rgba(255,255,255,0.06); color: #fff; padding: 8px 16px; border-radius: 25px; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; border: 1px solid var(--tk-glass-border); }
.wa-card-body { padding: 25px; background: transparent; }
.wa-search-input { width: 100%; padding: 12px 20px 12px 45px; border: 1px solid var(--tk-glass-border); border-radius: 30px; font-size: 0.95rem; background: rgba(255, 255, 255, 0.03); color: #fff; transition: all 0.3s ease; }
.wa-search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); }
.wa-table { width: 100%; border-collapse: collapse; background: transparent; border-radius: 12px; overflow: hidden; }
.wa-table th { background: rgba(255,255,255,0.05); padding: 16px; text-align: left; font-weight: 600; color: var(--tk-gold-text); border-bottom: 2px solid var(--tk-border-color); }
.wa-table-row { border-bottom: 1px solid var(--tk-border-color); transition: background 0.2s; }
.wa-table-row:hover { background: rgba(255,255,255,0.03); }
.wa-status-badge { padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.wa-status-success { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.wa-status-processing { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.wa-status-failed { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.wa-page-link { background: var(--tk-card-bg); border: 1px solid var(--tk-border-color); color: #fff; border-radius: 8px; padding: 8px 16px; text-decoration: none; }
.wa-page-link:hover { background: var(--tk-gold-gradient); color: #000; border-color: transparent; }
.wa-page-item.active .wa-page-link { background: var(--tk-gold-gradient); color: #000; border-color: transparent; }

/* Services Components (from services.ctp) */
.bnc-crypto-container { color: #fff; padding: 1rem; }
.bnc-crypto-card { background: var(--tk-card-bg); border-radius: 12px; margin-bottom: 1.5rem; border: 1px solid var(--tk-border-color); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.bnc-card-header { background: rgba(255,255,255,0.03); padding: 1.25rem; border-bottom: 1px solid var(--tk-border-color); display: flex; align-items: center; gap: 0.75rem; }
.bnc-card-header h5 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--tk-gold-text); display: flex; align-items: center; gap: 0.5rem; }
.bnc-crypto-table th { background: rgba(255,255,255,0.05); color: var(--tk-gold-text); font-weight: 600; padding: 1rem; border-bottom: 1px solid var(--tk-border-color); }
.bnc-crypto-table td { padding: 1rem; border-bottom: 1px solid var(--tk-border-color); font-size: 0.9rem; color: #e2e8f0; }
.bnc-btn-order { background: var(--tk-gold-gradient); color: #000 !important; font-weight: 700; border-radius: 6px; padding: 0.6rem 1.2rem; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.bnc-btn-order:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(253, 185, 49, 0.3); }
.bnc-status-badge { padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.bnc-status-inactive { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Binance-style Order Modal (from services.ctp) */
.binance-order-modal .modal-content { background: var(--tk-header-bg); border: 1px solid var(--tk-border-color); color: #fff; border-radius: 20px; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.order-wizard-steps { background: rgba(255,255,255,0.03); padding: 20px; display: flex; justify-content: space-around; border-bottom: 1px solid var(--tk-border-color); }
.order-wizard-step .order-wizard-step-number { width: 30px; height: 30px; border-radius: 50%; background: var(--tk-card-bg); border: 2px solid var(--tk-border-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 5px; }
.order-wizard-step.active .order-wizard-step-number { background: var(--tk-gold-gradient); border-color: transparent; color: #000; }
.binance-info-card { background: var(--tk-card-bg); border: 1px solid var(--tk-border-color); border-radius: 12px; padding: 15px; }
.binance-info-input { background: transparent; border: none; color: #fff; font-size: 1.1rem; font-weight: 600; width: 100%; }
.binance-info-input:focus { outline: none; }
.binance-description-box { background: rgba(255,255,255,0.02); border-radius: 12px; padding: 15px; border-left: 4px solid var(--tk-gold-text); margin-top: 20px; }

/* WhatsApp Chat Specifics (from whatsapp_history.ctp) */
.wa-modal-header { background: var(--tk-header-bg); border-bottom: 1px solid var(--tk-border-color); padding: 15px; }
.wa-status-dot { background: #10b981; border: 2px solid var(--tk-header-bg); }
.wa-chat-footer { background: var(--tk-header-bg); border-top: 1px solid var(--tk-border-color); padding: 15px; }
.wa-chat-input { background: var(--tk-card-bg); border: 1px solid var(--tk-border-color); color: #fff; border-radius: 30px; padding: 10px 20px; }
.wa-message-incoming { background: var(--tk-card-bg); color: #fff !important; border: 1px solid var(--tk-border-color); border-top-left-radius: 0; }
.wa-message-outgoing { background: var(--tk-gold-gradient); color: #000 !important; border-top-right-radius: 0; }
.wa-message .wa-text { color: inherit !important; }
.wa-message .wa-time { color: inherit !important; opacity: 0.7; }
.wa-date-separator span { background: var(--tk-card-bg); color: var(--tk-gold-text); border: 1px solid var(--tk-border-color); }

/* Dashboard & Profile Components (from dashboard.ctp) */
#kt_user_profile_panel { background: var(--tk-glass-bg); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--tk-glass-border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); overflow: hidden; border-radius: 20px; }
.profile-header { position: relative; height: 140px; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.02) 100%); border-bottom: 1px solid var(--tk-glass-border); }
.avatar-wrapper { background: rgba(255, 255, 255, 0.05); padding: 4px; border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); border: 1px solid var(--tk-glass-border); backdrop-filter: blur(12px); }
.profile-avatar { width: 90px; height: 90px; border: 4px solid transparent; border-radius: 50%; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); background: rgba(13, 17, 23, 0.8); }
.online-indicator { width: 18px; height: 18px; background: var(--tk-success-green); border: 3px solid rgba(13, 17, 23, 0.9); animation: pulse 2s infinite; border-radius: 50%; }

.info-card { text-align: center; padding: 20px; border-radius: 20px; background: var(--tk-glass-bg); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--tk-glass-border); color: #ffffff; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }
.info-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.15); }
.info-card.balance-card { background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(13, 17, 23, 0.4) 100%); border: 1px solid rgba(16, 185, 129, 0.3); }
.info-card.active-sub { border: 1px solid rgba(253, 185, 49, 0.3); }
.info-card.inactive-sub { border: 1px solid rgba(239, 68, 68, 0.3); }

/* Premium Subscription Modal (from dashboard.ctp) */
.true-kit-sub-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; z-index: 99999; animation: true-kit-backdrop-appear 0.4s ease; padding: 20px; }
.true-kit-sub-modal { background: #0d1117; border-radius: 24px; width: 90%; max-width: 500px; overflow: hidden; border: 1px solid var(--tk-border-color); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8); animation: true-kit-modal-appear 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
.true-kit-sub-icon-main { width: 80px; height: 80px; background: var(--tk-gold-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(245, 166, 35, 0.5); position: relative; z-index: 1; }
.true-kit-sub-title { font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 12px; letter-spacing: -0.5px; }
.true-kit-sub-warning-box { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 16px; padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; }
.true-kit-sub-support-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--tk-gold-gradient); color: #000; text-decoration: none; padding: 16px 40px; border-radius: 12px; font-size: 16px; font-weight: 700; transition: all 0.3s ease; }

@keyframes true-kit-backdrop-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes true-kit-modal-appear { from { transform: scale(0.95) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* Button Styles Standardization */
.btn-light-primary { background-color: rgba(59, 130, 246, 0.1) !important; color: #3b82f6 !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; }
.btn-light-primary:hover { background-color: #3b82f6 !important; color: #fff !important; }
.btn-light-danger { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; }
.btn-light-danger:hover { background-color: #ef4444 !important; color: #fff !important; }
.btn-light-success { background-color: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; }
.btn-light-success:hover { background-color: #10b981 !important; color: #fff !important; }

/* Dashboard Header Components (from body-header.ctp) */
.online-modern { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; font-size: 14px; transition: all 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.1); }
.online-modern:hover { background: rgba(245, 166, 35, 0.1); border-color: var(--tk-gold-text); }
.status-indicator { width: 8px; height: 8px; background: var(--tk-success-green); border-radius: 50%; position: relative; }
.users-count { font-weight: 800; color: var(--tk-gold-text); }
.users-label { color: #cbd5e1; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Language Selector (from body-header.ctp) */
.lang-btn { all: unset; cursor: pointer; background: rgba(245, 166, 35, 0.05); border: 1px solid rgba(245, 166, 35, 0.2); padding: .4rem .8rem; border-radius: .5rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; transition: all 0.3s ease; min-width: 140px; color: #ffffff; position: relative; }
.lang-dropdown { position: relative; display: inline-block; }
.lang-btn:hover { background: rgba(245, 166, 35, 0.15); border-color: var(--tk-gold-text); }
.lang-menu { position: absolute; right: 0; top: calc(100% + .4rem); background: rgba(13, 17, 23, 0.98); border: 1px solid var(--tk-border-color); border-radius: .5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.8); padding: .4rem 0; width: 16rem; max-height: 20rem; overflow-y: auto; display: none; z-index: 9999; backdrop-filter: blur(15px); transition: all 0.2s ease; opacity: 0; transform: translateY(-10px); }
.lang-menu.open { display: block; opacity: 1; transform: translateY(0); }
.lang-item { all: unset; width: 100%; cursor: pointer; padding: .5rem .8rem; display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: #e2e8f0; transition: all .2s; position: relative; }
.lang-item:hover { background: rgba(245, 166, 35, 0.1); color: var(--tk-gold-text); }
.lang-item.active { background: rgba(245, 166, 35, 0.15); color: var(--tk-gold-text); }
.lang-item.active::before { content: '✓'; position: absolute; right: 1rem; color: var(--tk-gold-text); font-weight: bold; }
.current-lang-flag { display: inline-block; margin-right: 0.3rem; }

/* Translation Overlay */
.translation-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); }
.translation-overlay.show { display: flex; }
.translation-message { background: #0d1117; padding: 2.5rem 3rem; border-radius: 1.5rem; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.6); border: 1px solid var(--tk-border-color); animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.translation-text { font-size: 1.1rem; color: var(--tk-gold-text); margin: 0; font-weight: 600; }
.translation-icon { width: 60px; height: 60px; margin: 0 auto 1rem; position: relative; border: 3px solid #f3f3f3; border-top: 3px solid var(--tk-gold-text); border-radius: 50%; animation: langSpin 1s linear infinite; }

@keyframes langSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Google Translate Hiders */
#google_translate_element, .goog-te-banner-frame.skiptranslate, .skiptranslate, iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd, .goog-logo-link { display: none !important; }
.goog-te-gadget { color: transparent !important; }
html { margin-top: 0 !important; }
body { top: 0px !important; position: static !important; }

/* Animation Keyframes */
@keyframes true-kitFadeInModal { from { opacity: 0; } to { opacity: 1; } }
@keyframes true-kitSlideUpModal { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes subtle-pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.5); opacity: 0.6; } }

/* Fix for status badges integration */
.badge.bg-success { background-color: var(--tk-success-green) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--tk-danger-red) !important; color: #fff !important; }
.badge.bg-warning { background-color: #f59e0b !important; color: #000 !important; }
.badge.bg-info { background-color: var(--tk-blue-accent) !important; color: #fff !important; }

/* 15. Final Global Dark Theme Reinforcements */
.card, .card-header, .card-footer, .modal-content, .modal-header, .modal-footer {
    background-color: var(--tk-card-bg) !important;
    border-color: var(--tk-border-color) !important;
    color: #ffffff !important;
}

/* 16. Modal Position & Scrolling Fixes */
.modal-dialog {
    margin: 1.75rem auto !important;
}

.modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}
.modal-dialog-centered::before {
    display: block !important;
    height: calc(100vh - 3.5rem) !important;
    height: -webkit-min-content !important;
    height: -moz-min-content !important;
    height: min-content !important;
    content: "" !important;
}

.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 12rem) !important; 
    overflow-y: auto !important;
}

/* Ensure modal text is readable */
.modal-body label, .modal-body input, .modal-body select {
    color: #ffffff !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important; /* Make close button visible on dark bg */
}

.card-title, .modal-title, h1, h2, h3, h4, h5, h6 {
    color: var(--tk-gold-text) !important;
}

/* Fix for ModernizeComponentHelper card headers */
.border-bottom {
    border-bottom: 1px solid var(--tk-border-color) !important;
}

.table-responsive {
    background-color: transparent !important;
}

.table {
    background-color: var(--tk-dark-bg) !important;
    color: #ffffff !important;
}

.table th, .table td {
    background-color: transparent !important;
    border-color: var(--tk-border-color) !important;
    color: #ffffff !important;
}

/* Force dark background on common bootstrap utility classes */
.bg-white, .bg-light, .bg-body {
    background-color: var(--tk-dark-bg) !important;
}

/* Select2 and Form enhancements */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.form-control, .form-select {
    background-color: #0d1117 !important;
    border: 1px solid var(--tk-border-color) !important;
    color: #ffffff !important;
}

.select2-dropdown {
    background-color: #0d1117 !important;
    border: 1px solid var(--tk-border-color) !important;
}

.text-dark {
    color: #ffffff !important;
}

.text-muted {
    color: var(--tk-text-muted) !important;
}

/* Ensure dataTables specifically don't have white backgrounds */
table.dataTable tbody tr {
    background-color: var(--tk-dark-bg) !important;
}

table.dataTable.display tbody tr.odd, 
table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable.stripe tbody tr.even {
    background-color: var(--tk-dark-bg) !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: rgba(245, 166, 35, 0.1) !important;
}

/* 16. Button & Component Visibility Enhancements */
.btn-outline-primary {
    border-color: var(--tk-gold-text) !important;
    color: var(--tk-gold-text) !important;
}

.btn-outline-primary:hover {
    background-color: var(--tk-gold-text) !important;
    color: #000 !important;
}

.btn-outline-secondary {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.btn-outline-secondary:hover {
    background-color: #ffffff !important;
    color: #000 !important;
}

/* Fix for Search Filter Button (Outline Primary) */
.notify-badge.btn-outline-primary {
    background-color: rgba(245, 166, 35, 0.05) !important;
}

/* Datatables Sorting Icons Visibility (Fix for Black Dot glitch) */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--tk-gold-text) !important;
    opacity: 0.8 !important;
}

/* Multiselect Checkbox Visibility */
.form-check-input {
    border-color: var(--tk-border-color) !important;
    background-color: #0d1117 !important;
}

.form-check-input:checked {
    background-color: var(--tk-gold-text) !important;
    border-color: var(--tk-gold-text) !important;
}

/* Header Text Contrast */
.header-item th {
    color: var(--tk-gold-text) !important;
    font-weight: 600 !important; /* Reduced from 700 for more elegance */
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

/* Modal Fixes for 'Blank Look' */
.modal-backdrop {
    background-color: #000000 !important;
    opacity: 0.8 !important; /* Darker to obscure background clearly */
    z-index: 100000 !important;
}

.modal {
    z-index: 100001 !important;
}

.modal-content {
    background-color: #1a1d21 !important; /* Specific solid background for modals */
    border: 1px solid var(--tk-gold-text) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
    color: #ffffff !important;
    overflow: hidden !important; /* Prevents parent clipping */
}

.modal-body {
    background-color: #1a1d21 !important;
    color: #ffffff !important;
    padding: 2rem !important;
    max-height: 70vh !important;
    overflow-y: auto !important; /* Forces scroll for long forms (like Add User) */
}

.modal-header {
    border-bottom: 1px solid var(--tk-border-color) !important;
    background-color: #1a1d21 !important;
}

.modal-footer {
    border-top: 1px solid var(--tk-gold-text) !important; /* Solid gold line for footer distinction */
    background-color: #1a1d21 !important;
    padding: 1rem 2rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.modal-body label {
    color: var(--tk-gold-text) !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
}

.modal-body .form-control {
    background-color: #0d1117 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Modal-Specific Buttons */
.modal-footer .btn-light-primary {
    background: var(--tk-gold-gradient) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.6rem 1.5rem !important;
}

.modal-footer .btn-light-danger {
    background: #d9534f !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.6rem 1.5rem !important;
}

/* Close Button Contrast in Modals */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* 17. Phase 2: Global Button & Card Theme Unification */
.btn-success, .btn-primary {
    background: var(--tk-gold-gradient) !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.2) !important;
}

.btn-success:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(245, 166, 35, 0.4) !important;
    filter: brightness(1.1) !important;
}

/* Specific button styles for Tool Views */
.btn-topup, .btn-search-filter-apply, .btn-top-up-now {
    background: var(--tk-gold-gradient) !important;
}

/* Ensure secondary buttons (like 'Actions') are clearly visible */
.btn-light-secondary, .btn-outline-secondary {
    border: 1px solid var(--tk-gold-text) !important; /* Brighter border for Actions button */
    color: #ffffff !important;
    background-color: rgba(245, 166, 35, 0.05) !important;
}

.btn-light-secondary:hover {
    background-color: var(--tk-gold-text) !important;
    color: #000000 !important;
}

/* Specific Card Headers for Binance-style components */
.bnc-card-header, .fmi-result-header, .simlock-result-header {
    background: var(--tk-card-bg) !important;
    border-bottom: 1px solid var(--tk-border-color) !important;
}

.bnc-crypto-card, .fmi-modal-content, .simlock-modal-content {
    background-color: var(--tk-card-bg) !important;
}

/* Select2 Dropdown in Dark Mode */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tk-gold-text) !important;
    color: #000 !important;
}

/* 18. Phase 3: Premium Badge & Table Polish */
.badge {
    padding: 6px 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bg-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.bg-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.bg-warning {
    background: rgba(245, 166, 35, 0.1) !important;
    color: var(--tk-gold-text) !important;
    border-color: rgba(245, 166, 35, 0.3) !important;
}

.bg-info {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.bg-muted, .bg-secondary {
    background: rgba(156, 163, 175, 0.1) !important;
    color: #9ca3af !important;
    border-color: rgba(156, 163, 175, 0.3) !important;
}

/* Table Reinforcement */
.table {
    border-color: var(--tk-border-color) !important;
    color: var(--tk-gold-text) !important;
}

.table thead th {
    background-color: rgba(245, 166, 35, 0.05) !important;
    border-bottom: 2px solid var(--tk-border-color) !important;
    color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(245, 166, 35, 0.05) !important;
}

/* Ensure no white flashing on page load */
html, body {
    background-color: var(--tk-dark-bg) !important;
}