/* Fleet dashboard (src/Modules/Dashboard): layout and widgets only. The frame (.app-page), title bar (.app-page-bar),
   glass cards (.app-card) and all colours are shared with the rest of the app: app-components.css and app-theme.css.
   Charts read the same --app-* colours through ChartTheme.readPalette. */

.dashboard {
    container: dashboard / inline-size;
    color: var(--app-text);
    font-family: var(--es-font-family);
}

.dashboard > .app-page {
    margin: 1rem;
}

/* Tabs and year pills in the title bar */

/* Scrolls sideways when the six tabs don't fit (narrow screens, long translations). */
.dash-tabs {
    display: flex;
    flex: 1 1 auto;
    gap: .25rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.dash-tab {
    flex: none;
    padding: .5rem 1.125rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-topbar-text);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.dash-tab:not(.is-active):hover {
    background: var(--app-pill-bg);
    color: var(--app-topbar-title);
}

.dash-tab.is-active {
    background: var(--app-tab-active-bg);
    color: var(--app-tab-active-text);
    box-shadow: 0 0 18px var(--app-glow);
}

.dash-updated {
    color: var(--app-topbar-text);
    font-size: .6875rem;
    opacity: .85;
}

.dash-years {
    display: flex;
    gap: .375rem;
}

.dash-year {
    padding: .1875rem .625rem;
    border: 1px solid var(--app-pill-border);
    border-radius: 4px;
    background: var(--app-pill-bg);
    color: var(--app-topbar-text);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s, border-color .15s, color .15s;
}

.dash-year:hover {
    border-color: var(--app-pill-active-bg);
}

.dash-year.is-active {
    border-color: var(--app-pill-active-bg);
    background: var(--app-pill-active-bg);
    color: var(--app-pill-active-text);
    font-weight: 600;
    box-shadow: 0 0 12px var(--app-glow);
}

.dash-tab:focus-visible,
.dash-year:focus-visible {
    outline: 2px solid var(--app-accent-1);
    outline-offset: -2px;
}

/* Shown instead of the year pills on tabs that show the current state (Fleet). */
.dash-scope {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .625rem;
    border: 1px solid var(--app-pill-border);
    border-radius: 4px;
    background: var(--app-pill-bg);
    color: var(--app-topbar-text);
    font-size: .75rem;
    white-space: nowrap;
}

/* Grid: 12 columns (tabs combine 3/4/5/6/7/8/12), then two columns, then one */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.dash-grid > * {
    display: block;
    min-width: 0;
}

.dash-col-3 { grid-column: span 3; }
.dash-col-4 { grid-column: span 4; }
.dash-col-5 { grid-column: span 5; }
.dash-col-6 { grid-column: span 6; }
.dash-col-7 { grid-column: span 7; }
.dash-col-8 { grid-column: span 8; }
.dash-col-12 { grid-column: 1 / -1; }

@container dashboard (max-width: 1100px) {
    .dash-grid > * { grid-column: span 6; }
    .dash-grid > .dash-col-8,
    .dash-grid > .dash-col-12,
    .dash-grid > .dash-wide-md { grid-column: 1 / -1; }
}

@container dashboard (max-width: 700px) {
    .dashboard > .app-page { margin: .5rem; }
    .dash-grid { padding: .5rem; gap: .75rem; }
    .dash-grid > * { grid-column: 1 / -1; }
    .dashboard .app-page-end { margin-inline-start: 0; }
}

/* Widget card: an .app-card that fills its grid cell */

dash-card {
    display: block;
    height: 100%;
}

.dash-card {
    height: 100%;
    min-height: 15rem;
    overflow: hidden;
}

/* Charts */

/* Charts are taken out of the flow: a canvas sized from its container must not feed back into the container's
   height, or the grid row grows on every resize. The chart areas below get their size from layout alone. */
e-chart {
    position: absolute;
    inset: 0;
    display: block;
}

.dash-chart {
    width: 100%;
    height: 100%;
}

.dash-donut,
.dash-rings,
.dash-rose,
.dash-radar,
.dash-bars,
.dash-line,
.dash-heatmap {
    position: relative;
}

.dash-heatmap {
    flex: 1 1 auto;
    min-height: 15rem;
}

/* The heatmap's colour scale, next to its title. */
.dash-heat-scale {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-inline-start: auto;
    color: var(--app-muted);
    font-size: .6875rem;
}

.dash-heat-scale-bar {
    width: 4.5rem;
    height: .375rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--app-track), var(--app-accent-3), var(--app-accent-1));
}

[dir=rtl] .dash-heat-scale-bar {
    background: linear-gradient(270deg, var(--app-track), var(--app-accent-3), var(--app-accent-1));
}

.dash-split {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
}

