/* ============================================= */
/* Dark Mode — The Daily Distill                 */
/* Warm neutral dark — matches email client feel  */
/* ============================================= */

/* Smooth color transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* --------------------------------------------------
   1. CSS Variable Overrides
   -------------------------------------------------- */

html[data-theme="dark"] {
    --color-primary: #3d6a8e;
    --color-primary-dark: #2c3e50;
    --color-accent: #c49a6c;
    --color-bg: #1c1c1e;
    --color-card: #2c2c2e;
    --color-card-alt: #323234;
    --color-border: #3a3a3c;
    --color-border-light: #333335;
    --color-divider: #3a3a3c;
    --color-text: #e5e5e7;
    --color-text-body: #c7c7cc;
    --color-text-secondary: #8e8e93;
    --color-text-muted: #636366;
    --color-success: #34c759;
    --color-error: #ff453a;
    --color-warning: #ff9f0a;
}

/* --------------------------------------------------
   2. Base Element Overrides
   -------------------------------------------------- */

html[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text-body);
}

/* --------------------------------------------------
   3. Tailwind Utility Overrides (base.html)
   -------------------------------------------------- */

html[data-theme="dark"] .bg-cream {
    background-color: var(--color-bg) !important;
}

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

html[data-theme="dark"] .bg-linen {
    background-color: var(--color-card-alt) !important;
}

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

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

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

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

html[data-theme="dark"] .bg-slate-navy {
    background-color: var(--color-primary) !important;
}

html[data-theme="dark"] .border-warm-gray-200 {
    border-color: var(--color-border) !important;
}

/* Flash messages (base.html Tailwind) */
html[data-theme="dark"] .bg-green-50 {
    background-color: rgba(63, 185, 80, 0.1) !important;
}
html[data-theme="dark"] .border-green-200 {
    border-color: rgba(63, 185, 80, 0.3) !important;
}
html[data-theme="dark"] .text-green-800 {
    color: #3fb950 !important;
}
html[data-theme="dark"] .bg-red-50 {
    background-color: rgba(248, 81, 73, 0.1) !important;
}
html[data-theme="dark"] .border-red-200 {
    border-color: rgba(248, 81, 73, 0.3) !important;
}
html[data-theme="dark"] .text-red-800 {
    color: #f85149 !important;
}

/* --------------------------------------------------
   4. Form Inputs
   -------------------------------------------------- */

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

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(61, 106, 142, 0.25) !important;
}

/* --------------------------------------------------
   5. Cards & Surfaces
   -------------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card {
    background-color: var(--color-card);
}

html[data-theme="dark"] .newsletter {
    background-color: var(--color-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------
   6. Navigation
   -------------------------------------------------- */

html[data-theme="dark"] .nav {
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] .header {
    background: var(--color-card);
    border-color: var(--color-border);
}

/* --------------------------------------------------
   7. Buttons
   -------------------------------------------------- */

html[data-theme="dark"] .btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--color-primary-dark);
}

html[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-card-alt);
}

html[data-theme="dark"] .btn-danger:hover {
    background: rgba(248, 81, 73, 0.15);
}

/* --------------------------------------------------
   8. Dashboard Specific
   -------------------------------------------------- */

/* Adjustment confirmation */
html[data-theme="dark"] .adjustment-confirmation {
    background-color: rgba(63, 185, 80, 0.1);
    color: #3fb950;
}

/* Success/Error banners */
html[data-theme="dark"] .success-banner {
    background: rgba(63, 185, 80, 0.1);
    border-color: rgba(63, 185, 80, 0.3);
}

html[data-theme="dark"] .error-banner {
    background: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.3);
}

/* Onboarding banner */
html[data-theme="dark"] .onboarding-banner {
    background: linear-gradient(135deg, var(--color-card) 0%, var(--color-card-alt) 100%);
}

/* Toggle switch track */
html[data-theme="dark"] .toggle-switch input:not(:checked) + .toggle-slider {
    background-color: var(--color-border);
}

/* --------------------------------------------------
   9. Newsletter Viewer
   -------------------------------------------------- */

/* Signal story cards */
html[data-theme="dark"] .signal-story {
    background: var(--color-card-alt);
}

