/* Halaman Status Armada: KPI statis, tren harian, filter tampilan, sel tabel unit. Hanya memakai token. */
.filters--two { grid-template-columns: 1fr 1fr; }
.filters--two .field:first-child { grid-column: auto; }

/* ---------- Tren harian ---------- */
.trend { display: flex; align-items: flex-end; gap: 2px; height: 7rem; padding: var(--sp-4) var(--sp-4) 0; }
.trend__col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); position: relative; }
.trend__col:hover .trend__track, .trend__col[aria-pressed="true"] .trend__track { outline: 2px solid var(--ink); outline-offset: 1px; }
.trend__col:focus-visible { outline-offset: 2px; }
.trend__track { display: flex; flex-direction: column-reverse; width: 100%; height: 100%; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.trend__track i { display: block; width: 100%; }
.trend__track .t-ok { background: var(--ok); }
.trend__track .t-rep { background: var(--to); }
.trend__track .t-fnd { background: var(--tso); }
.trend__col--empty .trend__track { background: var(--subtle); }
.trend__axis { display: flex; gap: 2px; padding: var(--sp-1) var(--sp-4) var(--sp-3); }
.trend__axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.trend__axis span:not(.is-tick) { visibility: hidden; }
.legend--wide { gap: var(--sp-1) var(--sp-4); }

/* ---------- Filter tampilan tabel: tombol persegi (bukan pil), membungkus rapi di layar sempit ---------- */
.seg-wrap { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg button {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2rem; padding: 0 var(--sp-3);
    border: 1px solid var(--line-control); border-radius: var(--r-md); background: var(--surface); color: var(--muted);
    font-size: var(--fs-base); font-weight: 500; cursor: pointer; transition: background var(--dur), color var(--dur);
}
.seg button:hover { background: var(--subtle); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.seg .seg__n { font-variant-numeric: tabular-nums; opacity: .85; }
@media (pointer: coarse) { .seg button { min-height: 2.75rem; } .unit-link { min-height: 2.75rem; display: inline-flex; align-items: center; } }

/* ---------- Tabel unit ---------- */
.unit-link { padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur); }
.unit-link:hover { text-decoration-color: currentColor; }
.cell-stack { display: block; min-width: 0; }
.cell-note { display: block; max-width: 38rem; overflow-wrap: anywhere; }
.cell-note + .cell-note { margin-top: var(--sp-1); }
.cell-note--finding { color: var(--tso-ink); }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.row-dim .unit-link { color: var(--muted); }
.history-latest { font-weight: 600; }
.nowrap { white-space: nowrap; }