/* Shared styling for the MapLibre-based HVV vehicle page - a parallel,
   independent structure to leaflet_map_hvv.css/leaflet_map_hvv_base.js. */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000;
}

#map {
    position: fixed;
    height: 100%;
    width: 100%;
    min-height: 285px;
}

/* MapLibre's popup defaults are too roomy/square - tightened here. */
.maplibregl-popup-content {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
}

/* Checkbox layout for ModeToggleControl - maplibregl-ctrl-group only styles buttons. */
.hvv-mode-control {
    font-size: 12px;
    display: flex;
    flex-direction: column;
}

.hvv-mode-control-source-select {
    font-size: 12px;
    margin: 0 8px;
    padding: 2px 4px;
}

/* !important overrides MapLibre's own .maplibregl-ctrl-group button styling. */
.hvv-mode-control .hvv-mode-control-toggle {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
    line-height: normal !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* Only needed while collapsed - desktop never collapses, mobile re-collapses via map click. */
.hvv-mode-control:not(.hvv-mode-control-collapsed) .hvv-mode-control-toggle {
    display: none !important;
}

.hvv-mode-control-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
}

.hvv-mode-control-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hvv-mode-control-collapsed .hvv-mode-control-items {
    display: none;
}

.hvv-mode-control-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.hvv-mode-control-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 2px 0;
}

/* Safe-area / PWA - MapLibre's own control container classes. */
.maplibregl-ctrl-top-left {
    padding-top: calc(env(safe-area-inset-top, 0px) * 0.75);
    padding-left: calc(env(safe-area-inset-left, 0px) * 0.75);
}

.maplibregl-ctrl-top-right {
    padding-top: calc(env(safe-area-inset-top, 0px) * 0.75);
    padding-right: calc(env(safe-area-inset-right, 0px) * 0.75);
}

.maplibregl-ctrl-bottom-left {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.25);
    padding-left: calc(env(safe-area-inset-left, 0px) * 0.75);
}

.maplibregl-ctrl-bottom-right {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.25);
    padding-right: calc(env(safe-area-inset-right, 0px) * 0.75);
}

/* anchor:'top-left' = wrapper origin is the coordinate; label offset is relative to that. */
.hvv-marker-wrapper {
    cursor: pointer;
}

.hvv-marker-wrapper img {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Invisible hover target, sibling of icon/label, same origin (see buildMarkerElement). */
.hvv-marker-hitbox {
    position: absolute;
}

.hvv-marker-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    line-height: 1.1;
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    padding: 0 3px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
}

.hvv-marker-delay {
    color: #d32f2f;
    font-weight: bold;
}

/* Highlights only the newest model per category; older ones stay unstyled. */
.hvv-vehicle-batteriegelenkbus {
    background: #c8e6c9;
}

.hvv-vehicle-dt5 {
    /* Blood-orange ends, stainless-steel grey middle - echoes the real DT5 livery. */
    background: linear-gradient(90deg, #ffab91, #e0e0e0 20%, #e0e0e0 80%, #ffab91);
}

/* Toggle: class on the map container hides all labels */
.hvv-labels-hidden .hvv-marker-label {
    display: none;
}

/* Shown only once labels are hidden - the embedded delay badge covers the normal case. */
.hvv-marker-delay-standalone {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: bold;
    color: #d32f2f;
    background: rgba(255, 255, 255, 0.8);
    padding: 0 3px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
}

.hvv-labels-hidden .hvv-marker-delay-standalone {
    display: block;
}

.hvv-wakelock-active,
.hvv-labels-toggle-active {
    background-color: #1e64a0 !important;
}

/* Bottom-of-screen panel showing a disruption marker's full description and
   links - the tooltip's short summary alone isn't enough for e.g. the
   "Infos" category. Independent lifecycle from the tooltip: stays open
   across marker switches, closes only on an explicit map click/move. */
#hvv-info-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 45vh;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 0.85rem;
    z-index: 1000;
    box-sizing: border-box;
}

#hvv-info-panel.hvv-info-panel-open {
    display: block;
}

#hvv-info-panel .hvv-info-close {
    float: right;
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0 0 8px;
    cursor: pointer;
    color: #666;
}

#hvv-info-panel .hvv-info-message {
    margin-bottom: 12px;
}

#hvv-info-panel .hvv-info-message:last-child {
    margin-bottom: 0;
}

#hvv-info-panel .hvv-info-summary {
    font-weight: bold;
    margin-bottom: 4px;
}

#hvv-info-panel .hvv-info-description {
    white-space: pre-wrap;
    line-height: 1.4;
}

#hvv-info-panel .hvv-info-links a {
    display: block;
    margin-top: 6px;
    color: #1e64a0;
}