body { background-color: #f8f9fa; }
.navbar { border-bottom: 2px solid #495057; }

/* Leaflet 1.9's default leaflet.css sets mix-blend-mode: plus-lighter on tile <img>s as a
   Chromium retina-seam workaround (chromium bug 600120) -- but additive blending over stacked
   semi-transparent layers (DGU orthophoto, OSM corridors, elevation band overlays, Sentinel)
   produces visible black/dark rectangular seams at tile boundaries, especially after a browser
   repaint (e.g. opening the right-click context menu). Reported 2026-09-22 on /lpb. Upstream:
   https://github.com/Leaflet/Leaflet/issues/8905, /issues/9821. Reverting to normal blending
   trades back the narrow white retina seam Leaflet was avoiding, which is far less visible than
   the black artifact. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }

/* Map-picker row highlight (base.html / caltopo.html row builders), two states:
   .map-picker-working (red)  — the working-pair maps ("Akcija - planiranje / realizacija")
                                or any title matching the action_urgent_map_names setting;
   .map-picker-active  (green) — a map with a Potraga currently running (wins over working).
   .map-picker-urgent kept as a red alias for backward compatibility. */
.map-picker-urgent,
.map-picker-working {
    border-left: 3px solid var(--bs-danger, #dc3545);
    background-color: rgba(220, 53, 69, .06);
}
.map-picker-urgent:hover, .map-picker-urgent:focus,
.map-picker-working:hover, .map-picker-working:focus { background-color: rgba(220, 53, 69, .12); }
.map-picker-active {
    border-left: 3px solid var(--bs-success, #198754);
    background-color: rgba(25, 135, 84, .10);
}
.map-picker-active:hover,
.map-picker-active:focus { background-color: rgba(25, 135, 84, .18); }
.dropdown-item.map-picker-urgent,
.dropdown-item.map-picker-working,
.dropdown-item.map-picker-active { border-left-width: 3px; border-left-style: solid; }

/* Currently-selected map row (base.html _mpDdChildren): independent of the red/green
   urgency colors above — a selected row can be either, or neither — so it needs its own
   signal. A thin green fa-check used to disappear against the already-green
   .map-picker-active tint; a blue ring + solid check badge stays visible on any of them. */
.map-picker-selected {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
    border-radius: .25rem;
}
.map-picker-check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
    font-size: .55rem;
    flex-shrink: 0;
}

/* Leading per-row state badge in the map pickers (base.html _mpChildren /
   _mpDdChildren, caltopo.html). A solid, labelled icon so the state reads without
   relying on the faint row tint alone. Rounded square, to stay distinct from the
   round blue .map-picker-check-badge (= the map you're currently viewing).
   Legend: '?' tooltip on the picker header (map_picker_legend). */
.map-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: .25rem;
    color: #fff;
    font-size: .6rem;
    flex-shrink: 0;
}
.map-state-badge--working { background-color: var(--bs-danger, #dc3545); }
.map-state-badge--active  { background-color: var(--bs-success, #198754); }

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-item,
.app-navbar .btn { white-space: nowrap; }
.app-navbar .navbar-brand,
.app-map-title,
.app-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.app-navbar .navbar-brand { max-width: 250px; }
.secondary-nav-links { display: flex; min-width: 0; align-items: center; flex-wrap: nowrap; }
.app-navbar .nav-group-divider {
    align-self: center;
    width: 1px;
    min-width: 1px;
    height: 1.05rem;
    background: rgba(255, 255, 255, .16);
    margin: 0 .3rem;
    padding: 0 !important;
    flex: 0 0 1px;
}
/* Same element, restyled as a horizontal <hr>-style divider once the responsive-overflow
   script moves it into the "Više" dropdown (adds .dropdown-item, removes .nav-link). */
.app-navbar .dropdown-item.nav-group-divider {
    width: auto;
    height: 0;
    border-top: 1px solid var(--bs-dropdown-divider-bg, #e9ecef);
    background: none;
    margin: .25rem 0;
    padding: 0 !important;
}
@media (max-width: 1199.98px) {
    /* Below navbar-expand-xl the nav stacks vertically -- render dividers as
       horizontal rules instead of thin vertical bars. */
    .app-navbar .nav-group-divider {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        height: 1px;
        margin: .35rem 0;
    }
}
.app-map-title {
    display: inline-block;
    max-width: min(220px, 20vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.app-account-name {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.page-header { margin-bottom: 1.5rem; }
.card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.card-title { font-weight: 600; margin-bottom: 1rem; color: #343a40; }
.home-tile { transition: box-shadow .15s ease, border-color .15s ease; }
.home-tile:hover, .home-tile:focus { box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); border-color: #adb5bd; }
/* Unified field/section titles (2026-09-23): /lpb's `form-label fw-semibold`
   look is the app-wide standard, applied once here instead of per template. */
.form-label { font-weight: 600; }
.tool-map-panel { height: calc(100vh - 100px); min-height: 500px; }
.tool-controls-panel {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f1f3f5;
}
.tool-controls-panel .card-title {
    padding-right: 2.2rem;
}
.tool-controls-panel::-webkit-scrollbar { width: 8px; }
.tool-controls-panel::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 8px; }
.tool-controls-panel::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 8px; }
.tool-controls-panel::-webkit-scrollbar-thumb:hover { background: #868e96; }
.tool-controls-scroll-hint {
    position: sticky;
    bottom: .5rem;
    width: 2rem;
    height: 2rem;
    margin-top: .5rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #495057;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    cursor: pointer;
    border: none;
    animation: tool-controls-scroll-hint-bounce 1.6s ease-in-out infinite;
    z-index: 5;
}
@keyframes tool-controls-scroll-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}
.tool-map { flex: 1 1 auto; min-height: 360px; }
.tool-map-fullscreen { position: fixed !important; inset: 0; z-index: 1080; height: 100vh !important; min-height: 100vh !important; border-radius: 0; }
.tool-map-fullscreen .tool-map { min-height: 0; }
.tool-map-toolbar {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem .75rem;
}
.tool-map-toolbar-main,
.tool-map-toolbar-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.tool-map-toolbar-main { justify-content: space-between; }
.tool-map-toolbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tool-map-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}
.tool-map-toolbar-controls { flex-wrap: wrap; }
.tool-map-control {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .875rem;
    white-space: nowrap;
    min-width: 0;
}
.tool-map-control span:first-child { color: #495057; }
.tool-map-control .form-select {
    width: auto;
    min-width: 12rem;
    max-width: 18rem;
}
.tool-map-control--overlay .form-select {
    min-width: 16rem;
    max-width: min(34rem, 52vw);
}
.tool-map-control--vintage .form-select {
    min-width: 9rem;
    max-width: 14rem;
}
.tool-map-control--opacity {
    flex: 0 0 auto;
}

/* Flat searchable basemap picker (replaces the Sloj -> Tema selects) */
.tool-map-source-picker {
    position: relative;
    display: inline-block;
}
.tool-map-source-picker .tms-trigger {
    width: auto;
    min-width: 14rem;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tool-map-source-picker .tms-panel {
    position: absolute;
    /* Leaflet's own controls (zoom, terrain-profile card, etc.) sit at z-index:1000 too --
       tied z-index means DOM order decides the winner, which let the profile card render
       over this dropdown regardless of which one the user actually had open. Bump above
       Leaflet's baseline so the dropdown always wins. */
    z-index: 1010;
    top: calc(100% + 2px);
    left: 0;
    width: 22rem;
    max-width: 80vw;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .35rem;
}
.tool-map-source-picker .tms-filter {
    margin-bottom: .35rem;
}
.tool-map-source-picker .tms-list {
    max-height: 22rem;
    overflow-y: auto;
}
.tool-map-source-picker .tms-section {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    color: #6c757d;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .2rem .4rem;
}
.tool-map-source-picker .tms-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .4rem;
    border-radius: .25rem;
    cursor: pointer;
}
.tool-map-source-picker .tms-row:hover { background: #eef2f7; }
.tool-map-source-picker .tms-row--active { background: #e7f1ff; }
.tool-map-source-picker .tms-row-label {
    flex: 1 1 auto;
    font-size: .82rem;
    white-space: normal;
}
.tool-map-source-picker .tms-star {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #f0ad4e;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
}
.tool-map-source-picker .tms-star:not(.tms-star--on) { color: #adb5bd; }
.tool-map-source-picker .tms-info-btn {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 .2rem;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.65;
    transition: opacity 0.15s, color 0.15s;
}
.tool-map-source-picker .tms-info-btn:hover {
    color: #0d6efd;
    opacity: 1;
}
.tool-map-overlay-opacity {
    width: 7rem;
    max-width: 7rem;
}
.tool-map-overlay-opacity-value {
    min-width: 2.8em;
    text-align: right;
}
.tool-action-row { border: 1px solid #dee2e6; border-radius: 8px; padding: .5rem; margin-bottom: .5rem; }
.tool-controls-column {
    position: relative;
    transition: flex-basis .22s ease, width .22s ease, max-width .22s ease;
}
.tool-controls-collapse {
    transform-origin: left center;
    transition: opacity .18s ease, transform .22s ease;
}
.tool-controls-hide-btn {
    position: absolute;
    top: .85rem;
    right: .75rem;
    z-index: 20;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    flex: 0 0 auto;
}
.tool-controls-show-btn {
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: opacity .18s ease, transform .22s ease;
}
.tool-controls-column.is-collapsed {
    flex: 0 0 auto;
    width: auto;
}
.tool-controls-column.is-collapsed .tool-controls-show-btn { display: inline-flex !important; }
.tool-controls-column.is-collapsing .tool-controls-collapse {
    opacity: 0;
    transform: translateX(-12px) scaleX(.96);
    pointer-events: none;
}
.tool-controls-column.tool-controls-hide-after-animation .tool-controls-collapse { display: none !important; }
@media (min-width: 1200px) {
    /* Keep the whole bar on one physical row: the outer .navbar defaults to flex-wrap:wrap,
       which let #account-nav-menu (with the async-added "Nova potraga" button) drop onto a
       second line over "O aplikaciji". With nowrap the JS overflow controller squeezes the
       secondary links into the "Više" menu instead. */
    .app-navbar,
    .app-navbar .navbar-collapse,
    .app-navbar .navbar-nav,
    .app-map-nav { flex-wrap: nowrap; min-width: 0; }
    .app-navbar .nav-link { padding-left: .45rem; padding-right: .45rem; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-navbar { padding-left: .6rem !important; padding-right: .6rem !important; }
    .app-navbar .navbar-brand { max-width: 155px; font-size: .95rem; }
    .app-navbar .nav-link,
    .app-navbar .btn { font-size: .9rem; }
    .app-map-title { max-width: 120px; }
    .app-account-name { max-width: 95px; }
}

@media (max-width: 1199.98px) {
    .app-navbar .navbar-nav { gap: .15rem; }
    /* Collapsed menu: secondary links stack like the primary ones (no "Više" dropdown). */
    .secondary-nav-links { flex-direction: column; align-items: stretch; }
    /* Map row: wrap "Nova potraga" / ⇄ onto a second line instead of pushing the page
       wider than the screen; the long map path is ellipsised inside its button. */
    .app-map-nav { padding: .35rem 0; flex-wrap: wrap; max-width: 100%; min-width: 0; }
    .app-map-nav > .dropdown { min-width: 0; max-width: 100%; }
    #map-dd-btn { max-width: 100%; display: inline-flex; align-items: center; }
    .app-map-title { max-width: min(calc(100vw - 7.5rem), 360px); }
    .app-map-nav .dropdown-menu { min-width: min(280px, calc(100vw - 2rem)) !important; max-width: calc(100vw - 2rem); }
    .app-account-name { max-width: min(60vw, 280px); }
}
/* BETA badge on a checked yellow toggle (LPB Napredno) — keep it readable. */
.btn-check:checked + .btn-outline-warning .beta-badge { background-color: var(--bs-dark) !important; color: var(--bs-warning) !important; }

@media (max-width: 991.98px) {
    .tool-map-toolbar-main,
    .tool-map-toolbar-controls {
        align-items: stretch;
    }
    .tool-map-toolbar-main {
        flex-direction: column;
    }
    .tool-map-toolbar-actions {
        justify-content: flex-start;
    }
    .tool-map-control {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    }
    .tool-map-control--opacity {
        grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr) auto;
    }
    .tool-map-control .form-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .tool-map-source-picker { display: block; width: 100%; }
    .tool-map-source-picker .tms-trigger {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .tool-map-overlay-opacity {
        width: 100%;
        max-width: none;
    }
    #print-preview-map {
        height: 45vh;
        min-height: 300px;
    }
    /* Below lg the controls column stacks above the map (plain Bootstrap grid). The panel's
       desktop max-height/overflow-y (sized to sit beside the map) would otherwise trap it in
       its own cramped scroll box on top of the page -- let it take its natural height instead
       so the page scrolls normally down to a full-size map. */
    .tool-controls-panel {
        max-height: none;
        overflow-y: visible;
    }
    .tool-controls-hide-btn,
    .tool-controls-show-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* Map control buttons — stronger border and contrast so they stand out on light tiles */
.leaflet-control-zoom a { border-color: rgba(0,0,0,.35) !important; color: #333 !important; }
.leaflet-control-zoom a:hover { color: #0d6efd !important; background-color: #fff !important; }
.leaflet-top .btn { border: 1px solid rgba(0,0,0,.3) !important; background-color: rgba(255,255,255,.92) !important; color: #333 !important; }
.leaflet-top .btn:hover { background-color: #fff !important; color: #0d6efd !important; }
/* Keep destructive-action confirmations visible when a map has many objects. */
.map-action-object-list {
  max-height: 13rem;
  overflow-y: auto;
}

/* ==========================================================================
   Mobile-First Responsiveness & SAR Field Enhancements (<= 991.98px / <= 768px)
   ========================================================================== */

/* Mobile Segmented View Switcher (Tab Obrazac / Karta) */
.tool-mobile-view-switcher {
    display: none;
    margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
    .tool-mobile-view-switcher {
        display: flex;
        width: 100%;
        background: #e9ecef;
        padding: 4px;
        border-radius: 10px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    }
    .tool-mobile-view-switcher .btn {
        flex: 1 1 50%;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        border: none;
        color: #495057;
        background: transparent;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 42px;
    }
    .tool-mobile-view-switcher .btn.active {
        background: #ffffff;
        color: #0d6efd;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

    /* Column visibility toggle controlled by switcher */
    .tool-page-layout[data-mobile-view="form"] .tool-map-column {
        display: none !important;
    }
    .tool-page-layout[data-mobile-view="map"] .tool-controls-column {
        display: none !important;
    }
    .tool-page-layout[data-mobile-view="map"] .tool-map-column {
        display: block !important;
        width: 100% !important;
    }
    .tool-page-layout[data-mobile-view="map"] .tool-map-panel {
        height: calc(100dvh - 170px) !important;
        min-height: 420px !important;
    }
}

/* One phone navigation surface: the collapsed top menu. Desktop links stay unchanged. */
@media (max-width: 991.98px) {
    .mobile-primary-nav { display: flex; flex-direction: column; }
    .mobile-primary-nav .nav-link,
    .secondary-nav-links .nav-link { min-height: 44px; display: flex; align-items: center; gap: .4rem; }
    .mobile-secondary-tile { display: none; }
    #lpb-debug-panel { display: none !important; }
    .mobile-long-text { min-width: 0; overflow-wrap: anywhere; }
    .mobile-long-text-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .mobile-status-badge { flex-shrink: 0; }
    .mobile-wrap { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
    /* iOS Safari Auto-zoom prevention: ensure all mobile inputs are at least 16px */
    input.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px !important;
    }

    /* Mobile Touch Target sizing >= 42px */
    .btn:not(.btn-link):not(.py-0):not(.p-0) {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Wide admin tables read as one card per row on phones instead of a horizontal
       scroll. Opt in with class="table table-stacked"; every <td> needs data-label. */
    .table-stacked,
    .table-stacked tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .table-stacked thead {
        display: none;
    }
    .table-stacked tbody tr {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        margin-bottom: .6rem;
        padding: .35rem .6rem;
        background: var(--bs-body-bg, #fff);
    }
    .table-stacked tbody td {
        display: flex;
        min-width: 0;
        justify-content: space-between;
        gap: 1rem;
        border: 0 !important;
        padding: .35rem 0;
        text-align: right;
        overflow-wrap: anywhere;
    }
    .table-stacked tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
        text-align: left;
        margin-right: auto;
    }
    .table-stacked tbody td:empty,
    .table-stacked tbody td[data-label=""] {
        display: none;
    }

    /* Mobile Floating IPP Confirmation Bar */
    .lpb-mobile-confirm-bar {
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        z-index: 1050;
        background: rgba(33, 37, 41, 0.95);
        backdrop-filter: blur(8px);
        color: #ffffff;
        border-radius: 12px;
        padding: 10px 14px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.15);
        animation: slideUpFloat 0.25s ease-out;
    }
}

@keyframes slideUpFloat {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Leaflet's default scale control (text + bar) is tiny at typical zoom levels -- bump both
   up for readability on the operational map. The bar's own width comes from L.control.scale's
   maxWidth option (set per-map in JS); this just makes it read clearly once it's wider. */
.leaflet-control-scale-line {
    font-size: 18px;
    line-height: 1.3;
    padding: 3px 10px;
    border-width: 4px;
}

/* The "format uncertainty" circle's permanent center label (coord-uncertainty-circle.js) --
   a meta/informational annotation, kept visually quiet compared to real map data labels. */
.coord-uncertainty-tooltip {
    font-size: 11px;
    color: #495057;
    background: rgba(255, 255, 255, .85);
    border: 1px solid #6c757d;
    padding: 1px 5px;
    box-shadow: none;
}
.coord-uncertainty-tooltip::before {
    display: none;
}


/* /print fullscreen ("Ispis / pregled"): the map fills the screen and the existing config
   column becomes an overlay drawer (same DOM, so every handler keeps working). Placed last
   so it wins over the mobile view switcher and the collapsed-controls rules. */
.tool-page-layout.print-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1080;
    margin: 0 !important;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}
.tool-page-layout.print-fullscreen > .tool-map-column {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tool-page-layout.print-fullscreen .tool-map-panel {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0;
}
.tool-page-layout.print-fullscreen > .tool-controls-column {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(440px, 92vw) !important;
    max-width: 92vw !important;
    padding: .5rem !important;
    margin: 0 !important;
    overflow-y: auto;
    z-index: 1001; /* above Leaflet panes/controls (<= 1000) */
    transition: transform .2s ease;
}
.tool-page-layout.print-fullscreen > .tool-controls-column .tool-controls-collapse {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}
.tool-page-layout.print-fullscreen > .tool-controls-column .tool-controls-show-btn,
.tool-page-layout.print-fullscreen > .tool-controls-column [data-tool-controls-toggle] {
    display: none !important;
}
.tool-page-layout.print-fullscreen > .tool-controls-column .tool-controls-panel {
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.tool-page-layout.print-fullscreen.print-fs-drawer-closed > .tool-controls-column {
    transform: translateX(-105%);
    pointer-events: none;
}
/* keep the map's left-hand Leaflet controls clear of the open drawer on wide screens */
@media (min-width: 900px) {
    .tool-page-layout.print-fullscreen:not(.print-fs-drawer-closed) .leaflet-left {
        left: min(440px, 92vw);
    }
    /* ...and the map toolbar (title, Legenda, Sloj, print-frame buttons) too */
    .tool-page-layout.print-fullscreen:not(.print-fs-drawer-closed) .tool-map-toolbar {
        padding-left: calc(min(440px, 92vw) + .5rem);
    }
}
.print-fs-btn, .print-fs-drawer-btn { display: block; margin-bottom: 4px; }

/* /print on phones: one map surface with the existing controls in a bottom sheet. */
.print-mobile-sheet-header,
.print-mobile-settings-btn,
.print-mobile-sheet-backdrop,
.print-mobile-frame-strip { display: none; }

@media (max-width: 991.98px) {
    .print-mobile-legacy-switcher { display: none !important; }
    .print-page-layout > .tool-map-column {
        display: block !important;
        width: 100% !important;
    }
    .print-page-layout:not(.print-fullscreen) .tool-map-panel {
        height: max(310px, calc(100dvh - 105px)) !important;
        min-height: 0 !important;
    }
    .print-page-layout .tool-map-toolbar {
        padding: .45rem .55rem;
        gap: .25rem;
    }
    .print-page-layout .tool-map-toolbar-main { gap: .25rem; }
    .print-page-layout .tool-map-toolbar-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: .35rem;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: .15rem;
    }
    .print-page-layout .tool-map-toolbar-actions .btn {
        min-width: 44px;
        min-height: 44px !important;
        flex: 0 0 auto;
    }
    .print-mobile-settings-btn { display: inline-flex; white-space: nowrap; }
    .print-mobile-frame-strip {
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: .35rem .55rem;
        border-top: 1px solid #dee2e6;
        background: #f8f9fa;
    }
    .print-mobile-frame-readout {
        flex: 1 1 120px;
        min-width: 0;
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .print-mobile-frame-strip .btn {
        flex: 0 0 78px;
        min-height: 48px;
        padding: .15rem .25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .1rem;
        font-size: .66rem;
        line-height: 1.05;
        white-space: normal;
    }
    .print-mobile-frame-strip .btn i { font-size: .9rem; }
    .print-page-layout .print-fs-btn { min-width: 44px; min-height: 44px; }
    .print-page-layout .print-fs-drawer-btn { display: none !important; }

    .print-page-layout > #print-mobile-settings-panel,
    .print-page-layout.print-fullscreen > #print-mobile-settings-panel {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(78dvh, 720px) !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0,0,0,.25);
        z-index: 1101;
        visibility: hidden;
        transform: translateY(105%) !important;
        pointer-events: none;
        transition: transform .2s ease, visibility .2s;
    }
    .print-page-layout.print-mobile-sheet-open > #print-mobile-settings-panel,
    .print-page-layout.print-fullscreen.print-mobile-sheet-open > #print-mobile-settings-panel {
        visibility: visible;
        transform: translateY(0) !important;
        pointer-events: auto;
    }
    .print-page-layout > #print-mobile-settings-panel .tool-controls-collapse,
    .print-page-layout.print-fullscreen > #print-mobile-settings-panel .tool-controls-collapse {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .print-page-layout #print-mobile-settings-panel [data-tool-controls-toggle],
    .print-page-layout #print-mobile-settings-panel .tool-controls-show-btn {
        display: none !important;
    }
    .print-page-layout #print-mobile-settings-panel .tool-controls-panel {
        max-height: none !important;
        overflow: visible !important;
        margin: 0;
        border: 0;
        box-shadow: none;
    }
    .print-page-layout #print-mobile-settings-panel .tool-controls-panel > .card-header {
        display: none;
    }
    .print-mobile-sheet-header {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 2;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        min-height: 56px;
        padding: .5rem .85rem;
        background: #fff;
        border-bottom: 1px solid #dee2e6;
    }
    #print-mobile-map-controls,
    #print-mobile-export-actions { padding: .65rem .85rem; }
    #print-mobile-map-controls .tool-map-toolbar-controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }
    #print-mobile-export-actions { border-block: 1px solid #dee2e6; }
    #print-mobile-export-actions .d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #print-mobile-export-actions .btn { white-space: normal; }
    .print-mobile-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(0,0,0,.4);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s;
    }
    .print-page-layout.print-mobile-sheet-open > .print-mobile-sheet-backdrop {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .print-page-layout.print-fullscreen .tool-map-toolbar { padding-left: .55rem !important; }
    .print-page-layout.print-fullscreen .tool-map-panel { height: 100% !important; }
}
@media (max-width: 359.98px) {
    .print-mobile-frame-strip { flex-wrap: wrap; }
    .print-mobile-frame-readout { flex-basis: 100%; }
    .print-mobile-frame-strip .btn { flex: 1 1 0; }
}
@media (min-width: 600px) and (max-width: 991.98px) {
    .print-page-layout .tool-map-toolbar-main { flex-direction: row; align-items: center; }
}

/* Inline map legend (map-sources.js createInlineLegend, 2026-09-25) */
.map-inline-legend { background: #fff; }
.map-inline-legend-btn:not(.d-none) { display: flex !important; align-items: center; justify-content: center; color: #333; }
.map-inline-legend-panel {
  width: 250px; max-width: calc(100vw - 80px); max-height: 280px; overflow-y: auto;
  padding: 6px 8px; font-size: 12px; line-height: 1.3;
}
.map-inline-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.map-inline-legend-title { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-inline-legend-close { font-size: 10px; flex-shrink: 0; }
.map-inline-legend-body section { margin-bottom: 4px !important; }
.map-inline-legend-body h6 { font-size: 11px; font-weight: 600; margin: 4px 0 2px !important; }
.map-inline-legend-body .map-source-legend-grid > div { margin-bottom: 1px !important; gap: 4px !important; font-size: 11px; }
.map-inline-legend-note { font-size: 10.5px; margin-top: 4px; }
.map-inline-legend-more { display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none; color: #0d6efd; font-size: 11px; text-decoration: underline; }

/* ---- AI asistent (/asistent): chat fills the viewport, composer always visible ------------
   --asst-top (set by assistant.js) = distance from the page top to the chat, --asst-vh = the
   visual viewport height (shrinks when a phone keyboard opens). */
.asst-page {
    max-width: 1100px;
    display: flex; flex-direction: column;
    height: calc(var(--asst-vh, 100dvh) - var(--asst-top, 72px) - var(--asst-bottom, 0px) - 1rem);
    min-height: 360px;
}
.asst-top { flex: 0 0 auto; }
.asst-page, .asst-page > *, .asst-context-main { min-width: 0; }
.asst-page { max-width: min(1100px, 100%); }
.asst-info-body { max-height: 40dvh; overflow-y: auto; }
.asst-chat { flex: 1 1 auto; min-height: 0; display: flex; }
.asst-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; padding: .75rem; scroll-behavior: smooth; }
.asst-composer { flex: 0 0 auto; }
.asst-new-pill { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 2; }

/* thread pills + suggestion chips: one row that scrolls sideways instead of wrapping */
.asst-threads, .asst-chips {
    display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 2px;
    position: relative;  /* keeps .visually-hidden children from widening the page */
}
/* suggestions: wrap into (at most two) rows on wider screens; phones swipe, no scrollbar */
.asst-chips { flex-wrap: wrap; overflow: hidden; max-height: 4.4rem; scrollbar-width: none; }
/* a quiet tray, visibly separate from the input below it */
.asst-chips {
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent);
    border-radius: .6rem; padding: .3rem .4rem; gap: .3rem; margin-bottom: .6rem !important;
}
.asst-chips::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) {
    .asst-chips { flex-wrap: nowrap; overflow-x: auto; max-height: none; background: none; border: 0; padding: 0; margin-bottom: .4rem !important; }
}
/* the selected conversation: green, with a check */
.asst-thread-on {
    --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-bg: var(--bs-success-bg-subtle);
    --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-bg: var(--bs-success-bg-subtle); --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: var(--bs-success-text-emphasis); --bs-btn-active-bg: var(--bs-success-bg-subtle);
    --bs-btn-active-border-color: var(--bs-success);
    border-width: 2px;
}
.asst-thread-on .fa-circle-check { color: var(--bs-success); }
.asst-threads > *, .asst-chips > * { flex: 0 0 auto; scroll-snap-align: start; }
.asst-thread { max-width: min(80vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-thread.active { font-weight: 600; }
.asst-chips .asst-example {
    white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; text-align: left;
    font-size: .78rem; line-height: 1.2; padding: .2rem .6rem; border-radius: 50rem;
    background: var(--bs-body-bg);
}
.asst-chips-label { font-size: .78rem; }
/* sideways rows: a fade on the right edge says "there is more" until you reach the end */
.asst-fade.asst-overflow:not(.asst-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
/* phone header: robot + BETA · conversation dropdown · podsjetnik · ⋮ */
.asst-bar { min-width: 0; }
.asst-bar-btn { width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.asst-picker { flex: 1 1 auto; min-width: 0; }
.asst-picker-btn { display: flex; align-items: center; width: 100%; min-width: 0; height: 34px; padding-left: .45rem; padding-right: .45rem; border-width: 2px; font-weight: 600; text-align: left; }
.asst-picker-btn::after { margin-left: auto; padding-left: .3rem; }
.asst-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-picker-id { flex: 0 0 auto; margin-left: .3rem; margin-right: .15rem; font-weight: 400; opacity: .75; }
.asst-picker-menu { width: 100%; max-width: calc(100vw - 1.5rem); max-height: 60dvh; overflow-y: auto; }
.asst-picker-item { white-space: normal; overflow-wrap: anywhere; padding-top: .55rem; padding-bottom: .55rem; }
.asst-picker-item.active { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-weight: 600; }
.asst-picker-item.active .fa-circle-check { color: var(--bs-success); }
@media (max-width: 767.98px) {
    .asst-title { flex: 0 0 auto; font-size: 1.1rem; }
    .asst-title-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .asst-title .beta-badge { margin-left: .25rem; font-size: .68rem; padding: .3em .45em; }
}
@media (max-width: 439.98px) {
    .asst-bar { gap: .35rem !important; }
    .asst-title .fa-robot { display: none; }
    .asst-title .beta-badge { margin-left: 0; }
}
/* the global phone rule makes every .btn a centred inline-flex — long chip text then spills out
   on the LEFT; chips stay plain blocks so the ellipsis lands at the end */
#asst-suggestions .asst-example { display: block; min-height: 0; }
.asst-chips .asst-example.asst-followup { border-color: var(--bs-primary-border-subtle) !important; background: var(--bs-primary-bg-subtle); }

/* message rows */
.asst-row { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .75rem; }
.asst-row.user { flex-direction: row-reverse; }
.asst-avatar {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.asst-row.user .asst-avatar { background: var(--bs-primary); color: #fff; }
.asst-row.ai .asst-avatar { background: var(--bs-danger); color: #fff; }
.asst-bubble { min-width: 0; padding: .5rem .75rem; border-radius: .75rem; box-shadow: var(--bs-box-shadow-sm); }
.asst-row.user .asst-bubble { max-width: 75%; background: var(--bs-primary-bg-subtle); border-bottom-right-radius: .25rem; }
.asst-row.ai .asst-bubble { max-width: 90%; background: var(--bs-danger-bg-subtle); border: 1px solid var(--bs-danger-border-subtle); border-bottom-left-radius: .25rem; }
.asst-meta { font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .2rem; display: flex; align-items: center; gap: .5rem; }
.asst-copy { margin-left: auto; padding: 0 .25rem; line-height: 1; font-size: .8rem; color: var(--bs-secondary-color); }
.asst-md > :last-child { margin-bottom: 0; }
.asst-md pre { overflow-x: auto; max-width: 100%; }
.asst-md table { overflow-wrap: normal; }
.asst-md th { white-space: nowrap; }
.asst-md td { min-width: 5ch; }
.asst-md img { max-width: 100%; height: auto; }
details.asst-foot { display: block; }
details.asst-foot > summary { display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem; cursor: pointer; list-style: none; min-width: 0; color: var(--bs-secondary-color); }
details.asst-foot > summary::-webkit-details-marker { display: none; }
.asst-foot-caret { font-size: .6rem; transition: transform .15s; }
details.asst-foot[open] .asst-foot-caret { transform: rotate(90deg); }
details.asst-foot[open] > summary .asst-foot-peek { display: none; }
.asst-foot-peek { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-foot-body { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .35rem; }
.asst-src-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-foot { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed var(--bs-border-color); font-size: .75rem; }
.asst-foot-label { color: var(--bs-secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; }
.asst-src { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-body-color); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
a.asst-src:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.asst-app { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border: 1px solid var(--bs-info-border-subtle); }
.asst-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: var(--bs-secondary-color); animation: asst-blink 1.2s infinite ease-in-out both; }
.asst-typing span:nth-child(2) { animation-delay: .2s; }
.asst-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes asst-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .asst-typing span { animation: none; } .asst-messages { scroll-behavior: auto; } }

.asst-form textarea { resize: none; min-height: 44px; max-height: 9.5rem; overflow-y: auto; }
.asst-icon-btn { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.asst-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.d-none + .helper-install-slow { display: none; }

.asst-doc-panel.offcanvas-end { width: min(50vw, 900px); }
@media (max-width: 991.98px) {
    .asst-doc-panel.offcanvas-end { width: 100vw; }
}
@media (max-width: 575.98px) {
    main.container-fluid:has(> .asst-page) { padding-top: .5rem !important; padding-bottom: 0 !important; }
    .asst-page { height: calc(var(--asst-vh, 100dvh) - var(--asst-top, 60px) - var(--asst-bottom, 0px) - .25rem); }
    .asst-messages { padding: .5rem; }
    .asst-row.user .asst-bubble { max-width: 88%; }
    .asst-row.ai .asst-bubble { max-width: 100%; }
    #asst-suggestions .asst-example { padding-top: .45rem; padding-bottom: .45rem; }
    .asst-kbd-hint { display: none; }
    .asst-hint { font-size: .72rem; margin-top: .15rem !important; }
    .asst-proposal-actions .btn { display: block; width: 100%; margin: 0 0 .35rem 0 !important; }
}
@media (max-width: 399.98px) { .asst-avatar { display: none; } .asst-title { font-size: 1rem; } }
.asst-touch-only { display: none !important; }
.asst-touch-only-item { display: none; }
@media (hover: none) { .asst-touch-only { display: inline-flex !important; } .asst-touch-only-item { display: list-item; } }
@media (max-width: 767.98px) { .asst-wide-only { display: none !important; } }
.asst-pending { margin-bottom: .4rem; }
.asst-pending-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
.asst-pending-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 220px; min-width: 0; padding: .2rem .35rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); font-size: .8rem; }
.asst-pending-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: .25rem; flex: 0 0 auto; }
.asst-drop { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px dashed var(--bs-primary); border-radius: .5rem; background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); font-weight: 600; pointer-events: none; }
.asst-doc-imgwrap { height: 100%; background: #111; display: flex; align-items: center; justify-content: center; }
.asst-doc-imgwrap.d-none { display: none !important; }
.asst-doc-imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.asst-shown { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.asst-shown-item { margin: 0; max-width: 100%; min-width: 0; }
.asst-shown-item img { max-width: min(100%, 420px); max-height: 320px; border-radius: .4rem; border: 1px solid var(--bs-border-color); display: block; }
.asst-shown-item figcaption { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .2rem; overflow-wrap: anywhere; }
.asst-webcard { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; padding: .45rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; text-decoration: none; color: var(--bs-body-color); background: var(--bs-tertiary-bg); max-width: 520px; }
.asst-webcard.d-none { display: none !important; }
.asst-webcard:hover { border-color: var(--bs-primary); }
.asst-webcard img { width: 96px; height: 64px; object-fit: cover; border-radius: .3rem; flex: 0 0 auto; }
.asst-webcard > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 399.98px) { .asst-webcard img { width: 64px; height: 48px; } }
.asst-minimap-wrap { margin-top: .5rem; }
.asst-minimap-wrap summary { cursor: pointer; font-size: .8rem; color: var(--bs-secondary-color); font-weight: 600; }
.asst-minimap { height: 180px; width: min(100%, 460px); margin-top: .3rem; border-radius: .4rem; border: 1px solid var(--bs-border-color); }
@media (max-width: 575.98px) { .asst-minimap { height: 220px; width: 100%; } }
.asst-quotes { margin-top: .5rem; font-size: .85rem; }
.asst-quotes summary { cursor: pointer; color: var(--bs-secondary-color); font-weight: 600; }
.asst-quote { margin: .35rem 0 0; padding: .35rem .6rem; border-left: 3px solid var(--bs-primary-border-subtle); background: var(--bs-tertiary-bg); border-radius: 0 .35rem .35rem 0; white-space: normal; overflow-wrap: anywhere; }
.asst-quote-src { display: block; margin-top: .2rem; font-size: .75rem; color: var(--bs-secondary-color); }
.asst-att-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.asst-att { display: flex; flex-direction: column; gap: .2rem; max-width: 180px; min-width: 0; }
.asst-att-open img { width: 160px; max-width: 100%; height: 120px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--bs-border-color); display: block; }
.asst-att-pdf { display: inline-flex; align-items: center; padding: .3rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); text-decoration: none; overflow-wrap: anywhere; }
.asst-att-gps { font-size: .72rem; text-decoration: none; }
.asst-att-person { font-size: .72rem; padding: .1rem .4rem; }
@media (max-width: 575.98px) {
    .asst-att { max-width: calc(50% - .2rem); }
    .asst-att-open img { width: 100%; height: 110px; }
    .asst-att-person { min-height: 36px; }
}
/* touch devices: no keyboard shortcut hint (Ctrl+Enter is meaningless there) */
@media (hover: none) { .asst-kbd-hint { display: none; } .asst-hint { white-space: normal; } }
.sanitize-range-slider {
  position: relative;
  height: 32px;
  margin: 0 8px;
  touch-action: none;
  cursor: pointer;
}
.sanitize-range-track {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #dee2e6 0 var(--range-start, 0%), #0d6efd var(--range-start, 0%) var(--range-end, 100%), #dee2e6 var(--range-end, 100%) 100%);
}
.sanitize-range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.sanitize-range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid white;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 1px #0a58ca;
  pointer-events: auto;
  cursor: grab;
}
.sanitize-range-slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 1px #0a58ca;
  pointer-events: auto;
  cursor: grab;
}
.sanitize-range-slider input[type="range"]::-moz-range-track { background: transparent; }
#sanitize-gpx-slider-start { z-index: 2; }
#sanitize-gpx-slider-end { z-index: 3; }

/* Transparent overlay file used as a basemap (local LiDAR hillshade, 2026-10-07). */
.map-tile-paper .leaflet-tile { background: #f2f2ee; }