/* Tesla Design System - Ultimate Dark Mode */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    /* Tesla/Cyberpunk Palette */
    --tesla-red: #E82127;
    --tesla-red-glow: rgba(232, 33, 39, 0.6);
    --tesla-black: #050505;
    --tesla-charcoal: #121212;
    --tesla-gray: #1E1E1E;
    --tesla-silver: #E0E0E0;
    
    /* Text Colors - High Contrast */
    --text-white: #FFFFFF;
    --text-off-white: #F5F5F5;
    --text-gray: #A0A0A0;
    
    /* UI Elements */
    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}

/* 1. Global Reset for Dark Mode */
body, html, .dashboard-main, .dashboard-body-part, .dashboard-section, #main {
    background-color: var(--tesla-black) !important;
    background-image: 
        radial-gradient(circle at 50% 0%, #1a1a1a 0%, #000000 70%),
        linear-gradient(0deg, #050505 0%, #0a0a0a 100%);
    color: var(--text-white) !important;
    font-family: 'Exo 2', 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh !important;
}

/* 2. Forcing Text Contrast (Aggressive Overrides) */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .title, .caption-title,
.dashboard-body-part strong,
.dashboard-body-part b {
    color: var(--text-white) !important;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

p, span, div, li, a {
    color: var(--text-off-white);
}

.text-muted, .text-small, small {
    color: var(--text-gray) !important;
}

/* Fix specific blue text issue from screenshot */
.d-box-three h5, 
.d-box-three .title,
.d-box-three .amount,
.d-card h3,
.user-account-number h3 {
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* stronger glow */
}

.acc-number, .user-account-number .acc-number {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Force override of default theme gradients that are causing white/colored backgrounds */
.gr-bg-1, .gr-bg-2, .gr-bg-3, .gr-bg-4, .gr-bg-5, .gr-bg-6, .gr-bg-7, .gr-bg-8 {
    background: var(--glass-bg) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
}

/* 3. Tesla Card Design */
.d-card, 
.site-card, 
.card,
.d-box-two, 
.d-box-three,
.user-account-number {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--card-shadow) !important;
    border-radius: 4px !important; /* Cybertruck angular style */
    transition: all 0.3s ease;
}

.d-card:hover, .d-box-two:hover, .d-box-three:hover {
    border-color: var(--tesla-red) !important;
    box-shadow: 0 0 20px rgba(232, 33, 39, 0.2) !important;
    transform: translateY(-5px);
}

/* Widget Interiors */
.d-box-three {
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%) !important;
}

.d-box-three .icon {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--tesla-red) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    border-radius: 4px !important;
}

.d-box-three .icon i {
    color: var(--tesla-red) !important;
    filter: drop-shadow(0 0 5px var(--tesla-red));
}

/* 4. Account Balance - Hero Section */
.user-account-number {
    background: linear-gradient(90deg, #101010 0%, #151515 100%) !important;
    border-left: 3px solid var(--tesla-red) !important;
    position: relative;
    overflow: hidden;
}

.user-account-number::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232, 33, 39, 0.05), transparent);
    transform: skewX(-20deg) translateX(-150%);
    animation: shine 6s infinite;
}

@keyframes shine {
    0% { transform: skewX(-20deg) translateX(-150%); }
    20% { transform: skewX(-20deg) translateX(150%); }
    100% { transform: skewX(-20deg) translateX(150%); }
}

/* 5. Buttons & Interactive */
.btn-primary, .cmn-btn {
    background-color: var(--tesla-red) !important;
    border-color: var(--tesla-red) !important;
    color: white !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(232, 33, 39, 0.3);
}

.btn-primary:hover, .cmn-btn:hover {
    background-color: #ff2b32 !important;
    box-shadow: 0 0 25px rgba(232, 33, 39, 0.6);
}

/* 6. Sidebar & Nav */
.user-sidebar, .sidebar-menu {
    background-color: #080808 !important;
    border-right: 1px solid #222 !important;
}

.sidebar-menu li a {
    color: #888 !important;
    border-left: 3px solid transparent;
}

.sidebar-menu li a:hover, 
.sidebar-menu li a.active {
    background: rgba(255, 255, 255, 0.03) !important;
    color: white !important;
    border-left: 3px solid var(--tesla-red);
}

