/* ==========================================================================
   KSM168 Electrical — komponen (BEM-ish). Bergantung pada tokens.css + base.css.
   Keadaan: kelas is-* (is-open, is-loading, is-selected, …) atau atribut ARIA.
   Tingkat nilai: data-sev="none|normal|attention|critical".
   Status node: data-status="pending|partial|done|finding|missed|no_form|inactive|…".
   Dokumentasi & contoh markup: devneeds/FRONTEND.md
   ========================================================================== */

/* ==========================================================================
   1. Tombol
   ========================================================================== */
.btn {
  --btn-bg: var(--surface);
  --btn-bg-hover: var(--surface-2);
  --btn-bg-active: var(--surface-3);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-border-hover: var(--border-control);
  --btn-font: var(--text-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: 0;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--btn-font);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

:root[data-ui="mobile"] .btn,
:root[data-ui="easy"] .btn {
  --btn-font: var(--text-md);
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg);
  text-decoration: none;
}

.btn:active {
  background: var(--btn-bg-active);
}

.btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-bg-active: var(--accent-active);
  --btn-fg: var(--accent-fg);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  box-shadow: var(--shadow-xs);
}

.btn--secondary {
  --btn-bg: var(--surface);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--surface-3);
  --btn-bg-active: var(--surface-3);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn--danger {
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--danger-hover);
  --btn-bg-active: var(--danger-active);
  --btn-fg: var(--danger-fg);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn--danger-ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--status-crit-bg);
  --btn-bg-active: var(--status-crit-bg);
  --btn-fg: var(--status-crit-fg);
  --btn-border: transparent;
  --btn-border-hover: var(--status-crit-border);
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  gap: var(--space-1-5);
  --btn-font: var(--text-sm);
}

.btn--sm .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.btn--lg {
  min-height: var(--control-h-lg);
  padding: 0 var(--space-6);
  --btn-font: var(--text-md);
}

.btn--icon {
  width: var(--control-h);
  padding: 0;
  flex: none;
}

.btn--icon.btn--sm {
  width: var(--control-h-sm);
}

.btn--icon.btn--lg {
  width: var(--control-h-lg);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  box-shadow: none;
}

.btn:disabled {
  pointer-events: none;
}

/* Tombol nonaktif yang menampilkan hitung mundur ("Coba lagi dalam 14:58") harus tetap
   terbaca: tanpa opacity 50%, warna netral dengan kontras AA. */
.btn[data-countdown]:disabled {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text-muted);
  --btn-border: var(--border-strong);
  opacity: 1;
}

.btn.is-loading,
.btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading > *,
.btn[aria-busy="true"] > * {
  visibility: hidden;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: auto;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: ksm-spin 0.7s linear infinite;
}

.btn-group {
  display: inline-flex;
  align-items: stretch;
}

.btn-group > .btn {
  border-radius: 0;
}

.btn-group > .btn + .btn {
  margin-left: calc(var(--border-width) * -1);
}

.btn-group > .btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.btn-group > .btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.btn-group > .btn:focus-visible {
  z-index: 1;
}

/* Tautan berbentuk teks */
.link-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

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

/* ==========================================================================
   2. Input, select, textarea, input-group (satuan / ikon / tombol)
   ========================================================================== */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--input-font);
  line-height: var(--leading-tight);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-hover);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: var(--focus-halo);
}

.textarea {
  min-height: 6rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
}

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}

.select[multiple],
.select[size] {
  padding: var(--space-1);
  background-image: none;
}

.input--sm,
.select--sm {
  min-height: var(--control-h-sm);
}

.input--lg,
.select--lg {
  min-height: var(--control-h-lg);
}

.input--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.input[readonly],
.textarea[readonly] {
  background-color: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border-strong);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  cursor: not-allowed;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--status-crit-solid);
}

.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--status-crit-border);
}

/* Grup pilihan tidak valid: [role="radiogroup"][aria-invalid="true"] pada atau di atas
   .segmented / .option-list / .choice-card (mis. fieldset form renderer). */
.segmented[aria-invalid="true"],
[role="radiogroup"][aria-invalid="true"] .segmented {
  border-color: var(--status-crit-solid);
  box-shadow: 0 0 0 1px var(--status-crit-solid);
}

.option-list[aria-invalid="true"] .option-row__input:not(:checked) ~ .option-row__body,
[role="radiogroup"][aria-invalid="true"] .option-row__input:not(:checked) ~ .option-row__body,
[role="radiogroup"][aria-invalid="true"] .choice-card__input:not(:checked) + .choice-card__body {
  border-color: var(--status-crit-solid);
}

/* Input-group: kotak bertepi yang memuat input tanpa tepi + satuan/ikon/tombol. */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.input-group:hover {
  border-color: var(--border-hover);
}

.input-group:focus-within {
  border-color: var(--accent-border);
  box-shadow: var(--focus-halo);
}

.input-group__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: var(--input-font);
}

.input-group__input:focus,
.input-group__input:focus-visible {
  outline: none;
}

.input-group__icon {
  flex: none;
  margin-left: var(--space-3);
  color: var(--text-subtle);
}

.input-group__icon + .input-group__input {
  padding-left: var(--space-2);
}

.input-group__unit,
.input-group__addon {
  flex: none;
  padding: 0 var(--space-3) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.input-group__addon--start {
  padding: 0 var(--space-1) 0 var(--space-3);
}

.input-group__btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 1px);
  background: transparent;
  color: var(--text-muted);
}

.input-group__btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.input-group__btn:focus-visible {
  outline-offset: -2px;
}

.input-group__input:placeholder-shown ~ [data-clear] {
  display: none;
}

.input-group--num .input-group__input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.input-group--sm .input-group__input {
  height: var(--control-h-sm);
}

.input-group--sm .input-group__btn {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
}

.input-group.is-disabled,
.input-group:has(.input-group__input:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.input-group.is-invalid {
  border-color: var(--status-crit-solid);
}

/* Pencarian: input-group dengan ikon kaca pembesar + tombol hapus */
.search .input-group__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* ==========================================================================
   3. Field (label, bantuan, galat, tingkat nilai)
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
}

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

:root[data-ui="mobile"] .field__label,
:root[data-ui="easy"] .field__label {
  font-size: var(--text-md);
}

