/* DashKit base components
 * Uses only --dk-* tokens, so every palette file in this folder restyles it.
 * Load this file once, plus ONE palette file (or several on the picker page).
 * The active palette is chosen by data-palette="{key}" on <html>.
 */

:root {
  --dk-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --dk-radius-card: 20px;
  --dk-radius-tile: 18px;
  --dk-radius-pill: 999px;
  --dk-radius-input: 12px;
  --dk-gap: 12px;

  /* status pills: identical in every palette so users learn them once */
  --dk-draf-bg: #ECEEF1;      --dk-draf: #4B5260;
  --dk-dihantar-bg: #E3EBFF;  --dk-dihantar: #2B45B8;
  --dk-disahkan-bg: #DCF5E3;  --dk-disahkan: #17663A;
  --dk-ditolak-bg: #FFE2DE;   --dk-ditolak: #A8281F;
}

/* Page */
.dk-app {
  background: var(--dk-bg);
  color: var(--dk-ink);
  font-family: var(--dk-font);
  min-height: 100%;
}
.dk-muted { color: var(--dk-muted); }

/* Cards and bento grid */
.dk-card {
  background: var(--dk-surface);
  border-radius: var(--dk-radius-card);
  padding: 16px;
}
.dk-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dk-gap);
}
@media (max-width: 768px) {
  .dk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* KPI tiles */
.dk-tile {
  border-radius: var(--dk-radius-tile);
  padding: 14px;
  color: var(--dk-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dk-tile__label { font-size: 12px; font-weight: 600; opacity: .75; }
.dk-tile__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dk-tile__chip  { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--dk-radius-pill); background: rgba(255,255,255,.55); }

.dk-tile--anchor { background: var(--dk-anchor); color: var(--dk-on-anchor); }
.dk-tile--anchor .dk-tile__chip { background: var(--dk-pastel-1); color: var(--dk-ink); }
.dk-tile--p1 { background: var(--dk-pastel-1); }
.dk-tile--p2 { background: var(--dk-pastel-2); }
.dk-tile--p3 { background: var(--dk-pastel-3); }
.dk-tile--p4 { background: var(--dk-pastel-4); }

/* Buttons */
.dk-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  border-radius: var(--dk-radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .15s;
}
.dk-btn--vivid { background: var(--dk-vivid); color: var(--dk-on-vivid); }
.dk-btn--vivid:hover { background: var(--dk-vivid-hover); }
.dk-btn--plain { background: var(--dk-surface); color: var(--dk-ink); box-shadow: inset 0 0 0 1px var(--dk-line); }
.dk-btn--dark  { background: var(--dk-anchor); color: var(--dk-on-anchor); }
.dk-btn:focus-visible,
.dk-input:focus-visible,
.dk-nav a:focus-visible { outline: 2px solid var(--dk-focus); outline-offset: 2px; }

/* Navigation (pill tabs) */
.dk-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.dk-nav a { padding: 7px 14px; border-radius: var(--dk-radius-pill); color: var(--dk-muted); font-weight: 600; font-size: 13px; text-decoration: none; }
.dk-nav a:hover { background: var(--dk-vivid-soft); color: var(--dk-ink); }
.dk-nav a[aria-current="page"] { background: var(--dk-anchor); color: var(--dk-on-anchor); }

/* Form inputs (used by the dynamic form renderer) */
.dk-input {
  font: inherit;
  width: 100%;
  background: var(--dk-surface);
  color: var(--dk-ink);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-input);
  padding: 10px 12px;
}
.dk-label { font-size: 13px; font-weight: 600; }
.dk-help  { font-size: 12px; color: var(--dk-muted); }

/* Tables */
.dk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dk-table th { text-align: left; color: var(--dk-muted); font-weight: 600; font-size: 12px; padding: 6px 8px 10px; }
.dk-table td { padding: 10px 8px; border-top: 1px solid var(--dk-line); }

/* Status pills */
.dk-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--dk-radius-pill); white-space: nowrap; }
.dk-status--draf     { background: var(--dk-draf-bg);     color: var(--dk-draf); }
.dk-status--dihantar { background: var(--dk-dihantar-bg); color: var(--dk-dihantar); }
.dk-status--disahkan { background: var(--dk-disahkan-bg); color: var(--dk-disahkan); }
.dk-status--ditolak  { background: var(--dk-ditolak-bg);  color: var(--dk-ditolak); }

/* Palette picker (Tetapan Jabatan) */
.dk-palette-option { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--dk-surface); box-shadow: inset 0 0 0 1px var(--dk-line); cursor: pointer; }
.dk-palette-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--dk-ink); }
.dk-palette-option input { position: absolute; opacity: 0; pointer-events: none; }
.dk-swatches { display: flex; gap: 4px; }
.dk-swatches span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

@media (prefers-reduced-motion: reduce) {
  .dk-btn { transition: none; }
}