:root {
    --bg-color: #f5f5f4; /* light background */
    --text-color: #1c1917; /* dark text */
    --text-color-muted: #57534e; /* muted text */
    --card-bg: #ffffff; /* panels */
    --nav-button-bg: #ccfbf1; /* teal-100 */
    --nav-button-color: #0f766e; /* teal-700 */
    --nav-button-border: #99f6e4; /* teal-200 */
    --nav-button-hover-bg: #99f6e4; /* teal-200 */
    --nav-button-hover-color: #134e4a; /* teal-900 */
    --nav-button-hover-border: #0d9488; /* teal-600 */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #a8a29e; /* stone-400 */
    --scrollbar-thumb-hover: #78716c; /* stone-500 */
    --accent-color: #0f766e; /* teal base */
}

body {
    font-family: 'Assistant', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 280px;
    max-height: 300px;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Shared navigation button style */
.nav-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nav-button-color);
    background-color: var(--nav-button-bg);
    border: 1px solid var(--nav-button-border);
    border-radius: 0.75rem;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(15, 118, 110, 0.15);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-button:hover,
.nav-button:focus {
    background-color: var(--nav-button-hover-bg);
    color: var(--nav-button-hover-color);
    border-color: var(--nav-button-hover-border);
}

/* Panels */
#timeline-nav,
#details-panel {
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Theme selection dropdown */
.theme-select {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--nav-button-border);
    background-color: var(--nav-button-bg);
    color: var(--nav-button-color);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 118, 110, 0.15);
    transition: background-color 0.2s, color 0.2s;
}

.theme-select:hover,
.theme-select:focus {
    background-color: var(--nav-button-hover-bg);
    color: var(--nav-button-hover-color);
    border-color: var(--nav-button-hover-border);
}

/* גובה/פריסה בקארד כמו המפה הסכמטית */
.leaflet-map {
    position: relative;
    width: 100%;
    height: 280px; /* תואם ל-.chart-container */
    max-height: 300px;
    border-radius: 0.75rem; /* עגול כמו הקארדים */
    overflow: hidden;
}

/* ברירת מחדל (מצב בהיר) – שקיפות עדינה בלבד */
.leaflet-tile-pane {
    opacity: 0.65;
}

/* מצב כהה – שקיפות עדינה יותר (שומר על טקסט/כבישים חדים) */
body.dark-mode .leaflet-tile-pane {
    opacity: 0.85;
}

/* טולטיפים נוחים לקריאה על מפה כהה */
.leaflet-tooltip {
    background: rgba(17, 24, 39, 0.92); /* slate-900 */
    color: #e5e7eb; /* gray-200 */
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* צבעי שכבות עליונות (נקודות/קווים) יתאמו ל־CSS Vars הקיימים */
:root {
    --route-color: #14b8a6; /* teal-500 */
    --route-stroke: #0f766e; /* teal-700 */
    --poi-color: #a8a29e; /* stone-400 */
}
body.dark-mode {
    --route-color: #5eead4; /* teal-300 בהיר יותר על רקע כהה */
    --route-stroke: #99f6e4; /* teal-200 */
    --poi-color: #94a3b8; /* slate-400 */
}

/* Dark mode variables */
body.dark-mode {
    --bg-color: #1e293b; /* slate-800 */
    --text-color: #f3f4f6; /* gray-100 */
    --text-color-muted: #9ca3af; /* gray-400 */
    --card-bg: #334155; /* slate-700 */
    --nav-button-bg: #115e59; /* teal-800 */
    --nav-button-color: #ccfbf1; /* teal-100 */
    --nav-button-border: #0d9488; /* teal-600 */
    --nav-button-hover-bg: #0f766e; /* teal-700 */
    --nav-button-hover-color: #e0f2f1; /* teal-50 */
    --nav-button-hover-border: #0f766e; /* teal-700 */
    --scrollbar-track: #1f2937;
    --scrollbar-thumb: #475569;
    --scrollbar-thumb-hover: #64748b;
    --accent-color: #5eead4;
}

/* Override common Tailwind classes in dark mode */
body.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
}
body.dark-mode .bg-white\/80 {
    background-color: rgba(51, 65, 85, 0.8) !important;
}
body.dark-mode .bg-404 {
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
}
body.dark-mode .bg-stone-50 {
    background-color: #1e293b !important;
}
body.dark-mode .bg-stone-100 {
    background-color: #1e293b !important;
}
body.dark-mode .bg-stone-200 {
    background-color: #374151 !important;
}
body.dark-mode .bg-stone-300 {
    background-color: #4b5563 !important;
}
body.dark-mode .bg-teal-100 {
    background-color: #134e4a !important;
}

body.dark-mode .text-stone-800,
body.dark-mode .text-stone-700 {
    color: var(--text-color) !important;
}
body.dark-mode .text-stone-600,
body.dark-mode .text-stone-500 {
    color: var(--text-color-muted) !important;
}
body.dark-mode .text-teal-800,
body.dark-mode .text-teal-700,
body.dark-mode .text-teal-500 {
    color: var(--accent-color) !important;
}
body.dark-mode .text-red-500 {
    color: #f87171 !important;
}