/* The trend window (js/trend-popup.js): a chart floating over the page, dragged by its title bar
   and resized from its corner. Global rather than scoped CSS, because the script builds the window
   itself and Blazor's scoping never sees it. */

.trend-window {
    position: fixed;
    z-index: 1040;   /* above the title bar (1030), below Bootstrap's modals (1050) */
    display: flex;
    flex-direction: column;
    gap: .5em;
    min-width: 22.5em;
    min-height: 17.5em;
    padding: 0 .9em .75em;
    background: var(--ui-page-background);
    color: var(--ui-page-text);
    border: 1px solid var(--ui-top-bar-border);
    border-radius: .5em;
    box-shadow: 0 .5em 2em rgba(0, 0, 0, .45);
    resize: both;
    overflow: hidden;
}

.trend-window.dragging {
    opacity: .92;
    user-select: none;
}

/* The title bar is the handle. */
.trend-window-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
    margin: 0 -.9em;
    padding: .5em .9em;
    border-bottom: 1px solid var(--ui-top-bar-border);
    background: color-mix(in srgb, var(--ui-page-text) 6%, var(--ui-page-background));
    cursor: move;
    touch-action: none;
}

.trend-window-title {
    font-weight: 600;
}

/* Drawn in the page's text colour, so it shows in both themes. */
.trend-window-close {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.4em;
    line-height: 1;
    padding: 0 .25em;
    border-radius: .17857em;
    cursor: pointer;
}

.trend-window-close:hover {
    background: color-mix(in srgb, var(--ui-page-text) 15%, transparent);
}

/* Every timespan button as wide as the widest label. */
.trend-window-spans {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.trend-window-head .btn.active {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

.trend-window-add {
    max-width: 30em;
}

.trend-window-chart {
    position: relative;
    flex: 1;
    min-height: 0;
}

.trend-window-series {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
}

.trend-window-series:empty {
    display: none;
}

.trend-chip {
    display: inline-flex;
    align-items: center;
    gap: .4878em;
    border: 1px solid var(--chip);
    border-radius: 999px;
    padding: .12195em .2439em .12195em .67073em;
    font-size: .82em;
}

.trend-chip-swatch {
    width: .65em;
    height: .65em;
    border-radius: 50%;
    background: var(--chip);
}

.trend-chip-remove {
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
    font-size: 1.05em;
    padding: 0 .28571em;
    border-radius: 999px;
    cursor: pointer;
}

.trend-chip-remove:hover {
    background: color-mix(in srgb, var(--chip) 30%, transparent);
}

/* Values on the page that can be clicked into the chart look like any other value -- only the
   pointer says they can be clicked -- and those on the chart carry its colour. */
[data-trend-tag] {
    cursor: pointer;
}

/* In the unit diagram the reading takes the chart colour; boxes and tints mean nothing in SVG. */
g.trend-selected text {
    fill: var(--trend-colour, var(--ui-brand));
    font-weight: 700;
}

.trend-selected:not(g):not(tr) {
    box-shadow: inset 3px 0 0 var(--trend-colour, var(--ui-brand));
    background-color: color-mix(in srgb, var(--trend-colour, var(--ui-brand)) 14%, transparent);
}

/* A table row: the tint is painted as an inset shadow on every cell, the way Bootstrap paints its
   stripes and hover, so a striped row shows it as fully as a plain one. */
tr.trend-selected > * {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--trend-colour, var(--ui-brand)) 14%, transparent) !important;
}

tr.trend-selected > :first-child {
    box-shadow: inset 3px 0 0 var(--trend-colour, var(--ui-brand)),
                inset 0 0 0 9999px color-mix(in srgb, var(--trend-colour, var(--ui-brand)) 14%, transparent) !important;
}

/* A reading in a definition list: its name is part of the line, so it is clickable and marked too. */
dt:has(+ dd[data-trend-tag]) {
    cursor: pointer;
}

dt:has(+ dd.trend-selected) {
    box-shadow: inset 3px 0 0 var(--trend-colour-dt, var(--ui-brand));
    background-color: color-mix(in srgb, var(--trend-colour-dt, var(--ui-brand)) 14%, transparent);
}

/* The line's edge is on its name; the value only takes the tint. Specific enough to outrank the
   general .trend-selected rule above. */
dl dd.trend-selected:not(g):not(tr) {
    box-shadow: none;
}