:root {
  --green: #0f9d3a;
  --green-d: #0b6b2a;
  --green-l: #e8f6ec;
  --red: #e52329;
  --red-l: #fdecec;
  /* Bahasa Visual tombol (sama dengan Portal KKU, docs/STANDAR.md §5.1) */
  --bv-hijau: #1f7a4d;
  --bv-merah: #c0392b;
  --bv-kuning: #f2b705;
  --bv-kuning-ink: #1c2420;
  --bv-biru: #2b6cb0;
  --bv-abu: #4b5563;
  --blue: #134e9c;
  --blue-l: #e8eff9;
  --amber: #c27c0e;
  --amber-l: #fdf4e3;
  --purple: #6b3fa0;
  --purple-l: #f1ebf8;
  --ink: #17212b;
  --ink-2: #44515e;
  --ink-3: #7a8794;
  --line: #e3e8ee;
  --bg: #f4f6f8;
  --card: #fff;
  --side: #0d2a1c;
  --side-2: #12382a;
  --side-ink: #cfe3d6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font);
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
h4 {
  margin: 0 0 0.4em;
  line-height: 1.25;
}
h1 {
  font-size: 22px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 15px;
}
h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
small,
.muted {
  color: var(--ink-3);
}
.mono {
  font-variant-numeric: tabular-nums;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.nowrap {
  white-space: nowrap;
}
.hidden {
  display: none !important;
}

/* ---------- layout */
.layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--side);
  color: var(--side-ink);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.brand {
  padding: 16px 16px 12px;
  background: #fff;
  border-bottom: 3px solid var(--red);
}
.brand img {
  width: 100%;
  display: block;
}
.brand .sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}
.nav {
  padding: 10px 8px 20px;
  flex: 1;
}
.nav .group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7fa08d;
  padding: 14px 10px 6px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--side-ink);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
}
.nav a:hover {
  background: var(--side-2);
  text-decoration: none;
  color: #fff;
}
.nav a.active {
  background: var(--green);
  color: #fff;
}
.nav a .ic {
  width: 18px;
  text-align: center;
  opacity: 0.9;
}
.nav a .count {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 0 7px;
}
.side-foot {
  padding: 12px 16px;
  font-size: 11px;
  color: #7fa08d;
  border-top: 1px solid var(--side-2);
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .title {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar select {
  max-width: 240px;
}
.menu-btn {
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}
.userbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.userbox .who {
  line-height: 1.2;
}
.userbox .who b {
  display: block;
  font-size: 13px;
}
.userbox .who small {
  font-size: 11.5px;
}
.dropdown {
  position: absolute;
  right: 0;
  top: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  padding: 6px;
  z-index: 50;
}
.dropdown a {
  display: block;
  padding: 8px 10px;
  color: var(--ink);
  border-radius: 6px;
}
.dropdown a:hover {
  background: var(--bg);
  text-decoration: none;
}
.content {
  padding: 22px 24px 40px;
  max-width: 1440px;
  width: 100%;
}
.page-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.page-head .grow {
  flex: 1;
  min-width: 200px;
}
.page-head p {
  margin: 0;
  color: var(--ink-3);
}

/* ---------- cards & grid */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-body {
  padding: 16px;
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-head h3 {
  margin: 0;
  flex: 1;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.g-auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.span2 {
  grid-column: span 2;
}
.stack > * + * {
  margin-top: 16px;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.row.between {
  justify-content: space-between;
}

.kpi {
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.kpi .label {
  font-size: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi .value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi .sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent, var(--green));
}

/* ---------- buttons & forms */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  background: var(--bg);
  text-decoration: none;
}
.btn.primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.btn.primary:hover {
  background: var(--green-d);
}
.btn.danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn.blue {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn.amber {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}
.btn.ghost {
  border-color: transparent;
  background: transparent;
}
.btn.sm {
  padding: 4px 9px;
  font-size: 12.5px;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn.bv-hijau,
.btn.bv-merah,
.btn.bv-biru,
.btn.bv-abu {
  color: #fff;
  border-color: transparent;
}
.btn.bv-hijau {
  background: var(--bv-hijau);
}
.btn.bv-merah {
  background: var(--bv-merah);
}
.btn.bv-biru {
  background: var(--bv-biru);
}
.btn.bv-abu {
  background: var(--bv-abu);
}
.btn.bv-kuning {
  background: var(--bv-kuning);
  color: var(--bv-kuning-ink);
  border-color: transparent;
}
.btn[class*='bv-']:hover {
  filter: brightness(1.08);
}
.tanya {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font: 600 11px/1 var(--font);
  cursor: pointer;
  vertical-align: 1px;
}
.tanya:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.tanya-isi {
  font-size: 13.5px;
  line-height: 1.55;
}
input,
select,
textarea {
  font: inherit;
  font-size: 13.5px;
  border: 1px solid #cfd6de;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(15, 157, 58, 0.25);
  border-color: var(--green);
}
input[type='checkbox'],
input[type='radio'] {
  width: auto;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
label.f {
  display: block;
}
label.f > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
label.f > small {
  display: block;
  margin-top: 3px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.form-grid .full {
  grid-column: 1 / -1;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filters input,
.filters select {
  width: auto;
  min-width: 140px;
}
.filters input[type='checkbox'] {
  min-width: 0;
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.seg label {
  padding: 7px 14px;
  cursor: pointer;
  border-right: 1px solid var(--line);
  display: flex;
  gap: 6px;
  align-items: center;
}
.seg label:last-child {
  border-right: 0;
}
.seg input {
  display: none;
}
.seg label:has(input:checked) {
  background: var(--green);
  color: #fff;
}

/* ---------- tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tabs a {
  padding: 9px 14px;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-weight: 500;
}
.tabs a:hover {
  text-decoration: none;
  color: var(--ink);
}
.tabs a.active {
  color: var(--green-d);
  border-bottom-color: var(--green);
}
.tabs a .count {
  background: var(--bg);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11.5px;
  margin-left: 4px;
}

/* ---------- table */
.table-wrap {
  overflow-x: auto;
}
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.t th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  white-space: nowrap;
}
table.t td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.t tr.click {
  cursor: pointer;
}
table.t tr.click:hover td {
  background: #f8faf9;
}
table.t tfoot td {
  font-weight: 700;
  background: #fafbfc;
}
table.t td.num,
table.t th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.t tr.group td {
  background: #f3f6f4;
  font-weight: 600;
  color: var(--green-d);
}
.empty {
  padding: 36px;
  text-align: center;
  color: var(--ink-3);
}

/* ---------- badges & bars */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg);
  color: var(--ink-2);
  white-space: nowrap;
}
.b-green {
  background: var(--green-l);
  color: var(--green-d);
}
.b-red {
  background: var(--red-l);
  color: #b0151a;
}
.b-blue {
  background: var(--blue-l);
  color: var(--blue);
}
.b-amber {
  background: var(--amber-l);
  color: #8a5608;
}
.b-purple {
  background: var(--purple-l);
  color: var(--purple);
}
.b-gray {
  background: #eef1f4;
  color: var(--ink-2);
}
.bar {
  height: 8px;
  background: #eaeef2;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 99px;
}
.bar.blue > i {
  background: var(--blue);
}
.bar.amber > i {
  background: var(--amber);
}
.bar.red > i {
  background: var(--red);
}
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 52px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  margin: 6px 0;
}
.bar-row .v {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- logos */
.logo {
  display: inline-grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}
.logo img {
  max-width: 92%;
  max-height: 86%;
  object-fit: contain;
}
.logo.txt {
  font-weight: 800;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 0;
}
.logo-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.logo-strip .logo {
  width: 120px;
  height: 52px;
}

/* ---------- project cards */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.pcard:hover {
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}
.pcard .top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pcard .top h3 {
  margin: 0;
  font-size: 15px;
}
.pcard .meta {
  font-size: 12.5px;
  color: var(--ink-3);
}
.pcard .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 12px;
}
.pcard .stats b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- stepper */
.stepper {
  display: flex;
  gap: 0;
  margin: 4px 0 8px;
  overflow-x: auto;
}
.step {
  flex: 1;
  min-width: 120px;
  text-align: center;
  position: relative;
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 30px;
}
.step::before {
  content: attr(data-n);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e6eaee;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-weight: 700;
  z-index: 1;
}
.step::after {
  content: '';
  position: absolute;
  top: 11px;
  left: -50%;
  right: 50%;
  height: 2px;
  background: #e6eaee;
}
.step:first-child::after {
  display: none;
}
.step.done {
  color: var(--green-d);
}
.step.done::before {
  background: var(--green);
  color: #fff;
  content: '✓';
}
.step.done::after {
  background: var(--green);
}
.step.now {
  color: var(--blue);
  font-weight: 600;
}
.step.now::before {
  background: var(--blue);
  color: #fff;
}
.step.now::after {
  background: var(--green);
}
.step.bad::before {
  background: var(--red);
  color: #fff;
  content: '✕';
}
.step.bad {
  color: var(--red);
}
.step b {
  display: block;
  color: inherit;
}
.step small {
  display: block;
  font-size: 11px;
}

/* ---------- timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 0 0 14px 22px;
  border-left: 2px solid var(--line);
  margin-left: 6px;
}
.timeline li:last-child {
  border-left-color: transparent;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.timeline li.bad::before {
  background: var(--red);
}
.timeline li.info::before {
  background: var(--blue);
}
.timeline .t-head {
  font-size: 13px;
}
.timeline .t-note {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--bg);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

/* ---------- gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  background: #eee;
  display: block;
}
.rcard {
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.rcard .ph {
  aspect-ratio: 16/9;
  background: #e9eef0 center/cover no-repeat;
  position: relative;
}
.rcard .ph .n {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
}
.rcard .bd {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.rcard .bd p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: grid;
  place-items: center;
  z-index: 200;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 6px;
}
.lightbox .cap {
  color: #fff;
  text-align: center;
  margin-top: 8px;
}

/* ---------- modal & toast */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal.lg {
  max-width: 980px;
}
.modal.xl {
  max-width: 1200px;
}
.modal.sm {
  max-width: 440px;
}
.modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.modal-head h3 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}
.modal-head .x {
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-3);
  line-height: 1;
}
.modal-body {
  padding: 18px;
}
.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
}
.modal-err {
  background: var(--red-l);
  color: #b0151a;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
#toast-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 300;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  font-size: 13.5px;
  max-width: 380px;
}
.toast.ok {
  background: var(--green-d);
}
.toast.err {
  background: #b0151a;
}

/* ---------- login */
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-art {
  background: linear-gradient(150deg, #0b6b2a 0%, #0d2a1c 60%, #134e9c 140%);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-art h1 {
  font-size: 30px;
  margin-top: 24px;
}
.login-art p {
  color: #cfe3d6;
  max-width: 460px;
}
.login-art .logo-strip .logo {
  background: #fff;
  width: 104px;
  height: 46px;
}
.login-art .feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin: 24px 0;
  max-width: 520px;
  font-size: 13.5px;
  color: #e0efe5;
}
.login-box {
  display: grid;
  place-items: center;
  padding: 32px;
  background: #fff;
}
.login-box form {
  width: 100%;
  max-width: 360px;
}
.login-box img.lg {
  width: 100%;
  margin-bottom: 24px;
}
.demo {
  font-size: 12px;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 18px;
  color: var(--ink-2);
}
.demo code {
  background: #fff;
  padding: 0 4px;
  border-radius: 4px;
  cursor: pointer;
}

/* ---------- clock card */
.clock {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.clock .time {
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.clock .btn {
  padding: 12px 22px;
  font-size: 15px;
}

/* ---------- print */
#print-area {
  display: none;
}
.doc {
  font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
  color: #000;
  font-size: 12.5px;
}
.doc .kop {
  display: grid;
  grid-template-columns: 170px 1fr 170px;
  align-items: center;
  gap: 12px;
  border-bottom: 3px double #000;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.doc .kop img {
  max-width: 160px;
  max-height: 64px;
}
.doc .kop .c {
  text-align: center;
}
.doc .kop .c b {
  font-size: 18px;
  display: block;
}
.doc .kop .c div {
  font-size: 11px;
}
.doc h2 {
  text-align: center;
  font-size: 15px;
  text-decoration: underline;
  margin: 10px 0 4px;
}
.doc .proj {
  text-align: center;
  font-weight: 700;
  margin-bottom: 12px;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
}
.doc table.info td {
  padding: 2px 4px;
  border: 0;
  vertical-align: top;
}
.doc table.grid td,
.doc table.grid th {
  border: 1px solid #000;
  padding: 4px 6px;
}
.doc table.grid th {
  background: #e7efe9;
}
.doc .num {
  text-align: right;
  white-space: nowrap;
}
.doc .sign td {
  border: 1px solid #000;
  padding: 6px;
  height: 34px;
}

@media print {
  body > *:not(#print-area) {
    display: none !important;
  }
  #print-area {
    display: block !important;
  }
  /* margin halaman 0 → browser tidak menambahkan judul, tanggal, dan alamat web di tepi kertas */
  @page {
    margin: 0;
  }
  .print-foot {
    position: fixed;
    left: 14mm;
    right: 14mm;
    bottom: 6mm;
  }
}

/* ---------- responsive */
@media (max-width: 1100px) {
  .g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.open {
    transform: none;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  }
  .menu-btn {
    display: block;
  }
  .content {
    padding: 16px;
  }
  .topbar {
    padding: 10px 16px;
  }
  .userbox .who {
    display: none;
  }
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
  .span2 {
    grid-column: auto;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .login-wrap {
    grid-template-columns: 1fr;
  }
  .login-art {
    display: none;
  }
  .modal-bg {
    padding: 0;
  }
  .modal {
    border-radius: 0;
    min-height: 100vh;
  }
}

/* ================================================================ POLA TAMPILAN STANDAR */
/* breadcrumb topbar */
.topbar .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-3);
}
.topbar .title b {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .title a {
  color: var(--ink-2);
}
.topbar .title i {
  font-style: normal;
  color: #b7c0c9;
}

/* kepala halaman */
.page-head {
  align-items: flex-end;
}
.page-head h1 {
  margin: 0;
}
.page-head p {
  margin-top: 4px;
}
.page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.page-head .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.page-head .back:hover {
  color: var(--green-d);
  text-decoration: none;
}

/* tombol */
.btn span:empty {
  display: none;
}
.btn.danger-o {
  color: #b0151a;
  border-color: #f2c4c5;
  background: #fff;
}
.btn.danger-o:hover {
  background: var(--red-l);
}
.btn.danger {
  color: #fff;
}
.btn.icon {
  padding: 5px;
  width: 30px;
  height: 30px;
  justify-content: center;
  color: var(--ink-2);
}
.btn.icon:hover {
  color: var(--ink);
}
.btn.icon.danger-o {
  color: #c0262c;
}
.acts {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
table.t td.act {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
table.t th:last-child {
  text-align: right;
}

/* daftar: bilah alat + isi + jumlah */
.list .toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.list .toolbar.card {
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.toolbar select,
.toolbar input:not([type='checkbox']) {
  width: auto;
  min-width: 150px;
}
.toolbar .search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  max-width: 340px;
  color: var(--ink-3);
}
.toolbar .search svg {
  position: absolute;
  left: 10px;
  pointer-events: none;
}
.toolbar .search input {
  width: 100%;
  padding-left: 32px;
}
.toolbar label.chk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.toolbar .lbl {
  font-size: 12.5px;
  color: var(--ink-3);
}
.spacer {
  flex: 1;
}
.list-foot {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--ink-3);
}
.list-foot:empty {
  display: none;
}
.card.list > .list-foot {
  border-top: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 0 0 var(--radius) var(--radius);
}
.list-body > .empty {
  padding: 36px;
}

/* tab: selalu di bawah kepala halaman */
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* bilah aksi form halaman */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.06);
}
.form-actions .spacer {
  flex: 1;
}
.modal-foot .spacer {
  flex: 1;
}

/* kartu yang bisa diklik di daftar kartu */
.pcard .foot {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  border-top: 1px solid var(--line);
  margin: 4px -16px -16px;
  padding: 8px 12px;
}
@media (max-width: 860px) {
  .toolbar .search {
    max-width: none;
    flex-basis: 100%;
  }
  .page-head .actions {
    width: 100%;
  }
}
.g-proj {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* sub-menu samping (donor / jenis laporan) */
.nav a.sub {
  padding: 6px 10px 6px 20px;
  font-size: 13px;
  color: #a9c7b4;
}
.nav a.sub .ic {
  width: 18px;
  display: flex;
  justify-content: center;
}
.nav a.sub .ic::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.nav a.sub.active {
  background: var(--side-2);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--green);
}
.nav a.sub + a:not(.sub) {
  margin-top: 4px;
}

/* ================================================================ TEMPLATE FORM PENGAJUAN (meniru lembar Excel donor) */
.sheet-tabs .f > span {
  display: none;
}
.sheet-tabs .seg label {
  padding: 9px 18px;
  font-weight: 600;
}
.form-doc {
  padding: 24px 28px;
  border-top: 4px solid var(--green);
}
.fd-kop {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: center;
  gap: 12px;
  border-bottom: 3px double var(--ink);
  padding-bottom: 10px;
}
.fd-kop img {
  max-width: 150px;
  max-height: 58px;
  object-fit: contain;
}
.fd-kop img#fd-donor {
  justify-self: end;
}
.fd-kop .c {
  text-align: center;
}
.fd-kop .c b {
  display: block;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.fd-kop .c span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-2);
}
.fd-title {
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  margin: 16px 0 4px;
}
.fd-proj {
  text-align: center;
  font-weight: 700;
  margin-bottom: 14px;
}
.fd-id {
  display: grid;
  grid-template-columns: 170px 1fr 170px 1fr;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 14px;
}
.fd-id > label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
}
.fd-id > label::after {
  content: ' :';
}
.fd-ro {
  display: block;
  padding: 7px 10px;
  background: #f6f8f7;
  border: 1px dashed #cfd6de;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 34px;
}
.fd-items th {
  background: #e7efe9;
  color: var(--ink);
}
.fd-items td {
  padding: 5px 6px;
}
.fd-items input,
.fd-items select {
  padding: 5px 7px;
  font-size: 13px;
}
.fd-check {
  padding: 10px 2px;
}
.fd-check h4 {
  margin-bottom: 4px;
}
.fd-sign {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.fd-sign th,
.fd-sign td {
  border: 1px solid #c8d0d6;
  padding: 7px 8px;
  text-align: center;
}
.fd-sign th {
  background: #f3f6f4;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.fd-sign td:first-child {
  text-align: left;
  font-weight: 600;
}
.fd-sign td.q {
  color: var(--ink-3);
  font-size: 11.5px;
  font-style: italic;
  width: 120px;
}
.fd-note {
  font-size: 12px;
  color: var(--ink-3);
  margin: 8px 0 0;
}
a.sig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--green-d);
  background: var(--green-l);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 3px;
}
@media (max-width: 860px) {
  .form-doc {
    padding: 16px;
  }
  .fd-kop {
    grid-template-columns: 80px 1fr 80px;
  }
  .fd-kop img {
    max-width: 80px;
  }
  .fd-id {
    grid-template-columns: 1fr;
  }
  .fd-id > label {
    margin-top: 4px;
  }
}

