/* === Night Theme — Illuminated Manuscript Meets Deep Ocean Observatory === */

/* --- Variable overrides --- */
[data-theme="night"] {
  /* Background layers (increasing elevation) */
  --bg:          #0a0e1a;
  --bg-warm:     #0f1525;
  --bg-card:     #111827;
  --bg-nav:      #111827;
  --bg-input:    #1a2235;

  /* Text hierarchy */
  --text:        #c8d0e0;
  --text-muted:  #6b7fa0;
  --text-light:  #3d5070;
  --text-nav:    #c8d0e0;

  /* Accent — blue interactive elements */
  --gold:        #4a9eff;
  --gold-light:  #7eb8ff;
  --gold-dark:   #4a9eff;
  --navy:        #4a9eff;

  /* Warm amber for decorative/ornamental elements */
  --accent-warm: #d4a054;
  --accent-dim:  #7eb8ff;
  --bright:      #e8eef8;

  /* Keep secondary accents but adjust for dark backgrounds */
  --sage:        #6B9E6B;
  --rose:        #D094A7;
  --amber:       #D4A054;

  /* Borders & shadows */
  --border:      #1e2d4a;
  --shadow:      rgba(0, 0, 0, 0.3);
  --shadow-md:   rgba(0, 0, 0, 0.5);

  /* Emotion colors — slightly lighter for dark bg */
  --emotion-joy:          #F0C860;
  --emotion-love:         #E08A9E;
  --emotion-gratitude:    #E0B850;
  --emotion-hope:         #8DC88D;
  --emotion-peace:        #99C4D8;
  --emotion-contentment:  #D8C8AA;
  --emotion-wonder:       #AB99C4;
  --emotion-determination:#E09B5B;
  --emotion-nostalgia:    #C8AABC;
  --emotion-confusion:    #AEAEAE;
  --emotion-anxiety:      #E4B098;
  --emotion-loneliness:   #9AABBA;
  --emotion-grief:        #6B8BAA;
  --emotion-anger:        #C86A6A;
  --emotion-fear:         #7B8B9B;
  --emotion-guilt:        #9B9B7B;
  --emotion-resentment:   #B08050;
  --emotion-shame:        #9B8070;

  /* Graph node colors — slightly brighter for dark bg */
  --node-entry:     #3A4A60;
  --node-theme:     #D4A054;
  --node-person:    #4A9EFF;
  --node-symbol:    #6B9E6B;
  --node-emotion:   #D094A7;
  --node-life-event:#D4A054;
}

/* --- Body background vignette --- */
[data-theme="night"] body {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(15, 21, 37, 0.6) 0%, transparent 70%),
    var(--bg);
}

/* --- Login screen --- */
[data-theme="night"] .screen {
  background: var(--bg);
  background-image: none;
}

[data-theme="night"] .screen::before,
[data-theme="night"] .screen::after {
  opacity: 0.15;
}

[data-theme="night"] .login-container h1 {
  color: var(--accent-dim);
}

[data-theme="night"] .login-container input {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="night"] .login-container input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.15);
}

/* --- Buttons --- */
[data-theme="night"] .btn-primary {
  background: linear-gradient(135deg, #4a9eff, #3580d0);
  border-color: #3580d0;
  color: #fff;
}

[data-theme="night"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #5eaaff, #4a9eff);
  box-shadow: 0 0 12px rgba(74, 158, 255, 0.3);
}

[data-theme="night"] .btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

[data-theme="night"] .btn-secondary:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(74, 158, 255, 0.04);
}

[data-theme="night"] .btn-danger {
  background: #5A2E2E;
  border-color: #4A2020;
  color: #E8A0A0;
}

[data-theme="night"] .btn-danger:hover:not(:disabled) {
  background: #6B3838;
}

/* --- Cards --- */
[data-theme="night"] .card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 1px 4px var(--shadow);
}

[data-theme="night"] .card:hover {
  box-shadow: 0 0 30px rgba(74, 158, 255, 0.03);
}

/* --- Content area --- */
[data-theme="night"] .content-decorated::before,
[data-theme="night"] .content-decorated::after {
  opacity: 0.08;
}

/* --- Parchment card (entry detail) → deep ocean card --- */
[data-theme="night"] .parchment-card {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(74, 158, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(74, 158, 255, 0.03) 0%, transparent 50%),
    var(--bg-card);
  box-shadow:
    0 2px 8px var(--shadow),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 60px rgba(74, 158, 255, 0.03);
}

[data-theme="night"] .parchment-card::before {
  opacity: 0.015;
}

