/* ===== DARK MODE - TailAdmin Inspired ===== */
body.dark-mode {
    --light: #F9FAFB;
    --white: #1A2231;
    --dark: #F9FAFB;
    --dark-light: #1A2231;
    --gray: #98A2B3;
    --primary: #465FFF;
    --primary-dark: #2A31D8;
    --primary-light: #7592FF;
    --secondary: #7A5AF8;
    --accent: #EE46BC;
    color: #F9FAFB;
    background: #101828;
}

/* Sidebar Dark Mode */
body.dark-mode .sidebar {
    background: #1A2231;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .nav-logo {
    color: #F9FAFB;
}

/* Topbar Dark Mode */
body.dark-mode .topbar {
    background: rgba(26, 34, 49, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Main Content Dark Mode */
body.dark-mode .main-content {
    background: #101828;
}

body.dark-mode .content-wrapper {
    background: transparent;
}

/* Cards & Stats Dark Mode */
body.dark-mode .card,
body.dark-mode .stat-card {
    background: #1A2231;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

body.dark-mode .card:hover,
body.dark-mode .stat-card:hover {
    background: #1D2939;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .stat-icon {
    background: rgba(255, 255, 255, 0.05);
}

/* Navigation Dark Mode */
body.dark-mode .nav-item {
    color: #98A2B3;
}

body.dark-mode .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #F9FAFB;
}

body.dark-mode .nav-item.active {
    background: rgba(70, 95, 255, 0.12);
    color: #7592FF;
}

/* Forms Dark Mode */
body.dark-mode .form-control {
    background: #101828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F9FAFB;
}

body.dark-mode .form-control:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .form-control:focus {
    background: #101828;
    border-color: #465FFF;
    box-shadow: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
}

body.dark-mode .form-control::placeholder {
    color: #667085;
}

/* Buttons Dark Mode */
body.dark-mode .btn-primary {
    background: #465FFF;
    border: none;
    color: white;
}

body.dark-mode .btn-primary:hover {
    background: #3641F5;
}

body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F9FAFB;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Text & Headings Dark Mode */
body.dark-mode .gradient-text {
    background: linear-gradient(135deg, #7592FF 0%, #9CB9FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .page-title {
    color: rgba(255, 255, 255, 0.9);
}

/* Tables Dark Mode */
body.dark-mode .custom-table {
    background: transparent;
}

body.dark-mode .custom-table th {
    background: rgba(255, 255, 255, 0.03);
    color: #98A2B3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .custom-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #D0D5DD;
}

body.dark-mode .custom-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Badges Dark Mode */
body.dark-mode .status-badge.pending,
body.dark-mode .transaction-type.debit {
    background: rgba(251, 191, 36, 0.1);
    color: #FDB022;
}

body.dark-mode .status-badge.approved,
body.dark-mode .status-badge.active,
body.dark-mode .transaction-type.credit {
    background: rgba(18, 183, 106, 0.1);
    color: #12B76A;
}

body.dark-mode .status-badge.rejected,
body.dark-mode .status-badge.cancelled {
    background: rgba(240, 68, 56, 0.1);
    color: #F04438;
}

body.dark-mode .status-badge.completed {
    background: rgba(70, 95, 255, 0.12);
    color: #7592FF;
}

/* Auth Card Dark Mode */
body.dark-mode .auth-card {
    background: #1A2231;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glass Effect Dark Mode */
body.dark-mode .glass {
    background: rgba(26, 34, 49, 0.8);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.05);
}

/* User Info Sidebar Dark Mode */
body.dark-mode .user-info-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .user-name {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .user-role {
    color: #98A2B3;
}

/* Scrollbar Dark Mode */
body.dark-mode ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #344054;
    border-radius: 3px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475467;
}

/* Table Card Dark Mode */
body.dark-mode .table-card {
    background: #1A2231;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

body.dark-mode .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Stats Grid Dark Mode */
body.dark-mode .stats-grid .stat-card {
    background: #1A2231;
}

/* Page Header Dark Mode */
body.dark-mode .page-header {
    color: #F9FAFB;
}

body.dark-mode .page-title p {
    color: #98A2B3;
}

/* Logout Button Dark Mode */
body.dark-mode .btn-secondary[onclick="logout()"] {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #F04438 !important;
}

body.dark-mode .btn-secondary[onclick="logout()"]:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ===== Welcome Page Dark Mode ===== */

/* Header Dark Mode */
body.dark-mode .header {
    background: rgba(26, 34, 49, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .header.scrolled {
    background: rgba(16, 24, 40, 0.98);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Hero Section Dark Mode */
body.dark-mode .hero {
    background: #101828;
}

body.dark-mode .hero-bg {
    opacity: 0.3;
}

body.dark-mode .hero-title {
    color: #F9FAFB;
}

body.dark-mode .hero-subtitle {
    color: #98A2B3;
}

/* Theme Toggle Button Dark Mode */
body.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    color: #F9FAFB;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #F9FAFB;
}

/* Footer Dark Mode */
body.dark-mode .footer {
    background: #1A2231;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .footer p {
    color: #98A2B3;
}

body.dark-mode .footer a {
    color: #98A2B3;
}

body.dark-mode .footer a:hover {
    color: #F9FAFB;
}

/* Sections Dark Mode */
body.dark-mode section {
    background: #101828;
}

body.dark-mode section[style*="background: var(--white)"] {
    background: #1A2231 !important;
}

/* Cards Dark Mode */
body.dark-mode .card {
    background: #1A2231;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .card h3 {
    color: #F9FAFB;
}

body.dark-mode .card p {
    color: #98A2B3;
}

/* Partners Strip Dark Mode */
body.dark-mode .partners-strip {
    background: rgba(26, 34, 49, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .partner-logo {
    color: #98A2B3;
}

/* ROI Calculator Dark Mode */
body.dark-mode .roi-calculator {
    background: #1A2231;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .roi-calculator .form-label {
    color: #F9FAFB;
}

body.dark-mode .roi-calculator .form-label span {
    color: #F9FAFB;
}

body.dark-mode .roi-calculator #budgetDisplay {
    color: #7592FF !important;
}

body.dark-mode .roi-calculator [style*="border-top"] {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .roi-calculator [style*="background: var(--light)"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .roi-calculator [style*="color: var(--dark)"] {
    color: #F9FAFB !important;
}

body.dark-mode .roi-calculator [style*="color: var(--gray)"] {
    color: #98A2B3 !important;
}

body.dark-mode .range-slider {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .range-slider::-webkit-slider-thumb {
    background: #465FFF;
    border: 2px solid #1A2231;
    box-shadow: 0 2px 4px rgba(70, 95, 255, 0.3);
}

body.dark-mode .range-slider::-moz-range-thumb {
    background: #465FFF;
    border: 2px solid #1A2231;
    box-shadow: 0 2px 4px rgba(70, 95, 255, 0.3);
}

body.dark-mode .range-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
}

body.dark-mode .range-slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
}

/* Testimonials Section Dark Mode */
body.dark-mode section#testimonials {
    background: #101828 !important;
}

body.dark-mode section#testimonials[style*="background: var(--light)"] {
    background: #101828 !important;
}

body.dark-mode section#testimonials h2 {
    color: #F9FAFB !important;
}

body.dark-mode section#testimonials h4 {
    color: #F9FAFB !important;
}

body.dark-mode section#testimonials .card.glass {
    background: #1A2231 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode section#testimonials .card p {
    color: #98A2B3 !important;
}

body.dark-mode section#testimonials .card span {
    color: #7592FF !important;
}

body.dark-mode section#testimonials .card span[style*="color: var(--primary)"] {
    color: #7592FF !important;
}

body.dark-mode section#testimonials .card [style*="background: #ddd"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* More specific ROI Calculator fixes for inline styles */
body.dark-mode .roi-calculator div[style*="background"] {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .roi-calculator div[style*="color: var(--dark)"] {
    color: #F9FAFB !important;
}

body.dark-mode .roi-calculator div[style*="color: var(--gray)"] {
    color: #98A2B3 !important;
}

/* Testimonials Section Dark Mode */
body.dark-mode section#testimonials {
    background: #101828 !important;
}

body.dark-mode section#testimonials[style*="background: var(--light)"] {
    background: #101828 !important;
}

