/*
 * dark-mode.css
 *
 * Comprehensive dark mode coverage for:
 *   hub.css, drawers.css, chat-ui.css,
 *   modal-fullscreen.css, modal-ui.css (gaps)
 *
 * Drop this after all other CSS files.
 * All rules are scoped to @media (prefers-color-scheme: dark).
 */

/* ==============================
   MAIN
   ============================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:   #0f1117;
        --card: #1c1f26;
        --ink:  #f0f2f5;
        --muted: #9ca3af;
        --line: #2d3140;
        --badge: #1e2235;
    }

    /* Body + page background */
    body {
        background: var(--bg);
        color: var(--ink);
    }

    /* Cards */
    .card,
    .sale-card {
        background: var(--card);
        box-shadow: 0 4px 14px rgba(0,0,0,.35);
    }

    /* Quick action buttons (Browse Loads, Browse Market, Post Load, Post Sale) */
    .btn.secondary {
        background: #252933;
        color: var(--ink);
        border-color: var(--line);
    }

    .btn.secondary:hover {
        background: #2e3340;
        border-color: var(--brand);
    }

    /* All text inputs, selects, textareas */
    input,
    select,
    textarea {
        background: #252933;
        color: var(--ink);
        border-color: var(--line);
    }

    input::placeholder,
    textarea::placeholder {
        color: #6b7280;
    }

    /* Search icon inside wrapper */
    .search-input-wrapper .search-icon {
        color: #6b7280;
    }

    /* Filter chips */
    .filter-chip {
        background: #252933;
        border-color: var(--line);
        color: var(--ink);
    }

    /* Bottom tab bar */
    .tabs {
        background: #1c1f26;
        border-top-color: var(--line);
    }

    .tab {
        color: #9ca3af;
    }

    /* Skeleton loaders */
    .skeleton {
        background: linear-gradient(90deg, #1e2130 25%, #252935 50%, #1e2130 75%);
        background-size: 200% 100%;
    }

    /* Auth modal */
    #auth .box {
        background: var(--card);
        color: var(--ink);
    }

    /* Settings drawer profile info bar */
    #settingsProfileInfo {
        background: #252933 !important;
        border-bottom-color: var(--line) !important;
    }

    /* Startup spinner background */
    #startupSpinner {
        background: rgba(15,17,23,0.97) !important;
    }

    #startupSpinner div[style] {
        color: #f0f2f5 !important;
    }
}

/* ============================================================
   HUB (hub.css)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* Hub dropdown panel */
    #hubDropdown {
        background: #1c1f26;
        box-shadow: 0 8px 18px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    }

    /* Dropdown buttons */
    #hubDropdown .account-tab-btn-enhanced {
        color: #e5e7eb;
    }

    #hubDropdown .account-tab-btn-enhanced + .account-tab-btn-enhanced {
        border-top-color: #2d3140;
    }

    @media (hover: hover) {
        #hubDropdown .account-tab-btn-enhanced:hover {
            background: rgba(32, 165, 138, 0.12);
        }
    }

    #hubDropdown .account-tab-btn-enhanced:active {
        background: rgba(32, 165, 138, 0.18);
    }

    /* Hub nav tab buttons (scroll bar) */
    .account-tab-btn-enhanced {
        background: none;
        color: #9ca3af;
    }

    .account-tab-btn-enhanced.active {
        background: rgba(32, 165, 138, 0.12);
        color: #20a58a;
    }

    /* Notification items */
    .notification-item {
        background: #1c1f26;
        border-color: #2d3140;
        color: #e5e7eb;
    }

    .notification-item:hover {
        background: #252933;
        border-color: #3a3f50;
    }

    .notification-item.unread {
        background: #0d2a1e;
        border-left-color: #20a58a;
    }

    .notification-title {
        color: #f0f2f5;
    }

    .notification-message {
        color: #d1d5db;
    }

    .notification-details {
        color: #9ca3af;
    }

    .notification-time {
        color: #6b7280;
    }

    /* Alert items (hub alerts list) */
    .alert-route-primary {
        color: #f0f2f5;
    }

    .alert-route-secondary {
        color: #9ca3af;
    }

    .alert-cargo {
        color: #9ca3af;
    }

    /* Alert delete button */
    .alert-delete {
        color: #6b7280;
    }

    .alert-delete:hover {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.15);
    }
}


