/* ================= Tokens (Figma: Sembuh – Dashboard Analytics BNI Life) ================= */
:root {
  --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-200: #eaecf0; --gray-300: #d0d5dd; --gray-400: #98a2b3;
  --gray-500: #667085; --gray-700: #344054; --gray-800: #1d2939; --gray-900: #101828;
  --brand-25: #fafcff; --brand-50: #f0f6fe; --brand-100: #e1edfd; --brand-300: #9fc5f6; --brand-500: #5183eb; --brand-700: #2e51cd; --brand-800: #2942a7;
  --orange-50: #fff6ed; --orange-300: #feb273; --orange-500: #fb6514; --orange-700: #c4320a;
  --red-50: #fef3f2; --red-200: #fecdca; --red-700: #b42318;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-card: drop-shadow(0 12px 8px rgba(16,24,40,.08)) drop-shadow(0 4px 3px rgba(16,24,40,.03));
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Manrope', sans-serif; background: var(--gray-25); color: var(--gray-900); min-width: 1280px; }
img { display: block; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
[hidden] { display: none !important; } /* component display rules (flex, grid) must not override hidden */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes rise { from { opacity: 0; translate: 0 8px; } }
@keyframes pop { from { opacity: 0; translate: 0 -4px; } }

/* ================= Sidebar ================= */
.nav { position: fixed; inset: 0 auto 0 0; width: 72px; background: var(--gray-900); display: flex; flex-direction: column; z-index: 10; }
.nav-logo { height: 64px; padding: 12px 24px; display: flex; align-items: center; }
.nav-logo button { border-radius: 4px; transition: opacity .15s; }
.nav-logo button:hover { opacity: .75; }
.nav-menu { flex: 1; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nav-item { position: relative; padding: 12px; border-radius: 8px; transition: background-color .15s; }
.nav-item:hover, .nav-item.active { background: var(--gray-800); }
.nav-item.active { filter: drop-shadow(0 1px 1px rgba(16,24,40,.05)); }
.nav-item::after { content: attr(aria-label); position: absolute; left: calc(100% + 12px); top: 50%; translate: -4px -50%; padding: 6px 10px; border-radius: 6px; background: var(--gray-900); color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 4px 12px rgba(16,24,40,.2); transition: opacity .15s, translate .15s; }
.nav-item:hover::after, .nav-item:focus-visible::after { opacity: 1; translate: 0 -50%; }
.nav-profile { padding: 12px; display: flex; justify-content: center; }
.avatar { width: 40px; height: 40px; border-radius: 1000px; background: var(--brand-25); border: 1px solid var(--brand-300); padding: 7px; transition: box-shadow .15s; }
.avatar:hover { box-shadow: 0 0 0 4px rgba(81,131,235,.35); }

/* ================= Header ================= */
.main { margin-left: 72px; }
.header { position: sticky; top: 0; z-index: 5; background: #fff; }
.header-bar { height: 80px; padding: 24px 32px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.header h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.actions { display: flex; gap: 8px; }
.actions .dd { flex: none; }
.btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 16px; line-height: 24px; font-weight: 600; box-shadow: var(--shadow-xs); transition: background-color .15s, border-color .15s, scale .1s; }
.btn:active { scale: .96; }
.btn-secondary { background: #fff; border: 1px solid var(--gray-300); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-50); }
.btn-primary-light { background: var(--brand-50); border: 1px solid var(--brand-50); color: var(--brand-700); }
.btn-primary-light:hover { background: var(--brand-100); border-color: var(--brand-100); }
.chev { transform: scaleY(-1); transition: transform .2s cubic-bezier(0.2, 0, 0, 1); }
[aria-expanded="true"] > .chev { transform: none; }
.badge { padding: 2px 8px; border-radius: 16px; background: var(--brand-50); color: var(--brand-700); font-size: 12px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Small buttons (Figma "Button" sm): Reset / Simpan / Filter Penyakit / pagination */
.btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 600; box-shadow: var(--shadow-xs); transition: background-color .15s, border-color .15s, color .15s, scale .1s; }
.btn-sm:active:not(:disabled) { scale: .96; }
.btn-outline { background: #fff; border-color: var(--gray-300); color: var(--gray-700); }
.btn-outline:hover:not(:disabled) { background: var(--gray-50); }
.btn-outline:disabled { border-color: var(--gray-200); color: var(--gray-300); cursor: not-allowed; }
.btn-outline:disabled img { opacity: .35; }
.btn-save { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn-save:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn-icon { padding: 9px; }

/* ================= Filter panel (Figma 8:20831) ================= */
/* Collapses with grid rows; overflow opens up once expanded so menus can hang below. */
.filter-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(0.2, 0, 0, 1); }
.filter-wrap.open { grid-template-rows: 1fr; }
.filter-inner { min-height: 0; overflow: hidden; }
.filter-wrap.settled .filter-inner { overflow: visible; }
.filter { padding: 16px 32px; border-bottom: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 16px; }
.f-row { display: flex; align-items: center; gap: 12px; }
.sep { width: 1px; height: 12px; background: var(--gray-300); flex-shrink: 0; }
.f-range { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.f-dates { font-size: 12px; line-height: 18px; color: var(--gray-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-group { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.money { flex: 1; min-width: 0; height: 40px; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 8px; box-shadow: var(--shadow-xs); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.money::placeholder { color: var(--gray-500); }
.money:hover { border-color: var(--gray-400); }
.money:focus { outline: 0; border-color: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-50); }
.dash { width: 8px; height: 1px; background: var(--gray-400); flex-shrink: 0; }
.f-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ================= Dropdown (shared by filter panel and page controls) ================= */
.dd { position: relative; flex: 1; min-width: 0; }
.dd.range { flex: 0 0 163px; }
.dd.wide .dd-menu { min-width: 440px; } /* Perusahaan: long company names */
.dd-btn { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; box-shadow: 0 1px 1px rgba(16,24,40,.05); cursor: pointer; font-size: 14px; line-height: 20px; transition: border-color .15s, box-shadow .15s; }
.dd-btn:hover { border-color: var(--gray-400); }
.dd.open .dd-btn { border-color: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-50); }
.dd-btn > img { flex-shrink: 0; transition: rotate .2s cubic-bezier(0.2, 0, 0, 1); }
.dd.open .dd-btn > img { rotate: 180deg; }
.dd-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.dd.has .dd-val { mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
.dd-ph { color: var(--gray-500); }
.dd-sel { font-weight: 500; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border-radius: 16px; background: var(--gray-100); color: var(--gray-700); font-size: 12px; line-height: 18px; font-weight: 500; flex-shrink: 0; }
.chip button { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; transition: background-color .15s; }
.chip button:hover { background: var(--gray-300); }

.dd-menu, .cal { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--gray-100); border-radius: 8px; box-shadow: var(--shadow-lg); animation: pop .15s cubic-bezier(0.2, 0, 0, 1); }
.dd-menu { width: 100%; min-width: 260px; padding: 4px 0; }
.dd-menu.up { top: auto; bottom: calc(100% + 4px); }
.dd-menu.right { left: auto; right: 0; }
.dd.range .dd-menu { width: 308px; }
.dd-head { padding: 10px 14px 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray-500); }
.dd-search { display: flex; align-items: center; gap: 8px; margin: 10px 14px; padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 8px; box-shadow: 0 1px 1px rgba(16,24,40,.05); cursor: text; }
.dd-search:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-50); }
.dd-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; line-height: 24px; }
.dd-search input::placeholder { color: var(--gray-500); }
.dd-opt, .dd-single { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; font-size: 16px; line-height: 24px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s; }
.dd-opt:hover, .dd-single:hover { background: var(--gray-50); }
.dd-divider { height: 1px; margin: 4px 14px 3px; background: var(--gray-200); }
.dd-list { max-height: 220px; overflow-y: auto; }
.dd-empty { padding: 10px 14px; font-size: 14px; line-height: 20px; color: var(--gray-500); }
.dd-single span { flex: 1; }
.dd-single img { flex-shrink: 0; margin-right: 4px; } /* file-type icons in the Export Halaman menu */
.dd-single .ck { color: var(--brand-500); visibility: hidden; }
.dd-single[aria-selected="true"] { background: var(--gray-50); }
.dd-single[aria-selected="true"] .ck { visibility: visible; }
.dd input[type=checkbox] { appearance: none; width: 20px; height: 20px; margin: 0; flex-shrink: 0; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.dd input[type=checkbox]:checked { border-color: var(--brand-500); background-color: var(--brand-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.667 3.5 5.25 9.917 2.333 7' stroke='%235183EB' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dd input[type=checkbox]:indeterminate { border-color: var(--brand-500); background-color: var(--brand-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.917 7h8.166' stroke='%235183EB' stroke-width='1.667' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dd input[type=checkbox]:disabled { background-color: var(--gray-100); cursor: default; }

/* Range calendar (Figma 8:21236): two months, Monday first */
.cal { display: flex; gap: 12px; padding: 12px; }
.cal-m { width: 248px; }
.cal-h { display: flex; align-items: center; gap: 12px; height: 20px; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.cal-h span { flex: 1; text-align: center; }
.cal-nav { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; transition: background-color .15s; }
.cal-nav:hover { background: var(--gray-100); }
.cal-nav.ph { visibility: hidden; }
.cal-g { display: grid; grid-template-columns: repeat(7, 32px); gap: 4px; }
.cal-g .wd { height: 32px; display: grid; place-items: center; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-500); }
.day { height: 32px; border-radius: 6px; font-size: 14px; line-height: 20px; color: var(--gray-700); font-variant-numeric: tabular-nums; transition: background-color .15s; }
.day:hover:not(:disabled) { background: var(--gray-100); }
.day.out { color: var(--gray-400); }
.day:disabled { color: var(--gray-300); cursor: default; }
.day.in { background: var(--brand-50); border-radius: 0; box-shadow: -4px 0 0 var(--brand-50); }
.day.in.c0 { box-shadow: none; border-radius: 6px 0 0 6px; }
.day.in.c6 { border-radius: 0 6px 6px 0; }
.day.edge, .day.edge:hover { background: var(--brand-500); color: #fff; }
.day.edge.end:not(.c0) { box-shadow: -4px 0 0 var(--brand-50); }

/* ================= Page body, tabs, cards ================= */
.body { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.view { display: flex; flex-direction: column; gap: 24px; }
.view > div[data-sub] { display: contents; } /* FWA sub-tab: its cards sit in the view's own column */
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--gray-300); }
/* Figma 24px sides; with Overview (with Comparison) shown (nine tabs) it needs 14px to fit one row at 1440 */
.tab { height: 52px; padding: 16px 24px; display: flex; align-items: center; gap: 8px; border-radius: 8px 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--brand-700); background: var(--brand-25); border: 1px solid var(--gray-300); transition: background-color .15s, border-color .15s, color .15s; }
.tab:not(.active):hover { background: var(--brand-50); border-color: var(--brand-300); }
.tab.active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.tab[hidden] { display: none; }
/* Icons as masks so one SVG takes the tab's text colour in every state */
.ic-layers { --ic: url(../assets/layers.svg); }
.ic-activity { --ic: url(../assets/activity.svg); }
.ic-briefcase { --ic: url(../assets/briefcase.svg); }
.ic-codesandbox { --ic: url(../assets/codesandbox.svg); }
.ic-home { --ic: url(../assets/home.svg); }
.ic-map { --ic: url(../assets/map.svg); }
.ic-building { --ic: url(../assets/building.svg); }
.ic-coins { --ic: url(../assets/coins.svg); } .ic-book { --ic: url(../assets/book.svg); } .ic-check-circle { --ic: url(../assets/check-circle.svg); } .ic-columns { --ic: url(../assets/columns.svg); }
.ic-coin-stack { --ic: url(../assets/coin-stack.svg); }
.ic { width: 20px; height: 20px; flex-shrink: 0; background: currentColor; mask: var(--ic) center / contain no-repeat; }

.card { background: #fff; border: 1px solid var(--gray-300); border-radius: 12px; }
.card-title { flex: 1; font-size: 20px; line-height: 30px; font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; }
.empty-msg { display: none; position: absolute; inset: 0; place-items: center; font-size: 14px; line-height: 20px; color: var(--gray-500); }
.empty .empty-msg { display: grid; }

/* Mini tab (Figma "Mini Tab : FWA"): Volume / Biaya */
.minitab { display: flex; gap: 4px; padding: 4px; background: var(--gray-25); border: 1px solid var(--gray-300); border-radius: 8px; }
.minitab button { padding: 6px 12px; border-radius: 4px; border: 1px solid transparent; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray-500); transition: color .15s, background-color .15s; }
.minitab button:hover { color: var(--gray-700); }
.minitab button[aria-pressed="true"], .minitab button[aria-selected="true"] { background: #fff; border-color: var(--gray-300); color: var(--gray-900); }

/* Legend */
.legend { display: flex; gap: 16px; }
.legend span { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; cursor: default; transition: opacity .2s; }
.swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.swatch.sm { width: 8px; height: 8px; }
.ai { background: var(--brand-500); } .tpa { background: var(--orange-500); }
/* Decision series: solid = Disetujui, light = Ditolak */
.s-aiOk { background: var(--brand-500); } .s-aiNo { background: var(--brand-300); }
.s-tpaOk { background: var(--orange-500); } .s-tpaNo { background: var(--orange-300); }

/* Floating value card: sankey nodes, chart tooltips */
.tip { position: absolute; transform: translateY(-50%); background: #fff; border: 1px solid var(--gray-300); border-radius: 8px; filter: var(--shadow-card); display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.tip b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip .r { display: flex; align-items: center; gap: 10px; }
.tip .r > span:first-child { flex: 1; font-variant-numeric: tabular-nums; }
.tip .r.dot { gap: 4px; }
.pill { width: 58px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 500; background: var(--brand-50); color: var(--brand-700); }
.pill.o { background: var(--orange-50); color: var(--orange-700); }
.pill.g { background: var(--gray-100); color: var(--gray-700); }
/* Sankey Excess / No Excess: Selisih (Sembuh AI − TPA) under the two amounts */
.tip .r.sel { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--gray-200); }

/* Shared chart axis bits */
.axis { font-size: 12px; line-height: 18px; color: var(--gray-500); text-align: center; }

/* ================= Overview: KPI strip ================= */
.kpi { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.kpi-strip { display: flex; gap: 16px; align-items: stretch; }
.kpi-total { width: 150px; flex-shrink: 0; background: var(--brand-50); border: 1.5px solid var(--brand-300); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.kpi-steps { flex: 1; display: flex; }
/* Arrow shape drawn with clip-path (border layer + fill layer) so wide steps keep Figma's 74px point instead of stretching. */
.kpi-step { --tip: 74px; --notch: 74px; flex: 1; min-height: 120px; margin-right: -64px; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; }
.kpi-step:first-child { --notch: 0px; }
/* Figma centres the first step's content on its body, not the tip: left calc(50% - 28.5px) */
.kpi-step:first-child > * { translate: -28.5px 0; }
.kpi-step:last-child { margin-right: 0; }
.kpi-step::before, .kpi-step::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--notch) 50%); transition: background-color .2s; }
.kpi-step::before { background: var(--gray-300); }
.kpi-step::after { inset: 1px; background: var(--gray-50); }
.kpi-step:first-child::after { left: 1px; }
.kpi-step:hover { z-index: 1; }
.kpi-step:hover::before { background: var(--brand-300); }
.kpi-step:hover::after { background: var(--brand-25); }
.kpi-who { font-size: 12px; line-height: 16px; color: var(--gray-500); }
.kpi-label { font-size: 18px; line-height: 28px; color: var(--gray-700); display: flex; align-items: center; justify-content: center; gap: 8px; }
.kpi-value { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-value small { margin-left: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-500); }
.kpi-amount { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.status { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.st-open { background: #fb6514; } .st-pending { background: #f04438; } .st-process { background: var(--brand-500); } .st-done { background: #12b76a; }
/* Completed step (Figma 2035:11106): summary | divider | 2×2 grid, Sembuh AI on the first row, TPA on the second, each
   decision titled with its chart colour. Values hang under the title text, the swatch sits in the margin. */
.kpi-step.done { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 80px 16px 82px; }
.kpi-step.done > .divider { width: 1px; align-self: stretch; margin-block: 8px; background: var(--gray-300); }
.done-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 24px; padding-left: 14px; text-align: left; }
.done-item h3 { display: flex; align-items: center; gap: 6px; margin-left: -14px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--gray-700); white-space: nowrap; }
.done-item h3 .swatch { width: 8px; height: 8px; border-radius: 2px; }
.done-item p { margin-top: 2px; }
.done-item b { font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.done-item small { margin-left: 2px; font-size: 12px; line-height: 18px; }
.amt { display: block; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.kpi:not(.in) .kpi-total, .kpi:not(.in) .kpi-step { opacity: 0; }
.kpi.in .kpi-total, .kpi.in .kpi-step { animation: rise .5s var(--ease) var(--d, 0s) backwards; }

/* ================= Overview: Penyebaran Klaim (sankey, drawn from data in px) ================= */
.sankey-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sankey { position: relative; height: 412px; }
.sankey > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sankey g { transition: opacity .25s; }
.sankey path { transition: d .6s var(--ease), opacity .25s, fill-opacity .25s, fill .25s; }
.sankey path[data-flow] { cursor: pointer; }
.sankey[data-hl=excess] [data-flow=approved], .sankey[data-hl=approved] [data-flow=excess] { opacity: .25; }
/* Hovering Rejected / Total Approved: Sembuh AI's ribbon into it turns see-through, so TPA's ribbon (drawn underneath) shows */
.sankey[data-hl=excess] [data-id=aIE], .sankey[data-hl=approved] [data-id=aIA] { fill-opacity: .2; stroke: var(--brand-300); stroke-width: 1px; }
.sankey[data-hl=excess] [data-id=tIE], .sankey[data-hl=approved] [data-id=tIA] { fill: var(--orange-300); }
.sankey[data-hl=excess] .tip[data-flow=excess], .sankey[data-hl=approved] .tip[data-flow=approved] { border-color: var(--brand-300); }
.sankey-card[data-series=ai] .layer-tpa, .sankey-card[data-series=tpa] .layer-ai { opacity: .15; }
.sankey-card[data-series=ai] .legend [data-series=tpa], .sankey-card[data-series=tpa] .legend [data-series=ai] { opacity: .4; }
.sankey.empty svg, .sankey.empty .tip { display: none; }
.reveal { clip-path: inset(-10px 100% -10px 0); }
.in .reveal { clip-path: inset(-10px 0 -10px 0); transition: clip-path 1.4s var(--ease); }
.sankey .tip { cursor: default; transition: top .6s var(--ease), left .3s var(--ease), opacity .25s, border-color .2s; }
.sankey .tip:hover { border-color: var(--brand-300); }
.tip.inc { padding: 16px; }
.tip.mid { padding: 8px 8px 8px 12px; }
.tip.end { padding: 4px 4px 4px 8px; }
.sankey:not(.in) .tip { opacity: 0; }
.sankey.in .tip { animation: rise .4s var(--ease) var(--d) backwards; }

/* ================= Overview: Tren Biaya Klaim ================= */
.trend { height: 400px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
/* Line glyph for legend + tooltip: solid = Disetujui, dashed = Ditolak (matches SVG dasharray 6 4) */
.ln { width: 16px; height: 2px; flex-shrink: 0; border-radius: 1px; background: var(--c); }
.ln.dash { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); }
.ln.ai, .point.ai { --c: var(--brand-500); }
.ln.tpa, .point.tpa { --c: var(--orange-500); }
.trend .dim { opacity: .2; }
.plot { flex: 1; display: flex; position: relative; }
.col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.col.y { flex: 0 0 40px; }
.col > div { flex: 1; display: flex; align-items: center; padding: 4px 0; }
.col > div img { width: 100%; height: 1px; }
.col > .x { flex: 0 0 30px; justify-content: center; white-space: nowrap; transition: color .15s; }
.col > .x.on { color: var(--gray-900); font-weight: 500; }
.y > div { justify-content: center; }
.line { position: absolute; top: 42px; right: 0; left: 40px; height: 226px; cursor: crosshair; }
.line:focus-visible { outline-offset: 8px; border-radius: 4px; }
.line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guide { position: absolute; bottom: 0; border-left: 1px dashed var(--brand-300); opacity: 0; transition: opacity .15s; pointer-events: none; }
.point { position: absolute; border-radius: 50%; background: #fff; border: 2px solid var(--c); pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: 0; transition: left .15s var(--ease), opacity .15s; }
.series { transition: opacity .2s, d .6s var(--ease); }
.line.hover .point:not(.dim) { opacity: 1; }
.trend .tip { top: 50%; padding: 8px 12px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.trend .tip .r { gap: 8px; }
.trend .tip .r > span { flex: 1; color: var(--gray-500); }
.trend .tip strong { margin-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.line.hover .guide, .line.hover .tip { opacity: 1; }
.trend.empty .line { visibility: hidden; }
/* Bandingkan Tahun: switch in the header, Tahun 1 / Tahun 2 pickers below; Tahun 2 lines faded */
.trend.compare { height: 456px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-700); white-space: nowrap; }
.switch i { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--gray-200); transition: background-color .2s cubic-bezier(0.2, 0, 0, 1); }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.1), 0 1px 2px rgba(16,24,40,.06); transition: translate .2s cubic-bezier(0.2, 0, 0, 1); }
.switch[aria-checked=true] i { background: var(--brand-500); }
.switch[aria-checked=true] i::after { translate: 16px 0; }
.switch:hover:not(:disabled) i { background: var(--gray-300); }
.switch[aria-checked=true]:hover:not(:disabled) i { background: var(--brand-700); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
/* Bandingkan Tahun (compare.js): Tahun 1 / Tahun 2 dropdowns under the title row; Tahun 2 is drawn faded (text stays
   full contrast). On Overview only Tren Biaya Klaim has it; Overview (with Comparison) (.with-cmp) shows it on every card. */
.cmp-row { display: none; align-items: center; gap: 24px; }
.compare > .cmp-row { display: flex; }
.view:not(.with-cmp) .cmp-only { display: none; }
.cmp-cap { display: none; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-700); }
.compare > .cmp-cap { display: flex; }
.kpi-strip.y2, .sankey.y2 { display: none; }
.compare > .kpi-strip.y2 { display: flex; }
.compare > .sankey.y2 { display: block; }
.sankey.y2 svg, .vbar-bar.y2 { opacity: .4; }
/* Top 10 with Tahun 2: the four columns of a group sit 4px apart, the fading tells the years apart */
.vbar-pair.cmp { gap: 4px; }
.cmp-item { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.cmp-item small { font-size: 12px; font-weight: 400; color: var(--gray-500); }
.cmp-item .dd { flex: 0 0 210px; }
.cmp-item .dd.cmp-year { flex-basis: 104px; }
.cmp-item .dd.cmp-month { flex-basis: 148px; }
.yr { width: 16px; height: 3px; border-radius: 2px; background: var(--gray-700); }
.yr.y2, .tip .r.y2 i { opacity: .4; }
.series.y2 { opacity: .4; }
.trend .series.y2.dim { opacity: .1; }
.point.y2 { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
/* Analitik Klaim of an opened group: age columns, gender pie, horizontal bars */
.pf-card .vcol { grid-template-rows: 1fr 40px; }
[data-pf=status] .vcol-col b { width: 48px; } /* 3 wide columns */
[data-profile] .section-title .btn-link { flex-shrink: 0; }
.detail { display: flex; flex-direction: column; gap: 24px; }
/* Analitik Klaim heading: sticky under the header; while stuck it spans the page in the header's white band */
.pf-bar { position: sticky; top: var(--header-h, 80px); z-index: 4; margin: -12px -32px; padding: 12px 32px; transition: background-color .15s, box-shadow .15s; }
.pf-bar.stuck { background: #fff; box-shadow: 0 1px 0 var(--gray-200); }
/* Scrolled-to cards and headings stop below the sticky header (80px) */
.dz-table, .section-title h2 { scroll-margin-top: calc(var(--header-h, 80px) + 24px); }
.vcol-x small { display: block; font-size: 11px; line-height: 14px; color: var(--gray-400); }
.pie { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; }
.pie svg { width: 200px; height: 200px; overflow: visible; }
.pie path { fill: none; stroke-width: 100; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); transition: stroke-dasharray .8s var(--ease), stroke-dashoffset .8s var(--ease), opacity .2s; }
.pie path.dm-a { stroke: var(--brand-500); } .pie path.dm-b { stroke: var(--brand-300); }
.pf-card:not(.in) .pie path { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
.pie-legend { display: flex; flex-direction: column; gap: 16px; }
.pie-legend .pie-item { display: grid; grid-template-columns: 12px auto; column-gap: 8px; align-items: center; font-size: 14px; line-height: 20px; cursor: default; transition: opacity .2s; }
.pie-legend strong { grid-column: 2; font-size: 20px; line-height: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pie-legend small { grid-column: 2; font-size: 12px; line-height: 18px; color: var(--gray-500); }
.pie.hl .pie-item:not(.on) { opacity: .35; }
.hlist { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hlist-rows { display: flex; flex-direction: column; gap: 6px; }
.hlist-row { display: grid; grid-template-columns: 200px 1fr 84px; align-items: center; gap: 12px; min-height: 20px; font-size: 12px; line-height: 18px; transition: opacity .25s; }
.hlist-label { color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlist-track { height: 12px; border-radius: 2px; background: var(--gray-100); overflow: hidden; }
.hlist-track b { display: block; height: 100%; width: var(--w); border-radius: 2px; transition: width .6s var(--ease); }
.pf-card:not(.in) .hlist-track b { width: 0; }
.hlist-val { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.hlist-val small { font-weight: 400; color: var(--gray-500); }
.hlist.hl .hlist-row:not(.on) { opacity: .35; }
.pie .tip, .hlist .tip { padding: 8px 12px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; z-index: 2; transform: none; }
.pie .tip.show, .hlist .tip.show { opacity: 1; }
.pie .tip .r, .hlist .tip .r { gap: 8px; }
.pie .tip .r > span, .hlist .tip .r > span { flex: 1; color: var(--gray-500); }
.pie .tip strong, .hlist .tip strong { margin-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* ================= FWA · Drugs Pricing (Figma 8:18482) ================= */
.fwa-controls { justify-content: flex-start; }
/* Five sub-tabs plus a filter button fit one line */
.fwa-controls button { white-space: nowrap; }
.fwa-subtabs button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; line-height: 20px; }
.fwa-subtabs .ic { width: 20px; height: 20px; }
.fwa-subtabs button:disabled { cursor: not-allowed; }
.fwa-subtabs button:disabled:hover { color: var(--gray-500); }
.fwa-filter { padding: 10px 18px; font-size: 16px; line-height: 24px; }
.fwa-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.fwa-kpis.three { grid-template-columns: repeat(3, 1fr); }
/* FWA Overview: one card per analysis, each opens its sub-tab */
.fwa-kpis.four { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.fwa-go { text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fwa-go:hover { border-color: var(--brand-300); background: var(--brand-25); }
.fwa-go .fwa-go-t { font-weight: 600; color: var(--gray-900); }
.fwa-go-n { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--brand-700); }
.fwa-kpi { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: #fff; border: 1px solid var(--gray-300); border-radius: 12px; }
.fwa-kpi-v { display: flex; align-items: flex-end; gap: 4px; font-size: 20px; line-height: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fwa-kpi-v, .fwa-kpi-v > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwa-kpi-l { font-size: 14px; line-height: 20px; color: var(--gray-500); }
.fwa-kpi.hi { background: var(--brand-25); border-color: var(--brand-300); }
.fwa-kpi.hi p { color: var(--brand-800); }
.fwa-kpi small { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 400; flex-shrink: 0; }
/* FWA Medical Relevance: finding code chips (blue = item, orange = claim), code bars + action pie in one row */
.mr-chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-chip.item { background: var(--brand-50); color: var(--brand-700); }
.mr-chip.klaim { background: var(--orange-50); color: var(--orange-700); }
.mr-find { display: flex; gap: 8px; align-items: flex-start; }
.mr-find + .mr-find { margin-top: 6px; }
.mr-row { display: grid; }
.mr-row .dm-card { height: auto; min-height: 460px; }
.swatch.mr-item, .hlist-track b.mr-item { background: var(--brand-500); } .swatch.mr-klaim, .hlist-track b.mr-klaim { background: var(--orange-500); }
.mr-codes .hlist { justify-content: flex-start; }
.mr-codes .hlist-rows { gap: 4px; }
.mr-bar { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; padding: 2px 6px; border-radius: 6px; text-align: left; cursor: pointer; }
.mr-bar:hover, .mr-bar.sel { background: var(--gray-50); }
.mr-bar.sel .hlist-label { font-weight: 600; color: var(--gray-900); }
.mr-bar .hlist-label { display: flex; align-items: center; gap: 8px; }
.hlist.empty .hlist-rows { visibility: hidden; }
.fwa-trend { height: 400px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.fwa-trend.tall { height: 480px; }
.dev-chart { position: relative; flex: 1; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 30px; }
.dev-y { position: relative; }
.dev-y span { position: absolute; left: 0; right: 4px; translate: 0 50%; text-align: right; }
.dev-plot { position: relative; }
.dev-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dev-grid { position: absolute; inset: 0; pointer-events: none; }
.dev-grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--gray-300); }
.dev-hit { position: absolute; inset: 0; cursor: crosshair; }
.dev-chart .point { pointer-events: none; }
.dev-x { display: flex; }
.dev-x span { flex: 1; text-align: center; padding-top: 8px; white-space: nowrap; }
.dev-chart .tip { top: 8px; transform: none; padding: 8px 12px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; z-index: 2; }
.dev-chart .tip .r { gap: 8px; }
.dev-chart .tip .r > span { flex: 1; color: var(--gray-500); }
.dev-chart .tip strong { margin-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dev-chart.hover .tip, .dev-chart.hover .point { opacity: 1; }
.trend .tip hr { border: 0; border-top: 1px solid var(--gray-200); margin: 2px 0; }

/* ================= Disease: Filter Analitik Penyakit (Figma 8:15713) ================= */
.dz-controls { padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.dz-controls h2 { flex: 1; font-size: 20px; line-height: 30px; font-weight: 500; }
.seg { display: flex; gap: 8px; }
.seg button { height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: var(--gray-50); color: var(--gray-700); font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color .15s, border-color .15s, color .15s, scale .1s; }
.seg button:hover:not([aria-pressed="true"]) { background: var(--gray-100); }
.seg button:active { scale: .96; }
.seg button[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }
.dd.dz-basis { flex: 0 0 200px; }
.dd.dz-filter { flex: none; }
.dz-filter .btn-sm[aria-expanded="true"] { border-color: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-50); }
.dz-filter .btn-sm .badge { margin: -2px -6px -2px 0; }

.vbar .tip, .bfly .tip, .vcol .tip { padding: 8px 12px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; z-index: 2; }
.vbar .tip.show, .bfly .tip.show, .vcol .tip.show { opacity: 1; }
.vbar .tip .r, .bfly .tip .r, .vcol .tip .r { gap: 8px; }
.vbar .tip .r > span, .bfly .tip .r > span, .vcol .tip .r > span { flex: 1; color: var(--gray-500); }
.vbar .tip .swatch, .bfly .tip .swatch, .vcol .tip .swatch { width: 8px; height: 8px; border-radius: 2px; }
.vbar .tip hr { border: 0; border-top: 1px solid var(--gray-200); margin: 2px 0; }
.vbar .tip strong, .bfly .tip strong, .vcol .tip strong { margin-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vbar.empty > :not(.empty-msg) { visibility: hidden; }

/* Rasio Persetujuan dan Penolakan Klaim per Rumah Sakit (Figma 8:21635): vertical stacked columns, Sembuh AI | TPA */
.dz-cols { height: 480px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cols-legend { align-items: center; }
.cols-legend b, .cols-legend span { font-size: 12px; line-height: 18px; }
.cols-legend b { font-weight: 500; }
.cols-legend span { font-weight: 400; }
.vbar { position: relative; flex: 1; display: grid; grid-template-columns: 50px 1fr; }
.vbar-y { position: relative; margin-bottom: 64px; }
.vbar-y span { position: absolute; left: 0; right: 0; translate: 0 50%; text-align: center; }
.vbar-plot { position: relative; }
.vbar-grid { position: absolute; inset: 0 0 64px; pointer-events: none; }
.vbar-grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--gray-300); }
.vbar-cols { position: absolute; inset: 0; display: flex; }
.vbar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; outline-offset: -2px; transition: opacity .25s; }
.vbar-pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.vbar-bar { width: 24px; max-width: calc(50% - 4px); height: var(--h); display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; transition: height .6s var(--ease); }
.vbar-bar b { transition: opacity .2s; }
.dz-cols:not(.in) .vbar-bar { height: 0; }
.vbar-x { position: relative; height: 64px; }
.vbar-x span { position: absolute; right: 50%; top: 10px; width: 110px; transform-origin: right top; rotate: -35deg; font-size: 12px; line-height: 18px; color: var(--gray-500); text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vbar.dense .vbar-pair { gap: 2px; }
.vbar.dense .vbar-x span { width: 90px; rotate: -70deg; font-size: 11px; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
.vbar-col.on .vbar-x span { color: var(--gray-900); font-weight: 500; }
.vbar-col[role="button"] { cursor: pointer; }
.vbar-col.sel .vbar-x span { color: var(--brand-700); font-weight: 600; }
.vbar.hl .vbar-col:not(.on) { opacity: .3; }
.dz-cols[data-s] .vbar-bar b { opacity: .2; }
.dz-cols[data-s=aiOk] .vbar-bar b.s-aiOk, .dz-cols[data-s=aiNo] .vbar-bar b.s-aiNo, .dz-cols[data-s=tpaOk] .vbar-bar b.s-tpaOk, .dz-cols[data-s=tpaNo] .vbar-bar b.s-tpaNo { opacity: 1; }
.dz-cols[data-s] .legend span:not(.on) { opacity: .4; }
.vbar .tip, .bfly .tip, .vcol .tip { transform: none; }

/* Geografi dan Demografi (Figma 8:17546) */
.contents { display: contents; }
.section-title { display: flex; align-items: center; gap: 24px; }
.section-title h2 { font-size: 24px; line-height: 32px; font-weight: 600; white-space: nowrap; }
.section-title i { flex: 1; border-top: 1px solid var(--gray-300); }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Overview: Persebaran Umur, Jenis Kelamin and Status Member in one row */
#ovProfile .dm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ovProfile .vcol-x span { min-width: 0; white-space: normal; } /* narrow card: each age label keeps its column's width, the range wraps */
.dm-card { height: 360px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dm-legend span { font-size: 12px; line-height: 18px; font-weight: 400; }
.dm-a { background: var(--brand-500); } .dm-b { background: var(--brand-300); }
.dm-legend .swatch { border-radius: 4px; }
.bfly, .vcol { position: relative; flex: 1; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 1fr 24px; }
.bfly-y { display: flex; flex-direction: column; }
.bfly-y span { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.bfly-plot, .vcol-plot { position: relative; }
.bfly-grid, .vcol-grid { position: absolute; inset: 0; pointer-events: none; }
.bfly-grid i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--gray-300); }
.bfly-grid i.zero { border-left-style: solid; }
.bfly-rows { position: relative; height: 100%; display: flex; flex-direction: column; }
.bfly-row { position: relative; flex: 1; transition: opacity .25s; }
.bfly-row b { position: absolute; top: 50%; translate: 0 -50%; height: 12px; width: var(--w); transition: width .6s var(--ease); }
.bfly-row .dm-a { right: 50%; border-radius: 2px 0 0 2px; }
.bfly-row .dm-b { left: 50%; border-radius: 0 2px 2px 0; }
.dm-card:not(.in) .bfly-row b { width: 0; }
.bfly-x, .vcol-x { position: relative; }
.bfly-x span { position: absolute; top: 6px; translate: -50% 0; white-space: nowrap; }
.vcol-y { position: relative; }
.vcol-y span { position: absolute; left: 0; right: 8px; translate: 0 50%; text-align: right; }
.vcol-grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--gray-300); }
.vcol-cols { position: relative; height: 100%; display: flex; }
.vcol-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; transition: opacity .25s; }
.vcol-col b { width: 24px; height: var(--h); border-radius: 2px 2px 0 0; transition: height .6s var(--ease); }
[data-dm=biayaKelamin] .vcol-col b { width: 100px; }
.dm-card:not(.in) .vcol-col b { height: 0; }
.vcol-x { display: flex; }
.vcol-x span { flex: 1; text-align: center; padding-top: 6px; white-space: nowrap; }
.bfly.hl .bfly-row:not(.on), .vcol.hl .vcol-col:not(.on) { opacity: .3; }
.bfly.empty > :not(.empty-msg), .vcol.empty > :not(.empty-msg) { visibility: hidden; }

/* ================= Disease: List Penyakit table (Figma 32:30352) ================= */
.dz-table { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dz-table .row { gap: 16px; }
.search { width: 320px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: 8px; box-shadow: 0 1px 1px rgba(16,24,40,.05); cursor: text; transition: border-color .15s, box-shadow .15s; }
.search:hover { border-color: var(--gray-400); }
.search:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 4px var(--brand-50); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 14px; line-height: 20px; }
.search input::placeholder { color: var(--gray-500); }
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.tbl { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.tbl th { padding: 0; background: var(--gray-50); font-weight: 400; color: var(--gray-500); text-align: left; }
/* Two header rows share one rounded grey band */
.tbl thead tr:first-child th:first-child { border-radius: 8px 0 0 8px; }
.tbl thead tr:first-child th:last-child { border-radius: 0 8px 0 0; }
.tbl thead tr:last-child th:last-child { border-radius: 0 0 8px 0; }
.tbl th.grp > span { justify-content: center; }
.tbl th > span, .tbl th > button { display: flex; align-items: center; gap: 4px; width: 100%; padding: 12px 16px; text-align: left; white-space: nowrap; }
.tbl th > button { transition: color .15s; }
.tbl th > button:hover { color: var(--gray-700); }
.tbl th[aria-sort] > button { color: var(--gray-900); font-weight: 500; }
.sort-ic { flex-shrink: 0; }
.sort-ic path { fill: var(--gray-400); transition: fill .15s; }
.tbl th[aria-sort=ascending] .sort-ic .up, .tbl th[aria-sort=descending] .sort-ic .down { fill: var(--brand-500); }
.tbl td { padding: 16px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--gray-25); }
.tbl .c-no { text-align: center; }
.tbl th.c-no > span { justify-content: center; }
/* Pinned first columns while the table scrolls sideways */
.tbl .sticky { position: sticky; z-index: 1; background: #fff; }
.tbl th.sticky { background: var(--gray-50); }
.tbl .s0 { left: 0; } .tbl .s1 { left: var(--l1); } .tbl .s2 { left: var(--l2); } /* offsets set on the table */
.tbl tbody tr:hover td.sticky { background: var(--gray-25); }
.tbl.dz { min-width: 1254px; font-size: 12px; line-height: 18px; }
.tbl.dz th > span, .tbl.dz th > button { padding: 12px 10px; }
/* Long headers wrap to two lines with the sort icon after the last word */
.tbl.dz th[rowspan] > button { display: block; white-space: normal; }
.tbl.dz th[rowspan] .sort-ic { display: inline; vertical-align: -3px; margin-left: 4px; }
.tbl.dz td { padding: 16px 10px; }
/* Sembuh AI columns tinted blue, TPA orange, kept faint so the numbers stay easy to read */
.tbl .c-ai { background: rgba(81, 131, 235, .06); }
.tbl .c-tpa { background: rgba(251, 101, 20, .05); }
.tbl th.c-ai { background: #edf2fc; }
.tbl th.c-tpa { background: #fcefe7; }
.tbl.dz td.sticky { white-space: normal; }
.tbl.dz.big { font-size: 14px; line-height: 20px; }
.tbl.dz.big th > span, .tbl.dz.big th > button { padding: 12px 16px; }
.tbl.dz.big td { padding: 16px; } /* long names wrap to two lines instead of being cut */
.tbl .note { display: block; color: var(--gray-500); } /* small grey line under an amount */
.tbl-wrap.scrolled .edge { box-shadow: 8px 0 8px -8px rgba(16,24,40,.16); }
.tbl .link { color: var(--brand-700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; border-radius: 2px; transition: color .15s; }
.tbl .link:hover { color: var(--brand-500); }
.tbl .muted { color: var(--gray-400); }
.tbl-empty td { padding: 32px 16px; text-align: center; color: var(--gray-500); }
.dz-table:not(.in) tbody { opacity: 0; }
.dz-table.in tbody { animation: rise .4s var(--ease) .1s backwards; }
/* Daftar Klaim (opens under List Penyakit) */
.kl-card:not([hidden]) { animation: rise .4s var(--ease); }
.kl-card .card-title:focus { outline: 0; }
.kl-search { width: 200px; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; color: var(--brand-700); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color .15s, scale .1s; }
.btn-link:hover { background: var(--brand-50); }
.btn-link:active { scale: .96; }
.tbl.kl { min-width: 1244px; }
.tbl.kl td { padding: 16px 12px; }
.tbl.kl th > span, .tbl.kl th > button { padding-inline: 12px; }
.tbl.kl td.c-act { padding: 0 8px; }
.tbl .c-mid, .tbl th.c-mid > span { text-align: center; justify-content: center; }
.tbl .c-right, .tbl th.c-right > button { text-align: right; justify-content: flex-end; }
.tbl td.wrap { white-space: normal; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 16px; font-size: 12px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tag.t-Outpatient { background: #f4f3ff; color: #5925dc; }
.tag.t-Inpatient { background: #eff8ff; color: #175cd3; }
.tag.t-Maternity { background: #fdf2fa; color: #c11574; }
.tag.t-Optical { background: #eef4ff; color: #3538cd; }
.tag.t-Dental { background: var(--orange-50); color: var(--orange-700); }
.tag.t-Generic { background: var(--brand-50); color: var(--brand-700); }
.tag.t-Branded { background: #f4f3ff; color: #5925dc; }
.tag.hi { background: #ecfdf3; color: #027a48; }
.tag.lo { background: #fffaeb; color: #b54708; }
.eye { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--gray-500); transition: background-color .15s, color .15s, scale .1s; }
.eye:hover, .eye[aria-expanded="true"] { background: var(--gray-100); color: var(--gray-700); }
.eye:active { scale: .96; }
.ic-eye { --ic: url(../assets/eye.svg); }
.tbl tbody tr.kl-open > td { background: var(--brand-25); }
.tbl tr.kl-detail > td { padding: 0; background: var(--brand-25); white-space: normal; }
.tbl tr.kl-detail:hover { background: none; }
.kl-detail dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px; padding: 16px 16px 20px; animation: pop .2s var(--ease); }
.kl-detail dt { color: var(--gray-500); font-size: 12px; line-height: 18px; }
.kl-detail dd { margin: 2px 0 0; }
.kl-detail .full { grid-column: 1 / -1; }

/* Perbandingan Obat Generic vs Obat Branded (Figma 8:23087) */
.dz-gauge { padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.gauge-note { font-size: 12px; line-height: 18px; color: var(--gray-500); }
.gauge-row { display: flex; align-items: center; gap: 16px; }
.gauge-chart { position: relative; flex: 1; height: 190px; }
.gauge-chart svg { position: absolute; left: 50%; top: 10px; translate: -50% 0; overflow: visible; }
.gauge-chart .seg { fill: none; stroke-width: 54; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); transition: stroke-dasharray .8s var(--ease), stroke-dashoffset .8s var(--ease), opacity .2s; }
.seg[data-t=Generic], .swatch.g-Generic { stroke: var(--brand-500); background: var(--brand-500); }
.seg[data-t=Branded], .swatch.g-Branded { stroke: var(--brand-300); background: var(--brand-300); }
.dz-gauge:not(.in) .seg { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
.dz-gauge.hl [data-t]:not(.on) { opacity: .35; }
.gauge-total { position: absolute; left: 50%; top: 103px; translate: -50% 0; width: 168px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge-total span, .gauge-label { font-size: 18px; line-height: 28px; color: var(--gray-700); }
.gauge-total strong, .gauge-card strong { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 24px; background: var(--gray-50); border: 1.5px solid var(--gray-300); border-radius: 8px; transition: opacity .2s, border-color .2s; }
.gauge-card.on { border-color: var(--brand-300); }
.gauge-card > span { margin-top: 6px; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.gauge-label { display: flex; align-items: center; gap: 8px; }
.gauge-label .swatch { width: 8px; height: 8px; border-radius: 2px; }
.gauge-chart .tip { left: calc(50% - 170px); top: 44px; transform: none; padding: 8px 12px; min-width: 220px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.gauge-chart .tip.right { left: auto; right: calc(50% - 190px); }
.gauge-chart .tip.show { opacity: 1; }
.gauge-chart .tip .r > span { flex: 1; color: var(--gray-500); }
.gauge-chart .tip strong { margin-left: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 14px; line-height: 20px; color: var(--gray-500); }
.pager-view { display: flex; align-items: center; gap: 8px; }
.dd.rows { flex: 0 0 71px; }
.dd.rows .dd-btn { padding: 0 10px 0 14px; }
.dd.rows .dd-sel { font-weight: 400; color: var(--gray-500); }
.dd.rows .dd-menu { min-width: 100%; }
.pager-nav { display: flex; gap: 8px; }
.pager-text { font-variant-numeric: tabular-nums; }

/* Running notice under the header bar (inside the sticky header). Pauses on hover; static with reduced motion. */
.ticker { height: 36px; display: flex; align-items: center; overflow: hidden; background: var(--red-50); border-bottom: 1px solid var(--red-200); color: var(--red-700); font-size: 14px; line-height: 20px; font-weight: 500; }
.ticker-track { display: flex; flex-shrink: 0; white-space: nowrap; animation: ticker 40s linear infinite; }
/* 40px between repeats, a dot in the middle of the gap */
.ticker-track span { position: relative; padding-left: 40px; }
.ticker-track span::before { content: ""; position: absolute; left: 17px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; translate: 0 -50%; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { translate: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { clip-path: none !important; }
  .kpi:not(.in) *, .sankey:not(.in) .tip, .dz-table:not(.in) tbody { opacity: 1 !important; }
  .dz-cols:not(.in) .vbar-bar { height: var(--h) !important; }
  .dm-card:not(.in) .bfly-row b { width: var(--w) !important; }
  .dm-card:not(.in) .vcol-col b { height: var(--h) !important; }
  .pf-card:not(.in) .hlist-track b { width: var(--w) !important; }
  .pf-card:not(.in) .pie path { stroke-dasharray: var(--len) 100 !important; stroke-dashoffset: var(--off) !important; }
  .dz-gauge:not(.in) .seg { stroke-dasharray: var(--len) 100 !important; stroke-dashoffset: var(--off) !important; }
}

/* ================= Export Halaman → PDF (js/ui/export.js): the page alone on one sheet, titled with the page ================= */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .nav, .tabs, .header .actions, .filter-wrap { display: none; }
  .main { margin-left: 0; }
  .header { position: static; }
}