body.dark-mode section#testimonials h2 {
    color: #F9FAFB !important;
}

body.dark-mode section#testimonials h4 {
    color: #F9FAFB !important;
}

body.dark-mode section#testimonials .card.glass {
    background: #1A2231 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode section#testimonials .card p {
    color: #98A2B3 !important;
}

body.dark-mode section#testimonials .card span[style*="color: var(--primary)"] {
    color: #7592FF !important;
}

body.dark-mode section#testimonials .card [style*="background: #ddd"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .range-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .range-slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.1);
}

/* ROI Calculator - Direct Element Fixes */
body.dark-mode .roi-calculator #reachResult,
body.dark-mode .roi-calculator #clicksResult {
    color: #F9FAFB !important;
}

body.dark-mode .roi-calculator .text-center.p-4 {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .roi-calculator .text-center.p-4 div[style*="color: var(--gray)"] {
    color: #98A2B3 !important;
}

body.dark-mode .roi-calculator div[style*="border-top: 1px solid"] {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Info Sections Dark Mode */
body.dark-mode .info-section {
    background: #1A2231;
}

body.dark-mode .info-section-title {
    color: #F9FAFB;
}

body.dark-mode .info-section-text p {
    color: #98A2B3;
}

/* About Section Dark Mode */
body.dark-mode .about-section {
    background: #1A2231;
}

/* CTA Section Dark Mode */
body.dark-mode .cta-section {
    background: linear-gradient(135deg, #1A2231 0%, #101828 100%);
}

body.dark-mode .cta-section h2 {
    color: #F9FAFB;
}

body.dark-mode .cta-section p {
    color: #98A2B3;
}

/* Testimonials Section Dark Mode */
body.dark-mode section[id="testimonials"] {
    background: #101828 !important;
}

body.dark-mode section[id="testimonials"] h2 {
    color: #F9FAFB;
}

body.dark-mode section[id="testimonials"] p {
    color: #98A2B3;
}

body.dark-mode section[id="testimonials"] .card.glass {
    background: #1A2231 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode section[id="testimonials"] .card h4 {
    color: #F9FAFB !important;
}

body.dark-mode section[id="testimonials"] .card span[style*="color: var(--primary)"] {
    color: #7592FF !important;
}

body.dark-mode section[id="testimonials"] .card p {
    color: #98A2B3 !important;
}