/* ============================================================
   DRAWERS (drawers.css)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* ---- Settings Drawer ---- */
    #settingsDrawer .drawer-content {
        background: #1c1f26;
        box-shadow: 2px 0 16px rgba(0,0,0,.5);
    }

    .drawer-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .drawer-header h3 {
        color: #f0f2f5;
    }

    .settings-section {
        border-bottom-color: #2d3140;
    }

    .settings-item:hover {
        background: rgba(255,255,255,.04);
    }

    .settings-item:active {
        background: rgba(255,255,255,.08);
    }

    .settings-section .btn.warning {
        background: #252933 !important;
        color: #9ca3af !important;
        border-color: #2d3140 !important;
    }

    .settings-section .btn.warning:hover {
        background: #2e3340 !important;
        color: #d1d5db !important;
    }

    /* ---- Report Drawer ---- */
    .report-header {
        border-bottom-color: #2d3140;
    }

    .report-title {
        color: #f0f2f5;
    }

    .report-subtitle {
        color: #9ca3af;
    }

    .report-listing-preview {
        border-bottom-color: #2d3140;
    }

    .preview-card {
        background: #252933;
    }

    .preview-image-placeholder {
        background: #2d3140;
    }

    .preview-image-placeholder svg {
        color: #6b7280;
    }

    .preview-title {
        color: #f0f2f5;
    }

    .preview-meta {
        color: #9ca3af;
    }

    .section-label {
        color: #f0f2f5;
    }

    .section-hint {
        color: #9ca3af;
    }

    .report-reason-item {
        background: #1c1f26;
        border-color: #2d3140;
    }

    .report-reason-item.selected {
        background: #0d2a1e;
        border-color: #20a58a;
    }

    .reason-checkbox {
        background: #252933;
        border-color: #3a3f50;
    }

    .reason-label {
        color: #f0f2f5;
    }

    .reason-description {
        color: #9ca3af;
    }

    .report-textarea {
        background: #252933;
        border-color: #2d3140;
        color: #f0f2f5;
    }

    .report-textarea:focus {
        border-color: #20a58a;
        box-shadow: 0 0 0 3px rgba(32, 165, 138, 0.15);
    }

    .char-counter {
        color: #6b7280;
    }

    .report-drawer .drawer-footer {
        background: #1c1f26;
        border-top-color: #2d3140;
    }

    .report-drawer .btn-secondary {
        background: #252933;
        color: #d1d5db;
    }

    .report-drawer .btn-secondary:active {
        background: #2d3140;
    }

    /* ---- About Modal ---- */
    .about-dialog {
        background: #1c1f26;
    }

    .about-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .about-title {
        color: #f0f2f5;
    }

    .about-close {
        background: #252933;
        color: #d1d5db;
    }

    .about-close:hover {
        background: #2d3140;
    }

    .about-app-title {
        color: #f0f2f5;
    }

    .about-tagline {
        color: #9ca3af;
    }

    .about-version {
        background: #252933;
    }

    .version-label {
        color: #9ca3af;
    }

    .about-description {
        color: #d1d5db;
    }

    .about-section {
        background: #252933;
    }

    .about-section h4 {
        color: #f0f2f5;
    }

    .about-section li {
        color: #d1d5db;
    }

    .about-link {
        background: #252933;
        border-color: #2d3140;
        color: #20a58a;
    }

    .about-link:hover {
        border-color: #20a58a;
        box-shadow: 0 4px 12px rgba(0,0,0,.35);
    }

    .about-footer {
        border-top-color: #2d3140;
    }

    .about-footer p {
        color: #9ca3af;
    }

    .about-legal-links span {
        color: #6b7280;
    }
}