.header {
    background-color: rgba(5, 5, 5, 0.9) !important;
    border-bottom: 1px solid #222 !important;
}

/* 7. Forms & Inputs */
.form-control {
    background: rgba(30, 30, 30, 0.5) !important;
    border: 1px solid #333 !important;
    color: white !important;
    border-radius: 2px !important;
}

.form-control:focus {
    border-color: var(--tesla-red) !important;
    box-shadow: 0 0 10px rgba(232, 33, 39, 0.2) !important;
}

/* 8. Text Utilities Overrides (Crucial for screenshot fix) */
.text-white { color: #ffffff !important; }
.text-dark { color: #ffffff !important; }
.text-primary { color: var(--tesla-red) !important; }
.text-secondary { color: #aaaaaa !important; }

/* 9. Background Image Injection (if generated) */
body.tesla-bg {
    background-image: url('../../images/tesla_bg_dark.webp') !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Mobile Bottom Menu Overrides - High Contrast Black & White */
.mobile-bottom-menu-wrapper {
    background-color: #000000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 0 !important;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.5) !important;
    display: block !important;
}

.mobile-bottom-menu {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mobile-bottom-menu li a {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.mobile-bottom-menu li a i {
    font-size: 1.5rem !important;
    margin-bottom: 2px !important;
    display: block !important;
}

.mobile-bottom-menu li a span {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    color: #ffffff !important;
}

.mobile-bottom-menu li a.active {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mobile-bottom-menu li a.active i {
    background: #ffffff !important;
    color: #000000 !important;
    width: 50px !important;
    height: 50px !important;
    border: 5px solid #000000 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    margin-top: -30px !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 15px rgba(255,255,255,0.2) !important;
}

.mobile-bottom-menu li a.active i::after {
    display: none !important;
}

.mobile-bottom-menu li a.active span {
    font-weight: 700 !important;
    margin-top: 2px !important;
}

/* 10. Extended Component Overrides (Fixing White on White) */
.payment-box,
.plan-item,
.site-card,
.card,
.modal-content,
.d-card,
.d-box-one,
.d-box-two,
.d-box-three,
.user-account-number {
    background-color: var(--tesla-charcoal) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-white) !important;
    box-shadow: var(--card-shadow) !important;
}

.card-header,
.modal-header,
.card-footer,
.modal-footer {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-white) !important;
}

.card-body,
.modal-body {
    background: transparent !important;
    color: var(--text-off-white) !important;
}

/* Form Elements - Aggressive Dark Mode */
.form-control,
.select,
.selectric,
.selectric .label,
.selectric .button,
.selectric-items,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

.form-control::placeholder {
    color: #666 !important;
    opacity: 1;
}

.form-control:focus {
    border-color: var(--tesla-red) !important;
    box-shadow: 0 0 8px var(--tesla-red-glow) !important;
}

/* Selectric & Dropdown Fixes */
.selectric-items {
    background: #111 !important;
    border: 1px solid #333 !important;
}

.selectric-items li {
    color: #eee !important;
}

.selectric-items li:hover {
    background: var(--tesla-red) !important;
    color: #fff !important;
}

/* List Groups & Tables */
.list-group-item {
    background-color: transparent !important;
    border-color: var(--glass-border) !important;
    color: var(--text-off-white) !important;
}

.table, .site-table {
    background-color: transparent !important;
    color: var(--text-off-white) !important;
}

.table thead th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--tesla-red) !important;
    border-bottom: 2px solid var(--tesla-red) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Specific Fixes for Screenshots */
.payment-box-thumb {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}

.plan-name-area {
    border-bottom: 1px solid var(--glass-border) !important;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.plan-list li {
    border-bottom: 1px dotted rgba(255,255,255,0.1) !important;
    padding: 8px 0 !important;
}

.plan-list li .caption {
    color: var(--text-gray) !important;
}

.plan-list li .details {
    color: var(--text-white) !important;
    font-weight: 600;
}

/* Transfer/Withdraw Charge display */
#totalAmount, .sp_text_secondary {
    color: var(--tesla-red) !important;
    font-weight: 600;
}