/* ===== DARK MODE STYLES ===== */

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #3b82f6;
        --primary-hover: #2563eb;
        --secondary: #94a3b8;
        --success: #34d399;
        --warning: #fbbf24;
        --danger: #f87171;
        --info: #38bdf8;
        --bg-main: #0f172a;
        --bg-card: #1e293b;
        --text-main: #f1f5f9;
        --text-muted: #94a3b8;
        --text-light: #f8fafc;
        --border: #334155;
        --glass: rgba(255, 255, 255, 0.03);
        --glass-bg: rgba(30, 41, 59, 0.8);
        --glass-border: #334155;
        --shadow-premium: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        --gradient-success: linear-gradient(135deg, #34d399 0%, #059669 100%);
        --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        --gradient-danger: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
        --gradient-info: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    }

    body {
        background-image:
            radial-gradient(at 0% 0%, hsla(220, 20%, 15%, 1) 0, transparent 50%),
            radial-gradient(at 50% 0%, hsla(215, 25%, 12%, 0.5) 0, transparent 50%),
            radial-gradient(at 100% 0%, hsla(210, 15%, 10%, 0.3) 0, transparent 50%);
    }

    nav {
        background: rgba(15, 23, 42, 0.82);
    }

    @media (max-width: 768px) {
        nav {
            background: var(--bg-card);
        }
    }

    .glass-card {
        background: var(--bg-card);
    }

    .glass-card:hover {
        border-color: var(--primary);
    }

    .btn-secondary {
        background: var(--bg-card);
        color: var(--text-main);
    }

    .btn-secondary:hover {
        background: var(--bg-main);
    }

    /* Input styles */
    .input-group input,
    .input-group select,
    .input-group textarea {
        background: var(--bg-main);
        color: var(--text-main);
    }

    .input-group select option {
        background-color: var(--bg-card);
        color: var(--text-main);
    }

    .input-group input:focus {
        background: rgba(255, 255, 255, 0.03);
    }

    /* Sidebar */
    .sidebar {
        background: var(--bg-card);
    }

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Stats */
    .stat-card {
        background: var(--glass-bg);
    }

    .stat-card:hover {
        background: rgba(30, 41, 59, 0.9);
    }

    /* Landing page specific */
    .status-check-container {
        background: var(--bg-card);
    }

    .search-box {
        background: var(--bg-main);
    }

    .search-box:focus-within {
        background: var(--bg-card);
    }

    .search-box input {
        color: var(--text-main);
    }

    .result-card {
        background: var(--bg-card);
    }

    .result-card .result-info-grid {
        background: var(--bg-main);
        border-color: var(--border);
    }

    .result-card .status-timeline {
        background: var(--bg-main);
        border-color: var(--border);
    }

    .result-card .timeline-track {
        background: #475569;
    }

    .result-card .timeline-step .step-dot {
        background: var(--bg-card);
    }

    .result-card .reply-box {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
    }

    .result-card .reply-box .reply-text {
        color: #93c5fd;
    }

    .result-card .reply-box.tech-note {
        background: rgba(251, 191, 36, 0.1);
        border-color: rgba(251, 191, 36, 0.2);
    }

    .result-card .reply-box.tech-note .reply-text {
        color: #fcd34d;
    }

    .result-card .desc-text {
        color: #cbd5e1;
    }

    .pagination-container {
        background: var(--bg-card);
    }

    .btn-pagination {
        background: var(--bg-card);
        color: var(--text-main);
    }

    .btn-pagination:disabled {
        background: var(--bg-main);
    }

    .ticker-container {
        background: var(--bg-card);
    }

    .ticker-wrap {
        background: var(--bg-main);
    }

    .ticker-wrap::before {
        background: linear-gradient(to right, var(--bg-main), transparent);
    }

    .ticker-wrap::after {
        background: linear-gradient(to left, var(--bg-main), transparent);
    }

    .ticker-item {
        color: #cbd5e1;
    }

    .ticker-item strong {
        color: #f1f5f9;
    }

    .ticker-item .meta-info {
        color: #94a3b8;
        background: var(--border);
    }

    .search-results .results-count {
        background: var(--border);
    }

    .result-card .result-id {
        background: var(--border);
    }

    .info-box {
        background: var(--bg-card);
    }

    .complaint-card {
        background: var(--bg-card);
    }

    .photo-gallery,
    .compare-col {
        background: var(--bg-main);
    }

    .photo-gallery-header,
    .compare-col-header {
        background: var(--border);
    }

    .photo-thumb,
    .compare-thumb {
        background: var(--bg-card);
    }

    .sidebar-footer {
        border-top-color: var(--border);
    }

    .sidebar-link.active {
        background: var(--primary);
    }

    .stat-info h3 {
        color: var(--text-muted);
    }

    .stat-info .stat-value {
        color: var(--text-light);
    }

    /* Scrollbar */
    ::-webkit-scrollbar-thumb {
        background: var(--border);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--secondary);
    }
}