/* Dark Mode Styles for Tik Alert - Red Theme */

/* The shared document head pins this for controls and native browser UI too. */
:root[data-theme="dark"] { color-scheme: dark; }

/* Mandatory light admin chrome. The file name stays stable for existing MVC
   layouts; the public Angular website has a separate dark-only theme. */
:root[data-theme="light"] { color-scheme: only light; }
[data-theme="light"] body { background: #f4f6fa; color: #182033; margin-bottom: 0; }
[data-theme="light"] :is(.main-wrapper, .main-wrapper-full, .content-area) { background: #f4f6fa; }
[data-theme="light"] .top-header { background: #fff; border-bottom: 1px solid #dce2eb; }
[data-theme="light"] .page-title { color: #182033; }
[data-theme="light"] .sidebar { background: #fff; border-left: 1px solid #dce2eb; box-shadow: -4px 0 20px #18203308; }
[data-theme="light"] .sidebar-brand { background: #fff; border-bottom-color: #dce2eb; }
[data-theme="light"] .sidebar-brand-text { color: #182033; }
[data-theme="light"] .sidebar-link { color: #465267; }
[data-theme="light"] .sidebar-link:hover { background: #fff0f3; color: #a91030; }
[data-theme="light"] .sidebar-link.active { background: linear-gradient(115deg, #c8183c, #ae1432); color: #fff; }
[data-theme="light"] :is(.sidebar-menu-title, .sidebar-group > summary, .sidebar-group.has-active > summary) { color: #596579; }
[data-theme="light"] .sidebar-group > summary:hover { color: #a91030; }
[data-theme="light"] .sidebar::-webkit-scrollbar-track { background: #f4f6fa; }

[data-theme="light"] .login-page {
    background: radial-gradient(ellipse at 50% 0%, #fde8ed, #f4f6fa 65%);
    color: #182033;
    min-height: 100vh;
    min-height: 100svh;
    padding: 32px 0;
    overflow: clip;
}
[data-theme="light"] .login-page::before,
[data-theme="light"] .login-page .floating-shape { display: none; }
[data-theme="light"] .login-page .login-container { max-width: 500px; padding: 20px; }
[data-theme="light"] .login-page .login-card { background: #fff; color: #182033; border: 1px solid #dce2eb; border-radius: 24px; box-shadow: 0 24px 80px #18203312; backdrop-filter: none; }
[data-theme="light"] .login-page .login-header { background: #fff8fa; padding: 30px 28px 25px; border-bottom: 1px solid #eadde2; }
[data-theme="light"] .login-page .login-header::after { display: none; }
[data-theme="light"] .login-page .login-logo { width: 64px; height: 64px; margin-bottom: 14px; border-radius: 18px; background: #ffe8ed; border: 1px solid #f2baca; box-shadow: none; }
[data-theme="light"] .login-page .login-logo i { color: #b71530; font-size: 1.8rem; }
[data-theme="light"] .login-page .login-title { color: #182033; font-size: 1.75rem; text-shadow: none; }
[data-theme="light"] .login-page .login-subtitle { color: #596579; margin: 8px 0 0; }
[data-theme="light"] .login-page .login-body { padding: 30px 32px; }
[data-theme="light"] .login-page .form-group { margin-bottom: 22px; }
[data-theme="light"] .login-page .form-group label { color: #182033; margin-bottom: 10px; font-weight: 700; }
[data-theme="light"] .login-page .form-group label i { color: #b71530; }
[data-theme="light"] .login-page .form-group input { background: #fff; color: #182033; -webkit-text-fill-color: #182033; caret-color: #182033; border: 1px solid #7c889b; min-height: 54px; padding: 13px 16px; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; }
[data-theme="light"] .login-page .form-group input::placeholder { color: #596579; -webkit-text-fill-color: #596579; opacity: 1; }
[data-theme="light"] .login-page .form-group input:focus { background: #fff; border-color: #b71530; outline: 2px solid #b71530; outline-offset: 3px; box-shadow: none !important; }
[data-theme="light"] .login-page .form-group input:-webkit-autofill { -webkit-text-fill-color: #182033 !important; box-shadow: 0 0 0 1000px #fff inset !important; }
[data-theme="light"] .login-page .login-btn { background: linear-gradient(115deg, #c8183c, #ae1432); color: #fff; padding: 14px 18px; min-height: 54px; box-shadow: 0 8px 22px #e3183720; }
[data-theme="light"] .login-page :is(.login-btn, .resend-btn):focus-visible { outline: 2px solid #b71530; outline-offset: 4px; }
[data-theme="light"] .login-page .login-footer { padding: 20px 24px; border-top: 1px solid #dce2eb; }
[data-theme="light"] .login-page .login-footer p { color: #596579; line-height: 1.8; }
[data-theme="light"] .login-page .login-footer p i { color: #b71530; }
[data-theme="light"] .login-page :is(.text-danger, .field-validation-error, .countdown) { color: #ac1632 !important; }
[data-theme="light"] .login-page :is(.validation-summary-errors, .otp-error) { background: #fff0f3; color: #ac1632; border: 1px solid #dc8b9c; line-height: 1.9; }
[data-theme="light"] .login-page .otp-message { background: #edf9f3; color: #146342; border-color: #6ca98e; line-height: 1.9; }
[data-theme="light"] .login-page .otp-section .login-btn { background: linear-gradient(115deg, #176349, #12533d) !important; }
[data-theme="light"] .login-page .resend-btn { color: #ac1632; min-height: 44px; }
[data-theme="light"] .login-page .resend-btn:disabled { color: #596579; }
[data-theme="light"] .error-container { color: #182033; }
[data-theme="light"] .error-message { color: #596579; }
[data-theme="light"] .error-container .btn-outline-light { color: #465267; border-color: #7c889b; }
[data-theme="light"] .error-container .btn-outline-light:hover { background: #e5eaf2; color: #182033; }
@media (max-width: 576px) {
    [data-theme="light"] .login-page { padding: 16px 0; }
    [data-theme="light"] .login-page .login-container { padding: 12px; }
    [data-theme="light"] .login-page .login-card { border-radius: 20px; }
    [data-theme="light"] .login-page .login-header { padding: 24px 20px; }
    [data-theme="light"] .login-page .login-body { padding: 26px 22px; }
    [data-theme="light"] .login-page .login-footer { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="light"] .login-page *,
    [data-theme="light"] .login-page *::before,
    [data-theme="light"] .login-page *::after { animation: none !important; transition: none !important; }
    [data-theme="light"] .login-page .login-btn:hover { transform: none; }
}

/* Account/Login owns its inline light-era labels and OTP styles. Scope the
   complete dark surface here so those rules cannot leave dark text on dark
   cards. Keep merchant login, the admin shell and printed invoices untouched. */
[data-theme="dark"] body:has(.login-page) { margin-bottom: 0; }

[data-theme="dark"] .login-page {
    background: radial-gradient(ellipse at 50% 15%, #29141e 0%, #11131c 46%, #090c12 100%);
    color: #edf1f9;
    min-height: 100vh;
    min-height: 100svh;
    padding: 32px 0;
    overflow: clip;
}

[data-theme="dark"] .login-page::before,
[data-theme="dark"] .login-page .floating-shape {
    display: none;
}

[data-theme="dark"] .login-page .login-container { max-width: 500px; padding: 20px; }

[data-theme="dark"] .login-page .login-card {
    background: #171c27 !important;
    color: #edf1f9;
    border: 1px solid #384152;
    border-radius: 24px;
    box-shadow: 0 24px 80px #0006;
    backdrop-filter: none;
}

[data-theme="dark"] .login-page .login-header {
    background: radial-gradient(ellipse at 50% 0%, #3a1926, #191d28 78%);
    border-bottom: 1px solid #384152;
    padding: 30px 28px 25px;
}

[data-theme="dark"] .login-page .login-header::after { display: none; }

[data-theme="dark"] .login-page .login-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 18px;
    border: 1px solid #864255;
    background: #442030;
    box-shadow: 0 8px 28px #e3183720;
}

[data-theme="dark"] .login-page .login-logo i { color: #ffafbe; font-size: 1.8rem; }
[data-theme="dark"] .login-page .login-title { color: #ffffff; font-size: 1.75rem; text-shadow: none; }
[data-theme="dark"] .login-page .login-subtitle { color: #c7cfde; margin: 8px 0 0; }
[data-theme="dark"] .login-page .login-body { padding: 30px 32px; }
[data-theme="dark"] .login-page .form-group { margin-bottom: 22px; }
[data-theme="dark"] .login-page .form-group label { color: #edf1f9; margin-bottom: 10px; font-weight: 700; }
[data-theme="dark"] .login-page .form-group label i { color: #ffa8b8; }

[data-theme="dark"] .login-page .form-group input {
    background: #101620 !important;
    color: #f5f7fc !important;
    -webkit-text-fill-color: #f5f7fc;
    caret-color: #ffffff;
    border: 1px solid #748198 !important;
    min-height: 54px;
    padding: 13px 16px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

[data-theme="dark"] .login-page .form-group input::placeholder {
    color: #acb7ca !important;
    -webkit-text-fill-color: #acb7ca;
    opacity: 1;
}

[data-theme="dark"] .login-page .form-group input:focus {
    background: #101620 !important;
    border-color: #ffa8b8 !important;
    outline: 2px solid #ffa8b8;
    outline-offset: 3px;
    box-shadow: none !important;
}

[data-theme="dark"] .login-page .form-group input:-webkit-autofill {
    -webkit-text-fill-color: #f5f7fc !important;
    box-shadow: 0 0 0 1000px #101620 inset !important;
}

[data-theme="dark"] .login-page .login-btn {
    background: linear-gradient(115deg, #c8183c, #ae1432);
    color: #ffffff;
    padding: 14px 18px;
    min-height: 54px;
    box-shadow: 0 8px 22px #e3183726;
    transition: background .18s ease, transform .18s ease;
}

[data-theme="dark"] .login-page .login-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px #e3183733; }
[data-theme="dark"] .login-page :is(.login-btn, .resend-btn):focus-visible { outline: 2px solid #ffa8b8; outline-offset: 4px; }
[data-theme="dark"] .login-page .login-footer { padding: 20px 24px; border-top: 1px solid #384152; }
[data-theme="dark"] .login-page .login-footer p { color: #c7cfde; line-height: 1.8; }
[data-theme="dark"] .login-page .login-footer p i { color: #ffa8b8; }

[data-theme="dark"] .login-page :is(.text-danger, .field-validation-error, .countdown) { color: #ffafbe !important; }
[data-theme="dark"] .login-page :is(.validation-summary-errors, .otp-error) {
    background: #351d28;
    color: #ffbeca !important;
    border: 1px solid #b1697b;
    line-height: 1.9;
}
[data-theme="dark"] .login-page .otp-message { background: #142e29; color: #a6f1d2; border-color: #4b9e80; line-height: 1.9; }
[data-theme="dark"] .login-page .otp-section .login-btn { background: linear-gradient(115deg, #176349, #12533d) !important; box-shadow: 0 8px 22px #10b9811a !important; }
[data-theme="dark"] .login-page .resend-btn { color: #ffafbe; min-height: 44px; }
[data-theme="dark"] .login-page .resend-btn:disabled { color: #aab5c8; }

@media (max-width: 576px) {
    [data-theme="dark"] .login-page { padding: 16px 0; }
    [data-theme="dark"] .login-page .login-container { padding: 12px; }
    [data-theme="dark"] .login-page .login-card { border-radius: 20px; }
    [data-theme="dark"] .login-page .login-header { padding: 24px 20px; }
    [data-theme="dark"] .login-page .login-body { padding: 26px 22px; }
    [data-theme="dark"] .login-page .login-footer { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] .login-page *,
    [data-theme="dark"] .login-page *::before,
    [data-theme="dark"] .login-page *::after { animation: none !important; transition: none !important; }
    [data-theme="dark"] .login-page .login-btn:hover { transform: none; }
}

/* Standalone merchant login and invoice preview use custom surfaces rather
   than Bootstrap cards. This sheet is loaded for screen media only, so the
   existing white paper invoice remains unchanged when printed. */
[data-theme="dark"] .login-card,
[data-theme="dark"] .login-header .logo {
    background: #1e293b !important;
    color: #f1f5f9;
}

[data-theme="dark"] .advertiser-site :is(.header, .stats-card) {
    background: #1e293b !important;
    color: #f1f5f9;
    border-color: #475569;
}

[data-theme="dark"] .invoice-page :is(.invoice, .party, .cs-modal, .issuer-pick,
    .btn-back, .btn-edit, .btn-settings, .cs-tab, .cs-cancel, .cs-field input,
    .cs-field textarea, .pay-strip, .svc-table thead th, .svc-desc .msg) {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

[data-theme="dark"] .invoice-page :is(.issuer-pick select, .cs-field label,
    .cs-default, .party .row, .svc-desc .sub, .totals .line, .pay-strip .cell .v,
    .inv-foot .note, .inv-foot .contact, .inv-foot .thanks) {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .invoice-page .parties { background: #475569; }
[data-theme="dark"] .invoice-page :is(.status-paid, .status-other, .edit-hint) {
    background: #172b29;
    color: #a7f3d0;
    border-color: #3d6357;
}
[data-theme="dark"] .invoice-page :is(.status-other, .edit-hint) {
    background: #332a1a;
    color: #fde68a;
    border-color: #756037;
}
[data-theme="dark"] .invoice-page :is(.cs-tab.active, .btn-edit.active) {
    background: #37306a !important;
    color: #e0e7ff !important;
    border-color: #818cf8 !important;
}

/* Dark Mode Variables - Only applied when dark theme is active */
:root[data-theme="dark"],
.dark-mode {
    /* Red theme primary colors */
    --primary-color: #E31837;
    --primary-dark: #B71530;
    --primary-light: #FF3D5A;
    --secondary-color: #1a1a2e;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #E31837; /* Changed from blue to red */

    /* Dark Theme Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;

    /* Dark Theme Text Colors - HIGH CONTRAST */
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e1;
    --text-inverse: #0f172a;
    --text-dark: #ffffff;

    /* Dark Theme Border Colors */
    --border-color: #475569;
    --border-light: #64748b;
    --border-focus: #E31837;

    /* Red theme gradients for dark mode */
    --gradient-primary: linear-gradient(135deg, #E31837 0%, #B71530 100%);
    --gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #E31837 0%, #B71530 100%); /* Red instead of blue */
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    /* Enhanced shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

    /* Glass effect for dark mode */
    --glass-bg: rgba(30, 41, 59, 0.95);
    --glass-border: rgba(148, 163, 184, 0.2);
}

/* ==================== BODY STYLES ==================== */
[data-theme="dark"] body,
.dark-mode body {
    background: var(--gradient-dark) !important;
    color: var(--text-primary) !important;
}

.dark-mode {
    background: #0f0f1a !important;
}

/* ==================== MAIN WRAPPER & CONTENT ==================== */
.dark-mode .main-wrapper,
.dark-mode .main-wrapper-full,
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .main-wrapper-full {
    background: #0f0f1a !important;
}

.dark-mode .content-area,
[data-theme="dark"] .content-area {
    background: #0f0f1a !important;
}

/* ==================== TOP HEADER ==================== */
.dark-mode .top-header,
[data-theme="dark"] .top-header {
    background: #1a1a2e !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .page-title,
[data-theme="dark"] .page-title {
    color: #ffffff !important;
}

.dark-mode .header-btn,
[data-theme="dark"] .header-btn {
    color: #ffffff !important;
}

.dark-mode .header-btn:hover,
[data-theme="dark"] .header-btn:hover {
    background: rgba(227, 24, 55, 0.2) !important;
    color: var(--primary-color) !important;
}

/* ==================== SIDEBAR ==================== */
.dark-mode .sidebar,
[data-theme="dark"] .sidebar {
    background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .sidebar-brand,
[data-theme="dark"] .sidebar-brand {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .sidebar-link,
[data-theme="dark"] .sidebar-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .sidebar-link:hover,
[data-theme="dark"] .sidebar-link:hover {
    color: #ffffff !important;
    background: rgba(227, 24, 55, 0.15) !important;
}

.dark-mode .sidebar-link.active,
[data-theme="dark"] .sidebar-link.active {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

/* ==================== CARDS ==================== */
.dark-mode .card,
[data-theme="dark"] .card {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.dark-mode .card:hover,
[data-theme="dark"] .card:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(227, 24, 55, 0.3) !important;
}

.dark-mode .card-header,
[data-theme="dark"] .card-header {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

.dark-mode .card-body,
[data-theme="dark"] .card-body {
    background: transparent !important;
    color: #ffffff !important;
}

/* ==================== TEXT COLORS - HIGH CONTRAST ==================== */
.dark-mode .text-dark,
[data-theme="dark"] .text-dark {
    color: #ffffff !important;
}

.dark-mode .text-muted,
[data-theme="dark"] .text-muted {
    color: #cbd5e1 !important;
}

.dark-mode .text-secondary,
[data-theme="dark"] .text-secondary {
    color: #e2e8f0 !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #ffffff !important;
}

.dark-mode p,
[data-theme="dark"] p {
    color: #e2e8f0 !important;
}

.dark-mode small,
[data-theme="dark"] small {
    color: #cbd5e1 !important;
}

/* ==================== DASHBOARD STATS CARDS ==================== */
.dark-mode .stats-card,
[data-theme="dark"] .stats-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .stats-card:hover,
[data-theme="dark"] .stats-card:hover {
    border-color: rgba(227, 24, 55, 0.4) !important;
    box-shadow: 0 8px 25px rgba(227, 24, 55, 0.2) !important;
}

.dark-mode .stats-card .h3,
.dark-mode .stats-card .h4,
[data-theme="dark"] .stats-card .h3,
[data-theme="dark"] .stats-card .h4 {
    color: #ffffff !important;
}

.dark-mode .stats-card .text-muted,
[data-theme="dark"] .stats-card .text-muted {
    color: #94a3b8 !important;
}

/* ==================== FINANCIAL CARDS ==================== */
.dark-mode .financial-card,
[data-theme="dark"] .financial-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .financial-card h6,
[data-theme="dark"] .financial-card h6 {
    color: #ffffff !important;
}

.dark-mode .financial-card p,
[data-theme="dark"] .financial-card p {
    color: #cbd5e1 !important;
}

/* ==================== PERFORMANCE CARDS ==================== */
.dark-mode .performance-card,
[data-theme="dark"] .performance-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .performance-card h5,
[data-theme="dark"] .performance-card h5 {
    color: #ffffff !important;
}

/* ==================== STAT ITEMS ==================== */
.dark-mode .stat-item,
[data-theme="dark"] .stat-item {
    background: rgba(51, 65, 85, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .stat-item:hover,
[data-theme="dark"] .stat-item:hover {
    border-color: rgba(227, 24, 55, 0.4) !important;
}

.dark-mode .stat-item .stat-label,
[data-theme="dark"] .stat-item .stat-label {
    color: #cbd5e1 !important;
}

.dark-mode .stat-item .stat-value,
[data-theme="dark"] .stat-item .stat-value {
    color: #ffffff !important;
}

/* Override Bootstrap color classes in dark mode */
.dark-mode .stat-value.text-primary,
[data-theme="dark"] .stat-value.text-primary {
    color: var(--primary-color) !important;
}

.dark-mode .stat-value.text-success,
[data-theme="dark"] .stat-value.text-success {
    color: #34d399 !important;
}

.dark-mode .stat-value.text-warning,
[data-theme="dark"] .stat-value.text-warning {
    color: #fbbf24 !important;
}

.dark-mode .stat-value.text-danger,
[data-theme="dark"] .stat-value.text-danger {
    color: #f87171 !important;
}

.dark-mode .stat-value.text-info,
[data-theme="dark"] .stat-value.text-info {
    color: var(--primary-light) !important;
}

.dark-mode .stat-value.text-secondary,
[data-theme="dark"] .stat-value.text-secondary {
    color: #cbd5e1 !important;
}

/* ==================== TABLES ==================== */
.dark-mode .table,
[data-theme="dark"] .table {
    color: #ffffff !important;
}

.dark-mode .table th,
[data-theme="dark"] .table th {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .table td,
[data-theme="dark"] .table td {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.dark-mode .table tbody tr:hover td,
[data-theme="dark"] .table tbody tr:hover td {
    background: rgba(227, 24, 55, 0.1) !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(51, 65, 85, 0.3) !important;
}

/* ==================== STREAMERS TABLE ==================== */
.dark-mode .streamers-table-container,
[data-theme="dark"] .streamers-table-container {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .streamers-table td,
[data-theme="dark"] .streamers-table td {
    color: #e2e8f0 !important;
}

.dark-mode .streamers-table tbody tr:hover,
[data-theme="dark"] .streamers-table tbody tr:hover {
    background: rgba(227, 24, 55, 0.1) !important;
}

.dark-mode .streamer-info-card,
[data-theme="dark"] .streamer-info-card {
    background: rgba(227, 24, 55, 0.1) !important;
    border-left-color: var(--primary-color) !important;
}

.dark-mode .streamer-info-card:hover,
[data-theme="dark"] .streamer-info-card:hover {
    background: rgba(227, 24, 55, 0.2) !important;
}

.dark-mode .streamer-name,
[data-theme="dark"] .streamer-name {
    color: #ffffff !important;
}

.dark-mode .streamer-username,
[data-theme="dark"] .streamer-username {
    color: #cbd5e1 !important;
}

.dark-mode .contact-item,
[data-theme="dark"] .contact-item {
    color: #94a3b8 !important;
}

.dark-mode .contact-item i,
[data-theme="dark"] .contact-item i {
    color: var(--primary-color) !important;
}

/* ==================== FORMS ==================== */
.dark-mode .form-control,
[data-theme="dark"] .form-control {
    background: rgba(51, 65, 85, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.dark-mode .form-control:focus,
[data-theme="dark"] .form-control:focus {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(227, 24, 55, 0.25) !important;
}

.dark-mode .form-control::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: #94a3b8 !important;
}

.dark-mode .form-label,
[data-theme="dark"] .form-label {
    color: #e2e8f0 !important;
}

.dark-mode .form-select,
[data-theme="dark"] .form-select {
    background: rgba(51, 65, 85, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.dark-mode .form-select:focus,
[data-theme="dark"] .form-select:focus {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(227, 24, 55, 0.25) !important;
}

.dark-mode .form-select option,
[data-theme="dark"] .form-select option {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* ==================== BUTTONS ==================== */
.dark-mode .btn-primary,
[data-theme="dark"] .btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: #ffffff !important;
}

.dark-mode .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #B71530 0%, #8B1025 100%) !important;
}

.dark-mode .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.dark-mode .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

.dark-mode .btn-info,
[data-theme="dark"] .btn-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
    border: none !important;
    color: #ffffff !important;
}

.dark-mode .btn-outline-info,
[data-theme="dark"] .btn-outline-info {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.dark-mode .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-info:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* ==================== BADGES ==================== */
.dark-mode .badge,
[data-theme="dark"] .badge {
    color: #ffffff !important;
}

.dark-mode .badge.bg-primary,
[data-theme="dark"] .badge.bg-primary {
    background: var(--gradient-primary) !important;
}

.dark-mode .badge.bg-info,
[data-theme="dark"] .badge.bg-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
}

/* ==================== ALERTS ==================== */
.dark-mode .alert,
[data-theme="dark"] .alert {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .alert-success,
[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-right-color: #10b981 !important;
}

.dark-mode .alert-danger,
[data-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-right-color: #ef4444 !important;
}

.dark-mode .alert-warning,
[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-right-color: #f59e0b !important;
}

.dark-mode .alert-info,
[data-theme="dark"] .alert-info {
    background: rgba(227, 24, 55, 0.2) !important; /* Red instead of blue */
    color: #FF3D5A !important;
    border-right-color: var(--primary-color) !important;
}

/* ==================== PAGINATION ==================== */
.dark-mode .pagination-container,
[data-theme="dark"] .pagination-container {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .pagination .page-link,
.dark-mode .pagination-btn,
[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .pagination-btn {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

.dark-mode .pagination .page-link:hover,
.dark-mode .pagination-btn:hover,
[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .pagination-btn:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.dark-mode .pagination .page-item.active .page-link,
.dark-mode .pagination-btn.active,
[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination-btn.active {
    background: var(--gradient-primary) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.dark-mode .pagination-info,
[data-theme="dark"] .pagination-info {
    color: #e2e8f0 !important;
}

/* ==================== SEARCH & SORTING CONTROLS ==================== */
.dark-mode .search-controls,
.dark-mode .sorting-controls,
[data-theme="dark"] .search-controls,
[data-theme="dark"] .sorting-controls {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .sorting-controls label,
[data-theme="dark"] .sorting-controls label {
    color: #e2e8f0 !important;
}

/* ==================== PAGE HEADER ==================== */
.dark-mode .page-header,
[data-theme="dark"] .page-header {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .page-header .page-title,
[data-theme="dark"] .page-header .page-title {
    color: #ffffff !important;
}

.dark-mode .streamers-count,
[data-theme="dark"] .streamers-count {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

/* ==================== MODALS ==================== */
.dark-mode .modal-content,
[data-theme="dark"] .modal-content {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.dark-mode .modal-header,
[data-theme="dark"] .modal-header {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-bottom: none !important;
}

.dark-mode .modal-body,
[data-theme="dark"] .modal-body {
    color: #e2e8f0 !important;
}

.dark-mode .modal-footer,
[data-theme="dark"] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .btn-close,
[data-theme="dark"] .btn-close {
    filter: invert(1) !important;
}

/* ==================== PROGRESS BARS ==================== */
.dark-mode .progress,
[data-theme="dark"] .progress {
    background: rgba(51, 65, 85, 0.5) !important;
}

.dark-mode .progress-bar,
[data-theme="dark"] .progress-bar {
    background: var(--gradient-primary) !important;
}

/* ==================== BACKGROUND UTILITIES ==================== */
.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
    background: rgba(51, 65, 85, 0.8) !important;
}

.dark-mode .bg-white,
[data-theme="dark"] .bg-white {
    background: rgba(30, 41, 59, 0.95) !important;
}

.dark-mode .bg-gradient-info,
[data-theme="dark"] .bg-gradient-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
}

.dark-mode .bg-info,
[data-theme="dark"] .bg-info {
    background: var(--primary-color) !important; /* Red instead of blue */
}

.dark-mode .bg-primary,
[data-theme="dark"] .bg-primary {
    background: var(--primary-color) !important;
}

/* ==================== STAT ICONS WITH PROPER COLORS ==================== */
.dark-mode .stat-icon.bg-primary,
[data-theme="dark"] .stat-icon.bg-primary {
    background: var(--gradient-primary) !important;
}

.dark-mode .stat-icon.bg-info,
[data-theme="dark"] .stat-icon.bg-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
}

.dark-mode .stats-icon.bg-primary,
[data-theme="dark"] .stats-icon.bg-primary {
    background: var(--gradient-primary) !important;
}

.dark-mode .stats-icon.bg-info,
[data-theme="dark"] .stats-icon.bg-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
}

.dark-mode .financial-icon.bg-info,
[data-theme="dark"] .financial-icon.bg-info {
    background: var(--gradient-primary) !important; /* Red instead of blue */
}

.dark-mode .performance-icon.bg-primary,
[data-theme="dark"] .performance-icon.bg-primary {
    background: var(--gradient-primary) !important;
}

/* ==================== TEXT COLOR CLASSES ==================== */
.dark-mode .text-info,
[data-theme="dark"] .text-info {
    color: var(--primary-light) !important; /* Light red instead of blue */
}

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

/* ==================== EXCHANGE RATE CARD ==================== */
.dark-mode .exchange-rate-card,
[data-theme="dark"] .exchange-rate-card {
    background: linear-gradient(135deg, #3b3b6b 0%, #4a4a7a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==================== ACTIONS CARD ==================== */
.dark-mode .actions-card,
[data-theme="dark"] .actions-card {
    background: rgba(30, 41, 59, 0.95) !important;
}

.dark-mode .action-btn,
[data-theme="dark"] .action-btn {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.dark-mode .action-btn:hover,
[data-theme="dark"] .action-btn:hover {
    border-color: transparent !important;
}

/* ==================== EMPTY STATE ==================== */
.dark-mode .empty-state,
[data-theme="dark"] .empty-state {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .empty-state h4,
[data-theme="dark"] .empty-state h4 {
    color: #ffffff !important;
}

.dark-mode .empty-state p,
[data-theme="dark"] .empty-state p {
    color: #cbd5e1 !important;
}

/* ==================== VERIFICATION CODE ==================== */
.dark-mode .verification-code-info,
[data-theme="dark"] .verification-code-info {
    background: rgba(251, 191, 36, 0.15) !important;
    border-left-color: #f59e0b !important;
}

.dark-mode .verification-code-info strong,
[data-theme="dark"] .verification-code-info strong {
    color: #fbbf24 !important;
}

/* ==================== DATE BADGE ==================== */
.dark-mode .date-badge,
[data-theme="dark"] .date-badge {
    background: rgba(51, 65, 85, 0.8) !important;
    color: #e2e8f0 !important;
}

/* ==================== STORAGE INFO ==================== */
.dark-mode .storage-info,
.dark-mode .streamer-storage,
[data-theme="dark"] .storage-info,
[data-theme="dark"] .streamer-storage {
    background: rgba(227, 24, 55, 0.1) !important;
    border: 1px solid rgba(227, 24, 55, 0.2) !important;
}

.dark-mode .storage-text,
[data-theme="dark"] .storage-text {
    color: #e2e8f0 !important;
}

/* ==================== SCROLLBAR ==================== */
.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b !important;
}

.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gradient-primary) !important;
}

/* ==================== THEME TOGGLE BUTTON ==================== */
.theme-toggle-btn .sun-icon {
    display: none;
}

.dark-mode .theme-toggle-btn .sun-icon {
    display: block;
}

.dark-mode .theme-toggle-btn .moon-icon {
    display: none;
}

/* ==================== TEXT GRADIENT ==================== */
.dark-mode .text-gradient,
[data-theme="dark"] .text-gradient {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ==================== DROPDOWN ==================== */
.dark-mode .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .dropdown-item,
[data-theme="dark"] .dropdown-item {
    color: #e2e8f0 !important;
}

.dark-mode .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:hover {
    background: rgba(227, 24, 55, 0.2) !important;
    color: #ffffff !important;
}

/* ==================== BORDER COLORS ==================== */
.dark-mode .border,
[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .border-top,
[data-theme="dark"] .border-top {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .border-bottom,
[data-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==================== NAV TABS ==================== */
.dark-mode .nav-tabs,
[data-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .nav-tabs .nav-link,
[data-theme="dark"] .nav-tabs .nav-link {
    color: #cbd5e1 !important;
    border-color: transparent !important;
}

.dark-mode .nav-tabs .nav-link:hover,
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background: rgba(227, 24, 55, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent !important;
}

/* ==================== LIST GROUP ==================== */
.dark-mode .list-group-item,
[data-theme="dark"] .list-group-item {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

.dark-mode .list-group-item:hover,
[data-theme="dark"] .list-group-item:hover {
    background: rgba(227, 24, 55, 0.1) !important;
}

/* ==================== TRANSITIONS ==================== */
.dark-mode,
[data-theme="dark"] {
    transition: background-color 0.3s ease, color 0.3s ease;
}