/* ================================================================
   KPI BULANAN (Dashboard, Rincian, Upload, Presentasi, PDF)
   Semua kelas berawalan kp- supaya tidak bentrok dengan modul lain.
   Warna pakai variabel tema app (--white, --gray-*, --blue) supaya
   ikut mode gelap; warna status (hijau/merah/kuning) punya token sendiri.
   ================================================================ */
:root {
  --kp-ok: #047857; --kp-ok-bg: #ECFDF5; --kp-ok-bar: #059669;
  --kp-bad: #B91C1C; --kp-bad-bg: #FEF2F2; --kp-bad-bar: #DC2626;
  --kp-warn: #92400E; --kp-warn-bg: #FFFBEB; --kp-warn-bd: #FCD34D; --kp-warn-bar: #F97316;
  --kp-near: #B45309; --kp-near-bg: #FFFBEB; --kp-near-bar: #D97706;
  --kp-mid-bar: #60A5FA; --kp-old-bar: #94A3B8;
}
[data-theme="dark"] {
  --kp-ok: #34D399; --kp-ok-bg: rgba(16,185,129,.12);
  --kp-bad: #F87171; --kp-bad-bg: rgba(239,68,68,.12);
  --kp-warn: #FBBF24; --kp-warn-bg: rgba(245,158,11,.10); --kp-warn-bd: rgba(245,158,11,.45);
  --kp-near: #FBBF24; --kp-near-bg: rgba(245,158,11,.12); --kp-near-bar: #F59E0B;
  --kp-old-bar: #475569;
}
.kp-wrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kp-muted { color: var(--gray-500); font-size: .75rem; }
.kp-mono { font-family: var(--mono); font-weight: 600; font-size: .74rem; }
.is-ok { color: var(--kp-ok) !important; }
.is-bad { color: var(--kp-bad) !important; }
.is-warn { color: var(--kp-warn) !important; }
.is-near { color: var(--kp-near) !important; }
.kp-loading { padding: 60px 0; display: flex; justify-content: center; }
.kp-empty { padding: 28px; text-align: center; color: var(--gray-500); font-size: .85rem; background: var(--white); border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.kp-ico { width: 15px; height: 15px; flex-shrink: 0; }

/* tombol & input */
.kp-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); color: var(--gray-800); font: 600 .78rem var(--font); cursor: pointer; white-space: nowrap; transition: var(--transition); }
.kp-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.kp-btn:disabled { opacity: .5; cursor: not-allowed; }
.kp-btn--pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.kp-btn--pri:hover:not(:disabled) { background: var(--blue-hover); color: #fff; }
.kp-btn--sm { height: 30px; padding: 0 10px; }
.kp-select, .kp-input { height: 36px; border: 1px solid var(--gray-300); border-radius: 8px; padding: 0 10px; font: 600 .8rem var(--font); color: var(--gray-900); background: var(--white); }
.kp-input { font-weight: 500; }
.kp-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--gray-600); }
.kp-lbl--col { flex-direction: column; align-items: flex-start; gap: 4px; font-weight: 600; }
.kp-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.kp-x:hover { color: var(--kp-bad); border-color: var(--kp-bad); }

/* chip status & pill */
.kp-chip { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.kp-chip--draft { background: var(--kp-warn-bg); color: var(--kp-warn); border: 1px solid var(--kp-warn-bd); }
.kp-chip--final { background: var(--kp-ok-bg); color: var(--kp-ok); border: 1px solid rgba(4,120,87,.3); }
.kp-pill { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.kp-pill--ok { background: var(--kp-ok-bg); color: var(--kp-ok); }
.kp-pill--bad { background: var(--kp-bad-bg); color: var(--kp-bad); }
.kp-pill--near { background: var(--kp-near-bg); color: var(--kp-near); }
/* selisih vs bulan lalu: naik hijau, turun merah */
.kp-delta.is-up { color: var(--kp-ok); font-weight: 600; } .kp-delta.is-down { color: var(--kp-bad); font-weight: 600; }
.kp-pill--wait { background: var(--kp-warn-bg); color: var(--kp-warn); }
.kp-pill--mid { background: var(--blue-light); color: var(--blue); }
.kp-pill--none { background: var(--gray-100); color: var(--gray-500); }
[data-theme="dark"] .kp-pill--mid { background: rgba(37,99,235,.15); color: #93C5FD; }
.kp-wait { color: var(--kp-warn); font-weight: 600; }
.kp-auto { display: block; font-size: .62rem; color: var(--gray-400); margin-top: 2px; }

/* kepala dashboard */
.kp-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.kp-head__l { flex: 1 1 380px; min-width: 0; }
.kp-head__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp-h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--gray-900); }
.kp-h2 { font-size: 1.02rem; font-weight: 700; color: var(--gray-900); }
.kp-head__sum { font-size: .84rem; color: var(--gray-600); margin-top: 6px; }
.kp-head__sum b { color: var(--gray-900); }
.kp-head__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-srcchips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kp-srcchips span { font-size: .72rem; color: var(--gray-600); padding: 5px 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; }
.kp-srcchips b { color: var(--gray-900); }

/* banner penyebab */
.kp-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--kp-warn-bg); border: 1px solid var(--kp-warn-bd); border-radius: 10px; color: var(--kp-warn); font: .8rem var(--font); text-align: left; cursor: pointer; width: 100%; }
.kp-banner .kp-ico { width: 18px; height: 18px; }
.kp-banner__t { flex: 1; }
.kp-banner__go { font-weight: 700; white-space: nowrap; }

