/* Tourism routes tool - predefined routes panel (IntranetPortal editor, PublicPortal read-only).
   Class prefix is tourism-route-* on purpose: this markup is a SHARED component and also renders on
   IntranetPortal views, whose layout never loads nexus-sheet.css. */

/* ---- status badge ------------------------------------------------------- */
.tourism-route-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: .85rem;
    line-height: 1.35;
}

.tourism-route-status i {
    flex: 0 0 auto;
    margin-top: 2px;
}

.tourism-route-status--ok {
    background: #e2f2e8;
    color: #22603b;
}

.tourism-route-status--warn {
    background: #fbf0da;
    color: #855009;
}

.tourism-route-status--down {
    background: #fae7e5;
    color: #8e2d25;
}

/* ---- route list --------------------------------------------------------- */
.tourism-route-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tourism-route-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 6px;
    border-bottom: 1px solid #e6e9ec;
    /* Comfortable touch target on the mobile sheet without needing a media query. */
    min-height: 44px;
}

.tourism-route-item:last-child {
    border-bottom: 0;
}

.tourism-route-item-main {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.tourism-route-item-name {
    display: block;
    font-weight: 600;
    word-break: break-word;
}

.tourism-route-item-meta {
    display: block;
    font-size: .8rem;
}

/* The colour chip is the only place the route's own colour appears outside the map, so the list
   and the drawn line can be matched at a glance. */
.tourism-route-swatch {
    flex: 0 0 auto;
    width: 6px;
    align-self: stretch;
    border-radius: 3px;
    background: #38dbff;
}

.tourism-route-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
}

.tourism-route-badge--published {
    background: #e2f2e8;
    color: #22603b;
}

.tourism-route-badge--draft {
    background: #eceff1;
    color: #5b6b75;
}

.tourism-route-item .btn-link {
    padding: 6px 8px;
}

/* ---- stops editor (modal) ----------------------------------------------- */
.tourism-route-stop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e6e9ec;
    border-radius: 6px;
}

.tourism-route-stop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f2f4;
}

.tourism-route-stop-item:last-child {
    border-bottom: 0;
}

.tourism-route-stop-order {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eceff1;
    color: #35474f;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tourism-route-stop-name {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.tourism-route-stop-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tourism-route-stop-actions .btn-link {
    padding: 2px 6px;
}

.tourism-route-empty {
    padding: 14px 10px;
    text-align: center;
}

/* Summary line under the generate/draw buttons: distance and duration of the current line. */
.tourism-route-summary {
    font-size: .85rem;
    padding: 6px 10px;
    background: #f1f4f6;
    border-radius: 6px;
}

/* While "pick on map" is armed the modal gets out of the way rather than closing, so the
   half-filled form survives the click. */
/* "Pick on map" and "Draw manually" both need the editor out of the way AND the map clickable.
   The flag lives on <body>, not on the modal, for one reason: Bootstrap appends .modal-backdrop as a
   SIBLING of the modal, covering the whole viewport at z-index 1040. A rule scoped to the modal
   cannot reach it, so every click on the "map" was landing on the backdrop and OpenLayers never saw
   a singleclick. Both had to be neutralised.

   The .modal-content line is the second half of the same bug: Bootstrap sets pointer-events:auto
   there explicitly, which beats the pointer-events:none inherited from .modal. Without it the modal
   body itself keeps swallowing clicks even while invisible. */
body.tourism-route-picking #tourismRouteModal,
body.tourism-route-picking .modal-backdrop {
    opacity: 0;
    pointer-events: none;
}

body.tourism-route-picking #tourismRouteModal .modal-dialog,
body.tourism-route-picking #tourismRouteModal .modal-content {
    pointer-events: none;
}

/* Wrapping lets the action drop below the name instead of crushing it, on both portals. */
.tourism-route-item {
    flex-wrap: wrap;
}

/* ===========================================================================
   The PublicPortal list: quiet until a route is picked.
   A municipality is meant to publish five routes or more, and a solid button on every row turns the
   list into a wall of colour where nothing leads. So the action sits back as an outline, and the
   route the visitor actually picked - the one drawn heavy on the map - is the one whose button
   fills in. One row asks at a time.
   Scoped to .tourism-route-list--visitor so the editor list is untouched.
   =========================================================================== */
.tourism-route-item-actions {
    flex: 1 0 100%;
    margin-top: 8px;
}

.tourism-route-list--visitor .tourism-route-follow {
    width: 100%;
    /* Section 4 of Docs/mobile-guidelines.md: 44px is the floor for a touch target. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border: 1.5px solid #e0e5e9;
    border-radius: 12px;
    background: transparent;
    color: #7a8c96;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* The picked row. The tint is faint on purpose: the filled button is the signal, and a strong band
   behind it would compete with the route's own colour. */
.tourism-route-list--visitor .tourism-route-item.active {
    background: #f6fbfd;
}

/* --route-fill is written per row in JS from the route's own colour, darkened only as far as white
   lettering needs. The fallback keeps the button legible if a row ever renders without it. */
.tourism-route-list--visitor .tourism-route-item.active .tourism-route-follow {
    border-color: transparent;
    background: var(--route-fill, #0b7f9e);
    color: #fff;
}

.tourism-route-list--visitor .tourism-route-follow:active {
    filter: brightness(.95);
}

@media (prefers-reduced-motion: reduce) {
    .tourism-route-list--visitor .tourism-route-follow {
        transition: none;
    }
}