/* ==========================================================================
   WA SENDER V3 - ULTRA PREMIUM COLORFUL HYBRID LIGHT THEME (COMPLETE SYSTEM)
   Sidebar: Deep Royal Purple (#2a1045) | Pure Crisp White Text (#ffffff)
   Canvas: Soft Cloud Slate (#f1f5f9)
   Cards: Colorful Pastel Tinted Containers & Crystal Clear Typography
   ========================================================================== */

html[data-theme="light"],
body[data-theme="light"] {
    --primary-color: #10b981;
    --primary-dark: #059669;
    --sidebar-bg: #2a1045 !important;
    --sidebar-text: #ffffff !important;
    --sidebar-hover: rgba(168, 85, 247, 0.25) !important;
    --sidebar-active-text: #ffffff !important;
    --navbar-bg: #ffffff !important;
    --body-bg: #f1f5f9 !important;
    --body-text: #0f172a !important;
    --card-bg: #ffffff !important;
    --border-color: #e2e8f0 !important;

    /* Inboxes (WhatsApp & Facebook) CSS Variables */
    --inbox-bg: #f0f2f5 !important;
    --fb-blue: #0084ff !important;
    --text-primary: #050505 !important;
    --text-muted: #65676b !important;
}

/* 1. Global Canvas & Body */
html[data-theme="light"] body,
html[data-theme="light"] .wrapper,
html[data-theme="light"] .content-wrapper {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .content-header h1 {
    color: #0f172a !important;
}

html[data-theme="light"] p {
    color: #334155 !important;
}

html[data-theme="light"] .text-muted {
    color: #64748b !important;
}

html[data-theme="light"] .text-secondary {
    color: #475569 !important;
}

/* Override white text inside white cards so they are dark, but keep white in sidebar & banners */
html[data-theme="light"] .content-wrapper .card:not(.sub-hero-card):not(.pricing-header-v2) .text-white,
html[data-theme="light"] .content-wrapper .msg-stat-card .text-white,
html[data-theme="light"] .content-wrapper .api-card .text-white,
html[data-theme="light"] .content-wrapper .conn-card .text-white,
html[data-theme="light"] .content-wrapper .fb-page-card .text-white,
html[data-theme="light"] .content-wrapper .table .text-white,
html[data-theme="light"] .content-wrapper .modal-content:not(.msg-modal-content) .text-white,
html[data-theme="light"] .content-wrapper .modal-content .modal-body .text-white {
    color: #0f172a !important;
}

/* 2. Top Header Navbar (Deep Royal Purple Matching Sidebar) */
html[data-theme="light"] .main-header {
    background: #2a1045 !important;
    border-bottom: 1px solid #431a6d !important;
    box-shadow: 0 2px 10px rgba(42, 16, 69, 0.25) !important;
}

html[data-theme="light"] .main-header .nav-link,
html[data-theme="light"] .main-header .navbar-nav .nav-link,
html[data-theme="light"] .main-header .nav-link i,
html[data-theme="light"] .main-header .nav-link svg,
html[data-theme="light"] .main-header .nav-link span {
    color: #ffffff !important;
}

html[data-theme="light"] .main-header .nav-link:hover,
html[data-theme="light"] .main-header .nav-link:hover i {
    color: #d8b4fe !important;
}

/* 3. Deep Royal Purple Sidebar (#2a1045) - 100% PURE WHITE TEXT (NO WHITE BOXES) */
html[data-theme="light"] .main-sidebar,
html[data-theme="light"] .sidebar-dark-primary {
    background: #2a1045 !important;
    border-right: 1px solid #431a6d !important;
    box-shadow: 2px 0 20px rgba(42, 16, 69, 0.3) !important;
}

html[data-theme="light"] .main-sidebar .brand-link {
    background: #1e0935 !important;
    border-bottom: 1px solid #431a6d !important;
    color: #ffffff !important;
}

html[data-theme="light"] .main-sidebar .brand-link .brand-text {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .main-sidebar .nav-header {
    color: #f3e8ff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    opacity: 1 !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-item .nav-link,
html[data-theme="light"] .main-sidebar .nav-sidebar.nav-pills .nav-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    margin-bottom: 2px !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-item .nav-link p,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-item .nav-link span {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-item .nav-link i {
    color: #d8b4fe !important;
    font-size: 15px !important;
    opacity: 1 !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-item .nav-link:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active,
html[data-theme="light"] .main-sidebar .nav-sidebar.nav-pills .nav-link.active,
html[data-theme="light"] .main-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.4) !important;
    border-left: 3px solid #f472b6 !important;
}

html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active i,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active p,
html[data-theme="light"] .main-sidebar .nav-sidebar .nav-link.active span {
    color: #ffffff !important;
}

/* 4. Dashboard Time Filter Pills */
html[data-theme="light"] .filter-pill {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .filter-pill:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] .filter-pill.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* 5. Dashboard Stat Metric Cards */
html[data-theme="light"] .stat-metric-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .stat-metric-card:hover {
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-3px) !important;
}

html[data-theme="light"] .stat-card-sent {
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%) !important;
    border: 1px solid #a7f3d0 !important;
}

html[data-theme="light"] .stat-card-received {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;
    border: 1px solid #bae6fd !important;
}

html[data-theme="light"] .stat-card-rate {
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%) !important;
    border: 1px solid #ddd6fe !important;
}

html[data-theme="light"] .stat-card-sessions {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1px solid #bbf7d0 !important;
}

