/* dark-theme.css – Scoralia system dark mode */

@media (prefers-color-scheme: dark) {
    /* ---------- root variables ---------- */
    :root {
        --ink:          #0C1446;
        --ink-light:    #1a2555;
        --deep:         #4a90e2;
        --deep-light:   #5a9eef;
        --mist:         #2a3a5e;
        --mist-light:   #3b4d7a;
        --white:        #1a1a2e;
        --off-white:    #0f1525;
        --surface:      #16213e;
        --surface-2:    #1f2b47;
        --text-body:    #e0e0e0;
        --text-muted:   #a0aec0;
        --text-light:   #7a8ca0;
        --gold:         #C8A96E;           /* keep gold */
        --gold-hover:   #ddb97a;
        --gold-light:   #3b2e1a;
        --accent:       #4a90e2;
        --success:      #2E7D32;
        --error:        #e53e3e;
        --warning:      #d97706;

        --gradient-primary: linear-gradient(135deg, var(--ink) 0%, var(--deep) 60%, #2a4a7a 100%);
        --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-hover) 100%);
        --gradient-surface: linear-gradient(180deg, var(--surface) 0%, var(--off-white) 100%);
        --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);

        --glass-bg: rgba(26, 26, 46, 0.7);
        --glass-bg-dark: rgba(12, 20, 70, 0.85);
        --glass-border: rgba(255,255,255,0.1);
        --glass-border-dark: rgba(179,205,224,0.1);
        --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);

        --shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
        --shadow-sm:  0 2px 12px rgba(0,0,0,0.4);
        --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
        --shadow-lg:  0 20px 60px rgba(0,0,0,0.6);
        --shadow-xl:  0 30px 80px rgba(0,0,0,0.7);
        --shadow-glow: 0 0 40px rgba(200,169,110,0.15);
        --shadow-gold: 0 8px 24px rgba(200,169,110,0.15);
    }

    /* ---------- base ---------- */
    html, body {
        background-color: var(--off-white);
        color: var(--text-body);
    }
    a {
        color: var(--deep);
    }
    a:hover {
        color: var(--text-body);
    }

    /* ---------- header / nav ---------- */
    header, .header-glass, .header-inner {
        background: rgba(12, 20, 70, 0.97) !important;
        backdrop-filter: blur(12px);
        border-bottom-color: rgba(255,255,255,0.05);
    }
    nav ul li a {
        color: rgba(255,255,255,0.75);
    }
    nav ul li a:hover {
        color: #fff;
    }

    /* ---------- cards ---------- */
    .card, .listing-card, .post-card, .topic-card, .user-card,
    .content-card, .config-card, .report-card, .message-card,
    .error-card, .investigation-card, .admin-card, .tag-card,
    .saved-card, .mini-book-card, .related-card, .listing-selector-item,
    .conversation-item, .way-item, .btn-action, .btn,
    .modal-card, .locked-card, .request-card, .warning-modal,
    .settings-row, .setting-row, .listing-info, .activity-card,
    .sheet-content, .topic-header {
        background-color: var(--white);
        border-color: rgba(255,255,255,0.08);
        box-shadow: var(--shadow-sm);
    }
    .card:hover, .listing-card:hover, .post-card:hover,
    .topic-card:hover, .user-card:hover, .saved-card:hover {
        box-shadow: var(--shadow-md);
    }

    /* ---------- inputs, selects, textareas ---------- */
    input, select, textarea, .input, .form-input, .search-input,
    .composer-input, .comment-input, .quick-msg-input,
    .tag-container, .search-box input, .search-box select {
        background-color: var(--surface) !important;
        color: var(--text-body) !important;
        border-color: rgba(255,255,255,0.15) !important;
    }
    input::placeholder, textarea::placeholder {
        color: var(--text-muted) !important;
    }

    /* ---------- buttons (overrides for ghost/outline) ---------- */
    .btn-ghost, .btn-outline {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.15);
        color: var(--text-body);
    }
    .btn-ghost:hover, .btn-outline:hover {
        background: rgba(255,255,255,0.1);
    }
    .btn-hero-ghost {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.3);
        color: #fff;
    }

    /* ---------- dropdowns, modals, overlays ---------- */
    .dropdown-menu, .post-dropdown, .suggestions-box,
    .modal-card, .modal-overlay, .login-modal-card,
    .locked-card, .request-card, .warning-modal,
    .sheet-overlay, .bottom-sheet, .lang-modal {
        background: var(--white) !important;
        color: var(--text-body) !important;
        border-color: rgba(255,255,255,0.1);
    }
    .modal-overlay, .sheet-overlay {
        background: rgba(0,0,0,0.8) !important;
        backdrop-filter: blur(6px);
    }

    /* ---------- badges, tags, pills ---------- */
    .badge, .tag-pill, .meta-tag, .condition-tag,
    .status-badge, .role-badge, .listing-badge {
        background: var(--surface);
        color: var(--text-body);
        border-color: rgba(255,255,255,0.1);
    }
    .tag-pill:hover, .badge:hover {
        background: var(--deep);
        color: var(--white);
    }

    /* ---------- unread dots ---------- */
    .unread-dot, .unread-badge {
        background-color: var(--error) !important;
        color: white;
    }

    /* ---------- composer, comment areas ---------- */
    .composer, .comment-composer-area, .composer-content,
    .comment-content, .composer-preview-area {
        background-color: var(--surface) !important;
        border-color: rgba(255,255,255,0.1);
    }

    /* ---------- sidebar, topics menu ---------- */
    .sidebar, .topics-menu, .topic-section-title,
    .way-item, .mobile-ways-bar {
        background: transparent;
        color: var(--text-body);
    }
    .way-item.active {
        background: var(--white);
        box-shadow: var(--shadow-sm);
    }

    /* ---------- page specific overrides for common classes ---------- */
    .filter-bar, .school-filter, .tab-btn, .btn-pin, .btn-save,
    .btn-report-profile, .btn-message-profile, .btn-action,
    .btn-load-more, .btn-composer-send, .btn-comment-send,
    .send-btn, .btn-send, .btn-submit {
        background: var(--deep);
        color: white;
    }
    .school-filter.active {
        background: var(--ink);
    }

    .listing-image, .saved-img, .mini-img, .related-img {
        background-color: var(--surface);
    }
    .listing-price, .saved-price, .mini-price, .related-price {
        color: var(--deep);
    }

    .post-body, .comment-text {
        color: #c0c8d0;
    }

    /* ---------- footer ---------- */
    footer {
        background: var(--ink);
        border-top-color: rgba(255,255,255,0.05);
    }

    /* ---------- global.js injected dropdown fixes ---------- */
    .dropdown-menu {
        background: var(--white) !important;
        color: var(--text-body) !important;
    }
    .dropdown-header {
        background: var(--surface) !important;
        color: var(--text-body) !important;
        border-bottom-color: rgba(255,255,255,0.1) !important;
    }
    .dropdown-header .username {
        color: var(--text-muted) !important;
    }
    .dropdown-item {
        color: var(--text-body) !important;
    }
    .dropdown-item:hover {
        background-color: var(--surface-2) !important;
        color: var(--deep) !important;
    }

    /* ---------- INDEX PAGE SPECIFIC ---------- */
    .hero {
        background: linear-gradient(135deg, var(--ink) 0%, var(--deep) 60%, #1a2a4a 100%);
    }
    .hero h1, .hero p, .hero .hero-badge,
    .how-inner .section-title, .how-sub, .step-card h3, .step-card p {
        color: var(--white);
    }
    .stats-bar {
        background: var(--ink);
    }
    .search-section {
        background: var(--surface);
    }
    .search-box {
        background: var(--white);
        border-color: rgba(255,255,255,0.1);
    }
    .how-section {
        background: linear-gradient(135deg, var(--ink) 0%, var(--deep) 100%);
    }
    .step-card {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.1);
    }
    .step-icon {
        background: rgba(200,169,110,0.15);
        border-color: rgba(200,169,110,0.4);
    }
    .tags-grid .tag-pill {
        background: var(--white);
        color: var(--text-body);
    }
    .tags-grid .tag-pill:hover {
        background: var(--ink);
        color: var(--white);
    }
    .listings-header .item-count {
        background: var(--surface);
        color: var(--text-body);
    }
    .topics-section {
        background: var(--off-white);
    }
    .topic-card {
        background: var(--white);
        color: var(--text-body);
    }
}