/* Styles the static parcel block analysis dashboard and responsive map/table layout. */
:root {
    --bg: #f5f4ef;
    --panel: #ffffff;
    --ink: #202124;
    --muted: #62615c;
    --line: #d7d3c8;
    --accent: #0f766e;
    --accent-2: #b45309;
    --danger: #b91c1c;
    --map-road: #3f3f46;
    --shadow: 0 8px 24px rgba(31, 31, 28, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
select {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
}

.topbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 16px;
    row-gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfaf6;
}

.title-block {
    grid-column: 1;
    grid-row: 1;
}

.title-block h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
}

.title-block p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.report-tabs {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.report-tabs a {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.report-tabs a:hover {
    color: var(--accent);
}

.report-tabs a.active {
    border-color: #99d5ce;
    background: #eaf7f5;
    color: var(--accent);
}

.report-tabs [hidden] {
    display: none;
}

.toolbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* Vector canvases hidden while an animated zoom is in flight — see the zoomstart handler in app.js. */
.zpa-zoom-anim .leaflet-overlay-pane {
    visibility: hidden;
}

.label-with-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-button {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    cursor: pointer;
}

.info-button:hover {
    border-color: #99d5ce;
    color: var(--accent);
}

.workspace[hidden],
.parcel-panel[hidden],
.conclusions-view[hidden] {
    display: none;
}

.conclusions-view {
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 16px 32px;
}

th[title] {
    cursor: help;
}

.toolbar-button {
    align-self: end;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
}

.toolbar-button:hover {
    border-color: #99d5ce;
    color: var(--accent);
}

.threshold-field {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.threshold-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.threshold-controls input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--accent);
}

.threshold-controls output {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.modal-note {
    margin: 12px 0;
    color: var(--muted);
    font-weight: 400;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(24, 24, 27, 0.45);
}

.modal-backdrop[hidden] {
    display: none;
}

.modal {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(80vh, 640px);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24, 24, 27, 0.25);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.modal-header h2 {
    margin: 0;
    font-size: 16px;
}

.modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: #f4f4f5;
    color: var(--ink);
}

.modal-body {
    overflow-y: auto;
    padding: 14px 18px 18px;
    font-size: 13px;
    line-height: 1.55;
}

.modal-intro {
    margin: 0 0 12px;
    color: var(--muted);
}

.metric-definitions {
    margin: 0;
}

.metric-definitions dt {
    margin-top: 12px;
    font-weight: 600;
}

.metric-definitions dd {
    margin: 2px 0 0;
    color: var(--muted);
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

/* Sits inside the Opća statistika summary row, with breathing room from the chevron. */
.stats-disclosure .toggle-control {
    margin-left: 14px;
}

.toggle-control input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #eab308;
    cursor: pointer;
}

.counter-pill {
    min-width: 34px;
    padding: 3px 7px;
    border: 1px solid #f0c36d;
    border-radius: 999px;
    background: #fff8db;
    color: #7c4a03;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.stats-disclosure {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid #e5e1d7;
}

.disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.disclosure-summary::-webkit-details-marker {
    display: none;
}

.disclosure-summary::marker {
    content: '';
}

.disclosure-summary:focus-visible {
    border-radius: 4px;
    outline: 2px solid rgba(15, 118, 110, 0.5);
    outline-offset: 3px;
}

.stats-disclosure > .disclosure-summary {
    width: fit-content;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.disclosure-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 140ms ease;
}

details[open] > .disclosure-summary .disclosure-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

select {
    min-width: 154px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: white;
    color: var(--ink);
    padding: 0 32px 0 10px;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    min-height: 0;
}

.map-pane {
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #dfe9e1;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

#map *,
.leaflet-container {
    user-select: none;
    -webkit-user-select: none;
}

.leaflet-dragging #map,
.leaflet-dragging .leaflet-container,
.leaflet-dragging #map .leaflet-pane,
.leaflet-dragging #map .leaflet-interactive {
    cursor: grabbing;
}

#map .leaflet-map-pane,
#map .leaflet-overlay-pane,
#map .leaflet-tooltip-pane,
#map .leaflet-interactive,
#map canvas,
#map svg {
    cursor: crosshair;
}

#map .leaflet-control,
#map .leaflet-control a {
    cursor: pointer;
}

.legend {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 500;
    min-width: 190px;
    max-width: min(300px, calc(100% - 28px));
    padding: 10px;
    border: 1px solid rgba(32, 33, 36, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
    font-size: 12px;
}

.legend-title {
    margin-bottom: 8px;
    font-weight: 700;
}

.legend-scale {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
}

/* Marks the block-size prag on the ramp itself, at the exact point where the colour changes. */
.legend-pivot {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
}

.legend-values {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    color: var(--muted);
}

/* The prag label sits under the pivot rather than in the middle, so it lands where the colour
   changes. The bar's left end is 0 by construction and is left unlabelled to keep the row narrow. */
.legend-values-pivot {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 6px;
}

.legend-values-pivot span {
    justify-self: end;
    white-space: nowrap;
}

.legend-values-pivot span:first-child {
    font-weight: 600;
    color: var(--ink);
}

.legend-highlight {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--ink);
}

