/* ============================================================
   LandDeal CRM — блоки агроаналізу ділянки
   ------------------------------------------------------------
   Рельєф (pm-tp__*) і ґрунт/NDVI (pm-nd__*) ділять одні кубики:
   ті самі плитки статистики, той самий графік, той самий висновок.
   Спільні для карти (модалки «Рельєф» і «Ґрунт») та картки ділянки.
   Живуть окремим файлом, бо map.html та
   index.html мають РІЗНІ набори токенів і не бачать стилів
   одне одного — інакше довелося б тримати дві копії блоку.

   Кольори беруться з --pt-* тієї сторінки, яка його підключила.
   ============================================================ */

.pm-tp__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--pt-line-2);
    border: 1px solid var(--pt-line-2);
    border-radius: 14px;
    overflow: hidden;
}
.pm-tp__stat {
    background: var(--pt-surface);
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pm-tp__stat i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pm-tp__stat b { font-size: 17px; font-weight: 700; color: var(--pt-ink); font-variant-numeric: tabular-nums; }
.pm-tp__stat u { text-decoration: none; font-size: 11px; color: var(--pt-ink-3); }

.pm-tp__blockhead {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
    margin: 18px 0 8px;
}
.pm-tp__chart {
    border: 1px solid var(--pt-line-2);
    border-radius: 14px;
    background: var(--pt-surface);
    padding: 6px 4px 2px;
    overflow: hidden;
}
.pm-tp__svg { display: block; width: 100%; height: auto; }
.pm-tp__grid { stroke: var(--pt-line); stroke-width: 1; }
.pm-tp__area { fill: var(--pt-accent-soft); }
.pm-tp__line { fill: none; stroke: var(--pt-accent); stroke-width: 2; stroke-linejoin: round; }
.pm-tp__ylab, .pm-tp__xlab { fill: var(--pt-ink-3); font-size: 10px; font-family: inherit; }
.pm-tp__ylab { text-anchor: end; }

/* Смужка часток площі за класами ухилу */
.pm-tp__bar {
    display: flex;
    height: 12px;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--pt-line-2);
}
.pm-tp__bar span { display: block; height: 100%; }
.pm-tp__keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pm-tp__key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--pt-ink-2); }
.pm-tp__key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.pm-tp__note {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 13px;
    background: var(--pt-sunken);
    border: 1px solid var(--pt-line);
    border-left: 3px solid var(--pt-accent);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pt-ink-2);
}
.pm-tp__note i { color: var(--pt-accent); margin-top: 2px; }

.pm-tp__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 46px 20px;
    color: var(--pt-ink-3);
    font-size: 13px;
}

@media (max-width: 640px) {
    .pm-tp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Перемикач ліній профілю */
.pm-tp__profhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 8px;
}
.pm-tp__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pm-tp__chip { padding: 4px 10px; font-size: 11.5px; border-radius: 8px; }


/* ============================================================
   ҐРУНТ І NDVI
   ------------------------------------------------------------
   Той самий набір кубиків, що й у рельєфі, плюс те, чого там
   не було: четверта колонка статистики, тон комірки за класом
   і друга (сіра) лінія на графіку — околиця для порівняння.
   ============================================================ */

/* Ґрунт дає чотири показники, рельєф — три */
.pm-tp__stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Тон дає КЛАС показника, а не місце комірки: колір тут читається як оцінка,
   тож роздавати його за позицією було б брехнею */
