/*
 * Workshop pilot pages (Pages/Workshop/Kpis). Colors come only from theme-tokens.css and the MudBlazor palette, so the
 * dark mode follows on its own. Charts are Syncfusion and bars MudProgressLinear: nothing here draws data.
 */

.kpi-card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.kpi-card.kpi-tile {
    padding: 18px 20px;
    gap: 12px;
}

.kpi-card.kpi-dashed {
    border: 2px dashed var(--tint-blue-fg);
    background-color: var(--tint-blue-bg);
}

.kpi-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tint-purple-fg);
}

.kpi-h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.kpi-h2.kpi-h2-lg {
    font-size: 1.125rem;
}

.kpi-h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.kpi-why,
.kpi-muted {
    color: var(--mud-palette-text-secondary);
}

.kpi-why {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.kpi-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.kpi-big {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi-mid {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kpi-num {
    font-variant-numeric: tabular-nums;
}

.kpi-headline {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    font-weight: 400;
    text-wrap: pretty;
    max-width: 1180px;
}

.kpi-headline strong {
    font-weight: 700;
}

.kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.kpi-good { background-color: var(--tint-green-bg); color: var(--tint-green-fg); }
.kpi-risk { background-color: var(--tint-gold-bg); color: var(--tint-gold-fg); }
.kpi-late { background-color: var(--tint-red-bg); color: var(--tint-red-fg); }
.kpi-info { background-color: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.kpi-new { background-color: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.kpi-neutral { background-color: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }

.kpi-text-risk { color: var(--tint-gold-fg); }
.kpi-text-good { color: var(--tint-green-fg); }
.kpi-text-late { color: var(--tint-red-fg); }

.kpi-grid {
    display: grid;
    gap: 20px;
}

.kpi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-grid-wide-left { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }

.wk-row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--card-border);
}

.wk-row:first-child {
    border-top: 0;
}

.wk-row-head {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.kpi-bar {
    display: grid;
    grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) minmax(90px, auto);
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
}

.kpi-bar-label {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kpi-note {
    padding: 12px 16px;
    border-radius: 10px;
    background-color: var(--tint-neutral-bg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.kpi-flow-step {
    padding: 16px;
    border-radius: 12px;
    background-color: var(--tint-neutral-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-flow-step.kpi-flow-main { background-color: var(--tint-purple-bg); }
.kpi-flow-step.kpi-flow-done { background-color: var(--tint-green-bg); }

.kpi-link {
    font-weight: 600;
    color: var(--tint-purple-fg);
    text-decoration: none;
}

.kpi-link:hover {
    text-decoration: underline;
}

.kpi-empty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    padding: 8px 0;
}

.kpi-dot {
    justify-self: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--tint-purple-fg);
}

@media (max-width: 1100px) {
    .kpi-grid-5,
    .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-grid-wide-left { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .kpi-grid-2,
    .kpi-grid-3,
    .kpi-grid-4,
    .kpi-grid-5,
    .kpi-grid-6 { grid-template-columns: minmax(0, 1fr); }

    .kpi-card { padding: 18px 16px; }

    .wk-row { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }

}

/* The "?" of a figure: small, next to its name, never pushing the layout. */
.kpi-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-help-button.mud-icon-button {
    padding: 2px;
}

.kpi-help-text {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* The "?" window of a figure: a 17px title next to its badge, three parts under small muted headings. */
.kpi-help-title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.kpi-help-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 8px;
}

.kpi-help-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* The bars under the one to look at first: a mid purple that reads on white and on the dark surface alike. */
:root { --kpi-bar-soft: #8b76e6; }
html.theme-dark { --kpi-bar-soft: #9d8cef; }

.kpi-bar-soft .mud-progress-linear-bar {
    background-color: var(--kpi-bar-soft) !important;
}

/* ---- Workshop pilot mockup (validated 2026-10-02) ---- */

.kpi-card.kpi-headline-card {
    padding: 20px 28px;
    gap: 10px;
}

.kpi-headline-head,
.kpi-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.kpi-headline-head {
    align-items: center;
}

.kpi-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kpi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* A card whose table runs to its edges: the head keeps the card padding, the rows carry their own. */
.kpi-card.kpi-flush {
    padding: 0;
    gap: 12px;
    overflow: hidden;
}

.kpi-flush > .kpi-card-head {
    padding: 20px 20px 4px;
}

.kpi-inset {
    padding: 0 20px 16px;
}

.kpi-today-row {
    grid-template-columns: 120px 130px minmax(0, 1fr) 150px;
    padding: 12px 20px;
}

.kpi-today .wk-row-head {
    background-color: var(--tint-neutral-bg);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
}

.kpi-end {
    justify-self: end;
    text-align: end;
}

/* A theme card of the overview: its sentence, three facts over a rule, the link to the tab. */
.kpi-theme-sentence {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
}

.kpi-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid var(--card-border);
    padding-top: 14px;
}

.kpi-facts .kpi-mid {
    font-size: 1rem;
    font-weight: 700;
}

.kpi-more {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 700;
}

.kpi-more::after {
    content: " \203A";
}

[dir="rtl"] .kpi-more::after {
    content: " \2039";
}

/* A figure of a band (PilotTile): badge and chip on top, the name with its "?", the value and its move. */
.kpi-stat {
    gap: 8px;
}

.kpi-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.kpi-stat-value-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.kpi-stat-hint {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 760px) {
    .kpi-card-head,
    .kpi-headline-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-today-row {
        padding: 10px 16px;
    }

    .kpi-today .wk-row-head {
        display: none;
    }

    .kpi-end {
        justify-self: start;
        text-align: start;
    }
}