/* =========================================================
   insights.css — Collection/Wantlist Insights Dashboard
   Layout, charts, and slice/row interactivity unique to the
   Lookup insights dashboards. Builds on the shared .rec-* base
   in results.css (Lookup loads both).
   Loaded on: /lookup
   ========================================================= */

#collection-insights-dash,
#wantlist-insights-dash {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#collection-insights-dash .rec-stat-grid {
    margin-bottom: 0; /* Let the container gap handle it */
}

#collection-insights-dash .rec-breakdown,
#wantlist-insights-dash .rec-breakdown {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0;
}

.insights-toggle-title,
.rec-breakdown-title--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.rec-breakdown-title-text { min-width: 0; }

.insights-toggle-switch {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.03em;

    &:hover { color: var(--ink); }
}

.breakdown-expand {
    color: var(--ink-muted);
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.12s ease;

    &:hover { color: var(--ink); }
}

.rec-breakdown-row-extra { display: none; }

.breakdown-expandable.is-expanded .rec-breakdown-row-extra { display: table-row; }

.rec-breakdown-scroll { overflow: hidden; }

.breakdown-expandable.is-expanded .rec-breakdown-scroll {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.insights-pies-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.insights-pies-row > .rec-breakdown-section {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.insights-format-sub {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.insights-format-sub--lower { margin-top: 10px; margin-bottom: 10px; }

/* Genre and Year panels: flex column so the pie can be centered vertically. */
.insights-three-toggle > [data-panel="year"],
.insights-three-toggle > [data-panel="genre"] {
    display: flex;
    flex-direction: column;
}

/* Year panel: keep pie at natural height so tryMerge() measures yPieH accurately.
   JS adds .year-pie-centered (in sizeScroll) when merge is skipped, enabling centering. */
.insights-three-toggle > [data-panel="year"] .rec-pie-wrap {
    flex: none;
}

/* Year panel (non-merged): center pie vertically. */
.insights-three-toggle > [data-panel="year"].year-pie-centered .rec-pie-wrap {
    flex: 1;
}

/* Format Breakdown card: prevent its pie wraps from stretching in the flex-column card. */
.insights-pies-row > .rec-breakdown-section:not(.insights-three-toggle) .rec-pie-wrap {
    flex: none;
}

.insights-three-toggle > [data-panel="year"] .insights-format-sub--lower,
.insights-pies-row > .rec-breakdown-section .insights-format-sub--lower {
    margin-top: auto;
}

.insights-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.insights-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1.6fr) auto;
    align-items: center;
    column-gap: 10px;
    font-size: 13px;
}

.insights-bar-label {
    color: var(--ink);
    white-space: nowrap;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    &::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
}

.insights-bar-track {
    height: 7px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.insights-bar-fill {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
}

.insights-bar-count {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    white-space: nowrap;
}

.insights-pies-row > .insights-three-toggle {
    flex: 3;
    display: grid;
}
.insights-three-toggle > .insights-panel {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
}

.insights-format-panels-wrap {
    display: grid;
    margin-bottom: 10px;
}
.insights-format-panels-wrap > .insights-panel {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
}

.insights-line-graph-svg {
    width: 100%;
    display: block;
}

.insights-line-graph-wrap {
    margin-bottom: 10px;
}

.insights-added-scroll {
    overflow: hidden;
    scrollbar-gutter: stable;
    /* Bound the un-merged table at first paint. The full added-year table is
       rendered server-side with no row cap, so without this it balloons the
       card (and its stretched Format sibling) until sizeScroll() runs on
       DOMContentLoaded. 153px = the fixed graph height; sizeScroll() then
       overrides this inline with the precise slack-based value. */
    max-height: 153px;
}

/* Merged state: graph (flex:1) + slim table side by side */
.insights-added-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.insights-added-body > .insights-line-graph-wrap {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.insights-added-body > .insights-added-scroll {
    flex: none;
    max-height: 153px; /* VH (106) × 13/9: matches fixed graph height */
    overflow-y: auto;
}
.insights-added-body .rec-breakdown-table {
    width: auto;
}
.insights-added-body .rec-sf-name {
    width: auto;
    white-space: nowrap;
}
.insights-added-body .rec-sf-money {
    width: auto;
}
.insights-added-body .rec-breakdown-table td {
    padding-left: 4px;
}

.insights-filter-row {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.12s ease;
    &:hover { background: color-mix(in srgb, var(--rust) 8%, transparent); }
}

.insights-filter-row.insights-filter-active {
    background: color-mix(in srgb, var(--rust) 14%, transparent);
    .rec-sf-name, .rec-pie-name, .insights-bar-label { font-weight: 600; color: var(--rust); }
    .rec-pie-name::after,
    .insights-bar-label::after { background: color-mix(in srgb, var(--rust) 30%, var(--rule)); }
}

.insights-filters-disabled .insights-filter-row {
    cursor: default;
    pointer-events: none;
}

@keyframes insights-filter-flash {
    from { background: color-mix(in srgb, var(--rust) 38%, transparent); }
    to   { background: color-mix(in srgb, var(--rust) 14%, transparent); }
}

.insights-filter-row.insights-filter-flash {
    animation: insights-filter-flash 0.35s ease-out forwards;
}

/* Cross-hover: row or legend item highlighted via JS when its pie slice is hovered */
.insights-filter-row.insights-filter-hover {
    background: color-mix(in srgb, var(--rust) 8%, transparent);
}

/* Pie path interactivity */
.rec-pie-path { transition: opacity 0.12s ease, filter 0.12s ease; }

.rec-pie-path.insights-filter-row { cursor: pointer; }

.rec-pie-path.insights-filter-row:hover,
.rec-pie-path.insights-filter-row.insights-filter-hover {
    stroke-width: 3;
    filter: brightness(1.14);
}

.rec-pie-path.insights-filter-active {
    stroke-width: 4;
    filter: brightness(1.1);
}

/* Dim neighboring slices on hover or when a slice is selected */
.rec-pie-svg:has(.rec-pie-path.insights-filter-row:hover) .rec-pie-path:not(:hover),
.rec-pie-svg:has(.rec-pie-path.insights-filter-hover) .rec-pie-path:not(.insights-filter-hover),
.rec-pie-svg:has(.rec-pie-path.insights-filter-active) .rec-pie-path:not(.insights-filter-active) {
    opacity: 0.45;
}

/* Keep the hovered slice fully opaque even when another slice is selected */
.rec-pie-path.insights-filter-row:hover,
.rec-pie-path.insights-filter-row.insights-filter-hover {
    opacity: 1;
}

@keyframes insights-pie-flash {
    from { filter: brightness(1.5); }
    to   { filter: brightness(1.1); }
}

.rec-pie-path.insights-filter-flash {
    animation: insights-pie-flash 0.35s ease-out forwards;
}

/* Line-graph point interactivity (mirrors pie-slice behavior).
   Focus state is driven by JS (`.is-pt-focused` on the svg, `.is-pt-hover` on the
   hovered point) rather than `:has()`/`<g>:hover`, which behaved inconsistently. */
.insights-line-pt.insights-filter-row { cursor: pointer; }

.insights-line-dot { transition: r 0.12s ease, opacity 0.12s ease, filter 0.12s ease; }
.insights-line-path,
.insights-line-area { transition: opacity 0.12s ease; }

.insights-line-pt.is-pt-hover .insights-line-dot,
.insights-line-pt.insights-filter-hover .insights-line-dot {
    r: 4;
    filter: brightness(1.14);
}

/* Selected point: enlarged with a dark high-contrast ring and a rust glow so it
   reads clearly against the line and the cream background. */
.insights-line-pt.insights-filter-active .insights-line-dot {
    r: 5;
    stroke: var(--rust);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rust) 65%, transparent));
}