[data-theme="night"] .parchment-card::after {
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.3),
    inset 0 0 80px rgba(0, 0, 0, 0.1);
}

[data-theme="night"] .ornate-border {
  border-color: rgba(74, 158, 255, 0.12);
}

[data-theme="night"] .ornate-border::after {
  border-color: rgba(74, 158, 255, 0.06);
}

[data-theme="night"] .corner-flourish {
  opacity: 0.15;
}

[data-theme="night"] .journal-text {
  color: var(--text);
}

/* --- Scan navigation buttons --- */
[data-theme="night"] .scan-nav button {
  background: rgba(74, 158, 255, 0.06);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme="night"] .scan-nav button:hover {
  background: rgba(74, 158, 255, 0.12);
  border-color: var(--text-muted);
}

/* --- Insight card (illuminated manuscript mode) --- */
[data-theme="night"] .illum-insight {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(74, 158, 255, 0.04) 0%, transparent 60%),
    linear-gradient(135deg, #111827, #0f1525);
  border-color: var(--border);
  border-left-color: var(--accent-warm);
  box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(74, 158, 255, 0.03);
}

[data-theme="night"] .illum-insight-label {
  color: var(--accent-warm);
}

/* --- Dream card --- */
[data-theme="night"] .dream-card {
  background: rgba(74, 158, 255, 0.04);
  border-color: var(--border);
}

[data-theme="night"] .symbol-card {
  background: var(--bg-warm);
}

/* --- Dropzone (upload) --- */
[data-theme="night"] .dropzone-hint {
  color: var(--text-muted);
}

/* --- Upload mode toggle --- */
[data-theme="night"] .upload-mode-btn {
  background: var(--bg-card);
  color: var(--text-muted);
}

[data-theme="night"] .upload-mode-btn.active {
  background: var(--gold);
  color: #fff;
}

[data-theme="night"] .upload-mode-btn:not(.active):hover {
  background: var(--bg-warm);
}

/* --- Text entry area --- */
[data-theme="night"] .text-entry-input,
[data-theme="night"] textarea,
[data-theme="night"] .field-input,
[data-theme="night"] select {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="night"] .text-entry-input:focus,
[data-theme="night"] textarea:focus,
[data-theme="night"] .field-input:focus,
[data-theme="night"] select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.15);
}

[data-theme="night"] .text-entry-input::placeholder,
[data-theme="night"] textarea::placeholder,
[data-theme="night"] input::placeholder {
  color: var(--text-light);
}

/* --- Filters / search --- */
[data-theme="night"] .filters-bar select,
[data-theme="night"] .filters-bar .field-input {
  background: var(--bg-input);
  color: var(--text);
}

/* --- Entry list --- */
[data-theme="night"] .entry-title {
  color: var(--accent-dim);
}

[data-theme="night"] .entry-date {
  color: var(--text);
}

[data-theme="night"] .filter-highlight {
  background: rgba(74, 158, 255, 0.15);
  color: var(--accent-dim);
}

/* --- Entry detail header --- */
[data-theme="night"] .detail-header h2 {
  color: var(--accent-dim);
}

/* --- Timeline --- */
[data-theme="night"] .timeline::before {
  background: var(--border);
}

[data-theme="night"] .timeline-year-label {
  color: var(--accent-warm);
}

[data-theme="night"] .timeline-year-label::before {
  background: var(--accent-warm);
  border-color: var(--bg);
}

[data-theme="night"] .timeline-entry::before {
  border-color: var(--border);
  background: var(--bg);
}

[data-theme="night"] .timeline-entry .card:hover {
  background: rgba(74, 158, 255, 0.03);
}

[data-theme="night"] .year-jump a:hover {
  background: var(--bg-card);
  color: var(--text);
}

/* --- Chat --- */
[data-theme="night"] .chat-welcome h3 {
  color: var(--accent-dim);
}

[data-theme="night"] .chat-sample-btn {
  background: rgba(74, 158, 255, 0.05);
  border-color: rgba(74, 158, 255, 0.15);
  color: var(--accent-dim);
}

[data-theme="night"] .chat-sample-btn:hover {
  background: rgba(74, 158, 255, 0.12);
  border-color: var(--gold);
}

[data-theme="night"] .chat-bubble.user {
  background: rgba(74, 158, 255, 0.12);
  color: var(--text);
}

[data-theme="night"] .chat-bubble.assistant {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="night"] .chat-quote {
  background: rgba(212, 160, 84, 0.1);
  color: var(--accent-warm);
  border-left-color: var(--accent-warm);
}

[data-theme="night"] .chat-input-bar {
  background: var(--bg);
  border-top-color: var(--border);
}

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

