/* ═══════════════════════════════════════════════════
   STAGE 7: Full Experience Consistency Pass
   Timeline + Detail views now match the dark landing aesthetic
   ═══════════════════════════════════════════════════ */

/* ── Override timeline-view colors to use landing palette ── */
.timeline-view {
  background: var(--landing-bg);
  color: var(--landing-text);
}

/* ── Sidebar: dark treatment ── */
.sidebar {
  background: var(--landing-surface);
  border-right: 1px solid var(--landing-border);
  color: var(--landing-text);
}

.sidebar-header {
  border-bottom: none;
}

.sidebar-brand .logo-text {
  color: var(--landing-text);
  font-size: var(--text-sm);
}

.sidebar-brand .logo {
  color: var(--landing-accent);
}

.back-btn {
  color: var(--landing-text-muted);
  background: transparent;
}
.back-btn:hover {
  background: var(--landing-surface-2);
  color: var(--landing-text);
}

.sidebar-country {
  background: var(--landing-surface-2);
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-lg);
}

.sidebar-country-name {
  color: var(--landing-text);
}

.sidebar-country-sub {
  color: var(--landing-text-muted);
}

/* ── Filter controls — dark ── */
.filter-heading {
  color: var(--landing-text-muted);
}

.chip {
  border-color: var(--landing-border);
  color: var(--landing-text-muted);
  background: transparent;
}
.chip:hover {
  border-color: var(--landing-accent);
  color: var(--landing-accent);
  background: rgba(88, 196, 255, 0.06);
}
.chip.active {
  background: var(--landing-accent);
  color: var(--landing-bg);
  border-color: var(--landing-accent);
}
.chip .chip-dot {
  opacity: 0.8;
}

/* ── Data action buttons ── */
.btn-secondary {
  background: var(--landing-surface-2);
  color: var(--landing-text-muted);
  border: 1px solid var(--landing-border);
}
.btn-secondary:hover {
  background: rgba(88, 196, 255, 0.08);
  color: var(--landing-text);
  border-color: var(--landing-accent-dim);
}

.sidebar-footer {
  border-top: 1px solid var(--landing-border);
}

.sidebar-count {
  color: var(--landing-text-faint);
}

/* ── Top Bar — dark ── */
.topbar {
  background: var(--landing-surface);
  border-bottom: 1px solid var(--landing-border);
}

.topbar-breadcrumb {
  color: var(--landing-text-faint);
}
.topbar-breadcrumb-link {
  color: var(--landing-text-faint);
}
.topbar-breadcrumb-link:hover {
  color: var(--landing-accent);
}
.topbar-breadcrumb-current {
  color: var(--landing-text);
}

.search-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-md);
}
.search-wrapper:focus-within {
  border-color: var(--landing-accent);
  box-shadow: 0 0 0 3px rgba(88, 196, 255, 0.1);
}
.search-icon {
  color: var(--landing-text-faint);
}
.search-input {
  color: var(--landing-text);
}
.search-input::placeholder {
  color: var(--landing-text-faint);
}

.era-label {
  color: var(--landing-text-faint);
}

/* Theme toggle in timeline */
.timeline-view .theme-toggle {
  color: var(--landing-text-muted);
}
.timeline-view .theme-toggle:hover {
  background: var(--landing-surface-2);
  color: var(--landing-text);
}

/* ── Main content area ── */
.main-wrapper {
  background: var(--landing-bg);
}

.timeline-container {
  background: var(--landing-bg);
  scrollbar-color: var(--landing-border) var(--landing-surface);
}
.timeline-container::-webkit-scrollbar-track {
  background: var(--landing-surface);
}
.timeline-container::-webkit-scrollbar-thumb {
  background: var(--landing-border);
}
.timeline-container::-webkit-scrollbar-thumb:hover {
  background: var(--landing-text-faint);
}

/* ── Timeline vertical line ── */
.timeline-vertical::before {
  background: var(--landing-border);
}

/* ── Era markers ── */
.timeline-era-label {
  color: var(--landing-text-muted);
}
.timeline-era-label::before {
  background: var(--landing-surface-2);
  border-color: var(--landing-border);
}

