/* Displacement Analytics pane (templates/partials/viewer/_displacement_analytics.html,
   static/js/displacement-analytics.js).

   One type scale: titles 1.0625rem, body and controls 0.9375rem (btn-sm 0.875rem),
   dates and legends 0.875rem; charts draw at 13px.

   The pane sits in the Project Tools drawer, whose width is the content area (viewport
   minus the sidebar), so the layout follows the pane's own width through container
   queries, not viewport media queries. */

.da-pane { container: da-pane / inline-size; min-width: 0; font-size: 0.9375rem; }
/* Bootstrap gives .card / .da-section a display; `hidden` must still win. */
.da-pane [hidden] { display: none !important; }
.da-pane .btn-sm { font-size: 0.875rem; }
/* style.css caps `.card canvas` at 300px; these charts size to their box. */
.da-pane .da-card canvas { max-height: none; }

.da-pane { --da-surface: color-mix(in srgb, var(--dark-panel-bg) 72%, var(--black-color)); }
/* Cards a step darker than the drawer, each header on a gray band. */
.da-pane .da-card {
    min-width: 0; margin-bottom: 1rem; border-radius: 10px;
    background: var(--da-surface); border: 1px solid rgba(var(--white-rgb), 0.07); box-shadow: none;
}
.da-pane .da-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 11px 18px; margin-bottom: 14px;
    /* Same height with or without buttons, so side-by-side bands end on one line. */
    min-height: 54px;
    background: var(--dark-card-alt-bg); border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
    border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.da-pane .da-title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.da-pane .da-body { padding: 0 18px 14px; min-width: 0; }
.da-pane .da-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 18px 14px; }

/* Row of two equal cards */
.da-pane .da-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
.da-pane .da-cards > .da-card { display: flex; flex-direction: column; }

/* Summary */
.da-pane .da-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.da-pane .da-facts > div {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.06);
}
.da-pane .da-facts dt { font-weight: 400; color: var(--bs-secondary-color); }
.da-pane .da-facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.da-pane .da-subsection { border-top: 1px solid rgba(var(--white-rgb), 0.1); padding: 14px 18px 16px; min-width: 0; }
.da-pane .da-subtitle { margin-bottom: 10px; }
.da-pane .da-table-wrap { overflow-x: auto; min-width: 0; }
.da-pane .da-table { --bs-table-bg: transparent; font-size: 0.9375rem; white-space: nowrap; border-collapse: separate; border-spacing: 0; }
.da-pane .da-table th {
    font-weight: 600; color: var(--bs-secondary-color); padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.1); background: rgba(var(--white-rgb), 0.03);
}
.da-pane .da-table th:first-child { border-top-left-radius: 8px; }
.da-pane .da-table th:last-child { border-top-right-radius: 8px; }
.da-pane .da-table td { font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(var(--white-rgb), 0.06); padding: 9px 10px; }
.da-pane .da-table tbody tr:last-child td { border-bottom: 0; }
.da-pane .da-table td.da-total { font-weight: 600; }
.da-pane .da-table tbody tr { cursor: pointer; }
.da-pane .da-table tbody tr:hover td { background: rgba(var(--white-rgb), 0.04); }
.da-pane .da-table tbody tr:focus-visible { outline: 2px solid var(--bs-body-color); outline-offset: -2px; }
.da-pane .da-table tbody tr.is-off td { color: var(--bs-secondary-color); }
.da-pane .da-table tbody tr.is-static { cursor: default; }
.da-pane .da-area { display: inline-flex; align-items: center; gap: 10px; }
/* Filled dot = shown in the time series, hollow ring = hidden. */
.da-pane .da-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--dot); box-shadow: inset 0 0 0 2px var(--dot); }
.da-pane .da-table tbody tr.is-off .da-dot { background: transparent; }