.pm-tp__stat--ok   { box-shadow: inset 3px 0 0 var(--pt-accent); }
.pm-tp__stat--warn { box-shadow: inset 3px 0 0 #9C7526; }
.pm-tp__stat--bad  { box-shadow: inset 3px 0 0 #A8402F; }

/* Позиція серед власних опитаних ділянок */
.pm-tp__rank {
    margin-top: 4px;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--pt-sunken);
    border: 1px solid var(--pt-line);
    color: var(--pt-ink-3);
}
.pm-tp__rank--ok  { color: var(--pt-accent-deep); border-color: var(--pt-accent-soft); }
.pm-tp__rank--low { color: #A8402F; }

/* Головний висновок — той, заради якого блок і відкривали */
.pm-tp__note--strong {
    background: var(--pt-accent-soft);
    border-color: var(--pt-accent-soft);
    color: var(--pt-ink);
    font-weight: 600;
}
/* Застереження про джерело: потрібне, але не має перетягувати око */
.pm-tp__note--muted {
    border-left-color: var(--pt-line-2);
    font-size: 11px;
    color: var(--pt-ink-3);
}
.pm-tp__note--muted i { color: var(--pt-ink-3); }

/* Графік NDVI */
.pm-nd__season { fill: var(--pt-accent-soft); opacity: 0.5; }
.pm-nd__line {
    fill: none;
    stroke: var(--pt-accent);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.pm-nd__around {
    fill: none;
    stroke: var(--pt-ink-3);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
    opacity: 0.75;
}
.pm-nd__dot { fill: var(--pt-accent); }

.pm-nd__keys { margin-top: 10px; }
.pm-nd__swatch { width: 14px; height: 3px; border-radius: 2px; }
.pm-nd__swatch--main { background: var(--pt-accent); height: 3px; }
.pm-nd__swatch--around {
    background: repeating-linear-gradient(90deg, var(--pt-ink-3) 0 4px, transparent 4px 7px);
    height: 2px;
}
.pm-nd__swatch--season {
    background: var(--pt-accent-soft);
    height: 11px;
    width: 11px;
    border-radius: 3px;
}

@media (max-width: 760px) {
    .pm-tp__stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
   3D-ВИД РЕЛЬЄФУ (pm-t3d__*)
   ------------------------------------------------------------
   Вкладка в модалці «Рельєф»: полотно MapLibre з панеллю
   перебільшення висот. Кубики ті самі — chip-кнопки й примітка.
   ============================================================ */

/* Під 3D модалка ширша за аналіз: полотну потрібен кадр, а не колонка */
.pm-modal-card.pm-modal-card--3d { max-width: 1080px; }
.pm-modal-card--3d .pm-t3d__stage { height: min(62vh, 600px); }

/* На все вікно: картка = viewport, полотно забирає всю вільну висоту.
   Два класи в селекторі — щоб перебити tailwind-утиліти на картці
   (max-w-3xl, mx-4, max-h-[90vh]), які мають вагу одного класу. */
.pm-modal-card.pm-modal-card--full {
    max-width: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
}
/* :not(.hidden) — інакше id+клас переважив би .hidden і показав обидві вкладки */
.pm-modal-card--full #terrainModal3d:not(.hidden) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pm-modal-card--full .pm-t3d { flex: 1; min-height: 0; }
.pm-modal-card--full .pm-t3d__stage { flex: 1; height: auto; min-height: 0; }
/* Аналіз на всю ширину екрана читається гірше — тримаємо колонку */
.pm-modal-card--full #terrainModalBody { max-width: 960px; width: 100%; margin: 0 auto; }

/* Вкладки модалки: аналіз ↔ 3D */
.pm-tp__tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
}

.pm-t3d { display: flex; flex-direction: column; gap: 10px; }
.pm-t3d__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pm-t3d__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pm-t3d__spacer { flex: 1; }

.pm-t3d__stage {
    position: relative;
    height: min(52vh, 480px);
    border: 1px solid var(--pt-line-2);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pt-sunken);
}
/* width/height явно: maplibregl-map ставить position:relative і перебиває
   absolute-розтяжку — без цього полотно має нульову висоту */
.pm-t3d__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-t3d__map .maplibregl-canvas { outline: none; }
.pm-t3d__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pt-ink-3);
    font-size: 13px;
    pointer-events: none;
}
.pm-t3d__readout {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(20, 24, 18, 0.72);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.pm-t3d__loading.hidden, .pm-t3d__readout.hidden { display: none; }
.pm-t3d__hint { margin-top: 0; }
.pm-t3d .maplibregl-ctrl-attrib { font-size: 10px; }


/* ============================================================
   ПРОФІЛЬ РЕЛЬЄФУ НА КАРТІ (pm-prof__*)
   ------------------------------------------------------------
   Нижня панель під картою, як у Google Earth: лінія лишається на
   карті, графік знизу, курсор на графіку веде маркер по лінії.
   Графік бере кубики профілю з модалки (pm-tp__grid/area/line/ylab).
   ============================================================ */

.pm-prof {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1500;               /* над лівою панеллю (1000), під модалками (10000) */
    display: flex;
    flex-direction: column;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-2);
    border-radius: 16px;
    box-shadow: var(--pt-shadow-lg);
    overflow: hidden;
}
.pm-prof.hidden { display: none; }
/* Поки док відкритий, усе, що прив'язане до низу вікна, піднімається над
   ним. Висоту дока (--pm-dock-h) публікує map-profile.js із ResizeObserver,
   бо вона залежить від того, чи вже є графік і як переносяться підсумки. */