/* Dim the rest of the graph (line, area, other dots) while a point is
   hovered/cross-hovered/selected, so only the focused point stands out — same
   intent as the pie's sibling-slice dimming. */
.insights-line-graph-svg.is-pt-focused .insights-line-path { opacity: 0.25; }
.insights-line-graph-svg.is-pt-focused .insights-line-area { opacity: 0.04; }
.insights-line-graph-svg.is-pt-focused .insights-line-dot  { opacity: 0.28; }

/* Keep the focused point(s) fully opaque */
.insights-line-graph-svg.is-pt-focused .insights-line-pt.is-pt-hover .insights-line-dot,
.insights-line-graph-svg.is-pt-focused .insights-line-pt.insights-filter-hover .insights-line-dot,
.insights-line-graph-svg.is-pt-focused .insights-line-pt.insights-filter-active .insights-line-dot {
    opacity: 1;
}

@keyframes insights-line-pt-flash {
    from { filter: brightness(1.6); }
    to   { filter: brightness(1); }
}

.insights-line-pt.insights-filter-flash .insights-line-dot {
    animation: insights-line-pt-flash 0.35s ease-out forwards;
}

@media (max-width: 768px) {
    #collection-insights-dash .rec-breakdown,
    #wantlist-insights-dash .rec-breakdown { grid-template-columns: 1fr; }
    .insights-pies-row { flex-direction: column; align-items: stretch; }
}