/* Distributions */
.da-pane .da-dist-body { flex: 1 1 auto; display: flex; padding-top: 0; }
.da-pane .da-dist-canvas { position: relative; flex: 1 1 auto; min-height: 320px; }
.da-pane .da-fill { position: absolute; inset: 0; }
.da-pane .da-plot-tools { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.da-pane .da-plot-tools > * { pointer-events: auto; }
.da-pane .da-empty-note {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 1rem; text-align: center; color: var(--bs-secondary-color);
}

/* Time series */
.da-pane .da-quick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.da-pane .da-quick .timeline-quick-btn { font-size: 0.875rem; padding: 3px 12px; }
.da-pane .da-head-tools { display: flex; gap: 8px; margin-left: auto; }
.da-pane .da-plot { display: flex; flex-direction: column; gap: 20px; padding: 0 18px 16px; min-width: 0; }
.da-pane .da-plot-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Below the side-panel breakpoint the chart has a fixed height; beside the panel it
   grows to the panel's height. The absolute .da-fill keeps Chart.js from feeding back. */
.da-pane .da-main-canvas { position: relative; flex: 0 0 auto; height: 360px; }
/* Drag to zoom; vertical page scroll still works on touch. */
.da-pane #da-main-chart { touch-action: pan-y; }

.da-pane .da-timeline { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.da-pane .da-tl-date {
    /* Fixed width: a box that grew with its text ("1 May" vs "30 Sept") would move
       the track under the pointer while a handle is dragged. */
    flex: 0 0 auto; width: 8rem; white-space: nowrap; text-align: center; font-size: 0.875rem; line-height: 1.4;
    padding: 2px 6px 2px 8px; border-radius: 0; font-variant-numeric: tabular-nums; color: var(--bs-body-color);
    background: rgba(var(--brand-secondary-rgb), 0.08); border: 1px solid rgba(var(--brand-secondary-rgb), 0.35);
    transition: background-color 0.15s, border-color 0.15s;
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit;
}
.da-pane .da-tl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.da-pane .da-tl-date .bi { flex: 0 0 auto; font-size: 0.7rem; color: var(--secondary-color); transition: transform 0.15s; }
.da-pane .da-tl-date:hover { background: rgba(var(--brand-secondary-rgb), 0.16); border-color: rgba(var(--brand-secondary-rgb), 0.6); }
.da-pane .da-tl-date:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 1px; }
.da-pane .da-tl-date[aria-expanded="true"] { border-color: var(--secondary-color); }
.da-pane .da-tl-date[aria-expanded="true"] .bi { transform: rotate(180deg); }
/* The date of the handle being dragged lights up. */
.da-pane .da-tl-date.is-live {
    background: rgba(var(--brand-secondary-rgb), 0.28); border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-secondary-rgb), 0.15);
}
.da-pane .da-tl-track { position: relative; flex: 1 1 auto; min-width: 0; padding: 12px 6px; }
/* Same look as the time-series modal slider (#ts-time-slider in style.css), no ticks.
   .da-tl-slider: the same slider in the Change Detection pane (cd-analytics.css). */