[data-theme="night"] .chat-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.15);
}

/* --- Chat history --- */
[data-theme="night"] .chat-history-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="night"] .chat-history-question {
  color: var(--accent-dim);
}

/* --- Graph container — already dark, minor adjustments --- */
[data-theme="night"] .graph-container {
  background: #0d1220;
  border-color: var(--accent-warm);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 0 0 3px #0d1220,
    0 0 0 5px rgba(212, 160, 84, 0.25);
}

[data-theme="night"] .graph-side-panel {
  background: #0d1220;
  border-color: var(--accent-warm);
}

[data-theme="night"] .graph-legend {
  background: rgba(10, 14, 26, 0.85);
  border-color: rgba(212, 160, 84, 0.2);
}

[data-theme="night"] .graph-controls {
  color: var(--text);
}

[data-theme="night"] .graph-type-toggle {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="night"] .graph-type-toggle:hover {
  border-color: var(--gold);
}

/* --- Emotion distribution --- */
[data-theme="night"] .emotion-bar-track {
  background: var(--bg-input);
}

[data-theme="night"] .emotion-bar-fill {
  background: linear-gradient(90deg, #4a9eff, #3580d0);
}

/* --- Emotional journey --- */
[data-theme="night"] .journey-title {
  color: var(--accent-warm);
}

[data-theme="night"] .journey-legend {
  border-top-color: var(--border);
}

/* --- Entity management (people, themes, etc.) --- */
[data-theme="night"] .entity-row {
  border-bottom-color: var(--border);
}

[data-theme="night"] .merge-controls {
  background: var(--bg-warm);
}

/* --- Empty state --- */
[data-theme="night"] .empty-state {
  color: var(--text-muted);
}

/* --- Confirm dialog / overlay --- */
[data-theme="night"] .confirm-dialog,
[data-theme="night"] .personalize-overlay {
  background: rgba(10, 14, 26, 0.8);
}

[data-theme="night"] .confirm-box,
[data-theme="night"] .personalize-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="night"] .personalize-card h2 {
  color: var(--accent-dim);
}