.pm-prof-open .map-control-panel,
.pm-prof-open .details-panel,
.pm-prof-open .filters-panel {
    max-height: calc(100vh - var(--pm-top) - var(--pm-dock-h, 320px) - 10px);
}
.pm-prof-open .leaflet-control-layers-expanded {
    max-height: calc(100vh - var(--pm-topbar-h, 45px) - 118px - var(--pm-dock-h, 320px));
}
.pm-prof-open .pm-legend { bottom: calc(24px + var(--pm-dock-h, 320px)); }
.pm-prof-open .leaflet-bottom { bottom: var(--pm-dock-h, 320px); }

.pm-prof__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    border-bottom: 1px solid var(--pt-line);
    background: var(--pt-sunken);
}
.pm-prof__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pt-ink);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-prof__tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.pm-prof__body { padding: 8px 14px 10px; }

/* Підсумок у рядок: компактніший за плитки модалки, бо панель низька */
.pm-prof__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-bottom: 6px;
}
.pm-prof__stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--pt-ink); white-space: nowrap; }
.pm-prof__stat i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
    margin-right: 3px;
}
.pm-prof__stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-prof__stat u { text-decoration: none; font-size: 11px; color: var(--pt-ink-3); }
.pm-prof__sep { color: var(--pt-ink-3); margin: 0 2px; }