/* ============================================================
   CHAT UI (chat-ui.css)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* Chat header */
    .chat-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .chat-header-compact {
        background: #252933;
        border-color: #2d3140;
    }

    .chat-load-route,
    .chat-load-meta {
        color: #9ca3af;
    }

    .chat-load-id {
        background: #252933;
        color: #9ca3af;
    }

    /* Messages area */
    .chat-container {
        background: #15181f;
    }

    /* Received bubbles */
    .message-received {
        background: #252933;
        color: #e5e7eb;
        border-color: #2d3140;
    }

    .message-received .message-timestamp {
        color: #9ca3af;
    }

    /* Context cards inside received bubbles */
    .message-received .message-context {
        background: #1c1f26;
        border-left-color: #20a58a;
    }

    .message-received .message-context-title {
        color: #f0f2f5;
    }

    .message-received .message-context-route,
    .message-received .message-context-location {
        color: #9ca3af;
    }

    /* Input area */
    .chat-input-container {
        background: #1c1f26;
        border-top-color: #2d3140;
    }

    .chat-input-wrapper {
        background: #252933;
        border-color: #2d3140;
    }

    .chat-input {
        color: #f0f2f5;
    }

    .chat-input::placeholder {
        color: #6b7280;
    }

    /* Conversation list */
    .conversations-list {
        background: #1c1f26;
    }

    .conversation-item {
        border-bottom-color: #2d3140;
    }

    .conversation-item:hover {
        background: #252933;
    }

    .conversation-title {
        color: #f0f2f5;
    }

    .conversation-preview {
        color: #9ca3af;
    }

    .conversation-time {
        color: #6b7280;
    }

    /* Account tabs scroll bar */
    .account-tabs-scroll {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    /* Date separators */
    .chat-date-separator {
        color: #6b7280;
    }

    .chat-date-separator::before,
    .chat-date-separator::after {
        background: #2d3140;
    }

    /* Hub notification dot border */
    .hub-notification-dot {
        border-color: #1c1f26;
    }

    /* Loads text bubble */
    .loads-text-bubble {
        background: #252933;
        color: #e5e7eb;
        border-color: #2d3140;
    }

    /* Loads action buttons */
    .loads-action-row .load-action-btn {
        background: #252933!important;
        color: #d1d5db!important;
        border-color: #2d3140!important;
    }

    .loads-action-row .load-action-btn[data-action="set-alert"] {
        background: #2d3140!important;
        color: #e5e7eb!important;
        border-color: #3a3f50!important;
    }

    /* Paywall block */
    .loads-paywall {
        background: #1c1f26;
        border-color: #2d3140;
    }

    .loads-paywall .paywall-remaining,
    .loads-paywall .paywall-privacy {
        color: #9ca3af;
    }

    .loads-paywall .paywall-cta-text {
        color: #f0f2f5;
    }

    /* Empty conversations */
    .empty-conversations {
        color: #9ca3af;
    }

    .empty-conversations h3 {
        color: #d1d5db;
    }
}