html[data-theme="light"] .stat-card-balance {
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%) !important;
    border: 1px solid #fde68a !important;
}

html[data-theme="light"] .stat-card-package {
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%) !important;
    border: 1px solid #fecdd3 !important;
}

html[data-theme="light"] .stat-title {
    color: #475569 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .stat-value {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .stat-meta {
    color: #64748b !important;
}

html[data-theme="light"] .stat-metric-card a,
html[data-theme="light"] .stat-metric-card small {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* 6. Dashboard Quick Action Cards */
html[data-theme="light"] .quick-action-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .quick-action-card:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

html[data-theme="light"] .qa-text-box h6 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .qa-text-box small {
    color: #64748b !important;
}

/* 7. Connections Page (Sessions / QR Pairing) */
html[data-theme="light"] .conn-tabs-nav {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .conn-tab-btn {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .conn-tab-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .conn-tab-btn.active.tab-cloud {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
}

html[data-theme="light"] .conn-tab-btn.active.tab-personal {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="light"] .conn-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .conn-card-linked {
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    border-top: 4px solid #10b981 !important;
}

html[data-theme="light"] .conn-card-cloud {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    border-top: 4px solid #0ea5e9 !important;
}

html[data-theme="light"] .conn-card h4,
html[data-theme="light"] .conn-card h5,
html[data-theme="light"] .conn-card h6 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .conn-card p,
html[data-theme="light"] .conn-card small,
html[data-theme="light"] .conn-card .text-muted,
html[data-theme="light"] .conn-card span {
    color: #475569 !important;
}

html[data-theme="light"] .pairing-box-display {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* 8. Facebook Pages & Settings */
html[data-theme="light"] .webhook-copy-box {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 4px 18px rgba(14, 165, 233, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .webhook-copy-box h4,
html[data-theme="light"] .webhook-copy-box h5,
html[data-theme="light"] .webhook-copy-box h6,
html[data-theme="light"] .webhook-copy-box strong,
html[data-theme="light"] .webhook-copy-box label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .webhook-copy-box p,
html[data-theme="light"] .webhook-copy-box small,
html[data-theme="light"] .webhook-copy-box span {
    color: #334155 !important;
}

html[data-theme="light"] .webhook-copy-box input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .fb-page-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .fb-page-card h4,
html[data-theme="light"] .fb-page-card h5,
html[data-theme="light"] .fb-page-card h6 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .fb-page-card p,
html[data-theme="light"] .fb-page-card small,
html[data-theme="light"] .fb-page-card span {
    color: #64748b !important;
}

/* 9. Messages Hub Stat Cards, Tabs & Filter Table */
html[data-theme="light"] .msg-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .msg-stat-card .h4,
html[data-theme="light"] .msg-stat-card .text-white,
html[data-theme="light"] .msg-stat-card div.h4:not(.text-danger) {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .msg-stat-card .h4.text-danger {
    color: #ef4444 !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .msg-stat-card .text-muted {
    color: #475569 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .msg-tabs-nav {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .msg-tab-btn {
    color: #475569 !important;
}

html[data-theme="light"] .msg-tab-btn:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

html[data-theme="light"] .msg-tab-btn.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="light"] #tableFilterWrap,
html[data-theme="light"] .msg-table-filter-bar {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .msg-filter-icon {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    color: #64748b !important;
}

html[data-theme="light"] .msg-filter-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] select.msg-filter-input option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* 10. My Subscription & Quotas Hero Banner */
html[data-theme="light"] .sub-hero-card {
    background: linear-gradient(135deg, #2a1045 0%, #3b1566 50%, #4c1d95 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 8px 25px rgba(42, 16, 69, 0.25) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .sub-hero-card h2,
html[data-theme="light"] .sub-hero-card h3,
html[data-theme="light"] .sub-hero-card h4,
html[data-theme="light"] .sub-hero-card .text-white,
html[data-theme="light"] .sub-hero-card span,
html[data-theme="light"] .sub-hero-card p,
html[data-theme="light"] .sub-hero-card strong {
    color: #ffffff !important;
}

html[data-theme="light"] .sub-hero-card .text-muted {
    color: #e9d5ff !important;
}

html[data-theme="light"] .sub-hero-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

html[data-theme="light"] .sub-hero-card .pulse-dot {
    background: #4ade80 !important;
    box-shadow: 0 0 8px #4ade80 !important;
}

html[data-theme="light"] .channel-metric-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .channel-metric-card h3,
html[data-theme="light"] .channel-metric-card h4,
html[data-theme="light"] .channel-metric-card h5 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .channel-metric-card span,
html[data-theme="light"] .channel-metric-card small,
html[data-theme="light"] .channel-metric-card p {
    color: #475569 !important;
}

html[data-theme="light"] .quota-progress {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

/* 10.1 Add Funds to Wallet (Deposit Create & Summary) */
html[data-theme="light"] .step-card,
html[data-theme="light"] .summary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .step-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .step-title,
html[data-theme="light"] .summary-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .step-num {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .gateway-select-custom,
html[data-theme="light"] .deposit-amount-input {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .gateway-select-custom:focus,
html[data-theme="light"] .deposit-amount-input:focus {
    background-color: #ffffff !important;
    border-color: #10b981 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .gateway-select-custom option,
html[data-theme="light"] .gateway-select-custom optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] .method-chip {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #334155 !important;
}

html[data-theme="light"] .method-chip:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .method-chip.active {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #059669 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="light"] .amount-chip {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] .amount-chip:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .instruction-callout {
    background: #f0f9ff !important;
    border: 1.5px solid #7dd3fc !important;
}

html[data-theme="light"] .instruction-callout h6 {
    color: #0369a1 !important;
}

html[data-theme="light"] #manualInstructionsContent {
    color: #0f172a !important;
}

html[data-theme="light"] .summary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .summary-card h5,
html[data-theme="light"] .summary-card h5.text-white {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .summary-card .summary-row {
    border-bottom: 1px dashed #e2e8f0 !important;
}

html[data-theme="light"] .summary-card .summary-row span.text-muted {
    color: #64748b !important;
}

html[data-theme="light"] .summary-card .summary-row span.text-white,
html[data-theme="light"] .summary-card .summary-row span#summaryMethodName,
html[data-theme="light"] .summary-card .summary-row span#summaryAmountText {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .summary-card .summary-row span.text-warning {
    color: #d97706 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .summary-card .summary-row.pt-3 {
    border-top: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .summary-card .summary-row.pt-3 span.text-white {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .summary-card .summary-row.pt-3 span.text-success {
    color: #10b981 !important;
    font-weight: 900 !important;
}

/* 10.2 User Profile & Account Overview */
html[data-theme="light"] .profile-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .profile-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .profile-card-header h5 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .profile-card-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .profile-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .balance-badge-box {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

html[data-theme="light"] .avatar-preview-img {
    background: #f8fafc !important;
    border: 3px solid #10b981 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="light"] .avatar-edit-btn {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .deposit-history-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #10b981 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

/* 10.3 Rate Limit Settings, Info Boxes & Alerts */
html[data-theme="light"] .info-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .info-box-text {
    color: #475569 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .info-box-number {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .info-box .progress {
    background: #f1f5f9 !important;
}

html[data-theme="light"] .alert-info {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

html[data-theme="light"] .alert-info strong,
html[data-theme="light"] .alert-info .text-white {
    color: #065f46 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] hr {
    border-color: #e2e8f0 !important;
}

/* Specific content-wrapper nav-pills (NEVER sidebar) */
html[data-theme="light"] .content-wrapper .nav-pills:not(.nav-sidebar) .nav-link {
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 4px;
}

html[data-theme="light"] .content-wrapper .nav-pills:not(.nav-sidebar) .nav-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .content-wrapper .nav-pills:not(.nav-sidebar) .nav-link.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

/* 11. Packages & Pricing Cards - VIBRANT MODERN COLORED HEADERS */
html[data-theme="light"] .pricing-card-v2,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .package-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

html[data-theme="light"] .pricing-card-v2:hover,
html[data-theme="light"] .pricing-card:hover {
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14) !important;
    transform: translateY(-6px) !important;
}

/* Free Plan Header (Sky Blue Gradient) */
html[data-theme="light"] .pricing-card-v2.theme-0 .pricing-header-v2 {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border-bottom: none !important;
}

/* Starter Plan Header (Emerald Green Gradient) */
html[data-theme="light"] .pricing-card-v2.theme-1 .pricing-header-v2 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-bottom: none !important;
}

/* Pro Plan Header (Royal Purple Gradient) */
html[data-theme="light"] .pricing-card-v2.theme-2 .pricing-header-v2 {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    border-bottom: none !important;
}

/* Enterprise Plan Header (Warm Amber Gold Gradient) */
html[data-theme="light"] .pricing-card-v2.theme-3 .pricing-header-v2 {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-bottom: none !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-title-v2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-price-v2,
html[data-theme="light"] .pricing-header-v2 .pricing-amount-v2,
html[data-theme="light"] .pricing-header-v2 .pricing-currency-v2 {
    color: #ffffff !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-period-v2 {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-icon-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-icon-badge svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}

html[data-theme="light"] .pricing-header-v2 .pricing-icon-badge i {
    color: #ffffff !important;
}

/* 11.1 Deposit Show Details & Status Timeline */
html[data-theme="light"] .timeline-inverse > div > .timeline-item {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .timeline-inverse > div > .timeline-item > .timeline-header {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .timeline-inverse > div > .timeline-item > .time {
    color: #64748b !important;
}

html[data-theme="light"] .pricing-feature-item-v2,
html[data-theme="light"] .pricing-features-v2 li,
html[data-theme="light"] .package-features li {
    color: #334155 !important;
    font-weight: 500 !important;
}

html[data-theme="light"] .pricing-feature-item-v2 span,
html[data-theme="light"] .package-features li span {
    color: #334155 !important;
}

html[data-theme="light"] .pricing-card-v2.featured-card {
    border: 2.5px solid #8b5cf6 !important;
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.25) !important;
}

html[data-theme="light"] .pricing-badge-popular {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

/* 12. API Keys & Developer Documentation */
html[data-theme="light"] .api-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .api-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .api-code-block {
    background: #0f172a !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
}

html[data-theme="light"] .doc-nav-pills .nav-link {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .doc-nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .modal-dark-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .modal-dark-input:focus {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #10b981 !important;
}

html[data-theme="light"] .advanced-options-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

/* 13. Facebook Messenger & WhatsApp Team Inbox (Clean Hybrid Light) */
html[data-theme="light"] .inbox-shell {
    background: #ffffff !important;
    color: #050505 !important;
}

html[data-theme="light"] .inbox-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e4e6eb !important;
}

html[data-theme="light"] .sidebar-header,
html[data-theme="light"] .inbox-topbar,
html[data-theme="light"] .chat-header-bar,
html[data-theme="light"] .chat-header,
html[data-theme="light"] .inbox-header-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
    color: #050505 !important;
}

html[data-theme="light"] .chat-header-name {
    color: #050505 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .page-select,
html[data-theme="light"] .search-input,
html[data-theme="light"] .inbox-search-input {
    background: #f0f2f5 !important;
    color: #050505 !important;
    border: 1px solid #e4e6eb !important;
}

html[data-theme="light"] .tab-btn,
html[data-theme="light"] .inbox-filter-tab {
    color: #65676b !important;
}

html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .inbox-filter-tab.active {
    color: #ea580c !important;
    border-bottom: 2px solid #ea580c !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .conv-item,
html[data-theme="light"] .chat-item,
html[data-theme="light"] .inbox-chat-item,
html[data-theme="light"] .chat-user-item {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
    color: #050505 !important;
}

html[data-theme="light"] .conv-item:hover,
html[data-theme="light"] .chat-item:hover,
html[data-theme="light"] .inbox-chat-item:hover {
    background: #f2f3f5 !important;
}

html[data-theme="light"] .conv-item.active,
html[data-theme="light"] .chat-item.active,
html[data-theme="light"] .inbox-chat-item.active {
    background: #fff7ed !important;
    border-left: 3px solid #ea580c !important;
}

html[data-theme="light"] .conv-name,
html[data-theme="light"] .inbox-chat-title {
    color: #050505 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .conv-snippet,
html[data-theme="light"] .conv-last-msg,
html[data-theme="light"] .inbox-chat-snippet {
    color: #65676b !important;
}

html[data-theme="light"] #conversationArea,
html[data-theme="light"] #chatMessages,
html[data-theme="light"] .chat-area,
html[data-theme="light"] .chat-messages,
html[data-theme="light"] .chat-messages-container,
html[data-theme="light"] .inbox-chat-area {
    background: #f8fafc !important;
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .inbox-empty-view {
    background: #f8fafc !important;
    color: #65676b !important;
}

html[data-theme="light"] .empty-state i,
html[data-theme="light"] .inbox-empty-view i {
    color: #ea580c !important;
}

html[data-theme="light"] .empty-state h4,
html[data-theme="light"] .inbox-empty-view h4 {
    color: #050505 !important;
}

/* Chat Footer Composer Bar */
html[data-theme="light"] .chat-input-container,
html[data-theme="light"] .chat-composer,
html[data-theme="light"] .inbox-footer-bar {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .tool-pill {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .tool-pill:hover {
    background: #ffedd5 !important;
    border-color: #fdba74 !important;
    color: #ea580c !important;
}

html[data-theme="light"] .tool-pill.active {
    background: #ffedd5 !important;
    border-color: #f97316 !important;
    color: #ea580c !important;
}

html[data-theme="light"] .chat-input-bar,
html[data-theme="light"] .chat-input-row,
html[data-theme="light"] .inbox-composer-row {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
}

html[data-theme="light"] .chat-input-bar textarea,
html[data-theme="light"] .chat-input-row textarea,
html[data-theme="light"] #messageInput,
html[data-theme="light"] #chatInput,
html[data-theme="light"] .composer-input,
html[data-theme="light"] .inbox-composer-input {
    background: transparent !important;
    color: #0f172a !important;
    border: none !important;
}

html[data-theme="light"] #mediaAttachmentBar,
html[data-theme="light"] #voiceRecordingBar {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Sender (Outbound) Text Bubble: Soft Light Pastel Orange */
html[data-theme="light"] .msg-outgoing:not(.msg-media-only),
html[data-theme="light"] .msg-bubble.outbound:not(.msg-media-only),
html[data-theme="light"] .bubble-out:not(.msg-media-only) {
    background: #ffedd5 !important;
    color: #7c2d12 !important;
    border: 1px solid #fed7aa !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.08) !important;
}

html[data-theme="light"] .msg-outgoing:not(.msg-media-only) p,
html[data-theme="light"] .msg-outgoing:not(.msg-media-only) span,
html[data-theme="light"] .msg-outgoing:not(.msg-media-only) div {
    color: #7c2d12 !important;
}

html[data-theme="light"] .msg-outgoing .msg-meta {
    color: #9a3412 !important;
}

/* Receiver (Inbound) Text Bubble: Soft Royal Purple */
html[data-theme="light"] .msg-incoming:not(.msg-media-only),
html[data-theme="light"] .msg-bubble.inbound:not(.msg-media-only),
html[data-theme="light"] .bubble-in:not(.msg-media-only) {
    background: #f5f3ff !important;
    color: #4c1d95 !important;
    border: 1px solid #ddd6fe !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.08) !important;
}

html[data-theme="light"] .msg-incoming:not(.msg-media-only) p,
html[data-theme="light"] .msg-incoming:not(.msg-media-only) div {
    color: #4c1d95 !important;
}

html[data-theme="light"] .msg-incoming .msg-meta {
    color: #6d28d9 !important;
}

/* Photo / Document / Media Messages - ZERO BACKGROUND ON BOTH SENDER & RECEIVER */
html[data-theme="light"] .msg-media-only,
html[data-theme="light"] .msg-media-only.msg-incoming,
html[data-theme="light"] .msg-media-only.msg-outgoing,
html[data-theme="light"] .msg-media-only.bubble-in,
html[data-theme="light"] .msg-media-only.bubble-out {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-theme="light"] .msg-media-preview {
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .msg-media-only .msg-meta {
    background: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
}

/* Send Buttons: Soft Sunset Orange */
html[data-theme="light"] .btn-send-chat,
html[data-theme="light"] .chat-send-btn,
html[data-theme="light"] .send-action-btn,
html[data-theme="light"] #sendBtn {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3) !important;
}

/* 14. General Cards & Containers */
html[data-theme="light"] .card,
html[data-theme="light"] .msg-studio-card,
html[data-theme="light"] .msg-table-card,
html[data-theme="light"] .history-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .card-header,
html[data-theme="light"] .msg-table-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .card-header h3,
html[data-theme="light"] .card-header h4,
html[data-theme="light"] .card-header h5 {
    color: #0f172a !important;
}

html[data-theme="light"] .card-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* General bg-dark container override for light mode */
html[data-theme="light"] .bg-dark {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .bg-dark .text-white {
    color: #0f172a !important;
}

html[data-theme="light"] .bg-dark .text-muted {
    color: #64748b !important;
}

/* 15. Form Controls & Inputs */
html[data-theme="light"] .form-control,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .custom-select,
html[data-theme="light"] .msg-filter-input,
html[data-theme="light"] #recipient,
html[data-theme="light"] #message_text {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .msg-filter-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

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

html[data-theme="light"] .input-group-text {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] label {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Webkit Autofill in Light Mode */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover, 
html[data-theme="light"] input:-webkit-autofill:focus, 
html[data-theme="light"] textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
    color: #0f172a !important;
}

/* 16. Tables */
html[data-theme="light"] .table {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .table tbody tr {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .table-hover tbody tr:hover,
html[data-theme="light"] .table tbody tr:hover {
    background: #f8fafc !important;
}

html[data-theme="light"] .table td,
html[data-theme="light"] .table th {
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 17. Modals & Popups */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .msg-modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .msg-modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .msg-modal-close-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}

html[data-theme="light"] .msg-modal-close-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

html[data-theme="light"] .msg-info-tile {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .msg-info-tile .tile-label {
    color: #64748b !important;
}

html[data-theme="light"] .msg-info-tile .tile-val {
    color: #0f172a !important;
}

/* 18. Dropdown Menus */
html[data-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .dropdown-item {
    color: #334155 !important;
}

html[data-theme="light"] .dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .dropdown-divider {
    border-color: #e2e8f0 !important;
}

/* 19. Badges & Status */
html[data-theme="light"] .badge-dark {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .badge-success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

html[data-theme="light"] .badge-info {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
}

html[data-theme="light"] .badge-warning {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

html[data-theme="light"] .badge-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}

/* 20. Pagination */
html[data-theme="light"] .page-link {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] .page-item.active .page-link {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* 21. Footer (Deep Royal Purple Matching Sidebar) */
html[data-theme="light"] .main-footer {
    background: #2a1045 !important;
    border-top: 1px solid #431a6d !important;
    color: #ffffff !important;
}

html[data-theme="light"] .main-footer a {
    color: #d8b4fe !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .main-footer strong,
html[data-theme="light"] .main-footer span {
    color: #ffffff !important;
}

/* 22. Outline Action Buttons (Check Status, Details, etc.) */
html[data-theme="light"] .btn-outline-info {
    color: #0284c7 !important;
    border: 1.5px solid #0ea5e9 !important;
    background: #f0f9ff !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .btn-outline-info:hover {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline-warning {
    color: #b45309 !important;
    border: 1.5px solid #f59e0b !important;
    background: #fffbeb !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .btn-outline-warning:hover {
    background: #f59e0b !important;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline-primary {
    color: #7c3aed !important;
    border: 1.5px solid #8b5cf6 !important;
    background: #f5f3ff !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .btn-outline-primary:hover {
    background: #8b5cf6 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   23. PUBLIC FRONTEND, HOMEPAGE, PRICING, FAQ & DOCUMENTATION LIGHT THEME
   ========================================================================== */

/* Public Navbar (Deep Royal Purple Matching Sidebar) */
html[data-theme="light"] .public-navbar {
    background: #2a1045 !important;
    border-bottom: 1px solid #431a6d !important;
    box-shadow: 0 4px 20px rgba(42, 16, 69, 0.25) !important;
}

html[data-theme="light"] .public-logo-text {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .public-nav-links a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .public-nav-links a:hover {
    color: #d8b4fe !important;
}

html[data-theme="light"] .public-btn-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    background: transparent !important;
}

html[data-theme="light"] .public-btn-outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

html[data-theme="light"] .public-mobile-menu {
    background: #2a1045 !important;
    border: 1px solid #431a6d !important;
    box-shadow: 0 10px 30px rgba(42, 16, 69, 0.4) !important;
}

html[data-theme="light"] .public-mobile-menu a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .public-mobile-menu-btn {
    color: #ffffff !important;
}

html[data-theme="light"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Public Footer (Deep Royal Purple Matching Sidebar) */
html[data-theme="light"] .site-footer,
html[data-theme="light"] .public-footer {
    background: #2a1045 !important;
    border-top: 1px solid #431a6d !important;
    color: #ffffff !important;
}

html[data-theme="light"] .site-footer a,
html[data-theme="light"] .public-footer a {
    color: #d8b4fe !important;
}

html[data-theme="light"] .site-footer a:hover,
html[data-theme="light"] .public-footer a:hover {
    color: #ffffff !important;
}

html[data-theme="light"] .site-footer h4,
html[data-theme="light"] .site-footer h5,
html[data-theme="light"] .site-footer .footer-heading,
html[data-theme="light"] .public-footer h4,
html[data-theme="light"] .public-footer h5 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .site-footer p,
html[data-theme="light"] .site-footer .footer-desc,
html[data-theme="light"] .public-footer p {
    color: #e2e8f0 !important;
}

html[data-theme="light"] .site-footer .footer-social a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="light"] .site-footer .footer-bottom,
html[data-theme="light"] .public-footer .footer-bottom {
    border-top: 1px solid #431a6d !important;
    color: #cbd5e1 !important;
}

/* Homepage Hero & Content (Border-Free Seamless Wave Transitions) */
html[data-theme="light"] .hero {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    border: none !important;
}

html[data-theme="light"] .hero h1 {
    color: #0f172a !important;
}

html[data-theme="light"] .hero p {
    color: #475569 !important;
}

html[data-theme="light"] .hero-badge {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
}

/* Hero Outline Button (View Pricing) */
html[data-theme="light"] .hero .btn-outline,
html[data-theme="light"] .btn.btn-outline {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .hero .btn-outline:hover,
html[data-theme="light"] .btn.btn-outline:hover {
    background: #f1f5f9 !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* Hero Floating Visual Cards (Clean Pure White, No Black Box) */
html[data-theme="light"] .floating-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .floating-card div {
    color: #0f172a !important;
}

html[data-theme="light"] .floating-card div[style*="font-size: 12px"] {
    color: #64748b !important;
}

/* Hero Bottom Stats (Transparent, No Box) */
html[data-theme="light"] .hero-stats {
    background: transparent !important;
}

html[data-theme="light"] .hero-stats .stat-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-theme="light"] .hero-stats .stat-item h3 {
    color: #0f172a !important;
    font-size: 32px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .hero-stats .stat-item p {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Features Section (Distinct White Island - No Borders) */
html[data-theme="light"] .features {
    background: #ffffff !important;
    border: none !important;
}

html[data-theme="light"] .feature-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .feature-card:hover {
    background: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .feature-card h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .feature-card p {
    color: #475569 !important;
}

/* Shape Wave Dividers in Light Mode (Seamless Matching Fills) */
html[data-theme="light"] .custom-shape-divider-bottom.wave-hero .shape-fill {
    fill: #ffffff !important;
}

html[data-theme="light"] .custom-shape-divider-bottom.wave-features .shape-fill {
    fill: #f8fafc !important;
}

html[data-theme="light"] .custom-shape-divider-bottom.wave-pricing .shape-fill {
    fill: #ffffff !important;
}

html[data-theme="light"] .custom-shape-divider-bottom.wave-cta .shape-fill {
    fill: #f8fafc !important;
}

/* View All Plans Button in Light Mode */
html[data-theme="light"] .btn-view-all-plans {
    background: #ffffff !important;
    color: #059669 !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .btn-view-all-plans:hover {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35) !important;
}

/* Pricing Section (Soft Slate Flow - No Borders) */
html[data-theme="light"] .pricing-section {
    background: #f8fafc !important;
    border: none !important;
}

/* CTA Section (Rich Vibrant Emerald Box - No Borders) */
html[data-theme="light"] .cta {
    background: #ffffff !important;
    border: none !important;
    padding: 90px 20px !important;
}

html[data-theme="light"] .cta-box {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 50px rgba(5, 150, 105, 0.3) !important;
    padding: 60px 40px !important;
}

html[data-theme="light"] .cta h2,
html[data-theme="light"] .cta-box h2 {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .cta p,
html[data-theme="light"] .cta-box p {
    color: #d1fae5 !important;
    font-size: 17px !important;
}

html[data-theme="light"] .cta-box .btn,
html[data-theme="light"] .cta-box .btn-primary {
    background: #ffffff !important;
    color: #047857 !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .cta-box .btn:hover {
    background: #f0fdf4 !important;
    color: #065f46 !important;
    transform: translateY(-3px) scale(1.02);
}

/* Support Section (No Borders) */
html[data-theme="light"] .support-section,
html[data-theme="light"] section:has(a[href*="wa.me"]) {
    background: #f8fafc !important;
    border: none !important;
}

html[data-theme="light"] .support-card-box,
html[data-theme="light"] section:has(a[href*="wa.me"]) > div {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
    border-radius: 26px !important;
}

html[data-theme="light"] .support-title,
html[data-theme="light"] section:has(a[href*="wa.me"]) h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .support-subtitle,
html[data-theme="light"] section:has(a[href*="wa.me"]) p {
    color: #475569 !important;
}

html[data-theme="light"] .support-phone {
    color: #64748b !important;
}

/* Pricing Page & Homepage Pricing Grid */
html[data-theme="light"] .pricing,
html[data-theme="light"] .page-header {
    background: transparent !important;
}

html[data-theme="light"] .page-header h1,
html[data-theme="light"] .section-title h2 {
    color: #0f172a !important;
}

html[data-theme="light"] .page-header p,
html[data-theme="light"] .section-title p {
    color: #64748b !important;
}

html[data-theme="light"] .pricing-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .pricing-card.featured {
    border: 2.5px solid #10b981 !important;
    box-shadow: 0 14px 40px rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .pricing-card h3,
html[data-theme="light"] .pricing-card .pricing-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .pricing-card .pricing-price,
html[data-theme="light"] .pricing-card .price {
    color: #10b981 !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .pricing-card .pricing-features li,
html[data-theme="light"] .pricing-card .plan-features li {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* Pricing Get Started Buttons (Vibrant Filled Emerald) */
html[data-theme="light"] .pricing-card .btn,
html[data-theme="light"] .pricing-card .btn-outline,
html[data-theme="light"] .pricing-card .btn-primary {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="light"] .pricing-card .btn:hover,
html[data-theme="light"] .pricing-card .btn-outline:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Public Documentation Page (.doc-block, .endpoint-row, .webhook-card, .error-code, .sdk-card) */
html[data-theme="light"] .doc-block {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .doc-header {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .doc-header h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .doc-header p {
    color: #64748b !important;
}

html[data-theme="light"] .doc-step {
    color: #334155 !important;
}

html[data-theme="light"] .doc-step h4 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .doc-step p {
    color: #64748b !important;
}

/* Endpoints Rows (Pure White Cards, Dark Text) */
html[data-theme="light"] .endpoint-row {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .endpoint-row code {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-family: 'Fira Code', monospace !important;
}

html[data-theme="light"] .endpoint-desc {
    color: #64748b !important;
}

/* Parameters Table */
html[data-theme="light"] .params-table h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .params-table table {
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .params-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .params-table td {
    background: #ffffff !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .params-table td code {
    background: #f0fdf4 !important;
    color: #059669 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Webhook Event Cards (Pure White Cards) */
html[data-theme="light"] .webhook-event,
html[data-theme="light"] .webhook-card,
html[data-theme="light"] .webhook-grid > div {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    color: #334155 !important;
}

html[data-theme="light"] .webhook-event span,
html[data-theme="light"] .webhook-card code,
html[data-theme="light"] .webhook-grid > div strong,
html[data-theme="light"] .webhook-grid > div span.webhook-event {
    color: #059669 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .webhook-event p,
html[data-theme="light"] .webhook-grid > div p {
    color: #64748b !important;
}

/* Error Codes Cards (Pure White Cards) */
html[data-theme="light"] .error-code {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    color: #334155 !important;
}

html[data-theme="light"] .error-code strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .error-code p {
    color: #64748b !important;
}

html[data-theme="light"] .error-num {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 800 !important;
}

/* SDK Cards (Pure White Cards) */
html[data-theme="light"] .sdk-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .sdk-card h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .sdk-card code {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
}

/* Sleek Dark Terminal for Code & Response Boxes */
html[data-theme="light"] .code-block,
html[data-theme="light"] .response-block pre {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 10px !important;
}

html[data-theme="light"] .response-block {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
}

html[data-theme="light"] .response-block h4 {
    color: #166534 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .code-block pre code,
html[data-theme="light"] .response-block pre code {
    color: #38bdf8 !important;
}

html[data-theme="light"] .code-header {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
}

html[data-theme="light"] .doc-note {
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    color: #166534 !important;
}

html[data-theme="light"] .doc-note p {
    color: #166534 !important;
}

/* FAQ Page Accordions */
html[data-theme="light"] .faq-item {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .faq-question {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .faq-answer {
    color: #475569 !important;
}

/* Policy & Legal Pages (Privacy Policy, Terms of Service, Refund Policy) */
html[data-theme="light"] .policy-section h2 {
    color: #0f172a !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .policy-section p,
html[data-theme="light"] .policy-section li {
    color: #334155 !important;
}

html[data-theme="light"] .policy-section strong {
    color: #0f172a !important;
}

html[data-theme="light"] .highlight-box {
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    color: #166534 !important;
}

html[data-theme="light"] .refund-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .refund-card h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .refund-card p {
    color: #475569 !important;
}

html[data-theme="light"] .last-updated {
    color: #64748b !important;
}

/* Auth Pages (Login & Register) */
html[data-theme="light"] .login-container,
html[data-theme="light"] .register-container {
    margin-bottom: 60px !important;
}

html[data-theme="light"] .login-card,
html[data-theme="light"] .register-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .brand h1 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .brand p {
    color: #64748b !important;
}

html[data-theme="light"] .form-group label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

html[data-theme="light"] .login-card .form-control,
html[data-theme="light"] .register-card .form-control {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .login-card .form-control:focus,
html[data-theme="light"] .register-card .form-control:focus {
    background: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .login-card .form-control::placeholder,
html[data-theme="light"] .register-card .form-control::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .input-group i {
    color: #64748b !important;
}

html[data-theme="light"] .remember-me {
    color: #475569 !important;
}

html[data-theme="light"] .divider span {
    background: #ffffff !important;
    color: #94a3b8 !important;
}

html[data-theme="light"] .divider::before {
    background: #e2e8f0 !important;
}

html[data-theme="light"] .login-link,
html[data-theme="light"] .register-link {
    color: #64748b !important;
}

html[data-theme="light"] .login-link a,
html[data-theme="light"] .register-link a,
html[data-theme="light"] .forgot-link {
    color: #059669 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .btn-google {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .btn-google:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

/* Reports & Analytics Light Theme */
html[data-theme="light"] .reports-container .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .reports-container .card-header {
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .reports-container .card-title {
    color: #0f172a !important;
}

html[data-theme="light"] .reports-container .table thead.bg-dark {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

html[data-theme="light"] .reports-container .table thead.bg-dark th {
    color: #475569 !important;
}

html[data-theme="light"] .reports-container .table tbody tr:hover {
    background: #f8fafc !important;
}

html[data-theme="light"] .reports-container .table td {
    color: #1e293b !important;
    border-color: #f1f5f9 !important;
}

/* Enhanced Light Theme Pagination */
html[data-theme="light"] .pagination .page-link {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
html[data-theme="light"] .pagination .page-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
html[data-theme="light"] .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}
html[data-theme="light"] .pagination .page-item.disabled .page-link {
    opacity: 0.45 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* Yellow Notification & Warning Badges - Crisp Dark/Black Text */
.badge-warning,
.badge.badge-warning,
.navbar-badge.badge-warning,
.badge-warning.right,
span.badge-warning,
.small-box .badge-warning {
    background-color: #fbbf24 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border: none !important;
}

html[data-theme="light"] .badge-warning,
html[data-theme="light"] .badge.badge-warning,
html[data-theme="light"] .navbar-badge.badge-warning,
html[data-theme="light"] .badge-warning.right,
html[data-theme="light"] span.badge-warning,
html[data-theme="light"] .small-box .badge-warning {
    background-color: #f59e0b !important;
    color: #000000 !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Marketing & Broadcast Campaigns in Light Theme */
html[data-theme="light"] .campaign-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .campaign-card h4 {
    color: #0f172a !important;
}
html[data-theme="light"] .bg-dark-tint {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .channel-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .channel-card.active {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: #10b981 !important;
}
html[data-theme="light"] #channelCardFB.active {
    background: rgba(0, 132, 255, 0.08) !important;
    border-color: #0084ff !important;
}
html[data-theme="light"] #trackCampaignModal .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #trackCampaignModal .text-white {
    color: #0f172a !important;
}
html[data-theme="light"] #trackCampaignModal .close.text-white {
    color: #475569 !important;
}
html[data-theme="light"] #trackCampaignModal table {
    color: #0f172a !important;
}
html[data-theme="light"] #filterStatusSelect,
html[data-theme="light"] #searchRecipientInput {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] #statAudience {
    color: #4f46e5 !important;
}
html[data-theme="light"] #trackCampaignModal .table thead {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
html[data-theme="light"] #trackCampaignModal .modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #trackCampaignModal .modal-footer {
    border-top: 1px solid #e2e8f0 !important;
}


html[data-theme="light"] .chat-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .chat-header-name {
    color: #0f172a !important;
}
html[data-theme="light"] #backToConvBtn {
    color: #0f172a !important;
}
html[data-theme="light"] .conv-badge-fb {
    background: rgba(0, 132, 255, 0.12) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(0, 132, 255, 0.3) !important;
}

/* ==========================================================================
   WhatsApp & Facebook Message History Pages - Light Theme Overrides
   Uses Royal Purple (#2a1045) from Sidebar for Filter Card & Header Accents
   ========================================================================== */

/* 1. Filter Card - Elegant Royal Purple matching the Sidebar & Navbar */
html[data-theme="light"] .filter-card {
    background: linear-gradient(135deg, #2a1045 0%, #1e0935 100%) !important;
    border: 1px solid #431a6d !important;
    box-shadow: 0 4px 18px rgba(42, 16, 69, 0.18) !important;
}

html[data-theme="light"] .filter-card .form-control {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .filter-card .form-control::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .filter-card .form-control:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25) !important;
}

/* 2. Stat Metric Cards in Light Mode */
html[data-theme="light"] .msg-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .msg-stat-card .text-white,
html[data-theme="light"] .msg-stat-card .h4 {
    color: #0f172a !important;
}

html[data-theme="light"] .msg-stat-card .text-muted {
    color: #64748b !important;
}

/* 3. Message History Table Card in Light Mode */
html[data-theme="light"] .history-table-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .history-table-card thead,
html[data-theme="light"] .history-table-card thead tr {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

html[data-theme="light"] .history-table-card thead th {
    color: #475569 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] .history-table-card table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .history-table-card table tbody tr:hover {
    background: rgba(42, 16, 69, 0.03) !important;
}

html[data-theme="light"] .history-table-card table tbody td {
    color: #1e293b !important;
}

html[data-theme="light"] .history-table-card table tbody td .text-white {
    color: #0f172a !important;
}

html[data-theme="light"] .history-table-card table tbody td strong {
    color: #0f172a !important;
}

html[data-theme="light"] .history-table-card .card-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* 4. Details Inspection Modal in Light Mode */
html[data-theme="light"] .msg-modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .msg-modal-header {
    background: linear-gradient(135deg, #2a1045 0%, #3b1660 100%) !important;
    border-bottom: 1px solid #431a6d !important;
}

html[data-theme="light"] .content-wrapper .modal-content .msg-modal-header h5,
html[data-theme="light"] .content-wrapper .modal-content .msg-modal-header .text-white,
html[data-theme="light"] .content-wrapper .modal-content .msg-modal-header .msg-modal-title,
html[data-theme="light"] .msg-modal-header h5,
html[data-theme="light"] .msg-modal-header .text-white,
html[data-theme="light"] .msg-modal-header .msg-modal-title,
html[data-theme="light"] .modal-header.text-white,
html[data-theme="light"] .modal-header.text-white .modal-title,
html[data-theme="light"] .modal-header.text-white h5 {
    color: #ffffff !important;
}

html[data-theme="light"] .content-wrapper .modal-content .msg-modal-header .text-muted,
html[data-theme="light"] .msg-modal-header .text-muted {
    color: #d8b4fe !important;
}

html[data-theme="light"] .msg-info-tile {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .msg-info-tile .tile-label {
    color: #64748b !important;
}

html[data-theme="light"] .msg-info-tile .tile-val {
    color: #0f172a !important;
}

html[data-theme="light"] .msg-bubble-card {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .msg-bubble-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}