.pm-prof__chart { position: relative; }
.pm-prof__keys { margin-top: 4px; }
.pm-prof__svg { display: block; width: 100%; height: auto; }
.pm-prof__inside { fill: var(--pt-accent-soft); }
.pm-prof__inside--alt { fill: var(--pt-accent-line); }
.pm-prof__tip-parcel { color: #BFE3CC; font-weight: 700; }
.pm-prof__inside-lab { fill: var(--pt-accent-deep); font-size: 10px; font-weight: 700; text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; }
.pm-prof__hover-line { stroke: var(--pt-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pm-prof__hover-dot { fill: #E5484D; stroke: #fff; stroke-width: 2; }
.pm-prof__hover.hidden { display: none; }
.pm-prof__catch { fill: transparent; cursor: crosshair; }
.pm-prof__tip {
    position: absolute;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(20, 24, 18, 0.82);
    color: #fff;
    font-size: 11.5px;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.pm-prof__tip b { font-weight: 700; }
.pm-prof__tip u { text-decoration: none; opacity: 0.75; }
.pm-prof__tip.hidden { display: none; }

.pm-prof__hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 12px;
    font-size: 13px;
    color: var(--pt-ink-2);
}
.pm-prof__hint i { color: var(--pt-accent); }
.pm-prof__hint b { font-weight: 700; color: var(--pt-ink); }

/* Кінці лінії на карті — ручки для перетягування */
.pm-prof__handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #E5484D;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: grab;
}
.pm-prof__handle:active { cursor: grabbing; }
.pm-prof-drawing { cursor: crosshair !important; }
.pm-prof-drawing .leaflet-interactive { cursor: crosshair !important; }

/* Підпис маркера на карті */
.pm-prof__tip-map {
    background: rgba(20, 24, 18, 0.82) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700;
    box-shadow: none !important;
}
.pm-prof__tip-map::before { border-top-color: rgba(20, 24, 18, 0.82) !important; }

@media (max-width: 760px) {
    .pm-prof__stats { gap: 4px 14px; }
    .pm-prof-open .map-control-panel { display: none; }
}


/* ── Профіль на 3D-полотні ──────────────────────────────────────────── */
.pm-t3d__sep { width: 1px; height: 18px; background: var(--pt-line-2); margin: 0 4px; }
.pm-t3d__profile { padding-top: 2px; }
.pm-t3d__profile.hidden { display: none; }
/* З графіком під полотном полотно нижче, інакше модалка тягне скрол */
.pm-t3d--profile .pm-t3d__stage { height: min(40vh, 420px); }
.pm-modal-card--3d .pm-t3d--profile .pm-t3d__stage { height: min(44vh, 460px); }
.pm-modal-card--full .pm-t3d--profile .pm-t3d__stage { height: auto; }

/* Маркер за курсором на 3D-полотні: крапка з підписом над нею */
.pm-t3d__hover {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #E5484D;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.pm-t3d__hover.hidden { display: none; }
.pm-t3d__hover-lab {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 7px;
    background: rgba(20, 24, 18, 0.82);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.maplibregl-marker.pm-prof__handle { cursor: grab; }


/* ── NDVI ділянки на карті (модалка «Ґрунт і NDVI», вкладка «Карта») ── */
.pm-nv { display: flex; flex-direction: column; gap: 10px; }
.pm-nv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-nv__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pm-nv__map {
    height: min(44vh, 420px);
    border: 1px solid var(--pt-line-2);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pt-sunken);
}
.pm-nv .pm-tp__blockhead { margin: 6px 0 0; }
.pm-nv__strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
}
.pm-nv__thumb {
    flex: 0 0 auto;
    width: 112px;
    padding: 4px 4px 6px;
    text-align: center;
    border: 1px solid var(--pt-line-2);
    border-radius: 10px;
    background: var(--pt-surface);
    cursor: pointer;
    transition: border-color 0.18s var(--pt-ease-soft), box-shadow 0.18s var(--pt-ease-soft);
}
.pm-nv__thumb:hover { border-color: var(--pt-accent-line); }
.pm-nv__thumb.active { border-color: var(--pt-accent); box-shadow: 0 0 0 2px var(--pt-accent-soft); }
.pm-nv__thumb canvas {
    display: block;
    width: 104px;
    height: 78px;
    border-radius: 6px;
    background: var(--pt-sunken);
}
.pm-nv__thumb.is-loading canvas { opacity: 0.55; }
.pm-nv__thumb.is-empty canvas { opacity: 0.35; }
/* Тайли не дали через ліміт Sentinel — не плутати з «без знімка» */
.pm-nv__thumb.is-limited canvas { opacity: 0.25; }
.pm-nv__thumb.is-limited i { color: var(--pt-amber, #b7791f); }
.pm-nv__thumb b { display: block; margin-top: 5px; font-size: 11.5px; color: var(--pt-ink); }
.pm-nv__thumb i { display: block; font-style: normal; font-size: 10.5px; color: var(--pt-ink-3); font-variant-numeric: tabular-nums; }

/* Місяць NDVI у панелі 3D-виду */
.pm-t3d__month {
    padding: 4px 8px;
    border: 1px solid var(--pt-line-2);
    border-radius: 9px;
    background: var(--pt-surface);
    color: var(--pt-ink);
    font: 600 12px 'Manrope', sans-serif;
}
.pm-t3d__month.hidden { display: none; }