.field__unit {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.field__req {
  margin-left: 0.15em;
  color: var(--status-crit-fg);
  font-weight: var(--weight-bold);
}

.field__aside {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.field__control {
  min-width: 0;
}

/* Jangkar/fokus ke isian menyisakan ruang untuk label di atasnya (di bawah header lengket). */
.field :is(input, select, textarea) {
  scroll-margin-top: var(--space-8);
}

.field__help {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.field__msg,
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.field__msg .icon,
.field__error .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.05rem;
}

.field__msg {
  color: var(--status-info-fg);
}

.field__msg[data-sev="normal"] {
  color: var(--status-ok-fg);
}

.field__msg[data-sev="attention"] {
  color: var(--status-warn-fg);
}

.field__msg[data-sev="critical"] {
  color: var(--status-crit-fg);
}

.field__msg[data-sev="none"] {
  color: var(--text-muted);
}

.field__error {
  color: var(--status-crit-fg);
}

/* Tingkat nilai pada kontrol tunggal (bukan grup fase; fase punya data-sev sendiri). */
.field[data-sev="attention"] > .field__control > :is(.input, .select, .textarea, .input-group),
.input-group[data-sev="attention"],
.input[data-sev="attention"] {
  border-color: var(--status-warn-solid);
  background-color: var(--status-warn-bg);
  box-shadow: inset 0 0 0 1px var(--status-warn-solid);
}

.field[data-sev="critical"] > .field__control > :is(.input, .select, .textarea, .input-group),
.input-group[data-sev="critical"],
.input[data-sev="critical"] {
  border-color: var(--status-crit-solid);
  background-color: var(--status-crit-bg);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

.field[data-sev="attention"] > .field__control > :is(.input, .input-group):focus-within,
.input-group[data-sev="attention"]:focus-within {
  box-shadow: inset 0 0 0 1px var(--status-warn-solid), var(--focus-halo);
}

.field[data-sev="critical"] > .field__control > :is(.input, .input-group):focus-within,
.input-group[data-sev="critical"]:focus-within {
  box-shadow: inset 0 0 0 1px var(--status-crit-solid), var(--focus-halo);
}

.field.is-invalid > .field__control > :is(.input, .select, .textarea, .input-group),
.field[data-invalid] > .field__control > :is(.input, .select, .textarea, .input-group) {
  border-color: var(--status-crit-solid);
}

.field__sev-icon {
  flex: none;
  margin-right: var(--space-2);
}

.input-group[data-sev="attention"] .input-group__unit,
.phase[data-sev="attention"] .input-group__unit {
  color: var(--status-warn-fg);
}

.input-group[data-sev="critical"] .input-group__unit,
.phase[data-sev="critical"] .input-group__unit {
  color: var(--status-crit-fg);
}

/* Field horizontal (form admin lebar) */
@media (min-width: 768px) {
  .field--inline {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-6);
  }

  .field--inline > .field__head {
    padding-top: calc((var(--control-h) - 1.25rem) / 2);
  }

  .field--inline > :not(.field__head) {
    grid-column: 2;
  }
}

/* Kelompok form */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-section + .form-section {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.form-section__title {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid .span-all {
    grid-column: 1 / -1;
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ==========================================================================
   4. Grup fase (RS/ST/TR) — kolom sama lebar, > 100px di layar 360px
   ========================================================================== */
.phase-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.phase {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.phase__label {
  padding-left: var(--space-0-5);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
}

.phase .input-group__input {
  padding: 0 var(--space-1) 0 var(--space-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.phase .input-group__unit {
  padding: 0 var(--space-2) 0 var(--space-1);
}

.phase[data-sev="attention"] .phase__label {
  color: var(--status-warn-fg);
}

.phase[data-sev="critical"] .phase__label {
  color: var(--status-crit-fg);
}

.phase[data-sev="attention"] .input-group {
  border-color: var(--status-warn-solid);
  background-color: var(--status-warn-bg);
  box-shadow: inset 0 0 0 1px var(--status-warn-solid);
}

.phase[data-sev="critical"] .input-group {
  border-color: var(--status-crit-solid);
  background-color: var(--status-crit-bg);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

.phase[data-sev="attention"] .phase__label::after,
.phase[data-sev="critical"] .phase__label::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.3rem;
  vertical-align: 0.05rem;
  background: currentColor;
}

.phase[data-sev="attention"] .phase__label::after {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.phase[data-sev="critical"] .phase__label::after {
  border-radius: 1px;
  transform: rotate(45deg) scale(0.85);
}

/* ==========================================================================
   5. Segmented control (pilihan besar)
   ========================================================================== */
.segmented {
  --seg-pad: 3px;
  display: flex;
  gap: var(--seg-pad);
  min-width: 0;
  padding: var(--seg-pad);
  border: var(--border-width) solid var(--border);
  border-radius: calc(var(--radius) + var(--seg-pad));
  background: var(--surface-3);
}

.segmented--inline {
  display: inline-flex;
}

.segmented__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.segmented--inline .segmented__item {
  flex: 0 0 auto;
}

.segmented__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__input:disabled {
  cursor: not-allowed;
}

.segmented__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-width: 0;
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

:root[data-ui="mobile"] .segmented__label,
:root[data-ui="easy"] .segmented__label {
  font-size: var(--text-md);
}

.segmented__label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented__item:hover .segmented__input:not(:checked):not(:disabled) + .segmented__label {
  background: var(--surface);
  color: var(--text);
}

.segmented__input:checked + .segmented__label {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}

.segmented__item[data-sev="attention"] .segmented__input:checked + .segmented__label {
  border-color: var(--status-warn-solid);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.segmented__item[data-sev="critical"] .segmented__input:checked + .segmented__label {
  border-color: var(--status-crit-solid);
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.segmented__input:focus-visible + .segmented__label {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}

.segmented__input:disabled + .segmented__label {
  opacity: 0.5;
}

.segmented--lg .segmented__label {
  min-height: var(--control-h-lg);
  font-size: var(--text-md);
}

.segmented--sm .segmented__label {
  min-height: var(--control-h-sm);
  font-size: var(--text-sm);
}

.segmented--icons .segmented__label {
  padding: var(--space-1) var(--space-2);
}

/* ==========================================================================
   6. Daftar opsi selebar layar (radio baris, mis. Comp Status di Mobile UI)
   ========================================================================== */
.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.option-row {
  position: relative;
  display: flex;
  min-width: 0;
}

.option-row__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option-row__body {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.option-row__radio {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-control);
  border-radius: 50%;
  background: var(--surface);
}

.option-row--check .option-row__radio {
  border-radius: var(--radius-xs);
}

.option-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.option-row__title {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.option-row__desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.option-row__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.option-row:hover .option-row__input:not(:checked):not(:disabled) ~ .option-row__body {
  border-color: var(--border-hover);
  background: var(--surface-2);
}

.option-row__input:checked ~ .option-row__body {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.option-row__input:checked ~ .option-row__body .option-row__radio {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.option-row--check .option-row__input:checked ~ .option-row__body .option-row__radio {
  box-shadow: none;
}

.option-row--check .option-row__input:checked ~ .option-row__body .option-row__radio::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.1rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--accent-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.option-row__input:checked ~ .option-row__body .option-row__title {
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.option-row[data-sev="attention"] .option-row__input:checked ~ .option-row__body {
  border-color: var(--status-warn-solid);
  background: var(--status-warn-bg);
  box-shadow: inset 0 0 0 1px var(--status-warn-solid);
}

.option-row[data-sev="critical"] .option-row__input:checked ~ .option-row__body {
  border-color: var(--status-crit-solid);
  background: var(--status-crit-bg);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

.option-row[data-sev="attention"] .option-row__input:checked ~ .option-row__body .option-row__title {
  color: var(--status-warn-fg);
}

.option-row[data-sev="critical"] .option-row__input:checked ~ .option-row__body .option-row__title {
  color: var(--status-crit-fg);
}

.option-row[data-sev="attention"] .option-row__input:checked ~ .option-row__body .option-row__radio {
  border-color: var(--status-warn-solid);
  background: var(--status-warn-solid);
}

.option-row[data-sev="critical"] .option-row__input:checked ~ .option-row__body .option-row__radio {
  border-color: var(--status-crit-solid);
  background: var(--status-crit-solid);
}

.option-row__input:focus-visible ~ .option-row__body {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.option-row__input:disabled ~ .option-row__body {
  opacity: 0.5;
}

/* ==========================================================================
   7. Kartu pilihan (login: tampilan; Easy UI: Comp Status)
   ========================================================================== */
.choice-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.choice-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 380px) {
  .choice-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.choice-card {
  position: relative;
  display: flex;
  min-width: 0;
}

.choice-card__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-card__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  min-height: 7.5rem;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.choice-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--surface-3);
  color: var(--text-muted);
}

.choice-card__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.choice-card__media {
  display: flex;
  align-self: center;
  justify-content: center;
  width: 100%;
}

.choice-card__title {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.choice-card__desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.choice-card__check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--border-control);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
}

.choice-card__check .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.choice-card:hover .choice-card__input:not(:checked):not(:disabled) + .choice-card__body {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.choice-card__input:checked + .choice-card__body {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.choice-card__input:checked + .choice-card__body .choice-card__icon {
  background: var(--accent);
  color: var(--accent-fg);
}

.choice-card__input:checked + .choice-card__body .choice-card__title {
  color: var(--accent-text-strong);
}

.choice-card__input:checked + .choice-card__body .choice-card__check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.choice-card[data-sev="attention"] .choice-card__input:checked + .choice-card__body {
  border-color: var(--status-warn-solid);
  background: var(--status-warn-bg);
  box-shadow: inset 0 0 0 1px var(--status-warn-solid);
}

.choice-card[data-sev="critical"] .choice-card__input:checked + .choice-card__body {
  border-color: var(--status-crit-solid);
  background: var(--status-crit-bg);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

.choice-card[data-sev="attention"] .choice-card__input:checked + .choice-card__body .choice-card__title {
  color: var(--status-warn-fg);
}

.choice-card[data-sev="critical"] .choice-card__input:checked + .choice-card__body .choice-card__title {
  color: var(--status-crit-fg);
}

.choice-card[data-sev="attention"] .choice-card__input:checked + .choice-card__body .choice-card__check {
  border-color: var(--status-warn-solid);
  background: var(--status-warn-solid);
}

.choice-card[data-sev="critical"] .choice-card__input:checked + .choice-card__body .choice-card__check {
  border-color: var(--status-crit-solid);
  background: var(--status-crit-solid);
}

.choice-card__input:focus-visible + .choice-card__body {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.choice-card__input:disabled + .choice-card__body {
  opacity: 0.5;
}

.choice-card--row .choice-card__body {
  flex-direction: row;
  align-items: center;
  min-height: 4.5rem;
  padding-right: var(--space-10);
}

.choice-card--row .choice-card__check {
  top: 50%;
  margin-top: -0.6875rem;
}

.choice-card--center .choice-card__body {
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   8. Checkbox, radio, switch
   ========================================================================== */
.check,
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5, 0.625rem);
  min-height: 1.5rem;
  color: var(--text);
  cursor: pointer;
}

:root[data-ui="mobile"] .check,
:root[data-ui="mobile"] .switch,
:root[data-ui="easy"] .check,
:root[data-ui="easy"] .switch {
  min-height: var(--touch);
}

@media (pointer: coarse) {
  .check,
  .switch {
    min-height: var(--touch);
  }
}

.check__input,
.switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check__box {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-control);
  border-radius: var(--radius-xs);
  background: var(--surface);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.check--radio .check__box {
  border-radius: 50%;
}

.check__label,
.switch__label {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

:root[data-ui="mobile"] :is(.check__label, .switch__label),
:root[data-ui="easy"] :is(.check__label, .switch__label) {
  font-size: var(--text-md);
}

.check:hover .check__input:not(:disabled) + .check__box {
  border-color: var(--border-hover);
}

.check__input:checked + .check__box,
.check__input:indeterminate + .check__box {
  border-color: var(--accent);
  background: var(--accent);
}

.check__input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.1rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--accent-fg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check__input:indeterminate + .check__box::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--accent-fg);
}

.check--radio .check__input:checked + .check__box {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.check--radio .check__input:checked + .check__box::after {
  content: none;
}

.check__input:focus-visible + .check__box,
.switch__input:focus-visible + .switch__track {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.check__input:disabled + .check__box,
.check__input:disabled ~ .check__label,
.switch__input:disabled + .switch__track,
.switch__input:disabled ~ .switch__label {
  opacity: 0.5;
}

.switch__track {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border: 2px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--n-0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform var(--duration-base) var(--ease-standard);
}

.switch__input:checked + .switch__track {
  border-color: var(--accent);
  background: var(--accent);
}

.switch__input:checked + .switch__track::after {
  transform: translateX(1rem);
}

.switch--end {
  justify-content: space-between;
  width: 100%;
}

.switch--end .switch__label {
  order: -1;
}

/* ==========================================================================
   9. Chip, chip status, chip nilai
   ========================================================================== */
.chip {
  --chip-bg: var(--status-none-bg);
  --chip-fg: var(--status-none-fg);
  --chip-border: var(--status-none-border);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  height: 1.5rem;
  padding: 0 var(--space-2-5, 0.625rem);
  border: var(--border-width) solid var(--chip-border);
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-left: -0.125rem;
}

.chip--sm {
  height: 1.25rem;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
}

.chip--lg {
  height: 1.75rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.chip--lg .icon {
  width: 1rem;
  height: 1rem;
}

/* Status (kontrak 10 & CONVENTIONS 6) */
.chip[data-status="done"],
.chip[data-status="normal"],
.chip[data-sev="normal"] {
  --chip-bg: var(--status-ok-bg);
  --chip-fg: var(--status-ok-fg);
  --chip-border: var(--status-ok-border);
}

.chip[data-status="finding"],
.chip[data-status="attention"],
.chip[data-sev="attention"] {
  --chip-bg: var(--status-warn-bg);
  --chip-fg: var(--status-warn-fg);
  --chip-border: var(--status-warn-border);
}

.chip[data-status="critical"],
.chip[data-sev="critical"] {
  --chip-bg: var(--status-crit-bg);
  --chip-fg: var(--status-crit-fg);
  --chip-border: var(--status-crit-border);
}

.chip[data-status="partial"],
.chip[data-status="slot_active"],
.chip[data-status="queued"] {
  --chip-bg: var(--surface);
  --chip-fg: var(--accent-text-strong);
  --chip-border: var(--accent-border);
}

.chip[data-status="pending"],
.chip[data-sev="none"] {
  --chip-bg: var(--status-none-bg);
  --chip-fg: var(--status-none-fg);
  --chip-border: var(--status-none-border);
}

.chip[data-status="missed"] {
  --chip-bg: transparent;
  --chip-fg: var(--text-muted);
  --chip-border: var(--border-strong);
}

.chip[data-status="missed"] > span {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.chip[data-status="no_form"],
.chip[data-status="out_of_schedule"] {
  --chip-bg: transparent;
  --chip-fg: var(--text-muted);
  --chip-border: var(--border-control);
  border-style: dashed;
}

.chip[data-status="inactive"] {
  --chip-bg: var(--surface-3);
  --chip-fg: var(--text-subtle);
  --chip-border: var(--border);
}

.chip[data-status="offline"] {
  --chip-bg: var(--surface-inverse);
  --chip-fg: var(--text-inverse);
  --chip-border: var(--surface-inverse);
}

.chip[data-status="sensor"],
.chip[data-status="revision"] {
  --chip-bg: var(--status-info-bg);
  --chip-fg: var(--status-info-fg);
  --chip-border: var(--status-info-border);
}

/* Chip interaktif (filter, kalimat cepat) */
button.chip,
a.chip,
.chip--button {
  height: auto;
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

button.chip:hover,
a.chip:hover,
.chip--button:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
  text-decoration: none;
}

button.chip[aria-pressed="true"],
.chip--button[aria-pressed="true"],
.chip--button.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
}

.chip__remove {
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: -0.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.chip__remove:hover {
  background: rgba(127, 127, 127, 0.2);
}

/* Chip nilai: "V", "A", "°C" + nilai, berwarna menurut tingkat */
.vchip {
  --vchip-bg: var(--surface-2);
  --vchip-fg: var(--text);
  --vchip-border: var(--border);
  --vchip-bar: var(--status-none-solid);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.375rem;
  padding: 0 0.4rem;
  border: var(--border-width) solid var(--vchip-border);
  border-radius: var(--radius-sm);
  background: var(--vchip-bg);
  color: var(--vchip-fg);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.vchip__label {
  color: inherit;
  font-weight: var(--weight-semibold);
  opacity: 0.8;
}

.vchip__value {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.vchip__bar {
  display: inline-block;
  width: 0.875rem;
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--vchip-bar);
}

.vchip__icon {
  width: 0.75rem !important;
  height: 0.75rem !important;
  margin-right: -0.1rem;
}

.vchip[data-sev="normal"] {
  --vchip-bg: var(--status-ok-bg);
  --vchip-fg: var(--status-ok-fg);
  --vchip-border: var(--status-ok-border);
  --vchip-bar: var(--status-ok-solid);
}

.vchip[data-sev="attention"] {
  --vchip-bg: var(--status-warn-bg);
  --vchip-fg: var(--status-warn-fg);
  --vchip-border: var(--status-warn-solid);
  --vchip-bar: var(--status-warn-solid);
}

.vchip[data-sev="critical"] {
  --vchip-bg: var(--status-crit-bg);
  --vchip-fg: var(--status-crit-fg);
  --vchip-border: var(--status-crit-solid);
  --vchip-bar: var(--status-crit-solid);
}

.vchip.is-stale {
  opacity: 0.6;
}

.vchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

/* Label tingkat dengan ikon (tidak hanya warna) */
.sev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--status-none-fg);
}

.sev .icon {
  width: 1rem;
  height: 1rem;
}

.sev[data-sev="normal"] {
  color: var(--status-ok-fg);
}

.sev[data-sev="attention"] {
  color: var(--status-warn-fg);
}

.sev[data-sev="critical"] {
  color: var(--status-crit-fg);
}

/* Titik status mandiri */
.dot {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--status-none-solid);
  vertical-align: middle;
}

.dot[data-sev="normal"],
.dot[data-status="done"] {
  background: var(--status-ok-solid);
}

.dot[data-sev="attention"],
.dot[data-status="finding"] {
  background: var(--status-warn-solid);
}

.dot[data-sev="critical"],
.dot[data-status="critical"] {
  background: var(--status-crit-solid);
}

.dot[data-status="partial"],
.dot[data-status="slot_active"] {
  background: var(--accent);
}

.dot--pulse {
  box-shadow: 0 0 0 0 currentColor;
}

/* ==========================================================================
   10. Badge & penghitung
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.badge--neutral {
  background: var(--surface-3);
  color: var(--text-muted);
}

.badge--ok {
  background: var(--status-ok-solid);
  color: var(--status-ok-solid-fg);
}

.badge--warn {
  background: var(--status-warn-solid);
  color: var(--status-warn-solid-fg);
}

.badge--crit {
  background: var(--danger);
  color: var(--danger-fg);
}

.badge--outline {
  border: var(--border-width) solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

.badge--dot {
  min-width: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

.badge--float {
  position: absolute;
  top: -0.375rem;
  right: -0.5rem;
  box-shadow: 0 0 0 2px var(--surface);
}

.badge--console {
  height: 1.375rem;
  padding: 0 0.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.has-badge {
  position: relative;
}

.btn--icon > .badge--dot.badge--float {
  top: 0.5rem;
  right: 0.5rem;
}

.btn--icon > .badge--float:not(.badge--dot) {
  top: 0.125rem;
  right: 0.125rem;
}

/* ==========================================================================
   11. Kartu
   ========================================================================== */
.card {
  position: relative;
  min-width: 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.card--pad {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .card--pad {
    padding: var(--space-5);
  }
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
}

.card__header--bordered {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}

.card__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.card__title {
  color: var(--heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.card__subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.card__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
}

.card__body {
  padding: var(--space-4);
}

.card__body--flush {
  padding: 0;
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.card--flat {
  box-shadow: none;
}

.card--flush {
  overflow: hidden;
  padding: 0;
}

.card--sunken {
  background: var(--surface-2);
  box-shadow: none;
}

.card--interactive,
a.card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.card--interactive:hover,
a.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.card.is-selected,
.card[aria-selected="true"],
.card[aria-current="true"] {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.card[data-sev="attention"] {
  border-color: var(--status-warn-solid);
  box-shadow: inset 0 0 0 1px var(--status-warn-solid);
}

.card[data-sev="critical"] {
  border-color: var(--status-crit-solid);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

/* Daftar kunci-nilai di kartu/panel */
.kv {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.kv dt {
  color: var(--text-muted);
}

.kv dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.eyebrow {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.divider {
  height: var(--border-width);
  margin: var(--space-4) 0;
  border: 0;
  background: var(--border);
}

/* ==========================================================================
   12. Baris daftar (ilustrasi, judul, subjudul, chip, chevron)
   ========================================================================== */
.list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list--card {
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.list--card > li + li,
.list--divided > li + li {
  border-top: var(--border-width) solid var(--border);
}

.list--gap {
  gap: var(--space-2);
}

.list--gap > li > .list-row {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

/* Grid: media | body | trail | chevron; baris kedua opsional .list-row__foot (ringkasan nilai)
   melebar di bawah body + trail. Anak yang didukung: __media, __body, __trail, __chevron, __foot. */
.list-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "media body trail chev"
    "media foot foot chev";
  align-items: center;
  min-width: 0;
  min-height: 3.5rem;
  padding: var(--space-2-5, 0.625rem) var(--space-3);
  background: var(--surface);
  color: inherit;
  text-align: left;
  text-decoration: none;
}

button.list-row {
  width: 100%;
  border: 0;
  font: inherit;
}

a.list-row:hover,
button.list-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}

a.list-row:focus-visible,
button.list-row:focus-visible {
  outline-offset: -2px;
  border-radius: inherit;
}

.list-row__media {
  display: grid;
  grid-area: media;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  margin-right: var(--space-3);
}

.list-row__body {
  display: flex;
  grid-area: body;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.list-row__foot {
  display: flex;
  grid-area: foot;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  margin-top: var(--space-1-5);
}

.list-row__title {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-ui="admin"] .list-row__title,
:root[data-ui="console"] .list-row__title {
  font-size: var(--text-sm);
}

.list-row__subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  min-width: 0;
}

.list-row__trail {
  display: flex;
  grid-area: trail;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  max-width: 11rem;
  margin-left: var(--space-3);
}

.list-row__time {
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.list-row__chevron {
  grid-area: chev;
  margin-left: var(--space-2);
  color: var(--text-subtle);
}

.list-row--child {
  padding-left: calc(var(--space-3) + 1.25rem);
}

.list-row--child::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--space-3) + 0.5rem);
  width: 0.5rem;
  height: 50%;
  border-bottom: var(--border-width) solid var(--border-strong);
  border-left: var(--border-width) solid var(--border-strong);
  border-bottom-left-radius: var(--radius-xs);
}

.list-row--child .list-row__title {
  font-size: var(--text-sm);
}

.list-row.is-stale .list-row__meta,
.list-row.is-stale .list-row__foot,
.list-row.is-stale .list-row__media {
  opacity: 0.55;
}

.list-row.is-disabled,
.list-row[aria-disabled="true"] {
  opacity: 0.6;
}

.list-row[data-sev="critical"] {
  box-shadow: inset 3px 0 0 var(--status-crit-solid);
}

.list-row[data-sev="attention"] {
  box-shadow: inset 3px 0 0 var(--status-warn-solid);
}

/* ==========================================================================
   13. Tabel (header lengket, header bertingkat, sel bertingkat nilai)
   ========================================================================== */
.table-wrap {
  position: relative;
  max-width: 100%;
  max-height: var(--table-max-h, none);
  overflow: auto;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overscroll-behavior-x: contain;
}

.table-wrap--flush {
  border: 0;
  border-radius: 0;
}

.table {
  width: 100%;
  color: var(--text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table caption {
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: left;
  caption-side: top;
}

.table th,
.table td {
  padding: var(--space-2-5, 0.625rem) var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
}

.table thead tr:nth-child(2) th {
  top: var(--thead-row1-h, 2.25rem);
}

.table thead tr:nth-child(3) th {
  top: calc(var(--thead-row1-h, 2.25rem) + var(--thead-row2-h, 2.25rem));
}

.table th.table__group {
  color: var(--text);
  text-align: center;
  border-left: var(--border-width) solid var(--border);
  border-right: var(--border-width) solid var(--border);
}

.table th.table__sub {
  text-align: center;
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table tbody tr:hover > td {
  background: var(--surface-2);
}

.table tbody tr.is-selected > td {
  background: var(--accent-subtle);
}

.table tr.is-link {
  cursor: pointer;
}

.table .num,
.table td.num,
.table th.num {
  text-align: right;
  white-space: nowrap;
}

.table .center {
  text-align: center;
}

.table td.is-muted {
  color: var(--text-muted);
}

.table--compact th,
.table--compact td {
  padding: var(--space-1-5) var(--space-2);
}

.table--bordered th,
.table--bordered td {
  border-right: var(--border-width) solid var(--border);
}

.table--bordered th:last-child,
.table--bordered td:last-child {
  border-right: 0;
}

.table td[data-sev] {
  position: relative;
}

.table td[data-sev="attention"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  font-weight: var(--weight-semibold);
}

.table td[data-sev="critical"] {
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
  font-weight: var(--weight-bold);
}

.table tbody tr:hover > td[data-sev="attention"] {
  background: var(--status-warn-bg);
}

.table tbody tr:hover > td[data-sev="critical"] {
  background: var(--status-crit-bg);
}

/* Penanda bentuk di sudut sel (bukan hanya warna) */
.table td[data-sev="attention"]::after,
.table td[data-sev="critical"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--status-warn-solid);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.table td[data-sev="critical"]::after {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--status-crit-solid);
}

.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: calc(var(--space-1) * -1) calc(var(--space-1-5) * -1);
  padding: var(--space-1) var(--space-1-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.table__sort:hover {
  background: var(--surface-3);
  color: var(--text);
}

.table__sort .icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.55;
}

th[aria-sort="ascending"] .table__sort,
th[aria-sort="descending"] .table__sort {
  color: var(--text);
}

th[aria-sort="ascending"] .table__sort .icon,
th[aria-sort="descending"] .table__sort .icon {
  opacity: 1;
}

.table__empty {
  padding: var(--space-8) var(--space-4) !important;
  color: var(--text-muted);
  text-align: center;
}

/* Tabel menjadi kartu di layar sempit: <table class="table table--stack"> + td[data-label] */
@media (max-width: 639.98px) {
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
    width: 100%;
  }

  .table--stack tr {
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--border);
  }

  .table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1-5) var(--space-3);
    border: 0;
    text-align: right;
  }

  .table--stack td::before {
    content: attr(data-label);
    flex: none;
    max-width: 50%;
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    text-align: left;
  }

  .table--stack td.num {
    text-align: right;
  }

  .table--stack tbody tr:hover > td {
    background: transparent;
  }
}

/* ==========================================================================
   14. Tab
   ========================================================================== */
.tabs {
  display: flex;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  border-bottom: var(--border-width) solid var(--border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.tabs__tab:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.tabs__tab[aria-selected="true"],
.tabs__tab[aria-current="page"] {
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.tabs__tab[aria-selected="true"]::after,
.tabs__tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  bottom: -1px;
  left: var(--space-2);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

.tabs__tab:focus-visible {
  outline-offset: -2px;
}

.tabs__tab .badge {
  margin-left: var(--space-0-5);
}

.tabs__panel {
  padding-top: var(--space-4);
}

.tabs__panel:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.tabs--pills {
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface-3);
}

.tabs--pills .tabs__tab {
  min-height: var(--control-h-sm);
  border-radius: var(--radius);
}

.tabs--pills .tabs__tab[aria-selected="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.tabs--pills .tabs__tab[aria-selected="true"]::after {
  content: none;
}

/* ==========================================================================
   15. Breadcrumb
   ========================================================================== */
.breadcrumb {
  min-width: 0;
  font-size: var(--text-sm);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--text-muted);
}

.breadcrumb__item > a,
.breadcrumb__item > span {
  overflow: hidden;
  max-width: 14rem;
  text-overflow: ellipsis;
}

.breadcrumb__item > a {
  color: var(--text-muted);
  border-radius: var(--radius-xs);
}

.breadcrumb__item > a:hover {
  color: var(--text);
}

/* Easy UI (halaman checker, juga di HP): tautan breadcrumb setinggi target sentuh 44px. */
:root[data-ui="easy"] .breadcrumb__item > a {
  min-width: var(--touch);
  line-height: var(--touch);
  text-align: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "\203A";
  flex: none;
  padding: 0 var(--space-1-5);
  color: var(--text-subtle);
}

.breadcrumb__item [aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* ==========================================================================
   16. Menu dropdown & menu konteks
   ========================================================================== */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 1rem));
  max-height: min(28rem, calc(100vh - 1rem));
  overflow-y: auto;
  padding: var(--space-1);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.menu:not(.is-open) {
  display: none;
}

.menu.is-open {
  animation: ksm-pop-in var(--duration-fast) var(--ease-out);
}

.menu__label {
  padding: var(--space-2) var(--space-2-5, 0.625rem) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5, 0.625rem);
  width: 100%;
  min-height: 2.25rem;
  padding: 0 var(--space-2-5, 0.625rem);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

:root[data-ui="mobile"] .menu__item,
:root[data-ui="easy"] .menu__item {
  min-height: var(--touch);
  font-size: var(--text-md);
}

@media (pointer: coarse) {
  .menu__item {
    min-height: var(--touch);
  }
}

.menu__item .icon {
  color: var(--text-muted);
}

.menu__item:hover,
.menu__item:focus-visible,
.menu__item.is-active {
  outline: none;
  background: var(--surface-3);
  text-decoration: none;
}

.menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.menu__item[aria-disabled="true"],
.menu__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu__item--danger,
.menu__item--danger .icon {
  color: var(--status-crit-fg);
}

.menu__item--danger:hover,
.menu__item--danger:focus-visible {
  background: var(--status-crit-bg);
}

.menu__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__kbd {
  flex: none;
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

.menu__item[aria-checked="true"]::after {
  content: "";
  width: 0.4rem;
  height: 0.75rem;
  margin-right: 0.25rem;
  border: solid var(--accent-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-0.1rem);
}

.menu__sep {
  height: var(--border-width);
  margin: var(--space-1) calc(var(--space-1) * -1);
  border: 0;
  background: var(--border);
}

@keyframes ksm-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ==========================================================================
   17. Dialog (native <dialog>)
   ========================================================================== */
.dialog {
  --dialog-w: 35rem;
  width: min(calc(100% - 2rem), var(--dialog-w));
  max-height: min(calc(100% - 3rem), 54rem);
  margin: auto;
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-xl);
}

.dialog[open] {
  display: flex;
  flex-direction: column;
  animation: ksm-dialog-in var(--duration-base) var(--ease-out);
}

.dialog.is-closing {
  animation: ksm-dialog-out var(--duration-fast) var(--ease-in) forwards;
}

.dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
  animation: ksm-fade-in var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.dialog--sm {
  --dialog-w: 25rem;
}

.dialog--md {
  --dialog-w: 35rem;
}

.dialog--lg {
  --dialog-w: 45rem;
}

.dialog--xl {
  --dialog-w: 60rem;
}

.dialog--full {
  --dialog-w: 100%;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
}

.dialog__header {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.dialog__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.dialog__subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.dialog__close {
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
}

.dialog__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.dialog__icon[data-tone="crit"] {
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.dialog__icon[data-tone="warn"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text);
  overscroll-behavior: contain;
}

.dialog__body > p + p {
  margin-top: var(--space-2);
}

.dialog__message {
  color: var(--text-muted);
}

.dialog__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.dialog__footer--bordered {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

@media (max-width: 479.98px) {
  .dialog__footer > .btn {
    flex: 1 1 auto;
  }
}

/* <dialog class="dialog"> statis di Mobile UI / < 768px: tampil sebagai bottom sheet
   (core/dialog.js menambah .dialog--as-sheet + pegangan .sheet__handle). */
.dialog.dialog--as-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 40rem;
  height: auto;
  max-height: calc(100% - var(--space-12));
  margin: 0 auto;
  border-bottom: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.dialog.dialog--as-sheet[open] {
  animation: ksm-sheet-in var(--duration-slow) var(--ease-standard);
}

.dialog.dialog--as-sheet.is-closing {
  animation: ksm-sheet-out var(--duration-base) var(--ease-in) forwards;
}

.dialog.dialog--as-sheet.is-dragging {
  animation: none;
  transition: none;
}

.dialog.dialog--as-sheet.is-settling {
  transition: transform var(--duration-base) var(--ease-standard);
}

.dialog--as-sheet > .dialog__header {
  padding-top: var(--space-1);
  touch-action: none;
}

.dialog--as-sheet .dialog__footer {
  padding-bottom: calc(var(--space-5) + var(--safe-bottom));
}

.dialog--as-sheet:not(:has(.dialog__footer)) .dialog__body {
  padding-bottom: calc(var(--space-5) + var(--safe-bottom));
}

.dialog--as-sheet .dialog__footer > .btn {
  flex: 1 1 auto;
}

@keyframes ksm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@keyframes ksm-dialog-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes ksm-fade-in {
  from {
    opacity: 0;
  }
}

/* ==========================================================================
   18. Bottom sheet (dialog dengan pegangan geser)
   ========================================================================== */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 40rem;
  max-height: calc(100% - var(--space-12));
  margin: 0 auto;
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-xl);
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: ksm-sheet-in var(--duration-slow) var(--ease-standard);
}

.sheet.is-closing {
  animation: ksm-sheet-out var(--duration-base) var(--ease-in) forwards;
}

.sheet.is-dragging {
  animation: none;
  transition: none;
}

.sheet.is-settling {
  transition: transform var(--duration-base) var(--ease-standard);
}

.sheet::backdrop {
  background: rgba(15, 23, 42, 0.5);
  animation: ksm-fade-in var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.sheet__handle {
  display: flex;
  flex: none;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-1);
  cursor: grab;
  touch-action: none;
}

.sheet__handle::before {
  content: "";
  width: 2.5rem;
  height: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.sheet__header {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0 var(--space-2) var(--space-2) var(--space-4);
  touch-action: none;
}

.sheet__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.sheet__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.sheet__subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-4);
  overscroll-behavior: contain;
}

.sheet__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap-reverse;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom));
  border-top: var(--border-width) solid var(--border);
}

.sheet__footer > .btn {
  flex: 1 1 auto;
}

.sheet:not(:has(.sheet__footer)) .sheet__body {
  padding-bottom: calc(var(--space-4) + var(--safe-bottom));
}

@keyframes ksm-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@keyframes ksm-sheet-out {
  to {
    transform: translateY(100%);
  }
}

/* ==========================================================================
   19. Toast (dengan aksi Urungkan)
   ========================================================================== */
.toast-region {
  position: fixed;
  inset: auto 0 calc(var(--toast-offset, 0px) + var(--safe-bottom) + var(--space-4)) 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 max(var(--space-4), var(--safe-right)) 0 max(var(--space-4), var(--safe-left));
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
  pointer-events: none;
}

@media (min-width: 768px) {
  .toast-region {
    left: auto;
    align-items: flex-end;
    padding-right: max(var(--space-6), var(--safe-right));
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 26rem);
  min-height: 3rem;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ksm-toast-in var(--duration-base) var(--ease-out);
}

.toast.is-leaving {
  animation: ksm-toast-out var(--duration-fast) var(--ease-in) forwards;
}

.toast__icon {
  flex: none;
}

.toast[data-type="success"] .toast__icon {
  color: #4ade80;
}

.toast[data-type="error"] .toast__icon {
  color: #f87171;
}

.toast[data-type="warning"] .toast__icon {
  color: #fbbf24;
}

.toast[data-type="info"] .toast__icon {
  color: #93c5fd;
}

:root[data-theme="dark"] .toast[data-type="success"] .toast__icon {
  color: var(--green-700);
}

:root[data-theme="dark"] .toast[data-type="error"] .toast__icon {
  color: var(--red-700);
}

:root[data-theme="dark"] .toast[data-type="warning"] .toast__icon {
  color: var(--amber-700);
}

:root[data-theme="dark"] .toast[data-type="info"] .toast__icon {
  color: var(--blue-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .toast[data-type="success"] .toast__icon {
    color: var(--green-700);
  }

  :root:not([data-theme="light"]):not([data-theme="dark"]) .toast[data-type="error"] .toast__icon {
    color: var(--red-700);
  }

  :root:not([data-theme="light"]):not([data-theme="dark"]) .toast[data-type="warning"] .toast__icon {
    color: var(--amber-700);
  }

  :root:not([data-theme="light"]):not([data-theme="dark"]) .toast[data-type="info"] .toast__icon {
    color: var(--blue-700);
  }
}

.toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.toast__msg strong {
  font-weight: var(--weight-semibold);
}

.toast__code {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.toast__action {
  flex: none;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--blue-300);
  font: inherit;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

:root[data-theme="dark"] .toast__action {
  color: var(--blue-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .toast__action {
    color: var(--blue-700);
  }
}

.toast__action:hover {
  background: rgba(127, 127, 127, 0.18);
}

.toast__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  opacity: 0.75;
}

/* Target sentuh ≥ 44px di Mobile UI, Easy UI (tablet), dan semua layar sentuh. */
:root[data-ui="mobile"] .toast__action,
:root[data-ui="easy"] .toast__action,
:root[data-ui="mobile"] .toast__close,
:root[data-ui="easy"] .toast__close {
  min-height: var(--touch);
}

:root[data-ui="mobile"] .toast__close,
:root[data-ui="easy"] .toast__close {
  width: var(--touch);
  height: var(--touch);
}

@media (pointer: coarse) {
  .toast__action {
    min-height: var(--touch);
  }

  .toast__close {
    width: var(--touch);
    height: var(--touch);
  }
}

.toast__close:hover {
  background: rgba(127, 127, 127, 0.18);
  opacity: 1;
}

.toast__action:focus-visible,
.toast__close:focus-visible {
  outline-color: currentColor;
  outline-offset: 0;
}

@keyframes ksm-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes ksm-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ==========================================================================
   20. Banner (offline, impersonate, maintenance) & alert inline
   ========================================================================== */
.banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--banner-h);
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: center;
}

.banner .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.banner__text {
  min-width: 0;
}

.banner__actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.banner .btn {
  min-height: 1.875rem;
  padding: 0 var(--space-3);
  --btn-font: var(--text-xs);
}

:root[data-ui="mobile"] .banner .btn {
  min-height: var(--touch);
}

.banner--offline {
  min-height: 2rem;
  padding-block: var(--space-1);
  background: var(--n-800);
  color: var(--n-50);
}

.banner--impersonation {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
  justify-content: space-between;
  border-bottom: var(--border-width) solid var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  text-align: left;
}

.banner--maintenance {
  border-bottom: var(--border-width) solid var(--status-crit-border);
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.banner--info {
  border-bottom: var(--border-width) solid var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.alert {
  --alert-bg: var(--status-info-bg);
  --alert-fg: var(--status-info-fg);
  --alert-border: var(--status-info-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--alert-border);
  border-radius: var(--radius);
  background: var(--alert-bg);
  color: var(--text);
  font-size: var(--text-sm);
}

.alert[data-tone="ok"] {
  --alert-bg: var(--status-ok-bg);
  --alert-fg: var(--status-ok-fg);
  --alert-border: var(--status-ok-border);
}

.alert[data-tone="warn"] {
  --alert-bg: var(--status-warn-bg);
  --alert-fg: var(--status-warn-fg);
  --alert-border: var(--status-warn-border);
}

.alert[data-tone="crit"] {
  --alert-bg: var(--status-crit-bg);
  --alert-fg: var(--status-crit-fg);
  --alert-border: var(--status-crit-border);
}

.alert[data-tone="neutral"] {
  --alert-bg: var(--surface-2);
  --alert-fg: var(--text-muted);
  --alert-border: var(--border);
}

.alert__icon {
  flex: none;
  margin-top: 0.05rem;
  color: var(--alert-fg);
}

.alert__content {
  flex: 1 1 auto;
  min-width: 0;
}

.alert__title {
  color: var(--alert-fg);
  font-weight: var(--weight-semibold);
}

.alert__body {
  color: var(--text);
}

.alert__title + .alert__body {
  margin-top: var(--space-0-5);
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.alert__close {
  margin: calc(var(--space-1-5) * -1) calc(var(--space-2) * -1) 0 0;
}

/* ==========================================================================
   21. Skeleton (berbentuk konten akhir)
   ========================================================================== */
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--skeleton-base);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation: ksm-shimmer 1.4s ease-in-out infinite;
}

.skeleton--text {
  width: var(--sk-w, 100%);
  height: 0.75em;
  margin: 0.375em 0;
}

.skeleton--title {
  width: var(--sk-w, 40%);
  height: 1.15em;
  margin: 0.25em 0;
}

.skeleton--circle {
  width: var(--sk-size, 2.5rem);
  height: var(--sk-size, 2.5rem);
  border-radius: 50%;
}

.skeleton--rect {
  width: 100%;
  height: var(--sk-h, 6rem);
  border-radius: var(--radius);
}

.skeleton--ill {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
}

.skeleton--chip {
  width: var(--sk-w, 4rem);
  height: 1.5rem;
  border-radius: var(--radius-pill);
}

.skeleton--btn {
  width: var(--sk-w, 6rem);
  height: var(--control-h);
  border-radius: var(--radius);
}

.skeleton--input {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--radius);
}

.sk-w-25 {
  --sk-w: 25%;
}

.sk-w-40 {
  --sk-w: 40%;
}

.sk-w-50 {
  --sk-w: 50%;
}

.sk-w-60 {
  --sk-w: 60%;
}

.sk-w-75 {
  --sk-w: 75%;
}

.sk-w-90 {
  --sk-w: 90%;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-2-5, 0.625rem) var(--space-3);
}

.skeleton-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.skeleton-table td {
  padding: var(--space-3);
}

[aria-busy="true"] > .skeleton-region {
  pointer-events: none;
}

@keyframes ksm-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none !important;
    display: none;
  }
}

/* ==========================================================================
   22. Empty state & keadaan gagal
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
}

.empty__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.empty__title {
  color: var(--heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.empty__text {
  max-width: 32rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.empty--compact {
  padding: var(--space-6) var(--space-3);
}

.empty--compact .empty__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.empty[data-tone="crit"] .empty__icon {
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.empty[data-tone="warn"] .empty__icon {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.empty[data-tone="ok"] .empty__icon {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

/* ==========================================================================
   23. Progress bar (<progress>) & cincin progres
   ========================================================================== */
.progress {
  --progress-color: var(--accent);
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--progress-color);
  -webkit-appearance: none;
  appearance: none;
}

.progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--progress-color);
  transition: width var(--duration-slow) var(--ease-standard);
}

.progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--progress-color);
}

.progress--sm {
  height: 0.25rem;
}

.progress--lg {
  height: 0.75rem;
}

.progress[data-tone="ok"] {
  --progress-color: var(--status-ok-solid);
}

.progress[data-tone="warn"] {
  --progress-color: var(--status-warn-solid);
}

.progress[data-tone="crit"] {
  --progress-color: var(--status-crit-solid);
}

.progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1-5);
  font-size: var(--text-sm);
}

.progress-meta__value {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ring {
  --ring-size: 2.5rem;
  --ring-color: var(--accent);
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
}

.ring > svg {
  width: 100%;
  height: 100%;
}

.ring__track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 3.5;
}

.ring__value {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
  transition: stroke-dasharray var(--duration-slow) var(--ease-standard);
}

.ring.is-empty .ring__value {
  visibility: hidden;
}

.ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: calc(var(--ring-size) * 0.26);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ring--sm {
  --ring-size: 1.75rem;
}

.ring--sm .ring__label {
  font-size: 0.5625rem;
}

.ring--md {
  --ring-size: 2.5rem;
}

.ring--lg {
  --ring-size: 3.5rem;
}

.ring[data-tone="ok"] {
  --ring-color: var(--status-ok-solid);
}

.ring[data-tone="warn"] {
  --ring-color: var(--status-warn-solid);
}

.ring[data-tone="crit"] {
  --ring-color: var(--status-crit-solid);
}

/* ==========================================================================
   24. Tooltip (dipasang JS: ui/tooltip.js, dari atribut data-tooltip)
   ========================================================================== */
.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-tooltip);
  max-width: min(18rem, calc(100vw - 1rem));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  pointer-events: none;
  box-shadow: var(--shadow-md);
  animation: ksm-fade-in var(--duration-fast) var(--ease-out);
}

/* ==========================================================================
   25. Avatar, kbd
   ========================================================================== */
.avatar {
  --avatar-size: 2rem;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
  font-size: calc(var(--avatar-size) * 0.4);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--sm {
  --avatar-size: 1.5rem;
}

.avatar--lg {
  --avatar-size: 2.5rem;
}

.avatar--xl {
  --avatar-size: 3.5rem;
}

.avatar--neutral {
  background: var(--surface-3);
  color: var(--text-muted);
}

kbd,
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border: var(--border-width) solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================================
   26. Paginasi
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pagination__summary {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0 var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.pagination__item:hover {
  background: var(--surface-3);
  text-decoration: none;
}

.pagination__item[aria-current="page"] {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.pagination__item[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__gap {
  padding: 0 var(--space-1);
  color: var(--text-subtle);
}

/* ==========================================================================
   27. Tree (tree aset: indent guide, caret, ikon tipe, titik status, drag)
   ========================================================================== */
.tree {
  --tree-indent: 1.25rem;
  --tree-row-h: 2.25rem;
  --tree-guide: var(--border);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

:root[data-ui="mobile"] .tree,
:root[data-ui="easy"] .tree {
  --tree-row-h: var(--touch);
}

@media (pointer: coarse) {
  .tree {
    --tree-row-h: var(--touch);
  }
}

.tree__group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree__item {
  --depth: 0;
  position: relative;
  outline: none;
}

.tree__item[aria-expanded="false"] > .tree__group {
  display: none;
}

.tree__item[aria-level="2"] { --depth: 1; }
.tree__item[aria-level="3"] { --depth: 2; }
.tree__item[aria-level="4"] { --depth: 3; }
.tree__item[aria-level="5"] { --depth: 4; }
.tree__item[aria-level="6"] { --depth: 5; }
.tree__item[aria-level="7"] { --depth: 6; }
.tree__item[aria-level="8"] { --depth: 7; }
.tree__item[aria-level="9"] { --depth: 8; }
.tree__item[aria-level="10"] { --depth: 9; }
.tree__item[aria-level="11"] { --depth: 10; }
.tree__item[aria-level="12"] { --depth: 11; }

.tree__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  min-height: var(--tree-row-h);
  padding: 0 var(--space-1) 0 calc(var(--space-2) + var(--depth) * var(--tree-indent));
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--tree-indent) / 2 - 0.5px),
    var(--tree-guide) calc(var(--tree-indent) / 2 - 0.5px),
    var(--tree-guide) calc(var(--tree-indent) / 2 + 0.5px),
    transparent calc(var(--tree-indent) / 2 + 0.5px),
    transparent var(--tree-indent)
  );
  background-position: var(--space-2) 0;
  background-size: calc(var(--depth) * var(--tree-indent)) 100%;
  background-repeat: no-repeat;
}

.tree__row:hover {
  background-color: var(--surface-2);
}

.tree__item[aria-selected="true"] > .tree__row {
  background-color: var(--accent-subtle);
  color: var(--accent-text-strong);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.tree__item:focus-visible > .tree__row {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
}

.tree__caret {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: -0.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-subtle);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.tree__caret .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.tree__caret:hover {
  background: var(--surface-3);
  color: var(--text);
}

.tree__item[aria-expanded="true"] > .tree__row > .tree__caret {
  transform: rotate(90deg);
}

.tree__item:not([aria-expanded]) > .tree__row > .tree__caret {
  visibility: hidden;
}

.tree__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-muted);
}

.tree__icon .icon {
  width: 1rem;
  height: 1rem;
}

.tree__item[aria-selected="true"] > .tree__row > .tree__icon {
  background: var(--accent);
  color: var(--accent-fg);
}

.tree__label {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: var(--space-1-5);
  min-width: 0;
  overflow: hidden;
}

.tree__name {
  flex: 0 1 auto;
  min-width: 2.5rem;
  overflow: hidden;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__code {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree__item[aria-selected="true"] > .tree__row .tree__code {
  color: var(--accent-text);
}

.tree__hl {
  border-radius: 2px;
  background: var(--accent-subtle-hover);
  color: inherit;
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 1px var(--accent-muted);
}

.tree__badge {
  flex: none;
}

.tree__flag {
  flex: none;
  color: var(--text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Titik status: bentuk berbeda per status (bukan hanya warna) */
.tree__status {
  position: relative;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin: 0 var(--space-1);
  border: 2px solid var(--status-none-solid);
  border-radius: 50%;
}

.tree__status[data-status="done"],
.tree__status[data-status="normal"] {
  border-color: var(--status-ok-solid);
  background: var(--status-ok-solid);
}

.tree__status[data-status="partial"],
.tree__status[data-status="slot_active"] {
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
}

.tree__status[data-status="finding"],
.tree__status[data-status="attention"] {
  border-color: var(--status-warn-solid);
  border-radius: 1px;
  background: var(--status-warn-solid);
  transform: rotate(45deg) scale(0.9);
}

.tree__status[data-status="critical"] {
  border-color: var(--status-crit-solid);
  border-radius: 1px;
  background: var(--status-crit-solid);
}

.tree__status[data-status="missed"] {
  border-style: dashed;
  border-color: var(--status-crit-solid);
}

.tree__status[data-status="no_form"] {
  border-style: dashed;
  border-radius: 2px;
}

.tree__status[data-status="inactive"] {
  border-color: var(--border-strong);
  background: var(--border-strong);
}

.tree__menu,
.tree__drag {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  opacity: 0;
}

.tree__drag {
  width: 1.25rem;
  margin-left: calc(var(--space-1) * -1);
  cursor: grab;
}

.tree__menu:hover,
.tree__drag:hover {
  background: var(--surface-3);
  color: var(--text);
}

.tree__row:hover > :is(.tree__menu, .tree__drag),
.tree__item:focus-visible > .tree__row > :is(.tree__menu, .tree__drag),
.tree__item[aria-selected="true"] > .tree__row > :is(.tree__menu, .tree__drag),
.tree__menu:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .tree__menu,
  .tree__drag {
    opacity: 1;
  }
}

.tree__item.is-inactive > .tree__row .tree__name {
  color: var(--text-subtle);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.tree__item.is-inactive > .tree__row .tree__icon {
  opacity: 0.55;
}

.tree__item.is-hidden {
  display: none;
}

/* Drag & drop (SortableJS) */
.tree.is-dragging .tree__row:hover {
  background-color: transparent;
}

.tree__item.is-ghost > .tree__row {
  border: 1.5px dashed var(--accent-border);
  background: var(--accent-subtle);
  opacity: 0.85;
}

.tree__item.is-ghost > .tree__group {
  display: none;
}

.tree__item.is-chosen > .tree__row {
  background: var(--surface-3);
}

.tree__item.is-drag > .tree__row {
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
}

.tree.is-dragging .tree__group.is-droppable:empty {
  min-height: 0.5rem;
  margin-left: calc(var(--space-2) + (var(--depth) + 1) * var(--tree-indent));
  border-radius: var(--radius-xs);
  background: var(--accent-subtle);
}

.tree__item.is-drop-target > .tree__row {
  outline: 2px dashed var(--accent-border);
  outline-offset: -2px;
}

.tree__empty {
  padding: var(--space-6) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ==========================================================================
   28. Navigasi sidebar, topbar, bottom nav, submit bar
   (geometri shell ada di layouts.css)
   ========================================================================== */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .nav-item {
    min-height: var(--touch);
  }
}

.nav-item:hover {
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
}

.nav-item[aria-current="page"],
.nav-item.is-active {
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.nav-item:focus-visible {
  outline-offset: -2px;
}

.nav-item__icon {
  flex: none;
}

.nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item__badge {
  flex: none;
}

.bottom-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
  min-height: var(--touch);
  padding: var(--space-1) var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav__item:hover {
  color: var(--text);
  text-decoration: none;
}

.bottom-nav__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.bottom-nav__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav__item[aria-current="page"],
.bottom-nav__item.is-active {
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.bottom-nav__item[aria-current="page"] .bottom-nav__icon,
.bottom-nav__item.is-active .bottom-nav__icon {
  background: var(--accent-subtle);
}

.bottom-nav__item:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius);
}

.bottom-nav__icon .badge--float {
  top: -0.125rem;
  right: 0.375rem;
}

.submit-bar__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
}

.submit-bar__issues {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: var(--touch);
  color: var(--status-warn-fg);
  font-weight: var(--weight-semibold);
}

.submit-bar__issues[data-sev="critical"] {
  color: var(--status-crit-fg);
}

.submit-bar__issues[data-sev="normal"] {
  color: var(--status-ok-fg);
}

/* ==========================================================================
   29. Command palette (Ctrl/Cmd+K)
   ========================================================================== */
.palette {
  width: min(calc(100% - 2rem), 40rem);
  max-height: min(calc(100% - 4rem), 34rem);
  margin: 12vh auto auto;
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-xl);
}

.palette[open] {
  display: flex;
  flex-direction: column;
  animation: ksm-dialog-in var(--duration-base) var(--ease-out);
}

.palette::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.palette__search {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.palette__search > .icon {
  color: var(--text-subtle);
}

.palette__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.5rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--text-md);
}

.palette__input:focus,
.palette__input:focus-visible {
  outline: none;
}

.palette__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);
  overscroll-behavior: contain;
}

.palette__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.palette__group {
  padding: var(--space-3) var(--space-2) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.palette__item[aria-selected="true"] {
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

.palette__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-muted);
}

.palette__item[aria-selected="true"] .palette__icon {
  background: var(--accent);
  color: var(--accent-fg);
}

.palette__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.palette__title {
  overflow: hidden;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__title mark {
  background: transparent;
  color: var(--accent-text-strong);
  font-weight: var(--weight-bold);
}

.palette__subtitle {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__type {
  flex: none;
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

.palette__empty,
.palette__status {
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.palette__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.palette__footer kbd {
  margin-right: var(--space-1);
}

@media (max-width: 767.98px) {
  .palette {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .palette__search {
    padding-top: var(--safe-top);
  }

  .palette__footer {
    display: none;
  }
}

/* ==========================================================================
   30. Toolbar & filter bar
   ========================================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.toolbar__spacer {
  flex: 1 1 auto;
}

.toolbar__search {
  flex: 1 1 14rem;
  max-width: 24rem;
}

.toolbar--bordered {
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.filter-bar {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--space-0-5);
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar > * {
  flex: none;
}

/* ==========================================================================
   31. Kartu statistik (dashboard)
   ========================================================================== */
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.stat {
  --stat-accent: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.stat__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.stat__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--stat-accent);
}

.stat__value {
  color: var(--heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat__unit {
  margin-left: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.stat__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.stat__delta {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.stat__delta[data-trend="up"]::before {
  content: "\2191 ";
}

.stat__delta[data-trend="down"]::before {
  content: "\2193 ";
}

.stat[data-tone="ok"] {
  --stat-accent: var(--status-ok-fg);
}

.stat[data-tone="ok"] .stat__icon {
  background: var(--status-ok-bg);
}

.stat[data-tone="warn"] {
  --stat-accent: var(--status-warn-fg);
}

.stat[data-tone="warn"] .stat__icon {
  background: var(--status-warn-bg);
}

.stat[data-tone="crit"] {
  --stat-accent: var(--status-crit-fg);
}

.stat[data-tone="crit"] .stat__icon {
  background: var(--status-crit-bg);
}

.stat[data-tone="accent"] {
  --stat-accent: var(--accent-text);
}

.stat[data-tone="accent"] .stat__icon {
  background: var(--accent-subtle);
}

/* ==========================================================================
   32. Slide-over (panel detail Easy UI dari kanan)
   ========================================================================== */
.slideover {
  position: fixed;
  top: calc(var(--slideover-top, 0px) + var(--header-offset));
  right: 0;
  bottom: 0;
  z-index: var(--z-slideover);
  display: flex;
  flex-direction: column;
  width: min(100%, calc(26rem + var(--safe-right)));
  padding-right: var(--safe-right);
  border-left: var(--border-width) solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-xl);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-standard),
    visibility 0s linear var(--duration-slow);
}

.slideover.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--duration-slow) var(--ease-standard), visibility 0s;
}

.slideover--wide {
  width: min(100%, 36rem);
}

.slideover__header {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

.slideover__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.slideover__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.slideover__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  overscroll-behavior: contain;
}

.slideover__footer {
  display: flex;
  flex: none;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + var(--safe-bottom));
  border-top: var(--border-width) solid var(--border);
}

.slideover__footer > .btn {
  flex: 1 1 auto;
}

/* ==========================================================================
   33. Foto bukti, tanda tangan, kanvas peta
   ========================================================================== */
.thumbs {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}

.thumb {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-3);
}

.thumb__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Target sentuh 44px (--touch) di pojok; lingkaran gelap 2rem digambar ::before. */
.thumb__remove {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
}

.thumb__remove::before {
  content: "";
  position: absolute;
  inset: calc((var(--touch) - 2rem) / 2);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.thumb__remove > .icon {
  position: relative;
}

.thumb__remove:hover::before {
  background: rgba(15, 23, 42, 0.9);
}

.thumb__status {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-1) var(--space-1-5);
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: var(--text-2xs);
}

.thumb.is-uploading img {
  opacity: 0.5;
}

.thumb.is-error {
  border-color: var(--status-crit-solid);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid);
}

.thumb--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 1.5px dashed var(--border-control);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.thumb--add:hover {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
}

.signature {
  position: relative;
  width: 100%;
  height: clamp(8rem, 30vw, 12rem);
  overflow: hidden;
  border: 1.5px dashed var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
  touch-action: none;
}

.signature__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.signature__baseline {
  position: absolute;
  right: 8%;
  bottom: 28%;
  left: 8%;
  border-bottom: var(--border-width) solid var(--border-strong);
  pointer-events: none;
}

.signature__hint {
  position: absolute;
  bottom: calc(28% - 1.5rem);
  left: 8%;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  pointer-events: none;
}

.signature.has-ink .signature__hint {
  visibility: hidden;
}

.signature__clear {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 1;
}

.map-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  overflow: hidden;
  background-color: var(--map-bg);
  background-image: radial-gradient(var(--map-grid) 1px, transparent 1.2px);
  background-size: 24px 24px;
  touch-action: none;
  cursor: grab;
}

.map-canvas:active {
  cursor: grabbing;
}

.map-canvas__viewport {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.map-canvas__edges {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.map-canvas__controls {
  position: absolute;
  right: var(--space-3);
  bottom: calc(var(--space-3) + var(--safe-bottom));
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.map-canvas__controls .btn {
  border-radius: 0;
}

.map-canvas__controls .btn + .btn {
  border-top: var(--border-width) solid var(--border);
}

.map-canvas__legend {
  position: absolute;
  left: var(--space-3);
  bottom: calc(var(--space-3) + var(--safe-bottom));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: calc(100% - 6rem);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  box-shadow: var(--shadow-sm);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.legend-line {
  width: 1.5rem;
  height: 0;
  border-top: 2px solid var(--flow-line);
}

.legend-line--flow {
  border-top-style: dashed;
  border-top-color: var(--flow-line-active);
}

/* Kartu node (peta rute Easy UI & daftar) */
.node-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 15rem;
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.node-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.node-card.is-selected,
.node-card[aria-current="true"],
.node-card[aria-pressed="true"] {
  border-color: var(--accent-border);
  box-shadow: inset 0 0 0 1px var(--accent-border), var(--shadow-md);
}

.node-card[data-sev="attention"] {
  border-color: var(--status-warn-solid);
}

.node-card[data-sev="critical"] {
  border-color: var(--status-crit-solid);
  box-shadow: inset 0 0 0 1px var(--status-crit-solid), var(--shadow-sm);
}

/* Terpilih tetap terlihat di kartu Perhatian/Kritis: tepi tingkat dipertahankan, cincin
   aksen di luar kartu menandai pilihan. */
.node-card[data-sev="attention"]:is(.is-selected, [aria-current="true"], [aria-pressed="true"]),
.node-card[data-sev="critical"]:is(.is-selected, [aria-current="true"], [aria-pressed="true"]) {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-border), var(--shadow-md);
}

.node-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.node-card__media {
  flex: none;
}

.node-card__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.node-card__title {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-card__code {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-card__ring {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.node-card:has(.node-card__ring) .node-card__titles {
  padding-right: var(--space-6);
}

.node-card__titles .chip {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.node-card__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border);
}

.node-card__time {
  margin-left: auto;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.node-card.is-stale .node-card__summary {
  opacity: 0.55;
}

.node-card--sm {
  width: 12rem;
}

/* ==========================================================================
   34. Ilustrasi alat (kontrak 9) + animasi + garis aliran
   ========================================================================== */
.ill {
  --ill-size: 4rem;
  --ill-lamp: var(--ill-lamp-none);
  --ill-led-1: var(--ill-lamp-none);
  --ill-led-2: var(--ill-lamp-none);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--ill-size);
  height: var(--ill-size);
  color: var(--ill-stroke);
  line-height: 0;
  vertical-align: middle;
}

.ill > svg,
.ill > img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ill > svg {
  color: inherit;
}

.ill[data-ill="unknown"] {
  display: inline-grid;
  place-items: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-subtle);
}

.ill[data-ill="unknown"] > .icon {
  width: 50%;
  height: 50%;
}

.ill > img {
  object-fit: contain;
}

.ill--xs {
  --ill-size: 2rem;
}

.ill--sm {
  --ill-size: 2.75rem;
}

.ill--md {
  --ill-size: 4rem;
}

.ill--lg {
  --ill-size: 6rem;
}

.ill--xl {
  --ill-size: 8rem;
}

.ill[data-level="ok"] {
  --ill-lamp: var(--ill-lamp-ok);
}

.ill[data-level="warn"] {
  --ill-lamp: var(--ill-lamp-warn);
}

.ill[data-level="crit"] {
  --ill-lamp: var(--ill-lamp-crit);
}

/* Bagian ilustrasi (kelas pengait di file SVG) */
.ill .ill-shadow {
  fill: var(--ill-shadow);
  fill-opacity: 1;
}

.ill .ill-lever {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-standard);
}

.ill[data-state="off"] .ill-lever {
  transform: translateY(12px);
}

.ill .ill-body {
  fill: var(--ill-body);
  stroke: var(--ill-stroke);
}

.ill .ill-body-2 {
  fill: var(--ill-body-2);
  stroke: var(--ill-stroke);
}

.ill .ill-door {
  fill: var(--ill-door);
  stroke: var(--ill-stroke);
}

.ill .ill-line {
  fill: none;
  stroke: var(--ill-detail);
}

.ill .ill-stroke {
  fill: none;
  stroke: var(--ill-stroke);
}

.ill .ill-detail {
  fill: var(--ill-detail);
}

.ill .ill-glass {
  fill: var(--ill-glass);
  stroke: var(--ill-stroke);
}

.ill .ill-accent {
  fill: var(--ill-accent);
}

.ill .ill-lamp {
  fill: var(--ill-lamp);
  transform-box: fill-box;
  transform-origin: center;
}

.ill .ill-lamp-halo {
  fill: var(--ill-lamp);
  opacity: 0.22;
}

.ill .ill-led-1 {
  fill: var(--ill-led-1);
  transform-box: fill-box;
  transform-origin: center;
}

.ill .ill-led-2 {
  fill: var(--ill-led-2);
  transform-box: fill-box;
  transform-origin: center;
}

.ill .ill-fan,
.ill .ill-fan-2 {
  fill: var(--ill-fan);
  transform-box: fill-box;
  transform-origin: center;
}

.ill .ill-pause,
.ill .ill-pause-2 {
  visibility: hidden;
}

.ill .ill-pause-bg {
  fill: var(--surface);
  stroke: var(--ill-stroke);
}

.ill .ill-pause-bar {
  fill: var(--ill-stroke);
}

/* Lampu LED per unit mengikuti status mesin */
.ill[data-state="on"],
.ill[data-state-1="on"] {
  --ill-led-1: var(--ill-lamp-ok);
}

.ill[data-state="on"],
.ill[data-state-2="on"] {
  --ill-led-2: var(--ill-lamp-ok);
}

.ill[data-state="standby"],
.ill[data-state-1="standby"] {
  --ill-led-1: var(--ill-lamp-warn);
}

.ill[data-state="standby"],
.ill[data-state-2="standby"] {
  --ill-led-2: var(--ill-lamp-warn);
}

.ill[data-state="trouble"],
.ill[data-state-1="trouble"] {
  --ill-led-1: var(--ill-lamp-crit);
}

.ill[data-state="trouble"],
.ill[data-state-2="trouble"] {
  --ill-led-2: var(--ill-lamp-crit);
}

.ill[data-state-1="off"] {
  --ill-led-1: var(--ill-lamp-none);
}

.ill[data-state-2="off"] {
  --ill-led-2: var(--ill-lamp-none);
}

/* Standby (Off Set Point): kipas diam + tanda jeda */
.ill[data-state="standby"]:not([data-state-1]) .ill-pause,
.ill[data-state="standby"]:not([data-state-2]) .ill-pause-2,
.ill[data-state-1="standby"] .ill-pause,
.ill[data-state-2="standby"] .ill-pause-2 {
  visibility: visible;
}

/* Trouble: tint merah */
.ill[data-state="trouble"]:not([data-state-1]):not([data-state-2]) {
  --ill-body: var(--ill-trouble-body);
  --ill-body-2: var(--ill-trouble-body);
  --ill-stroke: var(--ill-trouble-stroke);
  --ill-lamp: var(--ill-lamp-crit);
}

.ill[data-state-1="trouble"] .ill-unit-1,
.ill[data-state-2="trouble"] .ill-unit-2 {
  --ill-body: var(--ill-trouble-body);
  --ill-body-2: var(--ill-trouble-body);
  --ill-stroke: var(--ill-trouble-stroke);
}

/* Off (by switch): abu-abu, redup */
.ill[data-state="off"]:not([data-state-1]):not([data-state-2]) {
  --ill-lamp: var(--ill-lamp-none);
  --ill-fan: var(--ill-detail);
  --ill-accent: var(--ill-detail);
  opacity: 0.55;
}

.ill[data-state-1="off"] .ill-unit-1,
.ill[data-state-2="off"] .ill-unit-2 {
  --ill-fan: var(--ill-detail);
  opacity: 0.5;
}

.ill[data-state="none"] {
  --ill-fan: var(--ill-detail);
}

/* Animasi: kipas berputar (On) */
@keyframes ill-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Kedip lampu (Trouble) memakai transform saja */
@keyframes ill-blink {
  0%,
  55% {
    transform: scale(1);
  }

  56%,
  100% {
    transform: scale(0.001);
  }
}

@keyframes ill-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.35);
  }
}

.ill[data-state="on"]:not([data-state-1]) .ill-fan,
.ill[data-state="on"]:not([data-state-2]) .ill-fan-2,
.ill[data-state-1="on"] .ill-fan,
.ill[data-state-2="on"] .ill-fan-2 {
  animation: ill-spin var(--ill-fan-duration) linear infinite;
}

.ill[data-state="trouble"]:not([data-state-1]):not([data-state-2]) .ill-lamp,
.ill[data-state="trouble"]:not([data-state-1]) .ill-led-1,
.ill[data-state="trouble"]:not([data-state-2]) .ill-led-2,
.ill[data-state-1="trouble"] .ill-led-1,
.ill[data-state-2="trouble"] .ill-led-2 {
  animation: ill-blink var(--ill-blink-duration) linear infinite;
}

.ill[data-level="crit"]:not([data-state="trouble"]) .ill-lamp-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: ill-pulse 1.6s ease-in-out infinite;
}

/* Garis aliran antar alat di peta rute */
.flow-line {
  fill: none;
  stroke: var(--flow-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-line[data-flow="on"] {
  stroke: var(--flow-line-active);
  stroke-dasharray: 6 6;
  animation: flow-dash var(--flow-duration) linear infinite;
}

.flow-line[data-level="warn"] {
  stroke: var(--status-warn-solid);
}

.flow-line[data-level="crit"] {
  stroke: var(--status-crit-solid);
}

.flow-line[data-flow="off"] {
  stroke-dasharray: none;
  opacity: 0.8;
}

@keyframes flow-dash {
  to {
    stroke-dashoffset: -12;
  }
}

/* Jeda: di luar layar (.is-offscreen) atau tab tidak aktif (html.is-doc-hidden) */
.ill.is-offscreen *,
.is-offscreen .ill *,
.is-offscreen .flow-line,
.flow-line.is-offscreen,
html.is-doc-hidden .ill *,
html.is-doc-hidden .flow-line {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .ill *,
  .flow-line {
    animation: none !important;
  }
}

/* ==========================================================================
   35. Spinner & bar progres atas (PJAX)
   ========================================================================== */
.spinner {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.75;
  animation: ksm-spin 0.75s linear infinite;
  vertical-align: middle;
}

.spinner--sm {
  width: 1rem;
  height: 1rem;
}

.spinner--lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.top-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-progress);
  height: 3px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-base) linear;
}

.top-progress.is-active {
  opacity: 1;
}

/* ==========================================================================
   36. Accordion (button[data-toggle="accordion"] atau <details>)
   ========================================================================== */
.accordion {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.accordion__item + .accordion__item {
  border-top: var(--border-width) solid var(--border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: left;
  list-style: none;
  cursor: pointer;
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__trigger::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border: solid var(--text-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.accordion__trigger[aria-expanded="true"]::after,
details[open] > .accordion__trigger::after {
  transform: rotate(-135deg);
}

.accordion__trigger:hover {
  background: var(--surface-2);
}

.accordion__trigger:focus-visible {
  outline-offset: -2px;
}

.accordion__panel {
  padding: 0 var(--space-4) var(--space-4);
}

/* ==========================================================================
   37. Animasi umum (getar kartu login, muncul)
   ========================================================================== */
.is-shake {
  animation: ksm-shake 0.42s var(--ease-standard);
}

@keyframes ksm-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(7px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(3px);
  }
}

.fade-in {
  animation: ksm-fade-in var(--duration-base) var(--ease-out);
}

/* ==========================================================================
   38. Tom Select (select bisa dicari) — tema mengikuti token
   ========================================================================== */
.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.ts-wrapper {
  position: relative;
  display: flex;
  min-width: 0;
}

.ts-control {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-3);
  overflow: hidden;
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--input-font);
  line-height: var(--leading-tight);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.ts-wrapper.single .ts-control {
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.ts-control:hover {
  border-color: var(--border-hover);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--accent-border);
  box-shadow: var(--focus-halo);
}

.ts-wrapper.disabled .ts-control {
  background-color: var(--surface-2);
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.ts-control > * {
  display: inline-block;
  vertical-align: baseline;
}

.ts-control > input {
  display: inline-block !important;
  flex: 1 1 auto;
  min-width: 4rem;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  background: none !important;
  color: inherit;
  font-size: inherit;
  line-height: inherit !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

.ts-control > input:focus {
  outline: none !important;
}

.input-hidden .ts-control > input {
  position: absolute;
  left: -10000px;
  opacity: 0;
}

.ts-wrapper.single.input-active .ts-control > .item {
  display: none;
}

.ts-wrapper.single .ts-control > .item {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 0.125rem var(--space-2);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.ts-wrapper.multi .ts-control > .item.active {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.ts-wrapper.plugin-remove_button .item .remove {
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: -0.25rem;
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: none;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(127, 127, 127, 0.2);
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  width: 100%;
  margin-top: var(--space-1);
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  color: var(--text);
  font-size: var(--input-font);
  box-shadow: var(--shadow-lg);
}

.ts-dropdown-content {
  max-height: 17.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-1);
  overscroll-behavior: contain;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: var(--space-2) var(--space-2-5, 0.625rem);
  border-radius: var(--radius-md);
}

:root[data-ui="mobile"] .ts-dropdown .option,
:root[data-ui="easy"] .ts-dropdown .option {
  min-height: var(--touch);
  display: flex;
  align-items: center;
}

.ts-dropdown [data-selectable] {
  overflow: hidden;
  cursor: pointer;
}

.ts-dropdown .option {
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
}

.ts-dropdown .active {
  background: var(--surface-3);
  color: var(--text);
}

.ts-dropdown .option.selected,
.ts-dropdown .option[aria-selected="true"] {
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.ts-dropdown .optgroup-header {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: default;
}

.ts-dropdown .no-results,
.ts-dropdown .create {
  color: var(--text-muted);
}

.ts-dropdown .create.active {
  color: var(--text);
}

.ts-dropdown [data-selectable] .highlight {
  border-radius: 2px;
  background: var(--accent-subtle-hover);
  color: inherit;
}

.ts-dropdown .spinner {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: var(--space-2) auto;
}

.ts-dropdown .ts-option-sub {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ==========================================================================
   39. uPlot — selaraskan dengan token (CSS vendor dimuat oleh modul grafik)
   ========================================================================== */
.uplot {
  font-family: var(--font-sans) !important;
  color: var(--text);
}

.uplot .u-legend {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.uplot .u-select {
  background: rgba(37, 99, 235, 0.12);
}

.uplot .u-cursor-x,
.uplot .u-cursor-y {
  border-color: var(--border-control) !important;
}

/* ==========================================================================
   40. Penampil foto (lightbox)
   ========================================================================== */
.photo-viewer {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: rgba(3, 7, 18, 0.94);
  color: #f8fafc;
}

.photo-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.photo-viewer::backdrop {
  background: rgba(3, 7, 18, 0.94);
}

.photo-viewer__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-2) + var(--safe-top)) var(--space-2) var(--space-2) var(--space-4);
}

.photo-viewer__count {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.photo-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--space-2);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.photo-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  -webkit-user-select: none;
  user-select: none;
}

.photo-viewer__caption {
  padding: var(--space-2) var(--space-4) calc(var(--space-3) + var(--safe-bottom));
  color: #cbd5e1;
  font-size: var(--text-sm);
  text-align: center;
}

.photo-viewer .btn {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-bg-active: rgba(255, 255, 255, 0.22);
  --btn-fg: #f8fafc;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.photo-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.photo-viewer__nav--prev {
  left: var(--space-2);
}

.photo-viewer__nav--next {
  right: var(--space-2);
}