/* ===================================
   NEWZANDER - DARK MODE & LIGHT MODE FIXES
   Location: /assets/css/dark-mode.css
   =================================== */

/* ========== CSS VARIABLES ========== */
:root {
    --bg-main: #f9fafb;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --bg-main: #0f172a;
    --bg-elevated: #1e293b;
    --bg-input: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   LIGHT MODE ONLY - TEXT VISIBILITY FIXES
   Uses :not([data-theme="dark"]) to never affect dark mode
========================================== */

html:not([data-theme="dark"]) body .trust-card h3 {
    color: #1f2937 !important;
}

html:not([data-theme="dark"]) body .trust-card p {
    color: #4b5563 !important;
}

html:not([data-theme="dark"]) body .trust-section h2 {
    color: #111827 !important;
}

html:not([data-theme="dark"]) body .trust-section .container > p {
    color: #6b7280 !important;
}

html:not([data-theme="dark"]) body .products-section h2 {
    color: #111827 !important;
}

html:not([data-theme="dark"]) body .products-section .container p {
    color: #6b7280 !important;
}

html:not([data-theme="dark"]) body .product-name {
    color: #111827 !important;
}

html:not([data-theme="dark"]) body .product-vendor {
    color: #6b7280 !important;
}

/* ==========================================
   DARK MODE - FULL PAGE BACKGROUND
========================================== */

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

[data-theme="dark"] section,
[data-theme="dark"] .hero,
[data-theme="dark"] .trust-section,
[data-theme="dark"] .products-section,
[data-theme="dark"] .cta-section,
[data-theme="dark"] main,
[data-theme="dark"] .page-content {
    background: var(--bg-main) !important;
}

[data-theme="dark"] .header,
[data-theme="dark"] header,
[data-theme="dark"] nav {
    background: #0f172a !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background: #0f172a !important;
    border-top-color: var(--border) !important;
}

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

/* ==========================================
   DARK MODE - ALL HEADINGS BRIGHT WHITE
========================================== */

[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: #f1f5f9 !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] label,
[data-theme="dark"] strong,
[data-theme="dark"] small {
    color: #94a3b8 !important;
}

/* Inline dark colors → light */
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"] {
    color: #f1f5f9 !important;
}

[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#9ca3af"] {
    color: #94a3b8 !important;
}

/* ==========================================
   DARK MODE - TRUST SECTION (Step cards)
========================================== */

[data-theme="dark"] .trust-section {
    background: var(--bg-main) !important;
}

[data-theme="dark"] .trust-card {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .trust-card h3 {
    color: #60a5fa !important;
}

[data-theme="dark"] .trust-card p {
    color: #94a3b8 !important;
}

/* ==========================================
   DARK MODE - PRODUCTS SECTION
========================================== */

[data-theme="dark"] .products-section {
    background: var(--bg-main) !important;
}

[data-theme="dark"] .products-section h2 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .products-section p {
    color: #94a3b8 !important;
}

[data-theme="dark"] .product-card {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .product-name {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .product-vendor {
    color: #94a3b8 !important;
}

[data-theme="dark"] .product-price {
    color: #60a5fa !important;
}

/* ==========================================
   DARK MODE - HERO SECTION
========================================== */

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%) !important;
}

[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero p,
[data-theme="dark"] .hero span {
    color: #ffffff !important;
}

/* ==========================================
   DARK MODE - CTA SECTION
========================================== */

[data-theme="dark"] .cta-section {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
}

[data-theme="dark"] .cta-section h2,
[data-theme="dark"] .cta-section p {
    color: #ffffff !important;
}

/* ==========================================
   DARK MODE - CARDS & CONTAINERS
========================================== */

[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .trust-card,
[data-theme="dark"] .dashboard-card {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"] {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"] {
    background: var(--bg-main) !important;
}

/* ==========================================
   DARK MODE - BADGES
========================================== */

[data-theme="dark"] .badge-escrow-held,
[data-theme="dark"] .badge-warning {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid #fbbf24 !important;
}

[data-theme="dark"] .badge-escrow-released,
[data-theme="dark"] .badge-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid #34d399 !important;
}

[data-theme="dark"] .badge-escrow-refunded,
[data-theme="dark"] .badge-error {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid #f87171 !important;
}

[data-theme="dark"] .badge-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid #60a5fa !important;
}

[data-theme="dark"] [style*="background: #d1fae5"],
[data-theme="dark"] [style*="background:#d1fae5"] {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid #34d399 !important;
    color: #34d399 !important;
}

[data-theme="dark"] [style*="color: #065f46"],
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color: #047857"],
[data-theme="dark"] [style*="color:#047857"] {
    color: #34d399 !important;
}

[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#fef3c7"] {
    background: rgba(251, 191, 36, 0.2) !important;
    border: 1px solid #fbbf24 !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color: #92400e"],
[data-theme="dark"] [style*="color:#92400e"] {
    color: #fbbf24 !important;
}

[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fee2e2"] {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid #f87171 !important;
    color: #f87171 !important;
}

[data-theme="dark"] [style*="color: #991b1b"],
[data-theme="dark"] [style*="color:#991b1b"] {
    color: #f87171 !important;
}

[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#eff6ff"] {
    background: rgba(59, 130, 246, 0.2) !important;
    border: 1px solid #60a5fa !important;
    color: #60a5fa !important;
}

[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#1e40af"] {
    color: #60a5fa !important;
}

/* ==========================================
   DARK MODE - FORMS
========================================== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

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

[data-theme="dark"] .form-help {
    color: var(--text-secondary) !important;
}

/* ==========================================
   DARK MODE - BUTTONS
========================================== */

/* All .btn elements keep white text in dark mode */
[data-theme="dark"] .btn,
[data-theme="dark"] a.btn,
[data-theme="dark"] button.btn {
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] button.btn-secondary {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

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

[data-theme="dark"] .btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #0f172a !important;
}

[data-theme="dark"] .btn-ghost {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ==========================================
   DARK MODE - TABLES
========================================== */

[data-theme="dark"] table {
    background: var(--bg-elevated) !important;
}

[data-theme="dark"] thead {
    background: var(--bg-main) !important;
}

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

[data-theme="dark"] tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================
   DARK MODE - ALERTS
========================================== */

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

[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}

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

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

/* ==========================================
   DARK MODE - LINKS & NAV
========================================== */

[data-theme="dark"] a {
    color: #60a5fa !important;
}

[data-theme="dark"] a:hover {
    color: #93c5fd !important;
}

[data-theme="dark"] .nav-menu a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-menu a:hover {
    background: var(--bg-elevated) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .sidebar-nav a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .sidebar-nav a:hover,
[data-theme="dark"] .sidebar-nav a.active {
    background: var(--bg-elevated) !important;
    color: #60a5fa !important;
}

/* ==========================================
   DARK MODE - MOBILE NAV
========================================== */

[data-theme="dark"] .mobile-nav {
    background: #0f172a !important;
    border-color: var(--border) !important;
}

/* ==========================================
   DARK MODE - IMAGES
========================================== */

[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* ==========================================
   TRANSITIONS - SMOOTH THEME SWITCH
========================================== */

*,
*::before,
*::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}