.da-pane #da-tl-slider.noUi-target,
.da-pane .da-tl-slider.noUi-target { height: 6px; border: none; border-radius: 3px; background: rgba(var(--clr-text-muted-rgb), 0.45); box-shadow: none; }
.da-pane #da-tl-slider .noUi-connect,
.da-pane .da-tl-slider .noUi-connect { background: rgba(var(--brand-secondary-rgb), 0.45); }
.da-pane #da-tl-slider .noUi-handle,
.da-pane .da-tl-slider .noUi-handle {
    height: 26px; width: 3px; top: -10px; right: -1.5px; background: var(--secondary-color);
    border: none; border-radius: 1px; box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.4); cursor: ew-resize;
}
.da-pane #da-tl-slider .noUi-handle:hover,
.da-pane .da-tl-slider .noUi-handle:hover { background: var(--interactive-teal); width: 4px; right: -2px; }
.da-pane #da-tl-slider .noUi-handle:active,
.da-pane .da-tl-slider .noUi-handle:active { background: var(--interactive-teal-active); width: 5px; right: -2.5px; }
.da-pane #da-tl-slider .noUi-handle::before,
.da-pane #da-tl-slider .noUi-handle::after,
.da-pane .da-tl-slider .noUi-handle::before,
.da-pane .da-tl-slider .noUi-handle::after { display: none; }
.da-pane #da-tl-slider .noUi-handle .noUi-touch-area,
.da-pane .da-tl-slider .noUi-handle .noUi-touch-area { width: 20px; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

/* Side panel: below the chart on a narrow pane, its sections side by side. */
.da-pane .da-side {
    min-width: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px;
    border-top: 1px solid var(--bs-border-color); padding-top: 16px;
}
.da-pane .da-section { flex: 1 1 220px; min-width: 0; }
.da-pane .da-section-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 10px; }
.da-pane .da-section .btn-group .btn { flex: 1 1 0; }
.da-pane .da-opt { display: flex; align-items: center; gap: 10px; padding: 4px 0; user-select: none; margin: 0; }
.da-pane .da-opt input { margin: 0; flex: 0 0 auto; cursor: pointer; }
.da-pane .da-opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.da-pane .da-opt.is-disabled { color: var(--bs-secondary-color); }
.da-pane .da-opt.is-disabled .da-opt-name,
.da-pane .da-opt.is-disabled input { cursor: not-allowed; }
.da-pane #da-weather-list .da-opt-name { flex: 0 1 auto; }
.da-pane .da-info { color: var(--bs-secondary-color); cursor: help; line-height: 1; }
.da-pane .da-info:hover,
.da-pane .da-info:focus-visible { color: var(--clr-accent); outline: none; }
.da-pane .da-swatch-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 4px; border-radius: 6px;
    background: rgba(var(--white-rgb), 0.04); border: 1px solid rgba(var(--white-rgb), 0.12); color: var(--bs-secondary-color);
}
.da-pane .da-swatch-btn:hover,
.da-pane .da-swatch-btn:focus-visible { border-color: rgba(var(--white-rgb), 0.35); color: var(--bs-body-color); }
.da-pane .da-swatch-btn .bi { font-size: 0.7rem; }
.da-pane .da-swatch { display: block; width: 22px; height: 12px; border-radius: 3px; background: var(--dot); }
.da-pane .da-location {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: rgba(var(--white-rgb), 0.04); border: 1px solid rgba(var(--white-rgb), 0.08); color: var(--bs-secondary-color);
}
.da-pane .da-location:empty { display: none; }
.da-pane .da-location.is-empty {
    margin-top: 0; background: rgba(var(--clr-action-rgb), 0.1);
    border-color: rgba(var(--clr-action-rgb), 0.35); color: var(--bs-body-color);
}
.da-pane .da-location-icon { color: var(--clr-accent); font-size: 1rem; line-height: 1.3; }
.da-pane .da-location-at { display: block; }
.da-pane .da-location-coords { display: block; color: var(--bs-body-color); font-weight: 600; font-variant-numeric: tabular-nums; }
.da-pane .da-location-link { color: var(--clr-accent); text-decoration: none; font-size: inherit; vertical-align: baseline; }
.da-pane .da-location-link:hover { color: var(--clr-accent); text-decoration: underline; }
.da-pane .da-location .btn-primary { display: block; margin-top: 8px; }
.da-pane .da-location .site-coords-empty-message:empty { display: none; }