/* --- Edit modal --- */
[data-theme="night"] .edit-modal-fields textarea {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

/* --- Spinner --- */
[data-theme="night"] .spinner {
  border-color: var(--border);
  border-top-color: var(--gold);
}

/* --- Zodiac elements --- */
[data-theme="night"] .zodiac-prompt {
  color: var(--accent-warm);
}

[data-theme="night"] .zodiac-notice {
  color: var(--accent-warm);
  background: rgba(10, 14, 26, 0.9);
  border-color: rgba(212, 160, 84, 0.25);
}

[data-theme="night"] .zodiac-indicator {
  color: rgba(212, 160, 84, 0.5);
}

/* --- Swipe delete background --- */
[data-theme="night"] .swipe-delete-bg {
  background: #3A1818;
}

/* --- Section banners --- */
/* Full opacity — dark UI is the only mode */

/* --- Scrollbar styling --- */
[data-theme="night"] ::-webkit-scrollbar {
  width: 6px;
}

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

[data-theme="night"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

[data-theme="night"] ::-webkit-scrollbar-thumb:hover {
  background: #2a3d5a;
}

/* --- Landing nav actions alignment --- */
.landing-nav-actions {
  align-items: center;
}

/* --- Theme toggle button --- */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Show moon in light mode, sun in night mode */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

[data-theme="night"] .theme-toggle .icon-moon { display: none; }
[data-theme="night"] .theme-toggle .icon-sun { display: block; }

[data-theme="night"] .theme-toggle:hover {
  background: rgba(74, 158, 255, 0.08);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="night"] *,
  [data-theme="night"] *::before,
  [data-theme="night"] *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
  [data-theme="night"] .screen::before,
  [data-theme="night"] .screen::after {
    opacity: 0.05;
  }
}

/* === Landing Page Night Overrides === */

[data-theme="night"] .landing-nav {
  background: linear-gradient(180deg, var(--bg-nav) 0%, #0d1220 100%);
  border-bottom-color: var(--accent-warm);
}

[data-theme="night"] .landing-brand {
  color: var(--accent-dim);
}

[data-theme="night"] .landing-hero {
  background: var(--bg);
  background-image: none;
}

[data-theme="night"] .landing-hero-title {
  color: var(--bright);
}

[data-theme="night"] .landing-hero-subtitle {
  color: var(--text-muted);
}

[data-theme="night"] .landing-hero-actions .btn-primary {
  background: linear-gradient(135deg, #4a9eff, #3580d0);
  border-color: #3580d0;
  box-shadow: 0 2px 0 #2a60a0, 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="night"] .landing-hero-actions .btn-primary:hover {
  background: linear-gradient(135deg, #5eaaff, #4a9eff);
  box-shadow: 0 1px 0 #2a60a0, 0 2px 6px rgba(0,0,0,0.2);
}

[data-theme="night"] .landing-hero-actions .btn-secondary {
  background: rgba(74, 158, 255, 0.06);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="night"] .landing-hero-actions .btn-secondary:hover {
  background: rgba(74, 158, 255, 0.12);
  border-color: var(--gold);
}

[data-theme="night"] .landing-section h2 {
  color: var(--accent-dim);
}

[data-theme="night"] .landing-section-alt {
  background: var(--bg-warm);
}

[data-theme="night"] .landing-step-row {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(74, 158, 255, 0.05);
}

[data-theme="night"] .landing-step-row::before {
  background: linear-gradient(90deg, transparent, var(--accent-warm) 20%, #b08040 50%, var(--accent-warm) 80%, transparent);
}

[data-theme="night"] .landing-step-row::after {
  border-color: rgba(74, 158, 255, 0.08);
}

[data-theme="night"] .landing-step-number {
  background: linear-gradient(135deg, #4a9eff, #3580d0);
  border-color: rgba(74, 158, 255, 0.3);
}

[data-theme="night"] .landing-step-text h3 {
  color: var(--accent-dim);
  text-shadow: none;
}

[data-theme="night"] .landing-step-text > p {
  color: var(--text);
}

[data-theme="night"] .landing-step h3 {
  color: var(--accent-dim);
}

[data-theme="night"] .landing-step > p {
  color: var(--text-muted);
}

[data-theme="night"] .poster-frame {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="night"] .poster-label {
  color: var(--text);
}

[data-theme="night"] .poster-sublabel {
  color: var(--text-muted);
}

[data-theme="night"] .showcase-poster-arrow {
  color: var(--accent-warm);
}

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

[data-theme="night"] .landing-feature h3 {
  color: var(--text);
}

[data-theme="night"] .landing-placeholder {
  background: var(--bg-warm);
  border-color: var(--border);
}

[data-theme="night"] .landing-screenshot {
  border-color: var(--border);
}

[data-theme="night"] .landing-divider {
  background: var(--bg);
}

[data-theme="night"] .landing-footer {
  background: linear-gradient(180deg, #0d1220 0%, var(--bg-nav) 100%);
}

[data-theme="night"] .landing-brand-sm {
  color: var(--accent-dim);
}

[data-theme="night"] .landing-footer-links a {
  color: var(--text-muted);
}

[data-theme="night"] .landing-footer-links a:hover {
  color: var(--text);
}

/* --- Pricing tiers (multi-user landing) --- */
[data-theme="night"] .landing-tier {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="night"] .landing-tier-featured {
  border-color: var(--gold);
}

[data-theme="night"] .landing-tier h3 {
  color: var(--text);
}

[data-theme="night"] .landing-tier-price {
  color: var(--accent-dim);
}

[data-theme="night"] .landing-tier li {
  color: var(--text-muted);
}

/* === Night Mode: Masthead Nav === */
[data-theme="night"] .nav-masthead {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
[data-theme="night"] .masthead-img {
  filter: brightness(0.85) sepia(0.15);
}
[data-theme="night"] .masthead-target.active::before {
  background: rgba(74, 158, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.4),
              0 0 28px rgba(74, 158, 255, 0.3);
}
[data-theme="night"] .masthead-dropdown {
  background: var(--bg-nav);
  border-color: rgba(74, 158, 255, 0.3);
  border-top-color: var(--accent-dim);
}
[data-theme="night"] .masthead-dropdown a {
  color: var(--text);
}
[data-theme="night"] .masthead-dropdown a:hover {
  background: rgba(74, 158, 255, 0.08);
  color: var(--accent-dim);
}
[data-theme="night"] .masthead-dropdown a.active {
  color: var(--accent-dim);
}
[data-theme="night"] .theme-toggle {
  background: rgba(17, 24, 39, 0.75);
  border-color: rgba(74, 158, 255, 0.25);
}
[data-theme="night"] .theme-toggle:hover {
  background: rgba(17, 24, 39, 0.95);
}
[data-theme="night"] .mobile-tab-bar {
  background: var(--bg-nav);
  border-top-color: var(--border);
}
[data-theme="night"] .tab-item {
  color: var(--text);
  opacity: 0.65;
}
[data-theme="night"] .tab-item.active {
  opacity: 1;
  color: var(--accent-dim);
}