/* Komponen bersama. Semua kelas berawalan ui- agar tidak bentrok dengan style.css
   halaman. Semua warna dari tokens.css. */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ui-btn:hover { background: var(--color-accent-hover); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.ui-btn-secondary:hover { background: var(--color-surface-2); }
.ui-btn-ghost { background: transparent; color: var(--color-accent-text); }
.ui-btn-ghost:hover { background: var(--color-accent-soft); }
.ui-btn-danger { background: var(--color-danger); color: var(--color-bg); }
.ui-btn-danger:hover { background: var(--color-danger); filter: brightness(.92); }
.ui-btn-sm { padding: 0 var(--space-3); font-size: var(--text-sm); }
.ui-btn-md { padding: 0 var(--space-4); font-size: var(--text-md); }
.ui-btn-lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.ui-btn-icon { padding: 0; }
.ui-btn svg, .ui-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.ui-btn.is-loading > * { visibility: hidden; }
.ui-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent-contrast);
  border-right-color: transparent;
  animation: ui-spin 700ms linear infinite;
}
.ui-btn-secondary.is-loading::after, .ui-btn-ghost.is-loading::after { border-color: var(--color-text); border-right-color: transparent; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.ui-label { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
.ui-help { font-size: var(--text-sm); color: var(--color-text-muted); }
.ui-error-text { font-size: var(--text-sm); color: var(--color-danger); font-weight: var(--weight-medium); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ui-textarea { min-height: 96px; resize: vertical; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--color-text-muted); }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: .55; cursor: not-allowed; }
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"],
.ui-field.has-error .ui-input, .ui-field.has-error .ui-select, .ui-field.has-error .ui-textarea { border-color: var(--color-danger); }

.ui-check, .ui-switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; font-size: var(--text-md); }
.ui-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); flex: none; }
.ui-switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--duration-base) var(--ease-standard);
  cursor: pointer;
}
.ui-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard);
}
.ui-switch input:checked { background: var(--color-accent); }
.ui-switch input:checked::after { transform: translateX(18px); }
.ui-switch input:disabled { opacity: .5; cursor: not-allowed; }

.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.ui-card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.ui-card-footer { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.ui-badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.ui-badge-working { background: var(--color-success-soft); color: var(--status-working); }
.ui-badge-blocked { background: var(--color-warning-soft); color: var(--status-blocked); }
.ui-badge-stuck { background: var(--color-danger-soft); color: var(--status-stuck); }
.ui-badge-success { background: var(--color-success-soft); color: var(--color-success); }
.ui-badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.ui-badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.ui-badge-info { background: var(--color-info-soft); color: var(--color-info); }

.db-ringkas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.db-daftar { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.db-baris { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.db-atas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.db-nama { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.db-peran, .db-detail { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.db-incharge { background: var(--color-info-soft); color: var(--color-info); font-weight: var(--weight-medium); }
.db-status { display: inline-flex; align-items: center; gap: var(--space-1); }
.db-baris a { color: var(--color-info); overflow-wrap: anywhere; }
.db-baris a:focus-visible { outline: 2px solid var(--color-info); outline-offset: 2px; }
.db-tambah { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0 0 var(--space-3); min-width: 0; }
.db-tambah .ui-field { min-width: 0; flex: 1 1 10rem; }

.ui-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.ui-tab {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ui-tab:hover { color: var(--color-text); }
.ui-tab[aria-selected="true"] { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.ui-tabpanel { padding-top: var(--space-4); }

.ui-table-wrap { overflow: auto; max-height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-md); }
.ui-table th, .ui-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); }
.ui-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.ui-table tbody tr:hover { background: var(--color-accent-soft); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .ui-num { text-align: right; }
.ui-table th[aria-sort] { cursor: pointer; user-select: none; }
.ui-table th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); }
.ui-table th[aria-sort] button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ui-table th[aria-sort="ascending"] button::after { content: "\25B2"; font-size: 10px; color: var(--color-accent-text); }
.ui-table th[aria-sort="descending"] button::after { content: "\25BC"; font-size: 10px; color: var(--color-accent-text); }
.ui-table th[aria-sort="none"] button::after { content: "\2195"; font-size: 12px; opacity: .5; }

.ui-progress { height: 8px; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; width: var(--value, 0%); background: var(--color-accent); border-radius: inherit; transition: width var(--duration-slow) var(--ease-standard); }
.ui-progress-success > span { background: var(--color-success); }
.ui-progress-warning > span { background: var(--color-warning); }
.ui-progress-danger > span { background: var(--color-danger); }
.ui-ring {
  --size: 56px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  background: conic-gradient(var(--color-accent) calc(var(--value, 0) * 1%), var(--color-surface-2) 0);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ui-ring::before { content: ""; position: absolute; inset: 6px; border-radius: var(--radius-full); background: var(--color-surface); }
.ui-ring > span { position: relative; }

.ui-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  flex: none;
}
.ui-avatar-lg { width: 48px; height: 48px; font-size: var(--text-base); }

.ui-skeleton {
  display: block;
  height: 1em;
  min-height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: ui-shimmer 1.4s linear infinite;
}
.ui-skeleton + .ui-skeleton { margin-top: var(--space-2); }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton { animation: none; background: var(--color-surface-2); }
  .ui-btn.is-loading::after { animation: none; }
}

.ui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); }
.ui-empty .ui-icon { width: 40px; height: 40px; color: var(--color-text-muted); }
.ui-empty-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }

.ui-toasts {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: none;
}
.ui-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font-size: var(--text-md);
  animation: var(--duration-slow) var(--ease-standard);
  animation-name: var(--swm-motion);
}
.ui-toast-success { border-left-color: var(--color-success); }
.ui-toast-warning { border-left-color: var(--color-warning); }
.ui-toast-error, .ui-toast-danger { border-left-color: var(--color-danger); }

.ui-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.ui-modal, .ui-drawer {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  overflow: auto;
  --swm-from: scale(.97);
  animation: var(--duration-slow) var(--ease-standard);
  animation-name: var(--swm-motion);
}
.ui-modal { width: min(480px, 100%); max-height: 100%; border-radius: var(--radius-lg); }
.ui-backdrop-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.ui-drawer { width: min(400px, 100%); border-radius: var(--radius-lg) 0 0 var(--radius-lg); --swm-from: translateX(24px); }
.ui-dialog-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }
@keyframes normal { from { opacity: 0; transform: var(--swm-from, translateY(8px)); } to { opacity: 1; transform: none; } }
@container style(--swm-motion: none) { *, ::before, ::after { transition: none !important; } .pt-titik-hidup { animation: none !important; } }

.ui-tooltip { position: relative; display: inline-flex; }
.ui-tooltip-text {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: var(--z-tooltip);
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ui-tooltip:hover .ui-tooltip-text, .ui-tooltip:focus-within .ui-tooltip-text { opacity: 1; }

.ui-dropdown { position: relative; display: inline-block; }
.ui-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.ui-menuitem {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-md);
  text-align: left;
}
.ui-menuitem:hover, .ui-menuitem:focus-visible { background: var(--color-accent-soft); }

.ui-listbox {
  z-index: var(--z-dropdown);
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.ui-listbox[hidden] { display: none; }
.ui-option {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-md);
  cursor: pointer;
}
.ui-option:hover, .ui-option[aria-selected="true"] { background: var(--color-accent-soft); }

.ui-page { max-width: 960px; margin: 0 auto; padding: var(--space-4); }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ui-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.dv-isi { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.dv-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dv-kartu { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dv-info { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 200px; min-width: 0; }
.dv-baris { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dv-nama { font-size: var(--text-md); font-weight: var(--weight-medium); text-transform: none; overflow-wrap: anywhere; }
.dv-aktif, .dv-ip { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dv-ip { font-size: var(--text-xs); }
.dv-detail { font-size: var(--text-xs); color: var(--color-text-muted); }
.dv-detail summary { display: inline-flex; align-items: center; min-height: var(--tap-min); cursor: pointer; }
.dv-detail summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.dv-ua { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; word-break: break-all; }
.dv-cabut { min-height: var(--tap-min); }
.dv-cabut:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dv-konfirmasi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dv-konfirmasi p { margin: 0; flex: 1 1 100%; }
.ua-daftar { list-style: none; margin: 0; padding: 0; }
.ua-item { border-top: 1px solid var(--color-border); }
.ua-item:first-child { border-top: 0; }
.ua-tautan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--space-2) var(--space-1); color: var(--color-accent-text); text-decoration: none; overflow-wrap: anywhere; border-radius: var(--radius-sm); }
.ua-tautan:hover { background: var(--color-accent-soft); }
.ua-tautan:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ua-judul { flex: 1 1 140px; min-width: 0; font-weight: var(--weight-medium); }
.ua-project { font-size: var(--text-sm); color: var(--color-text-muted); }
.dv-skeleton { display: flex; flex-direction: column; gap: var(--space-3); }
.dv-skeleton .ui-skeleton { height: 72px; border-radius: var(--radius-md); }