/* ============================================================
   MODAL FULLSCREEN (modal-fullscreen.css)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* Listing modal container */
    .listing-container {
        background: #1c1f26;
    }

    /* Carousel background */
    .listing-carousel {
        background: #15181f;
    }

    /* Listing content text */
    #listingOverlay .listing-price {
        color: #20a58a!important;
    }

    #listingOverlay .listing-title {
        color: #f0f2f5!important;
    }

    #listingOverlay .listing-meta {
        color: #9ca3af!important;
    }

    #listingOverlay .listing-section {
        border-bottom-color: #2d3140!important;
    }

    #listingOverlay .section-title {
        color: #f0f2f5!important;
    }

    #listingOverlay .listing-description {
        color: #d1d5db!important;
    }

    /* Icon action labels */
    #listingOverlay .icon-action-label {
        color: #9ca3af!important;
    }

    /* Related cards */
    #listingOverlay .related-card {
        background: #252933!important;
        border-color: #2d3140!important;
    }

    #listingOverlay .related-card:hover {
        border-color: #20a58a!important;
        box-shadow: 0 4px 12px rgba(0,0,0,.4)!important;
    }

    #listingOverlay .related-title {
        color: #d1d5db!important;
    }

    #listingOverlay .related-location {
        color: #9ca3af!important;
    }

    /* Filter chips (load/search filters) */
    .filter-chip {
        background: #252933;
        border-color: #2d3140;
        color: #d1d5db;
    }

    .filter-chip.active {
        background: rgba(32, 165, 138, 0.15);
        border-color: #20a58a;
        color: #20a58a;
    }

    /* Data Policy modal */
    #dataPolicyModal {
        background: #1c1f26;
    }

    .data-policy-dialog {
        background: #1c1f26;
    }

    .data-policy-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .data-policy-title {
        color: #f0f2f5;
    }

    .data-policy-subtitle {
        color: #9ca3af;
    }

    .data-policy-close {
        background: #252933;
        color: #d1d5db;
    }

    .data-policy-close:hover {
        background: #2d3140;
    }

    .data-policy-footer {
        background: #1c1f26;
        border-top-color: #2d3140;
    }

    /* Afi hero section */
    .afi-hero-section {
        background: linear-gradient(135deg, #0d2a1e 0%, #0a2318 100%)!important;
        border-color: #1a4a35!important;
    }

    .afi-logo {
        background: #252933;
    }

    .afi-title {
        color: #6ee7b7;
    }

    .afi-tagline {
        color: #34d399;
    }

    .afi-description {
        color: #a7f3d0;
    }

    .afi-benefits li {
        color: #a7f3d0;
    }

    /* AI consent section */
    .ai-consent-section {
        background: #1c1a0a;
        border-color: #4a3f00;
    }

    .consent-label {
        color: #fde68a;
    }

    .consent-description,
    .consent-details {
        color: #fcd34d;
    }

    .consent-date {
        color: #f59e0b;
    }

    /* Policy sections */
    .policy-section-title {
        color: #f0f2f5;
    }

    .policy-section-content {
        color: #d1d5db;
    }

    .info-card {
        background: #252933;
        border-color: #2d3140;
    }

    .info-card-title {
        color: #f0f2f5;
    }

    .info-card-text {
        color: #9ca3af;
    }
}


/* ============================================================
   MODAL UI GAPS (modal-ui.css)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* Edit Profile modal */
    .modal-overlay {
        background: rgba(0,0,0,.65);
    }

    .modal-container {
        background: #1c1f26;
        color: #f0f2f5;
    }

    .modal-header {
        border-bottom-color: #2d3140;
    }

    .modal-header h3 {
        color: #f0f2f5;
    }

    .modal-close {
        color: #9ca3af;
    }

    .modal-close:hover {
        color: #f0f2f5;
    }

    .modal-footer {
        border-top-color: #2d3140;
    }

    /* Notification action buttons */
    .notification-action-btn {
        background: #252933;
        color: #d1d5db;
    }

    .notification-action-btn:hover {
        background: #2d3140;
    }

    /* Notification icon */
    .notification-icon {
        background: #0d2a1e;
    }

    /* Alert item (notifications settings) */
    .alert-item {
        background: #252933;
    }

    .alert-route {
        color: #f0f2f5;
    }

    /* Settings hint */
    .settings-hint {
        background: #1e2f4a;
        border-color: #1e40af;
        color: #93c5fd;
    }

    /* Empty / loading states */
    .empty-notifications p {
        color: #d1d5db;
    }

    .empty-notifications svg {
        color: #3a3f50;
    }

    /* Confirm actions separator (in case border not picked up) */
    .confirm-actions {
        border-top-color: #2f2f31;
    }
}

/* ============================================================
   AFI AI ASSISTANT CARD in Messages list
   ============================================================ */