.dash-split-side {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-donut,
.dash-rings {
    flex: 0 0 auto;
    width: 46%;
    max-width: 13.5rem;
    aspect-ratio: 1;
}

.dash-rose {
    flex: 1 1 auto;
    min-height: 9.5rem;
}

.dash-radar,
.dash-bars {
    flex: 1 1 auto;
    min-height: 12rem;
}

.dash-line {
    flex: 1 1 auto;
    min-height: 12.5rem;
}

.dash-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dash-donut-value {
    color: var(--app-text);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dash-donut-value.is-small {
    font-size: 1.125rem;
}

.dash-donut-caption {
    color: var(--app-muted);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Headline figures, rows and legends */

.dash-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: .875rem;
    text-align: end;
}

.dash-headline-label {
    color: var(--app-muted);
    font-size: .75rem;
}

.dash-headline-value {
    color: var(--app-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

.dash-rows,
.dash-legend,
.dash-ranking,
.dash-month-pills {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-rows {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.dash-row,
.dash-legend-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .625rem;
    color: var(--app-muted);
}

.dash-row {
    font-size: .8125rem;
}

.dash-row-icon {
    color: var(--dash-row-color);
    font-size: 1rem;
    filter: drop-shadow(0 0 6px var(--app-glow));
}

[dir=rtl] .dash-row-icon {
    transform: scaleX(-1);
}

.dash-row-value,
.dash-legend-value {
    color: var(--app-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dash-footnote {
    margin: .75rem 0 0;
    color: var(--app-muted);
    font-size: .6875rem;
}

.dash-legend {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

/* Breakdowns with many slices scroll instead of stretching the card. */
.dash-legend.is-scroll {
    max-height: 12rem;
    overflow-y: auto;
    padding-inline-end: .25rem;
}

.dash-legend.is-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem .75rem;
    margin-top: .5rem;
}

.dash-legend-item {
    gap: .5rem;
    font-size: .75rem;
}

.dash-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dash-row-color);
    box-shadow: 0 0 8px var(--dash-row-color);
}

.dash-dot.is-hollow {
    border: 2px solid var(--dash-row-color);
    background: transparent;
}

/* A long legend moves under the title instead of squeezing it. */
.dash-card .app-card-header {
    flex-wrap: wrap;
    row-gap: .25rem;
}

.dash-card .app-card-title {
    flex: 0 0 auto;
    max-width: 100%;
}

.dash-series-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem .75rem;
    margin-inline-start: auto;
    color: var(--app-muted);
    font-size: .6875rem;
}

.dash-series,
.dash-series-name {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

.dash-series-legend.is-figures {
    gap: 1.25rem;
}

.dash-series-legend.is-figures .dash-series {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.dash-series-figure {
    color: var(--app-text);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Top vehicles */

.dash-ranking {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
}

.dash-ranking-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 30%) minmax(0, 1fr) auto;
    align-items: center;
    gap: .625rem;
    font-size: .75rem;
}

.dash-ranking-label {
    overflow: hidden;
    color: var(--app-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-ranking-bars {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.dash-hbar {
    height: .375rem;
    border-radius: 99px;
    background: var(--app-track);
    overflow: hidden;
}

.dash-hbar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-accent-2), var(--app-accent-1));
    box-shadow: 0 0 10px var(--app-glow);
    transition: width .6s ease;
}

.dash-hbar.is-secondary .dash-hbar-fill {
    background: linear-gradient(90deg, var(--app-accent-4), var(--app-accent-3));
    box-shadow: none;
}

[dir=rtl] .dash-hbar-fill {
    background: linear-gradient(270deg, var(--app-accent-2), var(--app-accent-1));
}

[dir=rtl] .dash-hbar.is-secondary .dash-hbar-fill {
    background: linear-gradient(270deg, var(--app-accent-4), var(--app-accent-3));
}

.dash-ranking-value {
    min-width: 4rem;
    color: var(--app-text);
    font-weight: 600;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Rankings with a position number in front. */
.dash-ranking-row.is-numbered {
    grid-template-columns: 1.375rem minmax(4.5rem, 30%) minmax(0, 1fr) auto;
}

.dash-rank {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid var(--app-border);
    border-radius: 50%;
    color: var(--app-muted);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dash-ranking-row.is-numbered:first-child .dash-rank {
    border-color: var(--app-accent-1);
    background: var(--app-accent-1);
    color: var(--app-pill-active-text);
    box-shadow: 0 0 10px var(--app-glow);
}

/* Month pills under the forecast chart */

.dash-month-pills {
    /* Same order as the chart canvas above, which does not mirror in right-to-left layouts. */
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .25rem;
    margin-top: .5rem;
}

.dash-month-pill {
    padding: .1875rem 0;
    overflow: hidden;
    border: 1px solid var(--app-month-pill-border);
    border-radius: 4px;
    background: var(--app-month-pill-bg);
    color: var(--app-muted);
    font-size: .625rem;
    letter-spacing: .03em;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.dash-month-pill.is-basis {
    border-color: var(--app-accent-1);
    background: var(--app-accent-1);
    color: var(--app-pill-active-text);
    font-weight: 600;
    box-shadow: 0 0 10px var(--app-glow);
}

@media (prefers-reduced-motion: reduce) {
    .dash-hbar-fill,
    .dash-year {
        transition: none;
    }
}