/* Change Detection Analytics pane (templates/partials/viewer/_cd_analytics.html,
   static/js/cd-analytics.js).

   The pane is a .da-pane: cards, header bands, facts, the timeline, the time-series side
   panel and the weather box come from displacement-analytics.css. This file adds only
   what Change Detection has on its own (.cda-*). Same type scale: titles 1.0625rem, body
   0.9375rem, dates and legends 0.875rem. Layout follows the pane width (container da-pane). */

/* Summary sub-blocks: Period, facts, Breakdown */
.cda-pane .da-card > .cda-sub { padding: 0 18px 14px; min-width: 0; }
.cda-pane .da-card > .cda-sub + .cda-sub { border-top: 1px solid rgba(var(--white-rgb), 0.1); padding-top: 14px; }
.cda-pane .cda-subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.cda-pane .cda-subtitle { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.cda-pane .cda-timeline { margin-top: 0; }

/* Breakdown by verdict: one stacked bar, parts switched off stay faint. */
.cda-pane .cda-stack { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: rgba(var(--white-rgb), 0.05); }
.cda-pane .cda-stack > span { display: block; height: 100%; background: rgba(var(--rgb), var(--a, 1)); transition: width 0.2s; cursor: default; }
.cda-pane .cda-stack > span:hover { filter: brightness(1.2); }

/* Verdict switches: filter the whole page. */
.cda-pane .cda-verdicts { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.cda-pane .cda-verdict {
    display: grid; grid-template-columns: auto 12px minmax(0, 1fr) auto 3.4rem; gap: 10px; align-items: center;
    padding: 4px 0; margin: 0; cursor: pointer; user-select: none;
}
.cda-pane .cda-verdict.form-switch { padding-left: 0; }
.cda-pane .cda-verdict .form-check-input { margin: 0; float: none; cursor: pointer; }
.cda-pane .cda-swatch { width: 12px; height: 12px; border-radius: 3px; background: rgb(var(--rgb)); }
.cda-pane .cda-verdict-n { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cda-pane .cda-verdict-p { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; text-align: right; }
.cda-pane .cda-verdict.is-off .cda-verdict-name,
.cda-pane .cda-verdict.is-off .cda-verdict-n { color: var(--bs-secondary-color); }
/* By label: the switches sit in one row, without counts. */
.cda-pane .cda-verdicts.is-row { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.cda-pane .cda-verdicts.is-row .cda-verdict { grid-template-columns: auto 12px auto; }
.cda-pane .cda-verdicts.is-row .cda-verdict-n,
.cda-pane .cda-verdicts.is-row .cda-verdict-p { display: none; }

/* Breakdown by label: one 100% bar per label, split by the verdicts switched on. */
.cda-pane .cda-lrows { display: grid; grid-template-columns: minmax(0, max-content) minmax(60px, 1fr) auto; gap: 8px 12px; align-items: center; }
.cda-pane .cda-lrows .cda-lhead { color: var(--bs-secondary-color); font-size: 0.875rem; }
.cda-pane .cda-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cda-pane .cda-lnum { text-align: right; font-variant-numeric: tabular-nums; }
.cda-pane .cda-lstack { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: rgba(var(--white-rgb), 0.05); }
.cda-pane .cda-lstack > span { display: block; height: 100%; background: rgb(var(--rgb)); }
.cda-pane .cda-note { color: var(--bs-secondary-color); margin: 0; }

/* Spatial distribution */
/* Map controls float over the image, light so they read on any photo: the map type top
   left, its own controls top right. The band between them lets the pointer through. */
.cda-pane .cda-heat-tools {
    position: absolute; top: 8px; left: 8px; right: 8px; z-index: 4; pointer-events: none;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px;
}
.cda-pane .cda-heat-tools > * { pointer-events: auto; }
.cda-pane .cda-heat-tools-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-left: auto; }
.cda-pane .cda-heat-tools .btn {
    --bs-btn-color: var(--dark-body-bg); --bs-btn-bg: rgba(var(--white-rgb), 0.88); --bs-btn-border-color: rgba(var(--white-rgb), 0.88);
    --bs-btn-hover-color: var(--dark-body-bg); --bs-btn-hover-bg: var(--white-color); --bs-btn-hover-border-color: var(--white-color);
    --bs-btn-active-color: var(--white-color); --bs-btn-active-bg: var(--clr-action); --bs-btn-active-border-color: var(--clr-action);
    box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.35);
}
.cda-pane .cda-heat-tools .btn-check:checked + .btn { color: var(--white-color); background: var(--clr-action); border-color: var(--clr-action); }
/* Hot spots: the verdict switch, on the same light pill as the buttons beside it. */
.cda-pane .cda-heat-switch {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; min-height: 31px; border-radius: var(--bs-border-radius-sm, 4px);
    font-size: 0.875rem; color: var(--dark-body-bg); background: rgba(var(--white-rgb), 0.88); box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.35);
}
.cda-pane .cda-heat-switch .form-check-input { float: none; margin: 0; cursor: pointer; }
.cda-pane .cda-heat-switch .form-check-label { cursor: pointer; white-space: nowrap; }
.cda-pane .cda-heat-wrap {
    position: relative; display: flex; justify-content: center; min-height: 160px;
    background: var(--black-color); border-radius: 6px; overflow: hidden;
}
.cda-pane .cda-heat-wrap canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: pan-y; }
/* Zoomed: drag pans (a finger too, so the page does not scroll under it). */
.cda-pane .cda-heat-wrap canvas.is-zoomed { cursor: grab; touch-action: none; }
.cda-pane .cda-heat-wrap canvas.is-panning { cursor: grabbing; }
/* Zoom buttons float over the image, bottom left, styled like the controls top right. */
.cda-pane .cda-zoom { position: absolute; left: 8px; bottom: 8px; z-index: 4; }
.cda-pane .cda-zoom .btn {
    --bs-btn-color: var(--dark-body-bg); --bs-btn-bg: rgba(var(--white-rgb), 0.88); --bs-btn-border-color: rgba(var(--white-rgb), 0.88);
    --bs-btn-hover-color: var(--dark-body-bg); --bs-btn-hover-bg: var(--white-color); --bs-btn-hover-border-color: var(--white-color);
    --bs-btn-disabled-color: rgba(var(--black-rgb), 0.35); --bs-btn-disabled-bg: rgba(var(--white-rgb), 0.6); --bs-btn-disabled-border-color: transparent;
    box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.35);
}
.cda-pane .cda-heat-loading { position: absolute; top: 50%; left: 50%; margin: -0.5rem 0 0 -0.5rem; color: var(--clr-accent); }
/* Hot spots: the map is being prepared, or could not be made. */
.cda-pane .cda-heat-msg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; max-width: calc(100% - 32px);
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.875rem; pointer-events: none;
    background: rgba(var(--black-rgb), 0.72); border-radius: 6px; color: var(--bs-body-color);
}
.cda-pane .cda-heat-msg.is-error { color: var(--clr-danger); }
.cda-pane .cda-heat-msg .spinner-border { flex: 0 0 auto; color: var(--clr-accent); }
/* Hot spots: the colours are loading. A bar that fills with the server's progress, or slides while it has none. */
.cda-pane .cda-heat-progress {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(220px, 50%); height: 6px;
    border-radius: 3px; overflow: hidden; pointer-events: none;
    background: rgba(var(--white-rgb), 0.3); box-shadow: 0 0 0 4px rgba(var(--black-rgb), 0.45);
}
.cda-pane .cda-heat-progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--clr-accent); transition: width 0.3s; }
.cda-pane .cda-heat-progress.is-busy > span { width: 35%; transition: none; animation: cda-progress-slide 1.2s ease-in-out infinite; }
@keyframes cda-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .cda-pane .cda-heat-progress.is-busy > span { animation-duration: 3s; } }
/* The legend row under the map: one row in both maps, the same height, the (i) at its right end. */
.cda-pane .cda-legend {
    display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem; align-items: center; gap: 8px;
    min-height: 28px; margin-top: 12px; font-size: 0.875rem;
}
.cda-pane .cda-legend > [data-cda-map-mode] { grid-column: 2; min-width: 0; }
.cda-pane .cda-legend-info { grid-column: 3; justify-self: end; }
.cda-map-modal .da-info { color: var(--bs-secondary-color); cursor: help; line-height: 1; }
.cda-map-modal .da-info:hover, .cda-map-modal .da-info:focus-visible { color: var(--clr-accent); outline: none; }
/* Hot spots legend: one bar of steps; hover highlights, a click keeps it. */
.cda-pane .cda-steps { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px 12px; }
.cda-pane .cda-steps-what { color: var(--bs-secondary-color); }
.cda-pane .cda-steps-end { color: var(--bs-secondary-color); font-size: 0.8125rem; }
/* One discrete bar: the steps joined, square inside, rounded at the ends, no text on them. */
.cda-pane .cda-steps-chips { display: flex; gap: 0; border-radius: 4px; overflow: hidden; }
.cda-pane .cda-steps-chips:empty { display: none; }
.cda-pane .cda-steps-chips:empty ~ .cda-steps-end, .cda-pane .cda-steps-end:has(+ .cda-steps-chips:empty) { display: none; }
.cda-pane .cda-step {
    width: 30px; height: 12px; padding: 0; border: 0; border-radius: 0;
    background: var(--c); cursor: pointer; transition: opacity 0.12s, box-shadow 0.12s;
}
.cda-pane .cda-step.is-off { opacity: 0.25; }
.cda-pane .cda-step.is-on { box-shadow: inset 0 0 0 2px var(--white-color); }
.cda-pane .cda-step:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -2px; }
.cda-pane .cda-cellpop {
    position: absolute; z-index: 5; min-width: 200px; max-width: calc(100% - 8px); padding: 8px 10px; font-size: 0.875rem;
    background: var(--dark-card-alt-bg); border: 1px solid var(--bs-border-color); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(var(--black-rgb), 0.5);
}
.cda-pane .cda-cellpop dl { margin: 0; }
.cda-pane .cda-cellpop dl > div { display: flex; justify-content: space-between; gap: 14px; }
.cda-pane .cda-cellpop dt { font-weight: 400; color: var(--bs-secondary-color); }
.cda-pane .cda-cellpop dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cda-pane .cda-cellpop .btn { margin-top: 8px; width: 100%; }
/* Grid legend: what the colour shows, then the bar between its two values, on one row.
   Fixed-width colour bar: it never moves when the numbers beside it change. */