/* cetak gaya portal KKU: identitas 2 kolom, tabel tanda tangan dengan QR, tanda DRAF */
.doc .id2 {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.doc .id2 > table {
  flex: 1 1 50%;
}
.doc table.id td {
  padding: 2px 6px;
  vertical-align: top;
  border: 0;
}
.doc table.id td:first-child {
  width: 1%;
  white-space: nowrap;
}
.doc .tt {
  margin-top: 16px;
  width: 100%;
  border-collapse: collapse;
}
.doc .tt th,
.doc .tt td {
  border: 1px solid #333;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}
.doc .tt th {
  background: #e7efe9;
}
.doc .tt td.q {
  height: 58px;
  width: 74px;
  padding: 3px;
}
.doc .tt img {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto;
}
.doc .small {
  font-size: 10.5px;
  color: #444;
}
.doc {
  position: relative;
}
.doc .wm {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 110px;
  color: rgba(200, 0, 0, 0.12);
  transform: rotate(-22deg);
  font-weight: 800;
  pointer-events: none;
}
/* tabel dokumen cetak memakai class "grid" — jangan ikut tata letak CSS grid portal */
.doc table.grid {
  display: table;
  width: 100%;
  gap: 0;
}

/* ================================================================ FORM PENGAJUAN MODEL G1 (lembar Excel donor) — layar & cetak */
:root {
  --xf-navy: #1f3864;
  --xf-band: #dce3ec;
  --xf-gold: #f2b631;
  --xf-lbl: #e9eef4;
  --xf-row: #f3f5f9;
}
.xf-setup {
  display: grid;
  grid-template-columns: auto 1fr 1.4fr 1.2fr;
  gap: 12px 16px;
  align-items: end;
}
.xf-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.xf-zoom .lbl {
  margin: 0 !important;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.xf-zoom .zm {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.xf-zoom .zm button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  cursor: pointer;
  color: var(--ink-2);
}
.xf-zoom .zm button + button {
  border-left: 1px solid var(--line);
}
.xf-zoom .zm button:hover {
  background: var(--green-l);
  color: var(--green-d);
}
.xf-zoom #zm-v {
  min-width: 62px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.xf-setup .lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.xf-setup .f > span:empty {
  display: none;
}
.xf-setup .seg label {
  padding: 8px 14px;
  font-weight: 600;
}
.xf .xf-band {
  margin-top: 14px;
  background: var(--xf-band);
  color: var(--xf-navy);
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 9px;
  border-top: 4px solid var(--xf-navy);
}
.xf .xf-proj {
  background: var(--xf-gold);
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  padding: 8px;
  margin: 6px 0 16px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.xf table.xf-id {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.xf .xf-id th {
  width: 230px;
  background: var(--xf-lbl);
  color: var(--xf-navy);
  text-align: left;
  padding: 7px 10px;
  font-weight: 700;
}
.xf .xf-id td {
  padding: 5px 8px;
  border-bottom: 1px solid #d5dce4;
  font-weight: 600;
}
.xf .xf-id td input,
.xf .xf-id td select {
  width: calc(100% - 14px);
  display: inline-block;
  padding: 5px 8px;
}
.xf table.xf-items {
  width: 100%;
  border-collapse: collapse;
}
.xf .xf-items thead th {
  background: var(--xf-navy);
  color: #fff;
  padding: 9px 8px;
  font-weight: 700;
  text-align: center;
  border-left: 1px solid #fff;
  border-top: 3px solid #2e5597;
}
.xf .xf-items td {
  padding: 5px 7px;
  border-bottom: 1px solid #d5dce4;
  border-left: 1px solid #d5dce4;
}
.xf .xf-items tbody tr:nth-child(even) td {
  background: var(--xf-row);
}
.xf .xf-items tfoot td {
  background: var(--xf-band);
  font-weight: 700;
  padding: 8px;
  border-top: 3px solid var(--xf-navy);
  border-bottom: 3px solid var(--xf-navy);
}
.xf .xf-items tfoot td#fd-terbilang {
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
}
.xf .xf-items input {
  padding: 5px 7px;
  font-size: 13px;
}
.xf .xf-qty {
  display: flex;
  gap: 4px;
  align-items: center;
}
.xf .xf-qty input[data-k='qty'] {
  width: 64px;
}
.xf .xf-qty input[data-k='unit'] {
  width: 72px;
}
.xf .xf-qty span {
  color: var(--ink-3);
}
.xf table.xf-sign {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 13px;
}
.xf .xf-sign th {
  font-weight: 600;
  padding: 6px;
  text-align: center;
  color: #222;
}
.xf .xf-sign th:nth-child(2) {
  width: 22%;
}
.xf .xf-sign th:nth-child(3) {
  width: 21%;
}
.xf .xf-sign th:nth-child(4) {
  width: 20%;
}
.xf .xf-sign th:nth-child(5) {
  width: 15%;
  font-weight: 700;
}
.xf .xf-sign td {
  border: 1px solid #333;
  padding: 8px 10px;
  background: var(--xf-lbl);
  font-weight: 700;
  color: var(--xf-navy);
  height: 46px;
}
.xf .xf-sign td.nb {
  border: 0;
  background: none;
}
.xf .xf-sign td.nm {
  font-weight: 600;
}
.xf .xf-sign td.q {
  text-align: center;
  color: var(--ink-3);
  font-weight: 400;
  font-style: italic;
  font-size: 11.5px;
}
.xf .xf-sign td.tg {
  text-align: center;
  font-weight: 600;
}
.xf .xf-sign img {
  width: 58px;
  height: 58px;
  display: block;
  margin: 0 auto;
}
.xf .xf-sign small {
  display: block;
  font-weight: 400;
  color: #444;
  font-size: 11px;
}
.doc.xf {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc.xf .xf-items td {
  height: 22px;
}
@media (max-width: 860px) {
  .xf-setup {
    grid-template-columns: 1fr;
  }
  .xf-setup > label {
    grid-column: auto !important;
  }
  .xf .xf-id th {
    width: 120px;
  }
}

/* catatan cetak portal (pengganti header/footer bawaan browser) */
.print-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9.5px;
  color: #555;
  border-top: 1px solid #bbb;
  padding-top: 4px;
  margin-top: 18px;
  font-family: Arial, sans-serif;
}

/* sorotan menu: induk aktif (hijau) bila salah satu sub-menunya dibuka; sub-menu yang dibuka ditandai garis hijau */
.nav a.open {
  background: var(--green);
  color: #fff;
}
.nav a.sub.sub-active {
  background: var(--side-2);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--green);
}
.nav a.sub.sub-active .ic::before {
  background: var(--green);
  opacity: 1;
}

/* Kegiatan bertingkat (1 → 1.1 → 1.1.1) */
.act-l2 {
  padding-left: 14px;
}
.act-l3 {
  padding-left: 28px;
}
.act-parent {
  font-weight: 600;
}
table.t tr.group.lv1 td {
  background: #e6efe9;
}
table.t tr.group.lv2 td {
  background: #f3f6f4;
}
table.t tr.group.lv3 td {
  background: #fafbfa;
  font-weight: 500;
  color: var(--text, #22303c);
}
.doc tr.group.lv1 td {
  background: #eef3f0;
  font-weight: 700;
}
.doc tr.group.lv2 td,
.doc tr.group.lv3 td {
  font-weight: 600;
}

/* cetak: dokumen form dipadatkan agar muat 1 halaman A4 (di akhir berkas agar menimpa gaya layar .xf/.doc) */
@media print {
  #print-area {
    padding: 0 12mm;
  }
  .print-foot {
    left: 12mm;
    right: 12mm;
    bottom: 5mm;
    margin: 0;
    background: #fff;
  }
  .doc {
    font-size: 11.5px;
  }
  .doc .kop {
    padding-bottom: 5px;
    margin-bottom: 6px;
  }
  .doc .kop img {
    max-height: 50px;
  }
  .xf .xf-band {
    margin-top: 8px;
    padding: 5px;
    font-size: 14.5px;
    border-top-width: 3px;
  }
  .xf .xf-proj {
    padding: 5px;
    margin: 4px 0 8px;
    font-size: 13.5px;
  }
  .xf table.xf-id {
    margin-bottom: 8px;
  }
  .xf .xf-id th {
    padding: 3px 8px;
    width: 170px;
  }
  .xf .xf-id td {
    padding: 3px 8px;
  }
  .xf .xf-items thead th {
    padding: 5px 6px;
  }
  .xf .xf-items td {
    padding: 3px 6px;
    height: 20px;
  }
  .xf .xf-items tfoot td {
    padding: 4px 6px;
  }
  .xf table.xf-sign {
    margin-top: 8px;
    font-size: 12px;
  }
  .xf .xf-sign th {
    padding: 3px;
  }
  .xf .xf-sign td {
    padding: 4px 8px;
    height: 30px;
  }
  .xf .xf-sign img {
    width: 46px;
    height: 46px;
  }
  .doc .tt {
    margin-top: 8px;
  }
  .doc .tt td.q {
    height: 50px;
  }
  .doc .tt img {
    width: 46px;
    height: 46px;
  }
}

/* ================================================================ POLA KKU: tab Daftar · dokumen · [+] · sub-tab · bilah daftar */
:root {
  --hl: var(--red);
}
.md {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 140px);
}
.md-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border-bottom: 2px solid var(--green);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-top: 2px;
}
.md-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 280px;
  height: 34px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #eef1f4;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
}
.md-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-tab:hover {
  color: var(--ink);
}
.md-tab.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}
.md-tl {
  padding: 0 12px;
}
.md-tl.on span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.md-add {
  width: 34px;
  justify-content: center;
  padding: 0;
  background: none;
  border-style: dashed;
  color: var(--ink-2);
}
.md-add:hover {
  color: var(--green-d);
  border-color: var(--green);
}
.md-x {
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.75;
  font-size: 17px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 4px;
  text-decoration: none !important;
}
.md-x:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.14);
}
.md-body {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0 0 16px;
  min-width: 0;
}
.md-body > .empty {
  padding: 40px;
}
/* isi halaman di dalam kerangka */
.md-body > :not(.tabs):not(.list):not(.md-pacts):not(.md-sum.in-list):not(.empty) {
  margin-left: 16px;
  margin-right: 16px;
}
.md-body > .page-head {
  margin-top: 14px;
}
.md-body > .tabs + :not(.list):not(.md-pacts) {
  margin-top: 16px;
}
.md-body > .list + *,
.md-body > .card + .card {
  margin-top: 16px;
}
.md-body > .grid:first-child,
.md-body > .card:first-child,
.md-body > .stack:first-child,
.md-body > form:first-child {
  margin-top: 16px;
}
/* sub-tab */
.md-body .tabs {
  gap: 2px;
  padding: 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: #f6f8fa;
}
.md-body .tabs a {
  font-size: 13px;
  border-bottom: 3px solid transparent;
  padding: 9px 14px 7px;
  color: var(--ink-3);
  font-weight: 500;
}
.md-body .tabs a:hover {
  color: var(--ink);
}
.md-body .tabs a.active {
  color: var(--green-d);
  border-bottom-color: var(--hl);
  font-weight: 600;
  background: var(--card);
}
/* bilah daftar */
.md-body .list {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: none;
}
.md-body .list .toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.md-body .tabs ~ .list .toolbar,
.md-body .list .toolbar {
  background: none;
}
.toolbar .search {
  flex: 0 1 260px;
}
.toolbar .cnt {
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.md-pacts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 14px 0;
}
.md-body .list .list-body > .grid {
  padding: 14px;
}
/* ringkasan di bawah bilah daftar */
.md-sum.in-list {
  margin: 14px 14px 4px;
}
/* tabel daftar: gaya ringkas, baris dapat diklik */
.md-body .list .table-wrap {
  border: 0;
  border-radius: 0;
}
.md-body .list table.t th {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.md-body .list table.t tr.click {
  cursor: pointer;
}
.md-body .list .list-body > .empty {
  padding: 36px;
}
.md-body > .page-head.detail h1 {
  font-size: 20px;
}
@media (max-width: 860px) {
  .md-tab {
    max-width: 180px;
  }
  .md-body > :not(.tabs):not(.list):not(.md-pacts):not(.md-sum.in-list):not(.empty) {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.md-sum.in-list {
  margin-bottom: 4px !important;
}
.toolbar .tb-r {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar .tb-r:empty {
  display: none;
}
.md-body .toolbar select {
  max-width: 200px;
}
.md-sum.in-list {
  gap: 12px;
}
.md-sum.in-list .kpi {
  padding: 10px 14px;
  box-shadow: none;
  border: 1px solid var(--line);
}
.md-sum.in-list .kpi .label {
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
}
.md-sum.in-list .kpi .value {
  font-size: 18px;
  margin-top: 2px;
}
@media (max-width: 860px) {
  .md-sum.in-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px;
  }
  .md-sum.in-list .kpi .value {
    font-size: 16px;
  }
}

/* Impor RAB dari Excel */
.imp-file {
  display: block;
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
}
.imp-file:hover {
  border-color: var(--green);
  background: var(--green-l);
}
.imp-file input {
  display: none;
}
.imp-file span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
}
.imp-top {
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  margin-top: 14px;
}
.imp-map {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}
.imp-map summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
}
.imp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}
.imp-grid .f span {
  font-size: 12px;
}
.imp-grid select {
  font-size: 12.5px;
  padding: 5px 6px;
}
.imp-sum {
  margin: 12px 0 8px;
  font-size: 13.5px;
}
.imp-warn {
  margin-top: 6px;
  color: var(--red);
  font-size: 13px;
}
.imp-note {
  margin-top: 6px;
  color: var(--blue);
  font-size: 13px;
}
.imp-prev {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.imp-prev table.t th {
  position: sticky;
  top: 0;
  background: #f6f8fa;
  z-index: 1;
}
.imp-prev td {
  padding: 4px 8px;
  font-size: 12.5px;
}
.imp-prev tr.dup td {
  background: var(--red-l) !important;
}
.imp-code {
  width: 80px;
  padding: 3px 6px;
  font-size: 12.5px;
  font-family: ui-monospace, Menlo, monospace;
}
@media (max-width: 860px) {
  .imp-top,
  .imp-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================================================ KEUANGAN */
.ym-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ym-nav input[type='month'] {
  min-width: 150px !important;
  font-weight: 600;
}
.ym-nav .btn.icon {
  font-size: 18px;
  line-height: 1;
  width: 32px;
}
.acc-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.num.neg,
.neg {
  color: var(--red);
}
table.t tr.acc-h td {
  background: #f6f8fa;
}
table.t tr.off td {
  opacity: 0.55;
}
/* jurnal */
table.jr tr.jr-h td {
  background: #f6f8fa;
  border-top: 2px solid var(--line);
  padding-top: 8px;
}
table.jr tr.jr-h:hover td,
table.jr tr.jr-l:hover td {
  background: var(--green-l);
  cursor: pointer;
}
table.jr tr.jr-l td {
  border-top: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 13px;
}
table.jr td.cr {
  padding-left: 34px;
}
table.jf td {
  padding: 4px 6px;
}
table.jf select,
table.jf input {
  width: 100%;
}
/* mutasi */
table.mt tr.mt-s td {
  background: var(--side);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 7px 10px;
}
table.mt tr.mt-h td {
  background: #f3f6f4;
}
table.mt tr.mt-t td {
  background: var(--green-l);
  font-weight: 700;
  color: var(--green-d);
  border-top: 2px solid var(--green);
}
table.mt tr.click:hover td {
  background: #f7fbf8;
  cursor: pointer;
}
/* laporan (neraca / laba rugi) */
.st-wrap {
  max-width: 1100px;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table.st td,
table.st th {
  padding: 7px 12px;
}
table.st tr.st-sec td {
  background: var(--side);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 12px;
}
table.st tr.st-h td {
  font-weight: 600;
  color: var(--ink);
  padding-top: 10px;
}
table.st tr.st-sub td {
  font-weight: 600;
  border-top: 1px solid #c9d3cc;
  background: #fafcfb;
}
table.st tr.st-t td {
  font-weight: 700;
  background: #f1f5f2;
}
table.st tr.st-gt td {
  font-weight: 800;
  background: var(--green-l);
  color: var(--green-d);
  border-top: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
}
table.st tr.st-p td {
  font-weight: 600;
}
table.st tr.click:hover td {
  background: #f7fbf8;
  cursor: pointer;
}
table.st td.chg {
  color: var(--ink-3);
  font-size: 12.5px;
}
table.st td.chg.up {
  color: var(--green-d);
}
table.st td.chg.down {
  color: var(--red);
}
.doc table.st tr.st-sec td {
  background: #1f3864;
  color: #fff;
}
.doc table.st tr.st-gt td {
  background: #e7efe9;
}
.doc table.mt tr.mt-s td {
  background: #1f3864;
  color: #fff;
}
/* pemilih periode Bulan | Tanggal */
.seg-sm {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.seg-sm button {
  font: inherit;
  font-size: 13px;
  border: 0;
  background: none;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--ink-2);
}
.seg-sm button + button {
  border-left: 1px solid var(--line);
}
.seg-sm button.on {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
.ym-nav select {
  min-width: 170px;
  font-weight: 600;
}
.ym-nav input[type='date'] {
  min-width: 150px !important;
}
/* halaman jurnal (tambah / ubah / lihat) */
.jf-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.jf-head {
  display: grid;
  grid-template-columns: 200px 220px 1fr;
  gap: 14px;
}
.jf-card .table-wrap {
  border: 0;
}
table.jf td {
  padding: 6px 8px;
  vertical-align: middle;
}
table.jf tfoot td {
  font-weight: 700;
  font-size: 15px;
  padding: 10px 8px;
}
.jv {
  margin-top: 16px;
}
.jv td.cr {
  padding-left: 34px;
}
@media (max-width: 860px) {
  .jf-head {
    grid-template-columns: 1fr;
  }
}
/* form jurnal: cari/pilih akun */
.jf-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.acc-pick {
  position: relative;
  width: min(460px, 100%);
}
.acc-pick input {
  width: 100%;
  padding-right: 34px;
}
.acc-pick > svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.acc-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  max-height: 360px;
  overflow: auto;
  padding: 4px;
}
.acc-opt {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 10px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.acc-opt small {
  grid-column: 2;
  color: var(--ink-3);
  font-size: 11.5px;
}
.acc-opt.on,
.acc-opt:hover {
  background: var(--green-l);
}
.acc-none {
  padding: 10px;
  color: var(--ink-3);
}
table.jf thead th {
  background: #5b6b80;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
table.jf td.jf-name {
  font-weight: 600;
  color: var(--ink);
}
table.jf td.jf-no {
  text-align: center;
}
table.jf input[name='debit'],
table.jf input[name='credit'] {
  font-variant-numeric: tabular-nums;
}
.jf-empty {
  padding: 34px;
}
.jf-head {
  grid-template-columns: 200px 220px 1fr;
}
/* tab dokumen yang tetap terbuka */
.md-tab .md-dl {
  color: inherit;
  text-decoration: none !important;
  display: inline-flex;
  min-width: 0;
}
.md-tab .md-dl span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-tab.dirty .md-doc::before {
  content: '• ';
  color: var(--amber);
  font-weight: 800;
}
.md-tab.on.dirty .md-doc::before {
  color: #ffd88a;
}
.md-tab button.md-x {
  cursor: pointer;
}
.jf-card {
  position: relative;
}
.jf-card > .acc-list {
  width: 440px;
  right: auto;
}
table.jf td.jf-acc input {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
table.jf tr.bad td.jf-acc input {
  border-color: var(--red);
  background: var(--red-l);
}
.jf-head {
  grid-template-columns: 220px 220px 1fr;
}
.doc table.jr-print {
  table-layout: fixed;
}
.doc table.jr-print td.nowrap,
.doc table.jr-print th {
  white-space: nowrap;
}
.doc table.jr-print td.num,
.doc table.jr-print th.num {
  padding-right: 8px;
}
/* Bukti Jurnal */
.doc table.bj-info {
  width: auto;
  margin: 6px 0 10px;
}
.doc table.bj-info td {
  padding: 2px 8px 2px 0;
}
.doc table.bj-info td:first-child,
.doc table.bj-info td:nth-child(3) {
  color: #444;
  white-space: nowrap;
}
.doc table.bj {
  table-layout: fixed;
}
.doc table.bj td,
.doc table.bj th {
  word-wrap: break-word;
}
.doc table.bj-sign {
  width: 100%;
  margin-top: 26px;
  text-align: center;
}
.doc table.bj-sign td {
  width: 33%;
  padding: 2px;
}
.doc table.bj-sign tr.sp td {
  height: 64px;
}
.doc table.bj-sign tr:last-child td {
  font-weight: 700;
  text-decoration: underline;
}
.doc table.bj th {
  white-space: nowrap;
}
/* jurnal tersimpan (terkunci sampai Koreksi) */
.jf-page.ro table.jf td.act .btn {
  visibility: hidden;
}
.jf-page.ro table.jf input:disabled {
  background: #f8fafb;
  color: var(--ink);
  border-color: transparent;
  -webkit-text-fill-color: var(--ink);
}
.jf-hist {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
}
.btn.amber {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}
/* tombol halaman di kanan baris tab */
.md-tabs {
  overflow-y: visible;
}
.md-tacts {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 2px 6px 12px;
  flex: none;
}
.md-tacts .btn {
  padding-top: 6px;
  padding-bottom: 6px;
}
.doc .bj-kor {
  margin: 4px 0 0;
  padding: 6px 10px;
  border: 1px solid #c9a227;
  background: #fff8e1;
  font-size: 12px;
}

/* Laporan Keuangan: daftar laporan & bilah laporan */
.rpt-list td {
  padding: 10px 12px;
  vertical-align: middle;
}
.rpt-list tr.rpt-g td {
  background: #f6f8fa;
  font-weight: 700;
  color: var(--green-d);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.rpt-list tr.click:hover td {
  background: var(--green-l);
  cursor: pointer;
}
.rpt-ic {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--green);
  color: var(--green-d);
  background: var(--green-l);
  flex: none;
}
.rpt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.rpt-bar .grow {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}
.rpt-bar .grow b {
  font-size: 16px;
}
.md-body > .rpt-bar {
  margin: 0 !important;
}
table.st.bb td {
  font-size: 13px;
}
table.st.bb tr.click:hover td {
  background: #f7fbf8;
  cursor: pointer;
}
.calk {
  padding: 6px 4px;
}
.calk-scr {
  padding: 16px 22px;
}
.calk h3 {
  font-size: 15px;
  margin: 16px 0 6px;
  color: var(--ink);
}
.calk h4 {
  margin: 12px 0 6px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  font-size: 13.5px;
}
.calk table {
  margin-bottom: 6px;
}
.doc .calk h3 {
  font-size: 13px;
}
.doc .calk h4 {
  font-size: 12px;
  color: #000;
}
/* cetak Buku Besar: hemat kertas */
.doc table.st.bb {
  table-layout: fixed;
  font-size: 10.5px;
}
.doc table.st.bb th,
.doc table.st.bb td {
  padding: 2px 4px;
}
.doc table.st.bb td.nowrap,
.doc table.st.bb th {
  white-space: nowrap;
}
.doc table.st.bb td:nth-child(2) small {
  font-size: 9px;
}
.doc table.st.bb td:nth-child(4) small {
  font-size: 9px;
}
.doc table.st.bb tr.st-sec td {
  background: #eef2f7 !important;
  color: #000 !important;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 6px;
}
.doc table.st.bb tr.st-h td,
.doc table.st.bb tr.st-t td {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ================================================================ CETAK: satu ukuran huruf untuk semua laporan
   (isi tabel, judul kolom, nomor, tipe, keterangan, catatan) — kop & judul laporan tidak berubah */
.doc table:not(.xf-id):not(.xf-items):not(.xf-sign) th,
.doc table:not(.xf-id):not(.xf-items):not(.xf-sign) td,
.doc table:not(.xf-id):not(.xf-items):not(.xf-sign) td *,
.doc table:not(.xf-id):not(.xf-items):not(.xf-sign) th *,
.doc .acc-code,
.doc > p,
.doc .calk p,
.doc .bj-kor,
.doc table.bj-info td {
  font-size: 11px !important;
  line-height: 1.35;
}
.doc table td small,
.doc table th small {
  color: inherit;
}
.doc .acc-code {
  font-family: inherit;
  color: inherit;
}
.doc .calk h3 {
  font-size: 12px !important;
}
.doc .calk h4 {
  font-size: 11px !important;
}
.doc .proj {
  font-size: 12px;
}
@media print {
  .doc table:not(.xf-id):not(.xf-items):not(.xf-sign) td,
  .doc table:not(.xf-id):not(.xf-items):not(.xf-sign) th {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

/* Buku Besar: per baris jurnal, dikelompokkan per tanggal (gaya laporan Accurate) */
table.bb2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.bb2 thead th {
  color: #1f3864;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  background: none;
  border-bottom: 1.5px solid #4a5a70;
  padding: 6px 8px;
  white-space: nowrap;
}
table.bb2 td {
  padding: 4px 8px;
  border-bottom: 1px solid #eef1f4;
}
table.bb2 tr.bb2-d td {
  font-weight: 700;
  padding-top: 12px;
  border-bottom: 0;
  background: none;
}
table.bb2 tr.bb2-t td {
  font-weight: 700;
  border-top: 1.5px solid #4a5a70;
  border-bottom: 0;
  padding-top: 7px;
}
table.bb2 tr.click:hover td {
  background: #f7fbf8;
  cursor: pointer;
}
.doc table.bb2 {
  table-layout: fixed;
}
.doc table.bb2 th,
.doc table.bb2 td {
  border: 0 !important;
  padding: 2px 4px;
  background: none !important;
}
.doc table.bb2 thead th {
  border-bottom: 1px solid #1f3864 !important;
  color: #1f3864 !important;
}
.doc table.bb2 tr.bb2-d td {
  padding-top: 8px;
}
.doc table.bb2 tr.bb2-t td {
  border-top: 1px solid #1f3864 !important;
  padding-top: 4px;
}
.doc table.bb2 td {
  word-wrap: break-word;
}
table.bb2 thead th {
  text-align: left;
}
table.bb2 thead th.num {
  text-align: right;
}
.doc table.bb2 thead th {
  text-align: left !important;
}
.doc table.bb2 thead th.num {
  text-align: right !important;
}
.doc table.bb2 thead th {
  white-space: normal !important;
  vertical-align: bottom;
}
.doc table.bb2 td:nth-child(-n + 3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.bb2.bbr tr.bbr-p td {
  font-weight: 700;
}
table.bb2.bbr tr.bb2-d td {
  color: var(--green-d);
  letter-spacing: 0.05em;
  font-size: 12px;
}
.doc table.bb2.bbr tr.bb2-d td {
  color: #1f3864 !important;
}
.doc table.bb2.bbr td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.doc table.bb2.bbr td.num,
.doc table.bb2.bbr td:first-child {
  white-space: nowrap !important;
}
table.bb2.lj tr.lj-h td {
  font-weight: 700;
  padding-top: 10px;
  border-bottom: 0;
}
table.bb2.lj td.cr {
  padding-left: 26px;
}
.doc table.bb2.lj td.cr {
  padding-left: 16px !important;
}
.doc table.bb2.lj td:nth-child(-n + 3) {
  white-space: nowrap;
}
.doc table.bb2.lj tr.lj-h td:nth-child(3) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* laporan lebar (Laba Rugi per Bulan, Neraca Lajur) */
table.st.wide td,
table.st.wide th {
  padding: 5px 8px;
  font-size: 12.5px;
  white-space: nowrap;
}
table.st.wide td:nth-child(2) {
  white-space: normal;
  min-width: 180px;
}
table.st.nl thead th {
  text-align: center;
}
table.st.nl thead th.num {
  text-align: right;
}
.doc table.st.wide th,
.doc table.st.wide td {
  padding: 2px 4px !important;
}
.doc table.st.wide td:nth-child(2) {
  min-width: 0;
}
/* daftar laporan: kartu berjajar */
.rpt-cards {
  padding: 4px 14px 14px;
}
.rpt-gh {
  margin: 16px 2px 8px;
  color: var(--green-d);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.rpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.rpt-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.rpt-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(15, 157, 58, 0.12);
  transform: translateY(-1px);
}
.rpt-ct {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rpt-ct b {
  font-size: 14px;
  line-height: 1.3;
}
.rpt-ct b small {
  color: var(--ink-3);
  font-weight: 600;
}
.rpt-ct > small {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 860px) {
  .rpt-grid {
    grid-template-columns: 1fr;
  }
}

/* bingkai cetak: jarak atas/bawah di setiap halaman */
table.print-frame {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
table.print-frame > thead > tr > td,
table.print-frame > tfoot > tr > td,
table.print-frame > tbody > tr > td {
  padding: 0;
  border: 0;
}
.pf-top {
  height: 9mm;
}
.pf-bot {
  height: 15mm;
}
.code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.code-row input {
  flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.code-row input[readonly] {
  background: #f6f8fa;
}
.code-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
.code-hint.ok {
  color: var(--green-d);
}
.code-hint.bad {
  color: var(--red);
}

/* Pengguna: catatan status email & aturan password */
.note {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.note.warn {
  background: #fff8e6;
  border-color: #f5d98b;
  color: #7a5a00;
}
.note.ok {
  background: #eaf7ef;
  border-color: #b9e2c7;
  color: #1d6b3a;
}
.pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.pw-rules .ok {
  color: #1d7a43;
  font-weight: 600;
}
.login-box .code-in {
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Dasbor keuangan — gaya teknologi & infografis, tanpa bilah tab di atas */
.md.md-bare > .md-tabs {
  display: none;
}
.md.md-bare > .md-body {
  background: none;
  border: 0;
  padding: 0;
}
.md.md-bare > .md-body > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.tx {
  --tx-bg: #0a1f4a;
  --tx-ink: #e6edf7;
  --tx-mute: #8ea3c4;
  --tx-line: rgba(120, 170, 255, 0.16);
  --tx-card: rgba(255, 255, 255, 0.035);
  position: relative;
  color: var(--tx-ink);
  border-radius: 16px;
  padding: 22px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  background: radial-gradient(900px 380px at 12% -10%, rgba(237, 187, 0, 0.2), transparent 60%),
    radial-gradient(800px 420px at 100% 0%, rgba(165, 0, 68, 0.2), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(52, 211, 153, 0.1), transparent 60%),
    linear-gradient(160deg, #0b2f66 0%, #0a1f4a 48%, #4a0b33 100%);
}
.tx::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image: linear-gradient(rgba(96, 165, 250, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.tx > * {
  position: relative;
}
.tx a {
  color: inherit;
  text-decoration: none;
}
.tx-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tx-hero h1 {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(90deg, #fff, #ffd84d 60%, #ff7aa8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd84d;
  border: 1px solid rgba(237, 187, 0, 0.35);
  background: rgba(237, 187, 0, 0.08);
  padding: 4px 10px;
  border-radius: 99px;
}
.tx-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: tx-pulse 1.8s infinite;
}
@keyframes tx-pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}
.tx-meta {
  color: var(--tx-mute);
  font-size: 13px;
}
.tx-meta b {
  color: var(--tx-ink);
}
.tx-eq {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tx-eq-box {
  min-width: 150px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent);
}
.tx-eq-box small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
}
.tx-eq-box b {
  display: block;
  font-size: 19px;
  margin: 2px 0 6px;
  color: #fff;
}
.tx-eq-box i,
.tx-node i,
.tx-meter {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.tx-eq-box em,
.tx-node em,
.tx-meter em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c));
  box-shadow: 0 0 10px var(--c);
}
.tx-op {
  font-size: 26px;
  font-weight: 300;
  color: var(--tx-mute);
}
.tx-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.tx-tile {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  overflow: hidden;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.tx-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
}
.tx-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
.tx-tile-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.tx-lbl {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.tx-tile-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
.tx-big {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
}
.tx-full {
  font-size: 11.5px;
  color: var(--tx-mute);
}
.tx-gauge {
  text-align: center;
  flex: none;
}
.tx-gauge small {
  display: block;
  font-size: 10px;
  color: var(--tx-mute);
  margin-top: -2px;
}
.tx-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}
.tx-ring text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
}
.tx-sub {
  font-size: 12px;
  color: var(--tx-mute);
}
.tx-pos {
  color: #34d399;
}
.tx-neg {
  color: #f87171;
}
.tx-panel {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  min-width: 0;
}
.tx-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.tx-panel h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe3ff;
}
.tx-panel h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 2px;
  background: #edbb00;
  box-shadow: 0 0 8px #edbb00;
  vertical-align: middle;
}
.tx-panel header a {
  font-size: 12px;
  color: #ffd84d;
  opacity: 0.85;
  white-space: nowrap;
}
.tx-panel header a:hover {
  opacity: 1;
}
.tx-wide {
  margin-bottom: 14px;
}
.tx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.tx-grid:last-child {
  margin-bottom: 0;
}
.tx-span2 {
  grid-column: span 2;
}
.tx-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.tx-node {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.tx-node small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c);
}
.tx-node b {
  display: block;
  font-size: 20px;
  color: #fff;
  margin: 4px 0 8px;
  white-space: nowrap;
}
.tx-arrow {
  flex: none;
  align-self: center;
  width: 34px;
  height: 2px;
  position: relative;
  background: repeating-linear-gradient(90deg, #edbb00 0 6px, transparent 6px 11px);
  background-size: 22px 2px;
  animation: tx-dash 1s linear infinite;
}
.tx-arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #edbb00;
  border-right: 0;
}
@keyframes tx-dash {
  to {
    background-position: 22px 0;
  }
}
.tx-svg {
  width: 100%;
  height: auto;
  display: block;
}
.tx-gl {
  stroke: rgba(255, 255, 255, 0.07);
}
.tx-ax {
  fill: #7f93b5;
  font-size: 11px;
}
.tx-axl {
  fill: #cfe3ff;
  font-size: 12px;
}
.tx-val {
  fill: #e6edf7;
  font-size: 10.5px;
  font-weight: 600;
}
.tx-bar {
  filter: drop-shadow(0 0 6px rgba(237, 187, 0, 0.35));
}
.tx-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 6px;
}
.tx-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  vertical-align: -1px;
}
.tx-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.tx-dc {
  fill: #fff;
  font-size: 17px;
  font-weight: 800;
}
.tx-dl {
  fill: #7f93b5;
  font-size: 8.5px;
  letter-spacing: 0.14em;
}
.tx-dleg {
  width: 100%;
  display: grid;
  gap: 6px;
}
.tx-dleg div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.tx-dleg span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-dleg span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}
.tx-dleg b {
  color: #fff;
}
.tx-dleg small {
  color: var(--tx-mute);
  min-width: 74px;
  text-align: right;
}
.tx-list {
  display: grid;
  gap: 12px;
}
.tx-row {
  --c: #edbb00;
  padding: 2px 0;
}
.tx-row.click {
  cursor: pointer;
}
.tx-row.click:hover .tx-row-h span {
  color: #ffd84d;
}
.tx-row-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 5px;
}
.tx-row-h span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-row-h b {
  color: #fff;
  white-space: nowrap;
}
.tx-row small {
  display: block;
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 4px;
}
.tx-meter.amber {
  --c: #fbbf24;
}
.tx-rank {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tx-no {
  flex: none;
  font-size: 18px;
  font-weight: 800;
  color: rgba(251, 191, 36, 0.85);
  width: 28px;
}
.tx-rank-b {
  flex: 1;
  min-width: 0;
}
.tx-tl {
  position: relative;
  display: grid;
  gap: 2px;
}
.tx-tl::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(#edbb00, transparent);
}
.tx-tl-i {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 7px 4px 7px 20px;
  border-radius: 8px;
  font-size: 12.5px;
}
.tx-tl-i::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0a1f4a;
  border: 2px solid #edbb00;
  box-shadow: 0 0 8px #edbb00;
}
.tx-tl-i:hover {
  background: rgba(237, 187, 0, 0.07);
}
.tx-tl-d {
  color: var(--tx-mute);
  white-space: nowrap;
}
.tx-tl-t {
  min-width: 0;
  overflow: hidden;
}
.tx-tl-t small {
  display: block;
  color: var(--tx-mute);
  font-size: 11px;
}
.tx-tl-i b {
  color: #fff;
  white-space: nowrap;
}
.tx-empty {
  color: var(--tx-mute);
  font-size: 13px;
  padding: 18px 0;
  text-align: center;
}
@media (max-width: 1200px) {
  .tx-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .tx {
    padding: 16px;
    border-radius: 12px;
  }
  .tx-hero h1 {
    font-size: 24px;
  }
  .tx-tiles,
  .tx-grid {
    grid-template-columns: 1fr;
  }
  .tx-span2 {
    grid-column: auto;
  }
  .tx-eq {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .tx-eq-box {
    min-width: 0;
    flex: 1;
    padding: 8px 7px;
  }
  .tx-eq-box small {
    font-size: 9px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tx-eq-box b {
    font-size: 13px;
    white-space: nowrap;
  }
  .tx-op {
    font-size: 15px;
  }
  .tx-flow {
    flex-direction: column;
  }
  .tx-arrow {
    transform: rotate(90deg);
    margin: 6px auto;
  }
  .tx-big {
    font-size: 22px;
  }
}

/* ================================================================ HP (gaya portal KKU): bilah bawah melayang, layar Menu ubin ikon, daftar jadi kartu */
.tabbar,
.mmenu,
.tb-brand {
  display: none;
}
@media (max-width: 860px) {
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn,
  .sidebar {
    display: none !important;
  }
  .topbar {
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    gap: 10px;
    min-height: 54px;
  }
  .tb-brand {
    display: block;
    flex: none;
  }
  .tb-brand img {
    height: 30px;
    display: block;
  }
  .topbar .title {
    display: none;
  }
  .topbar #org-switch,
  .topbar > .row {
    display: none;
  }
  .userbox {
    margin-left: auto;
  }
  .content {
    padding: 12px 12px 20px;
  }
  /* bilah bawah */
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 0 12px calc(8px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .tb-pill {
    pointer-events: auto;
    flex: 1;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .tb-pill a,
  .tb-pill button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: 18px;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .tb-pill .active {
    background: var(--green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 157, 58, 0.35);
  }
  /* layar Menu */
  .mmenu:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg, #f4f6f8);
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    animation: mmIn 0.16s ease-out;
  }
  @keyframes mmIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  body.mm-on {
    overflow: hidden;
  }
  .mm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: calc(18px + env(safe-area-inset-top)) 20px 38px;
    color: #fff;
    background: linear-gradient(135deg, #0f9d3a, #0b6b2a 60%, #134e9c);
  }
  .mm-top b {
    display: block;
    font-size: 22px;
  }
  .mm-top span {
    font-size: 13px;
    opacity: 0.88;
  }
  .mm-akun {
    display: flex;
    gap: 8px;
  }
  .mm-akun a,
  .mm-akun button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
  }
  .mm-in {
    margin-top: -22px;
    background: var(--card, #fff);
    border-radius: 22px 22px 0 0;
    padding: 8px 0 16px;
    min-height: calc(100% - 80px);
  }
  .mm-in h2 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 18px 20px 12px;
  }
  .mm-page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 4px;
    padding: 0 10px;
  }
  .mm-t {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--ink);
    text-align: center;
    min-width: 0;
  }
  .mm-t:active .mm-ic {
    transform: scale(0.94);
  }
  .mm-ic {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1.5px solid;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }
  .mm-l {
    font-size: 12px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    padding: 0 2px;
  }
  .mm-g {
    background: #e3f7e6;
    border-color: #5cc46c;
    color: #1f8a32;
  }
  .mm-o {
    background: #fdebd8;
    border-color: #f0a35e;
    color: #c2560c;
  }
  .mm-r {
    background: #fde5e2;
    border-color: #ee8a7f;
    color: #d4352a;
  }
  .mm-y {
    background: #fff6c9;
    border-color: #ecc94b;
    color: #a16207;
  }
  .mm-b {
    background: #dcecfc;
    border-color: #7fb3ec;
    color: #1769c2;
  }
  .mm-p {
    background: #eee6fc;
    border-color: #b39cf0;
    color: #6d3fd1;
  }
  .mm-c {
    background: #d8f5f1;
    border-color: #5fc9bb;
    color: #0f8a7b;
  }
  .mm-org {
    display: grid;
    gap: 4px;
    margin: 14px 16px 0;
    font-size: 12px;
    color: var(--ink-3);
  }
  .mm-ver {
    margin: 26px 20px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--ink-3);
    text-align: center;
  }
  /* isian & tombol nyaman disentuh; iOS tidak zoom otomatis */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  .btn {
    min-height: 40px;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-grid > * {
    min-width: 0;
  }
  .form-grid input:not([type='checkbox']):not([type='radio']),
  .form-grid select,
  .form-grid textarea {
    max-width: 100%;
    min-width: 0;
  }
  .form-actions {
    bottom: calc(76px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  #toast-root {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .toast {
    max-width: none;
  }
  .md-tabs {
    scrollbar-width: none;
  }
  .md-tabs::-webkit-scrollbar {
    display: none;
  }
  .md-tacts {
    display: none;
  }
  .toolbar {
    gap: 8px;
  }
  /* daftar standar → kartu */
  table.t.t-m,
  table.t.t-m tbody,
  table.t.t-m tfoot {
    display: block;
  }
  table.t.t-m thead {
    display: none;
  }
  table.t.t-m tbody tr {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  table.t.t-m tbody tr.click:active {
    background: #f1f7f3;
  }
  table.t.t-m td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 2px 0;
    border: 0;
    text-align: left;
    white-space: normal;
    min-width: 0;
    width: auto !important;
  }
  table.t.t-m td.num {
    text-align: right;
  }
  table.t.t-m td::before {
    content: attr(data-l);
    text-align: left;
    font-size: 12px;
    color: var(--ink-3);
  }
  table.t.t-m td[data-l=''] {
    grid-template-columns: minmax(0, 1fr);
  }
  table.t.t-m td[data-l='']::before {
    display: none;
  }
  table.t.t-m td.c-no {
    display: none;
  }
  table.t.t-m td.c-main {
    display: block;
    order: -1;
    text-align: left;
    font-size: 14.5px;
    padding-bottom: 4px;
  }
  table.t.t-m td.c-main::before {
    display: none;
  }
  table.t.t-m td.act {
    display: flex;
    justify-content: flex-end;
  }
  table.t.t-m td.act::before {
    display: none;
  }
  table.t.t-m tfoot tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 10px 14px;
    background: #f6f8fa;
    font-weight: 700;
  }
  table.t.t-m tfoot td {
    border: 0;
    padding: 0;
  }
  table.t.t-m tfoot td:empty {
    display: none;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  /* form jurnal: kepala 2 kolom, tiap baris jurnal jadi kartu kecil */
  .jf-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px;
  }
  .jf-head > .jf-note,
  .jf-head > .full {
    grid-column: 1 / -1;
  }
  .jf-head input {
    min-width: 0;
    width: 100%;
  }
  table.t.jf,
  table.t.jf tbody,
  table.t.jf tfoot {
    display: block;
  }
  table.t.jf thead {
    display: none;
  }
  table.t.jf tbody tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  table.t.jf tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  table.t.jf td.jf-no {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    font-weight: 700;
  }
  table.t.jf td.jf-acc {
    grid-column: 2;
    grid-row: 1;
  }
  table.t.jf td.jf-name {
    grid-column: 3;
    grid-row: 1;
    font-size: 13px;
    line-height: 1.25;
  }
  table.t.jf td.act {
    grid-column: 4;
    grid-row: 1;
  }
  table.t.jf tbody td:nth-child(4) {
    grid-column: 1 / -1;
  }
  table.t.jf tbody td:nth-child(5) {
    grid-column: 1 / 3;
  }
  table.t.jf tbody td:nth-child(6) {
    grid-column: 3 / -1;
  }
  table.t.jf tbody td:nth-child(5)::before,
  table.t.jf tbody td:nth-child(6)::before {
    display: block;
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 2px;
  }
  table.t.jf tbody td:nth-child(5)::before {
    content: 'Debit';
  }
  table.t.jf tbody td:nth-child(6)::before {
    content: 'Kredit';
  }
  table.t.jf tfoot tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    padding: 10px 12px;
  }
  table.t.jf tfoot td {
    display: block;
    padding: 0;
    border: 0;
  }
  table.t.jf tfoot td:first-child {
    grid-column: 1 / -1;
  }
  table.t.jf tfoot td#td::before {
    content: 'Total debit ';
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-3);
  }
  table.t.jf tfoot td#tc::before {
    content: 'Total kredit ';
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-3);
  }
  table.t.jf tfoot td:empty {
    display: none;
  }
  /* laporan & mutasi: kolom kode disembunyikan, nama akun menempel di kiri, angka satu baris (geser ke samping di dalam tabel) */
  :is(table.st, table.mt):has(.acc-code) tr > :first-child:not([colspan]) {
    display: none;
  }
  :is(table.st, table.mt) td,
  :is(table.st, table.mt) th {
    font-size: 12.5px;
    padding: 7px 9px;
  }
  :is(table.st, table.mt) td.num,
  :is(table.st, table.mt) th.num {
    white-space: nowrap;
  }
  :is(table.st, table.mt):has(.acc-code) tr > :nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 150px;
    max-width: 190px;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  :is(table.st, table.mt) tr.st-t > :nth-child(2),
  :is(table.st, table.mt) tr.st-sub > :nth-child(2) {
    background: #f1f5f2;
  }
  :is(table.st, table.mt) tr.st-gt > :nth-child(2) {
    background: var(--green-l);
  }
  .st-wrap {
    margin-top: 10px;
  }
  .jf-page .form-actions,
  .form-actions {
    justify-content: stretch;
  }
  .form-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* sub-menu Mitra: filter donor/project + kepala project */
.md-body > .pg-bar {
  margin-top: 14px;
}
.pg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 10px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pg-head > div {
  flex: 1;
  min-width: 0;
}
.pg-head b {
  display: block;
}
.pg-head small {
  color: var(--ink-3);
}
@media (max-width: 860px) {
  .pg-head {
    flex-wrap: wrap;
  }
  .pg-head > div {
    flex-basis: calc(100% - 90px);
  }
  .pg-head .btn {
    margin-left: auto;
  }
  .pg-bar select {
    flex: 1 1 100%;
  }
}

/* menu samping: sub-menu terbuka otomatis untuk modul yang diklik/dibuka, modul lain tertutup */
.nav a.sub {
  display: none;
}
.nav a.sub.show {
  display: flex;
  animation: navSub 0.16s ease-out;
}
@keyframes navSub {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.nav a[data-par]::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
  transition: transform 0.15s;
}
.nav a[data-par].expanded::after {
  transform: rotate(45deg);
}

/* Buat/Ubah Pengajuan: pilihan Jenis, Donor, Kegiatan, Sub Kegiatan tetap di atas saat form digeser (layar lebar) */
@media (min-width: 861px) {
  .xf-setup {
    position: sticky;
    top: calc(var(--tb-h, 58px) + 8px);
    z-index: 15;
    box-shadow:
      0 -9px 0 var(--card, #fff),
      0 6px 18px rgba(16, 24, 40, 0.1);
  }
}

/* ringkasan kecil (daftar Pengajuan) */
.md-sum.sm {
  gap: 10px !important;
}
.md-sum.sm .kpi {
  padding: 7px 12px 7px 14px;
}
.md-sum.sm .kpi::before {
  width: 3px;
}
.md-sum.sm .kpi .label {
  font-size: 11px;
}
.md-sum.sm .kpi .value {
  font-size: 15px;
  margin-top: 1px;
}
.md-sum.sm .kpi .sub {
  font-size: 11px;
  margin-top: 0;
}
@media (max-width: 860px) {
  .md-sum.sm .kpi .value {
    font-size: 14px;
  }
}

/* dashboard: posisi kas, bank & uang muka per simpanan (lembar "Saldo" Excel) */
.tx-g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.tx-pos {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px 28px;
}
.tx-pos-h {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin-bottom: 6px;
}
.tx-pos-r {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px dashed rgba(120, 170, 255, 0.14);
  font-size: 13.5px;
}
.tx-pos-r span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-pos-r b {
  font-weight: 700;
  white-space: nowrap;
}
.tx-pos-r.click {
  cursor: pointer;
  border-radius: 6px;
}
.tx-pos-r.click:hover {
  background: rgba(237, 187, 0, 0.07);
}
.tx-pos-t {
  border-bottom: 0;
  border-top: 1px solid rgba(120, 170, 255, 0.3);
  margin-top: 4px;
  font-weight: 600;
}
.tx-pos-g {
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  border-radius: 8px;
  margin-top: 10px;
  padding: 9px 10px;
}
.tx-pos-g b {
  color: #fff;
  font-size: 15px;
}
.tx-blue {
  color: #7cc4ff;
}
.tx-redv {
  color: #ff7b7b;
}
.tx-warn {
  display: block;
  margin-top: 8px;
  color: #fbbf24;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .tx-g2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .tx-pos {
    grid-template-columns: 1fr;
  }
  .tx-g2 {
    grid-template-columns: 1fr !important;
  }
}
.tx-pos > div {
  min-width: 0;
}
.tx-pos-r span {
  color: var(--tx-ink);
  min-width: 0;
}
.tx-pos-t span {
  color: #cfe3ff;
}

/* dashboard: judul ringkas, kartu angka utama lebih kecil & rapi */
.tx-hero {
  margin-bottom: 14px;
}
.tx-hero h1 {
  font-size: 26px;
  margin: 6px 0 0;
}
.tx-tiles {
  gap: 12px;
  margin-bottom: 12px;
}
.tx-tile {
  padding: 12px 14px;
  border-radius: 12px;
}
.tx-tile-top {
  gap: 8px;
}
.tx-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.tx-ic svg {
  width: 14px;
  height: 14px;
}
.tx-lbl {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-tile-mid {
  margin: 8px 0 4px;
}
.tx-big {
  font-size: 19px;
  text-shadow: none;
}
.tx-full {
  font-size: 11px;
}
.tx-ring text {
  font-size: 15px;
}
.tx-gauge small {
  font-size: 9.5px;
  margin-top: 0;
}
.tx-sub {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .tx-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tx-tile {
    padding: 10px 11px;
  }
  .tx-big {
    font-size: 16px;
  }
  .tx-gauge small {
    display: none;
  }
  .tx-sub {
    white-space: normal;
  }
}
@media (max-width: 760px) {
  .tx-gauge {
    display: none;
  }
  .tx-big {
    white-space: nowrap;
  }
  .tx-lbl {
    letter-spacing: 0.04em;
  }
}

/* Setting Parameter → Dashboard */
.pm .pm-note {
  margin: 14px 0 0;
  font-size: 13px;
}
.pm .lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.pm-list {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.pm-chk {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.pm-chk:hover {
  background: #f4f7f5;
}
.pm-chk input {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--green);
}
.pm-chk span {
  flex: 1;
  min-width: 0;
}
.pm-chk small {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 6px 2px 2px;
  background: #fff;
}
.pm-row .pm-chk {
  flex: 1;
}
.pm-mv {
  display: inline-flex;
  gap: 2px;
}
.pm-mv .btn {
  min-width: 30px;
  justify-content: center;
  padding: 2px 6px;
}
.pm-num {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* dashboard: panel mengikuti Setting Parameter (urutan bebas) */
.tx-tiles {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}
.tx-dyn {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.tx-dyn > .w-6 {
  grid-column: span 6;
}
.tx-dyn > .w-5 {
  grid-column: span 5;
}
.tx-dyn > .w-4 {
  grid-column: span 4;
}
.tx-dyn > .w-3 {
  grid-column: span 3;
}
.tx-dyn > .w-2 {
  grid-column: span 2;
}
.tx-dyn > .w-1 {
  grid-column: span 1;
}
@media (max-width: 1200px) {
  .tx-dyn > .w-5,
  .tx-dyn > .w-4,
  .tx-dyn > .w-2,
  .tx-dyn > .w-1 {
    grid-column: span 6;
  }
}
@media (max-width: 760px) {
  .tx-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .tx-dyn {
    grid-template-columns: 1fr;
  }
  .tx-dyn > * {
    grid-column: auto !important;
  }
}

/* Setting Parameter → Approve */
.pa-list {
  display: grid;
  gap: 12px;
}
.pa-step {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fbfcfc;
}
.pa-h {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: end;
}
.pa-h > b {
  align-self: center;
  color: var(--xf-navy, #1f3864);
}
.pa-who {
  margin-top: 10px;
}
.pa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px 4px 8px;
  font-size: 12.5px;
  background: #fff;
  cursor: pointer;
}
.pa-chip:has(input:checked) {
  border-color: var(--green);
  background: var(--green-l);
  color: var(--green-d);
}
.pa-chip input {
  accent-color: var(--green);
}
.pa-chip small {
  color: var(--ink-3);
}
.pa-step details {
  margin-top: 8px;
}
.pa-step summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 600;
}
@media (max-width: 860px) {
  .pa-h {
    grid-template-columns: 1fr;
  }
}

/* Setting Parameter › Hak Akses */
.hk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.hk-bar .f {
  margin: 0;
  min-width: 200px;
}
.hk-t td.center,
.hk-t th.center {
  text-align: center;
}
.hk-t tr.hk-g td {
  background: var(--bg-2, #f4f6f8);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.hk-t input[type='checkbox'] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  vertical-align: middle;
}
.hk-s {
  white-space: nowrap;
}
.hk-col,
.hk-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.hk-b {
  display: inline-block;
  min-width: 18px;
  padding: 1px 4px;
  margin: 1px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.hk-L {
  background: #e8f0fb;
  color: #134e9c;
}
.hk-T {
  background: #e8f6ec;
  color: #0b6b2a;
}
.hk-U {
  background: #fdf4e3;
  color: #8a5608;
}
.hk-H {
  background: #fde8e8;
  color: #b0151a;
}
.hk-C {
  background: #f1ebf8;
  color: #6b3fa0;
}

/* parameter dashboard: akun yang dijumlahkan per kartu */
.pm-acc {
  margin: -2px 0 6px 34px;
  font-size: 12.5px;
}
.pm-acc summary {
  cursor: pointer;
  color: var(--ink-3);
  padding: 2px 0;
}
.pm-acc summary b {
  color: var(--ink-2);
}
.pm-acc .pm-list {
  margin-top: 4px;
  border-left: 2px solid var(--line);
  padding-left: 6px;
}
.pm-acc .pm-chk {
  padding: 4px 6px;
  font-size: 12.5px;
}
.pm-acc .acc-code {
  font-size: 11.5px;
  margin-right: 4px;
}

/* Progres Report (laporan kemajuan proyek, diedit bersama) */
.pr-donor {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.pr-plist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.pr-pcard {
  display: block;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.pr-pcard:hover {
  border-color: var(--green);
  box-shadow: 0 6px 20px rgba(16, 40, 24, 0.08);
}
.pr-pcard h3 {
  margin: 0 0 2px;
  font-size: 16px;
}
.pr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.pr-last {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-size: 13px;
}
.pr-pbar {
  flex: 1;
  min-width: 60px;
  height: 8px;
  border-radius: 99px;
  background: #eaeef2;
  overflow: hidden;
}
.pr-pbar i {
  display: block;
  height: 100%;
  background: var(--green);
}
.pr-pbar.mid i {
  background: #d69e2e;
}
.pr-pbar.low i {
  background: var(--red);
}
.pr-pct.ok {
  color: var(--green-d);
}
.pr-pct.mid {
  color: #8a5608;
}
.pr-pct.low {
  color: #b0151a;
}
.pr-repbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 12px;
}
.pr-repbar .f {
  margin: 0;
  min-width: 260px;
}
.pr-sub {
  margin: 0 0 12px;
  font-size: 13px;
}
.pr-dash tr.pr-grp td,
.pr-act tr.pr-grp td {
  background: var(--bg-2, #f4f6f8);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.pr-wrap {
  background: #eef1f3;
  border-radius: var(--radius);
  padding: 0 0 24px;
}
.pr-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pr-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.pr-tools button {
  white-space: nowrap;
}
.pr-tools button,
.pr-imgbtn {
  min-width: 32px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pr-tools button:hover,
.pr-imgbtn:hover {
  background: #eef1f3;
  border-color: var(--line);
}
.pr-tools .sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 6px;
}
.pr-ro {
  font-size: 13px;
  color: var(--ink-3);
}
.pr-people {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.pr-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.pr-state {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
}
.pr-state.busy {
  color: #8a5608;
}
.pr-state.err {
  color: #b0151a;
  font-weight: 600;
}
.pr-acts {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pr-acts select {
  width: auto;
  padding: 4px 8px;
}
.pr-page {
  max-width: 1180px;
  margin: 18px auto 0;
  background: #fff;
  padding: 36px 40px;
  box-shadow:
    0 1px 3px rgba(16, 24, 40, 0.12),
    0 8px 24px rgba(16, 24, 40, 0.06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}
.pr-page h1.pr-h1 {
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.06em;
  margin: 0 0 18px;
}
.pr-page h2 {
  font-size: 16px;
  margin: 22px 0 8px;
}
.pr-page h3 {
  font-size: 14.5px;
  margin: 18px 0 8px;
}
.pr-gen {
  width: 100%;
  border-collapse: collapse;
}
.pr-gen th,
.pr-gen td {
  border: 1px solid #c9d1d6;
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.pr-gen th {
  width: 30%;
  background: #f6f8f9;
  font-weight: 600;
}
.pr-gen input {
  width: 100%;
  border: 1px solid transparent;
  background: none;
  padding: 4px 6px;
  font: inherit;
}
.pr-gen input:hover:not(:disabled),
.pr-gen input:focus {
  border-color: var(--line);
  background: #fff;
}
.pr-tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-weight: 600;
}
.pr-actwrap {
  overflow-x: auto;
}
.pr-act {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}
.pr-act th,
.pr-act td {
  border: 1px solid #c9d1d6;
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}
.pr-act th {
  background: #f6f8f9;
  font-size: 12px;
}
.pr-act td.pr-pctc {
  text-align: center;
  white-space: nowrap;
}
.pr-f,
.pr-rich {
  min-height: 22px;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  word-break: break-word;
}
.pr-f[contenteditable]:hover,
.pr-rich[contenteditable]:hover {
  background: #f7faf8;
}
.pr-f:focus,
.pr-rich:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(15, 157, 58, 0.35);
}
.pr-f:empty::before,
.pr-rich:empty::before {
  content: attr(data-ph);
  color: #a7b1b8;
  font-style: italic;
}
.pr-id {
  font-style: italic;
  color: #44515e;
  margin-top: 4px;
}
.pr-code {
  font-weight: 700;
}
.pr-num {
  text-align: right;
}
.pr-rich p {
  margin: 0 0 8px;
}
.pr-rich ul,
.pr-rich ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.pr-rich img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 4px 0;
}
.pr-rich a {
  color: #1155cc;
  text-decoration: underline;
}
.pr-x {
  text-align: center;
}
.pr-busy {
  position: relative;
  box-shadow: inset 3px 0 0 var(--who, #134e9c);
}
tr.pr-busy td:first-child {
  box-shadow: inset 3px 0 0 var(--who, #134e9c);
}
.pr-busy::after {
  content: attr(data-who);
  position: absolute;
  top: -9px;
  right: 6px;
  background: var(--who, #134e9c);
  color: #fff;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  pointer-events: none;
}
tr.pr-busy::after {
  display: none;
}
.pr-stale {
  box-shadow: 0 0 0 2px #f5d98b;
}
.pr-conflict {
  background: #fff8e6;
  border: 1px solid #f5d98b;
  color: #7a5a00;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-family: system-ui, sans-serif;
}
.pr-flash {
  animation: prflash 2.4s ease-out;
}
@keyframes prflash {
  0%,
  40% {
    background: #fff6cc;
  }
  100% {
    background: transparent;
  }
}
@media (max-width: 760px) {
  .pr-page {
    padding: 18px 12px;
  }
  .pr-state {
    margin-left: 0;
  }
  .pr-plist {
    grid-template-columns: 1fr;
  }
}

/* cetak Progress Report: A4 tegak — gambar & tautan panjang tidak melebarkan tabel */
.doc.pr-print img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 4px 0;
}
.doc.pr-print table.grid {
  width: 100%;
  table-layout: fixed;
}
.doc.pr-print td,
.doc.pr-print th {
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}
.doc.pr-print table.pr-pt th {
  text-align: center;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.doc.pr-print table.pr-pt td:nth-child(1),
.doc.pr-print table.pr-pt td:nth-child(6) {
  text-align: center;
}
.doc.pr-print table.pr-pt td p {
  margin: 0 0 4px;
}
.doc.pr-print h1 {
  font-size: 18px;
  margin: 0 0 8px;
}
.doc.pr-print h3 {
  font-size: 13px;
  margin: 10px 0 4px;
}
.doc.pr-print h4 {
  font-size: 12px;
  margin: 8px 0 4px;
}

/* Progres Report → tab Dashboard (infografis, gaya dashboard utama) */
.pr-newsel {
  width: auto;
  min-width: 260px;
  font-weight: 600;
  color: var(--green-d);
  border-color: var(--green);
}
.pi .pi-hero {
  align-items: center;
}
.pi .pi-hero h1 {
  font-size: 24px;
}
.pi-ring .pi-rv {
  fill: #fff;
  font-size: 24px;
  font-weight: 800;
}
.pi-ring .pi-rl {
  fill: #8ea3c4;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pi-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.pi-kpi > div {
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(120, 170, 255, 0.16);
  overflow: hidden;
}
.pi-kpi > div::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
}
.pi-kpi b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 16px color-mix(in srgb, var(--c) 50%, transparent);
}
.pi-kpi span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c);
}
.pi-dist {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.pi-dist i {
  display: block;
  height: 100%;
}
.pi-head,
.pi-row {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: center;
}
.pi-head {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-mute);
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(120, 170, 255, 0.2);
}
.pi-head span:nth-child(2),
.pi-head span:nth-child(3) {
  text-align: right;
}
.pi-row {
  padding: 10px;
  border-bottom: 1px dashed rgba(120, 170, 255, 0.12);
  border-radius: 8px;
  color: var(--tx-ink);
  font-size: 13.5px;
}
.pi-row:hover {
  background: rgba(237, 187, 0, 0.06);
}
.pi-row.low {
  background: rgba(248, 113, 113, 0.07);
}
.pi-row.low .pi-name {
  color: #ffb4b4;
}
.pi-name {
  min-width: 0;
}
.pi-name small {
  display: block;
  font-size: 10.5px;
  color: var(--tx-mute);
}
.pi-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.pi-pc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pi-pc i {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pi-pc em {
  display: block;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 10px currentColor;
}
.pi-pc b {
  width: 46px;
  text-align: right;
  font-size: 14px;
}
.pi-pj {
  font-size: 12.5px;
  color: #cfe3ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi .tx-row-h span small {
  color: var(--tx-mute);
}
@media (max-width: 860px) {
  .pi-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pi-head {
    display: none;
  }
  .pi-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
  .pi-row .pi-name {
    grid-column: 1 / -1;
  }
  .pi-row .pi-pc {
    grid-column: 1 / -1;
  }
  .pi-num {
    text-align: left;
  }
  .pi .pi-hero h1 {
    font-size: 20px;
  }
  .pi-ring {
    width: 96px;
    height: 96px;
  }
}
.tx-dyn > * {
  min-width: 0;
}
.pi .tx-row-h small {
  display: inline;
  margin: 0;
}
.pi .tx-row-h span {
  min-width: 0;
}
.tx-list > * {
  min-width: 0;
}
.pi .tx-row-h span {
  white-space: normal;
  overflow: visible;
}
.pi .tx-row-h b {
  flex: none;
}

/* Pengajuan & LPJ mengikuti lembar Excel donor: tombol Program berwarna pita donor, Saving biru muda;
   kop Saving = logo pelaksana di tengah tanpa logo donor; judul pita gaya "nama saja" (TAF) tidak dikapitalkan */
.xf-form .xf-setup .seg label:has(input[value='Program']:checked) {
  background: var(--xf-pc, var(--green));
}
.xf-form .xf-setup .seg label:has(input[value='Saving']:checked) {
  background: #4fadea;
}
.xf .xf-proj.plain {
  text-transform: none;
  font-size: 17px;
}
.fd-kop.sv {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
}
.fd-kop.sv #fd-lh,
.fd-kop.sv #fd-donor {
  display: none;
}
.fd-kop.sv img {
  max-width: 200px;
}
.doc .kop.sv {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
}

/* Edit Report: kolom kegiatan, target, capaian & penanggung jawab dipersempit agar Description of Work lebih lebar */
.pr-act th {
  font-size: 10.5px;
  line-height: 1.25;
  padding: 6px 4px;
}
.pr-act td:not(:nth-child(3)) {
  font-size: 12.5px;
  padding: 6px 5px;
}
.pr-act td:nth-child(3) {
  padding: 6px 10px;
}

/* Progres Report › Dashboard: ringkasan 1 slide 16:9 (seperti tabel capaian di PPT), ukuran huruf ikut lebar slide */
.ps-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ps-wrap {
  overflow-x: auto;
  border-radius: 14px;
}
.ps-wrap:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050b1c;
  border-radius: 0;
}
.ps-box {
  container-type: inline-size;
  width: 100%;
  min-width: 640px;
}
.ps-wrap:fullscreen .ps-box {
  width: min(100vw, 177.7vh);
  min-width: 0;
}
.ps {
  --ink: #e6edf7;
  --mute: #8ea3c4;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  padding: 2.4cqw 2.8cqw 1.6cqw;
  color: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(165, 0, 68, 0.22), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(237, 187, 0, 0.14), transparent 60%),
    linear-gradient(rgba(120, 170, 255, 0.05) 1px, transparent 1px) 0 0 / 2.4cqw 2.4cqw,
    linear-gradient(90deg, rgba(120, 170, 255, 0.05) 1px, transparent 1px) 0 0 / 2.4cqw 2.4cqw,
    #0a1f4a;
}
.ps-h {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-bottom: 1.2cqw;
}
.ps-tt {
  flex: 1;
  min-width: 0;
}
.ps-eb {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  font-size: 0.9cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #67e8f9;
}
.ps-eb i {
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0.8cqw #34d399;
}
.ps h1 {
  margin: 0.4cqw 0 0;
  font-size: 2.6cqw;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #fff, #ffd84d 55%, #ff7aa8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ps-sum {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
}
.ps-sum > div {
  text-align: center;
  padding: 0.5cqw 0.9cqw;
  border-radius: 0.8cqw;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 170, 255, 0.16);
  border-top: 2px solid var(--c);
  min-width: 5.4cqw;
}
.ps-sum b {
  display: block;
  font-size: 1.9cqw;
  line-height: 1.1;
  color: #fff;
}
.ps-sum span {
  font-size: 0.8cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
}
.ps-ring {
  width: 5.6cqw;
  height: 5.6cqw;
}
.ps-ring text {
  fill: #fff;
  font-size: 8.5px;
  font-weight: 800;
}
.ps-t {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto repeat(var(--n), minmax(0, 1fr));
  border-radius: 0.8cqw;
  overflow: hidden;
  border: 1px solid rgba(120, 170, 255, 0.18);
}
.ps-r {
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
  align-items: center;
  column-gap: 1.2cqw;
  padding: 0 1.2cqw;
  font-size: min(1.3cqw, calc(40cqw / var(--n) * 0.46));
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid rgba(120, 170, 255, 0.1);
  min-height: 0;
}
.ps-r:nth-child(odd):not(.ps-th) {
  background: rgba(255, 255, 255, 0.035);
}
a.ps-r:hover {
  background: rgba(237, 187, 0, 0.1);
}
.ps-th {
  background: linear-gradient(90deg, #1d4ed8, #4f46e5);
  color: #fff;
  font-weight: 700;
  font-size: 1.05cqw;
  padding-top: 0.7cqw;
  padding-bottom: 0.7cqw;
  border-top: 0;
}
.ps-th span:nth-child(2),
.ps-th span:nth-child(3) {
  text-align: right;
}
.ps-r.red {
  color: #fca5a5;
}
.ps-r.red .ps-nm {
  font-weight: 600;
}
.ps-nm,
.ps-pj {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-pc {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
}
.ps-pc i {
  flex: 1;
  height: 0.55cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.ps-pc em {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.ps-pc b {
  min-width: 3.6cqw;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ps-empty {
  padding: 3cqw;
  text-align: center;
  color: var(--mute);
  font-size: 1.3cqw;
}
.ps-f {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  margin-top: 0.9cqw;
  font-size: 0.85cqw;
  color: var(--mute);
}
.ps-f i {
  display: inline-block;
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 2px;
  margin: 0 0.4cqw 0 1cqw;
  vertical-align: -0.05cqw;
}
.ps-f i:first-child {
  margin-left: 0;
}

/* slide capaian: nama kegiatan, target & capaian boleh 2 baris; judul berwarna donor; tema gelap (bawaan) / terang */
.ps {
  --blue: #60a5fa;
  --ok: #34d399;
  --mid: #edbb00;
  --lo: #fbbf24;
  --bad: #f87171;
  --red-t: #fca5a5;
  --trk: rgba(255, 255, 255, 0.1);
  --rowalt: rgba(255, 255, 255, 0.035);
  --bdr: rgba(120, 170, 255, 0.16);
}
.ps-r {
  font-size: min(1.3cqw, calc(37cqw / var(--n) * 0.39));
  line-height: 1.15;
}
.ps-nm,
.ps-n {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: clip;
}
.ps-th span {
  -webkit-line-clamp: unset;
}
.ps h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: color-mix(in srgb, var(--dc) 82%, #fff);
  text-shadow: 0 0 2cqw color-mix(in srgb, var(--dc) 45%, transparent);
}
.ps-r.red {
  color: var(--red-t);
}
.ps-pc em {
  background: var(--k);
}
.ps-pc b {
  color: var(--k);
}
.ps-pc i {
  background: var(--trk);
}
.ps-ring .tr {
  stroke: var(--trk);
}
.ps-box.exp .ps {
  border-radius: 0;
}
.ps-box.exp a.ps-r:hover {
  background: inherit;
}
.ps.light {
  --ink: #1f2a37;
  --mute: #5b6b7f;
  --blue: #2563eb;
  --ok: #059669;
  --mid: #0284c7;
  --lo: #d97706;
  --bad: #dc2626;
  --red-t: #dc2626;
  --trk: #e3e8ef;
  --rowalt: #eef2f8;
  --bdr: #d6deea;
  background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--dc) 10%, transparent), transparent 60%), #fff;
}
.ps.light h1 {
  color: color-mix(in srgb, var(--dc) 82%, #000);
  text-shadow: none;
}
.ps.light .ps-eb {
  color: #475569;
}
.ps.light .ps-sum > div {
  background: #f5f7fb;
  border-color: var(--bdr);
}
.ps.light .ps-sum b {
  color: #111827;
}
.ps.light .ps-ring text {
  fill: #111827;
}
.ps.light .ps-t {
  border-color: var(--bdr);
}
.ps.light .ps-r {
  border-top-color: #e5eaf1;
}
.ps.light .ps-r:nth-child(odd):not(.ps-th) {
  background: var(--rowalt);
}
.ps.light a.ps-r:hover {
  background: #e0f2fe;
}
.ps.light .ps-th {
  background: #4f81bd;
}
.ps-r {
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.05fr) minmax(0, 1fr);
  font-size: min(1.3cqw, calc(37cqw / var(--n) * 0.41));
}

/* slide capaian: kolom Kode, tanpa motif kotak-kotak, garis kolom jelas, semua sel (termasuk judul kolom) boleh 2 baris */
.ps {
  background: radial-gradient(60% 80% at 100% 0%, rgba(165, 0, 68, 0.2), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(237, 187, 0, 0.1), transparent 60%), #0b2252;
}
.ps.light {
  background: #fff;
}
.ps {
  --grid: rgba(150, 190, 255, 0.18);
  --rowln: rgba(150, 190, 255, 0.16);
  --rowalt: rgba(255, 255, 255, 0.045);
}
.ps.light {
  --grid: #cfd8e6;
  --rowln: #d9e1ec;
  --rowalt: #eef3f9;
}
.ps-t {
  border: 1px solid var(--grid);
  background: rgba(255, 255, 255, 0.015);
}
.ps.light .ps-t {
  background: #fff;
}
.ps-r {
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(
      0,
      1.05fr
    );
  column-gap: 0;
  padding: 0;
  align-items: stretch;
  border-top: 1px solid var(--rowln);
  font-size: min(1.25cqw, calc(36cqw / var(--n) * 0.4));
  line-height: 1.15;
}
.ps-r .c {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0.25cqw 0.8cqw;
}
.ps-r .c + .c {
  border-left: 1px solid var(--grid);
}
.ps-r .c.n {
  justify-content: flex-end;
  text-align: right;
}
.ps-r .x {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ps-r .cd {
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}
.ps-r.red .cd {
  color: var(--red-t);
}
.ps-r.red .nm {
  font-weight: 600;
}
.ps-r .pc {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.3cqw;
}
.ps-r .pc b {
  text-align: right;
  color: var(--k);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.ps-r .pc i {
  display: block;
  height: 0.4cqw;
  border-radius: 99px;
  background: var(--trk);
  overflow: hidden;
}
.ps-r .pc em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--k);
}
.ps-r:nth-child(odd):not(.ps-th) {
  background: var(--rowalt);
}
.ps-th {
  padding: 0;
  font-size: 1cqw;
  line-height: 1.15;
  border-top: 0;
}
.ps-th .c {
  padding: 0.55cqw 0.8cqw;
}
.ps-th .c + .c {
  border-left-color: rgba(255, 255, 255, 0.25);
}
.ps-th .c:first-child {
  justify-content: center;
}
.ps-th .c {
  text-align: left;
}
.ps-th .c.n {
  text-align: right;
}
.ps-th .x {
  -webkit-line-clamp: 2;
}
/* baris judul tabel slide berwarna lembaga sumber dana; isi baris tidak boleh meluber ke baris lain */
.ps .ps-th,
.ps.light .ps-th {
  background: linear-gradient(90deg, var(--dc), color-mix(in srgb, var(--dc) 78%, #000));
  color: var(--dc-ink, #fff);
}
.ps-th .c + .c {
  border-left-color: color-mix(in srgb, var(--dc-ink, #fff) 30%, transparent);
}
.ps-r {
  overflow: hidden;
  font-size: min(1.2cqw, calc(34cqw / var(--n) * 0.4));
}
.ps-r .c {
  overflow: hidden;
}
.xf-form .xf-setup .seg label:has(input[value='Internal']:checked) {
  background: #0f9d3a;
  color: #fff;
}
.xf-setup .seg label {
  white-space: nowrap;
}

/* LPJ: dokumen pendukung (wajib minimal 1) */
.lpj-sup {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2, #f7f9fa);
}
.lpj-sup table {
  margin: 8px 0;
  background: #fff;
}
.lpj-sup input.sd-note {
  width: 100%;
}
.lpj-sup .sd-f {
  max-width: 230px;
}
.lpj-sup .sd-s {
  display: block;
  margin-top: 2px;
}
.lpj-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.lpj-doc {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  min-width: 0;
}
.lpj-doc img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  flex: none;
}
.lpj-doc .lpj-ic {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #eef2f8;
  color: #1f3864;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}
.lpj-doc > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.act-l4 {
  padding-left: 42px;
}
.act-l5 {
  padding-left: 56px;
}
/* menu Project: dokumen project */
.pd-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.pd-add input[name='note'] {
  flex: 1 1 280px;
  min-width: 0;
}
.pd-add input[type='file'] {
  max-width: 260px;
}

/* Hak Akses per pengguna: ringkas, kelompok menu ditata 2 kolom kiri-kanan */
.hk-allbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.hk-allbar .hk-col {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-weight: 600;
}
.hk-cols {
  columns: 2 460px;
  column-gap: 14px;
}
.hk-card {
  break-inside: avoid;
  margin: 0 0 12px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.hk-t.hk-c {
  width: 100%;
  font-size: 13px;
}
.hk-t.hk-c th {
  padding: 6px 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-2, #f4f6f8);
}
.hk-t.hk-c th:first-child {
  color: var(--ink-2);
  font-weight: 700;
}
.hk-t.hk-c td {
  padding: 3px 6px;
  height: auto;
}
.hk-t.hk-c td:first-child {
  width: 52%;
}
.hk-t.hk-c .hk-row {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  line-height: 1.25;
}
.hk-t.hk-c input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
}
.hk-t td.hk-s,
.hk-t td,
.hk-t th {
  padding-top: 5px;
  padding-bottom: 5px;
}
/* Hak Akses: satu kolom saja, kolom hak sejajar antar kelompok */
.hk-cols {
  columns: auto;
}
.hk-card {
  margin-bottom: 8px;
}
.hk-t.hk-c {
  table-layout: fixed;
}
.hk-t.hk-c th:first-child,
.hk-t.hk-c td:first-child {
  width: auto;
}
.hk-t.hk-c th:not(:first-child),
.hk-t.hk-c td:not(:first-child) {
  width: 92px;
}
@media (max-width: 700px) {
  .hk-t.hk-c th:not(:first-child),
  .hk-t.hk-c td:not(:first-child) {
    width: 46px;
  }
  .hk-t.hk-c th {
    font-size: 9.5px;
  }
}
.hk-dirty {
  color: var(--amber, #b7791f);
  font-weight: 600;
  font-size: 13px;
  align-self: center;
}
.ov-warn {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--amber-l, #fff4dd);
  color: #8a5608;
  border: 1px solid #f3d38c;
  font-size: 13.5px;
}
.ud-del {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #f3c7c7;
  background: #fff8f8;
}
/* dashboard: pilihan periode (sampai hari ini · bulan · s/d tanggal) */
.tx-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tx-period {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tx-period select,
.tx-period input {
  background: rgba(255, 255, 255, 0.06);
  color: #e6edf7;
  border: 1px solid rgba(120, 170, 255, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color-scheme: dark;
}
.tx-period label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #8ea3c4;
}
.imp-err {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fdecec;
  color: #8f1d1d;
  border: 1px solid #f3c2c2;
  font-size: 13px;
}
.imp-err ul,
.imp-warn ul {
  margin: 4px 0 0 18px;
  padding: 0;
}
.imp-err li,
.imp-warn li {
  margin: 2px 0;
}
.imp-ok {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #e7f6ec;
  color: #11602e;
  font-size: 13px;
  font-weight: 600;
}
.imp-tpl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0;
}
.imp-from small {
  display: block;
  padding-top: 10px;
}
.pr-minfo {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2, #f7f9fa);
}
.pr-minfo .table-wrap {
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
  background: #fff;
}
/* template rancangan project */
.tpl-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-left: 4px solid var(--green);
}
.tpl-copy {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tpl-colgrp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  padding: 6px 0;
}
.tpl-colgrp b {
  width: 110px;
}
.tpl-ck {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ps-check {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-check li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.ps-check li.ok {
  color: #11602e;
}
.ps-check li.no {
  color: #a11d1d;
  font-weight: 600;
}
/* cetak Ringkasan Progress Report: kolom tetap & rapi */
.doc table.pr-sum {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
}
.doc table.pr-sum th {
  text-align: center;
  vertical-align: middle;
  padding: 6px 4px;
  line-height: 1.25;
  background: #eef2f7;
  overflow-wrap: normal;
  word-break: normal;
}
.doc table.pr-sum td {
  vertical-align: top;
  padding: 5px 6px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.doc table.pr-sum td.c {
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}
.doc table.pr-sum td.n,
.doc table.pr-sum th.n {
  text-align: right;
}
.doc table.pr-sum td .id {
  margin-top: 3px;
  font-style: italic;
  color: #555;
  font-size: 10px;
}
.doc table.pr-sum thead {
  display: table-header-group;
}
.doc table.pr-sum tr {
  break-inside: avoid;
}
/* editor template seperti lembar Excel */
.tpl-sheet {
  overflow: hidden;
}
.tpl-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2, #f7f9fa);
}
.tpl-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 4px;
}
.tpl-wrap {
  overflow: auto;
  max-height: 62vh;
}
.tpl-grid {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}
.tpl-grid th,
.tpl-grid td {
  border: 1px solid #d5dce4;
  padding: 0;
}
.tpl-grid thead th {
  position: sticky;
  z-index: 2;
  background: #eef2f7;
}
.tpl-grid thead tr:nth-child(1) th {
  top: 0;
  height: 22px;
  font-size: 11px;
  color: #6b7a89;
  font-weight: 600;
  text-align: center;
}
.tpl-grid thead tr:nth-child(2) th {
  top: 22px;
}
.tpl-grid thead tr:nth-child(3) th {
  top: 56px;
}
.tpl-grid th.cl.on {
  background: #d7ecff;
  color: #0b5cad;
}
.tpl-grid th.rn {
  width: 38px;
  min-width: 38px;
  text-align: center;
  font-size: 11px;
  color: #6b7a89;
  background: #eef2f7;
  position: sticky;
  left: 0;
  z-index: 3;
}
.tpl-grid tbody tr.on th.rn {
  background: #d7ecff;
  color: #0b5cad;
}
.tpl-grid input,
.tpl-grid select {
  border: 0;
  border-radius: 0;
  width: 100%;
  min-width: 120px;
  padding: 6px 7px;
  font: inherit;
  background: transparent;
  box-shadow: none;
  height: auto;
}
.tpl-grid .hd input {
  font-weight: 700;
  background: #fff8e1;
}
.tpl-grid .ky select {
  font-size: 12px;
  color: #355;
  background: #f4f8fc;
}
.tpl-grid td input:focus,
.tpl-grid th input:focus,
.tpl-grid select:focus {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
  background: #fff;
}
.tpl-grid tbody tr:nth-child(even) td {
  background: #fbfcfd;
}
.tpl-foot {
  padding: 6px 10px;
  font-size: 12px;
  border-top: 1px solid var(--line);
}
/* editor templat: grup KOLOM (kiri) & BARIS (kanan), judul manual + petunjuk, lebar kolom bisa digeser */
.tpl-head {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tpl-head > label:first-child {
  min-width: 280px;
  flex: 0 1 420px;
}
.tpl-tools {
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
}
.tpl-grp {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.tpl-gl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #6b7a89;
  padding: 0 6px 0 4px;
  border-right: 1px solid var(--line);
  margin-right: 2px;
}
.tpl-grid {
  table-layout: auto;
  min-width: 0;
}
.tpl-grid thead tr.lt th {
  top: 0;
  height: 24px;
}
.tpl-grid thead tr.hd th {
  top: 24px;
  background: #fff8e1;
  vertical-align: top;
}
.tpl-grid .cw {
  resize: horizontal;
  overflow: hidden;
  min-width: 70px;
  max-width: 600px;
  padding: 3px 6px;
  text-align: center;
  box-sizing: border-box;
}
.tpl-grid input {
  min-width: 0;
}
.tpl-grid .hd input {
  background: transparent;
  padding-bottom: 2px;
}
.tpl-grid .tc-h {
  display: block;
  padding: 0 7px 5px;
  font-size: 10.5px;
  font-weight: 500;
  color: #9aa6b2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-grid .tc-h.on {
  color: #11602e;
}
.tpl-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* halaman Data Project: kepala & langkah 1-2-3 */
.pj-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pj-ttl {
  flex: 1;
  min-width: 220px;
}
.pj-ttl h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.pj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  color: var(--ink-3, #6b7a89);
  font-size: 13px;
}
.pj-act {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pj-steps {
  margin-bottom: 14px;
}
.pj-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px;
}
.pj-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2, #f7f9fa);
  min-width: 0;
}
.pj-step.done {
  background: #eefaf2;
  border-color: #bfe6cc;
}
.pj-n {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #fff;
  border: 2px solid var(--green);
  color: var(--green);
}
.pj-step.done .pj-n {
  background: var(--green);
  color: #fff;
}
.pj-st {
  flex: 1;
  min-width: 0;
}
.pj-st b {
  display: block;
}
.pj-st small {
  display: block;
  color: var(--ink-3, #6b7a89);
  font-size: 12px;
  overflow-wrap: anywhere;
}
@media (max-width: 860px) {
  .pj-row {
    grid-template-columns: 1fr;
  }
}
/* editor templat (kolom tetap): kolom tetap (colgroup), garis geser lebar, format Teks/Angka */
.tpl-grid {
  table-layout: fixed;
  width: auto;
}
.tpl-grid th.cl {
  position: sticky;
}
.tpl-grid .rsz {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
}
.tpl-grid .rsz::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 3px;
  width: 1px;
  background: #9fb3c8;
}
.tpl-grid .rsz:hover::after,
body.tpl-resizing .tpl-grid .rsz::after {
  background: #1a73e8;
  width: 2px;
}
body.tpl-resizing,
body.tpl-resizing * {
  cursor: col-resize !important;
  user-select: none;
}
.tpl-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tpl-grid input.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tpl-grid .tc-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 5px;
}
.tpl-grid .tc-f {
  width: auto;
  min-width: 0;
  flex: none;
  font-size: 11px;
  padding: 1px 4px;
  border: 1px solid #e3d7a8;
  border-radius: 4px;
  background: #fff;
  color: #5b4a00;
}
.tpl-grid .tc-sub .tc-h {
  padding: 0;
  flex: 1;
  min-width: 0;
}
/* Pengajuan: tombol Kembali untuk Revisi (outline amber) + catatan koreksi */
.btn.amber-o {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
}
.btn.amber-o:hover {
  background: var(--amber);
  color: #fff;
}
.form-actions .cr-note {
  flex: 1 1 260px;
  max-width: 420px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.cr-info {
  padding: 10px 14px;
  border: 1px solid var(--amber);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  font-size: 13px;
}
.xf-setup.locked > div:first-child,
.xf-setup.locked #w-donor,
.xf-setup.locked #w-note {
  pointer-events: none;
  opacity: 0.55;
}
/* LPJ: daftar pengeluaran (baris bebas) & penyelesaian keuangan */
.li-t input.li-d,
.li-t input.li-a,
.li-t select.acc {
  width: 100%;
}
.li-t .li-up {
  cursor: pointer;
}
.li-t .li-s {
  display: block;
  margin-top: 2px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpj-sup + .lpj-sup {
  margin-top: 12px;
}
/* Keuangan › Closing */
.cl-info {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green, #2e7d32);
  border-radius: 8px;
  background: var(--bg-2, #f7f9fa);
  font-size: 13px;
}
.cl-info a {
  margin-left: 6px;
}
/* template: sel gabungan & blok terpilih */
.tpl-grid td.mg {
  vertical-align: middle;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px #b9c7d6;
}
.tpl-grid td.mg input {
  font-weight: 600;
}
.tpl-grid td.sel {
  background: #dbeafe !important;
}
.tpl-grid td.sel input {
  background: transparent;
}
.tpl-grid tbody td {
  user-select: none;
}
.tpl-grid tbody td input {
  user-select: text;
}
.tpl-grid td.mg {
  height: 1px;
}
.tpl-grid td.mg input {
  height: 100%;
  min-height: 31px;
}
/* Parameter Sistem › Barcode */
.bc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .bc-grid {
    grid-template-columns: 1fr;
  }
}
.bc-f input.bc-l {
  width: 100%;
}
.bc-f tr.off td {
  opacity: 0.5;
}
.bc-f tr.off td:first-child {
  opacity: 1;
}
.bc-f .btn.icon.sm {
  padding: 2px 6px;
  min-width: 0;
}
.bc-tx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 700px) {
  .bc-tx {
    grid-template-columns: 1fr;
  }
}
.bc-tx input {
  width: 100%;
}
.bc-prev {
  position: sticky;
  top: 12px;
}
.vf {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line);
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #1c2420;
}
.vf::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, #0f9d3a 0 50%, #e52329 50% 75%, #134e9c 75%);
}
.vf .lg {
  display: block;
  max-width: 170px;
  margin: 4px auto 10px;
}
.vf .i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 8px;
  background: #dcf1e5;
  color: #1f7a4d;
}
.vf .s0 {
  text-align: center;
  margin: 0 0 2px;
  font-weight: 600;
  color: #1f7a4d;
  font-size: 13px;
}
.vf h4 {
  text-align: center;
  margin: 0 0 4px;
  font-size: 17px;
}
.vf .s {
  text-align: center;
  color: #66706a;
  margin: 0 0 14px;
  font-size: 13px;
}
.vf dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 13px;
}
.vf dt {
  color: #66706a;
}
.vf dd {
  margin: 0;
  font-weight: 600;
}
.vf .ft {
  margin-top: 14px;
  font-size: 11.5px;
  color: #66706a;
  text-align: center;
}
.bc-qr {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.bc-qr img {
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
/* Data Project (detail, lihat saja) */
.pd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}
.pd .pd-i {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.pd .pd-i.full {
  grid-column: 1 / -1;
}
.pd dt {
  font-size: 12px;
  color: var(--muted, #6b7a89);
  margin-bottom: 3px;
}
.pd dd {
  margin: 0;
  font-weight: 600;
}
@media (max-width: 760px) {
  .pd {
    grid-template-columns: 1fr;
  }
}
.pd-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* halaman project: tab di dalam halaman */
.pj-note {
  margin: 0;
  font-size: 13px;
}
.pj-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 500;
}
.pj-col {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 13px;
  background: var(--bg-2, #f7f9fa);
}
.pj-col b {
  color: var(--green-d);
  margin-right: 2px;
}
.pj-col small {
  color: var(--muted, #6b7a89);
  margin-left: 4px;
}
.pj-howto {
  margin: 16px 0 0;
  padding-left: 20px;
  line-height: 1.8;
  font-size: 14px;
}
/* Mitra › Ringkasan: kartu angka ringkas (infografis) */
.rk-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) {
  .rk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .rk-row {
    grid-template-columns: 1fr;
  }
}
.rk {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  min-width: 0;
}
.rk-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.rk-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  flex: 1;
}
.rk-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rk-v {
  font-size: 18px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-v small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}
.rk-s {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin: 2px 0 1px;
}
.rk-bar i {
  display: block;
  height: 100%;
  background: var(--c);
  border-radius: 3px;
}
/* Progress Report › Ringkasan: Activities lebar, kolom angka padat */
.pr-dash {
  table-layout: fixed;
  width: 100%;
}
.pr-dash th {
  white-space: normal;
  line-height: 1.25;
}
.pr-dash td.pr-c {
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pr-dash .pr-pc {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pr-dash .pr-pc > :first-child {
  flex: 1;
  min-width: 0;
}
.pr-dash .pr-pct {
  font-size: 12.5px;
}
.pr-sub + .rk-row {
  margin-top: 10px;
}
.pr-dash col.c-code {
  width: 58px;
}
.pr-dash col.c-tg {
  width: 118px;
}
.pr-dash col.c-ac {
  width: 126px;
}
.pr-dash col.c-pc {
  width: 150px;
}
.pr-dash col.c-rs {
  width: 112px;
}
@media (max-width: 1280px) {
  .pr-dash col.c-code {
    width: 48px;
  }
  .pr-dash col.c-tg {
    width: 92px;
  }
  .pr-dash col.c-ac {
    width: 98px;
  }
  .pr-dash col.c-pc {
    width: 118px;
  }
  .pr-dash col.c-rs {
    width: 84px;
  }
  .pr-dash .pr-pbar {
    min-width: 40px;
  }
}
/* Dokumen project: form (baris unggah) & daftar di Data Project */
.pdoc-t input:not([type='file']) {
  width: 100%;
}
.pdoc-t .pd-f {
  max-width: 100%;
}
.pdoc-t .pd-s {
  display: block;
  margin-top: 2px;
}
.pdoc-t + .btn {
  margin-top: 8px;
}
.pdoc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 14px 16px;
}
.pdoc {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  min-width: 0;
}
.pdoc:hover {
  border-color: var(--green);
  text-decoration: none;
  background: var(--bg-2, #f7f9fa);
}
.pdoc-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
}
.pdoc-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pdoc-tx b,
.pdoc-tx small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdoc-tx small {
  color: var(--ink-3);
}
.lg-u {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* template: judul grup (gabungan judul kolom) & judul template lebar */
.tpl-grid thead tr.gp th {
  top: 24px;
  height: 34px;
  background: #eaf3ff;
  z-index: 2;
}
.tpl-grid thead tr.gp th.gp-x {
  background: #f3f6f9;
}
.tpl-grid thead tr.gp th.gp-on input {
  text-align: center;
  font-weight: 700;
  color: #0b4f9c;
  background: transparent;
}
.tpl-grid.has-gp thead tr.hd th {
  top: 58px;
}
.tpl-grid th.sel {
  background: #dbeafe !important;
}
.tpl-head > label.f.grow {
  flex: 1 1 420px;
  min-width: 260px;
}
.tpl-head > label.f.grow input {
  width: 100%;
}
.tpl-tools {
  gap: 10px;
}
.tpl-grp {
  gap: 5px;
  padding: 4px 8px 4px 6px;
}
.tpl-grp .btn.sm {
  padding: 4px 9px;
}
/* template: KOLOM · BARIS · SEL sejajar satu baris */
.tpl-tools {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 10px;
}
.tpl-grp {
  flex: none;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 3px 6px 3px 4px;
}
.tpl-grp .btn.sm {
  padding: 4px 8px;
  font-size: 12.5px;
  white-space: nowrap;
}
.tpl-gl {
  font-size: 10.5px;
  padding: 0 5px 0 3px;
}
/* Progress Report › Ringkasan: panel infografis (gaya teknologi) */
.pr-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 10px;
  padding: 20px 22px;
  border-radius: 16px;
  color: #e6f0ff;
  background: radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.22), transparent 42%),
    radial-gradient(circle at 92% 110%, rgba(34, 197, 94, 0.2), transparent 45%),
    linear-gradient(135deg, #004d98 0%, #1b2f7a 50%, #a50044 100%);
  box-shadow: 0 10px 30px rgba(10, 23, 48, 0.25);
}
.pr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pr-hero > * {
  position: relative;
}
.ph-gauge {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.35));
}
.ph-gv {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.ph-gv b {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.ph-gv b small {
  font-size: 18px;
  font-weight: 700;
  margin-left: 2px;
  color: #7dd3fc;
}
.ph-gv span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb7d9;
  margin-top: 4px;
}
.ph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ph-tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #7dd3fc;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ph-st8 {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
}
.ph-st8.fin {
  border-color: rgba(34, 197, 94, 0.6);
  color: #4ade80;
}
.ph-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ph-st {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ph-st b {
  font-size: 26px;
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ph-st span {
  font-size: 12px;
  font-weight: 600;
  color: #cfe0f7;
  margin-top: 2px;
}
.ph-st small {
  font-size: 11px;
  color: #8fa8cc;
}
.ph-st.ok b {
  color: #4ade80;
}
.ph-st.mid b {
  color: #fbbf24;
}
.ph-st.low b {
  color: #f87171;
}
.ph-dist {
  margin-top: 14px;
}
.ph-bar {
  display: flex;
  height: 16px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  gap: 2px;
}
.ph-bar i {
  display: grid;
  place-items: center;
  min-width: 18px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #08121f;
}
.ph-bar i.ok {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.ph-bar i.mid {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.ph-bar i.low {
  background: linear-gradient(90deg, #dc2626, #f87171);
}
.ph-bar i.na {
  background: rgba(255, 255, 255, 0.25);
  color: #e6f0ff;
}
.ph-leg {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: #9fb7d9;
}
.ph-leg span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: 0;
  background: currentColor;
}
.ph-leg .ok::before {
  background: #4ade80;
}
.ph-leg .mid::before {
  background: #fbbf24;
}
.ph-leg .low::before {
  background: #f87171;
}
.ph-leg .na::before {
  background: rgba(255, 255, 255, 0.35);
}
.ph-outs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ph-out {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ph-out b {
  display: block;
  font-size: 12.5px;
  color: #fff;
}
.ph-out small {
  font-size: 11px;
  color: #9fb7d9;
}
@media (max-width: 900px) {
  .pr-hero {
    grid-template-columns: 1fr;
  }
  .ph-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Progres Report: kolom terkunci / bisa diisi */
.pr-lock {
  cursor: default;
  color: var(--ink-2, #3b4a5a);
}
td.pr-lk {
  background: repeating-linear-gradient(135deg, rgba(100, 116, 139, 0.05) 0 6px, transparent 6px 12px),
    var(--bg-2, #f6f8fa) !important;
}
.pr-cols {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2, #f7f9fa);
}
.pr-colg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.pr-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 8px 34px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.pr-col input {
  position: absolute;
  left: 10px;
  top: 10px;
}
.pr-col span {
  font-weight: 600;
  font-size: 13px;
}
.pr-col small {
  font-size: 11.5px;
  color: var(--ink-3);
}
.pr-col.on {
  border-color: var(--green);
  background: #f1fbf4;
}
.pr-col.on small {
  color: var(--green-d);
}
.pr-setcol {
  margin-right: 8px;
}
.pr-hero-list {
  margin-top: 0;
}
.ph-out {
  color: inherit;
  text-decoration: none !important;
}
a.ph-out:hover {
  border-color: rgba(125, 211, 252, 0.6);
  background: rgba(255, 255, 255, 0.1);
}
/* ===== Template Laporan (designer seperti Word) ===== */
.pt-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-head {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.pt-head .f.grow {
  flex: 1 1 320px;
}
.pt-head input,
.pt-head select {
  width: 100%;
}
.pt-meta {
  flex-basis: 100%;
}
.pt-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, #fff);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
}
.pt-bl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.pt-page {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 48px 56px;
  background: #fff;
  color: #1b2430;
  border: 1px solid #dfe5ec;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.1);
  border-radius: 4px;
  min-height: 600px;
  font-family: Arial, Helvetica, sans-serif;
}
.pt-b {
  position: relative;
  padding: 6px 8px;
  margin: 2px -8px;
  border: 1px dashed transparent;
  border-radius: 6px;
}
.pt-b:hover {
  border-color: #c9d6e3;
}
.pt-b.on {
  border-color: #1a73e8;
  background: #f6f9ff;
}
.pt-ctl {
  position: absolute;
  right: 6px;
  top: -12px;
  display: none;
  gap: 2px;
  align-items: center;
  background: #fff;
  border: 1px solid #c9d6e3;
  border-radius: 8px;
  padding: 1px 4px;
  font-size: 11px;
  z-index: 2;
}
.pt-b:hover .pt-ctl,
.pt-b.on .pt-ctl {
  display: flex;
}
.pt-ctl button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 11px;
  color: #4b5b6b;
  border-radius: 4px;
}
.pt-ctl button:hover:not([disabled]) {
  background: #eef3f9;
}
.pt-ctl button[disabled] {
  opacity: 0.3;
}
.pt-ctl [data-rm] {
  color: #c62828;
}
.pt-type {
  color: #1a73e8;
  font-weight: 700;
  padding: 0 4px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.pt-page [contenteditable] {
  outline: none;
  min-height: 1.2em;
}
.pt-page [contenteditable]:empty::before {
  content: attr(data-ph);
  color: #a0acb8;
}
.pt-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
}
.pt-h1 {
  font-size: 17px;
  font-weight: 800;
  margin-top: 6px;
}
.pt-h2 {
  font-size: 14.5px;
  font-weight: 700;
}
.pt-p {
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.pt-fl .pt-flab {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.pt-fbox {
  border: 1.5px dashed #9cc3ee;
  background: #f3f8fe;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.pt-fbox input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #355;
}
.pt-fbox small {
  color: #1a73e8;
  white-space: nowrap;
}
.pt-info {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pt-info th,
.pt-info td {
  border: 1px solid #9aa7b5;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.pt-info th {
  background: #eef2f7;
  width: 30%;
}
.pt-acts th {
  width: auto;
  font-size: 11.5px;
}
.pt-acts + .pr-cols {
  margin-top: 8px;
}
.pt-tt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.pt-tt .btn.sm {
  padding: 3px 8px;
  font-size: 12px;
}
.pt-hdr select {
  padding: 2px 4px;
}
.pt-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.pt-grid td {
  border: 1px solid #9aa7b5;
  padding: 6px 8px;
  vertical-align: top;
  min-width: 40px;
  user-select: text;
}
.pt-grid tr.h td {
  background: #e8eef5;
  font-weight: 700;
}
.pt-grid td.sel {
  background: #dbeafe !important;
}
.pt-grid td:focus {
  box-shadow: inset 0 0 0 2px #1a73e8;
}
/* langkah Laporan Baru & laporan bertemplate */
.pr-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ink-3);
}
.pr-steps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pr-steps b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--line);
  color: var(--ink-2);
  font-size: 12px;
}
.pr-steps span.on {
  color: var(--green-d);
  font-weight: 700;
}
.pr-steps span.on b {
  background: var(--green);
  color: #fff;
}
.pr-steps span.ok b {
  background: #c8ebd4;
  color: var(--green-d);
}
.pr-steps i {
  flex: 0 0 28px;
  height: 2px;
  background: var(--line);
}
.pr-note {
  padding: 10px 14px;
  border-left: 4px solid var(--blue);
  background: rgba(19, 78, 156, 0.06);
  border-radius: 8px;
  font-size: 13px;
}
.pr-tplsum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2, #f7f9fa);
  font-size: 13px;
}
.pr-tplsum span {
  flex: 1;
}
.pr-flab {
  font-weight: 700;
  font-size: 13px;
  margin: 10px 0 4px;
}
.pr-tp {
  white-space: normal;
  line-height: 1.55;
}
.pr-tt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pr-tt th,
.pr-tt td {
  border: 1px solid #b7c2ce;
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}
.pr-tt th {
  background: #eef2f7;
  font-weight: 700;
}
.pr-tt td[contenteditable] {
  background: #fff;
  outline: none;
}
.pr-tt td[contenteditable]:focus {
  box-shadow: inset 0 0 0 2px #1a73e8;
}
/* halaman project: tab kiri (Data Project · Kegiatan · RAB) + tombol timbul kanan (Template · Unduh · Unggah) */
.pj-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.pj-bar > .tabs {
  margin-bottom: 0;
  border-bottom: 0;
  flex: 1 1 auto;
}
.pj-rb {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  margin-left: auto;
  flex-wrap: wrap;
}
.btn.pj-raise {
  background: linear-gradient(180deg, #ffffff, #eef2f6);
  border: 1px solid #cfd8e3;
  box-shadow:
    0 2px 0 #c3ccd8,
    0 3px 8px rgba(16, 24, 40, 0.1);
  border-radius: 9px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.btn.pj-raise:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 #c3ccd8,
    0 6px 14px rgba(16, 24, 40, 0.14);
  text-decoration: none;
}
.btn.pj-raise:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 #c3ccd8,
    0 1px 3px rgba(16, 24, 40, 0.12);
}
.btn.pj-raise.on {
  background: linear-gradient(180deg, #2fb35a, var(--green));
  border-color: var(--green-d);
  color: #fff;
  box-shadow:
    0 2px 0 var(--green-d),
    0 4px 10px rgba(15, 157, 58, 0.25);
}
.pj-edit {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: #fff7e6;
  border: 1px solid #f5c26b;
  border-radius: 99px;
  padding: 3px 10px;
}
/* Data Project › Kegiatan (Master Project) */
.mk-t td,
.mk-t th {
  vertical-align: top;
}
.mk-t td[contenteditable] {
  background: #fffef5;
  outline: none;
  cursor: text;
}
.mk-t td[contenteditable]:focus {
  box-shadow: inset 0 0 0 2px #1a73e8;
  background: #fff;
}
.mk-t tr.mk-p td {
  font-weight: 700;
  background: var(--bg-2, #f6f8fa);
}
.mk-t tr.mk-p td[contenteditable] {
  background: #f7f5e8;
}
.mk-t .mk-code {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-t tr.mk-l2 .mk-name {
  padding-left: 22px;
}
.mk-t tr.mk-l3 .mk-name {
  padding-left: 36px;
}
.mk-t tr.mk-l4 .mk-name {
  padding-left: 50px;
}
.mk-t tr.mk-l5 .mk-name {
  padding-left: 64px;
}
.mk-t td.mk-saving {
  background: #fff7e0 !important;
}
.mk-t td.mk-ok {
  background: #e6f6ec !important;
  transition: background 0.6s;
}
.mk-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.mk-b td.mk-amt {
  background: #fffef5;
  outline: none;
  cursor: text;
  font-weight: 600;
}
.mk-b td.mk-amt:focus {
  box-shadow: inset 0 0 0 2px #1a73e8;
  background: #fff;
}
.mk-b td.mk-amt:empty::before {
  content: 'ketik anggaran';
  color: #a0acb8;
  font-weight: 400;
  font-size: 12px;
}
.mk-b tfoot td {
  font-weight: 800;
  background: var(--bg-2, #f6f8fa);
}
.mk-t td.mk-chg {
  background: #fff3c4 !important;
  box-shadow: inset 3px 0 0 #f59e0b;
}
.mk-t tr.mk-del td {
  text-decoration: line-through;
  color: #b91c1c;
  background: #fdecec !important;
}
.mk-t tr.mk-del td.act {
  text-decoration: none;
}
.mk-t tr.mk-new td {
  background: #eefaf2 !important;
}
/* Dashboard: pilihan periode Bulan · Periode Tanggal · Sekarang */
.tx-seg {
  display: inline-flex;
  border: 1px solid rgba(120, 170, 255, 0.3);
  border-radius: 9px;
  overflow: hidden;
}
.tx-seg button {
  background: transparent;
  color: #a9bbd6;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.tx-seg button + button {
  border-left: 1px solid rgba(120, 170, 255, 0.25);
}
.tx-seg button.on {
  background: linear-gradient(180deg, #2fb35a, #0f9d3a);
  color: #fff;
  font-weight: 700;
}
.tx-plabel {
  font-size: 12px;
  color: #8ea3c4;
  margin-left: 4px;
}
/* Anggaran Kegiatan: Kegiatan lebar, Target & Penanggung Jawab ringkas (2 baris) */
.mk-b {
  table-layout: fixed;
  width: 100%;
}
.mk-b th {
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}
.mk-b td {
  font-size: 13px;
}
.mk-b td:nth-child(3),
.mk-b td:nth-child(4) {
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.mk-b td:nth-child(4) {
  display: table-cell;
}
.mk-b td:nth-child(4) > * {
  -webkit-line-clamp: 2;
}
.mk-b td.num {
  white-space: nowrap;
}
.mk-2l {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-acfg {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12.5px;
}
.pt-acg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin: 6px 0;
}
.pt-ac {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-ac input[data-al] {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #cfd8e3;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
}
.pt-ac.off input[data-al] {
  opacity: 0.45;
}
.pt-ac2 {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pt-ag td {
  background: #eef2f7;
  font-weight: 700;
  font-size: 11.5px;
}
.pr-act tr.pr-grp td {
  background: var(--bg-2, #f4f6f8);
  font-weight: 700;
}

/* Dashboard Progres Report (Dashboard utama & menu Progres Report) — gaya .tx */
.pdx .tx-tile-mid {
  margin: 10px 0 6px;
}
.pdx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.pdx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--tx-line);
  overflow: hidden;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.pdx-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.pdx-card:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.5);
}
.pdx-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pdx-top .tx-ring {
  flex: none;
}
.pdx-id {
  min-width: 0;
}
.pdx-id small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.pdx-id b {
  display: block;
  font-size: 15px;
  color: #fff;
}
.pdx-id span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: #b9c9e4;
  line-height: 1.35;
}
.pdx-rep {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #cfe3ff;
}
.pdx-rep span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdx-rep em {
  flex: none;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 99px;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.45);
}
.pdx-rep em.fin {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
}
.pdx-bar {
  display: flex;
  gap: 2px;
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.pdx-bar i {
  display: block;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}
.pdx-meta {
  font-size: 11.5px;
  color: var(--tx-mute);
}
.pdx-outs {
  display: grid;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--tx-line);
}
.pdx-out {
  display: grid;
  grid-template-columns: 58px 1fr 38px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--tx-mute);
}
.pdx-out span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdx-out b {
  color: #fff;
  text-align: right;
  font-size: 11px;
}
.pdx .tx-row-h span b {
  font-weight: 700;
}

/* tautan di uraian laporan: bisa diklik (buka tab baru) walau kotak bisa diedit */
.pr-rich a[href],
.pr-f a[href] {
  cursor: pointer;
  color: #1155cc;
}

/* judul kolom yang bisa diklik untuk mengurutkan (mis. Tanggal di Jurnal Transaksi) */
.th-sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
.th-sort span {
  font-size: 10px;
  color: var(--green, #16a34a);
}
.th-sort:hover {
  color: var(--green, #16a34a);
}

/* Dashboard Pelaksanaan Anggaran (klik menu Pelaksanaan Anggaran) — gaya .tx */
.pa-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.pa-node {
  min-width: 0;
  text-decoration: none;
  transition: transform 0.15s;
}
.pa-node:hover {
  transform: translateY(-2px);
}
.pa-node b {
  font-size: 24px;
  margin: 2px 0 0;
}
.pa-rp {
  display: block;
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-bottom: 8px;
  white-space: nowrap;
}
.pa-flow .tx-arrow {
  width: 18px;
}
.pa-side {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--tx-mute);
}
.pa-side span::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}
.pa-side b {
  color: #fff;
  margin-left: 4px;
}
.pa-bk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.pa-bk-c {
  text-align: center;
  font-size: 11.5px;
  color: var(--tx-mute);
}
.pa-bk-c b {
  display: block;
  font-size: 18px;
  color: #fff;
}
.pa-bk-bar {
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 6px 0;
  border-bottom: 1px solid var(--tx-line);
}
.pa-bk-bar i {
  display: block;
  width: 60%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent);
}
.pa-bk-c span {
  display: block;
  color: #cfe3ff;
  white-space: nowrap;
}
.pa-bk-c small {
  display: block;
  font-size: 10.5px;
}
.pa-warn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.pa-warn a {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #e6edf7;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.pa-warn a:hover {
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.pa-warn i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}
.pa-mine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #cfe3ff;
  cursor: pointer;
}
@media (max-width: 900px) {
  .pa-flow {
    flex-wrap: wrap;
  }
  .pa-flow .tx-arrow {
    display: none;
  }
  .pa-node {
    flex: 1 1 30%;
  }
}
.pa-rp2 {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--tx-mute);
}
.pa-node small {
  letter-spacing: 0.05em;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Koreksi / pembatalan jurnal menunggu persetujuan Manager */
.jc-box {
  border: 1px solid #f2c37a;
  background: #fff9ee;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.jc-box.batal {
  border-color: #f1a7a7;
  background: #fff5f5;
}
.jc-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}
.jc-h b {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #8a5608;
}
.jc-box.batal .jc-h b {
  color: #b42318;
}
.jc-h small {
  color: var(--muted, #6b7a89);
}
.jc-note {
  margin: 6px 0;
  font-size: 13px;
}
.jc-cmp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 6px;
}
.jc-cmp small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted, #6b7a89);
  margin-bottom: 4px;
}
.jc-t {
  font-size: 12.5px;
  background: #fff;
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
.jc-t th:nth-child(1) {
  width: 38%;
}
.jc-t th:nth-child(3),
.jc-t th:nth-child(4) {
  width: 16%;
}
.jc-t th,
.jc-t td {
  padding: 5px 8px;
}
.jc-act {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.jc-act:empty {
  display: none;
}
.jc-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.jc-done {
  font-size: 13px;
}
@media (max-width: 760px) {
  .jc-cmp {
    grid-template-columns: 1fr;
  }
}

/* Tabel bebas di laporan (mis. milestone donor): baris baru di dalam sel tetap tampil */
.pr-tt th,
.pr-tt td {
  white-space: pre-line;
}
.pr-tt td.pr-auto {
  background: #f6f8fa;
  color: var(--green-d, #0b6b2a);
  font-weight: 700;
  text-align: center;
}

/* Kegiatan Project: kolom Capaian yang Dibutuhkan & Jatuh Tempo (format milestone donor) */
.mk-t thead th small {
  display: block;
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}
.mk-t td.mk-due {
  white-space: nowrap;
}
.mk-t td.mk-due input {
  width: 100%;
  min-width: 126px;
  padding: 4px 6px;
  font: inherit;
}
.mk-t td.mk-due.mk-chg input {
  background: #fff6cc;
}
.mk-t td.mk-ms {
  white-space: pre-line;
}
.pr-act .pr-ms {
  white-space: pre-line;
} /* Required Deliverable bernomor (baris baru) */
.lg-list table.t th:last-child {
  text-align: left;
} /* Log Aktivitas: kolom terakhir = Keterangan Aktivitas (teks), bukan tombol aksi */

/* Kegiatan project: kolom Capaian yang Dibutuhkan (milestone donor) */
.kg-nm {
  min-width: 280px;
}
.kg-ms {
  min-width: 220px;
  max-width: 380px;
  white-space: pre-line;
  font-size: 12.5px;
  line-height: 1.4;
}
.mk-t td.mk-in select,
.mk-t td.mk-in input[type='number'] {
  width: 100%;
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
}
.mk-t td.mk-in.mk-chg select,
.mk-t td.mk-in.mk-chg input {
  background: #fff6cc;
}
.mk-t.mk-e {
  table-layout: fixed;
  width: 1462px;
} /* Edit Kegiatan: lebar tetap, digeser ke samping bila layar sempit */
.mk-t.mk-e td {
  overflow-wrap: anywhere;
}
.mk-cnt {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  background: #fff3c4;
  border: 1px solid #f5c26b;
  border-radius: 99px;
  padding: 2px 10px;
  white-space: nowrap;
}
.mk-t tr.mk-del td {
  opacity: 0.75;
}
.mk-t tr.mk-del td.act {
  opacity: 1;
}
.mk-t tr.mk-del [data-mk-del] {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.mk-t tr.mk-del input,
.mk-t tr.mk-del select {
  text-decoration: line-through;
}

/* Edit Kegiatan seperti Excel: bilah BARIS · KOLOM · SEL, sel terpilih, kolom tambahan, sel gabungan */
.mk-tools {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 14px;
  background: #f6f8fa;
  border-bottom: 1px solid var(--line);
}
.mk-tg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.mk-tg > b {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted, #6b7a89);
  margin-right: 4px;
}
.mk-tg .btn.sm {
  padding: 3px 8px;
  font-size: 12px;
}
#mk-sel {
  margin-left: auto;
}
.mk-t td.mk-sel {
  box-shadow: inset 0 0 0 2px #1a73e8 !important;
  background: #e8f0fe !important;
}
.mk-t th.mk-xh span[contenteditable] {
  display: block;
  min-width: 40px;
  padding: 2px 4px;
  border-radius: 4px;
  background: #fffef5;
  outline: 1px dashed #c9b458;
  cursor: text;
}
.mk-t td.mk-x {
  white-space: pre-line;
}
.mk-t td[rowspan],
.mk-t td[colspan] {
  vertical-align: middle;
  background-image: linear-gradient(#f3f7ff, #f3f7ff);
}
.mk-t thead th[data-ci] {
  cursor: pointer;
}
/* Edit Kegiatan: tombol hapus kolom (di atas judul) & hapus baris (kiri) — hanya di mode edit */
.mk-t thead tr.mk-ctl th {
  padding: 4px 6px;
  background: #fbfcfd;
  border-bottom: 1px dashed var(--line);
  text-align: center;
}
.mk-cx {
  border: 1px solid #f1b4b4;
  background: #fff;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
}
.mk-cx:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
.mk-t td.mk-g,
.mk-t th.mk-g {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  background: #fbfcfd;
}
/* LPJ sebagian & histori uang muka */
.lpj-part {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0 10px;
  padding: 8px 12px;
  border: 1px dashed #f5c26b;
  border-radius: 8px;
  background: #fffaf0;
  font-size: 13px;
  cursor: pointer;
}
.lpj-part input {
  margin-top: 3px;
}
.jf .jf-um {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #f5c26b;
  border-radius: 6px;
  background: #fffaf0;
}
.um-h td {
  vertical-align: top;
}
.um-h tfoot td {
  font-weight: 700;
  background: var(--bg-2, #f6f8fa);
}
.jf .jf-um[hidden] {
  display: none;
}
/* Kontrol Uang Muka: filter Belum lunas / Semua uang muka */
.um-seg {
  display: inline-flex;
  margin: 0 0 8px;
}
.um-tbl.um-open tr.um-lunas,
.um-tbl.um-open tr.um-t2,
.um-tbl:not(.um-open) tr.um-t1 {
  display: none;
}
.um-head.um-open .um-t2,
.um-head:not(.um-open) .um-t1 {
  display: none;
}
.um-tbl tr.um-lunas td {
  color: var(--muted, #6b7a89);
}
.um-kx-l {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
}
.um-al tr.um-cur td {
  background: #fff7e0;
  font-weight: 600;
}
/* Tautkan Pelunasan uang muka */
.tt-t td {
  vertical-align: top;
}
.tt-s {
  width: 100%;
  font-size: 12.5px;
  padding: 4px 6px;
}
.tt-w {
  margin-top: 4px;
  font-size: 12px;
}
.jc-t.jc-tt th:nth-child(1) {
  width: 44%;
}
.jc-t.jc-tt th:nth-child(2) {
  width: 14%;
}
.jc-t.jc-tt th:nth-child(3) {
  width: 42%;
}
/* Tautkan Pelunasan: kotak pilihan yang bisa diketik */
.tt-cb {
  position: relative;
}
.tt-cb .tt-q {
  width: 100%;
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.tt-cb .tt-q:focus {
  outline: 2px solid #1a73e8;
  outline-offset: -1px;
}
.tt-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 300px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  font-size: 12.5px;
}
.tt-g {
  padding: 6px 10px 3px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b7a89);
  background: #f8fafc;
}
.tt-o {
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1.35;
}
.tt-o.on,
.tt-o:hover {
  background: #e8f0fe;
}
.tt-o.fifo {
  color: var(--muted, #6b7a89);
  font-style: italic;
}
.tt-none {
  padding: 10px;
  color: var(--muted, #6b7a89);
}
.tt-find {
  margin-left: 12px;
  max-width: 260px;
}
.card-head .tt-find {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card-head .tt-find input {
  border: 0;
  outline: 0;
  min-width: 180px;
  font: inherit;
  font-size: 13px;
}
/* Dashboard progres: kartu project sejajar dalam satu baris (3 kolom), panel lain di bawahnya */
/* kartu project per baris: Parameter Dashboard › Dashboard Progres Report (pc-0 = otomatis) */
.pdx .pdx-cards.pc-1 {
  grid-template-columns: 1fr;
}
.pdx .pdx-cards.pc-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pdx .pdx-cards.pc-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pdx .pdx-cards.pc-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .pdx .pdx-cards.pc-3,
  .pdx .pdx-cards.pc-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .pdx .pdx-cards[class*='pc-'] {
    grid-template-columns: 1fr;
  }
}
.pm-row .pm-w {
  width: auto;
  flex: none;
  padding: 4px 6px;
  font-size: 12.5px;
  height: auto;
}

/* Kontrol Uang Muka: cari No. Bukti / Keterangan dengan rekomendasi */
.um-find {
  position: relative;
  margin-left: auto;
  width: min(340px, 100%);
}
.um-find input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
}
.um-find input:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
}
.um-find .um-fi {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  display: flex;
  pointer-events: none;
}
.um-find .um-fn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  color: var(--ink-3);
  pointer-events: none;
}
.um-sug {
  max-height: 360px;
}
.um-sug .um-so {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.um-sug .um-so.on,
.um-sug .um-so:hover {
  background: #eef6f0;
}
.um-sug mark {
  background: #fff1a8;
  color: inherit;
  padding: 0;
  border-radius: 2px;
}
.um-tbl tr.um-hide {
  display: none !important;
}
.um-tbl tr.um-flash td {
  background: #fff7cc !important;
  transition: background 0.3s;
}
@media (max-width: 760px) {
  .um-find {
    width: 100%;
    margin-left: 0;
  }
}
/* Saldo Kontrol Uang Muka */
.kx-t .kx-s {
  width: 100%;
  font-size: 12.5px;
  padding: 5px 6px;
}
.kx-t .kx-j {
  display: block;
  margin-top: 2px;
}
.um-h tr.um-kx td {
  background: #f4f8ff;
}
.tx-dyn > .tx-tiles.pdx-kartu {
  margin: 0;
}
/* LPJ uang muka */
.um-tbl .um-lpj {
  padding: 3px 12px;
}
.lu-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.lu-num {
  display: flex;
  gap: 22px;
}
.lu-num small {
  display: block;
  color: var(--ink-3);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lu-num b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.lu-num .lu-sisa {
  color: var(--green);
}
.lu-t input {
  width: 100%;
}
.lu-t .lu-an {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
}
.lu-st {
  margin-bottom: 8px;
}
.lu-sub {
  margin: 0 0 6px 34px;
}
.lu-sub[hidden] {
  display: none;
}
#lu-sisa select {
  max-width: 360px;
}