/* ModelSpace — Toiminnallisuuskaavio (linjakaavio) */

/* Lines */
#pohja-routes-diagram-layer .route-line { transition: opacity 0.12s ease; }
#pohja-routes-diagram-layer .route-line.dimmed { opacity: 0.15; }
#pohja-routes-diagram-layer .route-line-stroke { pointer-events: none; }
#pohja-routes-diagram-layer .route-line-hit { cursor: pointer; pointer-events: stroke; }

/* Stations */
#pohja-routes-diagram-layer .route-station { cursor: move; }
#pohja-routes-diagram-layer .route-station.faded { opacity: 0.3; }
#pohja-routes-diagram-layer .route-station-dot { fill: #fff; stroke: #212529; }
#pohja-routes-diagram-layer .route-station.pinned .route-station-dot { fill: #e9ecef; }
#pohja-routes-diagram-layer .route-station-label,
#pohja-routes-diagram-layer .route-station-total {
    paint-order: stroke;
    stroke: #fff;
    stroke-linejoin: round;
    pointer-events: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#pohja-routes-diagram-layer .route-station-label { fill: #212529; font-weight: 600; }
#pohja-routes-diagram-layer .route-station-total { fill: #6c757d; }
#pohja-routes-diagram-layer .routes-empty-hint { pointer-events: none; }
#pohja-svg.route-dragging,
#pohja-svg.route-dragging .route-station { cursor: grabbing; }

/* Legend (top-right overlay on the canvas) */
#routes-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 260px;
    max-height: calc(100% - 20px);
    overflow: auto;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 5;
}
.routes-legend-title { font-weight: 600; text-transform: uppercase; color: #6c757d; font-size: 0.7rem; margin-bottom: 2px; }
.routes-legend-item { display: flex; align-items: center; gap: 6px; padding: 2px 2px; cursor: pointer; border-radius: 3px; }
.routes-legend-item:hover,
.routes-legend-item.locked { background: #f1f3f5; }
.routes-legend-item.dimmed { opacity: 0.3; }
.routes-legend-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routes-legend-visits { color: #6c757d; white-space: nowrap; }
.route-sample { flex: 0 0 auto; }

/* Routes panel */
#routes-list .route-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 4px; border: 1px solid transparent; }
#routes-list .route-row:hover { background: #f8f9fa; }
#routes-list .route-row.locked { border-color: #0d6efd; background: #f1f6ff; }
#routes-list .route-row.dimmed { opacity: 0.5; }
#routes-list .route-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); }
#routes-list .route-row-body { flex: 1 1 auto; min-width: 0; cursor: pointer; }
#routes-list .route-row-name { font-weight: 600; }
#routes-list .route-row-meta { font-size: 0.75rem; }
#routes-list .route-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
#routes-list .route-eye { color: #212529; text-decoration: none; white-space: nowrap; }
#routes-list .route-eye.off { color: #adb5bd; }
#routes-list .route-eye-label { font-size: 0.65rem; margin-left: 1px; }

/* Route modal colour palette */
#route-color-palette .route-color-swatch {
    width: 24px; height: 24px; border-radius: 4px;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #ced4da; padding: 0;
}
#route-color-palette .route-color-swatch.selected { box-shadow: 0 0 0 2px #212529; }

/* Visits/day label beside each route line */
#pohja-routes-diagram-layer .route-line-visits {
    paint-order: stroke;
    stroke: #fff;
    stroke-linejoin: round;
    pointer-events: none;
    font-weight: 600;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}