/* ================= Design tokens ================= */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --border: #e8ebf2;
  --border-strong: #d9dee9;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --muted-2: #98a2b3;
  --brand: #e01f26;
  --brand-ink: #b3121d;
  --brand-soft: #fdecee;
  --brand-deep: #8f0f16;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12);
  --sidebar: 250px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* ================= Shell ================= */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
.brand-logo {
  display: block; width: 146px; height: auto;
  border-radius: 9px; box-shadow: 0 3px 10px rgba(224, 31, 38, 0.18);
}
.auth-card .brand-logo { width: 178px; border-radius: 11px; }
/* Logo Tawarasa Group berlatarbelakang transparan & lebar: bayangan kotak + sudut
   membulat membuat "bingkai" pink di sekitar logo, jadi dimatikan untuk brand ini. */
body.brand-tawarasa .brand-logo,
body.brand-tawarasa .auth-card .brand-logo { box-shadow: none; border-radius: 0; }
/* Logo Tawarasa lebih lebar (rasio 2.26) jadi diberi lebar lebih supaya tulisan
   "GROUP" tetap terbaca; sidebar 250px - padding masih menyisakan ruang. */
body.brand-tawarasa .brand-logo { width: 192px; }
body.brand-tawarasa .auth-card .brand-logo { width: 198px; }
.brand-sub { display: block; font-size: 11px; color: var(--muted-2); margin-top: 7px; letter-spacing: 0.01em; }

.nav { display: flex; flex-direction: column; gap: 3px; }
/* Sidebar kini berisi banyak menu: daftar menu boleh digulir sendiri supaya
   kotak pengguna (sidebar-foot) tetap terlihat di layar pendek. */
.sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.sidebar > .nav::-webkit-scrollbar { width: 6px; }
.sidebar > .nav::-webkit-scrollbar-thumb { background: #e3e5ef; border-radius: 999px; }
.nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-2); font-weight: 600; padding: 0 10px; margin-bottom: 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-weight: 500; font-size: 13.5px;
  border: 1px solid transparent; transition: background 0.14s, color 0.14s;
}
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.7; color: var(--muted); flex: none; }
.nav-item:hover { background: #f6f7fa; }
.nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.nav-item.active svg { color: var(--brand); }
.nav-item.active svg { color: var(--brand); }

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 11.5px;
  color: var(--muted-2);
  padding-left: 10px;
  line-height: 1.6;
}

