/* ============================================================ DocuAPI — Dark Mode Overrides Applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { /* ── Color Overrides ─────────────────────────────────────── */ --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #263248; --color-border: #334155; --color-border-strong: #475569; /* Text */ --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-light: #64748b; /* Status backgrounds */ --color-success-bg: rgba(22,163,74,.15); --color-error-bg: rgba(220,38,38,.15); --color-warning-bg: rgba(217,119,6,.15); --color-info-bg: rgba(14,165,233,.15); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 10px 30px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); --shadow-xl: 0 20px 60px rgba(0,0,0,.7); } /* ── Navbar ─────────────────────────────────────────────────── */ [data-theme="dark"] .navbar { background: rgba(15,23,42,.92); border-bottom-color: var(--color-border); } [data-theme="dark"] .nav-logo, [data-theme="dark"] .nav-logo:hover { color: var(--color-text); } [data-theme="dark"] .nav-links a { color: var(--color-text-muted); } [data-theme="dark"] .nav-links a:hover { background: var(--color-surface-2); color: var(--color-text); } [data-theme="dark"] .nav-avatar-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .nav-dropdown { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .nav-dropdown-item { color: var(--color-text-muted); } [data-theme="dark"] .nav-dropdown-item:hover { background: var(--color-surface-2); color: var(--color-text); } [data-theme="dark"] .mobile-menu { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .mobile-menu a:hover { background: var(--color-surface-2); } /* ── Buttons ────────────────────────────────────────────────── */ [data-theme="dark"] .btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } [data-theme="dark"] .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); } [data-theme="dark"] .btn-icon { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .btn-icon:hover { color: var(--color-text); border-color: var(--color-accent); } /* ── Form elements ───────────────────────────────────────────── */ [data-theme="dark"] .form-control { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-control::placeholder { color: var(--color-text-light); } [data-theme="dark"] .form-control:focus { border-color: var(--color-accent); background: var(--color-surface); } [data-theme="dark"] label { color: var(--color-text); } [data-theme="dark"] .form-check-input { background: var(--color-surface-2); border-color: var(--color-border); } /* ── Cards ───────────────────────────────────────────────────── */ [data-theme="dark"] .card, [data-theme="dark"] .feature-card, [data-theme="dark"] .service-card, [data-theme="dark"] .step-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .dash-service-card, [data-theme="dark"] .api-key-card, [data-theme="dark"] .ip-item { background: var(--color-surface); border-color: var(--color-border); } /* ── Auth card ───────────────────────────────────────────────── */ [data-theme="dark"] .auth-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .auth-title { color: var(--color-text); } [data-theme="dark"] .auth-brand { color: #fff; } /* ── Landing page sections ───────────────────────────────────── */ [data-theme="dark"] .hero { background: linear-gradient(160deg, #0f172a 0%, #141e2e 40%, #0d1f1e 100%); } [data-theme="dark"] .hero-title { color: #fff; } [data-theme="dark"] .hero-stat strong { color: var(--color-accent-light); } [data-theme="dark"] .section-title { color: #e2e8f0; } [data-theme="dark"] .features-section, [data-theme="dark"] .services-section, [data-theme="dark"] .dev-section { background: var(--color-bg); } [data-theme="dark"] .how-section { background: linear-gradient(180deg, var(--color-bg) 0%, #141e2e 100%); } [data-theme="dark"] .trust-section { background: var(--color-surface-2); border-color: var(--color-border); } /* ── Service pricing ────────────────────────────────────────── */ [data-theme="dark"] .service-pricing, [data-theme="dark"] .dash-service-pricing { background: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .price-value { color: #e2e8f0; } [data-theme="dark"] .price-hit { color: var(--color-accent-light); } /* ── Tables ──────────────────────────────────────────────────── */ [data-theme="dark"] .table-wrap { border-color: var(--color-border); } [data-theme="dark"] thead th { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); } [data-theme="dark"] tbody td { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] tbody tr:hover { background: var(--color-surface-2); } /* ── Dashboard topbar ────────────────────────────────────────── */ [data-theme="dark"] .dashboard-topbar { background: var(--color-surface); border-color: var(--color-border); } /* ── Badges ──────────────────────────────────────────────────── */ [data-theme="dark"] .badge-active { background: rgba(22,163,74,.2); color: #4ade80; } [data-theme="dark"] .badge-inactive{ background: rgba(100,116,139,.15); color: #94a3b8; } [data-theme="dark"] .badge-blocked { background: rgba(220,38,38,.2); color: #f87171; } [data-theme="dark"] .badge-get { background: rgba(29,78,216,.2); color: #93c5fd; } [data-theme="dark"] .badge-post { background: rgba(124,58,237,.2); color: #c4b5fd; } /* ── Alerts ──────────────────────────────────────────────────── */ [data-theme="dark"] .alert-error { background: var(--color-error-bg); color: #fca5a5; border-color: rgba(220,38,38,.3); } [data-theme="dark"] .alert-success { background: var(--color-success-bg); color: #86efac; border-color: rgba(22,163,74,.3); } [data-theme="dark"] .alert-warning { background: var(--color-warning-bg); color: #fcd34d; border-color: rgba(217,119,6,.3); } [data-theme="dark"] .alert-info { background: var(--color-info-bg); color: #7dd3fc; border-color: rgba(14,165,233,.3); } [data-theme="dark"] .flash-success { background: rgba(22,163,74,.15); color: #86efac; border-color: rgba(22,163,74,.3); } [data-theme="dark"] .flash-error { background: rgba(220,38,38,.15); color: #fca5a5; border-color: rgba(220,38,38,.3); } [data-theme="dark"] .flash-warning { background: rgba(217,119,6,.15); color: #fcd34d; border-color: rgba(217,119,6,.3); } [data-theme="dark"] .flash-info { background: rgba(14,165,233,.15); color: #7dd3fc; border-color: rgba(14,165,233,.3); } /* ── Modal ───────────────────────────────────────────────────── */ [data-theme="dark"] .modal { background: var(--color-surface); border: 1px solid var(--color-border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--color-border); } [data-theme="dark"] .modal-close { color: var(--color-text-muted); } [data-theme="dark"] .modal-close:hover { color: var(--color-text); } /* ── Quick amounts ───────────────────────────────────────────── */ [data-theme="dark"] .quick-amount-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .quick-amount-btn:hover, [data-theme="dark"] .quick-amount-btn.selected { border-color: var(--color-accent); color: var(--color-accent-light); background: rgba(13,148,136,.1); } /* ── Chart period buttons ────────────────────────────────────── */ [data-theme="dark"] .chart-period-btn { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .chart-period-btn.active, [data-theme="dark"] .chart-period-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ── Page buttons (pagination) ───────────────────────────────── */ [data-theme="dark"] .page-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .page-btn:hover { border-color: var(--color-accent); color: var(--color-accent-light); } [data-theme="dark"] .page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ── Transitions ─────────────────────────────────────────────── */ body, .navbar, .card, .feature-card, .service-card, .auth-card, .modal, .form-control, .sidebar, .btn, .badge { transition-property: background-color, border-color, color, box-shadow; transition-duration: var(--transition); }