/* Activity */
.da-pane .da-activity-wrap { overflow-x: auto; min-width: 0; padding-bottom: 4px; }
.da-pane .da-activity { display: grid; gap: 3px; align-items: center; min-width: max-content; }
.da-pane .da-act-label {
    display: flex; align-items: center; gap: 8px; padding-right: 14px; white-space: nowrap;
    position: sticky; left: 0; z-index: 1; align-self: stretch;
    background: var(--da-surface);
}
.da-pane .da-act-cell { height: 26px; border-radius: 3px; cursor: pointer; border: 0; padding: 0; background: rgba(var(--ramp), var(--a)); }
.da-pane .da-act-cell:hover,
.da-pane .da-act-cell:focus-visible { outline: 2px solid var(--bs-body-color); outline-offset: -2px; }
.da-pane .da-act-cell.is-empty { background: transparent; border: 1px dashed rgba(var(--white-rgb), 0.22); }
.da-pane .da-act-tick { font-size: 0.875rem; color: var(--bs-secondary-color); white-space: nowrap; height: 20px; overflow: visible; }
.da-pane .da-activity-legend { font-size: 0.875rem; color: var(--bs-secondary-color); gap: 10px 32px; justify-content: center; }
.da-pane .da-legend-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.da-pane .da-heat-val { font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.da-pane .da-heatbar { display: inline-flex; width: 140px; height: 12px; border-radius: 6px; overflow: hidden; }
.da-pane .da-heatbar span { flex: 1 1 0; background: rgba(var(--ramp), var(--a)); }
.da-pane .da-legend-swatch { display: inline-block; width: 18px; height: 14px; cursor: default; }

/* Body-level popovers (outside the pane so no card can clip them). */
.da-colors {
    position: fixed; z-index: 2000; display: grid; grid-template-columns: repeat(4, 28px); gap: 8px; padding: 10px;
    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.4);
}
.da-colors[hidden] { display: none; }
.da-colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; background: var(--dot); }
.da-colors button.is-current,
.da-colors button:hover,
.da-colors button:focus-visible { border-color: var(--bs-body-color); outline: none; }
.da-days {
    position: fixed; z-index: 2000; max-height: 280px; overflow-y: auto; padding: 4px 0; margin: 0; list-style: none;
    background: var(--dark-card-alt-bg); border: 1px solid rgba(var(--brand-secondary-rgb), 0.6); border-radius: 0;
    box-shadow: 0 6px 20px rgba(var(--black-rgb), 0.4); font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.da-days[hidden] { display: none; }
.da-days li { padding: 4px 12px; white-space: nowrap; text-align: center; cursor: pointer; color: var(--bs-body-color); }
.da-days li:hover,
.da-days li:focus-visible { background: rgba(var(--brand-secondary-rgb), 0.16); outline: none; }
.da-days li.is-current { background: rgba(var(--brand-secondary-rgb), 0.28); color: var(--secondary-color); }
.da-tooltip {
    position: fixed; z-index: 2001; pointer-events: none; max-width: 280px;
    background: var(--dark-card-alt-bg); border: 1px solid var(--bs-border-color); border-radius: 6px;
    padding: 6px 10px; font-size: 0.875rem; box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.35);
}
.da-tooltip[hidden] { display: none; }

/* Wide pane: cards side by side, side panel right of the chart. */
@container da-pane (min-width: 860px) {
    .da-pane .da-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .da-pane .da-plot { flex-direction: row; }
    .da-pane .da-main-canvas { flex: 1 1 auto; height: auto; min-height: 460px; }
    .da-pane .da-side {
        flex: 0 0 272px; width: 272px; flex-direction: column; flex-wrap: nowrap;
        border-top: 0; padding-top: 0; border-left: 1px solid var(--bs-border-color); padding-left: 20px;
    }
    .da-pane .da-section { flex: 0 0 auto; }
    .da-pane .da-section + .da-section { border-top: 1px solid rgba(var(--white-rgb), 0.1); padding-top: 18px; }
    /* CSV / PNG end at the plot column's right edge: side panel (272) + gap (20). */
    .da-pane #da-plot-card .da-head-tools { margin-right: 292px; }
}

/* Phone-width pane */
@container da-pane (max-width: 575.98px) {
    .da-pane .da-head { padding: 10px 14px; }
    .da-pane .da-body,
    .da-pane .da-foot { padding-left: 14px; padding-right: 14px; }
    .da-pane .da-subsection { padding-left: 14px; padding-right: 14px; }
    .da-pane .da-plot { padding: 0 14px 14px; }
    .da-pane .da-facts { grid-template-columns: minmax(0, 1fr); }
    .da-pane .da-main-canvas { height: 300px; }
    .da-pane .da-dist-canvas { min-height: 300px; }
    /* Dates on one line, the track full width under them. */
    .da-pane .da-timeline { flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
    .da-pane .da-tl-track { order: 3; flex-basis: 100%; }
    .da-pane .da-heatbar { width: 84px; }
    .da-pane .da-activity-legend { gap: 8px 16px; }
}