/* Periplus — overrides on top of DaisyUI + Tailwind */

/* ── Map container ────────────────────────────────────── */
#map {
    width: 100%;
    /* height is handled by flex-1 on the element */
}

/* ── Leaflet popup ────────────────────────────────────── */
.leaflet-popup-content-wrapper {
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.leaflet-popup-content {
    margin: 0;
    min-width: 200px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
}

.leaflet-popup-tip {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Popup inner layout */
.popup-card {
    padding: 0.75rem 1rem;
}

.popup-card .popup-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.popup-card .popup-desc {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-bottom: 0.25rem;
}

.popup-card .popup-address {
    font-size: 0.75rem;
    opacity: 0.6;
}

.popup-card .popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.popup-tag {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.125rem 0.4rem;
    border-radius: 999px;
    background: oklch(0.9 0.02 250);
    color: oklch(0.3 0.02 250);
}

/* ── Dark mode: theme-aware popup ─────────────────────── */
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: oklch(0.25 0.01 250);
    color: oklch(0.9 0 0);
}

[data-theme="dark"] .leaflet-popup-tip {
    background: oklch(0.25 0.01 250);
}

[data-theme="dark"] .popup-tag {
    background: oklch(0.35 0.03 250);
    color: oklch(0.85 0.02 250);
}

/* ── Dark mode: dim the bright map tiles ──────────────── */
[data-theme="dark"] .leaflet-tile-pane {
    filter: brightness(0.75) contrast(1.1) saturate(0.85);
}

/* ── Dark mode: Leaflet controls ──────────────────────── */
[data-theme="dark"] .leaflet-control-zoom a {
    background: oklch(0.25 0.01 250);
    color: oklch(0.85 0 0);
    border-color: oklch(0.35 0.01 250);
}

[data-theme="dark"] .leaflet-control-zoom a:hover {
    background: oklch(0.3 0.01 250);
}

[data-theme="dark"] .leaflet-bar a {
    background: oklch(0.25 0.01 250);
    color: oklch(0.85 0 0);
    border-color: oklch(0.35 0.01 250);
}

[data-theme="dark"] .leaflet-bar a:hover {
    background: oklch(0.3 0.01 250);
}

[data-theme="dark"] .leaflet-control-attribution {
    background: oklch(0.2 0.01 250 / 0.8);
    color: oklch(0.7 0 0);
}

[data-theme="dark"] .leaflet-control-attribution a {
    color: oklch(0.65 0.1 250);
}

/* ── Theme toggle button ──────────────────────────────── */
.theme-toggle {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.theme-toggle:hover {
    opacity: 1;
}

/* ── Popup action buttons ─────────────────────────────── */
.popup-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid oklch(0.85 0 0);
    flex-wrap: wrap;
}

.popup-actions button,
.popup-actions select {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    border: 1px solid oklch(0.75 0 0);
    background: oklch(0.95 0 0);
    color: oklch(0.3 0 0);
    cursor: pointer;
    white-space: nowrap;
}

.popup-actions button:hover {
    background: oklch(0.88 0.05 250);
}

.popup-actions select {
    max-width: 100px;
    flex-shrink: 1;
}

[data-theme="dark"] .popup-actions {
    border-top-color: oklch(0.35 0 0);
}

[data-theme="dark"] .popup-actions button,
[data-theme="dark"] .popup-actions select {
    background: oklch(0.3 0.01 250);
    color: oklch(0.85 0 0);
    border-color: oklch(0.4 0 0);
}

[data-theme="dark"] .popup-actions button:hover {
    background: oklch(0.38 0.05 250);
}

/* ── Popup distance badge ─────────────────────────────── */
.popup-distance {
    display: inline-block;
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: oklch(0.85 0.08 150);
    color: oklch(0.25 0.05 150);
    margin-top: 0.35rem;
}

[data-theme="dark"] .popup-distance {
    background: oklch(0.3 0.08 150);
    color: oklch(0.85 0.05 150);
}

/* ── Route line colors ────────────────────────────────── */
.route-car { color: #3b82f6; }
.route-bike { color: #22c55e; }
.route-foot { color: #f97316; }

/* ── Route mode buttons ───────────────────────────────── */
.route-mode-btn.active {
    outline: 2px solid oklch(0.6 0.15 250);
    outline-offset: 1px;
}

/* ── Toast notifications ──────────────────────────────── */
.toast-msg {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-in 0.2s ease-out;
    max-width: 280px;
}

.toast-msg.toast-success {
    background: oklch(0.85 0.12 150);
    color: oklch(0.2 0.05 150);
}

.toast-msg.toast-error {
    background: oklch(0.85 0.12 25);
    color: oklch(0.2 0.05 25);
}

.toast-msg.toast-info {
    background: oklch(0.85 0.1 250);
    color: oklch(0.2 0.05 250);
}

[data-theme="dark"] .toast-msg.toast-success {
    background: oklch(0.3 0.1 150);
    color: oklch(0.9 0.05 150);
}

[data-theme="dark"] .toast-msg.toast-error {
    background: oklch(0.3 0.1 25);
    color: oklch(0.9 0.05 25);
}

[data-theme="dark"] .toast-msg.toast-info {
    background: oklch(0.3 0.1 250);
    color: oklch(0.9 0.05 250);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Route steps list ─────────────────────────────────── */
.route-step-item {
    padding: 0.25rem 0;
    border-bottom: 1px solid oklch(0.9 0 0);
}

.route-step-item:last-child {
    border-bottom: none;
}

[data-theme="dark"] .route-step-item {
    border-bottom-color: oklch(0.3 0 0);
}

/* ── Smooth theme transition ──────────────────────────── */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}