/* Matkalle — custom styles */
/* Muokkaa tätä tiedostoa Settings → Tiedostoeditori */

/* ===== TEEMA: TUMMA (oletus) ===== */
:root, [data-theme="dark"] {
    color-scheme: dark;
}

/* ===== TEEMA: VAALEA ===== */
/* Tailwind v4 käyttää CSS-muuttujia, voidaan yliajaa */
[data-theme="light"] {
    color-scheme: light;

    /* Slate-paletti käännetään: tummat → vaaleat taustat */
    --color-slate-950: #f8fafc;
    --color-slate-900: #ffffff;
    --color-slate-800: #f8fafc;
    --color-slate-700: #f1f5f9;
    --color-slate-600: #e2e8f0;
    --color-slate-500: #94a3b8;
    --color-slate-400: #64748b;
    --color-slate-300: #475569;
    --color-slate-200: #334155;
    --color-slate-100: #1e293b;
    --color-slate-50:  #0f172a;
}

/* Tekstivärit vaaleassa tilassa */
[data-theme="light"] .text-white         { color: #1e293b; }
[data-theme="light"] .text-slate-100     { color: #1e293b; }
[data-theme="light"] .text-slate-200     { color: #334155; }
[data-theme="light"] .text-slate-300     { color: #475569; }

/* Värilliset napit + linkit säilyttävät valkoisen tekstin */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-500,
[data-theme="light"] .bg-emerald-600,
[data-theme="light"] .bg-emerald-500,
[data-theme="light"] .bg-red-600,
[data-theme="light"] .bg-red-500,
[data-theme="light"] .bg-amber-600,
[data-theme="light"] .bg-amber-500,
[data-theme="light"] .bg-orange-600,
[data-theme="light"] .bg-orange-500,
[data-theme="light"] .bg-cyan-600,
[data-theme="light"] .bg-teal-600,
[data-theme="light"] .bg-violet-600,
[data-theme="light"] .bg-purple-600,
[data-theme="light"] .bg-indigo-600,
[data-theme="light"] .bg-pink-600,
[data-theme="light"] .bg-rose-600,
[data-theme="light"] .bg-sky-600,
[data-theme="light"] .bg-green-600 { color: #ffffff; }

/* Flatpickr: vaaleassa tilassa vaalea kalenteri */
[data-theme="light"] .flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
[data-theme="light"] .flatpickr-day { color: #334155 !important; }
[data-theme="light"] .flatpickr-day:hover { background: #f1f5f9 !important; }
[data-theme="light"] .flatpickr-day.selected { background: #3b82f6 !important; color: white !important; }

/* Leaflet-kartta: ei teemavaikutusta (kartta on aina kirkas) */

/* Active coordinate input */
[data-theme="light"] .active-coord-input {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
    background-color: #f8fafc !important;
}

/* Vaihdon animaatio */
html { transition: background-color 0.2s ease, color 0.2s ease; }

/* ===== LIGHT THEME: inline-style overrides =====
   Stylesheet !important beats non-!important inline styles per CSS cascade spec. */
html[data-theme="light"] body {
    background: #f0f4f8 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .mk-nav {
    background: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .mk-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .mk-input {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html[data-theme="light"] .mk-btn-dark {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
/* Inline dark backgrounds */
html[data-theme="light"] *[style*="background:#0f0f0f"] { background: #f0f4f8 !important; }
html[data-theme="light"] *[style*="background:#1a1a1a"] { background: #ffffff !important; }
html[data-theme="light"] *[style*="background:#161616"] { background: #f8fafc !important; }
html[data-theme="light"] *[style*="background:#111"] { background: #f1f5f9 !important; }
html[data-theme="light"] *[style*="background:#2a2a2a"] { background: #e2e8f0 !important; }
html[data-theme="light"] *[style*="background:#252525"] { background: #f1f5f9 !important; }
/* Muted text colors */
html[data-theme="light"] *[style*="color:#8b949e"] { color: #475569 !important; }
html[data-theme="light"] *[style*="color:#555"] { color: #94a3b8 !important; }
html[data-theme="light"] *[style*="color:#a0a0a0"] { color: #64748b !important; }
/* Nav / border colors */
html[data-theme="light"] *[style*="border:1px solid #2a2a2a"] { border-color: #e2e8f0 !important; }
html[data-theme="light"] *[style*="border-bottom:1px solid #2a2a2a"] { border-bottom-color: #e2e8f0 !important; }
html[data-theme="light"] *[style*="border-bottom-color:#2a2a2a"] { border-bottom-color: #e2e8f0 !important; }
/* Gradient hero — lighten for light theme */
html[data-theme="light"] *[style*="background:linear-gradient(150deg,#0f172a"] { background: linear-gradient(150deg,#e0f2fe,#bae6fd,#7dd3fc) !important; }
html[data-theme="light"] *[style*="background:linear-gradient(160deg,#0a0a0a"] { background: linear-gradient(160deg,#e0f2fe,#bae6fd,#7dd3fc) !important; }
/* Cards with border-left accent keep the accent */
html[data-theme="light"] *[style*="background:#1a1a1a;border:1px solid #2a2a2a"] {
    background: #ffffff !important; border-color: #e2e8f0 !important;
}

/* ===== YLEISKATSAUS: KOMPAKTIT AIKAJANA-KORTIT ===== */
.overview-tl-card { transition: transform 0.1s; }
.overview-tl-card:hover { transform: translateX(2px); }
.overview-tl-card:active { transform: scale(0.98); }

/* Kortin teksti: tumma molemmissa teemoissa (tausta on kirkas värisävy) */
.overview-tl-title { color: #1e293b; }
[data-theme="dark"] .overview-tl-title { color: #f1f5f9; }

/* Detail-popup sisäinen tyyli */
#elementDetailContent { font-family: inherit; }
#elementDetailContent div[style] { border-radius: 0; }

/* ===== UI5: VAALEA TILAN HIENOSÄÄTÖ ===== */

/* — Navbar — */
[data-theme="light"] nav {
    background: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] nav a,
[data-theme="light"] nav button:not([class*="bg-"]) { color: #475569; }
[data-theme="light"] nav a:hover { color: #1e293b; }

/* — Hamburger-valikko — */
[data-theme="light"] #hamburgerMenu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
[data-theme="light"] #hamburgerMenu button,
[data-theme="light"] #hamburgerMenu a { color: #475569 !important; }
[data-theme="light"] #hamburgerMenu button:hover,
[data-theme="light"] #hamburgerMenu a:hover { background: #f8fafc !important; color: #1e293b !important; }
[data-theme="light"] #hamburgerMenu .border-b,
[data-theme="light"] #hamburgerMenu .border-t { border-color: #f1f5f9 !important; }

/* — Modaalit — */
[data-theme="light"] #passengerModal,
[data-theme="light"] #elementModal > div,
[data-theme="light"] #profileModal > div,
[data-theme="light"] #infoModal > div,
[data-theme="light"] #ratingModal > div,
[data-theme="light"] #receiptModal > div,
[data-theme="light"] #vehicleEditorModal > div,
[data-theme="light"] #countriesModal > div {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] #passengerModal {
    background: #ffffff !important;
    border-right-color: #e2e8f0 !important;
}
/* Modaalin sisäiset otsikkopalkit */
[data-theme="light"] [class*="Modal"] .border-b,
[data-theme="light"] [class*="Modal"] .border-t { border-color: #f1f5f9 !important; }

/* — Input-kentät vaaleassa tilassa — */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="url"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    background: #ffffff !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; }
[data-theme="light"] select option { background: #ffffff; color: #1e293b; }

/* — Karttasuodatus-napit — */
[data-theme="light"] #mapLayerFilters button {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] #mapLayerFilters button:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}
[data-theme="light"] #mapLayerFilters button.layer-active {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1d4ed8;
    font-weight: 700;
}

/* — Koordinaattikenttä kartalla — */
[data-theme="light"] #coordDisplay { color: #475569; }

/* — Haku-palkki — */
[data-theme="light"] #mapSearchInput { color: #1e293b !important; }

/* — Taulukko-/listavalikot — */
[data-theme="light"] .bg-slate-900\/60 { background: rgba(248,250,252,0.8) !important; }
[data-theme="light"] .bg-slate-900\/40 { background: rgba(248,250,252,0.5) !important; }
[data-theme="light"] .bg-slate-900\/50 { background: rgba(248,250,252,0.6) !important; }

/* — Infolaatikot (varoitukset, huomiot) — */
[data-theme="light"] .bg-amber-900\/15 { background: rgba(254,243,199,0.6) !important; }
[data-theme="light"] .bg-blue-950\/40   { background: rgba(239,246,255,0.8) !important; }
[data-theme="light"] .bg-blue-900\/15  { background: rgba(239,246,255,0.5) !important; }

/* — Aikajana: nykyhetken merkki — */
[data-theme="light"] #nowMarker .bg-rose-500\/10 {
    background: rgba(254,226,226,0.6) !important;
}

/* ===== UI4: ETUSIVU / MATKALISTA ===== */

/* Matkalistan kortti */
[data-theme="light"] .trip-list-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .trip-list-card .border-b {
    border-bottom-color: #f1f5f9;
}

/* Matkalinkit */
[data-theme="light"] .trip-card-link {
    background: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .trip-card-link:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
[data-theme="light"] .trip-card-link p.font-semibold { color: #1e293b; }
[data-theme="light"] .trip-card-link:hover p.font-semibold { color: #2563eb; }

/* "Luo uusi matka" lomake vaaleassa tilassa */
[data-theme="light"] .create-trip-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* ===== UI3: AIKAJANAKORTTIEN REDESIGN ===== */

/* Aikajanaviiva teeman mukaan */
[data-theme="dark"]  #mainTimeline { border-left-color: #334155; }
[data-theme="light"] #mainTimeline { border-left-color: #cbd5e1; }

/* Aika-badge */
.tl-time-badge {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
[data-theme="light"] .tl-time-badge {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

/* Kortin sisältöalue vaaleassa tilassa */
[data-theme="light"] .tl-card-body {
    background: #ffffff;
}
[data-theme="light"] .tl-card-body .border-b {
    border-bottom-color: #f1f5f9;
}
[data-theme="light"] .tl-card-body h4 {
    color: #1e293b;
}
[data-theme="light"] .tl-card-body .border-slate-800 {
    border-color: #f1f5f9;
}

/* Kortin reunaviiva + varjo vaaleassa tilassa */
[data-theme="light"] .timeline-element > div:not(.absolute) {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #e2e8f0 !important;
}

/* Aikajana-dot raja vaaleassa tilassa */
[data-theme="light"] .timeline-element .border-slate-800 {
    border-color: #f8fafc;
}

/* Otsikko isompi */
.tl-card-body h4 {
    font-size: 1rem;
    line-height: 1.35;
}

/* Toimintopainikkeet — näkyy aina mobiilissa */
@media (max-width: 640px) {
    .tl-card-body .tl-edit-btn,
    .tl-card-body .tl-del-btn { opacity: 1; }
}

/* ===== MUUT TYYLIT (teemasta riippumattomat) ===== */

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { height: 8px; width: 6px; }
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; border-radius: 4px; }
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Flatpickr tumma (default) */
[data-theme="dark"] .flatpickr-calendar { background: #1e293b !important; border: 1px solid #334155 !important; z-index: 99999 !important; }
.flatpickr-calendar { z-index: 99999 !important; }

/* Timeline now-line pulse */
@keyframes tlNowPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
#tlNowLine { animation: tlNowPulse 2s ease-in-out infinite; }

/* Liikkuvat ajoneuvot kartalla */
@keyframes shipRock   { 0%,100%{transform:rotate(-6deg)}  50%{transform:rotate(6deg)} }
@keyframes planeFloat { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-3px)} }
@keyframes roadBounce { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-2px)} }
@keyframes trainSway  { 0%,100%{transform:rotate(-2deg)}  50%{transform:rotate(2deg)} }
.ship-rocking  { display:inline-block; font-size:26px; animation:shipRock   2s   ease-in-out infinite; transform-origin:center 80%; line-height:1; }
.plane-flying  { display:inline-block; font-size:26px; animation:planeFloat 3s   ease-in-out infinite; line-height:1; }
.road-bounce   { display:inline-block; font-size:26px; animation:roadBounce 1.2s ease-in-out infinite; line-height:1; }
.train-sway    { display:inline-block; font-size:26px; animation:trainSway  1.5s ease-in-out infinite; line-height:1; }
.ship-live-icon, .moving-vehicle-icon { background:transparent; border:none; }

/* ===== LEAFLET POPUP — TUMMA TEEMA ===== */
.leaflet-popup-content-wrapper {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
    padding: 0 !important;
    color: #e2e8f0 !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    min-width: 240px;
    max-width: 300px;
}
.leaflet-popup-tip-container .leaflet-popup-tip {
    background: #1e293b !important;
    box-shadow: none !important;
}
.leaflet-popup-close-button {
    color: #64748b !important;
    font-size: 18px !important;
    padding: 6px 8px !important;
    top: 4px !important;
    right: 4px !important;
    border-radius: 50%;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.leaflet-popup-close-button:hover { color: #f1f5f9 !important; background: #334155 !important; }

/* Timeline block hover */
.tl-block:hover { filter: brightness(1.1); }

/* KM-edit-nappi */
.km-edit-btn { opacity: 0.6; transition: opacity 0.15s; }
.km-hover-group:hover .km-edit-btn,
.km-edit-btn:hover { opacity: 1; }

/* Review carousel */
.review-carousel-wrap {
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.review-track { width: max-content; }
@keyframes reviewScroll { 0% { transform: translateX(0); } 100% { transform: translateX(var(--scroll-dist)); } }
.review-track.running { animation: reviewScroll var(--scroll-dur, 40s) linear infinite; }
.review-carousel-wrap:hover .review-track { animation-play-state: paused; }

/* ===== SIVUPALKKI (UI2) ===== */

/* Tumma sivupalkki */
[data-theme="dark"] #mainSidebar {
    background: #0f172a;
    border-right-color: #1e293b;
}
[data-theme="dark"] #mainSidebar .sidebar-link {
    color: #94a3b8;
}
[data-theme="dark"] #mainSidebar .sidebar-link:hover,
[data-theme="dark"] #mainSidebar .sidebar-link.active {
    background: #1e293b;
    color: #ffffff;
}
[data-theme="dark"] #mainSidebar .sidebar-link.active {
    color: #60a5fa;
    font-weight: 700;
}

/* Vaalea sivupalkki */
[data-theme="light"] #mainSidebar {
    background: #ffffff;
    border-right-color: #e2e8f0;
}
[data-theme="light"] #mainSidebar .sidebar-link {
    color: #475569;
}
[data-theme="light"] #mainSidebar .sidebar-link:hover {
    background: #f1f5f9;
    color: #1e293b;
}
[data-theme="light"] #mainSidebar .sidebar-link.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

/* ===== NÄKYMÄNVAIHTO (view-based navigation) ===== */
/* Piilotettu näkymä */
.app-view-hidden { display: none !important; }


/* ===== MOBIILIN ALANAVIKAATIO (kiinteä bottom tab bar) ===== */
#mobileViewTabs .mobile-tab {
    color: #6b7280;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#mobileViewTabs .mobile-tab.active {
    color: #00c9a7;
}
#mobileViewTabs .mobile-tab.active span:first-child {
    filter: drop-shadow(0 0 4px #00c9a760);
}
/* Sisältöalueen alaspäinen täyte — estää bottom barin piilottamisen */
@media (max-width: 1023px) {
    #mainWrap { padding-bottom: calc(80px + max(env(safe-area-inset-bottom), 12px)); }
}
[data-theme="light"] #mobileViewTabs {
    background: #fff !important;
    border-top-color: #e2e8f0 !important;
}
[data-theme="light"] #mobileViewTabs .mobile-tab { color: #9ca3af; }
[data-theme="light"] #mobileViewTabs .mobile-tab.active { color: #00c9a7; }

/* Mobile overrides */
@media (max-width: 640px) {
    .pax-actions { opacity: 1 !important; }
    .tl-edit-btn { min-height: 40px; padding: 8px 10px; font-size: 0.8rem; }
    .tl-del-btn  { min-height: 40px; padding: 8px 10px; font-size: 0.8rem; }
    .tl-rate-btn { min-height: 40px; min-width: 40px; padding: 8px; }
}

/* Cookie consent banner */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10001;
    background: #0f172a; border-top: 1px solid #334155;
    padding: 14px 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    box-shadow: 0 -4px 24px rgba(0,0,0,.5);
    font-family: inherit;
}
.cookie-banner__text { flex: 1; min-width: 200px; }
.cookie-banner__btns { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
    padding: 8px 18px; border-radius: 10px; font-size: 13px;
    font-weight: 600; cursor: pointer; border: none; transition: background .15s;
}
.cookie-btn--outline {
    background: transparent; color: #94a3b8;
    border: 1px solid #475569;
}
.cookie-btn--outline:hover { background: #1e293b; color: #e2e8f0; }
.cookie-btn--accept { background: #2563eb; color: #fff; }
.cookie-btn--accept:hover { background: #1d4ed8; }
[data-theme="light"] .cookie-banner {
    background: #f8fafc; border-top-color: #e2e8f0; box-shadow: 0 -4px 24px rgba(0,0,0,.1);
}
[data-theme="light"] .cookie-btn--outline { color: #64748b; border-color: #cbd5e1; }
[data-theme="light"] .cookie-btn--outline:hover { background: #f1f5f9; }