/* KPI dashboards (orders production, purchasing): shadcn-style cards inside a page card,
   hairline borders, neutral bold figures, meaning carried by icons and badges. */

.kpi-dash {
    --kpi-border: var(--mud-palette-lines-default);
    --kpi-muted: var(--mud-palette-text-secondary);
    --kpi-fg: var(--mud-palette-text-primary);
    --kpi-subtle: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.kpi-card {
    height: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid var(--kpi-border);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.kpi-card.is-fill { display: flex; flex-direction: column; }

.kpi-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.kpi-card-title { color: var(--kpi-muted); font-size: .82rem; font-weight: 500; }
.kpi-card-title.is-strong { color: var(--kpi-fg); font-weight: 600; }
.kpi-card-desc { margin-top: .1rem; color: var(--kpi-muted); font-size: .75rem; }

.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
}
.kpi-icon .mud-icon-root { font-size: 1.05rem; }
.kpi-icon.is-primary { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.kpi-icon.is-success { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); color: var(--mud-palette-success); }
.kpi-icon.is-warning { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); color: var(--mud-palette-warning); }
.kpi-icon.is-error { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }
.kpi-icon.is-production { background: color-mix(in srgb, #7E57C2 12%, transparent); color: #7E57C2; }

.kpi-value {
    margin-top: .35rem;
    color: var(--kpi-fg);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums lining-nums;
}
.kpi-value small { margin-left: .3rem; color: var(--kpi-muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; }

.kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
    color: var(--kpi-muted);
    font-size: .75rem;
}

.kpi-badge {
    display: inline-flex;
    align-items: center;
    padding: .05rem .45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}
.kpi-badge.is-success, .kpi-badge.is-up { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); color: color-mix(in srgb, var(--mud-palette-success) 75%, black); }
.kpi-badge.is-error, .kpi-badge.is-down { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); color: var(--mud-palette-error); }
.kpi-badge.is-warning { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-warning) 70%, black); }
.kpi-badge.is-production { background: color-mix(in srgb, #7E57C2 12%, transparent); color: #5E35B1; }
.kpi-badge.is-outline { border-color: var(--kpi-border); color: var(--kpi-muted); }
.kpi-badge.is-open { border: 1px dashed var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); color: color-mix(in srgb, var(--mud-palette-primary) 80%, black); }

.kpi-progress {
    height: 6px;
    margin-top: .6rem;
    border-radius: 999px;
    background: var(--kpi-subtle);
    overflow: hidden;
}
.kpi-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--mud-palette-success); }
.kpi-progress.is-production > span { background: #7E57C2; }
.kpi-progress.is-primary > span { background: var(--mud-palette-primary); }

.kpi-switch {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid var(--kpi-border);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}
.kpi-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 .4rem;
    border: 0;
    background: none;
    color: var(--kpi-fg);
    font: inherit;
    cursor: pointer;
}
.kpi-switch button:hover:not(:disabled) { background: var(--kpi-subtle); }
.kpi-switch button:disabled { opacity: .35; cursor: default; }
.kpi-switch button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.kpi-switch-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    border-left: 1px solid var(--kpi-border);
    border-right: 1px solid var(--kpi-border);
    font-size: .85rem;
    font-weight: 600;
}

.kpi-ghost {
    height: 32px;
    padding: 0 .7rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--kpi-fg);
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
}
.kpi-ghost:hover { background: var(--kpi-subtle); }
.kpi-ghost:focus-visible { outline: 2px solid var(--mud-palette-primary); }

.kpi-tabs {
    display: inline-flex;
    height: 32px;
    padding: 3px;
    border-radius: 8px;
    background: var(--kpi-subtle);
}
.kpi-tabs button {
    padding: 0 .75rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--kpi-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
}
.kpi-tabs button.is-active { background: var(--mud-palette-surface); color: var(--kpi-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.kpi-tabs button:focus-visible { outline: 2px solid var(--mud-palette-primary); }

/* Running late: fills the height the chart card beside it sets. */
.kpi-list {
    flex: 1 1 0;
    min-height: 196px;
    margin-top: .5rem;
    overflow-y: auto;
}
@media (max-width: 959.98px) {
    .kpi-list { flex: none; max-height: 280px; }
}
.kpi-late-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 3.4rem 4.6rem;
    gap: .6rem;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--kpi-border);
    font-size: .78rem;
}
.kpi-late-row:last-child { border-bottom: 0; }
.kpi-late-row.is-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 0;
    background: var(--mud-palette-surface);
    color: var(--kpi-muted);
    font-size: .7rem;
    font-weight: 500;
}
.kpi-late-name { overflow: hidden; color: var(--mud-palette-primary); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.kpi-late-name:hover { text-decoration: underline; }
.kpi-late-sub { display: block; overflow: hidden; color: var(--kpi-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.kpi-late-customer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-num { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

.kpi-quarters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--kpi-border);
}
.kpi-quarter-name { color: var(--kpi-muted); font-size: .72rem; }
.kpi-quarter-value { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.kpi-quarter-prev { margin: .1rem 0 .25rem; color: var(--kpi-muted); font-size: .72rem; font-variant-numeric: tabular-nums lining-nums; }

.kpi-top-row {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto;
    column-gap: .5rem;
    align-items: center;
    padding: 6px 0 5px;
    border-bottom: 1px solid var(--kpi-border);
    font-size: .78rem;
}
.kpi-top-row:last-child { border-bottom: 0; }
.kpi-top-rank { color: var(--kpi-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.kpi-top-name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.kpi-top-share {
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 3px;
    color: var(--kpi-muted);
    font-size: .68rem;
}
.kpi-top-track { flex: 1; height: 4px; border-radius: 999px; background: var(--kpi-subtle); overflow: hidden; }
.kpi-top-track > span { display: block; height: 100%; border-radius: 999px; background: var(--mud-palette-primary); }

/* Price changes list (purchasing): item and supplier, old -> new rate, change badge. */
.kpi-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 4.2rem;
    gap: .6rem;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--kpi-border);
    font-size: .78rem;
}
.kpi-price-row:last-child { border-bottom: 0; }
.kpi-price-rates { color: var(--kpi-muted); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.kpi-price-rates b { color: var(--kpi-fg); font-weight: 600; }
.kpi-icon.is-info { background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); color: var(--mud-palette-info); }
.kpi-chart-toggle { height: 28px; }
.kpi-chart-toggle button { padding: 0 .6rem; font-size: .75rem; }