@media (prefers-color-scheme: dark) {

    .afi-conversation-item {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .afi-conversation-item:hover {
        background: rgba(32, 165, 138, 0.07);
    }

    .afi-conversation-item .afi-name {
        color: #f0f2f5;
    }

    .afi-conversation-item .afi-description {
        color: #9ca3af;
    }

    .afi-conversation-item .afi-arrow {
        color: #3a3f50;
    }

    .afi-conversation-item:hover .afi-arrow {
        color: #20a58a;
    }
}

/* ============================================================
   CHAT SCREEN (full-screen individual chat view)
   ============================================================ */
@media (prefers-color-scheme: dark) {

    .chat-screen {
        background: #15181f;
    }

    .chat-screen-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .chat-screen-header .chat-header-title {
        color: #f0f2f5;
    }

    .chat-back-btn {
        background: #252933;
        color: #9ca3af;
    }

    .chat-back-btn:hover {
        background: #2d3140;
    }

    /* Indicator dots */
    .indicator-dot {
        background: #3a3f50;
    }

    .indicator-dot.active {
        background: #20a58a;
    }
}

/* ============================================================
   CONTACT POPUP — base styles + dark mode
   (#popup .box uses inline styles replaced with classes)
   ============================================================ */

.contact-name-block {
    margin-bottom: 16px;
}

.contact-name {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

.contact-trust {
    color: #666;
    font-size: 14px;
}

.contact-detail-row {
    margin-bottom: 8px;
}

.contact-link {
    color: #0b7d62;
}

.contact-details-block {
    margin-bottom: 16px;
}

.contact-other-posts-wrap {
    margin: 16px 0 12px 0;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.contact-other-posts-btn {
    width: 100%;
    padding: 10px 16px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #0b7d62;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.contact-other-posts-btn:hover {
    background: #f0f0f0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    #popup .box {
        background: #1c1f26;
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

    .contact-name {
        color: #f0f2f5;
    }

    .contact-trust {
        color: #9ca3af;
    }

    .contact-link {
        color: #20a58a;
    }

    .contact-other-posts-wrap {
        border-top-color: #2d3140;
    }

    .contact-other-posts-btn {
        background: #252933;
        border-color: #2d3140;
        color: #20a58a;
    }

    .contact-other-posts-btn:hover {
        background: #2d3140;
    }
}

/* ============================================================
   REPORT DRAWER + FILTER BOTTOM SHEET
   Both use .bottom-sheet-drawer as the panel container
   ============================================================ */
@media (prefers-color-scheme: dark) {

    /* Panel itself */
    .bottom-sheet-drawer {
        background: #1c1f26;
        box-shadow: 0 -4px 20px rgba(0,0,0,.5);
    }

    /* Drag handle pill */
    .drag-handle-pill {
        background: #3a3f50;
    }

    /* Report drawer: header dividers */
    .report-header {
        border-bottom-color: #2d3140;
    }

    .report-listing-preview {
        border-bottom-color: #2d3140;
    }

    /* Report title / subtitle */
    .report-title {
        color: #f0f2f5;
    }

    .report-subtitle {
        color: #9ca3af;
    }

    /* Listing preview card inside report drawer */
    .preview-card {
        background: #252933;
    }

    .preview-title {
        color: #f0f2f5;
    }

    .preview-meta {
        color: #9ca3af;
    }

    .preview-image-placeholder {
        background: #2d3140;
    }

    /* "Why are you reporting this?" section */
    .section-label {
        color: #f0f2f5;
    }

    .section-hint {
        color: #9ca3af;
    }

    /* Reason items */
    .report-reason-item {
        background: #252933;
        border-color: #2d3140;
    }

    .report-reason-item.selected {
        background: #0d2a1e;
        border-color: #20a58a;
    }

    .reason-checkbox {
        background: #1c1f26;
        border-color: #3a3f50;
    }

    .reason-label {
        color: #f0f2f5;
    }

    .reason-description {
        color: #9ca3af;
    }

    /* Additional details textarea */
    .report-textarea {
        background: #252933;
        border-color: #2d3140;
        color: #f0f2f5;
    }

    .report-textarea:focus {
        border-color: #20a58a;
        box-shadow: 0 0 0 3px rgba(32,165,138,.15);
    }

    .char-counter {
        color: #6b7280;
    }

    /* Footer */
    .report-drawer .drawer-footer {
        background: #1c1f26;
        border-top-color: #2d3140;
    }

    .report-drawer .btn-secondary {
        background: #252933;
        color: #d1d5db;
    }

    .report-drawer .btn-secondary:active {
        background: #2d3140;
    }

    /* ---- Filter bottom sheet specific ---- */

    /* Section header labels ("SALES CATEGORIES", etc.) */
    .filter-section-header {
        color: #9ca3af;
    }

    /* Country / select dropdowns inside the drawer */
    .bottom-sheet-drawer select,
    .minimal-select.full-width {
        background: #252933;
        color: #f0f2f5;
        border-color: #2d3140;
    }

    /* Sales / Services toggle chips */
    .chip.large {
        background: #252933;
        border-color: #2d3140;
        color: #d1d5db;
    }

    .chip.large.active {
        background: #0d2a1e;
        color: #6ee7b7;
        border-color: #1a4a35;
    }

    /* Category grid buttons (Trucks, Parts, Trailers…) */
    .unified-category {
        background: #252933;
        border-color: #2d3140;
    }

    .unified-category .u-label {
        color: #f0f2f5;
    }

    .unified-category:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,.25);
    }

    .unified-category.selected,
    .unified-category[aria-pressed="true"] {
        border-color: #20a58a;
        background: linear-gradient(180deg, rgba(32,165,138,.1), #252933);
    }

    /* Multi-select filter chips */
    .filter-chip.multi-select {
        background: #252933;
        border-color: #2d3140;
        color: #d1d5db;
    }

    .filter-chip.multi-select.active {
        background: #0d2a1e !important;
        color: #6ee7b7 !important;
        border-color: #1a4a35 !important;
    }

    .filter-chip.multi-select.active:hover {
        background: #122f22 !important;
        border-color: #20a58a !important;
    }

    /* Drawer footer (Reset / View buttons) */
    .drawer-footer {
        background: #1c1f26;
        border-top-color: #2d3140;
    }

    /* Reset button (secondary) */
    .drawer-footer .btn.secondary {
        background: #252933;
        color: #d1d5db;
        border-color: #2d3140;
    }
}

/* ============================================================
   CONFIRM MODAL — action button text colors
   The dialog bg is already dark, but text buttons need fixing
   ============================================================ */
@media (prefers-color-scheme: dark) {

    .confirm-actions .btn.secondary {
        color: #9ca3af;
        background: transparent;
    }

    .confirm-actions .btn.primary {
        color: #f0f2f5;
        background: transparent;
    }

    .confirm-actions .btn.danger {
        color: #f87171;
        background: transparent;
    }
    
    @media (prefers-color-scheme: dark) {
    .confirm-actions .btn {
        color: #f0f2f5;
    }

    .confirm-actions .btn.danger {
        color: #f87171;
    }
}

/* ============================================================
   EDIT PROFILE MODAL — white header needs to match dark body
   .modal-overlay > .modal-container > .modal-header
   ============================================================ */
@media (prefers-color-scheme: dark) {

    .modal-overlay {
        background: rgba(0,0,0,.65);
    }

    .modal-container {
        background: #1c1f26;
    }

    .modal-header {
        background: #1c1f26;
        border-bottom-color: #2d3140;
    }

    .modal-header h3 {
        color: #f0f2f5;
    }

    .modal-close {
        color: #9ca3af;
    }

    .modal-close:hover {
        color: #f0f2f5;
    }

    .modal-body label {
        color: #f0f2f5;
    }

    .modal-footer {
        border-top-color: #2d3140;
        background: #1c1f26;
    }
}