.main { flex: 1; min-width: 0; padding: 26px 32px 56px; }
.main-inner { max-width: 1240px; margin: 0 auto; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.topbar h1 { font-size: 22px; }
.topbar .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ================= Controls ================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hint { font-size: 11.5px; color: var(--muted-2); }

.input, .select, .textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.textarea { resize: vertical; min-height: 74px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: #f2a9a4;
  box-shadow: 0 0 0 3px rgba(224, 31, 38, 0.10);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; stroke-width: 2; }
.btn:hover { background: #f8f9fc; border-color: #c9cfdd; }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.24);
}
.btn-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: #f4f5f9; border-color: transparent; color: var(--ink-2); }
.btn-danger { color: #b42318; border-color: #f3c7c2; background: #fff; }
.btn-danger:hover { background: #fdf3f2; border-color: #e9aca5; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.icon-btn {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.icon-btn svg { width: 15px; height: 15px; stroke-width: 1.9; }
.icon-btn:hover { background: #f4f5f9; color: var(--ink-2); }
.icon-btn.danger:hover { background: #fdf3f2; color: #b42318; }

/* ================= Cards & layout ================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 14.5px; }
.card-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-body { padding: 20px; }

.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-dash { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
.grid-assess { grid-template-columns: 1.25fr 0.75fr; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.section-gap { margin-top: 20px; }

/* ================= Dashboard ringkas ================= */
.overview-card { margin-top: 20px; padding: 18px 20px; }
.overview-grid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 22px;
  align-items: start;
}
.overview-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.overview-item > span { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.overview-item strong {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.overview-item strong small { font-size: 12px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.overview-item.primary strong { font-size: 32px; color: var(--brand-ink); }
.overview-sub { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-track { height: 5px; margin-top: 4px; max-width: 160px; }

@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .overview-item.primary strong { font-size: 28px; }
  .overview-item strong { font-size: 20px; }
}

.dash-filters {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.dash-filters .select { max-width: 220px; }

.simple-summary {
  display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end;
}
.simple-stat { display: flex; flex-direction: column; gap: 2px; }
.simple-stat span { font-size: 11.5px; color: var(--muted); }
.simple-stat strong { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.simple-stat small { font-size: 11.5px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }

.simple-list { border-top: 1px solid var(--border); }
.simple-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid #f1f3f8;
}
.simple-row:last-child { border-bottom: none; }
.simple-row .grow { flex: 1; min-width: 0; }
.simple-row strong { display: block; font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-row small { font-size: 11.5px; color: var(--muted); }
.simple-no {
  flex: none; min-width: 30px; height: 24px; padding: 0 7px;
  display: grid; place-items: center; border-radius: 7px;
  background: #f4f5f9; color: var(--muted); font-size: 11.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.simple-no.sp-no { background: #fef3f2; color: #b42318; }
.simple-val { flex: none; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 700px) {
  .dash-filters { flex-direction: column; align-items: stretch; }
  .dash-filters .select { max-width: none; }
  .simple-summary { gap: 18px; }
  .simple-stat strong { font-size: 17px; }
}

/* ================= Section label ================= */
.section-label {
  margin: 26px 0 2px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-label:first-child { margin-top: 18px; }

/* ================= Stat cards ================= */
.stat {
  padding: 18px 20px;
  display: flex; flex-direction: column;
  min-height: 142px;          /* tinggi seragam agar grid tetap rata */
}
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stat-value { font-size: 28px; font-weight: 650; letter-spacing: -0.03em; margin-top: 8px; display: flex; align-items: baseline; gap: 7px; }
.stat-value small { font-size: 12.5px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.stat-foot { font-size: 11.5px; color: var(--muted-2); margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; }

/* ================= Bars ================= */
.bar-row { display: flex; flex-direction: column; gap: 7px; }
.bar-row + .bar-row { margin-top: 16px; }
.bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.bar-name { color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.track { height: 7px; border-radius: 999px; background: #f1f2f7; overflow: hidden; }
.fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.fill.neutral { background: #c7cad6; }
.fill-a { background: linear-gradient(90deg, #34d399, #10b981); }
.fill-b { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.fill-c { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fill-d { background: linear-gradient(90deg, #fb7185, #ef4444); }

/* ================= Grade badge ================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-A { color: #067647; background: #ecfdf3; border-color: #d1fadf; }
.badge-B { color: #175cd3; background: #eff8ff; border-color: #d1e9ff; }
.badge-C { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.badge-D { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.badge-none { color: var(--muted); background: #f5f6fa; border-color: var(--border); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 8px;
  background: #f6f7fb; border: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-2); font-weight: 500;
}
.chip.brand { background: var(--brand-soft); border-color: #fadcdb; color: var(--brand-ink); }
.chip.warn { background: #fffaeb; border-color: #fedf89; color: #b54708; }

/* ================= Tables ================= */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-2);
  padding: 11px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid #f1f3f8; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 600; font-size: 12.5px;
}
.who-text { min-width: 0; }
.who-text strong { display: block; font-weight: 550; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-text span { font-size: 12px; color: var(--muted); }
.rank {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 650; color: var(--muted);
  background: #f4f5f9; font-variant-numeric: tabular-nums;
}
.rank.top1 { background: #fff7e6; color: #b54708; }
.rank.top2 { background: #f2f4f7; color: #475467; }
.rank.top3 { background: #fdf1e7; color: #9a3412; }
.score-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.score-cell .track { width: 78px; }
.score-num { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.toolbar .search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.toolbar .search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-2); stroke-width: 2;
}
.toolbar .search .input { padding-left: 34px; }
.spacer { flex: 1; }

/* ================= Empty state ================= */
.empty {
  padding: 44px 24px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty svg { width: 26px; height: 26px; color: #c3c8d6; stroke-width: 1.6; }
.empty strong { color: var(--ink-2); font-weight: 550; font-size: 13.5px; }
.empty span { font-size: 12.5px; max-width: 340px; }

/* ================= Assessment form ================= */
.score-list { display: flex; flex-direction: column; }
.score-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0; border-bottom: 1px solid #f1f3f8;
}
.score-item:last-child { border-bottom: none; }
.score-item .meta { min-width: 0; }
.score-item .meta strong { display: block; font-size: 13.5px; font-weight: 550; }
.score-item .meta .crit-desc {
  display: block; font-size: 12px; color: var(--muted);
  line-height: 1.5; margin-top: 2px; max-width: 520px;
}
.score-item .meta .crit-weight { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.score-item .meta span { font-size: 12px; color: var(--muted); }
.segmented { display: flex; gap: 4px; background: #f6f7fb; padding: 3px; border-radius: 10px; border: 1px solid var(--border); }
.segmented button {
  width: 34px; height: 30px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; font-weight: 600; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; transition: all 0.12s;
}
.segmented button:hover { background: #fff; color: var(--ink-2); }
.segmented button.on {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.preview {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #fef4f4, #fff8f6);
  border: 1px solid #fadcdb;
}
.preview .label { font-size: 12px; color: var(--muted); font-weight: 500; }
.preview .value { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 8px; }
.preview .value small { font-size: 12px; color: var(--muted-2); font-weight: 500; }
.preview { flex-wrap: wrap; }
.preview-breakdown { flex-basis: 100%; margin-top: 10px; }

/* Uraian potongan SP pada nilai akhir */
.sp-bd {
  border: 1px solid #f7dcdb; border-radius: 12px; background: #fff;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 260px;
}
.sp-bd.plain { border-color: var(--border); background: #fbfcfe; }
.sp-bd-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: #b3121d; margin-bottom: 2px;
}
.sp-bd-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--ink-2);
}
.sp-bd-row strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.sp-bd-row.cut { color: #b3121d; }
.sp-bd-row.total {
  border-top: 1px dashed #f2b9b6; padding-top: 6px; margin-top: 2px;
  color: var(--ink); font-weight: 600;
}
.sp-bd-row.total strong { font-size: 15px; }
.sp-bd-note { font-size: 11px; color: var(--muted-2); line-height: 1.5; }
.score-raw {
  font-size: 13px; color: var(--muted-2); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.score-arrow { color: var(--muted-2); font-size: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

/* ================= List (recent / assessments) ================= */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid #f1f3f8;
}
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item strong { font-size: 13px; font-weight: 550; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item small { font-size: 11.5px; color: var(--muted); }
.list-item .val { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* ================= Scorecard Leader ================= */
.sc-table .sc-cat td {
  background: #f7f2f4;
  font-weight: 650;
  font-size: 12.5px;
  color: var(--brand-ink);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border);
}
.sc-table .sc-no { width: 44px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-table thead th.sc-no { text-align: left; }
.sc-table td:nth-child(2) { font-weight: 500; color: var(--ink); }
.sc-goal { width: 130px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sc-table td:last-child, .sc-table th:last-child { width: 120px; }
.sc-compact table { font-size: 12.5px; }
.sc-compact tbody td { padding: 8px 12px; }

/* panel acuan di form penilaian */
.sc-panel {
  border: 1px solid #f3d9d8;
  background: linear-gradient(180deg, #fff9f9, #fffdfd);
  border-radius: 12px;
  padding: 12px 14px;
}
.sc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-panel-head strong { display: block; font-size: 12.5px; font-weight: 650; color: var(--brand-ink); }
.sc-panel-head span { font-size: 11.5px; color: var(--muted); }
.sc-panel-body { margin-top: 10px; border-top: 1px solid #f3e2e1; padding-top: 8px; }
.sc-panel-body .table-wrap { margin: 0 -14px; }
.sc-panel-body .sc-cat td { background: #fbf3f3; }

/* ================= Capaian Scorecard ================= */
.sc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.sc-badge.sc-achieved { color: #067647; background: #ecfdf3; border-color: #a6f4c5; }
.sc-badge.sc-failed   { color: #b42318; background: #fef3f2; border-color: #fda29b; }
.sc-badge.sc-empty    { color: var(--muted); background: #f5f6fa; border-color: var(--border); }
.sc-badge.sc-info     { color: #175cd3; background: #eff8ff; border-color: #b2ddff; }

.sc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.sc-dot.sc-achieved { background: #12b76a; }
.sc-dot.sc-failed { background: #f04438; }
.sc-dot.sc-empty { background: #d0d5dd; }
.sc-dot.sc-info { background: #2e90fa; }

.sc-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sc-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }

.sc-summary {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  background: #f9fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}

/* halaman input */
.sc-group { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.sc-group-head {
  background: #f7f2f4; color: var(--brand-ink);
  font-size: 12px; font-weight: 650; letter-spacing: 0.01em;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.sc-item {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(140px, 1fr);
  gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #f1f3f8;
}
.sc-item:last-child { border-bottom: none; }
.sc-item.is-achieved { background: #f6fef9; }
.sc-item.is-failed { background: #fffbfa; }
.sc-item-meta strong { display: block; font-size: 13px; font-weight: 550; }
.sc-item-meta span { font-size: 11.5px; color: var(--muted); }
.sc-item-meta b { color: var(--ink-2); }
.sc-item-input { display: flex; align-items: center; gap: 8px; }
.sc-item-input .input { max-width: 96px; padding: 7px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-item-input .sc-note-only { max-width: none; flex: 1; }
.sc-item-note .input { padding: 6px 10px; font-size: 12.5px; }

/* matriks dashboard */
.sc-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.area-filter { min-width: 150px; max-width: 210px; }
.sc-matrix-wrap { overflow-x: auto; }
.sc-matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.sc-matrix th, .sc-matrix td { padding: 8px 6px; }
.sc-matrix thead th { background: var(--surface-2); border-bottom: 1px solid var(--border); vertical-align: bottom; }
.sc-matrix .sc-who { position: sticky; left: 0; background: var(--surface); z-index: 2; min-width: 180px; text-align: left; padding-left: 16px; }
.sc-matrix thead .sc-who { background: var(--surface-2); z-index: 3; }
.sc-matrix .sc-col { min-width: 62px; text-align: center; }
.sc-col-no { display: block; font-size: 10.5px; color: var(--muted-2); }
.sc-col-name {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  max-width: 74px; white-space: normal; line-height: 1.25; text-transform: none; letter-spacing: 0;
}
.sc-col-goal { display: block; font-size: 10px; color: var(--muted-2); }
.sc-matrix .sc-cell { text-align: center; }
.sc-box {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 38px; height: 26px; border-radius: 7px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.sc-box b { font-weight: 700; }
.sc-box i { font-style: normal; opacity: 0.7; font-weight: 500; }
.sc-box.sc-achieved { background: #d1fadf; color: #05603a; border-color: #a6f4c5; }
.sc-box.sc-failed { background: #fee4e2; color: #912018; border-color: #fda29b; }
.sc-box.sc-empty { background: #f2f4f7; color: #98a2b3; border-color: #eaecf0; }
.sc-box.sc-info { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.sc-matrix .sc-total { font-weight: 650; color: var(--ink); text-align: right; padding-right: 16px; }

@media (max-width: 900px) {
  .form-grid-3 { grid-template-columns: 1fr; }
  .sc-item { grid-template-columns: 1fr; gap: 8px; }
  .sc-item-input .input { max-width: none; }
}

/* ================= Uang Makan ================= */
.meal-form { display: flex; flex-direction: column; gap: 14px; }
.meal-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meal-preview { position: relative; }
.meal-preview img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border); display: block;
}
.meal-preview .icon-btn {
  position: absolute; top: -6px; right: -6px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
  width: 24px; height: 24px;
}
.meal-thumb img {
  width: var(--s, 34px); height: var(--s, 34px); object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); display: block;
  transition: transform 0.12s;
}
.meal-thumb:hover img { transform: scale(1.06); border-color: #f2a9a4; }
.meal-nothumb {
  display: grid; place-items: center;
  width: var(--s, 34px); height: var(--s, 34px);
  border-radius: 8px; background: #f5f6fa; border: 1px dashed var(--border-strong);
  color: var(--muted-2); font-size: 12px;
}
.meal-stat { display: flex; flex-direction: column; gap: 2px; min-width: 74px; }
.meal-stat span { font-size: 11px; color: var(--muted); }
.meal-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.meal-stats { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.meal-emp {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid #f1f3f8;
}
.meal-emp:last-child { border-bottom: none; }
.meal-emp .grow { flex: 1; min-width: 0; }
.meal-emp strong { display: block; font-size: 13px; font-weight: 550; }
.meal-emp small { font-size: 11.5px; color: var(--muted); }
.meal-emp .val { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* Rekap uang makan per outlet (dipakai dashboard & halaman Uang Makan) */
.meal-share { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.meal-share-track { display: block; width: 90px; height: 6px; }
.meal-share small { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.meal-outlet-body { display: grid; gap: 14px; }
.meal-outlet { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.meal-outlet-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none; background: var(--surface-2);
}
.meal-outlet-head::-webkit-details-marker { display: none; }
.meal-outlet-head::after {
  content: ''; width: 7px; height: 7px; margin-left: 2px; justify-self: end;
  border-right: 1.6px solid var(--muted-2); border-bottom: 1.6px solid var(--muted-2);
  transform: rotate(45deg); transition: transform .18s;
}
.meal-outlet[open] > .meal-outlet-head::after { transform: rotate(-135deg); }
.meal-outlet-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-outlet-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.meal-outlet-val { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meal-outlet .table-wrap { border-top: 1px solid var(--border); }

@media (max-width: 700px) {
  .meal-share-track { display: none; }
  .meal-outlet-head { grid-template-columns: minmax(0, 1fr) auto 14px; row-gap: 2px; }
  .meal-outlet-meta { grid-column: 1 / -1; order: 3; white-space: normal; }
}

/* ================= Casual ================= */
.casual-total {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 40px; padding: 9px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: #fdf7f7;
  font-size: 16px; font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.casual-total small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* ================= Riwayat SP (dashboard) ================= */
.sp-rule-note { padding-top: 0; }
.sp-rule-note .hint { line-height: 1.7; display: block; }
.sp-active { color: #b3121d !important; font-weight: 550; }
.sp-penalty-mini {
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: #fdecee; color: #b3121d; font-size: 10px; font-weight: 700;
  vertical-align: middle; letter-spacing: 0.02em;
}
.sp-penalty-note {
  display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: #fdecee; color: #b3121d; font-size: 11px; font-weight: 600;
  vertical-align: middle; white-space: nowrap;
}
.sp-counts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-count {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: #f7f8fc; border: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}
.sp-count.has { background: #fdf1f1; border-color: #f7dcdb; color: var(--ink-2); }
.sp-count strong { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-row { align-items: center; }
/* uraian poin penilaian untuk karyawan yang kena SP */
.sp-score-row {
  padding: 0 20px 10px 46px; margin-top: -8px;
  border-bottom: 1px solid #f1f3f8;
}
.sp-score {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: #fdf1f1; border: 1px solid #f7dcdb; color: #b3121d;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sp-split { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sp-mini {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: #f2f3f8; color: var(--muted); white-space: nowrap;
}
.sp-mini-sp1, .sp-mini-sp2, .sp-mini-sp3 { background: #fdecee; color: #b3121d; }
.sp-mini-st { background: #fff7e8; color: #a5600a; }

/* ================= Petty Cash ================= */
.stat-value.neg { color: #b42318; }
.type-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #f5f6fa; border: 1px solid var(--border); border-radius: 12px;
  align-self: flex-start;
}
.type-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--ink-2);
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.type-btn svg { width: 15px; height: 15px; }
.type-btn:hover { color: var(--ink); }
.type-btn.on {
  background: #fff; color: #b3121d;
  box-shadow: 0 1px 2px rgba(31, 27, 58, 0.12);
}
.petty-kind {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
}
.petty-kind.in { background: #e9f9f0; color: #12805c; }
.petty-kind.out { background: #fdecee; color: #b3121d; }
.petty-amount-in { color: #12805c; font-variant-numeric: tabular-nums; }
.petty-amount-out { color: #b3121d; font-variant-numeric: tabular-nums; }
/* `[hidden]` harus menang atas display:flex milik .field/.meal-preview dsb. */
[hidden] { display: none !important; }
.coa-cmp-body { display: grid; gap: 14px; }
.coa-cmp { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.coa-cmp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 11px 14px; background: #fbfbfe; border-bottom: 1px solid var(--border);
}
.coa-cmp-title strong { display: block; font-size: 13px; font-weight: 600; }
.coa-cmp-title small { font-size: 11.5px; color: var(--muted); }
.coa-cmp-total { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.coa-cmp-total span { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coa-cmp-total small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.coa-cmp-body { display: flex; flex-direction: column; }
.coa-cmp-body .coa-cmp { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.coa-cmp-outlet {
  display: grid; grid-template-columns: minmax(110px, 190px) 1fr 104px;
  align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid #f4f5f9; font-size: 12.5px;
}
.coa-cmp-outlet:last-of-type { border-bottom: none; }
.coa-cmp-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coa-cmp-name.top { font-weight: 650; color: var(--ink); }
.coa-cmp-track { display: block; height: 8px; border-radius: 999px; background: #f1f3f8; overflow: hidden; }
.coa-cmp-track .fill { display: block; height: 100%; border-radius: 999px; background: #d9dce8; }
.coa-cmp-track .fill.coa-fill-top { background: linear-gradient(90deg, #ee2a2f, #c8181f); }
.coa-cmp-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coa-cmp-more { padding: 8px 14px; font-size: 11.5px; color: var(--muted-2); border-top: 1px solid #f4f5f9; }
@media (max-width: 860px) {
  .coa-cmp-head { flex-direction: column; gap: 4px; }
  .coa-cmp-total { text-align: left; }
  .coa-cmp-outlet { grid-template-columns: 1fr 84px; grid-template-areas: 'name val' 'track track'; row-gap: 5px; }
  .coa-cmp-name { grid-area: name; }
  .coa-cmp-track { grid-area: track; }
  .coa-cmp-val { grid-area: val; }
}
.petty-outlet-body { display: grid; gap: 14px; }
.petty-outlet { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.petty-outlet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px; background: #fbfbfe; border-bottom: 1px solid var(--border);
}
.petty-outlet-head strong { font-size: 13px; font-weight: 600; }
.petty-outlet-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.petty-outlet-meta b { color: var(--ink); font-size: 12.5px; }
.petty-outlet-items { display: flex; flex-direction: column; }
.petty-item {
  display: grid;
  grid-template-columns: 92px minmax(120px, 168px) 1fr auto 96px 28px;
  align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid #f4f5f9;
  font-size: 12.5px;
}
.petty-item:last-child { border-bottom: none; }
.petty-item-date { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.petty-item-coa { font-weight: 550; color: var(--ink-2); }
.petty-item-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.petty-item-area { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.petty-item-amt { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: #b3121d; }
.petty-item-nobukti { text-align: center; color: var(--muted-2); font-size: 11.5px; }
@media (max-width: 860px) {
  .petty-item { grid-template-columns: 1fr auto 26px; grid-template-areas: 'date amt dl' 'coa amt dl' 'desc area area'; row-gap: 2px; }
  .petty-item-date { grid-area: date; }
  .petty-item-coa { grid-area: coa; }
  .petty-item-desc { grid-area: desc; }
  .petty-item-area { grid-area: area; text-align: right; }
  .petty-item-amt { grid-area: amt; }
  .petty-dl, .petty-item-nobukti { grid-area: dl; }
}
.petty-receipt { display: flex; align-items: center; gap: 4px; }
.petty-receipt .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.petty-receipt .icon-btn:hover { background: #fdf1f1; color: #b3121d; }
.field-span { grid-column: 1 / -1; }
.petty-acc { padding: 12px 20px; border-bottom: 1px solid #f1f3f8; display: flex; flex-direction: column; gap: 4px; }
.petty-acc:last-child { border-bottom: none; }
.petty-acc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.petty-acc-top strong { font-size: 13px; font-weight: 600; }
.petty-acc-bal { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.petty-acc-bal.neg { color: #b42318; }
.petty-acc-sub { font-size: 11.5px; color: var(--muted); }

/* ================= Achievement scorecard ================= */
.ach-body { display: flex; flex-direction: column; gap: 18px; }
.ach-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; background: #fbfcfe;
}
.ach-hero.ach-achieved { background: linear-gradient(135deg, #f2fdf7, #f8fffb); border-color: #c7f0d8; }
.ach-hero.ach-warn { background: linear-gradient(135deg, #fffdf5, #fffef9); border-color: #f6e3b4; }
.ach-hero.ach-failed { background: linear-gradient(135deg, #fff7f6, #fffbfa); border-color: #f7d5d1; }
.ach-hero.ach-empty { background: #f9fafc; }
.ach-hero-val {
  font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ach-hero-val small { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.ach-hero.ach-achieved .ach-hero-val { color: #05603a; }
.ach-hero.ach-warn .ach-hero-val { color: #b54708; }
.ach-hero.ach-failed .ach-hero-val { color: #b42318; }
.ach-hero-meta strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.ach-hero-meta span { font-size: 12px; color: var(--muted); }

.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ach-col h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-2); font-weight: 650; margin-bottom: 12px;
}
.ach-row, .ach-item { margin-bottom: 12px; }
.ach-row:last-child, .ach-item:last-child { margin-bottom: 0; }
.ach-row-top, .ach-item-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px;
}
.ach-name { font-size: 13px; font-weight: 550; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-item-name { font-size: 12.5px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-pct { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.ach-pct.ach-achieved { color: #067647; }
.ach-pct.ach-warn { color: #b54708; }
.ach-pct.ach-failed { color: #b42318; }
.ach-pct.ach-empty { color: var(--muted-2); }
.ach-track { height: 6px; }
.fill.ach-fill-achieved { background: linear-gradient(90deg, #34d399, #12b76a); }
.fill.ach-fill-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fill.ach-fill-failed { background: linear-gradient(90deg, #fb7185, #ef4444); }
.fill.ach-fill-empty { background: #e4e6ef; }
.ach-sub { font-size: 11px; color: var(--muted-2); margin-top: 4px; }

@media (max-width: 900px) {
  .ach-grid { grid-template-columns: 1fr; gap: 18px; }
  .ach-hero-val { font-size: 32px; }
}

/* ================= Dashboard: peringkat 5 atas / 5 bawah ================= */
.rank-cols { display: grid; grid-template-columns: 1fr 1fr; }
.rank-col { min-width: 0; }
.rank-col + .rank-col { border-left: 1px solid var(--border); }
.rank-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 20px; background: var(--surface-2); border-top: 1px solid var(--border);
}
.rank-col-head h4 {
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2);
}
.rank-col .simple-list { border-top: 1px solid #f1f3f8; }
.simple-no.rank-top { background: #ecfdf3; color: #067647; }
.simple-no.rank-bottom { background: #fef3f2; color: #b42318; }
.rank-empty { padding: 16px 20px; font-size: 12px; color: var(--muted-2); }

@media (max-width: 900px) {
  .rank-cols { grid-template-columns: 1fr; }
  .rank-col + .rank-col { border-left: none; }
}

/* ================= Dashboard: perbandingan kriteria ================= */
.crit-body { display: grid; gap: 15px; }
.crit-row { display: flex; flex-direction: column; gap: 6px; }
.crit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.crit-name {
  font-size: 12.5px; font-weight: 550; color: var(--ink-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crit-val {
  flex: none; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px;
}
.crit-val small { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.crit-track { height: 8px; }
.fill.crit-fill-good { background: linear-gradient(90deg, #34d399, #12b76a); }
.fill.crit-fill-mid { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fill.crit-fill-bad { background: linear-gradient(90deg, #fb7185, #ef4444); }
.crit-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted-2);
}
.crit-tag {
  margin-left: auto; padding: 1px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
}
.crit-tag-top { color: #067647; background: #ecfdf3; }
.crit-tag-bot { color: #b42318; background: #fef3f2; }
.crit-more { font-size: 11.5px; color: var(--muted-2); text-align: center; padding-top: 2px; }

/* ================= Dashboard: diagram bulat petty cash ================= */
.donut-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; }
.donut-chart { position: relative; width: 100%; max-width: 210px; aspect-ratio: 1 / 1; justify-self: center; }
.donut-chart svg { display: block; width: 100%; height: 100%; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 0 44px;
  pointer-events: none;
}
.donut-center strong {
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2;
}
.donut-center span { font-size: 10.5px; color: var(--muted-2); line-height: 1.2; }
.donut-legend { min-width: 0; display: grid; gap: 0; }
.donut-item {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f3f8;
}
.donut-item:first-child { padding-top: 0; }
.donut-item:last-child { border-bottom: none; padding-bottom: 0; }
.donut-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-name {
  min-width: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donut-name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted-2); }
.donut-amt { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.donut-pct {
  min-width: 48px; text-align: right; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .donut-wrap { grid-template-columns: 1fr; gap: 20px; }
  .donut-chart { max-width: 190px; }
}


/* ================= Riwayat SP ================= */
.sp-rules {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.sp-rule { display: flex; align-items: center; gap: 7px; }
.sp-rule-score {
  font-weight: 650; font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 16px; text-align: center;
}
.sp-rule-text { font-size: 11.5px; color: var(--muted); }
.sp-rules .hint { margin-left: auto; }

.badge.sp-none { color: #067647; background: #ecfdf3; border-color: #d1fadf; }
.badge.sp-st { color: #175cd3; background: #eff8ff; border-color: #d1e9ff; }
.badge.sp1 { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.badge.sp2 { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.badge.sp3 { color: #fff; background: #b42318; border-color: #912018; }

.score-item.auto { background: #fbfbfe; border-radius: 10px; padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.score-item.auto .meta strong { display: flex; align-items: center; gap: 8px; }
.auto-score {
  display: flex; align-items: center; gap: 6px;
  background: #f6f7fb; border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 12px;
}
.auto-score strong { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ringkasan SP di dashboard */
.sp-totals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-totals .chip { gap: 4px; }
.sp-totals .chip strong { color: var(--ink); }
.sp-impact {
  font-weight: 650; font-size: 13.5px; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}

/* ================= Filter rentang tanggal ================= */
.range-card { padding: 16px 18px; }
.range-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.range-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.range-title > svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--brand); flex: none; }
.range-title strong { display: block; font-size: 13px; font-weight: 600; }
.range-title span { font-size: 12.5px; color: var(--muted); }

.range-filter {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.range-dates { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.range-field { display: flex; flex-direction: column; gap: 5px; }
.range-field > span { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.range-field .input { width: 152px; padding: 8px 10px; font-size: 13px; }
.range-dash { color: var(--muted-2); padding-bottom: 9px; }

.range-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset {
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.preset:hover { background: #f6f7fb; border-color: #c9cfdd; }
.preset.on { background: var(--brand-soft); border-color: #dfe1ff; color: var(--brand-ink); font-weight: 600; }
/* dropdown pilihan kuartal di ujung baris pintasan (sebelah "Custom") */
.range-presets .preset-quarter {
  width: auto; max-width: 150px; border-radius: 999px;
  padding: 6px 10px; font-size: 12px; font-weight: 500;
  border-color: var(--border-strong); background: var(--surface); color: var(--ink-2);
}
.range-presets .preset-quarter:focus { border-color: var(--brand); }

/* toggle mode Tanggal / Kuartal */
.range-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  background: #f4f5fa; border: 1px solid var(--border); border-radius: 10px;
}
.mode-btn {
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 550;
  padding: 6px 14px; border-radius: 7px;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.mode-btn:hover { color: var(--ink-2); }
.mode-btn.on {
  background: var(--surface); color: var(--brand-ink);
  border-color: var(--border); box-shadow: 0 1px 3px rgba(16,24,40,0.08);
}

/* pemilih kuartal */
.quarter-picker { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.quarter-picker .select { width: 104px; padding: 8px 10px; font-size: 13px; }
.quarter-btns { display: flex; gap: 6px; }
.quarter-hint { align-self: center; margin-left: auto; }

.range-note { margin-top: 12px; font-size: 11.5px; color: var(--muted-2); line-height: 1.65; }
.range-note strong { color: var(--ink-2); font-weight: 600; }

/* ================= Tren mingguan ================= */
.trend { display: flex; align-items: flex-end; gap: 10px; height: 168px; padding-top: 6px; }
.trend-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.trend-val { font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.trend-bar {
  flex: 1; width: 100%; max-width: 46px;
  display: flex; align-items: flex-end;
  background: #f4f5fa; border-radius: 8px; overflow: hidden;
}
.trend-fill {
  width: 100%; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #f06052, #e01f26);
  min-height: 3px;
}
.trend-fill.empty { background: #e4e6ef; }

/* kuartal: kolom minggu lebih banyak -> geser horizontal, jangan dipepetkan */
.trend.many { overflow-x: auto; justify-content: flex-start; gap: 8px; padding-bottom: 4px; }
.trend.many .trend-col { flex: 0 0 46px; }
.trend.many .trend-lbl { white-space: normal; font-size: 9.5px; line-height: 1.25; }
.trend-lbl {
  font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ================= Mingguan ================= */
.week-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.week-banner > svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--brand); flex: none; }
.week-banner > div { flex: 1; min-width: 0; }
.week-banner strong { display: block; font-size: 13px; font-weight: 600; }
.week-banner span { font-size: 12px; color: var(--muted); }
.week-banner .chip { flex: none; }

.week-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--muted); line-height: 1.6;
  background: #f7f8fc; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.week-note svg { width: 14px; height: 14px; stroke-width: 1.9; color: var(--muted); flex: none; margin-top: 2px; }
.week-note strong { color: var(--ink-2); font-weight: 600; }

/* ================= Outlet ================= */
/* di dalam topbar, select mengikuti isinya (bukan melebar penuh) */
.topbar-actions .select { width: auto; }
.outlet-filter { min-width: 168px; max-width: 240px; }

.outlet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.outlet-chip { background: #fdf1f1; border-color: #f7dcdb; color: #a3242a; }

.outlet-editor { display: flex; flex-direction: column; gap: 8px; }
.outlet-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; align-items: center; }
.outlet-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 8px;
  background: var(--brand-soft); border: 1px solid #dfe1ff; color: var(--brand-ink);
  font-size: 12px; font-weight: 550;
}
.outlet-pill .pill-x {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: none; background: transparent; color: #6b63d6; border-radius: 5px; padding: 0;
}
.outlet-pill .pill-x svg { width: 11px; height: 11px; stroke-width: 2.4; }
.outlet-pill .pill-x:hover { background: #dfe1ff; color: var(--brand-ink); }
.outlet-input-row { display: flex; gap: 8px; }
.outlet-input-row .input { flex: 1; min-width: 0; }

/* ================= Departemen ================= */
.dept-add { display: flex; gap: 10px; flex-wrap: wrap; }
.dept-add .input { flex: 1; min-width: 220px; }

.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 20px;
}
.dept-grid .card { margin: 0; }

.dept-card {
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 186px;            /* tinggi seragam supaya badge sejajar */
}
.dept-card .dept-top { margin-bottom: 2px; }
.dept-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dept-ic {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
  font-weight: 650; font-size: 12.5px; letter-spacing: 0.01em;
}
.dept-ic.d1 { background: var(--brand-soft); color: var(--brand-ink); }
.dept-ic.d2 { background: #ecfdf3; color: #067647; }
.dept-ic.d3 { background: #eff8ff; color: #175cd3; }
.dept-ic.d4 { background: #fffaeb; color: #b54708; }
.dept-ic.d5 { background: #fdf4ff; color: #a21caf; }

.dept-name {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
  min-height: 2.7em;            /* ruang 2 baris agar kartu tetap rata */
}
.dept-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.dept-kpi strong { color: var(--ink-2); font-weight: 600; }
.dept-dot { width: 3px; height: 3px; border-radius: 50%; background: #c9cedd; }
.dept-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }

/* ================= Login ================= */
body.auth-mode { background: var(--bg); }
body.auth-mode .app { display: none; }

.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(224, 31, 38, 0.09), transparent 60%),
    radial-gradient(620px 380px at 92% 4%, rgba(238, 42, 47, 0.08), transparent 62%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 28px 26px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.09);
}
.auth-head .brand { padding: 0; margin-bottom: 22px; }
.auth-head h1 { font-size: 21px; letter-spacing: -0.02em; }
.auth-head p { margin-top: 6px; color: var(--muted); font-size: 13px; }
/* Link lama (subdomain platform) hanya untuk Leader — catatan di layar login */
.auth-mode-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 8px;
  margin-top: 14px; padding: 9px 12px;
  font-size: 12px; line-height: 1.5; color: #8a3a12;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
}
.auth-mode-note strong { color: #7c2d12; }
/* teks wajib boleh pecah: nama domain panjang tidak boleh melebarkan kartu login */
.auth-mode-note span { min-width: 0; overflow-wrap: anywhere; }
.auth-mode-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; stroke-width: 2; }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.role-grid.single { grid-template-columns: 1fr; }
/* jumlah peran ganjil: kartu terakhir melebar penuh agar tidak menggantung */
.role-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.role-card {
  position: relative; text-align: left;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--border-strong); border-radius: 13px;
  background: var(--surface);
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.role-card:hover { border-color: #c3c8dd; background: #fbfbfe; }
.role-card.on { border-color: #f2a9a4; background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(224, 31, 38, 0.10); }
.role-ic {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: #f4f5fa; color: var(--muted);
}
.role-ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.role-card.on .role-ic { background: #fff; color: var(--brand); }
.role-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.role-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.role-check { position: absolute; top: 10px; right: 10px; opacity: 0; color: var(--brand); }
.role-check svg { width: 14px; height: 14px; stroke-width: 2.4; }
.role-card.on .role-check { opacity: 1; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.auth-submit { width: 100%; padding: 11px 14px; font-size: 13.5px; }
.auth-hint { font-size: 11.5px; color: var(--muted-2); line-height: 1.6; text-align: center; }
.auth-notice {
  font-size: 12.5px; color: #b54708; background: #fffaeb;
  border: 1px solid #fedf89; border-radius: 9px; padding: 9px 12px;
}

/* ================= User chip (sidebar) ================= */
.sidebar-foot { padding-left: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.user-avatar { width: 32px; height: 32px; font-size: 11.5px; background: var(--brand-soft); color: var(--brand-ink); }
.user-meta { min-width: 0; }
.user-meta strong { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.user-meta span { font-size: 11px; color: var(--muted-2); }
.user-actions { display: flex; gap: 6px; }
.user-actions .btn { flex: 1; padding: 6px 8px; font-size: 12px; }

/* ================= Modal ================= */
.overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 40, 0.42);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50; animation: fade 0.14s ease-out;
}
.modal {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
  animation: pop 0.16s ease-out;
}
.modal.wide { max-width: 640px; }
/* modal dokumen Core Process: memuat tabel ceklist 7 kolom (No … Target Waktu … Centang) */
.modal.xwide { max-width: 1040px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; }
.modal-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 18px 18px; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.99) } to { opacity: 1; transform: none } }

/* history inside detail modal */
.hist { display: flex; flex-direction: column; gap: 12px; }
.hist-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.hist-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hist-top strong { font-size: 13px; }
.breakdown { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.bd-row { display: grid; grid-template-columns: 1fr 58px 32px; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.bd-row .track { height: 5px; }

/* ================= Toast ================= */
.toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast {
  background: #101828; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; box-shadow: var(--shadow-lg); animation: pop 0.16s ease-out;
  display: flex; align-items: center; gap: 8px;
}
.toast.err { background: #b42318; }
.toast.ok { background: #054f31; }

/* ================= Responsive ================= */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-dash, .grid-assess { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; flex: none; height: auto;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 14px 16px; gap: 14px;
  }
  .sidebar-foot { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .nav-label { display: none; }
  .nav-item { white-space: nowrap; }
  .main { padding: 20px 16px 48px; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .range-filter { align-items: stretch; }
  .range-field { flex: 1 1 130px; }
  .range-field .input { width: 100%; }
  .trend { height: 156px; gap: 6px; }
  .trend-lbl {
    white-space: normal; font-size: 9.5px; line-height: 1.25;
    overflow: visible; text-overflow: clip;
  }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .week-banner { flex-wrap: wrap; }
  .week-banner > div { flex: 1 1 140px; }
  .outlet-filter { width: 100%; }
  .auth-card { padding: 22px 18px; border-radius: 16px; }
  .role-grid { grid-template-columns: 1fr; gap: 10px; }
  .dept-grid { grid-template-columns: 1fr; }
  .dept-add .input { min-width: 0; }
  .dept-add .btn { width: 100%; }
  .topbar h1 { font-size: 19px; }
  .score-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .segmented button { width: 38px; }
}

/* --- Laporan kerusakan: pasangan foto sebelum → sesudah --- */
.dm-thumb img { border-radius: 8px; }
.dm-photos { display: flex; align-items: center; gap: 6px; flex: none; }
.dm-arrow { font-size: 12px; color: var(--muted-2); line-height: 1; }
.dm-nophoto {
  width: var(--s, 46px); height: var(--s, 46px);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border: 1px dashed var(--border-strong, #d8dbe6); border-radius: 8px;
  color: var(--muted-2); background: #fafbff; flex: none;
}
.dm-nophoto svg { width: 15px; height: 15px; }
.dm-nophoto small { font-size: 8.5px; line-height: 1; }
.dm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.dm-row:last-child { border-bottom: none; }
.dm-row .grow strong { display: block; font-size: 13px; }
.dm-row .grow small { display: block; font-size: 11.5px; color: var(--muted); }
.dm-row .hint { margin-top: 2px; }
@media (max-width: 560px) {
  .dm-row { flex-wrap: wrap; }
}

/* --- Label kecil cakupan filter di judul kartu dashboard (Semua outlet / Outlet + Area) --- */
.scope-tag {
  display: inline-block; margin-top: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--brand-ink, #b3121d); background: var(--brand-soft, #fdecee);
  border: 1px solid rgba(224, 31, 38, .18);
  border-radius: 999px; padding: 2px 8px; line-height: 1.5;
  max-width: 100%; overflow-wrap: anywhere;
}

/* Ikon di dalam label cakupan kecil — WAJIB dibatasi. SVG tanpa atribut
   width/height akan melebar memenuhi kartu (bug: "gambar mata merah raksasa"
   di halaman Performance Korsekpanjo). */
.scope-tag svg,
.area-locked svg,
.chip-locked svg {
  width: 12px; height: 12px; flex: none;
  stroke-width: 2.2; vertical-align: -2px;
}

/* --- Diagram BATANG perbandingan per outlet (dashboard: Petty Cash, Uang Makan, Casual) --- */
.bars-body { padding-top: 4px; }
.bars { display: grid; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  font-size: 12.5px;
}
.bar-name { min-width: 0; }
.bar-name strong {
  display: block; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-name small {
  display: block; font-size: 10.5px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-track {
  display: block; height: 12px; border-radius: 999px;
  background: #f1f2f7; overflow: hidden;
}
.bar-fill {
  display: block; height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(90deg, #ee2a2f, #c8181f);
}
.bar-val { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-pct {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: right;
}
.row-actions .select { width: auto; max-width: 190px; padding: 7px 10px; font-size: 12.5px; }

/* Blok lipat (rekap per orang di kartu dashboard) */
.collapse { border-top: 1px solid var(--border); }
.collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; background: var(--surface-2);
}
.collapse-head::-webkit-details-marker { display: none; }
.collapse-head span { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.collapse-body { padding: 14px 20px; }

@media (max-width: 640px) {
  .bar-row { grid-template-columns: minmax(74px, 112px) minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .bar-pct { display: none; }
  /* judul kartu + filter (mis. COA petty cash) harus boleh turun baris di layar kecil */
  .card-head { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .card-head .row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 6px; width: 100%; }
  .row-actions .select { max-width: 100%; }
}

/* ================= Riwayat SP: filter Area/Outlet & rekap per outlet ================= */
.sp-filters { padding: 12px 16px; }
.sp-filters .select { width: auto; min-width: 160px; max-width: 100%; }
.sp-sub-label {
  padding: 4px 20px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2);
}
.card-body.sp-outlets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px; padding-top: 0;
}
.sp-outlet {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.sp-outlet-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sp-outlet-top strong {
  font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-outlet-val {
  font-size: 12.5px; font-weight: 700; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-outlet small { font-size: 11.5px; color: var(--muted); }
.sp-outlet-track {
  display: block; height: 6px; border-radius: 999px; background: #f1f3f8; overflow: hidden;
}
.sp-outlet-track span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ee2a2f, #c8181f);
}
.sp-outlet-chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* ================= Isi Scorecard: "Ubah tanggal" & layar sempit ================= */
/* Kartu & item scorecard boleh menyusut agar tidak menimbulkan overflow horizontal
   di HP (sebelum ini halaman Isi Scorecard melebar ~90px pada 390px). */
.grid-assess > .card,
.sc-item,
.sc-item > * { min-width: 0; }
/* halaman Ceklist Outlet & Hasil per Outlet: kartu + tabel di dalam grid wajib boleh menyusut */
.grid-dash > .card, .grid-dash > .stack, .stack > .card, .stack > * { min-width: 0; }
.sc-item-meta strong { overflow-wrap: anywhere; }
.form-actions { flex-wrap: wrap; }

/* ================= Core Process & SOP ================= */
/* Daftar dokumen: chip jenis, judul, meta, status, aksi. */
.core-search { position: relative; flex: 1; min-width: 190px; max-width: 320px; }
.core-search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-2); stroke-width: 1.8;
}
.core-search .input { padding-left: 33px; }

.core-list { display: flex; flex-direction: column; }
.core-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.core-item:first-child { border-top: none; }
.core-kind {
  flex: none; min-width: 96px; text-align: center;
  font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid #fadcdb; border-radius: 7px; padding: 4px 8px;
}
.core-kind.sop { color: #175cd3; background: #eff8ff; border-color: #d1e9ff; }
.core-main { flex: 1; min-width: 190px; }
.core-main strong { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.core-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.core-meta2 { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.core-item .row-actions { flex-wrap: wrap; }

/* Form identitas dokumen. */
.core-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.core-grid > .field { min-width: 0; }

/* Editor tahap proses: satu baris = satu tahap. */
.core-steps { display: flex; flex-direction: column; gap: 12px; }
.core-step {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fcfcfe; padding: 12px;
}
.core-step-no {
  flex: none; width: 24px; height: 24px; margin-top: 21px; border-radius: 7px;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 11.5px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.core-step-fields {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 1fr 2.2fr 1fr 1.2fr 1fr; gap: 10px;
}
.core-step-fields label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 11px; font-weight: 500; color: var(--ink-2);
}
.core-step-fields .textarea { min-height: 54px; }

/* Pratinjau dokumen di modal. */
.core-info {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.core-info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.core-info-item span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.core-info-item strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.core-section { margin-top: 20px; }
.core-section h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 8px;
}
.core-section p { font-size: 13px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
.core-table td, .core-table th { vertical-align: top; }
.core-table td { font-size: 12.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .core-step-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .core-grid { grid-template-columns: minmax(0, 1fr); }
  .core-step { padding: 10px; }
  .core-step-fields { grid-template-columns: minmax(0, 1fr); }
  .core-step-no { margin-top: 19px; }
  .core-info { grid-template-columns: minmax(0, 1fr); }
  .core-search { max-width: 100%; }
  .core-item { padding: 12px 16px; gap: 10px; }
  .core-item .row-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Core Process: tab pemisah Core Process / SOP ---------- */
.core-tabs { width: fit-content; max-width: 100%; }
/* .segmented button bawaan berukuran 34x30 (untuk skor 1-5), jadi di sini
   lebar/tingginya harus dilepas lagi supaya teks "Core Process"/"SOP" tidak terpotong. */
.core-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; height: auto; min-height: 32px;
  padding: 7px 14px; white-space: nowrap; font-size: 12.5px;
}
.core-tabs small {
  font-size: 10.5px; font-weight: 650; color: var(--muted-2);
  background: #eef0f7; border-radius: 999px; padding: 1px 6px;
}
.core-tabs button.on small { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Baris daftar: blok persentase pengerjaan ---------- */
.core-side {
  flex: none; width: 236px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.core-prog { width: 100%; }
.core-prog-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted); font-weight: 500;
}
.core-prog-top strong {
  font-size: 13px; font-weight: 700; color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.core-prog-track { height: 6px; margin-top: 4px; }
.core-prog-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ee2a2f, #c8181f);
  transition: width .18s ease;
}
.core-prog-fill.mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.core-prog-fill.low { background: linear-gradient(90deg, #fb7185, #ef4444); }
.core-prog-fill.full { background: linear-gradient(90deg, #34d399, #10b981); }
.core-prog-note { font-size: 10.5px; color: var(--muted-2); margin-top: 4px; }
.core-nocheck {
  font-size: 10.5px; color: var(--muted-2); background: #f5f6fa;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px;
}

/* ---------- Panel ceklist pengerjaan (modal detail) ---------- */
.ck-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ck-head h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand);
}
.ck-head .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; max-width: 420px; }
.ck-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-tools .input { width: 150px; }

.ck-summary {
  display: flex; align-items: center; gap: 16px;
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.ck-big {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ck-big small { font-size: 13px; font-weight: 600; margin-left: 2px; }
.ck-big.full { color: #067647; }
.ck-big.mid { color: #b54708; }
.ck-summary-main { flex: 1; min-width: 0; }
.ck-track { height: 8px; }
.ck-summary-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* (lama) daftar ceklist berbentuk kartu — sekarang diganti tabel .ck-table */
.ck-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ck-step {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--border); border-radius: 11px; background: #fff;
  padding: 11px 13px; cursor: pointer; transition: background .14s, border-color .14s;
}
.ck-step:hover { background: #fcfcff; border-color: #dcdff0; }
.ck-step.on { background: #f4fdf8; border-color: #c9efdc; }
.ck-step input {
  flex: none; width: 17px; height: 17px; margin-top: 2px;
  accent-color: #10b981; cursor: pointer;
}
.ck-step input:disabled { cursor: default; }
.ck-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ck-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ck-line strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ck-step.on .ck-line strong { color: #067647; }
.ck-time {
  flex: none; font-size: 10.5px; font-weight: 650; color: var(--muted);
  background: #f2f4fa; border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.ck-act { font-size: 12px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.ck-meta, .ck-by { font-size: 10.5px; color: var(--muted-2); overflow-wrap: anywhere; }
.ck-by { color: #067647; }

.ck-history { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.ck-hist-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px;
}
.ck-hist {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px 40px;
  align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px;
  cursor: pointer;
}
.ck-hist:hover { background: #f7f8fc; }
.ck-hist.on { background: var(--brand-soft); }
.ck-hist-date { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ck-hist-track { height: 6px; border-radius: 999px; background: #f1f3f8; overflow: hidden; }
.ck-hist-track span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ee2a2f, #c8181f);
}
.ck-hist strong {
  font-size: 12px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ck-hist small { font-size: 10.5px; color: var(--muted-2); text-align: right; }
.ck-readonly { margin-top: 12px; }

@media (max-width: 900px) {
  .core-side { width: 100%; }
}
@media (max-width: 640px) {
  .core-tabs { width: 100%; }
  .core-tabs button { flex: 1 1 0; width: auto; justify-content: center; padding: 8px 10px; }
  .ck-tools { width: 100%; }
  .ck-tools .input { flex: 1; min-width: 130px; }
  .ck-hist { grid-template-columns: 82px minmax(0, 1fr) 40px; }
  .ck-hist small { display: none; }
  .ck-summary { gap: 12px; padding: 12px 13px; }
  .ck-big { font-size: 25px; }
}

/* ---------- Pemilih template Core Process ---------- */
.tpl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tpl-item {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 14px 15px; cursor: pointer; transition: border-color .14s, background .14s;
  font: inherit; color: inherit;
}
.tpl-item:hover { border-color: #f7c9c8; background: #fffafa; }
.tpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tpl-head strong { font-size: 13.5px; font-weight: 620; line-height: 1.35; }
.tpl-sum { font-size: 12px; color: var(--muted); line-height: 1.55; }
.tpl-pic { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.tpl-pic .chip { font-size: 10.5px; padding: 2px 7px; }

/* ---------- Hasil pengerjaan (pekerjaan yang sudah selesai) ---------- */
.ck-result {
  margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fbfcff; padding: 14px 16px;
}
.ck-result.done { background: #f6fdf9; border-color: #cdefdd; }
.ck-result-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ck-result-head h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #067647;
}
.ck-result-head .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ck-result-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-result-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ck-result-list li {
  list-style: none; display: flex; flex-direction: column; gap: 3px;
  border-left: 3px solid #10b981; padding: 2px 0 2px 11px;
}
.ck-res-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ck-res-top strong { font-size: 12.5px; font-weight: 620; color: #067647; }
.ck-res-act { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.ck-res-meta { font-size: 10.5px; color: var(--muted-2); line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .tpl-list { grid-template-columns: minmax(0, 1fr); }
  .ck-result { padding: 12px 13px; }
  .ck-result-tools { width: 100%; }
}

/* ---------- Tabel ceklist pengerjaan (kotak centang di sebelah Target Waktu) ---------- */
.ck-table-wrap {
  margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 420px; overflow: auto;
}
.ck-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ck-table th {
  position: sticky; top: 0; z-index: 2;
  background: #fbfbfe; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ck-table td {
  padding: 9px 10px; font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid #f0f1f6; vertical-align: top; line-height: 1.5;
}
.ck-table tbody tr:last-child td { border-bottom: none; }
.ck-table tbody tr.on { background: #f5fdf9; }
.ck-table tbody tr:hover { background: #fafbff; }
.ck-table tbody tr.on:hover { background: #f0fcf5; }
.ck-table .ck-no { width: 34px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-table th.ck-stage, .ck-table td.ck-stage { width: 132px; }
.ck-table td.ck-stage strong { font-size: 12.5px; font-weight: 620; }
.ck-table tr.on td.ck-stage strong { color: #067647; }
.ck-table th.ck-act, .ck-table td.ck-act { min-width: 220px; overflow-wrap: anywhere; }
.ck-table th.ck-pic, .ck-table td.ck-pic { width: 118px; }
.ck-table th.ck-output, .ck-table td.ck-output { width: 140px; overflow-wrap: anywhere; }
.ck-table th.ck-target, .ck-table td.ck-target { width: 100px; white-space: nowrap; }

/* kolom centang: menempel di kanan supaya tetap terlihat saat tabel digeser */
.ck-table th.ck-check, .ck-table td.ck-check {
  width: 92px; text-align: center; position: sticky; right: 0;
  background: #fff; box-shadow: -1px 0 0 var(--border);
}
.ck-table th.ck-check { z-index: 3; background: #fbfbfe; }
.ck-table tbody tr.on td.ck-check { background: #f0fcf5; }
.ck-table tbody tr:hover td.ck-check { background: #fafbff; }
.ck-table tbody tr.on:hover td.ck-check { background: #eefaf3; }

.ck-box {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  text-align: left; user-select: none;
}
.ck-box input {
  width: 19px; height: 19px; flex: none; margin: 0;
  accent-color: #10b981; cursor: pointer;
}
.ck-box input:disabled { cursor: default; accent-color: #c7cad6; }
.ck-box-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ck-box-text strong { font-size: 10.5px; font-weight: 650; color: var(--muted); }
.ck-box.on .ck-box-text strong { color: #067647; }
.ck-box-text small { font-size: 9.5px; color: var(--muted-2); white-space: nowrap; }

@media (max-width: 640px) {
  .ck-table th, .ck-table td { padding: 8px; font-size: 12px; }
  .ck-table th.ck-act, .ck-table td.ck-act { min-width: 190px; }
  .ck-table th.ck-check, .ck-table td.ck-check { width: 78px; }
  .ck-box-text small { display: none; }
}

/* ---------- Impor dokumen Core Process / SOP ---------- */
.core-import-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 13px;
  border: 1px solid #d1e9ff; background: #eff8ff; border-radius: 10px;
  font-size: 12px; color: #175cd3; line-height: 1.5;
}
.core-import-note svg { width: 15px; height: 15px; flex: none; stroke-width: 1.9; }
.core-import-note strong { font-weight: 650; }

/* Ceklist kosong: dokumen Core Process belum punya tahap proses. */
.ck-empty {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding: 14px 16px;
  border: 1px dashed #d7d9e6; border-radius: var(--radius-sm);
  background: #fbfcff;
}
.ck-empty strong { font-size: 13px; font-weight: 620; color: var(--ink-2); }
.ck-empty span { font-size: 12px; color: var(--muted); line-height: 1.6; }
.core-nocheck.warn { background: #fffaeb; border-color: #fedf89; color: #b54708; }

/* ================= Ceklist Outlet (mingguan) ================= */
.oc-list { display: flex; flex-direction: column; }
.oc-item {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid var(--border);
}
.oc-item:first-child { border-top: none; }
.oc-item.done { background: #fcfdff; }
.oc-main { flex: 1; min-width: 160px; }
.oc-main strong { display: block; font-size: 13.5px; font-weight: 620; }
.oc-meta { font-size: 11.5px; color: var(--muted); }
.oc-side { flex: none; width: 260px; display: flex; align-items: center; gap: 10px; }
.oc-side .oc-bar { flex: 1; }
.oc-count {
  flex: none; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted-2); min-width: 44px; text-align: right;
}
.oc-bar-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--muted);
}
.oc-bar-top strong { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.oc-track { height: 7px; margin-top: 4px; }

/* form ceklist */
.oc-form-head { display: grid; grid-template-columns: 170px minmax(0, 1fr) 240px; gap: 16px; align-items: end; }
.oc-note-field { min-width: 0; }
.oc-progress-field { min-width: 0; padding-bottom: 2px; }
.oc-bulk { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.oc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.oc-table th {
  position: sticky; top: 0; z-index: 2; background: #fbfbfe;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.oc-table td { padding: 7px 10px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; font-size: 12.5px; }
.oc-table tbody tr:last-child td { border-bottom: none; }
.oc-table tbody tr.on { background: #f5fdf9; }
.oc-table .oc-name { overflow-wrap: anywhere; line-height: 1.5; }
.oc-table tr.on .oc-name { color: #067647; font-weight: 550; }
.oc-table .oc-check { text-align: center; }
.oc-in { padding: 6px 8px; font-size: 12px; }

/* butir ceklist (modal) */
.oc-items-add { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.oc-items-add .select { width: 190px; }
.oc-items-add .input { flex: 1; min-width: 180px; }
.oc-items-list { display: flex; flex-direction: column; gap: 14px; }
.oc-items-head {
  display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
}
.oc-items-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.oc-items-row .input { font-size: 12.5px; padding: 7px 9px; }

/* ================= Hasil per Outlet ================= */
.oc-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 20px 16px;
}
.oc-filters .select { width: auto; min-width: 160px; max-width: 100%; }
.oc-rank td { font-size: 12.5px; }
.oc-rank .num { text-align: right; font-variant-numeric: tabular-nums; }
.oc-cat-row { margin-bottom: 14px; }
.oc-cat-row:last-child { margin-bottom: 0; }
.oc-cat-name {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px;
}
.oc-area-row { padding: 10px 0; border-top: 1px solid var(--border); }
.oc-area-row:first-child { border-top: none; padding-top: 0; }
.oc-area-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.oc-area-top strong { font-size: 13px; font-weight: 620; }
.oc-area-meta {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--muted-2); margin-top: 4px;
}

/* tren batang (kolom) */
.oc-trend { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.oc-trend.many .oc-trend-col { min-width: 52px; }
.oc-trend-col { flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oc-trend-bar {
  width: 100%; height: 120px; background: #f4f5fa; border-radius: 7px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.oc-trend-bar span {
  display: block; width: 100%; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #ee2a2f, #c8181f);
}
.oc-trend-bar span.mid { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.oc-trend-bar span.low { background: linear-gradient(180deg, #fb7185, #ef4444); }
.oc-trend-bar span.full { background: linear-gradient(180deg, #34d399, #10b981); }
.oc-trend-val { font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.oc-trend-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.oc-trend-sub { font-size: 9.5px; color: var(--muted-2); white-space: nowrap; }
.oc-worst td { font-size: 12.5px; vertical-align: middle; }
.oc-worst .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

@media (max-width: 900px) {
  .oc-form-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oc-progress-field { grid-column: 1 / -1; }
  .oc-side { width: 100%; }
}
@media (max-width: 640px) {
  .oc-form-head { grid-template-columns: minmax(0, 1fr); }
  .oc-item { padding: 12px 16px; gap: 10px; }
  .oc-item .row-actions { width: 100%; justify-content: flex-start; }
  .oc-filters { padding: 0 16px 14px; }
  .oc-filters .select { flex: 1; min-width: 130px; }
  .oc-items-add .select { width: 100%; }
}

/* angka persentase di samping bar (tabel peringkat & butir terburuk) */
.oc-rank-pct { display: flex; align-items: center; gap: 8px; }
.oc-rank-pct .track { flex: 1; height: 7px; }
.oc-rank-pct strong {
  flex: none; min-width: 46px; text-align: right;
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* kartu ringkas ceklist outlet di dashboard */
.oc-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.oc-dash-grid > div { min-width: 0; }
.oc-sub-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 8px;
}
.oc-dash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.oc-dash-row:first-of-type { border-top: none; }
.oc-dash-row .grow { flex: 1; min-width: 0; }
.oc-dash-row strong { display: block; font-size: 12.5px; font-weight: 580; }
.oc-dash-row small { font-size: 10.5px; color: var(--muted-2); }
.oc-dash-pct {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.oc-dash-area {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--ink-2); padding: 5px 0;
}
.oc-dash-area strong { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 700px) {
  .oc-dash-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* area terkunci untuk SPV Outlet (dashboard) */
.area-locked {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); border-color: #fadcdb; color: var(--brand-ink);
  font-weight: 600; white-space: nowrap;
}

/* ============ Ceklist Outlet: gambar contoh standar & hapus ============ */
/* thumbnail di kolom "Contoh benar" pada tabel form ceklist */
.oc-table .oc-pic { text-align: center; }
.oc-nopic { color: #c7c9d6; font-size: 13px; }
.oc-ex {
  display: inline-flex; width: 58px; height: 58px; padding: 0; cursor: zoom-in;
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 2px rgba(31, 27, 58, .06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.oc-ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-ex:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(31, 27, 58, .13); }

/* pratinjau gambar besar */
.img-preview {
  display: flex; align-items: center; justify-content: center;
  background: #f6f7fb; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; max-height: 70vh; overflow: auto;
}
.img-preview img { max-width: 100%; max-height: 66vh; border-radius: 8px; display: block; }

/* modal Kelola butir: kelola gambar contoh per butir */
.oc-items-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.55; color: var(--muted);
  background: var(--brand-soft); border: 1px solid #fadcdb; border-radius: 10px;
  padding: 9px 12px; margin: 0 0 14px;
}
.oc-items-hint svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
.oc-img-btn {
  flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px dashed #d6d8e4; border-radius: 8px; background: #fbfbfe;
  color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.oc-img-btn svg { width: 15px; height: 15px; }
.oc-img-btn.has { border-style: solid; border-color: var(--border); cursor: zoom-in; background: #fff; }
.oc-img-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-items-row .input { flex: 1; min-width: 120px; }

@media (max-width: 640px) {
  .oc-ex { width: 48px; height: 48px; }
  .oc-items-row { flex-wrap: wrap; }
  .oc-items-row .input { flex: 1 1 100%; order: 9; }
}

/* ============ Indikator Pembukaan Outlet Baru (#/opening) ============ */
.op-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.op-hero > div { min-width: 0; }
.op-phase { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fcfcff; min-width: 0; }
.op-phase-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.op-phase-top span { color: var(--ink-2); font-weight: 600; }
.op-phase-top strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.op-phase .track { margin-top: 8px; }
.op-phase-foot { font-size: 10.5px; color: var(--muted-2); margin-top: 6px; }

/* tiga bar mini capaian per fase di baris daftar outlet */
.op-phases {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 8px; max-width: 520px;
}
.op-mini { min-width: 0; }
.op-mini-label {
  display: block; font-size: 9.5px; color: var(--muted-2);
  letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.op-mini .track { height: 5px; margin-top: 3px; }
.op-mini-val { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* kepala form isi indikator (area, target buka, catatan, progres) */
.op-form-head { grid-template-columns: 180px 170px minmax(0, 1fr) 240px; }
.op-table .op-desc { display: block; margin-top: 3px; font-size: 11px; color: var(--muted-2); line-height: 1.5; }
.op-table .op-pic { font-size: 11.5px; color: var(--ink-2); }
.op-table tr.op-sec td {
  background: #f7f8fc; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); padding: 7px 10px;
}

/* modal Kelola butir */
.op-item-form {
  display: grid; grid-template-columns: 200px 240px minmax(0, 1fr) 150px;
  gap: 12px; align-items: end;
  border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fcfcff;
}
.op-item-form .op-wide { grid-column: span 2; }
.op-item-form .form-actions { grid-column: 1 / -1; margin: 0; }
.op-items-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.op-items-row { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #f2f3f8; padding: 7px 0; }
.op-items-name { flex: 1; min-width: 0; }
.op-items-name strong { display: block; font-size: 12.5px; font-weight: 580; overflow-wrap: anywhere; }
.op-items-name small { font-size: 10.5px; color: var(--muted-2); }

@media (max-width: 900px) {
  .op-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .op-form-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .op-item-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .op-phases { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .op-item-form { grid-template-columns: minmax(0, 1fr); }
  .op-item-form .op-wide { grid-column: span 1; }
}

/* Filter periode Pembukaan Outlet: 5 tombol (Semua/Bulanan/Kuartalan/Tahunan/Custom)
   harus boleh turun baris, kalau tidak kartu filter melebar di HP. */
.mode-toggle.wrap { flex-wrap: wrap; }
@media (max-width: 520px) {
  .mode-toggle.wrap { width: 100%; }
  .mode-toggle.wrap .mode-btn { flex: 1 1 auto; padding: 6px 8px; font-size: 11.5px; text-align: center; }
}

/* ============ Pembukaan Outlet: 5 kartu statistik ============ */
/* Dipakai halaman Pembukaan Outlet (Tambahan Outlet, Total Outlet Keseluruhan,
   Sudah 100%, Belum ada tanggal buka, Rata-rata capaian). */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid-5 { grid-template-columns: 1fr; }
}
.grid-5 .stat-label { line-height: 1.35; }
.grid-5 .stat-value { font-size: 26px; }

/* ============ Penilaian: penanda LEVEL (Crew / Leader) ============ */
/* Muncul di form Penilaian untuk menjelaskan set kriteria yang dipakai:
   crew = kriteria KPI, Leader = butir measurable Scorecard Leader. */
.level-note {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--brand-soft, #f6dcd6);
  background: var(--brand-soft, #fdf3f1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2, #55516f);
}
.level-note strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand, #e01f26);
}
.level-note span { min-width: 0; }
.level-note em { font-style: normal; font-weight: 600; }
@media (max-width: 480px) {
  .level-note { font-size: 11.5px; }
}

/* ============ Asesmen Leader & SPV Area ============ */
/* Modul tracking kandidat promosi: 6 kartu statistik, chip status berwarna,
   tabel kandidat, modal penilaian kriteria + riwayat status. */
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ase-tone-total { }
.ase-stat { position: relative; padding-top: 16px; }
.ase-stat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 999px 999px 0 0; background: var(--border-strong);
}
.ase-tone-proses.ase-stat::before, .ase-dash-stat.ase-tone-proses { background: #dbe7fe; }
.ase-tone-proses.ase-stat::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.ase-tone-pertimbangan.ase-stat::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ase-tone-lulus.ase-stat::before { background: linear-gradient(90deg, #34d399, #12b76a); }
.ase-tone-gagal.ase-stat::before { background: linear-gradient(90deg, #fb7185, #ef4444); }
.ase-tone-nilai.ase-stat::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }

.ase-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); background: #f5f6fa; color: var(--ink-2);
  white-space: nowrap;
}
.ase-chip.ase-tone-proses { color: #175cd3; background: #eff8ff; border-color: #d1e9ff; }
.ase-chip.ase-tone-pertimbangan { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.ase-chip.ase-tone-lulus { color: #067647; background: #ecfdf3; border-color: #d1fadf; }
.ase-chip.ase-tone-gagal { color: #b42318; background: #fef3f2; border-color: #fecdca; }

.ase-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 20px 16px; }
.ase-filters .input, .ase-filters .select { width: auto; min-width: 168px; flex: 1 1 168px; max-width: 260px; }
.ase-table td { vertical-align: top; }
.ase-name strong { font-weight: 600; display: block; }
.ase-name small { color: var(--muted); font-size: 11.5px; }
.ase-note { max-width: 320px; }
.ase-score-cell .ase-track { height: 5px; margin: 6px 0 3px; width: 110px; }
.ase-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.ase-fill-lulus { background: linear-gradient(90deg, #34d399, #12b76a); }
.ase-fill-pertimbangan { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ase-fill-gagal { background: linear-gradient(90deg, #fb7185, #ef4444); }
.ase-fill-empty { background: #e4e6ef; }
.ase-status-select { padding: 6px 8px; font-size: 12px; }
.ase-last { font-size: 11px; line-height: 1.45; }
.ase-legend { padding-top: 0; }

/* detail kandidat */
.ase-detail-head { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.ase-detail-info {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px;
  flex: 1 1 320px; min-width: 0;
}
.ase-detail-info > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ase-detail-info span { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.03em; }
.ase-detail-info strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.ase-detail-score {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 2px; padding: 12px 18px; border-radius: 14px;
  background: var(--brand-soft); border: 1px solid #fadcdb; min-width: 160px;
}
.ase-detail-score span { font-size: 11px; color: var(--brand-ink); text-transform: uppercase; letter-spacing: 0.03em; }
.ase-detail-score strong { font-size: 30px; line-height: 1.1; color: var(--brand-deep); }
.ase-detail-score small { font-size: 11px; color: var(--brand-ink); }
.ase-detail-note {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #f7f8fc; border: 1px solid var(--border); font-size: 12.5px; color: var(--ink-2);
}
.ase-sub { margin: 20px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ase-crit-table td { vertical-align: middle; }
.ase-crit-name { font-weight: 550; font-size: 12.5px; }
.ase-crit-w { width: 64px; color: var(--muted); font-size: 12px; }
.ase-crit-note .input { font-size: 12px; padding: 7px 9px; }
.segmented.ro { opacity: 0.75; }
.ase-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ase-status-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.ase-status-btn:hover:not(:disabled) { border-color: var(--border-strong); }
.ase-status-btn:disabled { opacity: 0.6; cursor: default; }
.ase-status-btn.on.ase-tone-proses { background: #eff8ff; border-color: #84caff; color: #175cd3; }
.ase-status-btn.on.ase-tone-pertimbangan { background: #fffaeb; border-color: #fec84b; color: #b54708; }
.ase-status-btn.on.ase-tone-lulus { background: #ecfdf3; border-color: #75e0a7; color: #067647; }
.ase-status-btn.on.ase-tone-gagal { background: #fef3f2; border-color: #fda29b; color: #b42318; }

.ase-timeline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ase-timeline li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; }
.ase-timeline li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ase-timeline strong { font-size: 12.5px; font-weight: 600; }
.ase-timeline small { color: var(--muted-2); font-size: 10.5px; }
.ase-tl-text { color: var(--ink-2); font-size: 12px; }
.ase-tl-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; background: var(--border-strong);
}
.ase-tl-dot.ase-tone-proses { background: #3b82f6; }
.ase-tl-dot.ase-tone-pertimbangan { background: #f59e0b; }
.ase-tl-dot.ase-tone-lulus { background: #12b76a; }
.ase-tl-dot.ase-tone-gagal { background: #ef4444; }

/* kelola kriteria */
.ase-crit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ase-crit-manage td { vertical-align: middle; }
.ase-crit-manage .input { font-size: 12.5px; padding: 7px 9px; }
.ase-crit-manage .input.num { text-align: right; }
.ase-crit-new td { background: #fbfcfe; }

/* kartu dashboard */
.ase-dash-body { display: block; }
.ase-dash-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ase-dash-stat {
  border-radius: 12px; padding: 10px 12px; background: #f7f8fc; border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ase-dash-stat span { font-size: 11px; color: var(--muted); }
.ase-dash-stat strong { font-size: 20px; line-height: 1.1; }
.ase-dash-stat.ase-tone-total { background: #f4f5fa; }
.ase-dash-stat.ase-tone-proses { background: #eff8ff; border-color: #d1e9ff; }
.ase-dash-stat.ase-tone-pertimbangan { background: #fffaeb; border-color: #fedf89; }
.ase-dash-stat.ase-tone-lulus { background: #ecfdf3; border-color: #d1fadf; }
.ase-dash-stat.ase-tone-gagal { background: #fef3f2; border-color: #fecdca; }
.ase-dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.ase-level-row { margin-bottom: 12px; }
.ase-level-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.ase-level-name { font-size: 12.5px; font-weight: 600; }
.ase-level-val { font-size: 11.5px; color: var(--muted); }
.ase-level-sub { font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.ase-level-row .track { height: 6px; }
.ase-mini { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ase-mini:last-child { border-bottom: 0; }
.ase-mini-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ase-mini-main strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ase-mini-main small { font-size: 11px; color: var(--muted-2); }
.ase-mini-score { font-size: 13px; font-weight: 650; color: var(--brand-ink); }

@media (max-width: 1080px) {
  .ase-dash-cols { grid-template-columns: 1fr; }
  .ase-dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ase-filters { padding: 0 14px 14px; }
  .ase-filters .input, .ase-filters .select { max-width: none; flex: 1 1 100%; }
  .ase-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ase-detail-info { grid-template-columns: 1fr; }
  .ase-detail-score { align-items: flex-start; width: 100%; }
  .ase-legend .hint { font-size: 11px; }
}

/* ================= Accountability Chart (bagan peran EOS) ================= */
/* Kartu seat bergaya glassmorphic di atas latar gradasi lembut, tetap memakai
   token warna aplikasi (aksen merah Panjo + indigo/violet). */
.acc-stats { gap: 16px; }
.acc-stat { min-height: 0; padding: 16px 18px; position: relative; overflow: hidden; }
.acc-stat::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc-tone, var(--brand));
}
.acc-stat .stat-label { font-size: 12px; }
.acc-stat .stat-value { font-size: 24px; margin-top: 6px; }
.acc-stat .stat-foot { padding-top: 6px; }
.acc-tone-total { --acc-tone: #e01f26; }
.acc-tone-isi { --acc-tone: #12b76a; }
.acc-tone-peran { --acc-tone: #4f46e5; }
.acc-tone-level { --acc-tone: #8b5cf6; }

.acc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.acc-lv-chip { border-radius: 999px; font-weight: 600; }
.acc-lv-chip.acc-lv-juragan { color: #b3121d; background: #fdecee; border-color: #fbd5d8; }
.acc-lv-chip.acc-lv-integrator { color: #6d28d9; background: #f4f1ff; border-color: #e4dcff; }
.acc-lv-chip.acc-lv-spv { color: #3730a3; background: #eef2ff; border-color: #dfe3ff; }
.acc-lv-chip.acc-lv-leader { color: #0369a1; background: #eef8ff; border-color: #d3ebfb; }
.acc-lv-chip.acc-lv-seat { color: #475467; background: #f6f7fb; border-color: var(--border); }

.acc-notice {
  margin-top: 16px; display: flex; align-items: flex-start; gap: 10px;
  background: #fffaeb; border: 1px solid #fedf89; color: #b54708;
  border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.55;
}
.acc-notice svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

.acc-chart-card { overflow: hidden; }
.acc-chart-wrap {
  padding: 26px 20px 34px;
  overflow-x: auto;
  background:
    radial-gradient(680px 320px at 10% 0%, rgba(79, 70, 229, 0.10), transparent 70%),
    radial-gradient(560px 300px at 92% 8%, rgba(139, 92, 246, 0.10), transparent 70%),
    radial-gradient(520px 280px at 50% 100%, rgba(224, 31, 38, 0.07), transparent 70%),
    #fbfcfe;
}

.acc-tree, .acc-children { list-style: none; margin: 0; padding: 0; }
.acc-tree { display: flex; justify-content: center; align-items: flex-start; }
.acc-node {
  position: relative; padding: 0 14px;
  display: flex; flex-direction: column; align-items: center;
}
.acc-children {
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 26px; position: relative;
}
.acc-children::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-1px);
  width: 2px; height: 13px; background: var(--border-strong);
}
.acc-children > .acc-node::after {
  content: ''; position: absolute; top: -13px; left: 0; right: 0; height: 2px;
  background: var(--border-strong);
}
.acc-children > .acc-node:first-child::after { left: 50%; }
.acc-children > .acc-node:last-child::after { right: 50%; }
.acc-children > .acc-node::before {
  content: ''; position: absolute; top: -13px; left: 50%; transform: translateX(-1px);
  width: 2px; height: 13px; background: var(--border-strong);
}

.acc-card {
  position: relative; min-width: 0; width: 272px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 15px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.acc-card::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--acc-tone, #98a2b3);
}
.acc-card.acc-vacant { background: rgba(255, 255, 255, 0.52); }
.acc-lv-juragan { --acc-tone: #e01f26; }
.acc-lv-integrator { --acc-tone: #7c3aed; }
.acc-lv-spv { --acc-tone: #4f46e5; }
.acc-lv-leader { --acc-tone: #0ea5e9; }
.acc-lv-seat { --acc-tone: #64748b; }

.acc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.acc-level {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--acc-tone, #475467);
}
.acc-level::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-tone, #98a2b3);
}
.acc-card .icon-btn { width: 26px; height: 26px; }
.acc-card .icon-btn svg { width: 14px; height: 14px; }
.acc-title { font-size: 14.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.acc-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acc-avatar {
  width: 26px; height: 26px; font-size: 10.5px;
  background: var(--acc-tone, #64748b); color: #fff;
}
.acc-person-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-vacant-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: #b54708;
  background: #fffaeb; border: 1px dashed #fedf89; border-radius: 8px; padding: 3px 8px;
}
.acc-vacant-tag svg { width: 11px; height: 11px; }
.acc-purpose {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.5;
  border-left: 2px solid rgba(16, 24, 40, 0.08); padding-left: 8px;
}
.acc-roles {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; counter-reset: accr;
}
.acc-roles li {
  position: relative; padding-left: 19px;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.45;
}
.acc-roles li::before {
  counter-increment: accr; content: counter(accr);
  position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(16, 24, 40, 0.06); color: var(--muted);
  font-size: 9px; font-weight: 700; display: grid; place-items: center;
}
.acc-roles-empty { font-size: 11px; color: var(--muted-2); font-style: italic; }
.acc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; }
.acc-add {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: rgba(255, 255, 255, 0.75); border: 1px dashed var(--border-strong);
  border-radius: 10px; padding: 6px 9px;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.acc-add svg { width: 13px; height: 13px; }
.acc-add:hover { color: var(--brand); border-color: var(--brand); background: #fff; }

/* form seat di modal */
.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-form-grid { gap: 14px; }
.acc-roles-box {
  background: #fbfcfe; border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px 2px;
}
.acc-roles-head { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.acc-role-field { margin-bottom: 10px; }
.acc-locked {
  display: flex; align-items: center; gap: 8px;
  background: #f3f4f8; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12.5px; color: var(--muted);
}
.acc-locked svg { width: 14px; height: 14px; }

@media (max-width: 1080px) {
  .acc-card { width: 238px; }
}
@media (max-width: 720px) {
  .acc-chart-wrap { padding: 20px 12px 26px; }
  .acc-card { width: 214px; padding: 12px 12px 11px; }
  .acc-node { padding: 0 9px; }
  .acc-stat .stat-value { font-size: 20px; }
  .acc-form-grid { grid-template-columns: 1fr; }
}

/* ================= Penyimpanan Dokumen (khusus Juragan) ================= */
.doc-stats { gap: 16px; }
.doc-stat { min-height: 0; padding: 16px 18px; position: relative; overflow: hidden; }
.doc-stat::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--doc-tone, var(--brand));
}
.doc-stat .stat-value { font-size: 24px; margin-top: 6px; }
.doc-tone-total { --doc-tone: #e01f26; }
.doc-tone-baru { --doc-tone: #4f46e5; }
.doc-tone-isi { --doc-tone: #12b76a; }
.doc-tone-tabel { --doc-tone: #8b5cf6; }

.doc-list-card { overflow: hidden; }
.doc-search { width: 288px; max-width: 100%; }
.doc-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.doc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.doc-chip span {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: #f1f2f7; border-radius: 999px; padding: 1px 6px;
}
.doc-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.doc-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.doc-chip.on span { background: rgba(255, 255, 255, 0.24); color: #fff; }

.doc-items { display: flex; flex-direction: column; }
.doc-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.doc-item:last-child { border-bottom: 0; }
.doc-item-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.doc-item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-item-top h3 { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.doc-folder-chip { font-size: 10.5px; padding: 2px 8px; background: var(--brand-soft); color: var(--brand-ink); border-color: #fbd5d8; }
.doc-folder-chip svg { width: 12px; height: 12px; }
.doc-item-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted-2); }
.doc-item-meta span { display: inline-flex; align-items: center; gap: 5px; }
.doc-item-meta svg { width: 12px; height: 12px; }
.doc-item-sum { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.doc-excerpt { color: var(--muted); }
.doc-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.doc-dl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.doc-dl .btn { padding: 6px 10px; font-size: 11.5px; }
.doc-dl .btn svg { width: 13px; height: 13px; }

/* editor */
.doc-form { display: flex; flex-direction: column; gap: 16px; }
.doc-form-grid { gap: 14px; }
.doc-body-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.7; resize: vertical;
}
.doc-form code {
  background: #f1f2f7; border-radius: 5px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--ink-2);
}
.doc-tables-section { display: flex; flex-direction: column; gap: 12px; }
.doc-tables-head h3 { font-size: 13.5px; font-weight: 650; }
.doc-tables-head .hint { margin-top: 2px; }
.doc-tables-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 16px; border: 1px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2);
}
.doc-table-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.doc-table-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-table-name { max-width: 340px; flex: 1 1 220px; font-weight: 600; }
.doc-table-wrap { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 420px; }
.doc-table th, .doc-table td { padding: 4px 5px; vertical-align: top; }
.doc-table thead th { background: #f4f5fa; border: 1px solid var(--border); }
.doc-table tbody td { border: 1px solid var(--border); background: #fff; }
.doc-table .input { padding: 6px 8px; font-size: 12px; }
.doc-col-head { display: flex; align-items: center; gap: 4px; }
.doc-col-head .input { font-weight: 600; }
/* lebar kolom (%): kosong = otomatis mengikuti isi */
.doc-col-w {
  display: flex; align-items: center; gap: 3px; margin-top: 4px;
  font-size: 10px; color: var(--muted-2);
}
.doc-col-w .input {
  width: 58px; padding: 3px 6px; font-size: 11px; font-weight: 500; text-align: right;
}
.doc-col-w span { font-size: 10px; }
.doc-rownum {
  width: 34px; text-align: center; font-size: 11px; color: var(--muted-2);
  background: #f8f8fc !important;
}
.doc-rowact { width: 40px; text-align: center; background: #f8f8fc !important; }
.doc-add-table { align-self: flex-start; }
.doc-actions { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* kelola folder */
.doc-folder-manage { display: flex; flex-direction: column; gap: 12px; }
.doc-folder-add { display: flex; gap: 10px; }
.doc-folder-add .input { flex: 1 1 auto; }
.doc-folder-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.doc-folder-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.doc-folder-row .input { flex: 1 1 auto; }

@media (max-width: 1080px) {
  .doc-search { width: 220px; }
}
@media (max-width: 860px) {
  .doc-item { flex-direction: column; gap: 12px; }
  .doc-item-side { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
  .doc-dl { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .doc-search { width: 100%; }
  .doc-list-card .card-head, .doc-form-grid, .doc-table-head { flex-wrap: wrap; }
  .doc-chips { padding: 12px 14px; }
  .doc-item { padding: 14px; }
  .doc-table-name { max-width: none; }
  .doc-folder-add { flex-wrap: wrap; }
  .doc-folder-add .btn { width: 100%; justify-content: center; }
  .doc-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* catatan hasil impor dokumen */
.doc-import-note {
  display: flex; align-items: flex-start; gap: 9px;
  background: #eff8ff; border: 1px solid #d1e9ff; color: #175cd3;
  border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.55;
}
.doc-import-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.doc-import-note strong { font-weight: 650; }

/* --- gaya & warna teks isi dokumen --- */
.doc-body-field { gap: 8px; }
.doc-fmt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.doc-fmt-group { display: flex; align-items: center; gap: 4px; }
.doc-fmt-group + .doc-fmt-group {
  padding-left: 8px; border-left: 1px solid var(--border);
}
.doc-fmt-label { font-size: 11px; color: var(--muted-2); margin-right: 2px; }
.doc-fmt-btn {
  min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12px; color: var(--ink-2); line-height: 1;
  display: inline-grid; place-items: center;
}
.doc-fmt-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.doc-fmt-b { font-weight: 750; }
.doc-fmt-i { font-style: italic; font-family: Georgia, serif; }
.doc-fmt-u { text-decoration: underline; }
.doc-fmt-reset { font-size: 11px; padding: 0 9px; }
.doc-swatch {
  width: 22px; height: 22px; border-radius: 6px; padding: 0;
  border: 1px solid rgba(16, 24, 40, 0.18); background: var(--sw);
}
.doc-swatch:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--brand-soft); }

.doc-body-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.doc-preview {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.doc-preview-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: #f8f8fc;
}
.doc-preview-head svg { width: 13px; height: 13px; }
.doc-preview-body {
  padding: 14px 16px; min-height: 200px; max-height: 460px; overflow: auto;
  background: #fff; font-size: 12.5px; line-height: 1.65; color: #3d3a52;
}
.doc-preview-body .doc-pv-h1 { font-size: 15px; font-weight: 700; color: var(--brand-ink); margin: 10px 0 4px; }
.doc-preview-body .doc-pv-h2 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 10px 0 4px; }
.doc-preview-body .doc-pv-h3 { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 8px 0 3px; }
.doc-preview-body .doc-pv-h1:first-child,
.doc-preview-body .doc-pv-h2:first-child { margin-top: 0; }
.doc-preview-body .doc-pv-p { margin: 0 0 7px; }
.doc-preview-body .doc-pv-li {
  display: flex; gap: 8px; margin: 0 0 4px; padding-left: 2px;
}
.doc-preview-body .doc-pv-marker { color: var(--brand); font-weight: 700; flex: 0 0 auto; min-width: 12px; }
.doc-preview-body .doc-pv-empty { color: var(--muted-2); font-style: italic; }
.doc-preview-body .doc-pv-table { margin: 10px 0 4px; }
.doc-preview-body .doc-pv-tname { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.doc-preview-body .doc-pv-tw { overflow-x: auto; }
.doc-preview-body table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.doc-preview-body th {
  background: var(--brand); color: #fff; text-align: left;
  padding: 5px 7px; font-weight: 600; white-space: nowrap;
}
.doc-preview-body td { border: 1px solid var(--border); padding: 5px 7px; vertical-align: top; }
.doc-preview-body tbody tr:nth-child(even) td { background: #f8f8fc; }

@media (max-width: 1080px) {
  .doc-body-cols { grid-template-columns: 1fr; }
  .doc-preview-body { max-height: 320px; }
}
@media (max-width: 640px) {
  .doc-fmt { gap: 6px; padding: 7px 8px; }
  .doc-fmt-group + .doc-fmt-group { padding-left: 6px; }
  .doc-fmt-label { display: none; }
  .doc-swatch { width: 20px; height: 20px; }
  .doc-body-input { font-size: 12px; }
}

/* --- diagram / grafik dokumen --- */
.doc-chart-card {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.doc-chart-card + .doc-chart-card { margin-top: 12px; }
.doc-chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-chart-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand-soft); border: 1px solid #fbd5d8;
  border-radius: 999px; padding: 3px 10px;
}
.doc-chart-type { max-width: 190px; }
.doc-chart-grid { gap: 12px; }
.doc-series-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.doc-series-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 600; margin-bottom: 8px; flex-wrap: wrap;
}
.doc-chart-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.doc-series-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr auto auto; gap: 8px; align-items: center;
  padding: 6px 0; border-top: 1px dashed var(--border);
}
.doc-series-row:first-of-type { border-top: 0; }
.doc-series-colors { display: flex; gap: 3px; flex-wrap: wrap; }
.doc-swatch.sm { width: 16px; height: 16px; border-radius: 4px; }
.doc-swatch.sm.on { box-shadow: 0 0 0 2px var(--brand); }
.doc-chart-preview { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 8px; overflow-x: auto; }
.doc-chart-svg { display: block; max-width: 100%; height: auto; }
.doc-chart-empty { font-size: 12px; color: var(--muted-2); font-style: italic; padding: 18px; text-align: center; }
@media (max-width: 720px) {
  .doc-series-row { grid-template-columns: 1fr 1fr; }
  .doc-series-colors { grid-column: 1 / -1; }
  .doc-chart-grid { grid-template-columns: 1fr; }
}

/* seri tetap Target & Aktual pada kartu diagram */
.doc-series-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.doc-series-label::before {
  content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--brand);
}
.doc-series-row[data-dcs$="1"] .doc-series-label::before { background: #1D4ED8; }
.doc-chart-style { max-width: 140px; }
.doc-series-row { grid-template-columns: 86px 1fr auto; }
@media (max-width: 720px) {
  .doc-series-row { grid-template-columns: 76px 1fr; }
  .doc-series-colors { grid-column: 1 / -1; }
}

/* ============ Penyimpanan Dokumen: kirim via email (SMTP) ============ */
.doc-mail-form { display: grid; gap: 14px; }
.doc-mail-fmt { flex-wrap: wrap; }
.doc-mail-fmt .mode-btn { flex: 1 1 96px; }
.doc-setup-hint { margin: 0; color: var(--ink-2); }
.doc-mail-test {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end;
  padding-top: 6px; border-top: 1px dashed var(--border);
}
.doc-mail-test .field { margin: 0; }
.doc-mail-test .btn { height: 40px; white-space: nowrap; }
.check-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.check-line input { width: 16px; height: 16px; accent-color: var(--brand); }
.scope-tag.warn {
  color: #92400e; background: #fff7e6; border-color: rgba(180, 83, 9, .22);
}
@media (max-width: 640px) {
  .doc-mail-test { grid-template-columns: minmax(0, 1fr); }
  .doc-mail-test .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* Dashboard Sales (penjualan outlet) — Juragan & Nakama               */
/* Halaman ringkas: 4 kartu angka + tabel HPP manual per outlet.        */
/* ------------------------------------------------------------------ */

.sales-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sales-filters .select { width: auto; min-width: 170px; }

.sales-delta {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650;
  padding: 1px 6px; border-radius: 999px; letter-spacing: 0;
}
.sales-delta.up { background: #ecfdf3; color: #067647; }
.sales-delta.down { background: #fef3f2; color: #b42318; }
.stat-foot .sales-delta + span { color: var(--muted-2); }

/* Kartu besar HPP: total + % */
.sales-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 2px 0 14px; }
.sales-hero-label { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.sales-hero-pct { font-size: 30px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.15; margin: 4px 0 2px; }
.sales-hero-side { display: flex; gap: 28px; flex-wrap: wrap; }
.sales-hero-side > div { display: flex; flex-direction: column; gap: 3px; }
.sales-hero-side strong { font-size: 15px; font-weight: 650; }

.sales-sku { display: block; font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* Input HPP manual */
.sales-hpp-cell { width: 180px; }
.sales-hpp-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.sales-hpp-pct { font-variant-numeric: tabular-nums; font-weight: 650; }

@media (max-width: 900px) {
  .sales-hero { flex-direction: column; gap: 14px; }
  .sales-hero-pct { font-size: 27px; }
  .sales-hero-side { gap: 18px; }
}
@media (max-width: 640px) {
  .sales-filters { width: 100%; }
  .sales-filters .select { flex: 1 1 160px; min-width: 0; }
  .sales-hpp-cell { width: 130px; }
}

/* 3 kolom untuk kartu statistik halaman input HPP / Target Omset */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Nominal panjang (mis. "Rp1.148.850.521") tidak boleh terpotong di kartu
   statistik 4 kolom: perkecil font bertahap sebelum kolomnya menyempit. */
@media (max-width: 1360px) { .grid-4 .stat-value { font-size: 24px; } }
@media (max-width: 1180px) { .grid-4 .stat-value { font-size: 22px; } }
@media (max-width: 560px) { .grid-4 .stat-value { font-size: 21px; overflow-wrap: anywhere; } }

/* Anak grid wajib boleh menyusut: kartu berisi tabel/diagram tidak boleh
   memaksa kolom grid melebar (menyebabkan halaman overflow di layar kecil). */
.grid > * { min-width: 0; }
.bars, .bar-row, .bar-name, .bar-track { min-width: 0; }
/* Nominal panjang (Rp1.148.850.521) tidak bisa dipatahkan → boleh wrap. */
.grid-6 .stat-value { overflow-wrap: anywhere; }
@media (max-width: 720px) { .grid-6 .stat-value { font-size: 22px; } }
@media (max-width: 560px) { .grid-6 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ */
/* Dashboard Sales — filter periode, kartu, diagram payment method     */
/* ------------------------------------------------------------------ */

.sales-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sales-filters .select { width: auto; min-width: 170px; }

/* Baris pilihan periode (Tahunan/Kuartal/Bulanan/Mingguan/Hari/Custom) */
.sp-period {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--border);
}
.sp-modes { flex: 0 0 auto; }
.sp-period-inputs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
}
.sp-period-inputs .select { width: auto; min-width: 150px; }
.sp-period-inputs .input { width: auto; min-width: 140px; }

.sales-delta {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650;
  padding: 1px 6px; border-radius: 999px; letter-spacing: 0;
}
.sales-delta.up { background: #ecfdf3; color: #067647; }
.sales-delta.down { background: #fef3f2; color: #b42318; }
.stat-foot .sales-delta + span { color: var(--muted-2); }

/* Catatan tambahan di dalam kartu statistik */
.sales-card-note {
  display: block; font-size: 11px; color: var(--muted-2); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bar tone: tertinggi hijau, terendah merah */
.bar-fill.top { background: linear-gradient(90deg, #12805c, #34b37e); }
.bar-fill.low { background: linear-gradient(90deg, #b42318, #f04438); }

.sales-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 2px 0 14px; }
.sales-hero-label { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.sales-hero-pct { font-size: 30px; font-weight: 680; letter-spacing: -0.03em; line-height: 1.15; margin: 4px 0 2px; }
.sales-hero-side { display: flex; gap: 28px; flex-wrap: wrap; }
.sales-hero-side > div { display: flex; flex-direction: column; gap: 3px; }
.sales-hero-side strong { font-size: 15px; font-weight: 650; }

.sales-sku { display: block; font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.sales-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border); }

/* Input HPP / target di tabel */
.sales-hpp-cell { width: 180px; }
.sales-hpp-input, .sales-target-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.sales-hpp-pct, .sales-target-pct, .sales-target-gap { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Impor: tab dalam modal */
.sales-import-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sales-import .field { margin-top: 4px; }

@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-period { flex-direction: column; align-items: stretch; }
  .sp-period-inputs { margin-left: 0; }
  .sp-modes { display: flex; flex-wrap: wrap; }
  .sales-hero { flex-direction: column; gap: 14px; }
  .sales-hero-pct { font-size: 27px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sales-filters { width: 100%; }
  .sales-filters .select { flex: 1 1 160px; min-width: 0; }
  .sp-period-inputs { width: 100%; }
  .sp-period-inputs .select, .sp-period-inputs .input { flex: 1 1 140px; min-width: 0; width: 100%; }
  .sales-hpp-cell { width: 130px; }
  .bar-row { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) auto; }
  .bar-row .bar-pct { display: none; }
}

/* Anak grid wajib boleh menyusut: kartu berisi tabel/diagram tidak boleh
   memaksa kolom grid melebar (menyebabkan halaman overflow di layar kecil). */
.grid > * { min-width: 0; }
.bars, .bar-row, .bar-name, .bar-track { min-width: 0; }
.grid-6 .stat-value { overflow-wrap: anywhere; }
@media (max-width: 720px) { .grid-6 .stat-value { font-size: 22px; } }
@media (max-width: 560px) { .grid-6 { grid-template-columns: minmax(0, 1fr); } }

/* Riwayat isian HPP / Target: baris periode yang sedang aktif */
.table-wrap table tr.is-current td { background: rgba(224, 31, 38, 0.05); }
.sales-manual-input { font-variant-numeric: tabular-nums; }

/* Halaman Input HPP / Target Omset: filter periode + tabel riwayat isian.
   Anak flex wajib boleh menyusut, kalau tidak <select> outlet (nama panjang)
   memaksa kartu filter melebar dan halaman overflow di layar kecil. */
.range-head > *, .range-head-right, .range-head-right > *,
.sales-filters, .sales-filters > *, .range-title, .range-title > div { min-width: 0; }
.range-title .hint { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .range-head-right { width: 100%; }
  .sales-filters { width: 100%; }
}
/* Tombol aksi di tabel riwayat isian tidak boleh turun baris */
#view table td .row-actions { flex-wrap: nowrap; }

/* ---------------- Dashboard Sales gaya sheet "NEW DASHBOARD" ----------------
   Header "Omset Panjo" + 6 kartu angka + seksi CHANNEL / HARIAN / MINGGUAN /
   BULANAN / OUTLET & KOMPOSISI. Semua tabel memakai .sales-tbl (rapat, angka
   tabular) di dalam .table-wrap supaya halaman tidak pernah overflow. */
.sales-hero-card { padding: 20px 22px; }
.sales-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sales-hero-title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); }
.sales-hero-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.55; }
.sales-hero-right { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.sales-hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.sales-hero-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sales-hero-meta .hint { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.sales-hero-meta strong { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sales-hero-meta small { font-size: 10.5px; color: var(--muted-2); }

.sales-kpi .stat-value { font-variant-numeric: tabular-nums; }
.sales-kpi.up .stat-value { color: #067647; }
.sales-kpi.down .stat-value { color: #b42318; }
.sales-kpi.warn .stat-value { color: #b54708; }
.sales-kpi .stat-foot { line-height: 1.5; }

.sales-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sales-tbl th, .sales-tbl td { padding: 8px 10px; font-size: 12.5px; }
.sales-tbl thead th { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.sales-tbl tfoot td { border-top: 1.5px solid var(--border); background: #fafafc; }
.sales-tbl tr.is-current td { background: rgba(224, 31, 38, 0.045); }
.sales-mini-title { margin: 0 0 10px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.sales-outlet-charts { gap: 20px; padding: 4px 0 0; }
.sales-outlet-charts > .card-body { min-width: 0; }

@media (max-width: 1280px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .sales-outlet-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sales-hero-meta { gap: 12px 18px; }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid-6 { grid-template-columns: minmax(0, 1fr); }
  .sales-hero-card { padding: 16px 16px; }
  .sales-hero-right { white-space: normal; }
  .sales-tbl th, .sales-tbl td { padding: 7px 8px; font-size: 12px; }
}

/* ------------------------------------------------------------------ */
/* Dashboard Sales — chip % target & legenda perbandingan channel      */
/* ------------------------------------------------------------------ */

.sales-pct-chip {
  display: inline-block; min-width: 52px; text-align: right;
  font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.sales-pct-chip.up { background: #ecfdf3; color: #067647; }
.sales-pct-chip.warn { background: #fffaeb; color: #b54708; }
.sales-pct-chip.down { background: #fef3f2; color: #b42318; }

.sales-cmp-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin-bottom: 14px; font-size: 11.5px; color: var(--muted);
}
.sales-cmp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sales-cmp-legend .dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.sales-cmp-legend .dot.cur { background: linear-gradient(90deg, #ee2a2f, #c8181f); }
.sales-cmp-legend .dot.prev { background: #c9c7d6; }

@media (max-width: 640px) {
  .sales-pct-chip { min-width: 44px; }
  .sales-cmp-legend { font-size: 11px; gap: 8px 12px; }
}

/* HPP per channel: input & matriks harian */
.sales-channel-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.sales-tbl td small.sales-sku { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
@media (max-width: 640px) {
  .sales-tbl th, .sales-tbl td { font-size: 11px; padding: 8px 8px; }
}

/* Hasil per Outlet — area & outlet yang belum isi ceklist (permintaan user 2026-11) */
.oc-miss-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.oc-miss-summary > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.oc-miss-summary strong { display: block; font-size: 20px; line-height: 1.2; color: var(--ink); }
.oc-miss-summary span { font-size: 12px; color: var(--muted); }
.oc-miss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.oc-miss-area {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--surface);
}
.oc-miss-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.oc-miss-head strong { display: block; font-size: 14px; }
.oc-miss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}
.oc-miss-row .btn { flex: none; }
.oc-miss-info { min-width: 0; }
.oc-miss-info > strong { font-size: 13px; }
.oc-miss-weeks { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 4px; }
.oc-miss-week {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  white-space: nowrap;
}
.oc-miss-ok { display: flex; align-items: center; gap: 6px; }
.oc-miss-ok svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .oc-miss-summary { grid-template-columns: 1fr; }
  .oc-miss-row { flex-wrap: wrap; }
}
.oc-miss-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
  vertical-align: middle;
}
.oc-miss-row.none { background: #fffbfa; }

/* ================================================================== */
/* Dashboard Komplain (C&E Headline / komplain pelanggan) 2026-11      */
/* ================================================================== */
.km-tabs { margin-bottom: 4px; }
.km-tabs button { width: auto; height: auto; padding: 7px 16px; white-space: nowrap; }

.km-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.km-table th,
.km-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.km-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: var(--surface-2); font-weight: 650; white-space: nowrap;
}
.km-table tbody tr:hover { background: #fcfcfe; }
.km-table tfoot td { background: var(--surface-2); font-weight: 650; }
.km-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.km-table .rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; background: #eef0f7; color: var(--ink-2);
  font-size: 11px; font-weight: 700;
}
.km-review { color: var(--ink-2); max-width: 460px; }
.km-res { color: var(--muted); }
.km-row-open { background: rgba(224, 31, 38, 0.035); }
.km-row-open:hover { background: rgba(224, 31, 38, 0.06); }
.km-actions { display: flex; gap: 6px; }
.km-open .km-review { font-size: 12.5px; }
.km-outlet-note { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 0; }

.km-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.km-chip.ok { background: #e8f7ee; color: #17703a; }
.km-chip.warn { background: #fff5e0; color: #8a5a00; }
.km-chip.bad { background: #fdeaea; color: #a1161b; }
.km-chip.plain { background: #eef0f7; color: #4b4f6b; }

.km-filters {
  display: grid; gap: 12px;
  grid-template-columns: minmax(190px, 1.6fr) repeat(4, minmax(120px, 1fr));
  padding: 0 18px 16px;
}
.km-filters > * { min-width: 0; }

.km-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px;
}
.km-pager-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.km-kpi .stat-value { font-variant-numeric: tabular-nums; }
.km-kpi-pos .stat-value { color: #17703a; }
.km-kpi-neg .stat-value { color: #a1161b; }
.km-kpi-warn .stat-value { color: #8a5a00; }

/* Kartu statistik yang bisa diklik → tab Data Komplain terfilter */
.km-kpi-link { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.km-kpi-link:hover { transform: translateY(-2px); border-color: #f0b4b8; box-shadow: 0 14px 26px -18px rgba(31, 27, 58, .5); }
.km-kpi-link:hover .stat-label { color: var(--brand); }
.km-kpi-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.km-kpi-link::after {
  content: 'Lihat data ›';
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--brand); opacity: .0; transition: opacity .14s ease;
}
.km-kpi-link:hover::after, .km-kpi-link:focus-visible::after { opacity: .85; }

/* Angka di tabel Rekap per Outlet yang bisa diklik */
.km-drill {
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  padding: 2px 4px; border-radius: 7px; font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(224, 31, 38, .45);
}
.km-drill:hover { background: var(--brand-soft); color: var(--brand); }
.km-drill:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.bar-fill.km-fill-neg { background: linear-gradient(90deg, #f0857f, #d5262d); }

.km-trend-split {
  display: block; width: 100%; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #f0857f, #d5262d);
}
.oc-trend-val small { color: var(--muted-2); font-weight: 600; }

.km-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.km-check input { width: 16px; height: 16px; accent-color: var(--brand); }

/* form modal */
.km-form { display: flex; flex-direction: column; gap: 14px; }
.km-quote {
  background: var(--brand-soft); border: 1px solid #f6d2d4; border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.km-quote p { font-size: 13px; color: var(--ink-2); }
.km-quote-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.km-resolve {
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 12px;
}
.km-resolve-head { display: flex; flex-direction: column; gap: 2px; }
.km-photo { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.km-photo-box {
  width: 168px; height: 118px; border-radius: 12px; border: 1px dashed var(--border-strong);
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.km-photo-thumb { border: 0; padding: 0; width: 100%; height: 100%; background: none; cursor: zoom-in; }
.km-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-photo-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted-2); font-size: 11.5px; text-align: center; padding: 8px;
}
.km-photo-empty svg { width: 22px; height: 22px; }
.km-photo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* kartu di dashboard utama */
.km-mini { gap: 12px; }
.km-mini-box {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; background: var(--surface-2);
}
.km-mini-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.km-mini-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.km-mini-pos .km-mini-value { color: #17703a; }
.km-mini-neg .km-mini-value { color: #a1161b; }
.km-mini-warn .km-mini-value { color: #8a5a00; }
.km-card-bars { margin-top: 14px; }

@media (max-width: 1080px) {
  .km-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .km-filters { grid-template-columns: minmax(0, 1fr); }
  .km-photo-box { width: 100%; height: 160px; }
  .km-mini { grid-template-columns: 1fr 1fr; }
  .km-review { max-width: none; }
}

/* Judul panel kecil + catatan metrik (panel 5 terbaik/terendah dashboard sales) */
.sales-mini-note { font-weight: 500; color: var(--muted-2); font-size: 11px; }

/* Kartu "SPV / Area yang Belum Isi Ceklist" di dashboard (Korsekpanjo) — 2026-11.
   Memakai ulang .oc-miss-* dari halaman Hasil per Outlet; hanya perlu pengaturan jarak
   daftar outlet di dalam blok area. */
.km-spv-outlets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
.km-spv-outlets .oc-miss-row {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.km-spv-outlets .oc-miss-info { flex: 1 1 auto; }

@media (max-width: 640px) {
  .km-spv-outlets .oc-miss-row { flex-wrap: wrap; }
}

/* Berkas asli dokumen (hasil impor) — panel di editor + tanda di daftar.
   2026-11: unduhan "Berkas asli" harus persis seperti berkas yang diimpor. */
.doc-src {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(79, 70, 229, 0.04);
  min-width: 0;
}
.doc-src > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand); margin-top: 1px; }
.doc-src-main { min-width: 0; flex: 1 1 auto; }
.doc-src strong { display: block; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.doc-src span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.doc-src .row-actions { flex: 0 0 auto; }
.doc-src-empty { background: rgba(255, 255, 255, 0.55); border-style: dashed; }
.doc-src-empty > svg { color: var(--muted-2); }
.doc-src-empty strong { color: var(--ink-2); }
.doc-orig-tag { color: var(--brand); font-weight: 600; }

@media (max-width: 640px) {
  .doc-src { flex-wrap: wrap; }
  .doc-src .row-actions { width: 100%; justify-content: flex-end; }
}

/* Update otomatis omset dari sheet acuan (kartu Sumber Data — Dashboard Sales)
   2026-11: dashboard mengikuti sheet Database setiap hari tanpa klik manual. */
.sales-auto {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(79, 70, 229, 0.04);
  min-width: 0;
}
.sales-auto-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}
.sales-auto-state .doc-check-line { margin: 0; }
.sales-auto-state strong { font-size: 13px; color: var(--ink); }
.sales-auto-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted-2, #9ca3af);
  flex: 0 0 auto;
}
.sales-auto-dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }
.sales-auto-hour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  min-width: 0;
}
.sales-auto-hour .select { width: auto; min-width: 92px; padding: 4px 8px; font-size: 12.5px; }
.sales-auto .hint { margin: 8px 0 0; }
@media (max-width: 560px) {
  .sales-auto-state { gap: 8px; }
  .sales-auto-hour { width: 100%; }
}

/* ================================================================== */
/* Performance SPV Area (worksheet penilaian kinerja area) 2026-11     */
/* ================================================================== */
.perf-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  min-width: 0;
}
.perf-filters > * { min-width: 0; }
.perf-filters .select { width: auto; min-width: 180px; }
.perf-filters .hint { font-size: 12.5px; color: var(--muted); }

.perf-sheet .perf-head { align-items: flex-start; gap: 16px; }
.perf-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.perf-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 8px;
}
.perf-head-right { margin-left: auto; }
.perf-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  border-radius: 14px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-width: 108px;
}
.perf-total strong { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.perf-total small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.perf-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
}
.perf-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.perf-meta span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.perf-meta strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

/* tabel worksheet */
.perf-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.perf-tbl th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2);
  white-space: nowrap;
}
.perf-tbl td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.perf-tbl tbody tr:hover td { background: rgba(16, 24, 40, 0.015); }
.perf-tbl tfoot td { border-bottom: 0; border-top: 2px solid var(--border-strong); padding-top: 12px; }
.perf-tbl .center { text-align: center; }
.perf-tbl .num { text-align: right; white-space: nowrap; }
.perf-tbl-sm { min-width: 720px; font-size: 12.5px; }
.perf-tbl-sm td { padding: 9px 10px; }

.perf-role strong { display: block; font-size: 12.5px; letter-spacing: 0.01em; }
.perf-role small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.perf-meas { font-weight: 600; font-size: 12.5px; }
.perf-target { font-size: 12.5px; color: var(--ink-2); }
.perf-real { display: block; font-weight: 600; font-size: 13px; }
.perf-note { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.perf-row.perf-dim td { background: rgba(152, 162, 179, 0.06); }

.perf-score, .perf-chip, .perf-total-chip {
  display: inline-block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.perf-score {
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  background: rgba(152, 162, 179, 0.14);
  color: var(--ink-2);
}
.perf-weighted { font-variant-numeric: tabular-nums; font-weight: 600; }
.perf-total-chip {
  min-width: 56px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.perf-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* tone interpretasi */
.perf-excellent { background: #e7f7ec; color: #14713a; }
.perf-good      { background: #e8f1fe; color: #1c4fa1; }
.perf-warning   { background: #fdf4dd; color: #8a5a06; }
.perf-critical  { background: var(--brand-soft); color: var(--brand-ink); }
.perf-none      { background: rgba(152, 162, 179, 0.16); color: var(--muted); }
.perf-total.perf-excellent strong { color: #14713a; }
.perf-total.perf-good strong { color: #1c4fa1; }
.perf-total.perf-warning strong { color: #8a5a06; }
.perf-total.perf-critical strong { color: var(--brand-ink); }
.perf-total.perf-none strong { color: var(--muted); }

/* strip interpretasi */
.perf-grades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.perf-grade {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface-2);
  opacity: 0.72;
}
.perf-grade.on { opacity: 1; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.07); border-color: currentColor; }
.perf-grade-band { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.perf-grade strong { font-size: 11.5px; letter-spacing: 0.05em; }
.perf-grade small { font-size: 10.5px; color: var(--muted); }
.perf-grade.on strong { font-size: 12px; }

.perf-rule { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.perf-rule b { color: var(--ink-2); }

/* isian LMA di dalam tabel */
.perf-lma { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perf-lma .input { width: 88px; padding: 5px 8px; font-size: 12.5px; }
.perf-lma .btn-sm { padding: 5px 10px; font-size: 12px; }
.perf-lma .icon-btn { width: 28px; height: 28px; }

.perf-outlets { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.perf-outlets > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.perf-outlets > summary::-webkit-details-marker { display: none; }
.perf-outlets > summary::before {
  content: '▸';
  font-size: 11px;
  color: var(--muted);
}
.perf-outlets[open] > summary::before { content: '▾'; }
.perf-outlets .table-wrap { margin-top: 10px; }
.perf-mini {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(22, 163, 74, 0.12);
  color: #14713a;
}
.perf-mini.warn { background: #fdf4dd; color: #8a5a06; }
.perf-mini.dim { background: rgba(152, 162, 179, 0.16); color: var(--muted); }

@media (max-width: 1100px) {
  .perf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .perf-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-head { flex-wrap: wrap; }
  .perf-head-right { margin-left: 0; width: 100%; }
  .perf-total { align-items: flex-start; }
}
@media (max-width: 640px) {
  .perf-meta { grid-template-columns: 1fr; }
  .perf-filters { flex-direction: column; align-items: stretch; }
  .perf-filters .select { width: 100%; }
  .perf-grades { grid-template-columns: 1fr; }
  .perf-sheet .card-head { flex-direction: column; }
}
.perf-note-warn { color: #8a5a06; }

/* Performance SPV Area — tampilan ringkasan (Korsekpanjo) */
.perf-avg-cell { min-width: 150px; }
.perf-avg-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.perf-avgbar {
  flex: 1 1 auto;
  min-width: 40px;
  height: 6px;
  border-radius: 999px;
  background: rgba(152, 162, 179, 0.18);
  overflow: hidden;
}
.perf-avgbar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #98a2b3;
}
.perf-avgbar-fill.perf-fill-excellent { background: #16a34a; }
.perf-avgbar-fill.perf-fill-good { background: #2563eb; }
.perf-avgbar-fill.perf-fill-warning { background: #d97706; }
.perf-avgbar-fill.perf-fill-critical { background: var(--brand); }
.perf-avgbar-fill.perf-fill-none { background: #98a2b3; }
.stat-value.perf-excellent { color: #14713a; }
.stat-value.perf-warning { color: #8a5a06; }
.stat-value.perf-critical { color: var(--brand-ink); }
@media (max-width: 640px) {
  .perf-avgbar { min-width: 28px; }
}

/* ================================================================== */
/* Scorecard KPI mingguan ("Weekly KPIs") 2026-11                      */
/* ================================================================== */
.kpi-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  min-width: 860px;
}
.kpi-tbl th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2);
  white-space: nowrap;
  vertical-align: bottom;
}
.kpi-tbl td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.kpi-tbl tbody tr:hover td { background: rgba(16, 24, 40, 0.015); }
.kpi-tbl tfoot td { border-top: 2px solid var(--border-strong); background: var(--surface-2); }
.kpi-tbl .center { text-align: center; }

/* kolom judul melekat saat tabel digeser */
.kpi-tbl th.kpi-title-col,
.kpi-tbl td.kpi-title {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  min-width: 210px;
  max-width: 250px;
  box-shadow: 1px 0 0 var(--border);
}
.kpi-tbl th.kpi-title-col { background: var(--surface-2); }
.kpi-tbl tbody tr:hover td.kpi-title { background: #fbfcfe; }
.kpi-title-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kpi-title-main strong { font-size: 12.5px; }
.kpi-src {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
}
.kpi-src-auto { background: #e8f1fe; color: #1c4fa1; }
.kpi-src-manual { background: #fdf4dd; color: #8a5a06; }

.kpi-tbl th.kpi-week { text-align: center; min-width: 84px; }
.kpi-tbl th.kpi-week small {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted-2);
}
.kpi-tbl th.kpi-week.partial { color: var(--brand-ink); }
.kpi-cell { text-align: center; min-width: 84px; }
.kpi-cell.kpi-partial { background: repeating-linear-gradient(135deg, rgba(152,162,179,.08) 0 6px, transparent 6px 12px); }
.kpi-val { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-muted { color: var(--muted-2); }
.kpi-input {
  width: 78px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: right;
  border-radius: 8px;
}
.kpi-input.kpi-saved { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.kpi-input.kpi-error { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224,31,38,.12); }

.kpi-pct {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(152, 162, 179, 0.16);
  color: var(--muted);
}
.kpi-pct-big { font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.kpi-pct.kpi-excellent, .kpi-pct.kpi-excellent { background: #e7f7ec; color: #14713a; }
.kpi-pct.kpi-warning { background: #fdf4dd; color: #8a5a06; }
.kpi-pct.kpi-critical { background: var(--brand-soft); color: var(--brand-ink); }
.kpi-pct.kpi-none { background: rgba(152, 162, 179, 0.14); color: var(--muted-2); }

.kpi-goal { white-space: nowrap; font-weight: 600; font-size: 12px; color: var(--ink-2); }
.kpi-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-actions { white-space: nowrap; }
.kpi-actions .icon-btn { width: 28px; height: 28px; }

.kpi-trend { font-size: 13px; font-weight: 700; }
.kpi-trend-up.good, .kpi-trend-down.good { color: #14713a; }
.kpi-trend-up.bad, .kpi-trend-down.bad { color: var(--brand-ink); }
.kpi-trend.kpi-none { color: var(--muted-2); }

/* form measurable */
.kpi-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.kpi-form > * { min-width: 0; }
.kpi-form .field-span { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .kpi-form { grid-template-columns: 1fr; }
  .kpi-tbl th.kpi-title-col, .kpi-tbl td.kpi-title { min-width: 168px; max-width: 190px; }
  .kpi-tbl th.kpi-week, .kpi-cell { min-width: 74px; }
}

/* Scorecard KPI — filter periode memakai komponen yang sama dengan dashboard
   (.range-card > .range-head + .dash-filters), hanya perlu penyesuaian kecil:
   5 tombol mode harus boleh turun baris & pemilih periode tidak melebar. */
.range-head-right .mode-toggle.wrap { flex-wrap: wrap; justify-content: flex-end; }
.range-head-right .mode-toggle .mode-btn { padding: 6px 11px; }
.range-card .dash-filters > .range-field { min-width: 0; }
.range-card .dash-filters > .range-field .select { min-width: 180px; }
.kpi-sub {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
@media (max-width: 900px) {
  .range-head-right .mode-toggle.wrap { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .range-card .dash-filters > .range-field,
  .range-card .dash-filters > .range-field .select { width: 100%; }
}

/* ================================================================== */
/* Input Waste Kitchen (peran Kitchen) 2026-11                        */
/* ================================================================== */
.kw-tbl { width: 100%; }
.kw-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.kw-tbl tbody tr.kw-empty-row td { color: var(--muted-2); }
.kw-note { display: block; font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.kw-hint { display: block; }
.kw-hint strong { color: var(--brand-ink); font-weight: 650; }
.kw-fill {
  margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(224, 31, 38, .25);
  background: var(--brand-soft); color: var(--brand-ink);
}
.kw-fill:hover { border-color: var(--brand); }
.kw-hint-note { color: var(--muted-2); }
@media (max-width: 720px) {
  /* tabel rekap & harian tetap bisa digeser di dalam .table-wrap */
  .kw-tbl { min-width: 620px; }
}