/* ============================================================================
   CitraKD UI — Component Layer
   Dibangun DI ATAS token --ckd-* yang sudah ada di design_system.css.
   Tidak mendefinisikan ulang warna/spacing inti — hanya menambah komponen.
   Aman dipasang setelah bootstrap.min.css + design_system.css.

   Prinsip:
   - Semua komponen mewarisi --ckd-primary, jadi tema per-modul
     (theme-rab #4f46e5, theme-pricelist #0891b2) otomatis ikut.
   - Aksesibilitas: focus terlihat, status tidak hanya warna, kontras cukup.
   - Hormati prefers-reduced-motion.
   ========================================================================== */

/* Fallback token bila design_system.css belum termuat (defensive) */
:root {
  --ckd-primary: var(--ckd-primary, #2563eb);
  --ckd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ckd-primary) 35%, transparent);
}

/* --- Fokus keyboard yang konsisten & terlihat (WCAG 2.4.7) --------------- */
.ckd-focusable:focus-visible,
.ckd-btn:focus-visible,
.ckd-card--clickable:focus-visible,
.ckd-table a:focus-visible {
  outline: none;
  box-shadow: var(--ckd-focus-ring);
  border-radius: var(--ckd-radius-sm);
}

/* Util a11y: teks hanya untuk screen reader */
.ckd-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================== BUTTON ==================================== */
/* [UPDATE] Ukuran diperkecil (~20%) & warna solid diturunkan ke opacity 70%
   sesuai hasil tinjauan di /admin/design_system_showcase - dipertahankan
   pakai color-mix() (bukan hex manual) supaya tetap ikut token --ckd-* per
   tema modul (theme-rab, theme-pricelist, dst) seperti sebelumnya. */
.ckd-btn {
  --_bg: var(--ckd-primary);
  --_fg: #111112;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ckd-space-sm);
  min-height: 32px; padding: 0 0.75rem;
  font: inherit; font-weight: 600; font-size: 0.85rem; line-height: 1;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid transparent; border-radius: var(--ckd-radius-sm);
  cursor: pointer; text-decoration: none;
  transition: filter var(--ckd-transition), box-shadow var(--ckd-transition);
}
.ckd-btn:hover:not([disabled]):not([aria-busy="true"]) { filter: brightness(0.94); }
.ckd-btn:active:not([disabled]) { filter: brightness(0.88); }
.ckd-btn[disabled],
.ckd-btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }

.ckd-btn--secondary { --_bg: #e2e8f0; --_fg: var(--ckd-text); border-color: #cbd5e1; }
/* Defensif: jangan biarkan sisa utility .text-white/.text-dark Bootstrap
   membuat teks tombol hilang (mis. putih di atas fill terang). */
/* F8 AUDIT NOTE: !important WAJIB — meng-override Bootstrap utility .text-white yang
   ber-!important di sumbernya sendiri (sama seperti kasus admin_console.css/appearance.css). */
.ckd-btn.text-white, .ckd-btn.text-dark { color: var(--_fg) !important; }
.ckd-btn--primary.text-white, .ckd-btn--success.text-white,
.ckd-btn--danger.text-white, .ckd-btn--info.text-white { color: #fff !important; }
/* [UPDATE] color-mix(...70%, transparent) = opacity 70% relatif thd token warna asli */
.ckd-btn--primary   { --_bg: color-mix(in srgb, var(--ckd-primary) 70%, transparent); --_fg: #1c1d1c; }
.ckd-btn--info      { --_bg: color-mix(in srgb, var(--ckd-info) 70%, transparent); --_fg: #fff; }
.ckd-btn--success   { --_bg: color-mix(in srgb, var(--ckd-success) 70%, transparent); }
.ckd-btn--danger    { --_bg: color-mix(in srgb, var(--ckd-danger) 70%, transparent); }
.ckd-btn--warning   { --_bg: color-mix(in srgb, var(--ckd-warning) 70%, transparent); --_fg: #1e293b; }
.ckd-btn--ghost     { --_bg: #eef1f6; --_fg: var(--ckd-primary); border-color: #d8dee8; }
.ckd-btn--ghost:hover:not([disabled]) { background: var(--ckd-primary-light); border-color: var(--ckd-primary); filter: none; }

/* [FIX] Kontras tombol icon-only (mis. aksi edit/hapus di tabel) - ditemukan
   saat tinjauan showcase bahwa .ckd-btn--ghost (#eef1f6, sangat pucat) nyaris
   menyatu dgn latar putih halaman kalau dipakai TANPA teks (cuma ikon).
   Override HANYA utk kombinasi ghost+icon - ghost dgn teks di tempat lain
   TIDAK terpengaruh (tetap subtle sesuai desain aslinya). */
.ckd-btn--ghost.ckd-btn--icon {
  --_bg: color-mix(in srgb, var(--ckd-primary) 70%, transparent);
  --_fg: #fff; border-color: transparent;
}
.ckd-btn--ghost.ckd-btn--icon:hover:not([disabled]) {
  filter: brightness(0.94); border-color: transparent;
}
.ckd-btn--ghost.ckd-btn--icon.ckd-btn--danger,
.ckd-btn--ghost.ckd-btn--icon[data-variant="danger"] {
  --_bg: color-mix(in srgb, var(--ckd-danger) 70%, transparent);
}

.ckd-btn--sm { min-height: 26px; padding: 0 var(--ckd-space-sm); font-size: 0.78rem; }
.ckd-btn--lg { min-height: 42px; padding: 0 var(--ckd-space-lg); font-size: 0.95rem; }
.ckd-btn--block { width: 100%; }
.ckd-btn--icon { padding: 0; width: 32px; }
.ckd-btn--icon.ckd-btn--sm { width: 26px; }


/* Spinner di dalam tombol saat loading */
.ckd-btn__spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ckd-spin 0.6s linear infinite;
}
.ckd-btn[aria-busy="true"] .ckd-btn__label { opacity: 0.7; }

/* =============================== BADGE =================================== */
/* Status memakai warna + ikon + teks (bukan warna saja) → WCAG 1.4.1 */
.ckd-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.6em; font-size: 0.8125rem; font-weight: 600;
  line-height: 1.2; border-radius: var(--ckd-radius-full);
  border: 1px solid transparent; white-space: nowrap;
}
.ckd-badge i { font-size: 0.85em; }
.ckd-badge--success { color: #14532d; background: #dcfce7; border-color: #86efac; }
.ckd-badge--warning { color: #78350f; background: #fef3c7; border-color: #fcd34d; }
.ckd-badge--danger  { color: #7f1d1d; background: #fee2e2; border-color: #fca5a5; }
.ckd-badge--info    { color: #155e75; background: #cffafe; border-color: #67e8f9; }
.ckd-badge--neutral { color: #334155; background: #f1f5f9; border-color: #cbd5e1; }

/* ============================================================================
   [UPDATE] Selaras showcase — Bootstrap NATIVE badge/button (bg-warning,
   bg-success, dst) masih dipakai luas di banyak template lama yang belum
   migrasi ke .ckd-btn/.ckd-badge (contoh: badge status "Lapor", "Review",
   "Menunggu" dsb). Diberi opacity 70% + ukuran sedikit lebih ringkas juga,
   supaya konsisten dgn sistem .ckd-btn tanpa perlu edit template satu-satu.
   TIDAK menyentuh .btn-outline-* (border-only, sudah cukup ringan secara visual).
   ========================================================================== */
.badge.bg-primary  { background-color: color-mix(in srgb, #2563eb 70%, transparent) !important; }
.badge.bg-success  { background-color: color-mix(in srgb, #16a34a 70%, transparent) !important; }
.badge.bg-danger   { background-color: color-mix(in srgb, #dc2626 70%, transparent) !important; }
.badge.bg-warning  { background-color: color-mix(in srgb, #f59e0b 70%, transparent) !important; }
.badge.bg-info     { background-color: color-mix(in srgb, #0891b2 70%, transparent) !important; }
.badge { padding: 0.3em 0.65em; font-size: 0.78rem; }

.btn.btn-primary   { background-color: color-mix(in srgb, #2563eb 70%, transparent) !important; border-color: transparent !important; }
.btn.btn-success   { background-color: color-mix(in srgb, #16a34a 70%, transparent) !important; border-color: transparent !important; }
.btn.btn-danger    { background-color: color-mix(in srgb, #dc2626 70%, transparent) !important; border-color: transparent !important; }
.btn.btn-warning   { background-color: color-mix(in srgb, #f59e0b 70%, transparent) !important; border-color: transparent !important; }
.btn.btn-info      { background-color: color-mix(in srgb, #0891b2 70%, transparent) !important; border-color: transparent !important; }
.btn.btn-sm  { min-height: 26px; padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.btn:not(.btn-sm):not(.btn-lg) { min-height: 32px; padding: 0.3rem 0.75rem; font-size: 0.85rem; }

/* =============================== CARD =================================== */
.ckd-card {
  background: var(--ckd-surface); border: 1px solid var(--ckd-border);
  border-radius: var(--ckd-radius-md); box-shadow: var(--ckd-shadow-sm);
}
.ckd-card--clickable { display: block; text-decoration: none; color: inherit;
  transition: box-shadow var(--ckd-transition), transform var(--ckd-transition); }
.ckd-card--clickable:hover { box-shadow: var(--ckd-shadow-md); transform: translateY(-2px); }

/* --- Stat card (KPI dashboard) --- */
.ckd-stat { padding: var(--ckd-space-lg); }
.ckd-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ckd-space-sm); }
.ckd-stat__label { font-size: 0.8125rem; font-weight: 600; color: var(--ckd-text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; }
.ckd-stat__icon { display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--ckd-radius-sm); background: var(--ckd-primary-light); color: var(--ckd-primary); }
.ckd-stat__value { margin-top: var(--ckd-space-sm); font-size: 1.875rem; font-weight: 700;
  color: var(--ckd-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ckd-stat__trend { margin-top: var(--ckd-space-xs); font-size: 0.8125rem; font-weight: 600; }
.ckd-stat__trend--up { color: var(--ckd-success); }
.ckd-stat__trend--down { color: var(--ckd-danger); }

/* ============================ DATA TABLE ================================ */
.ckd-table-wrap {
  background: var(--ckd-surface); border: 1px solid var(--ckd-border);
  border-radius: var(--ckd-radius-md); overflow: hidden;
}
.ckd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ckd-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ckd-table caption { text-align: left; padding: var(--ckd-space-md); font-weight: 600; color: var(--ckd-text); }
.ckd-table th, .ckd-table td { padding: 0.75rem var(--ckd-space-md); text-align: left; vertical-align: middle; }
.ckd-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ckd-bg); color: var(--ckd-text-muted);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ckd-border); white-space: nowrap;
}
.ckd-table tbody tr { border-top: 1px solid var(--ckd-border); transition: background var(--ckd-transition); }
.ckd-table tbody tr:hover { background: var(--ckd-primary-light); }
.ckd-table td.ckd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Header yang bisa di-sort */
.ckd-table th[aria-sort] button {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit;
  text-transform: inherit; letter-spacing: inherit; font-weight: inherit;
}
.ckd-table th[aria-sort="ascending"] .ckd-sort-icon::after  { content: "\2191"; }
.ckd-table th[aria-sort="descending"] .ckd-sort-icon::after { content: "\2193"; }
.ckd-table th[aria-sort="none"] .ckd-sort-icon::after       { content: "\2195"; opacity: 0.4; }

/* ============================ EMPTY STATE =============================== */
.ckd-empty { padding: var(--ckd-space-xl) var(--ckd-space-lg); text-align: center; }
.ckd-empty__icon { font-size: 2.5rem; color: var(--ckd-text-light); }
.ckd-empty__title { margin: var(--ckd-space-md) 0 var(--ckd-space-xs); font-size: 1.0625rem; font-weight: 600; color: var(--ckd-text); }
.ckd-empty__msg { margin: 0 auto; max-width: 36ch; color: var(--ckd-text-muted); font-size: 0.9375rem; }
.ckd-empty__action { margin-top: var(--ckd-space-lg); }

/* ============================== SKELETON =============================== */
.ckd-skel { background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%; border-radius: var(--ckd-radius-sm); animation: ckd-shimmer 1.4s ease infinite; }
.ckd-skel--line { height: 0.85rem; margin-bottom: 0.6rem; }
.ckd-skel--line:last-child { width: 70%; margin-bottom: 0; }
.ckd-skel--title { height: 1.5rem; width: 40%; margin-bottom: var(--ckd-space-md); }
.ckd-skel--row { height: 2.75rem; margin: 0; border-radius: 0; border-top: 1px solid var(--ckd-border); }

/* =============================== SPINNER =============================== */
.ckd-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 3px solid var(--ckd-border); border-top-color: var(--ckd-primary);
  animation: ckd-spin 0.7s linear infinite; }
.ckd-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
.ckd-loading-overlay { display: grid; place-items: center; gap: var(--ckd-space-sm);
  padding: var(--ckd-space-xl); color: var(--ckd-text-muted); }

/* ============================== FORM FIELD ============================= */
.ckd-field { margin-bottom: var(--ckd-space-lg); }
.ckd-field__label { display: block; margin-bottom: var(--ckd-space-xs); font-weight: 600;
  font-size: 0.9375rem; color: var(--ckd-text); }
.ckd-field__req { color: var(--ckd-danger); margin-left: 0.15em; }
.ckd-field__control {
  width: 100%; min-height: 42px; padding: 0 var(--ckd-space-md);
  font: inherit; color: var(--ckd-text); background: var(--ckd-surface);
  border: 1px solid var(--ckd-border); border-radius: var(--ckd-radius-sm);
  transition: border-color var(--ckd-transition), box-shadow var(--ckd-transition);
}
textarea.ckd-field__control { min-height: 96px; padding: var(--ckd-space-sm) var(--ckd-space-md); }
.ckd-field__control:focus { outline: none; border-color: var(--ckd-primary); box-shadow: var(--ckd-focus-ring); }
.ckd-field__control[aria-invalid="true"] { border-color: var(--ckd-danger); }
.ckd-field__help { margin-top: var(--ckd-space-xs); font-size: 0.8125rem; color: var(--ckd-text-muted); }
.ckd-field__error { margin-top: var(--ckd-space-xs); font-size: 0.8125rem; font-weight: 600; color: var(--ckd-danger); }

/* =============================== ALERT ================================= */
.ckd-alert { display: flex; gap: var(--ckd-space-sm); padding: var(--ckd-space-md);
  border: 1px solid transparent; border-radius: var(--ckd-radius-sm); font-size: 0.9375rem; }
.ckd-alert i { flex: 0 0 auto; margin-top: 0.1em; }
.ckd-alert--success { color: #14532d; background: #f0fdf4; border-color: #bbf7d0; }
.ckd-alert--warning { color: #78350f; background: #fffbeb; border-color: #fde68a; }
.ckd-alert--danger  { color: #7f1d1d; background: #fef2f2; border-color: #fecaca; }
.ckd-alert--info    { color: #155e75; background: #ecfeff; border-color: #a5f3fc; }
.ckd-alert__close { margin-left: auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: 0.6; font-size: 1.1rem; line-height: 1; }
.ckd-alert__close:hover { opacity: 1; }

/* =============================== TOAST ================================= */
.ckd-toast-region { position: fixed; top: 1rem; right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: var(--ckd-space-sm); max-width: min(92vw, 360px); }

/* =============================== KEYFRAMES ============================= */
@keyframes ckd-spin { to { transform: rotate(360deg); } }
@keyframes ckd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* =================== RESPONSIVE: tabel jadi kartu di mobile ============ */
@media (max-width: 640px) {
  .ckd-table--stack thead { display: none; }
  .ckd-table--stack tbody tr { display: block; padding: var(--ckd-space-sm) 0; }
  .ckd-table--stack td { display: flex; justify-content: space-between; gap: var(--ckd-space-md);
    padding: 0.4rem var(--ckd-space-md); text-align: right; border: 0; }
  .ckd-table--stack td::before { content: attr(data-label); font-weight: 600;
    color: var(--ckd-text-muted); text-align: left; }
  .ckd-stat__value { font-size: 1.5rem; }
}

/* ===================== HORMATI prefers-reduced-motion ================== */
@media (prefers-reduced-motion: reduce) {
  .ckd-skel { animation: none; background: #e2e8f0; }
  .ckd-spinner, .ckd-btn__spinner { animation-duration: 1.5s; }
  .ckd-card--clickable:hover { transform: none; }
  /* F8 AUDIT NOTE: !important WAJIB — pola standar industri utk WCAG 2.3.3 (Animation
     from Interactions). Harus menang mutlak atas SEMUA transition-duration lain di
     seluruh halaman, apapun spesifisitasnya, saat user mengaktifkan preferensi OS
     "reduce motion" -- ini krusial untuk pengguna dengan gangguan vestibular. */
  * { transition-duration: 0.01ms !important; }
}

/* ============================== PAGINATION ============================= */
.ckd-pagination { margin-top: var(--ckd-space-lg); }
.ckd-pagination__list { display: flex; flex-wrap: wrap; gap: var(--ckd-space-xs);
  list-style: none; padding: 0; margin: 0; align-items: center; }
.ckd-pagination__list .ckd-btn { min-width: 36px; }
.ckd-pagination__gap { padding: 0 0.4rem; color: var(--ckd-text-muted); }
.ckd-skel-group { padding: var(--ckd-space-xs) 0; }
.ckd-flash { margin-bottom: var(--ckd-space-lg); display: flex;
  flex-direction: column; gap: var(--ckd-space-sm); }

/* ============================== LIST GROUP =============================== */
.ckd-list{list-style:none;margin:0;padding:0;border:1px solid var(--ckd-border);
  border-radius:var(--ckd-radius-md);overflow:hidden;background:var(--ckd-surface)}
.ckd-list--flush{border:0;border-radius:0;background:transparent}
.ckd-list__item{display:flex;align-items:center;justify-content:space-between;
  gap:var(--ckd-space-md);padding:var(--ckd-space-md) var(--ckd-space-lg);
  border-bottom:1px solid var(--ckd-border)}
.ckd-list__item:last-child{border-bottom:0}
.ckd-list--hover .ckd-list__item:hover{background:rgba(0,0,0,.025)}
.ckd-list__main{min-width:0}
.ckd-list__title{font-weight:600;color:var(--ckd-text);display:flex;align-items:center;
  gap:.45rem;overflow:hidden;text-overflow:ellipsis}
.ckd-list__title i{color:var(--ckd-primary);width:1.1em;text-align:center}
.ckd-list__link{color:var(--ckd-text);text-decoration:none}
.ckd-list__link:hover{color:var(--ckd-primary);text-decoration:underline}
.ckd-list__sub{font-size:.85rem;color:var(--ckd-text-muted);margin-top:2px}
.ckd-list__trailing{flex-shrink:0;display:flex;align-items:center;gap:.4rem}
.ckd-list__item--empty{justify-content:center;padding:var(--ckd-space-xl)}
.ckd-list__empty{color:var(--ckd-text-muted);font-size:.9rem}

/* ============================ PAGE SHORTCUTS ============================= */
.ckd-shortcuts{margin:0 0 var(--ckd-space-lg)}
.ckd-shortcuts__list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.ckd-shortcut{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;
  border:1px solid var(--ckd-border);border-radius:var(--ckd-radius-full);
  background:var(--ckd-surface);color:var(--ckd-text);text-decoration:none;
  font-size:.875rem;font-weight:500;line-height:1;transition:var(--ckd-transition);white-space:nowrap}
.ckd-shortcut:hover{border-color:var(--ckd-primary);color:var(--ckd-primary);
  background:var(--ckd-primary-light);box-shadow:var(--ckd-shadow-sm)}
.ckd-shortcut i{color:var(--ckd-primary);font-size:.95em}
.ckd-shortcut.is-active{background:var(--ckd-primary);border-color:var(--ckd-primary);color:#fff}
.ckd-shortcut.is-active i{color:#fff}
.ckd-shortcut__badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:var(--ckd-radius-full);
  background:var(--ckd-danger);color:#fff;font-size:.7rem;font-weight:700}
.ckd-shortcut.is-active .ckd-shortcut__badge{background:rgba(255,255,255,.25)}