.legend-highlight span:first-child {
    width: 14px;
    height: 14px;
    border: 1px solid #a16207;
    border-radius: 3px;
}

/* Sources the GUP corridor layer straight from the plan text, under its legend swatch. */
.legend-note {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}

.legend-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.side-panel {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    border-left: 1px solid var(--line);
    background: #fdfcf8;
    padding: 12px;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.metric-tile,
.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.metric-tile {
    min-height: 68px;
    padding: 10px;
}

.metric-label {
    color: var(--muted);
    font-size: 12px;
}

.metric-value {
    margin-top: 6px;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 750;
}

.panel {
    margin-bottom: 10px;
    padding: 12px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.panel-disclosure > .disclosure-summary {
    margin-bottom: 0;
}

.panel-disclosure[open] > .disclosure-summary {
    margin-bottom: 10px;
}

.panel-disclosure > .disclosure-summary h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-disclosure > .disclosure-summary .disclosure-action {
    flex: 0 0 auto;
}

/* The curation controls render wherever the review API answers. They need more width than the
   header row has left over, so they drop to their own row while the parcel number and the copy
   button keep the full first row. */
.parcel-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.parcel-panel > .disclosure-summary:has(.road-toggle:not([hidden])) {
    flex-wrap: wrap;
}

.parcel-panel > .disclosure-summary:has(.road-toggle:not([hidden])) .parcel-header-actions {
    flex: 1 1 100%;
}

/* Localhost-only road curation control living in the selected-parcel header row. */
.road-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
}

.road-toggle[hidden] {
    display: none;
}

.road-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #eab308;
    cursor: pointer;
}

.road-toggle input:disabled,
.road-toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

/* The keyboard shortcut for the same decision, printed on the control it duplicates. */
.road-toggle kbd {
    padding: 1px 4px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #f4f4f5;
    font: inherit;
    font-size: 10px;
    color: var(--muted);
}

.barrier-select {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
}

.barrier-select[hidden] {
    display: none;
}

.barrier-select select {
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    cursor: pointer;
}

.barrier-select select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.panel h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0;
}

.panel button {
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    cursor: pointer;
}

.panel button:hover,
.panel button.active {
    border-color: var(--accent);
    color: var(--accent);
}

.panel button:disabled {
    border-color: var(--line);
    color: #9a9891;
    cursor: not-allowed;
}

