/* Medical Record Analyzer sample dashboard. Shell, fonts and tables follow ref_data_registry_dashboard; colours and
   logo follow the CMS Duta Solusi "Analisa EMR BPJS" dashboard (theme layer at the end of this file). */

/* --- Fonts + variables --- */
@font-face{font-family:'Serenic Sans';src:url('/fonts/LiberationSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Serenic Sans';src:url('/fonts/LiberationSans-Bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
:root{--brand:#148a7f;--brand-hover:#0f766e;--brand-tint:#e7f6f4;--brand-ink:#134e4a;--bg:#f3f6f6;--card:#fff;--text:#09090b;--text2:#3f3f46;--muted:#71717a;--faint:#5f6b69;--line:#dbe5e3;--line2:#e8eeed;--red:#dc2626;--redbg:#fef2f2;--amber:#b45309;--amberbg:#fffbeb;--green:#15803d;--greenbg:#f0fdf4;--blue:#2563eb;--bluebg:#eff6ff;--sidebar:252px;--shadow:0 1px 3px rgba(15,35,33,.07);--mono:ui-monospace,SFMono-Regular,Menlo,monospace;font-family:'Serenic Sans','Segoe UI',Arial,sans-serif;font-size:12.5px;color:var(--text)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);line-height:1.45}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
.hidden{display:none!important}
.muted{color:var(--muted);line-height:1.5}
.small{font-size:11px;line-height:1.45}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--faint);margin:0 0 5px;text-transform:uppercase}
.error{color:var(--red);margin:0}
.error:empty{display:none}

/* --- Login --- */
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 0,#dcf3ef,transparent 35%),var(--bg)}
.login-card{width:390px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px;box-shadow:0 20px 60px rgba(15,35,33,.12)}
.brand-logo{height:64px;margin-bottom:22px}
.brand-logo img{display:block;height:100%;width:auto}
.login-card h1{font-size:22px;margin:0 0 8px}
.login-card form{display:grid;gap:14px;margin-top:24px}
.footnote{font-size:10px;text-align:center;color:var(--faint);margin:18px 0 0}
label{display:grid;gap:6px;color:var(--text2);font-weight:700}
input,select,textarea{border:1px solid var(--line);background:white;border-radius:8px;padding:9px 10px;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px #cdeeea}

/* --- Buttons --- */
.primary{border:1px solid var(--brand);background:linear-gradient(145deg,#26b2a6,var(--brand-hover));color:white;border-radius:8px;padding:8px 13px;font-weight:700;box-shadow:0 3px 9px rgba(20,138,127,.24);transition:transform .1s,box-shadow .1s}
.primary:hover:not(:disabled){background:linear-gradient(145deg,var(--brand),#0b5f58);box-shadow:0 5px 14px rgba(20,138,127,.3);transform:translateY(-1px)}
.wide{width:100%;padding:10px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d1dcda;background:linear-gradient(#fff,#f8fbfa);border-radius:8px;padding:7px 11px;font-weight:700;color:#3b4746;box-shadow:0 1px 2px rgba(15,35,33,.05);text-decoration:none;transition:transform .1s,border-color .1s,box-shadow .1s}
.button:hover:not(:disabled){border-color:#a9c4c0;background:#fff;box-shadow:0 3px 8px rgba(15,35,33,.09);transform:translateY(-1px)}
.danger{border:1px solid #fecaca;background:linear-gradient(#fff,#fff7f7);color:#b91c1c;border-radius:8px;padding:7px 11px;font-weight:700}

/* --- Shell: sidebar + top bar --- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .16s ease}
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.side-brand{min-height:74px;display:flex;gap:11px;align-items:center;padding:16px 15px;border-bottom:1px solid var(--line2);color:var(--brand-ink)}
.side-wordmark{display:grid;gap:4px;width:100%}
.side-wordmark img{display:block;width:168px;max-height:40px;object-fit:contain;object-position:left center}
.side-wordmark small{padding-left:2px}
.side-brand small,.user-chip small{display:block;color:var(--faint);font-size:10.5px;margin-top:3px;line-height:1.25}
.side-compact-mark{display:none;width:34px;height:34px;object-fit:contain}
.sidebar nav{flex:1;overflow:auto;padding:12px 9px}
.nav-group{margin:8px 0 18px}
.nav-label{padding:0 10px 7px;font-size:9.5px;font-weight:800;color:#6b7977;letter-spacing:.095em;text-transform:uppercase}
.nav-item{display:flex;width:100%;align-items:center;gap:10px;border:0;background:transparent;border-radius:8px;padding:8px 10px;color:#3e4847;font-size:13px;line-height:1.4;text-align:left;transition:background .12s,color .12s}
.nav-item:hover{background:#f1f9f8;color:var(--brand-ink)}
.nav-item.active{color:var(--brand-hover);background:var(--brand-tint);box-shadow:inset 3px 0 var(--brand);font-weight:700}
.nav-item>span:not(.nav-icon):not(.count){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .count{margin-left:auto;font-size:10.5px;color:var(--faint);font-weight:700}
.nav-icon{width:18px;height:18px;display:grid;place-items:center;color:#6b7977;flex:0 0 auto}
.nav-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar footer{border-top:1px solid var(--line2);padding:9px}
.user-chip{width:100%;display:flex;gap:8px;align-items:center;text-align:left;border:0;background:white;padding:6px;border-radius:8px}
.user-chip:hover{background:var(--bg)}
#avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);font-weight:800}
main{min-width:0}
.topbar{height:48px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:12px;position:sticky;top:0;z-index:5}
.history{display:flex;gap:3px}
.history button,.icon{border:1px solid var(--line);background:#fff;border-radius:6px;width:29px;height:29px;color:var(--text2)}
.sidebar-toggle{flex:none;font-size:18px;line-height:1}
#breadcrumb{font-weight:700;color:var(--text2);min-width:0;overflow-wrap:anywhere}
.health{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 11px;font-size:11px;font-weight:700;color:var(--text2);white-space:nowrap}
.health i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.health.ok i{background:var(--green);box-shadow:0 0 0 3px var(--greenbg)}
.health.bad i{background:var(--red);box-shadow:0 0 0 3px var(--redbg)}
#content{padding:18px 22px 28px;max-width:1600px;margin:auto}
@media(min-width:701px){
  .shell.sidebar-collapsed{--sidebar:64px}
  .sidebar-collapsed .side-brand{justify-content:center;padding:16px 8px}
  .sidebar-collapsed .side-wordmark,.sidebar-collapsed .nav-label{display:none}
  .sidebar-collapsed .side-compact-mark{display:block}
  .sidebar-collapsed .sidebar nav{padding:12px 6px}
  .sidebar-collapsed .nav-group{margin:0 0 8px;padding-top:8px;border-top:1px solid var(--line2)}
  .sidebar-collapsed .nav-group:first-child{border-top:0;padding-top:0}
  .sidebar-collapsed .nav-item{justify-content:center;gap:0;padding:9px 5px;min-height:34px}
  .sidebar-collapsed .nav-item>span:not(.nav-icon){display:none}
  .sidebar-collapsed .user-chip{justify-content:center}
  .sidebar-collapsed .user-chip>span:not(#avatar){display:none}
}
@media(max-width:700px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar-toggle{display:none}}


/* --- Page head, cards, filter bar --- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}
.page-head h1{margin:0 0 3px;font-size:20px}
.page-head p{margin:0;color:var(--muted);max-width:780px;line-height:1.5}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.filterbar,.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.filterbar{padding:7px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.filterbar input{flex:1;min-width:220px;padding:5px 9px}
.filterbar select{padding:5px 9px}
.card{padding:14px 16px;min-width:0;display:grid;gap:6px;align-content:start}
.card>h3,.section-head h3{margin:0;font-size:13px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.card>h3>span{min-width:0;overflow-wrap:anywhere;display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.card h4{margin:6px 0 0;font-size:11px;font-weight:700;color:var(--muted)}
.card p{margin:0;line-height:1.45}
.card.flush{padding:0;overflow:hidden}
.section-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.section-head .seg{margin-left:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;align-items:start}
.stack{display:grid;gap:10px}
.stack.narrow{max-width:980px}
.span2{grid-column:1/-1}
.masonry{columns:3 330px;column-gap:10px}
.masonry>.card{break-inside:avoid;margin-bottom:10px}
.stack>.masonry{margin-bottom:-10px}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.empty{padding:28px;text-align:center;color:var(--faint);background:#fff;border:1px dashed var(--line);border-radius:10px}
.card .empty,.table-wrap .empty{border:0}
.spinner{content:'';display:inline-block;width:14px;height:14px;border:2px solid #bfe6e1;border-top-color:var(--brand);border-radius:50%;animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bad-text{color:var(--red)}

/* --- Tables --- */
.table-wrap{overflow:auto;max-height:calc(100vh - 220px);scrollbar-color:#bfd1ce transparent;scrollbar-width:thin}
.tbl{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow)}
.card .tbl{box-shadow:none;border-color:var(--line2)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;line-height:1.45}
th{position:sticky;top:0;z-index:2;background:#f6f9f8;text-align:left;padding:9px 12px;border-right:1px solid #ebf0ef;border-bottom:1px solid #d3dedc;font-size:9.75px;letter-spacing:.065em;color:#62706e;text-transform:uppercase;white-space:nowrap}
th:first-child,td:first-child{padding-left:15px}
th:last-child{border-right:0}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
td.mono{white-space:nowrap}
td.wrap-text,td .wrap-text{max-width:70ch}
.card p,.card li{max-width:90ch}
td{padding:9px 12px;border-bottom:1px solid var(--line2);color:#333b3a;vertical-align:top;background:#fff}
tbody tr:last-child td{border-bottom:0}
tr.data-row{cursor:pointer;transition:background .1s}
tr.data-row td{vertical-align:middle;white-space:nowrap;padding-top:7px;padding-bottom:7px}
tr.data-row:nth-child(even) td{background:#fafcfc}
tr.data-row .cell-main{min-width:180px}
td .chips{flex-wrap:nowrap}
td.codes-cell{white-space:nowrap}
/* equal row heights whether a row shows code chips or a dash */
tr.data-row>td{height:38px}
.nowrap,td.n{white-space:nowrap}
tr.data-row:hover td{background:#eef8f6}
tr.highlight td{background:#fffbeb}
tr.bad td{background:var(--redbg)}
tr.section td{background:#f8fbfa;color:var(--muted);font-size:11px;font-weight:700}
table.checks-table td{min-width:110px}
.cell-main{font-weight:700;color:var(--text)}
.wrap-text{white-space:pre-wrap;overflow-wrap:anywhere}

/* --- Pills, badges, chips --- */
.badge,.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap;background:#edf3f2;color:#4b5e5b}
.pill.ok{background:var(--greenbg);color:var(--green)}
.pill.warn{background:var(--amberbg);color:var(--amber)}
.pill.bad{background:var(--redbg);color:var(--red)}
.pill.info{background:var(--bluebg);color:var(--blue)}
.pill.brand{background:var(--brand-tint);color:var(--brand-hover)}
.pill .spinner,.seg small .spinner{width:9px;height:9px;border-width:2px;margin-right:4px;vertical-align:-1px}
.chips{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.code-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border:1px solid var(--line2);border-radius:6px;background:#fff;font:600 11px/1.5 var(--mono);color:var(--text2)}
.code-chip b{color:var(--brand)}
.code-chip .dot-tier{width:8px;height:8px;margin:0}
.count-chip{padding:0 7px;border-radius:9px;background:var(--line2);color:var(--muted);font-weight:700;font-size:11px}

/* --- Score bar, checks, stats --- */
.score{display:flex;align-items:center;gap:10px;margin:2px 0}
.score .bar{flex:1;height:8px;border-radius:99px;background:#e2eae9;overflow:hidden}
.score .bar i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.score.ok .bar i{background:var(--green)}
.score.warn .bar i{background:#d97706}
.score.bad .bar i{background:var(--red)}
.score b{font-size:14px;color:var(--brand-ink);min-width:48px;text-align:right}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 16px;margin-top:2px}
.check{display:flex;gap:8px;align-items:flex-start;padding:2px 0}
.check i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}
.check i.y{background:var(--greenbg);color:var(--green)}
.check i.n{background:var(--redbg);color:var(--red)}
.check.missing span{color:var(--red);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{display:grid;gap:1px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.stat small{font-size:11px;font-weight:700;color:var(--muted)}
.stat b{font-size:24px;color:var(--brand-ink);line-height:1.2}
.stat b i{font-size:13px;font-style:normal;color:var(--muted);font-weight:400}
.stat span{color:var(--muted);font-size:11px}
.stat.bad b{color:var(--red)}

/* --- Key/value lists, record --- */
dl.kv{display:grid;grid-template-columns:minmax(110px,.55fr) minmax(0,1.45fr);margin:0}
dl.kv dt,dl.kv dd{padding:5px 0;border-bottom:1px solid var(--line2);margin:0}
dl.kv dt{color:var(--muted);padding-right:10px;line-height:1.45}
dl.kv dd{line-height:1.45}
dl.kv dd{overflow-wrap:anywhere;white-space:pre-wrap}
.null{color:var(--faint)}
.dx-main{font-size:15px;font-weight:700;color:var(--brand-ink);line-height:1.35}
.src{display:inline-flex;gap:3px;flex-wrap:wrap}
.src button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:5px;padding:0 6px;font:600 10.5px/1.7 var(--mono);color:var(--muted)}
.src button:hover{border-color:var(--brand);color:var(--brand)}
ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:5px}
ul.clean li{padding-left:14px;position:relative;overflow-wrap:anywhere}
ul.clean li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#7cc9bf}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.vital{display:grid;border:1px solid var(--line2);border-radius:7px;padding:4px 9px;background:#f8fbfa;min-width:0}
.vital small{font-size:11px;color:var(--muted)}
.vital b{font:600 14px/1.3 var(--mono);color:var(--text)}
.timeline{display:grid;gap:8px}
.entry{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.entry .when{display:grid;gap:4px;align-content:start}
.soap{display:grid;gap:6px}
.soap div{display:grid;grid-template-columns:20px 1fr;gap:6px}
.soap b{color:var(--brand)}
.soap p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
svg.chart{width:100%;height:auto;display:block}
svg.chart text{font:10px var(--mono);fill:var(--faint)}
svg.chart .grid{stroke:var(--line)}
svg.chart .area{fill:var(--brand-tint)}
svg.chart .line{fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linejoin:round}
svg.chart .last{fill:var(--brand)}

/* --- Sample detail: pair bar, view switcher, patient, tabs --- */
.pair-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.small-button{padding:2px 8px;font-size:11px;border-radius:6px}
.link-danger{border:0;background:transparent;color:#b91c1c;font-weight:700;padding:2px 4px;font-size:11px}
.link-danger:hover{text-decoration:underline}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:5px 10px;font-weight:700;color:var(--muted);border-right:1px solid var(--line2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--brand-tint);color:var(--brand-hover)}
.seg.big{box-shadow:var(--shadow);flex:none}
.seg.big button{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;font-size:12px;color:var(--text2);white-space:nowrap}
.seg.big button small{font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.seg.big button.on{background:var(--brand);color:#fff}
.seg.big button.on small{color:#cdeeea}
.seg.big button.on small.bad-text{color:#fecaca}
.progress-card,.run-errors{margin-bottom:10px}
.patient{gap:8px;padding:10px 14px}
.patient .top{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;align-items:center}
.patient .who{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.patient h2{margin:0;font-size:16px;color:var(--brand-ink)}
.ids{display:flex;gap:6px 16px;flex-wrap:wrap;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:6px 16px;padding-top:8px;border-top:1px solid var(--line2)}
.fact{display:grid;gap:0;min-width:0}
.fact label{font-size:11px;color:var(--muted)}
.fact span{overflow-wrap:anywhere}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 10px}
.tab{border:0;background:transparent;padding:6px 11px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.tab:hover{color:var(--brand-ink)}
.tab.on{color:var(--brand-hover);border-bottom-color:var(--brand)}
.tab .count{font:600 10.5px var(--mono);color:var(--faint)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge.llm{margin-left:4px;padding:1px 5px;font-size:9.5px;background:#e3f5f2;color:var(--brand)}
details.how>summary{cursor:pointer;color:var(--faint);font-size:11px;font-weight:700;width:max-content}
details.how>summary:hover{color:var(--brand)}
details.how p{margin-top:4px}

/* --- Job steps --- */
.steps{display:grid;gap:6px}
.step{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center}
.step .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:700 11px var(--mono);color:var(--faint);background:#fff}
.step.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.step.fail .dot{background:var(--red);border-color:var(--red);color:#fff}
.step.now .dot{border-color:var(--brand);color:var(--brand);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px var(--brand-tint)}}
@media (prefers-reduced-motion:reduce){.step.now .dot{animation:none}}

/* --- Page thumbnails + viewer --- */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.page{display:grid;grid-template-rows:auto 1fr;align-content:start;align-items:start;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden;padding:0;text-align:left;box-shadow:var(--shadow);transition:border-color .1s}
.page:hover{border-color:var(--brand)}
.page img{width:100%;aspect-ratio:1/1.414;object-fit:cover;object-position:top;background:#f3f6f6;border-bottom:1px solid var(--line2);display:block}
.page .cap{display:grid;gap:3px;padding:6px 8px}
.page .cap b{font-size:11.5px}
.page .cap span.t{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
dialog#page-modal{border:0;border-radius:12px;padding:0;width:min(1160px,calc(100vw - 30px));max-height:94vh;box-shadow:0 20px 60px rgba(15,35,33,.3)}
dialog#page-modal::backdrop{background:rgba(9,9,11,.5)}
.page-modal-bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:#fafcfc;border-bottom:1px solid var(--line)}
.page-modal-bar span{display:flex;gap:6px}
#page-modal-img{display:block;width:100%;height:auto}

/* --- ICD codes: checklist cards (after the annotation dashboard) --- */
.coded-from{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 24px}
.coded-from p{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tier-count{display:inline-flex;align-items:center;font:600 11.5px var(--mono);margin-right:6px}
.dot-tier{display:inline-block;flex:0 0 auto;width:11px;height:11px;margin-right:9px;border-radius:50%;background:#cbd5e1}
.dot-tier.is-green{background:#22c55e}
.dot-tier.is-yellow{background:#eab308}
.dot-tier.is-red{background:#ef4444}
.dot-tier.is-purple{background:#a98be8}
.code-section{display:grid;gap:6px}
.code-empty{padding:12px;border:1px dashed #c6e9e4;border-radius:8px;background:#f3faf9;color:#5f9e97;text-align:center}
.code-card{border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow)}
.code-head{display:flex;align-items:center;gap:8px;padding:7px 12px;list-style:none;cursor:pointer;border-radius:9px}
.code-head::-webkit-details-marker,.condition>summary::-webkit-details-marker,.var-source>summary::-webkit-details-marker{display:none}
.code-head:hover{background:#f4fbfa}
.code-head:after{content:'▸';flex:0 0 auto;width:12px;text-align:center;color:var(--muted);font-size:13px;line-height:1}
.code-card[open]>.code-head:after{content:'▾'}
.code-head .dot-tier{width:12px;height:12px;margin-right:2px}
.code-title{flex:1;min-width:0;line-height:1.45}
.code-title>b{font-family:var(--mono);color:var(--text)}
.code-title>span:not(.code-pill){color:#475569}
.code-meta{color:var(--faint)}
.code-pill{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.04em;line-height:16px;vertical-align:1px}
.code-pill.is-primary{background:var(--brand);color:#fff}
.code-body{padding:2px 12px 12px;border-top:1px solid var(--line2);display:grid;gap:10px}
.no-checklist{margin:10px 0 0!important;padding:10px 12px;border:1px dashed var(--line);border-radius:6px;background:#f8fafc;color:var(--muted);font-style:italic}
.code-source{padding:9px 12px;border:1px solid var(--line2);border-radius:6px;background:#f2f9f8}
.code-source small{display:block;color:#334155;font-weight:700}
.code-source p{color:var(--brand-hover);white-space:pre-wrap}
.rule,.coding-rule{margin-top:10px;padding:10px;border:1px solid var(--line2);border-radius:8px;background:#f8fafc}
.rule.is-nested{margin-top:8px;background:#fff}
.rule>header,.coding-rule>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rule>header b{color:#475569;letter-spacing:.02em}
.rule-meta{display:inline-flex;gap:8px;align-items:center;flex:0 0 auto}
.combination{flex:0 0 auto;padding:1px 7px;border-radius:4px;background:#e2e8f0;color:#64748b;font-size:9.5px;font-weight:700;letter-spacing:.04em}
.combination.is-or{background:#e3f5f2;color:var(--brand)}
.or-note{margin:0 0 8px!important;color:var(--brand);font-size:11px;font-style:italic}
.condition{margin-bottom:6px;border:1px solid var(--line2);border-radius:6px;background:#fff}
.condition:last-child{margin-bottom:0}
.condition>summary{display:flex;align-items:center;padding:6px 10px;font-weight:700;color:var(--text);cursor:pointer;list-style:none}
.condition>summary:hover{background:#f4fbfa}
.condition>summary>span:nth-child(2){flex:1;min-width:0}
.condition>summary:after{content:'▸';width:12px;text-align:center;margin-left:8px;color:#64748b;font-size:13px}
.condition[open]>summary:after{content:'▾'}
.cond-state{font-style:normal;font-size:10.5px;font-weight:700;margin-left:8px;color:var(--muted)}
.cond-state.is-green{color:var(--green)}
.cond-state.is-red{color:var(--red)}
.condition-body{padding:0 12px 12px 30px;color:#475569;line-height:1.6;display:grid;gap:8px}
.condition-body small{display:block;margin-bottom:2px;color:var(--brand);font-weight:700;font-size:11px}
.condition-body p{margin:0;white-space:pre-wrap}
.unverified{color:var(--muted);font-style:italic}
.variable{display:grid;grid-template-columns:minmax(90px,190px) 1fr auto;gap:10px;align-items:start;padding:6px 0;border-bottom:1px solid #f1f5f9}
.variable>span:first-child{color:#64748b}
.var-value{color:var(--text);font-weight:700;overflow-wrap:anywhere}
.var-missing{color:var(--muted);font-style:italic}
.found{color:#16a34a;font-weight:700}
.not-found{color:#ef4444;font-weight:700}
.derived{margin-left:6px;padding:1px 6px;border-radius:4px;background:#e3f5f2;color:var(--brand);font-size:9.5px;font-weight:700}
.var-source{position:relative}
.var-source>summary{color:var(--brand);font-weight:700;cursor:pointer;list-style:none}
.var-source>div{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:grid;gap:2px;width:max-content;max-width:360px;max-height:320px;overflow:auto;padding:8px 10px;border-radius:6px;background:#1b2524;color:#fff;box-shadow:0 5px 16px #21182f33}
.var-source small{color:#cbd5e1;font-weight:700}
.var-source b{color:#9fe0d7;white-space:pre-wrap}
.var-source span{opacity:.75;font-size:10.5px}
.coding-rule{border-color:#dbe4ff;background:#f2f9f8}
.coding-rule>header b{color:#3b5998}
.coding-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid #eef0f6}
.coding-row:last-child{border-bottom:0}
.coding-row>span{flex:0 0 auto;min-width:140px;color:#64748b}
.coding-row>b{color:var(--text);white-space:pre-wrap}
.combination-head{padding:6px 10px;border:1px solid #bfe8e2;border-radius:6px;background:#f2faf9;color:var(--brand);font-weight:700}
.components{padding-left:10px;border-left:2px solid var(--brand-tint);display:grid;gap:10px}
.component-head{display:flex;align-items:center;gap:6px}
.component-head .dot-tier{width:9px;height:9px;margin-right:0}
.component-head>span:last-child{flex:1;color:#64748b}

/* --- Forms (new sample) --- */
.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.drop{border:1.5px dashed #c3d6d3;border-radius:10px;padding:14px;display:grid;gap:6px;justify-items:center;text-align:center;background:#f8fbfa;transition:border-color .15s,background .15s;cursor:pointer;min-height:104px;align-content:center;font-weight:400}
.drop .nav-icon{width:26px;height:26px;color:var(--brand)}
.drop .nav-icon svg{width:24px;height:24px}
.drop.over{border-color:var(--brand);background:var(--brand-tint)}
.drop.has-file{border-style:solid;border-color:#8fd3ca;background:#fff}
.drop b{font-size:13px;color:var(--brand-ink)}
.drop input[type=file]{display:none}
.drop .file{font-family:var(--mono);font-size:11.5px;color:var(--text2);overflow-wrap:anywhere}
.options{display:grid;gap:6px}
.option{display:flex;gap:10px;align-items:flex-start;font-weight:400;padding:7px 10px;border:1px solid var(--line2);border-radius:9px;background:#fff}
.option input{margin-top:2px;width:auto}
.option b{display:block;color:var(--text)}
.option.disabled{opacity:.55}
.option.sub{margin-left:28px}
.form-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:6px}
@media(max-width:900px){.upload-grid{grid-template-columns:1fr}}

/* --- JSON / misc --- */
pre.json{white-space:pre-wrap;max-height:640px;overflow:auto;background:#132020;color:#dcf3ef;border-radius:9px;padding:15px;font:11px/1.55 var(--mono);margin:0}
.warnings{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.warnings li{padding:8px 10px;border-radius:8px;background:var(--amberbg);color:var(--amber);border:1px solid #fde68a;overflow-wrap:anywhere}
.warnings li.err{background:var(--redbg);color:var(--red);border-color:#fecaca}
#toast{position:fixed;right:18px;bottom:18px;background:#182120;color:white;padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(15,35,33,.25);opacity:0;transform:translateY(8px);transition:.16s;pointer-events:none;z-index:20}
#toast.show{opacity:1;transform:none}

/* typed codes of the direct validation (under its option) */
.code-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:2px 0 4px 28px}
.code-inputs label{display:grid;gap:4px;font-weight:600;font-size:12px}
.code-inputs label span{font-weight:400}
.code-inputs textarea{resize:vertical;font-family:var(--mono);font-size:12px;width:100%}
.code-inputs .error{grid-column:1/-1;margin:0}
/* signature / stamp pill opening its page */
button.pill-link{border:0;cursor:pointer;font:inherit;font-size:inherit}
button.pill-link:hover{box-shadow:0 0 0 1px currentColor}
.check .src{margin-left:auto;flex-wrap:nowrap}
/* search in the open sample (top bar) */
.doc-search{margin-left:auto;display:flex;align-items:center;gap:4px;position:relative}
.pair-bar .link-danger{order:0}
.doc-search.hidden{display:none}
.doc-search svg{position:absolute;left:9px;top:50%;width:14px;height:14px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:1.8}
.doc-search input{width:min(280px,24vw);height:32px;padding:5px 8px 5px 28px;font-size:12px}
.doc-search>button{border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;height:28px;color:var(--muted);font-size:15px;line-height:1}
.doc-search>button:hover{border-color:var(--brand);color:var(--brand)}
#search-count{min-width:44px;text-align:right}
mark.search-hit{background:#fff3a3;color:inherit;border-radius:2px;padding:0 1px}
mark.search-hit.current{background:#ffb74a;box-shadow:0 0 0 2px #ffb74a}
/* origin of the ICD codes: Koding ICD or typed by the user */
.badge.origin{margin-right:6px}
.badge.origin.coded{background:var(--brand-tint);color:var(--brand-hover)}
.badge.origin.typed{background:var(--amberbg);color:var(--amber)}
.codes-origin{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
td.codes-cell{display:table-cell}
td.codes-cell .badge.origin{vertical-align:middle}
td.codes-cell .chips{display:inline-flex}
/* the primary diagnosis listed like the secondary ones */
.dx-list .code-pill{margin-left:4px}
/* compact header row: status + view switch (title is in the breadcrumb) */
.pair-bar>.pill{flex:none}
/* list of every match of the search, under the search box */
.search-panel{position:absolute;top:calc(100% + 6px);right:0;width:min(520px,70vw);max-height:62vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(15,60,55,.16);z-index:30;padding:4px}
.search-panel.hidden{display:none}
.search-panel-head{padding:6px 10px;font-size:11px;color:var(--muted);font-weight:700}
.search-item{padding:7px 10px;border-radius:7px;cursor:pointer;display:grid;gap:3px}
.search-item:hover{background:#f4fbfa}
.search-item.selected{background:var(--brand-tint)}
.search-item.current{box-shadow:inset 3px 0 0 var(--brand)}
.search-where{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.search-where b{color:var(--text)}
.search-where .src{margin-left:auto}
.search-snippet{font-size:12px;line-height:1.45;color:var(--text2);overflow-wrap:anywhere}
.search-snippet mark{background:#fff3a3;color:inherit;border-radius:2px}
.no-checklist-label{color:#7c8594;font-style:italic}
/* label after the grey count ("3 tanpa checklist"): the count is a flex row, so whitespace does not render */
.tier-count .muted{margin-left:4px}
.src-inline{margin-left:4px;vertical-align:1px}
.src-inline button{opacity:.75;font-size:9.5px;padding:0 4px}
.src-inline button:hover{opacity:1}
/* ICD code modification tab (direct validation): change cards beside the submitted / final codes */
.mod-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:14px;align-items:start}
@media(max-width:900px){.mod-layout{grid-template-columns:1fr}}
.mod-list,.mod-aside{display:grid;gap:10px;min-width:0}
.mod-card{--mod:var(--blue);--modbg:var(--bluebg);display:grid;gap:9px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--mod);border-radius:9px;background:#fff;box-shadow:var(--shadow)}
.mod-card.op-remove{--mod:var(--red);--modbg:var(--redbg)}
.mod-card.op-replace{--mod:var(--amber);--modbg:var(--amberbg)}
.mod-card.op-add{--mod:var(--green);--modbg:var(--greenbg)}
.mod-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mod-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:var(--modbg);color:var(--mod);font-weight:700;font-size:11.5px}
.mod-badge:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mod)}
.mod-flow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.mod-flow small,.mod-evidence small{display:block;margin-bottom:4px;color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.mod-arrow{padding-bottom:3px;color:var(--muted);font-size:16px}
.mod-type{margin-left:auto;padding:1px 7px;border:1px solid var(--line2);border-radius:5px;background:#f8fafc;color:var(--muted);font-size:10.5px}
.mod-code{display:inline-block;padding:3px 9px;border:1px solid var(--line2);border-radius:6px;background:#fff;font:600 12px/1.4 var(--mono);color:var(--text2)}
.mod-code.is-final{border-color:#bbf7d0;background:var(--greenbg);color:var(--green)}
.mod-code.is-removed{border-color:#fecaca;background:var(--redbg);color:var(--red);text-decoration:line-through}
.mod-code.is-none{background:#f8fafc;color:var(--muted)}
.mod-reason{margin:0;color:var(--text2);line-height:1.55}
.mod-tags{display:flex;gap:6px;flex-wrap:wrap}
.mod-tag{padding:1px 8px;border:1px solid var(--line2);border-radius:5px;background:#f8fafc;color:var(--muted);font-size:11px}
.mod-tag.warn{border-color:#fde68a;background:var(--amberbg);color:var(--amber)}
.mod-evidence li{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mod-evidence q{color:var(--brand-hover)}
.mod-side .chips{gap:5px}

/* --- Users, account, dashboard: tenant badge, user row, modal forms, status counts (as the CMS dashboard) --- */
.brand-mark{width:46px;height:46px;display:grid;place-items:center;margin-bottom:22px}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.tenant-badge{margin:2px 0 14px;padding:0 10px}
.tenant-badge .nav-label{padding:0 0 3px}
.tenant-name{font-weight:700;color:var(--brand-ink);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.user-row{display:flex;align-items:center;gap:4px}
.user-row .user-chip{flex:1;min-width:0}
.user-row .user-chip>span:last-child{min-width:0}
.user-row .user-chip b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logout-button{flex:none;display:grid;place-items:center;padding:0}
.logout-button .nav-icon{width:16px;height:16px}
@media (min-width:701px){.sidebar-collapsed .tenant-badge{display:none}.sidebar-collapsed .user-row{flex-direction:column}}
tr.data-row.static{cursor:default}
td.row-actions{display:flex;gap:4px;justify-content:flex-end}
tr.data-row td.row-actions{white-space:nowrap}
.badge.warn-badge{margin-left:6px;background:var(--amberbg);color:var(--amber)}
.section-head .push{margin-left:auto}
.status-counts{display:flex;flex-wrap:wrap;gap:8px 18px}
.status-count{display:inline-flex;align-items:center;gap:6px}
.status-count b{font-size:13px;color:var(--brand-ink)}
dialog.modal{border:0;border-radius:12px;padding:0;width:min(560px,calc(100vw - 30px));max-height:92vh;box-shadow:0 20px 60px #1714284d;overflow:auto}
dialog.modal.wide{width:min(1160px,calc(100vw - 30px))}
dialog.modal::backdrop{background:#09090b80}
dialog.modal .page-modal-bar{z-index:3}
.modal-body{padding:14px 16px 16px}
.form-grid{display:grid;gap:12px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid label{font-size:12px}
.form-grid label .muted{font-weight:400}
.form-grid textarea{resize:vertical}
.form-grid .form-actions{margin-top:2px}
.form-grid .option{font-size:12.5px}
@media (max-width:700px){.form-grid.two{grid-template-columns:1fr}}
.secret-box{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #c4b5fd;border-radius:9px;background:var(--brand-tint)}
.secret-box code{flex:1;font-size:15px;font-weight:700;color:var(--brand-ink);letter-spacing:.03em;overflow-wrap:anywhere}

/* --- CMS Duta Solusi theme (Analisa EMR BPJS): blue brand + green accent, logo sizing. Layered over the base above,
   same overrides as the CMS dashboard's own stylesheet. --- */
.side-wordmark img{width:auto;height:56px;max-height:56px}
.side-wordmark small{padding-left:0}
:root{--brand:#0019f5;--brand-hover:#0010b8;--brand-tint:#ebefff;--brand-ink:#0b1a5c;--accent:#35ba28;--accent-hover:#2a991f;--accent-tint:#eaf8e7;--bg:#f3f5f9;--line:#dce2ec;--line2:#e8ecf3;--faint:#5f6b82;--shadow:0 1px 3px rgba(15,23,42,.07)}
.login-page{background:radial-gradient(circle at 15% 0,#e3e8ff,transparent 35%),radial-gradient(circle at 92% 100%,#e4f5e1,transparent 30%),var(--bg)}
.login-card{box-shadow:0 20px 60px rgba(15,23,42,.12)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px #d6ddff}
.primary{background:linear-gradient(145deg,#2a3dff,var(--brand-hover));box-shadow:0 3px 9px #0019f538}
.primary:hover:not(:disabled){background:linear-gradient(145deg,var(--brand),#000a85);box-shadow:0 5px 14px #0019f54d}
.button{border-color:#d3d9e6;background:linear-gradient(#fff,#f8fafc);color:#2f3a4f}
.button:hover:not(:disabled){border-color:#a9b6d3}
.nav-label{color:#6b7790}
.nav-item{color:#3b4558}
.nav-item:hover{background:#f2f5fb}
.nav-icon{color:#6b7790}
.nav-item.active{box-shadow:inset 3px 0 var(--accent)}
.nav-item.active .nav-icon{color:var(--brand)}
#avatar{background:var(--accent-tint);color:var(--accent-hover)}
.spinner{border-color:#cdd6ff;border-top-color:var(--brand)}
.table-wrap{scrollbar-color:#c3cbdc transparent}
th{background:#f6f8fb;border-right-color:#edf0f5;border-bottom-color:#d5dbe7;color:#5f6b82}
td{color:#2f3644}
tr.data-row:nth-child(2n) td{background:#fafbfd}
tr.data-row:hover td{background:#eef2ff}
tr.section td{background:#f6f8fb}
.badge,.pill{background:#eef1f6;color:#4a5568}
.score .bar{background:#e5e9f1}
ul.clean li::before{background:var(--accent)}
.vital{background:#f7f9fc}
.seg.big button.on small{color:#d6ddff}
.badge.llm{background:var(--brand-tint)}
.page img{background:#f3f5f9}
.page-modal-bar{background:#f8fafc}
.code-empty{border-color:#c9d3f5;background:#f5f7ff;color:#6b7bb3}
.code-head:hover,.condition>summary:hover,.search-item:hover{background:#f5f7ff}
.code-source,.coding-rule{background:#f4f6fd}
.combination.is-or,.derived{background:var(--brand-tint)}
.var-source>div{background:#111a33;box-shadow:0 5px 16px #0f172a33}
.var-source b{color:#aebcff}
.combination-head{border-color:#cdd6ff;background:#f5f7ff}
.drop{border-color:#c6cfe2;background:#f8fafc}
.drop.over{border-color:var(--brand)}
.drop.has-file{border-color:#9fb0ff}
pre.json{background:#0f1629;color:#e6ebff}
#toast{background:#111a33;box-shadow:0 8px 24px #0f172a40}
.search-panel{box-shadow:0 12px 32px #0f1e5a29}
.secret-box{border-color:#9fb0ff}
.page img.thumb-failed{background:repeating-linear-gradient(45deg,#f3f5f9,#f3f5f9 8px,#e8ecf3 8px,#e8ecf3 16px)}

/* --- BPJS claim pages (Dashboard klaim, Daftar klaim, Input klaim baru, Detail klaim). Same tokens, cards, pills and
   segments as above; the design mockups only gave the functions. --- */
:root{--purple:#5b2ba8;--purplebg:#f1eafe;--orange:#c2620a;--orangebg:#fff3e6}
.push{margin-left:auto}
.warn-text{color:var(--amber)}
.missing-text{color:var(--red);font-style:italic}
.link-button{border:0;background:none;padding:0;color:var(--brand);font-weight:700;cursor:pointer}
.link-button:hover{text-decoration:underline}
/* filter chips with counts */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 11px;font-weight:700;color:var(--text2);font-size:12px}
.chip b{font:600 11px var(--mono);color:var(--faint)}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.on b{color:#d6ddff}
.filter-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px;color:var(--muted)}
.list-foot{margin:8px 2px 0}
/* ICD chips: DU (primary) filled, other ICD-10 light, ICD-9-CM purple */
.icd-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;border:1px solid #cdd6ff;background:var(--brand-tint);color:var(--brand-hover);font:700 11.5px/1.5 var(--mono);white-space:nowrap}
.icd-chip.du{background:var(--brand);border-color:var(--brand);color:#fff}
.icd-chip.icd9{background:var(--purplebg);border-color:#ddd0fb;color:var(--purple)}
.icd-chip .dot-tier{width:8px;height:8px;margin:0 2px 0 0}
.chip-action,.chip-x{border:0;background:rgba(255,255,255,.22);color:inherit;border-radius:4px;font:700 10.5px var(--mono);padding:0 5px;margin-left:2px;cursor:pointer}
.icd-chip:not(.du) .chip-action,.icd-chip:not(.du) .chip-x{background:rgba(0,25,245,.08)}
.chip-x{font-size:13px;line-height:1.1}
/* claim list */
table.claims-table td{vertical-align:top;white-space:normal}
table.claims-table tr.data-row td{white-space:normal;height:auto;padding-top:9px;padding-bottom:9px}
.claims-table .cell-main{color:var(--brand-ink)}
.claims-table .codes-col{min-width:200px;max-width:280px}
.claims-table .codes-col .chips{flex-wrap:wrap}
.claims-table .modules-col{min-width:250px}
.claims-table .inacbg-col{min-width:210px}
.claims-table .flag-list{flex-wrap:wrap;max-width:200px}
.review-link{font-weight:700;color:var(--brand);text-decoration:none}
.mini-bar{display:grid;grid-template-columns:118px minmax(60px,1fr) 64px;gap:8px;align-items:center;font-size:11px;padding:1px 0}
.mini-bar>span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-bar>i{display:block;height:8px;border-radius:99px;background:#e5e9f1;overflow:hidden}
.mini-bar>i>b{display:block;height:100%;border-radius:inherit}
.mini-bar>em{font:700 11px var(--mono);font-style:normal;text-align:right;white-space:nowrap;color:var(--text2)}
.mini-bar.ok>i>b{background:var(--green)}
.mini-bar.warn>i>b{background:#e0892f}
.mini-bar.bad>i>b{background:repeating-linear-gradient(135deg,var(--red),var(--red) 4px,#ef6b5b 4px,#ef6b5b 8px)}
.mini-bar.bad>em{color:var(--red)}
.mini-bar.none>em{color:var(--faint);font-weight:400;font-family:inherit;font-size:10.5px;line-height:1.15;white-space:normal}
.mini-bar.none .spinner{width:9px;height:9px;border-width:2px;margin-right:4px;vertical-align:-1px}
.cbg-line{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.cbg-line>span:first-child{min-width:52px}
.cbg-line code{font:600 11px var(--mono);color:var(--text2)}
.delta{font:700 11px var(--mono)}
.delta.up,.cbg-delta b.up,.trend.up{color:var(--green)}
.delta.down,.cbg-delta b.down,.trend.down{color:var(--red)}
.delta.same{color:var(--muted);font-family:inherit}
/* dashboard */
.dash-filters{gap:10px}
.stats.kpis{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat.kpi{gap:4px;padding:12px 14px}
.stat.kpi b{font-size:26px}
.trend{font-size:11px;font-weight:700;color:var(--muted)}
.sev-bar{position:relative;display:flex;height:10px;border-radius:99px;overflow:hidden;background:#e5e9f1;min-width:120px}
.sev-bar i{display:block;height:100%}
.sev-bar .sev-I{background:#9fb0ff}
.sev-bar .sev-II{background:#e0892f}
.sev-bar .sev-III{background:var(--red)}
.sev-bar em{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.65}
td.sev-cell{min-width:220px;vertical-align:middle}
td.above{font-weight:800;color:var(--text)}
.flag-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.flag-card{display:grid;gap:4px;justify-items:start;text-align:left;border:2px solid transparent;background:#f6f8fb;border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit}
.flag-card.on{border-color:var(--brand);background:#fff;box-shadow:var(--shadow)}
.flag-title{display:flex;gap:7px;align-items:center}
.flag-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.flag-berkas .flag-dot{background:var(--orange)}
.flag-rekomendasi .flag-dot{background:var(--blue)}
.flag-count{font-size:22px;font-weight:800;color:var(--brand-ink)}
.flag-count small{font-size:12px;color:var(--muted);font-weight:700}
.flag-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 24px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line2)}
ol.rank{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
ol.rank li{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:center}
ol.rank li>span:first-child{overflow-wrap:anywhere}
.rank-bar{display:block;height:8px;border-radius:99px;background:#e5e9f1;overflow:hidden}
.rank-bar b{display:block;height:100%;background:var(--brand)}
/* Input klaim baru */
.code-group{display:grid;gap:7px;padding:10px 0;border-top:1px solid var(--line2)}
.code-group h4{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0!important;font-size:12.5px!important;color:var(--text)!important}
.code-input-chips{min-height:28px}
.code-add{display:flex;gap:8px}
.code-add input{flex:1;font-family:var(--mono)}
.badge.default-badge,.source-badge.source-default{background:var(--amberbg);color:var(--amber);border:1px dashed #f59e0b}
.source-badge.source-manual{background:var(--brand-tint);color:var(--brand-hover)}
.source-badge.source-sep{background:var(--greenbg);color:var(--green)}
.inline-field{display:flex;align-items:center;gap:8px;font-weight:400}
.inline-field select{min-width:320px}
details.overrides{border:1px solid var(--line2);border-radius:9px;padding:8px 12px;background:#fafbfd}
details.overrides>summary{cursor:pointer}
details.overrides[open]>summary{margin-bottom:6px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.form-grid.three{grid-template-columns:1fr 1fr}}
.new-claim .form-actions{justify-content:space-between}
/* claim detail: header documents, grid with the side page viewer */
.seg.big{flex-wrap:wrap;flex:0 1 auto}
.pair-bar{flex-wrap:wrap}
.doc-chips{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line2)}
.doc-chips>label{font-size:11px;color:var(--muted);font-weight:700}
.pill.missing-doc{border:1px dashed var(--red);background:#fff;color:var(--red);cursor:pointer;font:inherit;font-size:10.5px;font-weight:700}
#detail-body{display:grid;gap:10px}
.claim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,40%);gap:12px;align-items:start}
.claim-grid.no-viewer{grid-template-columns:minmax(0,1fr)}
#view-body{min-width:0}
.viewer{position:sticky;top:60px;padding:0;gap:0;max-height:calc(100vh - 72px);display:flex;flex-direction:column;overflow:hidden}
.viewer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line2)}
.viewer-tools{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--line2);background:#fafbfd}
.viewer-banner{padding:6px 12px;background:#fff7d6;border-bottom:1px solid #f5dc7a;color:#6b4e00;font-size:11.5px}
.viewer-body{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:0;flex:1}
.viewer-rail{position:relative;overflow-y:auto;border-right:1px solid var(--line2);padding:6px;display:grid;gap:6px;align-content:start;background:#f7f9fc;max-height:calc(100vh - 190px)}
.viewer-rail button{display:grid;gap:2px;border:2px solid transparent;border-radius:6px;background:#fff;padding:2px;cursor:pointer;font-size:9.5px;color:var(--muted);text-align:left}
.viewer-rail button.on{border-color:var(--brand);color:var(--brand)}
.viewer-rail img{width:100%;aspect-ratio:1/1.414;object-fit:cover;object-position:top;display:block;background:#f3f5f9}
.viewer-rail span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.viewer-page{overflow:auto;padding:8px;background:#e8ecf3;max-height:calc(100vh - 190px)}
.viewer-page img{display:block;margin:0 auto;max-width:none;box-shadow:0 2px 10px rgba(15,23,42,.18);background:#fff}
@media(max-width:1199px){.claim-grid{grid-template-columns:minmax(0,1fr)}.viewer{display:none}}
/* Ringkasan */
.sum-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2);align-items:start}
.sum-row:last-child{border-bottom:0}
.sum-row>label{font-weight:400;color:var(--muted);display:block}
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.module-card{align-content:start}
.module-n{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;min-width:20px;height:20px;aspect-ratio:1;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;line-height:1;margin-right:6px}
.module-score{font-size:28px;line-height:1.1}
.module-score.ok{color:var(--green)}
.module-score.warn{color:#c2620a}
.module-score.bad{color:var(--red)}
ul.bullets{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
ul.bullets li{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;padding-left:12px;position:relative;font-size:12px}
ul.bullets li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--green)}
ul.bullets li.bad::before{background:var(--red)}
ul.bullets li .dot-tier{width:8px;height:8px;margin-right:2px}
.cbg-mini{display:grid;gap:3px}
/* module views: score ring, document items, SEP table, INA-CBG */
.score-card{display:flex;gap:18px;align-items:center}
.score-card h4{margin-top:6px}
.ring{--p:0;--c:var(--muted);flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),#e5e9f1 0)}
.ring b{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;font-size:19px;color:var(--c)}
.ring.ok{--c:var(--green)}
.ring.warn{--c:#e0892f}
.ring.bad{--c:var(--red)}
.doc-item{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:start;padding:6px 0;border-bottom:1px solid var(--line2)}
.doc-item:last-child{border-bottom:0}
.doc-item>span{display:grid;gap:1px}
.doc-item i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px;background:#eef1f6;color:var(--muted)}
.doc-item i.y{background:var(--greenbg);color:var(--green)}
.doc-item i.n{background:var(--redbg);color:var(--red)}
.doc-item.missing b{color:var(--red)}
.doc-item.idle b{color:var(--text2);font-weight:400}
table.sep-table td{min-width:120px}
.inacbg-card h4{margin-top:10px}
.cbg-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 150px;gap:12px;align-items:start;padding:12px;border-radius:10px;background:#0f1629;color:#e6ebff}
.cbg-compare small{display:block;color:#9fb0ff;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.cbg-compare .mod-arrow{color:#9fb0ff;padding-top:24px}
.cbg-side{display:grid;gap:4px;align-content:start;min-width:0}
.cbg-side p{margin:0}
.cbg-side .muted,.cbg-delta .muted{color:#aab4d6}
.cbg-side .warn-text{color:#fbbf24}
.cbg-side .bad-text{color:#fca5a5}
.cbg-code{font:700 15px var(--mono);color:#fff}
.cbg-tariff{font-size:20px;color:#fff}
.cbg-delta{display:grid;gap:2px;align-content:start}
.cbg-delta b{font:700 16px var(--mono);color:#fff}
.cbg-compare .delta.up,.cbg-delta b.up{color:#86efac}
.cbg-compare .delta.down,.cbg-delta b.down{color:#fca5a5}
.sev-pill{background:#1e2a4a;color:#e6ebff;justify-self:start}
.sev-pill.sev-II{background:#7c4a10;color:#ffe7c7}
.sev-pill.sev-III{background:#7f1d1d;color:#fee2e2}
@media(max-width:900px){.cbg-compare{grid-template-columns:1fr}.cbg-compare .mod-arrow{display:none}}
table.inputs-table tr.is-default td{background:#fffbeb}
.variable q{color:var(--brand-hover);font-weight:400}
.var-value .src{margin-left:6px}
.module-card .mini-bar{grid-template-columns:minmax(0,1fr)}
.module-card .mini-bar>span,.module-card .mini-bar>em{display:none}
.module-card>h3{flex-wrap:nowrap;align-items:flex-start}
.module-card>h3>span{flex:1}
.module-card>h3>.button{flex:none}
.claims-table td.nowrap{white-space:nowrap}
.code-group h4 .muted{font-weight:400}
ul.bullets li.part::before{background:#e0892f}
ul.bullets li.none::before{background:#cbd5e1}
.module-card>h3>span{flex-wrap:nowrap;align-items:flex-start}
/* score tones (≥ 80 % green, 60–79 % amber, < 60 % red, none grey): view tabs, band filters, band cards */
.score-badge{display:inline-block;padding:0 6px;border-radius:99px;font-weight:700!important;font-size:10.5px!important}
.score-badge.tone-ok{background:var(--greenbg);color:var(--green)!important}
.score-badge.tone-warn{background:var(--amberbg);color:var(--amber)!important}
.score-badge.tone-bad{background:var(--redbg);color:var(--red)!important}
.score-badge.tone-none{background:#eef1f6;color:var(--muted)!important}
/* claim views: the three analysis modules grouped under their label */
.view-tabs{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.view-group{display:grid;gap:2px;padding:3px 4px 4px;border:1px dashed #b9c4f5;border-radius:10px;background:#f5f7ff}
.view-group-label{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-hover);padding-left:4px}
/* score-band filters and cards */
.band-filter{display:inline-flex;align-items:center;gap:6px}
.band-filter .seg button{display:inline-flex;gap:4px;align-items:baseline}
.band-filter .seg button b{font:600 10.5px var(--mono);color:var(--faint)}
.band-filter .seg button.tone-bad:not(.on){color:var(--red)}
.band-filter .seg button.tone-warn:not(.on){color:var(--amber)}
.band-filter .seg button.tone-ok:not(.on){color:var(--green)}
.band-card{cursor:default}
.band-bar{display:flex;width:100%;height:10px;border-radius:99px;overflow:hidden;background:#e5e9f1;gap:1px}
.band-bar i,.band-pick{display:block}
.band-bar .tone-ok{background:var(--green)}
.band-bar .tone-warn{background:#e0892f}
.band-bar .tone-bad{background:var(--red)}
.band-bar .tone-none{background:#e5e9f1}
.band-list{display:flex;gap:4px;flex-wrap:wrap}
.band-pick{border:1px solid var(--line);background:#fff;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700;cursor:pointer}
.band-pick b{font-family:var(--mono)}
.band-pick.tone-bad{color:var(--red)}
.band-pick.tone-warn{color:var(--amber)}
.band-pick.tone-ok{color:var(--green)}
.band-pick.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* claim list: state of a claim still running */
.run-state{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0}
/* kelengkapan berkas: trigger line, group subtitle */
.trigger{display:block}
.group-sub{font-weight:400}
/* ringkasan klinis: lists */
ul.sum-list{gap:2px}
/* checklist source popover: the quote, then the pages and their path in a smaller monospaced line */
.var-source .var-path{display:block;font:10.5px/1.45 var(--mono);opacity:.85;margin-top:4px;white-space:normal}
.var-source .src{margin-top:4px}
.var-source .src button{background:#1d2a4d;border-color:#3b4a77;color:#dbe2ff}
/* meta: processing times */
table.timing-table tr.sub td:first-child{padding-left:28px}
table.timing-table tr.total td{background:#f6f8fb}
/* new claim: dictionary names on the chips, the search suggestions */
.chip-name{font:400 11px/1.4 'Serenic Sans',Arial,sans-serif;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85;margin-left:4px}
.chip-name.unknown{opacity:.7}
.code-search{position:relative;flex:1;display:flex}
.code-search input{flex:1;font-family:var(--mono)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 28px rgba(15,23,42,.14);padding:4px;max-height:320px;overflow:auto}
.suggest button{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:6px;padding:6px 8px;cursor:pointer;align-items:baseline}
.suggest button:hover,.suggest button.on{background:var(--brand-tint)}
.suggest button b{color:var(--brand-hover)}
.suggest button small{display:block;color:var(--muted);font-size:10.5px}
.suggest p{margin:0;padding:6px 8px}
.review-list dd .chips{flex-wrap:wrap}