.cda-pane .cda-scale { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; }
.cda-pane .cda-scale-bar {
    flex: 0 0 160px; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(var(--clr-warning-rgb), 0.25), rgba(var(--clr-warning-rgb), 0.85) 30%, rgba(var(--clr-danger-rgb), 0.85));
}
.cda-pane .cda-scale-val { flex: 0 0 4.5rem; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.cda-pane .cda-scale-lo { text-align: right; }
.cda-pane .cda-scale-what { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-secondary-color); }

/* Grid and chart options (Bootstrap dropdowns) */
.cda-pane .cda-pop { min-width: 240px; padding: 10px 12px; font-size: 0.875rem; }
.cda-pane .cda-pop-title { display: block; margin: 8px 0 2px; font-weight: 600; color: var(--bs-secondary-color); }
.cda-pane .cda-pop-title:first-child { margin-top: 0; }
.cda-pane .cda-pop-hint { color: var(--bs-secondary-color); }

/* Time series: drag-free, the bars are clickable. */
.cda-pane #cda-main-chart { cursor: pointer; }

/* Charts in the two lower cards */
.cda-pane .cda-chart-box { position: relative; height: 280px; }
.cda-pane .cda-act-box { height: 240px; }
.cda-pane .cda-chart-title { margin: 0 0 6px; font-size: 0.875rem; font-weight: 600; }
.cda-pane .cda-chart-title:empty { display: none; }
.cda-pane .cda-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 12px 0 0; }
.cda-pane .cda-strip > div { padding: 6px 0; border-bottom: 1px solid rgba(var(--white-rgb), 0.06); min-width: 0; }
.cda-pane .cda-strip dt { font-weight: 400; color: var(--bs-secondary-color); font-size: 0.875rem; }
.cda-pane .cda-strip dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Activity */
.cda-pane .cda-trend {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
    font-weight: 600; font-size: 1rem;
    background: rgba(var(--white-rgb), 0.03); border: 1px solid rgba(var(--white-rgb), 0.1);
}
.cda-pane .cda-trend:empty { display: none; }
.cda-pane .cda-trend-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--rgb)); }
.cda-pane .cda-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 8px; font-size: 0.875rem; color: var(--bs-secondary-color); }
.cda-pane .cda-key:empty { display: none; }
.cda-pane .cda-key > span { display: inline-flex; align-items: center; gap: 8px; }
.cda-pane .cda-key b { color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.cda-pane .cda-key i { display: inline-block; width: 22px; height: 0; border-top: 2px solid rgb(var(--rgb)); }
.cda-pane .cda-key i.is-dashed { border-top-style: dashed; }
.cda-pane .cda-act-facts { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.cda-pane .cda-act-facts:empty { display: none; }

@container da-pane (min-width: 520px) {
    .cda-pane .cda-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* The time series has no timeline under it here: a little shorter than Displacement's. */
.cda-pane #cda-plot-card .da-main-canvas { height: 320px; }

@container da-pane (min-width: 860px) {
    .cda-pane #cda-plot-card .da-main-canvas { height: auto; min-height: 380px; }
    /* CSV / PNG end at the plot column's right edge: side panel (272) + gap (20). */
    .cda-pane #cda-plot-card .da-head-tools { margin-right: 292px; }
}

@container da-pane (max-width: 575.98px) {
    .cda-pane .da-card > .cda-sub { padding-left: 14px; padding-right: 14px; }
    .cda-pane .cda-scale-bar { flex-basis: 96px; }
    .cda-pane .cda-scale-val { flex-basis: 3.5rem; }
    .cda-pane .cda-chart-box { height: 240px; }
    .cda-pane .cda-act-box { height: 220px; }
    .cda-pane #cda-plot-card .da-main-canvas { height: 280px; }
}

/* (i) tips of this pane (Bootstrap tooltips with data-bs-custom-class="cda-tip", placed in
   body): the mock-up's box, with room around the text and the body type size. */
.tooltip.cda-tip { --bs-tooltip-max-width: 280px; --bs-tooltip-opacity: 1; }
.tooltip.cda-tip .tooltip-inner {
    padding: 7px 10px; text-align: left; font-size: 0.8125rem; line-height: 1.45;
    color: var(--bs-body-color); background: var(--dark-card-alt-bg);
    border: 1px solid var(--bs-border-color); border-radius: 6px; box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.35);
}
.tooltip.cda-tip .tooltip-arrow { display: none; }
.tooltip.cda-tip .tooltip-inner:has(.info-tooltip-header) { padding: 0; }
.tooltip.cda-tip .info-tooltip-header { font-size: 0.8125rem; padding: 7px 10px; }
.tooltip.cda-tip .info-tooltip-body { font-size: 0.8125rem; padding: 7px 10px; }

/* Spatial distribution, large view (the dialog sits under <body>, its body carries .cda-pane). */
.cda-map-modal .cda-map-dialog { max-width: min(96vw, 1600px); }
.cda-map-modal .modal-content { background: var(--dark-card-bg); }
.cda-map-modal .modal-header { gap: 12px; }
.cda-map-modal .modal-title { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.cda-map-modal .cda-map-modal-tools { display: flex; gap: 6px; margin-left: auto; }
.cda-map-modal .cda-map-modal-tools + .btn-close { margin-left: 4px; }
.cda-map-modal [hidden] { display: none !important; }

/* Where the Summary's areas come from (point GSD map). */
.cda-area-note {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--clr-text-muted, #6c757d);
}