/* kartu KPI */
.kp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kp-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 9px; text-align: left; font-family: var(--font); color: var(--gray-900); box-shadow: var(--shadow-xs); cursor: pointer; transition: var(--transition); min-width: 0; }
.kp-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-1px); }
.kp-card__top { display: flex; align-items: flex-start; gap: 8px; }
.kp-no { font-size: .66rem; font-weight: 700; color: var(--gray-600); background: var(--gray-100); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.kp-card__name { font-size: .86rem; font-weight: 700; line-height: 1.3; }
.kp-card__val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kp-big { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kp-card__frac { font-size: .74rem; color: var(--gray-600); min-height: 16px; }
.kp-card__pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .74rem; color: var(--gray-700); }
.kp-card__adv b { color: var(--gray-900); }
.kp-card__foot { display: flex; justify-content: space-between; gap: 8px; font-size: .68rem; color: var(--gray-500); }
.kp-spark { display: flex; align-items: flex-end; gap: 6px; height: 56px; padding-top: 6px; border-top: 1px solid var(--gray-100); }
.kp-spark__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kp-spark__c span { font-size: .6rem; color: var(--gray-500); }
.kp-spark__b { width: 100%; border-radius: 4px 4px 0 0; }
.kp-spark__b--old { background: var(--gray-300); }
.kp-spark__b--ok { background: var(--kp-ok-bar); }
.kp-spark__b--bad { background: var(--kp-bad-bar); }
.kp-spark__b--near { background: var(--kp-near-bar); }
.kp-spark__b--none { background: var(--gray-200); }
.kp-vol { background: var(--navy); color: #E2E8F0; border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kp-vol__t { font-size: .86rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.kp-vol__t .kp-ic { width: 30px; height: 30px; border-radius: 9px; }
.kp-vol__tr .kp-vb { justify-content: space-between; width: 100%; }
.kp-vol__tr .kp-vb__c { flex: 1; } .kp-vol__tr .kp-vb__c i { width: 100%; }
.kp-vol .kp-vcmp { display: block; background: #16305C; border-radius: 8px; padding: 7px 9px; font-size: .72rem; }
.kp-vol__big { font-size: 1.55rem; font-weight: 800; color: #fff; }
.kp-vol__cbm { font-size: 1.05rem; font-weight: 700; color: #93C5FD; white-space: nowrap; }
.kp-vol__s { font-size: .7rem; color: #94A3B8; }
.kp-vol__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: .72rem; }
.kp-vol__g b { color: #fff; }
.kp-vol__g span { color: #94A3B8; }
/* Kartu Volume di slide Summary presentasi: ukuran px (bukan rem) biar nggak berubah saat
   di-scale / dicetak, dan dirapatkan supaya muat di 1 kotak grid tanpa kepotong. */
.kp-vol--sl { border-radius: 16px; padding: 14px 18px; gap: 5px; justify-content: space-between; overflow: hidden; }
.kp-vol--sl .kp-vol__t { font-size: 14px; }
.kp-vol--sl .kp-vol__t .kp-ic { width: 28px; height: 28px; }
.kp-vol--sl .kp-vol__big { font-size: 24px; line-height: 1.15; }
.kp-vol--sl .kp-vol__cbm { font-size: 16px; }
.kp-vol--sl .kp-vol__s { font-size: 11px; }
.kp-vol--sl .kp-vb em { font-size: 10px; }
.kp-vol--sl .kp-vcmp { font-size: 11px; padding: 5px 8px; line-height: 1.3; }
.kp-vol--sl .kp-vol__g { font-size: 11.5px; gap: 5px 8px; line-height: 1.3; }
.kp-foot { font-size: .72rem; color: var(--gray-500); display: flex; gap: 18px; flex-wrap: wrap; }

/* rincian */
.kp-dbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kp-dbar__t { flex: 1; min-width: 200px; }
.kp-dbar__t .kp-muted { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.kp-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.kp-tab { flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); font: 600 .74rem var(--font); cursor: pointer; white-space: nowrap; }
.kp-tab span { font-weight: 500; color: var(--gray-500); }
.kp-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.kp-tab.on span { color: #CBD5E1; }
[data-theme="dark"] .kp-tab.on { background: var(--blue); border-color: var(--blue); }
.kp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kp-tile { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; min-width: 0; }
.kp-tile__l { font-size: .68rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kp-tile__v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--gray-900); line-height: 1.2; margin: 2px 0; }
.kp-tile__v small { font-size: 1rem; color: var(--gray-500); font-weight: 700; }
.kp-tile__s { font-size: .74rem; color: var(--gray-600); }
.kp-how { background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--radius-lg); padding: 12px 14px; font-size: .72rem; color: var(--gray-700); line-height: 1.55; min-width: 0; }
.kp-how b { color: var(--gray-900); }
.kp-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kp-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.kp-box { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kp-box h2 { margin: 4px 0 0; font-size: .86rem; font-weight: 700; color: var(--gray-900); }
.kp-box h2:first-child { margin-top: 0; }
.kp-note { font-size: .7rem; color: var(--gray-500); line-height: 1.5; }
.kp-note--warn { color: var(--kp-warn); }
.kp-amber { font-size: .72rem; color: var(--kp-warn); background: var(--kp-warn-bg); border: 1px solid var(--kp-warn-bd); border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.kp-barrow { display: flex; flex-direction: column; gap: 4px; }
.kp-barrow__t { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--gray-800); }
.kp-barrow__t > span:first-child { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-barrow__t > span:last-child { white-space: nowrap; }
.kp-track { height: 9px; background: var(--gray-100); border-radius: 99px; overflow: hidden; }
.kp-track--sm { height: 6px; margin-top: 8px; }
.kp-fill { height: 100%; border-radius: 99px; }
.kp-fill--ok { background: var(--blue); }
.kp-fill--mid { background: var(--kp-mid-bar); }
.kp-fill--bad, .kp-fill--warn { background: var(--kp-warn-bar); }
.kp-fill--pri { background: var(--blue); }
.kp-trend { position: relative; display: flex; align-items: flex-end; gap: 12px; padding: 0 6px; border-bottom: 1px solid var(--gray-200); }
.kp-trend__tl { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--gray-400); z-index: 1; pointer-events: none; }
.kp-trend__tl span { position: absolute; right: 0; top: -9px; font-size: .62rem; color: var(--gray-500); background: var(--white); padding: 0 4px; }
.kp-trend__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.kp-trend__v { font-size: .66rem; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.kp-trend__b { width: 100%; max-width: 64px; border-radius: 5px 5px 0 0; }
.kp-trend__b--ok { background: var(--kp-ok-bar); }
.kp-trend__b--bad { background: var(--kp-bad-bar); }
.kp-trend__b--near { background: var(--kp-near-bar); }
.kp-trend__b--old { background: var(--kp-old-bar); }
.kp-trend__b.is-old, .kp-spark__b.is-old { opacity: .42; }
.kp-trend__b--none { background: var(--gray-200); }
.kp-trend__m { display: flex; gap: 12px; padding: 0 6px; font-size: .66rem; color: var(--gray-500); }
.kp-trend__m span { flex: 1; text-align: center; }
.kp-mini { width: 100%; border-collapse: collapse; font-size: .72rem; }
.kp-mini th { text-align: left; font-weight: 700; color: var(--gray-600); padding: 5px 4px; border-bottom: 1px solid var(--gray-200); }
.kp-mini td { padding: 5px 4px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); }
.kp-mini .kp-adv { color: var(--blue); font-weight: 600; }
.kp-dist { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.kp-dist__c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.kp-dist__n { font-size: .68rem; font-weight: 700; color: var(--gray-700); }
.kp-dist__k { font-size: .6rem; color: var(--gray-500); white-space: nowrap; }
.kp-dist__b { width: 100%; border-radius: 4px 4px 0 0; }
.kp-dist__b--ok { background: #93C5FD; }
.kp-dist__b--bad { background: var(--kp-warn-bar); }
.kp-dist__b--proc { background: var(--gray-300); }
.kp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .78rem; color: var(--gray-600); align-items: baseline; }
.kp-kv b { color: var(--gray-900); font-weight: 700; }
.kp-kv--sm { font-size: .7rem; gap: 2px 10px; margin-top: 4px; }

/* tabel pengecualian */
.kp-tblcard { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 12px; }
.kp-tblhead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; }
.kp-tblhead__t { flex: 1 1 280px; min-width: 0; }
.kp-tblhead h2 { margin: 0; font-size: .92rem; font-weight: 700; color: var(--gray-900); }
.kp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-chipbtn { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700); font: 600 .72rem var(--font); cursor: pointer; }
.kp-chipbtn span { opacity: .7; margin-left: 2px; }
.kp-chipbtn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .kp-chipbtn.on { background: var(--blue); border-color: var(--blue); }
.kp-search { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 8px; color: var(--gray-500); background: var(--white); }
.kp-search input { border: none; outline: none; font: .76rem var(--font); width: 170px; background: transparent; color: var(--gray-900); }
.kp-bulk { display: none; align-items: center; gap: 10px; padding: 8px 16px; background: var(--blue-light); border-bottom: 1px solid var(--gray-200); font-size: .76rem; font-weight: 600; color: var(--blue); flex-wrap: wrap; }
.kp-bulk.on { display: flex; }
[data-theme="dark"] .kp-bulk { background: rgba(37,99,235,.12); }
.kp-tblscroll { overflow-x: auto; }
.kp-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.kp-table th { text-align: left; font-size: .64rem; font-weight: 700; color: var(--gray-600); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); text-transform: uppercase; letter-spacing: .03em; padding: 9px 10px; white-space: nowrap; }
.kp-table td { padding: 8px 10px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
.kp-table tr.is-pend td { background: rgba(245,158,11,.05); }
.kp-table .kp-num { text-align: right; white-space: nowrap; }
.kp-table .kp-cb { width: 34px; text-align: center; }
.kp-table .kp-causecell { min-width: 210px; }
/* penyebab: tombol bukti, penyebab manual, pop-up bukti */
.kp-causerow { display: flex; align-items: center; gap: 6px; }
.kp-evbtn { height: 30px; min-width: 30px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-500); display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; flex-shrink: 0; font: 700 .7rem var(--font); }
.kp-evbtn .kp-ico { width: 14px; height: 14px; }
.kp-evbtn.on { background: var(--blue-light); border-color: #93C5FD; color: var(--blue); }
.kp-mannote { display: block; font-size: .66rem; color: var(--gray-700); margin-top: 3px; max-width: 260px; line-height: 1.35; }
.kp-mancat { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: .6rem; font-weight: 700; }
.kp-mancat--adv { background: var(--kp-near-bg); color: var(--kp-near); }
.kp-mancat--ext { background: var(--blue-light); color: var(--blue); }
.kp-inp { height: 30px; border: 1px solid var(--gray-300); border-radius: 8px; padding: 0 8px; font: .78rem var(--font); background: var(--white); color: var(--gray-900); }
.kp-inp--area { height: auto; padding: 8px; resize: vertical; min-height: 56px; }
.kp-bulkman { display: none; align-items: center; gap: 8px; }
.kp-bulkman.on { display: inline-flex; }
.kp-bulkman .kp-inp { width: 240px; }
.kp-evpick { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; max-width: 220px; }
.kp-evpick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-evpick input, .kp-evadd input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kp-seg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.kp-seg2__o { border: 1.5px solid var(--gray-300); border-radius: 10px; padding: 9px 11px; background: var(--white); text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-family: var(--font); color: var(--gray-900); }
.kp-seg2__o b { font-size: .8rem; } .kp-seg2__o span { font-size: .68rem; color: var(--gray-500); font-weight: 400; }
.kp-seg2__o.on { border-color: var(--blue); background: var(--blue-light); }
.kp-evrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--gray-200); border-radius: 10px; padding: 7px 10px; font-size: .78rem; }
.kp-evrow.is-new { border-style: dashed; }
.kp-evrow .kp-ico { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
.kp-evrow__n { flex: 1; min-width: 0; word-break: break-all; }
.kp-evrow__n em { display: block; font-style: normal; font-size: .66rem; color: var(--gray-500); }
.kp-link { border: 0; background: none; padding: 0; font: 600 .78rem var(--font); color: var(--blue); cursor: pointer; text-align: left; }
.kp-evadd { position: relative; overflow: hidden; height: 38px; border: 1.5px dashed var(--gray-400); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--gray-700); background: var(--gray-50); cursor: pointer; }
.kp-evadd .kp-ico { width: 15px; height: 15px; }
.kp-modal.kp-modal--ev { z-index: 4200; }
.kp-evbox { max-width: 860px; }
.kp-evprev { background: #0F172A; display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: calc(100vh - 200px); overflow: auto; }
.kp-evprev img { max-width: 100%; max-height: calc(100vh - 200px); display: block; }
.kp-evpdf { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #CBD5E1; font-size: .8rem; padding: 30px; text-align: center; }
.kp-evpdf .kp-ico { width: 40px; height: 40px; }
a.kp-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.kp-modal__b .kp-lbl--col { align-items: stretch; }
.kp-modal__b .kp-lbl--col .kp-select { width: 100%; }
.kp-table .kp-file { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-empty-row { text-align: center; color: var(--gray-400); padding: 24px !important; }
.kp-sel { height: 30px; border: 1px solid var(--gray-300); border-radius: 8px; padding: 0 8px; font: .74rem var(--font); background: var(--white); color: var(--gray-900); max-width: 190px; }
.kp-sel--pend { border-color: var(--orange); background: var(--kp-warn-bg); }
.kp-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; font-size: .74rem; color: var(--gray-500); flex-wrap: wrap; }
.kp-pager > div { display: flex; gap: 5px; align-items: center; }
.kp-pg { height: 30px; min-width: 30px; padding: 0 6px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--white); color: var(--gray-700); font: 600 .74rem var(--font); cursor: pointer; }
.kp-pg.on { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
.kp-pg:disabled { opacity: .4; cursor: default; }
.kp-pg-gap { color: var(--gray-400); padding: 0 2px; }

/* upload */
.kp-uptop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; }
.kp-uptop__note { flex: 1 1 240px; font-size: .72rem; color: var(--gray-500); line-height: 1.5; }
.kp-uptop__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-uptop__why { max-width: 260px; }
.kp-srcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kp-src { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kp-src.is-warn { border-color: var(--kp-warn-bd); }
.kp-src.is-empty { border-style: dashed; }
.kp-src__top { display: flex; align-items: flex-start; gap: 10px; }
.kp-src__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kp-src__ic .kp-ico { width: 18px; height: 18px; }
.kp-src__t { flex: 1; min-width: 0; }
.kp-src__name { font-size: .86rem; font-weight: 700; color: var(--gray-900); }
.kp-src__body { font-size: .76rem; color: var(--gray-700); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-src__file { font-family: var(--mono); font-size: .7rem; color: var(--gray-900); word-break: break-all; }
.kp-src__act { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* tarik & lepas file ke kartu */
.kp-src.is-drop { position: relative; }
.kp-src.is-empty.is-drop, .kp-src.is-empty.has-job { border-style: solid; }
/* file yang sedang diproses / siap disimpan di kartu */
.kp-job { margin-top: auto; border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-job--ready { border-color: rgba(37,99,235,.35); background: var(--blue-light); }
[data-theme="dark"] .kp-job--ready { background: rgba(37,99,235,.10); }
.kp-job--error { border-color: var(--kp-warn-bd); }
.kp-job__f { font-family: var(--mono); font-size: .7rem; color: var(--gray-900); word-break: break-all; }
.kp-job__sum { font-size: .84rem; font-weight: 700; color: var(--gray-900); }
.kp-job__busy { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--gray-600); font-weight: 600; }
.kp-job__act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.kp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-300); border-top-color: var(--blue); animation: kpSpin .8s linear infinite; flex-shrink: 0; }
@keyframes kpSpin { to { transform: rotate(360deg); } }
.kp-dz { margin-top: auto; border: 2px dashed var(--gray-300); border-radius: 14px; padding: 20px 16px; text-align: center; cursor: pointer; transition: var(--transition); }
.kp-dz:hover, .kp-dz:focus-visible, .kp-src.is-drag .kp-dz { border-color: var(--blue); background: var(--blue-light); outline: none; }
[data-theme="dark"] .kp-dz:hover, [data-theme="dark"] .kp-dz:focus-visible, [data-theme="dark"] .kp-src.is-drag .kp-dz { background: rgba(37,99,235,.12); }
.kp-dz__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
[data-theme="dark"] .kp-dz__ic { background: rgba(37,99,235,.15); }
.kp-dz__ic .kp-ico { width: 22px; height: 22px; }
.kp-dz__t { font-size: .84rem; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
.kp-dz__f { font-size: .72rem; color: var(--gray-400); line-height: 1.45; }
.kp-pvper { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); }
.kp-pvper .kp-select { min-width: 220px; }
.kp-pvper .kp-muted { flex: 1 1 200px; padding-bottom: 8px; }
.kp-hol { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.kp-hol__r { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 8px; font-size: .76rem; color: var(--gray-800); padding: 3px 0; border-bottom: 1px solid var(--gray-100); }
.kp-hol__add { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-hol__add .kp-input { flex: 1 1 120px; min-width: 0; }
.kp-table--log td { font-size: .72rem; }

/* modal & layar tunggu */
.kp-modal, .kp-busy { position: fixed; inset: 0; z-index: 4000; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; padding: 16px; }
.kp-busy { z-index: 4500; }
.kp-busy__box { background: var(--white); border-radius: var(--radius-lg); padding: 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); max-width: 360px; text-align: center; }
.kp-busy__t { font-size: .8rem; color: var(--gray-700); word-break: break-word; }
.kp-modal__box { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 620px; max-height: calc(100% - 16px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.kp-modal__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--gray-200); }
.kp-modal__h .kp-file { word-break: break-all; margin-top: 3px; }
.kp-modal__b { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.kp-modal__b h3 { margin: 4px 0 0; font-size: .74rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.kp-modal__b p { margin: 0; font-size: .84rem; color: var(--gray-700); line-height: 1.5; }
.kp-modal__f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--gray-200); }

/* presentasi */
.kp-pres { position: fixed; inset: 0; z-index: 5000; background: #fff; color: #0F172A; display: none; flex-direction: column; font-family: var(--font); --kp-dw: clamp(110px, 15vw, 214px); --kp-dh: calc(var(--kp-dw) * .8123); }
body.kp-pres-on { overflow: hidden; }
.kp-pres__top { display: flex; align-items: center; gap: 14px; padding: 16px 32px; border-bottom: 1px solid #E2E8F0; }
.kp-pres__logo { height: 32px; width: auto; max-width: 170px; object-fit: contain; flex-shrink: 0; }
.kp-logo-tx { font-weight: 800; color: #1B237E; letter-spacing: .02em; white-space: nowrap; }
.kp-pres__sep { width: 1px; height: 32px; background: #E2E8F0; flex-shrink: 0; }
.kp-pres__tt { flex: 1; min-width: 0; }
.kp-pres__tt div { font-size: 1.05rem; font-weight: 800; }
.kp-pres__tt span { font-size: .74rem; color: #64748B; }
.kp-pres__pos { font-size: .82rem; color: #64748B; font-weight: 600; }
.kp-pres .kp-btn { background: #fff; color: #0F172A; border-color: #CBD5E1; }
.kp-pres__main { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.kp-pres__body { position: absolute; inset: 0; overflow: auto; padding: 28px 40px 60px; }
/* bingkai template Advantis: mulai di bawah header, berhenti di atas navigasi */
.kp-frm { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kp-frm i { position: absolute; display: block; }
.kp-frm__t { left: 0; top: 0; width: 86%; height: 6px; background: linear-gradient(#00CCFF 0 50%, #1766C4 50% 100%); }
.kp-frm__l { left: 0; top: 0; width: 6px; height: 65%; background: linear-gradient(90deg, #00CCFF 0 50%, #1766C4 50% 100%); }
.kp-frm__r { right: 0; top: 25%; bottom: 0; width: 7px; background: linear-gradient(90deg, #174CC5 0 43%, #2E008B 43% 100%); }
.kp-frm__b { left: 18%; right: 0; bottom: 0; height: 7px; background: linear-gradient(#174CC5 0 43%, #2E008B 43% 100%); }
.kp-frm__deco { position: absolute; right: 0; top: 0; width: var(--kp-dw); height: var(--kp-dh); opacity: .35; }
.kp-frm__tab { position: absolute; right: 0; bottom: 7px; width: 270px; height: 32px; box-sizing: border-box; padding-right: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; background: #0099FF; color: #1B237E; font-size: 14px; clip-path: polygon(23px 0, 100% 0, 100% 100%, 0 100%); }
.kp-frm__tab svg { width: 15px; height: 15px; }
/* ruang kosong di bawah hiasan kanan atas: Summary -> kartu turun, slide KPI -> kotak grafik turun */
.kp-frm__sp { float: right; width: calc(var(--kp-dw) - 28px); height: calc(var(--kp-dh) - 20px); margin-left: 12px; }
.kp-pres__body .kp-sl__tiles { clear: right; }
.kp-pres__body .kp-sl__r { margin-top: calc(var(--kp-dh) - 12px); }
/* slide penutup */
.kp-pres__body--end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.kp-end__logo { height: clamp(60px, 14vh, 118px); width: auto; max-width: 60%; object-fit: contain; }
span.kp-end__logo { height: auto; font-size: clamp(2.4rem, 6vw, 5rem); }
.kp-end__tx { font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: #2E008B; letter-spacing: .02em; }
/* slide pembuka: foto gudang, pita logo, pita biru + judul & periode (periode ikut data yang di-upload) */
.kp-cv { position: absolute; inset: 0; display: flex; flex-direction: column; }
.kp-cv__ph { flex: 0 0 30%; background: #1E3A6E center / cover no-repeat; }
.kp-cv__band { flex: 0 0 23.6%; min-height: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #ECF4FB, #FCFDFE); }
.kp-cv__logo { height: 60%; width: auto; max-width: 70%; object-fit: contain; }
span.kp-cv__logo { height: auto; font-size: clamp(2rem, 5vw, 4.4rem); }
.kp-cv__bot { flex: 1; position: relative; background: linear-gradient(135deg, #1E42A2, #2D51A7); background-size: 100% 100%; background-repeat: no-repeat; }
.kp-cv__bar { position: absolute; left: 21%; right: 21%; top: 22%; height: 29%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kp-cv__bot:not(.has-img) .kp-cv__bar { left: 0; right: 0; background: rgba(15, 23, 42, .72); }
.kp-cv__bar h1 { margin: 0; font-size: clamp(22px, 3.2vw, 46px); font-weight: 800; color: #fff; white-space: nowrap; }
.kp-cv__per { position: absolute; left: 0; right: 0; top: 58%; text-align: center; font-size: clamp(16px, 2.5vw, 36px); font-weight: 700; color: #fff; }
.kp-pres__foot { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px; border-top: 1px solid #E2E8F0; }
.kp-pres__nav { width: 44px; height: 44px; border-radius: 99px; border: 1px solid #CBD5E1; background: #fff; font-size: 1.4rem; color: #0F172A; cursor: pointer; }
.kp-pres__nav:disabled { opacity: .35; cursor: default; }
.kp-dots { display: flex; gap: 8px; align-items: center; }
.kp-dot { width: 12px; height: 12px; border-radius: 99px; border: none; background: #CBD5E1; cursor: pointer; padding: 0; transition: width .2s; }
.kp-dot.on { width: 34px; background: #2563EB; }
/* slide dipakai di presentasi & PDF, selalu warna terang */
.kp-sl { color: #0F172A; height: 100%; }
.kp-sl .is-ok { color: #047857 !important; } .kp-sl .is-bad { color: #B91C1C !important; } .kp-sl .is-near { color: #B45309 !important; }
/* Summary: ikon, grafik mini 5 bulan (warna status; bulan Excel lama lebih muda), keterangan warna */
.kp-ic { width: 34px; height: 34px; border-radius: 10px; background: #EFF6FF; color: #1D4ED8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kp-ic--dk { background: #1E3A6E; color: #BFDBFE; }
.kp-sl__thd { display: flex; align-items: center; gap: 10px; }
.kp-sl__trow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kp-mb { display: flex; align-items: flex-end; gap: 4px; height: 32px; flex-shrink: 0; }
.kp-mb i { display: block; width: 10px; border-radius: 2px; background: #E2E8F0; }
.kp-mb i.is-ok { background: #059669; } .kp-mb i.is-near { background: #D97706; } .kp-mb i.is-bad { background: #DC2626; }
.kp-mb i.is-ok.is-old { background: #A7F3D0; } .kp-mb i.is-near.is-old { background: #FCD34D; } .kp-mb i.is-bad.is-old { background: #FCA5A5; }
.kp-sl__dl { display: block; font-size: .8rem; font-weight: 600; color: #64748B; border-top: 1px solid #F1F5F9; padding-top: 8px; }
.kp-sl__dl.is-up { color: #047857 !important; } .kp-sl__dl.is-down { color: #B91C1C !important; } .kp-sl__dl.is-flat { color: #64748B !important; }
.kp-sl__tile--vol .kp-sl__dl { border-top-color: #1E3A6E; }
.kp-sl__lg { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: -8px 0 16px; font-size: .8rem; color: #475569; }
.kp-sl__lg span { display: inline-flex; align-items: center; gap: 6px; }
.kp-sl__lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.kp-sl__lg i.is-ok { background: #059669; } .kp-sl__lg i.is-near { background: #D97706; } .kp-sl__lg i.is-bad { background: #DC2626; }
.kp-sl__lgn { color: #64748B; }
/* Volume 5 bulan (kartu gelap) */
.kp-vb { display: flex; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.kp-vb__c { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kp-vb__c i { display: block; width: 16px; border-radius: 2px; background: #475A80; }
.kp-vb__c i.is-inv { background: #3B6FC4; } .kp-vb__c i.is-cur { background: #60A5FA; }
.kp-vb__c em { font-style: normal; font-size: .6rem; color: #94A3B8; }
.kp-vcmp { font-size: .78rem; font-weight: 600; color: #BFDBFE; }
.kp-vcmp--note { font-weight: 500; color: #CBD5E1; }
.kp-sl__hd { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.kp-sl__hd h1 { margin: 0; font-size: 2.2rem; font-weight: 800; }
.kp-sl__hd span { font-size: 1rem; color: #475569; }
.kp-sl__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kp-sl__tile { border: 1px solid #E2E8F0; border-radius: 16px; background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; font-family: var(--font); cursor: pointer; }
.kp-sl__tile--vol { background: #0F2448; border-color: #0F2448; cursor: default; }
.kp-sl__tile--vol .kp-sl__tno, .kp-sl__tile--vol .kp-sl__ts { color: #94A3B8; }
.kp-sl__tile--vol .kp-sl__tv { color: #fff; }
.kp-sl__tno { font-size: .82rem; font-weight: 700; color: #475569; }
.kp-sl__tv { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: #0F172A; }
.kp-sl__ts { font-size: .82rem; color: #475569; }
.kp-sl__ts b { color: #0F172A; }
.kp-sl--kpi { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.kp-sl__no { font-size: .9rem; font-weight: 700; color: #2563EB; }
.kp-sl__l h1 { margin: 6px 0 18px; font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.kp-sl__bigs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kp-sl__big { border: 1px solid #E2E8F0; border-radius: 16px; padding: 16px 18px; }
.kp-sl__bl { font-size: .78rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; }
.kp-sl__bv { font-size: 2.9rem; font-weight: 800; letter-spacing: -.02em; color: #0F172A; line-height: 1.15; }
.kp-sl__bs { font-size: .84rem; color: #475569; }
.kp-sl__facts { margin: 22px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 1.02rem; line-height: 1.45; color: #1E293B; }
.kp-sl__r { border: 1px solid #E2E8F0; border-radius: 16px; padding: 18px 20px; }
.kp-sl__rt { font-size: .92rem; font-weight: 700; margin-bottom: 26px; }
.kp-sl .kp-trend { border-color: #E2E8F0; }
.kp-sl .kp-trend__v { font-size: .9rem; color: #334155; }
.kp-sl .kp-trend__m { font-size: .86rem; color: #64748B; }
.kp-sl .kp-trend__tl { border-color: #94A3B8; }
.kp-sl .kp-trend__tl span { background: #fff; color: #64748B; font-size: .74rem; }
.kp-sl .kp-trend__b--ok { background: #059669; } .kp-sl .kp-trend__b--bad { background: #DC2626; } .kp-sl .kp-trend__b--near { background: #D97706; } .kp-sl .kp-trend__b--old { background: #94A3B8; }
.kp-sl__r .kp-sl__lg { margin: 14px 0 0; }
/* Slide KPI 1–6 = tampilan halaman rincian (tanpa tabel), di panggung 1600px yang di-scale (kpPresStage_).
   Variabel warna dikunci terang supaya slide tetap putih walau app sedang mode gelap. */
.kp-pres__body.kp-pres__body--st { padding: 0; overflow: hidden; z-index: 3; }
/* Summary di panggung: 4 kolom tetap, kartu mengisi tinggi slide. Ukuran px (bukan rem) supaya sama di layar & PDF. */
.kp-pst--sum .kp-sl { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; }
.kp-pst--sum .kp-sl__hd { margin-bottom: 18px; }
.kp-pst--sum .kp-sl__hd h1 { font-size: 30px; } .kp-pst--sum .kp-sl__hd span { font-size: 15px; }
.kp-pst--sum .kp-sl__lg { font-size: 12px; margin: -6px 0 14px; }
.kp-pst--sum .kp-sl__tiles { flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.kp-pst--sum .kp-sl__tile { justify-content: space-between; }
.kp-pst--sum .kp-sl__tno { font-size: 13px; } .kp-pst--sum .kp-sl__tv { font-size: 38px; }
.kp-pst--sum .kp-sl__ts { font-size: 13px; } .kp-pst--sum .kp-sl__dl { font-size: 12.5px; }
.kp-pst--sum .kp-vb__c em { font-size: 10px; } .kp-pst--sum .kp-vcmp { font-size: 12px; }
.kp-pst .kp-muted { font-size: 12px; }
/* Halaman PDF: hiasan & tab selalu tampil (aturan HP tidak berlaku) */
.kp-ppage .kp-frm__deco { display: block; } .kp-ppage .kp-frm__tab { display: flex; }
.kp-pst { position: absolute; left: 0; top: 0; width: 1600px; height: 760px; transform-origin: 0 0; padding: 22px 40px var(--kp-pb, 58px); display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #0F172A;
  --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; --blue: #2563EB; --blue-light: #EFF6FF; --shadow-xs: none;
  --kp-ok: #047857; --kp-ok-bg: #ECFDF5; --kp-bad: #B91C1C; --kp-bad-bg: #FEF2F2; --kp-warn: #92400E; --kp-warn-bg: #FFFBEB; --kp-warn-bd: #FCD34D;
  --kp-near: #B45309; --kp-near-bg: #FFFBEB; --kp-near-bar: #D97706; --kp-old-bar: #94A3B8; }
.kp-pst__hd, .kp-pst .kp-tiles { padding-right: var(--kp-dz, 250px); }
.kp-pst__hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kp-pst__no { font-size: 15px; font-weight: 700; color: #2563EB; }
.kp-pst__hd h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.kp-pst__hd > span:last-child { font-size: 15px; color: #475569; }
.kp-pst .kp-tiles { grid-template-columns: 1fr 1fr 1fr 1.9fr; gap: 14px; }
.kp-pst .kp-tiles .kp-how { grid-column: auto; }
.kp-pst .kp-tile { padding: 12px 16px; }
.kp-pst .kp-tile__l { font-size: 12px; }
.kp-pst .kp-tile__v { font-size: 34px; }
.kp-pst .kp-tile__v small { font-size: 20px; }
.kp-pst .kp-tile__s { font-size: 13px; }
.kp-pst .kp-kv--sm { font-size: 12px; }
.kp-pst .kp-how, .kp-pst .kp-how .kp-muted { font-size: 11px; line-height: 1.45; }
.kp-pst .kp-how { padding: 9px 14px; }
.kp-pst .kp-row3 { flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kp-pst .kp-row3 > .kp-box:first-child { grid-column: auto; }
.kp-pst.is-measure .kp-row3 { align-items: start; }
.kp-pst .kp-box { padding: 12px 18px; gap: 6px; overflow: hidden; }
.kp-pst .kp-box h2 { font-size: 16px; margin-top: 6px; }
.kp-pst .kp-box h2:first-child { margin-top: 0; }
.kp-pst .kp-barrow__t { font-size: 14px; }
.kp-pst .kp-barrow__t .kp-muted { font-size: 12.5px; }
.kp-pst .kp-trend { margin-top: 6px; }
.kp-pst .kp-trend__v, .kp-pst .kp-trend__m { font-size: 13px; }
.kp-pst .kp-trend__tl span { font-size: 11px; }
.kp-pst .kp-trend__b { max-width: 76px; }
.kp-pst .kp-mini { font-size: 13px; }
.kp-pst .kp-mini th, .kp-pst .kp-mini td { padding: 4px; }
.kp-pst .kp-note { font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.kp-pst .kp-amber { font-size: 11.5px; padding: 6px 10px; }
.kp-pst .kp-dist__n { font-size: 12px; }
.kp-pst .kp-dist__k { font-size: 11px; }
.kp-pst .kp-kv { font-size: 14px; }
/* Slide kedatangan truk per jam: batang (jumlah truk) + garis tren di atasnya */
.kp-pst .kp-tiles--5 { grid-template-columns: 1fr 1fr 1fr 1fr 1.6fr; }
.kp-pst > .kp-empty { flex: 1; }
.kp-arrbox { flex: 1; min-height: 0; }
.kp-arr__lg { display: flex; gap: 16px; font-size: 12px; color: #475569; }
.kp-arr__lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.kp-arr__lg i.kp-arr__lgl { width: 18px; height: 3px; border-radius: 2px; vertical-align: 2px; background: linear-gradient(90deg, #1D4ED8 50%, #0F766E 50%); }
.kp-arr__plot { flex: 1; min-height: 160px; position: relative; display: flex; border-bottom: 1px solid #E2E8F0; padding-top: 22px; }
.kp-arr__c { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 3px; }
.kp-arr__b { position: relative; display: block; width: 42%; min-height: 1px; border-radius: 3px 3px 0 0; }
.kp-arr__b b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: #334155; white-space: nowrap; }
.kp-arr__b--in { background: #93C5FD; }
.kp-arr__b--out { background: #5EEAD4; }
.kp-arr__ln { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.kp-arr__x { display: flex; font-size: 12px; color: #64748B; }
.kp-arr__x span { flex: 1; text-align: center; }

/* PDF: hanya #kpPrint yang dicetak, 1 slide = 1 halaman A4 mendatar */
#kpPrint { display: none; }
/* Halaman PDF = 1 slide presentasi, A4 mendatar (1120x790 px @96dpi) tanpa margin */
.kp-ppage { position: relative; width: 1120px; height: 790px; display: flex; flex-direction: column; overflow: hidden; contain: strict; background: #fff; color: #0F172A; font-family: var(--font);
  --kp-dw: 170px; --kp-dh: calc(var(--kp-dw) * .8123); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#kpPrint.is-build { display: block; position: fixed; left: -20000px; top: 0; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  #kpPrint .kp-ppage { page-break-after: always; break-after: page; }
  #kpPrint .kp-ppage:last-child { page-break-after: auto; break-after: auto; }
  body.kp-printing > *:not(#kpPrint) { display: none !important; }
  body.kp-printing { background: #fff !important; overflow: visible !important; }
  body.kp-printing #kpPrint { display: block; }
  #kpPrint .kp-page { page-break-after: always; break-after: page; height: 185mm; overflow: hidden; display: flex; flex-direction: column; gap: 14px; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: var(--font); }
  #kpPrint .kp-page:last-child { page-break-after: auto; break-after: auto; }
  #kpPrint .kp-page__hd { display: flex; justify-content: space-between; font-size: 10pt; color: #475569; border-bottom: 1px solid #E2E8F0; padding-bottom: 6px; }
  #kpPrint .kp-sl__tile { cursor: default; }
  #kpPrint .kp-sl__bv { font-size: 2.4rem; }
}

/* HP & layar sempit */
@media (max-width: 1200px) {
  .kp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kp-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-row3 > .kp-box:first-child { grid-column: 1 / -1; }
  .kp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-srcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kp-grid, .kp-row3, .kp-row2, .kp-srcgrid { grid-template-columns: minmax(0, 1fr); }
  .kp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kp-tiles .kp-how { grid-column: 1 / -1; }
  .kp-h1 { font-size: 1.4rem; }
  .kp-tile__v { font-size: 1.4rem; }
  .kp-head__r { width: 100%; }
  .kp-head__r .kp-lbl { flex: 1 1 100%; }
  .kp-head__r .kp-select { flex: 1; }
  .kp-search { flex: 1 1 100%; }
  .kp-search input { width: 100%; }
  .kp-pres__top { padding: 10px 14px; }
  .kp-pres__sep, .kp-frm__deco, .kp-frm__tab, .kp-frm__sp { display: none; }
  .kp-pres__body { padding: 16px 14px 20px; }
  .kp-pres__body .kp-sl__r { margin-top: 0; }
  .kp-cv__bar { left: 4%; right: 4%; }
  .kp-sl--kpi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kp-sl__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kp-sl__tv { font-size: 1.6rem; } .kp-sl__bv { font-size: 1.8rem; } .kp-sl__l h1, .kp-sl__hd h1 { font-size: 1.5rem; }
  .kp-sl__facts { font-size: .9rem; }
}