/* Isolated styles for the price-statistics page. Loaded ONLY on /cijene-nekretnina via
   @section Styles, so nothing here touches the shared site.css bundle or the Details page.
   The dashboard grid lives here (not Tailwind utilities) so the layout never depends on whether
   the shared CSS bundle was rebuilt with the right responsive col-span classes. */

.cijene-map {
    width: 100%;
    height: 60vh;
    height: 60svh;
    min-height: 320px;
    max-height: 520px;
}

.cijene-map .maplibregl-popup-content {
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 0.65rem 0.75rem;
}

.cijene-info-sheet {
    bottom: 0;
    display: none;
    left: 0;
    padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    pointer-events: none;
    position: fixed;
    right: 0;
    z-index: 55;
}

.cijene-info-sheet.is-open {
    display: block;
}

.cijene-info-sheet__panel {
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    margin: 0 auto;
    max-width: 420px;
    min-height: 92px;
    padding: 0.9rem 3rem 0.9rem 1rem;
    pointer-events: auto;
    position: relative;
}

.cijene-info-sheet__close {
    align-items: center;
    background: #f1f5f9;
    border: 0;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: 1.1rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 2rem;
}

.cijene-info-sheet__title {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    padding-right: 0.25rem;
}

.cijene-info-sheet__median {
    color: #be123c;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.35rem;
}

.cijene-info-sheet__range {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
    margin-top: 0.2rem;
}

.cijene-table-row-focus {
    animation: cijene-table-focus 1.6s ease-out;
}

@keyframes cijene-table-focus {
    0% {
        background: #ffe4e6;
    }

    100% {
        background: transparent;
    }
}

/* Mobile: stacked, map first (it is the hero), table below. */
.cijene-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cijene-dashboard__table {
    min-width: 0;
}

@media (max-width: 767px) {
    .cijene-dashboard__map {
        left: 50%;
        margin-left: -50vw;
        position: relative;
        width: 100vw;
    }

    .cijene-dashboard__map > p {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 768px) {
    .cijene-info-sheet {
        display: none !important;
    }
}

/* Desktop: table left (~40%), map right (~60%), side by side. */
@media (min-width: 1024px) {
    .cijene-map {
        height: 58vh;
        min-height: 440px;
        max-height: none;
    }

    .cijene-dashboard {
        display: grid;
        grid-template-columns: 5fr 7fr;
        align-items: start;
    }

    .cijene-dashboard__table {
        order: 1;
    }

    .cijene-dashboard__map {
        order: 2;
    }

    /* Long lists (21+ areas) would run off-screen next to the map; cap the table card to the map's
       height and let it scroll internally, with the header pinned. */
    .cijene-dashboard__table > section {
        max-height: 58vh;
        overflow-y: auto;
    }

    .cijene-dashboard__table thead {
        position: sticky;
        top: 0;
    }
}