/* VCP dashboard widgets. Colours that carry data are set inline from the reports. */

.vcp-dash {
    --vcp-dash-empty: #e7e5e4;
    --vcp-dash-track: #f0efec;
    --vcp-dash-muted: var(--gray-500);
    --vcp-dash-text: var(--gray-950);
    --vcp-dash-soft: var(--gray-50);
    --vcp-dash-line: var(--gray-200);
    --vcp-dash-bar: #2a78d6;
    --vcp-dash-bar-neutral: #8a8984;
    font-size: 0.875rem;
    color: var(--vcp-dash-text);
}

.dark .vcp-dash {
    --vcp-dash-empty: #3f3f46;
    --vcp-dash-track: #27272a;
    --vcp-dash-muted: var(--gray-400);
    --vcp-dash-text: var(--color-white);
    --vcp-dash-soft: rgb(255 255 255 / 0.04);
    --vcp-dash-line: rgb(255 255 255 / 0.1);
    --vcp-dash-bar: #3987e5;
    --vcp-dash-bar-neutral: #a8a7a1;
}

.vcp-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.vcp-strong { font-weight: 600; }
.vcp-muted { color: var(--vcp-dash-muted); }
.vcp-small { font-size: 0.75rem; }
.vcp-grow { flex: 1 1 auto; min-width: 0; }
.vcp-stack { display: flex; flex-direction: column; gap: 1rem; }
.vcp-scroll { overflow-x: auto; }
.vcp-empty-text { color: var(--vcp-dash-muted); font-size: 0.8125rem; }
.vcp-footnote { color: var(--vcp-dash-muted); font-size: 0.75rem; }
.vcp-link { color: inherit; text-decoration: none; }
.vcp-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.vcp-tone-danger { color: #b42318; }
.vcp-tone-warning { color: #b54708; }
.vcp-tone-muted { color: var(--vcp-dash-muted); }
.dark .vcp-tone-danger { color: #f97066; }
.dark .vcp-tone-warning { color: #fdb022; }

.vcp-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.vcp-swatch-outline { box-shadow: inset 0 0 0 1px var(--vcp-dash-line); }

.vcp-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.vcp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
    font-size: 0.75rem;
    color: var(--vcp-dash-muted);
}

.vcp-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Status timeline */
.vcp-timeline { min-width: 46rem; display: flex; flex-direction: column; gap: 0.25rem; }

.vcp-timeline-row {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem 5.5rem 5.5rem;
    align-items: center;
    gap: 0.875rem;
}

.vcp-timeline-head { font-size: 0.75rem; color: var(--vcp-dash-muted); padding-bottom: 0.125rem; }

.vcp-timeline-node {
    padding: 0.3rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.vcp-timeline-node:hover,
.vcp-timeline-node:focus-visible { background: var(--vcp-dash-soft); }

.vcp-node { display: flex; flex-direction: column; min-width: 0; }
.vcp-node-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcp-node-meta { font-size: 0.6875rem; color: var(--vcp-dash-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vcp-cells {
    display: grid;
    grid-template-columns: repeat(var(--vcp-cols), minmax(0, 1fr));
    gap: 2px;
}

.vcp-cell { height: 1.5rem; border-radius: 3px; }
.vcp-cell:hover { outline: 2px solid var(--vcp-dash-text); outline-offset: 1px; }

.vcp-status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; white-space: nowrap; }

.vcp-axis { position: relative; height: 1rem; font-size: 0.6875rem; color: var(--vcp-dash-muted); }
.vcp-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Distribution */
.vcp-segments { display: flex; gap: 2px; height: 0.875rem; }
.vcp-segments span { min-width: 0.375rem; border-radius: 4px; }

.vcp-list { display: flex; flex-direction: column; gap: 0.625rem; }
.vcp-list-row { display: flex; align-items: center; gap: 0.625rem; }
.vcp-list-note { flex: 0 1 50%; min-width: 0; text-align: right; font-size: 0.75rem; color: var(--vcp-dash-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vcp-divided { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1rem; border-top: 1px solid var(--vcp-dash-line); }
.vcp-subheading { font-size: 0.8125rem; font-weight: 600; }

/* Horizontal bars */
.vcp-bars { display: flex; flex-direction: column; gap: 0.5rem; }

.vcp-bar-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.vcp-bars-wide .vcp-bar-row { grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem 2.5rem; }
.vcp-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcp-bar-track { display: flex; height: 0.625rem; }
.vcp-bar { min-width: 2px; background: var(--vcp-dash-bar); border-radius: 0 4px 4px 0; }
.vcp-bar-neutral { background: var(--vcp-dash-bar-neutral); }

/* Heatmap */
.vcp-heatmap {
    min-width: 38rem;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 3px 0.5rem;
    align-items: center;
}

.vcp-heatmap-label { font-size: 0.75rem; color: var(--vcp-dash-muted); }
.vcp-heatmap-cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.vcp-heatmap-cell { height: 1.375rem; border-radius: 3px; }
.vcp-heatmap-cell:hover { outline: 2px solid var(--vcp-dash-text); outline-offset: 1px; }
.vcp-heatmap-hours span { text-align: center; font-size: 0.6875rem; color: var(--vcp-dash-muted); font-variant-numeric: tabular-nums; }

.vcp-scale { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: var(--vcp-dash-muted); }
.vcp-scale-step { width: 0.875rem; height: 0.75rem; border-radius: 2px; }

/* Incidents */
.vcp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.vcp-tiles > div { padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--vcp-dash-soft); box-shadow: inset 0 0 0 1px var(--vcp-dash-line); }
.vcp-tiles dt { font-size: 0.75rem; color: var(--vcp-dash-muted); }
.vcp-tiles dd { margin-top: 0.125rem; font-size: 1.125rem; font-weight: 700; text-align: left; }

.vcp-events { display: flex; flex-direction: column; }
.vcp-events li { display: grid; grid-template-columns: 0.875rem minmax(0, 1fr); gap: 0.625rem; padding: 0.5rem 0; border-top: 1px solid var(--vcp-dash-line); }
.vcp-event-dot { margin-top: 0.375rem; width: 0.625rem; height: 0.625rem; }
.vcp-event-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; font-size: 0.8125rem; }

/* Range filter sits at the top of the page like a toolbar. */
.fi-page-dashboard .fi-sc-form,
.fi-page-dashboard form[wire\:partial="table-filters-form"] {
    justify-items: start;
}

/* Five KPI tiles share a row: keep values on one line. */
.fi-wi-stats-overview-stat-value {
    font-size: 1.625rem;
    line-height: 2.125rem;
    white-space: nowrap;
}

.fi-wi-stats-overview-stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}