.selected-block {
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.empty-state {
    color: var(--muted);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.detail-item {
    padding: 8px;
    border: 1px solid #ebe7dc;
    border-radius: 6px;
    background: #fbfaf6;
}

.detail-label {
    color: var(--muted);
    font-size: 11px;
}

.detail-value {
    margin-top: 3px;
    font-weight: 700;
}

.angle-summary {
    padding: 9px;
    border: 1px solid #d8e7e3;
    border-radius: 6px;
    background: #f2faf7;
}

.table-controls {
    display: flex;
    align-items: end;
    gap: 10px;
}

.table-controls label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
}

.table-controls select {
    min-width: 178px;
}

#blockCount {
    padding-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.angle-values {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.angle-values span {
    min-width: 48px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #fff;
    text-align: center;
    font-weight: 700;
}

.flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.flag {
    border: 1px solid #f0c36d;
    border-radius: 999px;
    background: #fff6db;
    color: #7c4a03;
    padding: 3px 7px;
    font-size: 12px;
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    max-width: min(340px, calc(100vw - 28px));
    padding: 10px 12px;
    border: 1px solid rgba(32, 33, 36, 0.14);
    border-radius: 8px;
    background: rgba(32, 33, 36, 0.94);
    color: #fff;
    box-shadow: var(--shadow);
    font-size: 13px;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.chart-tabs {
    display: flex;
    gap: 6px;
}

.histogram {
    display: grid;
    gap: 7px;
}

.hist-row {
    display: grid;
    grid-template-columns: 72px minmax(80px, 1fr) 52px;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    font-size: 12px;
}

.bar-track {
    height: 12px;
    border-radius: 6px;
    background: #ece8dd;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0f766e, #d97706);
}

.hist-count {
    text-align: right;
    color: var(--muted);
}

.conclusions-panel ol {
    margin: 0;
    padding-left: 20px;
}

.conclusions-panel li {
    margin: 0 0 8px;
    line-height: 1.35;
    font-size: 13px;
}

.table-wrap {
    max-height: 440px;
    overflow: auto;
    border: 1px solid #ebe7dc;
    border-radius: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

th,
td {
    padding: 8px;
    border-bottom: 1px solid #ebe7dc;
    text-align: right;
    white-space: nowrap;
}

th:first-child,
td:first-child {
    text-align: left;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbfaf6;
    color: var(--muted);
    font-weight: 700;
}

tbody tr {
    cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
    background: #eef7f4;
}

.leaflet-container {
    font: inherit;
    overflow: hidden;
    touch-action: pan-x pan-y;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-map-pane {
    z-index: auto;
}

.leaflet-tile-pane {
    z-index: 200;
}

.leaflet-overlay-pane {
    z-index: 400;
}

.leaflet-shadow-pane {
    z-index: 500;
}

.leaflet-marker-pane {
    z-index: 600;
}

.leaflet-tooltip-pane {
    z-index: 650;
}

.leaflet-popup-pane {
    z-index: 700;
}

.leaflet-tile {
    user-select: none;
    -webkit-user-drag: none;
}

.leaflet-container img.leaflet-tile {
    max-width: none;
}

.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.leaflet-top {
    top: 0;
}

.leaflet-bottom {
    bottom: 0;
}

.leaflet-left {
    left: 0;
}

.leaflet-right {
    right: 0;
}

.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
    float: left;
    clear: both;
}

.leaflet-right .leaflet-control {
    float: right;
}

.leaflet-control-zoom a {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    font-weight: 700;
}

.leaflet-control-attribution {
    padding: 3px 6px;
    background: rgba(255, 255, 255, 0.86);
    font-size: 11px;
}

#map .leaflet-tooltip.zpa-tooltip {
    position: absolute;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid rgba(32, 33, 36, 0.22);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 31, 28, 0.2);
    color: var(--ink);
    font: 12px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 1;
    pointer-events: none;
    white-space: nowrap;
}

#map .leaflet-tooltip.zpa-tooltip::before {
    display: none;
}

.tooltip-title {
    margin-bottom: 2px;
    font-weight: 750;
}

.tooltip-meta {
    color: var(--muted);
}

@media (max-width: 860px) {
    .app-shell {
        height: auto;
        min-height: 100vh;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .title-block,
    .stats-disclosure,
    .toolbar {
        grid-column: 1;
        grid-row: auto;
    }

    .toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    select {
        width: 100%;
        min-width: 0;
    }

    .workspace {
        grid-template-columns: 1fr;
    }

    .map-pane {
        height: 56vh;
        min-height: 380px;
    }

    .side-panel {
        border-left: 0;
        border-top: 1px solid var(--line);
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .topbar {
        padding: 12px;
    }

    .toolbar {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 8px;
    }

    .toolbar label {
        min-width: 0;
    }

    /* The GUP toggle lives in the Opća statistika summary row: let the row wrap and
       shrink the label so it stays usable at 320-400 px. */
    .stats-disclosure > .disclosure-summary {
        flex-wrap: wrap;
    }

    .stats-disclosure .toggle-control {
        margin-left: 0;
        font-size: 11px;
        min-width: 0;
    }

    .counter-pill {
        min-width: 30px;
        padding-inline: 5px;
    }

    .summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .panel-disclosure > .disclosure-summary {
        gap: 7px;
    }

    .panel-disclosure > .disclosure-summary .disclosure-action {
        padding-inline: 7px;
        font-size: 11px;
    }

    .table-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .table-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .table-controls select {
        width: 100%;
        min-width: 0;
    }

    .map-pane {
        min-height: 330px;
    }

    .toast {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-width: none;
    }

    .hist-row {
        grid-template-columns: 60px minmax(70px, 1fr) 44px;
    }

    th,
    td {
        padding: 7px 6px;
    }
}

/* Marching ants around the selected parcel. The dash pattern is set by Leaflet (dashArray "10 8", so
   one full cycle is 18 user units); animating the offset by exactly that keeps the loop seamless. */
@keyframes zpa-marching-ants {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -18; }
}

.zpa-parcel-ants {
    animation: zpa-marching-ants 900ms linear infinite;
}

/* Motion off leaves a static dashed line over the white halo, so the selection stays just as legible
   — the animation is emphasis, never the only signal. `?reduceMotion=1` is the same switch for
   drivers that cannot emulate the media query. */
@media (prefers-reduced-motion: reduce) {
    .zpa-parcel-ants {
        animation: none;
    }
}

:root.reduce-motion .zpa-parcel-ants {
    animation: none;
}

/* Backlink to the Ulice i parcele hub, sitting with the report tabs but styled as a plain link. */
.report-tabs .hub-backlink {
    border: none;
    background: none;
    color: var(--muted);
    padding-left: 0;
}

.report-tabs .hub-backlink:hover {
    color: var(--accent);
    background: none;
}