/* Radar items */
html[data-theme="dark"] .radar-item {
    background: var(--color-card-alt);
}

/* Discovery card — keeps its navy identity, slightly adjusted for dark bg */
html[data-theme="dark"] .discovery-card {
    background: #2c3e50;
}

/* Sources panel */
html[data-theme="dark"] .sources {
    background: var(--color-card-alt);
}

/* Feedback section */
html[data-theme="dark"] .feedback {
    background: var(--color-card-alt);
}

html[data-theme="dark"] .feedback-btn {
    background: var(--color-card);
    border-color: var(--color-border);
}

/* Page 2 Tabs */
html[data-theme="dark"] .page-tab {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

html[data-theme="dark"] .page-tab:hover:not(.page-tab--active) {
    background: var(--color-card-alt);
}

html[data-theme="dark"] .page-tab--active {
    background: var(--color-card);
    color: var(--color-text);
    border-bottom-color: var(--color-card);
}

/* --------------------------------------------------
   10. Chat / Discuss Sidebar
   -------------------------------------------------- */

html[data-theme="dark"] .chat-panel {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .chat-message.user {
    background: var(--color-accent);
    color: #1c1c1e;
}

html[data-theme="dark"] .chat-message.assistant {
    background: var(--color-card-alt);
    color: var(--color-text-body);
    border-color: var(--color-border-light);
}

html[data-theme="dark"] .chat-textarea {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

html[data-theme="dark"] .chat-textarea:focus {
    border-color: var(--color-primary);
}

html[data-theme="dark"] .chat-send-btn {
    background: var(--color-primary);
}

html[data-theme="dark"] .chat-send-btn:hover {
    background: var(--color-primary-dark);
}

/* Inline code in chat messages */
html[data-theme="dark"] .chat-message code {
    background: var(--color-bg) !important;
}

html[data-theme="dark"] .chat-history-group-label {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

html[data-theme="dark"] .chat-history-sort-btn {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .chat-history-sort-btn.active {
    color: var(--color-accent);
}

/* --------------------------------------------------
   11. Landing Page
   -------------------------------------------------- */

html[data-theme="dark"] .hero {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-card) 100%);
}

html[data-theme="dark"] .feature-card {
    background: var(--color-card);
    border-color: var(--color-border);
}

html[data-theme="dark"] .preview-card {
    background: var(--color-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .cta-section {
    background: var(--color-card);
}

/* --------------------------------------------------
   12. Logo Mark (Login/Register)
   -------------------------------------------------- */

html[data-theme="dark"] .logo-mark {
    background: linear-gradient(135deg, #3d6a8e 0%, #2c3e50 100%);
}

/* --------------------------------------------------
   13. Onboarding
   -------------------------------------------------- */

html[data-theme="dark"] .topic-tag {
    background: var(--color-card-alt);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

html[data-theme="dark"] .topic-tag.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* --------------------------------------------------
   14. Ops Dashboard
   -------------------------------------------------- */

html[data-theme="dark"] .stat-card {
    background: var(--color-card);
}

html[data-theme="dark"] .status-good {
    color: #3fb950;
}

html[data-theme="dark"] .status-warning {
    color: #d29922;
}

html[data-theme="dark"] .status-error {
    color: #f85149;
}

/* --------------------------------------------------
   15. Scrollbar
   -------------------------------------------------- */

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* --------------------------------------------------
   16. Theme Toggle Button
   -------------------------------------------------- */

.theme-toggle {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.theme-toggle:hover {
    color: var(--color-text);
    background: var(--color-card-alt);
    border-color: var(--color-border);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* --------------------------------------------------
   17. Selection
   -------------------------------------------------- */

html[data-theme="dark"] ::selection {
    background: rgba(61, 106, 142, 0.4);
    color: var(--color-text);
}

/* --------------------------------------------------
   18. Newspaper Layout
   -------------------------------------------------- */

html[data-theme="dark"] .np-masthead-rule-thick,
html[data-theme="dark"] .np-masthead-rule-thin,
html[data-theme="dark"] .np-masthead-rule-bottom-thin,
html[data-theme="dark"] .np-masthead-rule-bottom-thick {
    background: var(--color-text-muted);
}

html[data-theme="dark"] .np-masthead-title {
    color: var(--color-text);
}

html[data-theme="dark"] .np-ticker {
    background: #1a252f;
}

html[data-theme="dark"] .np-ticker-track {
    color: var(--color-text);
}

html[data-theme="dark"] .np-stock-ticker {
    background: #2a3a4a;
}

html[data-theme="dark"] .np-stock-ticker-track {
    color: #c8d6e0;
}

html[data-theme="dark"] .np-stock-ticker-edit {
    color: #c8d6e0;
}

html[data-theme="dark"] .np-stock-ticker-edit:hover {
    color: #c8d6e0;
}

html[data-theme="dark"] .np-stock-change--up { color: #4ade80; }
html[data-theme="dark"] .np-stock-change--down { color: #f87171; }

html[data-theme="dark"] .np-featured-body,
html[data-theme="dark"] .np-secondary-body,
html[data-theme="dark"] .np-tertiary-desc {
    color: var(--color-text-body);
}

html[data-theme="dark"] .np-featured-body {
}

html[data-theme="dark"] .np-sidebar-section-label {
    color: var(--color-text-muted);
}

html[data-theme="dark"] .np-sidebar-headline {
    color: var(--color-text);
}

html[data-theme="dark"] .np-featured-grid {
}

html[data-theme="dark"] .np-footer-rule {
}

html[data-theme="dark"] .np-badge--signal {
    color: var(--color-accent);
    background: rgba(196, 154, 108, 0.1);
}

html[data-theme="dark"] .np-badge--radar {
    color: var(--color-primary);
    background: rgba(61, 106, 142, 0.1);
}

html[data-theme="dark"] .np-badge--discovery {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.1);
}

/* Semantic badge colors — dark mode */
html[data-theme="dark"] .np-badge--cat-space { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
html[data-theme="dark"] .np-badge--cat-ai { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
html[data-theme="dark"] .np-badge--cat-tech { color: #2dd4bf; background: rgba(45, 212, 191, 0.1); }
html[data-theme="dark"] .np-badge--cat-politics { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
html[data-theme="dark"] .np-badge--cat-science { color: #c084fc; background: rgba(192, 132, 252, 0.1); }
html[data-theme="dark"] .np-badge--cat-business { color: #4ade80; background: rgba(74, 222, 128, 0.1); }

/* Ticker list scroll shadows — dark mode */
html[data-theme="dark"] .np-ticker-list-wrap::before {
    background: linear-gradient(to bottom, rgba(44, 44, 46, 0.95), transparent);
}
html[data-theme="dark"] .np-ticker-list-wrap::after {
    background: linear-gradient(to top, rgba(44, 44, 46, 0.95), transparent);
}

/* --------------------------------------------------
   19. Misc Overrides
   -------------------------------------------------- */

/* Version tag */
html[data-theme="dark"] .version-tag {
    color: rgba(99, 99, 102, 0.4);
}

/* Preference tags / company tags */
html[data-theme="dark"] .company-tag,
html[data-theme="dark"] .preference-tag {
    background: var(--color-card-alt);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

/* Signal header badge */
html[data-theme="dark"] .signal-header {
    background: #2c3e50;
    color: #ffffff;
}

/* Sidebar */
html[data-theme="dark"] .sidebar {
    background: var(--color-card);
    border-right-color: var(--color-border);
}

html[data-theme="dark"] .sidebar-logo {
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

html[data-theme="dark"] .sidebar-item:hover {
    background: var(--color-card-alt);
    color: var(--color-text);
}

html[data-theme="dark"] .sidebar-item.active {
    color: var(--color-primary);
}

html[data-theme="dark"] .sidebar-bottom {
    border-top-color: var(--color-border);
}

/* --------------------------------------------------
   Voice Profile Cards
   -------------------------------------------------- */

html[data-theme="dark"] .voice-card {
    background: var(--color-card);
}

html[data-theme="dark"] .voice-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .voice-slider-row__input {
    background: var(--color-border);
}

html[data-theme="dark"] .voice-slider-row__tooltip::after {
    background: var(--color-card-alt);
    border: 1px solid var(--color-border);
}