/* ── Event cards — dark panels ── */
.timeline-event {
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-lg);
}
.timeline-event:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(88, 196, 255, 0.1);
  transform: translateX(4px);
  border-color: var(--landing-accent-dim);
}
.timeline-event.active {
  border-color: var(--landing-accent);
  box-shadow: 0 0 0 2px rgba(88, 196, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Dot on timeline */
.timeline-event::before {
  border-color: var(--landing-surface);
}
.timeline-event:hover::before {
  box-shadow: 0 0 0 4px rgba(88, 196, 255, 0.15);
}

/* Connector line */
.timeline-event::after {
  background: var(--landing-border);
}

.timeline-event-year {
  color: var(--landing-accent);
}
.timeline-event-title {
  color: var(--landing-text);
}
.timeline-event-desc {
  color: var(--landing-text-muted);
}

/* Event badges */
.event-badge {
  background: rgba(255, 255, 255, 0.04);
  color: var(--landing-text-muted);
  border: 1px solid var(--landing-border);
}
.event-figures {
  color: var(--landing-text-faint);
}

/* ── Featured event card ── */
.timeline-event--featured {
  border: 1px solid var(--landing-accent-dim);
  background: var(--landing-surface);
  overflow: hidden;
}
.timeline-event--featured:hover {
  border-color: var(--landing-accent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 196, 255, 0.15);
}
.featured-image-slot {
  background: var(--landing-surface-2);
  border-bottom: 1px solid var(--landing-border);
}
.featured-image-placeholder {
  background: var(--landing-surface-2);
  color: var(--landing-text-faint);
}
.featured-body .timeline-event-title {
  color: var(--landing-text);
}

/* Featured card quote */
.timeline-event-quote {
  border-left-color: var(--landing-accent);
  background: rgba(88, 196, 255, 0.04);
}
.timeline-event-quote p {
  color: var(--landing-text);
}
.timeline-event-quote footer {
  color: var(--landing-text-muted);
}

/* ── Detail panel — dark ── */
.detail-overlay::before {
  background: rgba(6, 10, 20, 0.6);
}
.detail-panel {
  background: var(--landing-surface);
  border-left: 1px solid var(--landing-border);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}
.detail-header {
  background: var(--landing-surface);
  border-bottom: 1px solid var(--landing-border);
}
.detail-close {
  color: var(--landing-text-muted);
}
.detail-close:hover {
  background: var(--landing-surface-2);
  color: var(--landing-text);
}

.detail-category-badge {
  border: 1px solid var(--landing-border);
}
.detail-featured-badge {
  background: rgba(88, 196, 255, 0.08);
  color: var(--landing-accent);
  border: 1px solid var(--landing-accent-dim);
}

.detail-date {
  color: var(--landing-accent);
}
.detail-title {
  color: var(--landing-text);
}
.detail-description {
  color: var(--landing-text);
  opacity: 0.85;
}
.detail-location {
  border-color: var(--landing-border);
  color: var(--landing-text-muted);
  background: var(--landing-surface-2);
}

.detail-facts li {
  color: var(--landing-text);
  opacity: 0.85;
}

.detail-quote {
  border-left-color: var(--landing-accent);
  background: rgba(88, 196, 255, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.detail-quote p {
  color: var(--landing-text);
}
.detail-quote footer {
  color: var(--landing-text-muted);
}

.detail-section-heading {
  color: var(--landing-text-muted);
  border-top-color: var(--landing-border);
}

.detail-key-figures li {
  color: var(--landing-text);
  border-bottom-color: var(--landing-border);
}

.detail-significance {
  color: var(--landing-text-muted);
}

.detail-nearby-events li {
  border-bottom-color: var(--landing-border);
  color: var(--landing-text);
}
.detail-nearby-events li:hover {
  color: var(--landing-accent);
}
.detail-nearby-year {
  color: var(--landing-text-faint);
}
.detail-nearby-title {
  color: var(--landing-text);
}
.detail-nearby-events li:hover .detail-nearby-title {
  color: var(--landing-accent);
}

/* ── Empty state ── */
.empty-state {
  color: var(--landing-text-muted);
}
.empty-state svg {
  color: var(--landing-text-faint);
}
.empty-state h3 {
  color: var(--landing-text);
}

/* ── Mobile navigation controls ── */
.mobile-back-btn,
.mobile-filter-btn {
  background: var(--landing-surface);
  border-color: var(--landing-border);
  color: var(--landing-text);
}
.mobile-back-btn {
  border-right-color: var(--landing-border);
}
.mobile-filter-btn {
  border-left-color: var(--landing-border);
}
.mobile-back-btn:active,
.mobile-filter-btn:active {
  background: var(--landing-surface-2);
}

/* ── Pulse highlight animation — match blue accent ── */
@keyframes event-pulse-s7 {
  0% { box-shadow: 0 0 0 0 rgba(88, 196, 255, 0.35); }
  40% { box-shadow: 0 0 0 8px rgba(88, 196, 255, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(88, 196, 255, 0); }
}

.timeline-event.event-pulse-highlight {
  animation: event-pulse-s7 700ms ease 2;
  border-color: var(--landing-accent) !important;
  background: rgba(88, 196, 255, 0.06) !important;
}

/* ── Category dot colors on dark bg — slightly brighter ── */
.event-badge .event-badge-dot,
.chip .chip-dot {
  filter: brightness(1.1);
}

/* ── Scrollbar for sidebar on dark ── */
.sidebar::-webkit-scrollbar-thumb {
  background: var(--landing-border);
}

/* ── Scroll-to-top fab — already blue, just clean up ── */
.scroll-top-fab {
  background: var(--landing-accent-dim);
}
.scroll-top-fab:hover {
  background: var(--landing-accent);
}

/* ═══════════════════════════════════════════════════
   MAP REALISM IMPROVEMENTS — Stage 7
   More detailed, realistic dark map appearance
   ═══════════════════════════════════════════════════ */

/* Enhanced land rendering for realism */
.map-land {
  fill: var(--map-land-fill);
  stroke: var(--map-land-stroke);
  stroke-width: 0.6;
  stroke-linejoin: round;
  filter: none;
}

/* Add subtle inner shadow/3D feel to landmasses */
.map-landmasses {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Continent-specific color variations for realism */
.map-region[data-region="north-america"] .map-land { fill: #162236; }
.map-region[data-region="south-america"] .map-land { fill: #142030; }
.map-region[data-region="europe"] .map-land { fill: #18263a; }
.map-region[data-region="africa"] .map-land { fill: #1a2436; }
.map-region[data-region="middle-east"] .map-land { fill: #1c2838; }
.map-region[data-region="south-asia"] .map-land { fill: #162234; }
.map-region[data-region="east-asia"] .map-land { fill: #152236; }
.map-region[data-region="southeast-asia"] .map-land { fill: #142032; }
.map-region[data-region="oceania"] .map-land { fill: #141e30; }

/* UK — remains glowing active */
.map-region[data-region="europe-uk"] .map-land { fill: var(--map-active-fill); }

/* Hover for continent-specific — brighter versions */
.map-region[data-region="north-america"]:hover .map-land,
.map-region[data-region="north-america"].hover .map-land { fill: #1e3048; }
.map-region[data-region="south-america"]:hover .map-land,
.map-region[data-region="south-america"].hover .map-land { fill: #1c2e42; }
.map-region[data-region="europe"]:hover .map-land,
.map-region[data-region="europe"].hover .map-land { fill: #20324c; }
.map-region[data-region="africa"]:hover .map-land,
.map-region[data-region="africa"].hover .map-land { fill: #223048; }
.map-region[data-region="middle-east"]:hover .map-land,
.map-region[data-region="middle-east"].hover .map-land { fill: #24344c; }
.map-region[data-region="south-asia"]:hover .map-land,
.map-region[data-region="south-asia"].hover .map-land { fill: #1e3046; }
.map-region[data-region="east-asia"]:hover .map-land,
.map-region[data-region="east-asia"].hover .map-land { fill: #1d2e48; }
.map-region[data-region="southeast-asia"]:hover .map-land,
.map-region[data-region="southeast-asia"].hover .map-land { fill: #1c2c44; }
.map-region[data-region="oceania"]:hover .map-land,
.map-region[data-region="oceania"].hover .map-land { fill: #1c2a42; }

/* ── Make map labels more like the reference ── */
.map-label {
  font-size: 10px;
  font-weight: 500;
  fill: var(--map-label-fill);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.map-label--active {
  fill: var(--map-label-active-fill);
  font-weight: 700;
  font-size: 11px;
  opacity: 1;
}

/* ── Reduce grid/graticule opacity for cleaner look ── */
.world-map rect[fill="url(#grid-fine)"] { opacity: 0.3 !important; }
.world-map rect[fill="url(#grid)"] { opacity: 0.2 !important; }
.world-map rect[fill="url(#graticule)"] { opacity: 0.12 !important; }

/* ── Hotspot markers more subtle ── */
.map-hotspot__core {
  fill: #3ad0a0;
}
.map-hotspot__ring {
  stroke: #3ad0a0;
  stroke-width: 0.5;
}

/* ── Selection colors ── */
.timeline-view ::selection {
  background: rgba(88, 196, 255, 0.2);
  color: var(--landing-text);
}

/* ── Responsive overrides ── */
@media (max-width: 768px) {
  .sidebar {
    background: var(--landing-surface);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
}

/* ── Featured image slot on dark bg ── */
.featured-image-slot {
  border-bottom-color: var(--landing-border);
}
.featured-image-slot img {
  filter: brightness(0.85) saturate(0.9);
}
.timeline-event--featured:hover .featured-image-slot img {
  filter: brightness(0.95) saturate(1);
}

/* ── Detail panel featured image dark treatment ── */
.detail-featured-image {
  border-bottom: 1px solid var(--landing-border);
}

/* ═══════════════════════════════════════════════════
   STAGE 7 — Refinements
   ═══════════════════════════════════════════════════ */

/* ── Category badge colors for dark bg ── */
.detail-category-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--landing-text);
  border: 1px solid var(--landing-border);
}

/* Category-specific badge colors with dark palette */
.event-badge,
.detail-category-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Timeline event dot colors using category */
.timeline-event::before {
  background: var(--landing-accent-dim);
}

/* Active chip uses accent blue instead of warm primary */
.chip.active {
  background: var(--landing-accent);
  color: var(--landing-bg);
  border-color: var(--landing-accent);
}
.chip.active:hover {
  background: #7ad4ff;
  border-color: #7ad4ff;
}

/* ── Topbar breadcrumb separator ── */
.topbar-breadcrumb-sep {
  opacity: 0.3;
  color: var(--landing-text-faint);
}

/* ── Topbar section ── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── Sidebar scrollbar dark ── */
.sidebar {
  scrollbar-color: var(--landing-border) transparent;
}

/* ── Country badge in sidebar: more prominent ── */
.sidebar-country {
  padding: var(--space-3) var(--space-4);
}

/* ── Map panel — slight improvement to map info strip ── */
.map-info-strip {
  border-top: none;
}

/* ── Timeline view: override body background ── */
.timeline-view .main-wrapper {
  background: var(--landing-bg);
}

/* ── Fix contrast for close button on detail ── */
.detail-close {
  border: 1px solid var(--landing-border);
  border-radius: var(--radius-md);
}

/* ── Key Figures list in detail — separator ── */
.detail-key-figures li {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  padding: var(--space-3) 0;
}

/* ── Nearby events section ── */
.detail-nearby-events li {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Detail panel scroll ── */
.detail-panel {
  scrollbar-color: var(--landing-border) var(--landing-surface);
}
.detail-panel::-webkit-scrollbar {
  width: 6px;
}
.detail-panel::-webkit-scrollbar-track {
  background: var(--landing-surface);
}
.detail-panel::-webkit-scrollbar-thumb {
  background: var(--landing-border);
  border-radius: 999px;
}

/* ── Make the event card border glow match the dot color ── */
.timeline-event.active {
  border-color: var(--landing-accent-dim);
}

/* ── Detail overlay backdrop ── */
.detail-overlay::before {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Empty state dark ── */
.empty-state p {
  color: var(--landing-text-muted);
}

/* ── Fix the search bar in topbar ── */
.timeline-view .search-wrapper {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

/* ── Sidebar: override the old warm logo/brand color ── */
.sidebar-brand .logo {
  color: var(--landing-accent) !important;
}

/* ── Override old warm category colors for event cards ── */
.timeline-view .timeline-event-year {
  color: var(--landing-accent);
}

/* ── Fix the 'featured badge' color in detail ── */
.detail-featured-badge {
  background: rgba(88, 196, 255, 0.1);
  color: var(--landing-accent);
  border-color: rgba(88, 196, 255, 0.25);
}

/* ── Stat cards: fix counter animation ── */
.dash-stat-card {
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
}
.dash-stat-card:hover {
  transform: translateY(-1px);
}

/* ── Fix for light theme state — only applies to landing (no longer needed for timeline) ── */
[data-theme="light"] .timeline-view,
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar,
[data-theme="light"] .timeline-container,
[data-theme="light"] .main-wrapper,
[data-theme="light"] .detail-panel,
[data-theme="light"] .detail-header {
  /* Light theme: keep the dark look for consistency */
  /* The landing is always dark, so the timeline should be too */
}

/* ═══════════════════════════════════════════════════
   TREK LINE LOGO MARK
   Accent dots use the landing accent color;
   path stroke + muted dots use currentColor for theme adaptability.
   ═══════════════════════════════════════════════════ */
.trek-dot-accent {
  fill: var(--landing-accent);
}

/* Ensure the Trek Line mark's stroke color inherits properly */
.trek-line-mark {
  color: var(--landing-text, #c8d0e0);
}

.dash-header .trek-line-mark {
  color: var(--landing-accent);
}

.sidebar-brand .trek-line-mark {
  color: var(--landing-accent) !important;
}


/* ═══════════════════════════════════════════════════
   MOBILE SEARCH BAR FIX
   Drop the search bar below the breadcrumb row on
   narrow screens so it doesn't clip off-screen.
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Let the topbar wrap and grow beyond its fixed height */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-height);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  /* Top row: breadcrumb + right controls stay inline */
  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  /* Search wrapper drops to a new full-width row */
  .topbar-left .search-wrapper {
    flex: 1 0 100%;
    order: 10;
    max-width: 100%;
  }

  /* Breadcrumb stays compact on the first row */
  .topbar-breadcrumb {
    flex-shrink: 0;
    margin-right: auto;
  }
}

/* Extra-narrow phones: tighten padding further */
@media (max-width: 480px) {
  .topbar {
    padding-left: 50px;
    padding-right: 50px;
  }

  .topbar-left .search-wrapper {
    padding: var(--space-2);
  }

  .search-input {
    font-size: var(--text-xs);
  }
}