:root{
  color-scheme:light; --bg:#f3f6fb; --surface:#ffffff; --surface2:#f2f5fa; --ink:#0f1c2e; --muted:#5b6b83; --line:#d6e0ec;
  --th:#dbe8f7; --th-ink:#10294b; --chip:#edf2f9;
  --nav1:#ffffff; --nav2:#f5f9fd; --nav3:#eaf6f3;
  --dk:#ffffff; --dk2:#f2f5fa; --dk-line:#d6e0ec; --dk-ink:#0f1c2e; --dk-muted:#5b6b83;
  --teal:#12d6a2; --teal-ink:#08946f; --red:#e5304f; --orange:#ff7a30; --purple:#7c6cff; --amber:#f5b301; --blue:#2f6df6;
  --ok-bg:rgba(18,214,162,.15); --ok-ink:#087a5c; --warn-bg:rgba(245,179,1,.2); --warn-ink:#8f6200; --bad-bg:rgba(255,77,109,.15); --bad-ink:#c21f42; --info-bg:rgba(47,109,246,.14); --info-ink:#1f57d6;
  --shadow:0 1px 2px rgba(15,28,46,.06),0 8px 24px -12px rgba(15,28,46,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh}
h1,h2,h3,h4,p{margin:0}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.num,.big{font-family:'Inter','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
small{font-size:11px;color:var(--muted)}

/* ---------- top bar ---------- */
.topbar{background:linear-gradient(90deg,var(--nav1),var(--nav2) 62%,var(--nav3));color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,28,46,.03);padding:10px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.logo{display:flex;align-items:center;gap:9px;font:800 11px/1.05 'Inter',sans-serif;letter-spacing:.1em;color:#0b2740}
.logo svg{flex:none}
.logo span small{display:block;color:#08946f;font-weight:600;letter-spacing:.18em;font-size:9px}
.period{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);letter-spacing:.08em}
.period b{background:var(--surface);border:1px solid var(--line);padding:5px 12px;border-radius:7px;color:var(--ink);font:600 11px 'Inter',sans-serif;letter-spacing:0}
.title{font:700 15px 'Inter',sans-serif;text-align:center;white-space:nowrap}
.title span{color:#08946f;font-weight:500}
.top-r{justify-self:end;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 11px 'Inter',sans-serif}
.chip.dummy{background:rgba(245,179,1,.16);border-color:rgba(245,179,1,.55);color:#8f6200}
.btn-out{border:1px solid rgba(229,48,79,.45);background:rgba(229,48,79,.08);color:#c21f42;border-radius:999px;padding:5px 12px;font:600 11px 'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px}
.btn-out:hover{background:rgba(229,48,79,.16)}

/* ---------- navigation ---------- */
.mainnav{display:flex;justify-content:center;padding:14px 12px 4px;overflow-x:auto}
.mainnav .grp{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.mn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:8px 16px;border-radius:9px;font:600 12px 'Inter',sans-serif;color:var(--muted);white-space:nowrap}
.mn:hover{color:var(--ink);background:var(--chip)}
.mn[aria-current="page"]{background:#0b2740;color:#fff}
.subnav{width:100%;max-width:none;margin:8px 0 0;padding:0 24px;display:flex;gap:6px;overflow-x:auto}
.sn{border:1px solid transparent;background:transparent;padding:7px 18px;border-radius:9px;font:600 12px 'Inter',sans-serif;color:var(--muted);white-space:nowrap}
.sn:hover{background:var(--chip);color:var(--ink)}
.sn[aria-current="page"]{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
main { width: 100%; max-width: none; margin: 0; padding: 16px 24px 56px; }
.foot { width: 100%; max-width: none; margin: 0; padding: 0 24px 30px; color: var(--muted); font-size: 11px; }

/* ---------- generic blocks ---------- */
.sec {
  margin: 0 0 26px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.3;
}
.eyebrow i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 9px;
  position: relative;
}
.eyebrow i::after {
  content: '';
  width: 5px;
  height: 5px;
  background: #0f172a;
  border-radius: 1.5px;
}
.eyebrow small {
  font-size: 11.5px;
  font-weight: 400;
  color: #64748b;
  letter-spacing: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.eyebrow small::before {
  content: '•';
  color: #cbd5e1;
  font-weight: 700;
  margin-right: 2px;
}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.dk{box-shadow:var(--shadow);background:var(--dk);color:var(--dk-ink);border:1px solid var(--dk-line);border-radius:14px;padding:16px 18px}
.dk small,.dk .mut{color:var(--dk-muted)}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-h h3{font:700 14px 'Inter',sans-serif}
.card-h .sub{color:var(--muted);font-size:11.5px;margin-top:2px}
.dk .card-h .sub{color:var(--dk-muted)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g2b{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tag{display:inline-flex;align-items:center;font:700 10px 'Inter',sans-serif;padding:3px 9px;border-radius:6px;background:var(--info-bg);color:var(--info-ink)}
.dk .tag{background:rgba(106,88,240,.12);color:#5b4bd8}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.dk .tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.dk .tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font:600 10.5px 'Inter',sans-serif;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.info{background:var(--info-bg);color:var(--info-ink)}
.pill.mute{background:var(--chip);color:var(--muted)}
.tscroll{overflow-x:auto;border-radius:10px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;font:600 10px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}.tbl .c{text-align:center}
.dk .tbl th{color:var(--dk-muted);border-color:var(--dk-line)}
.dk .tbl td{border-color:var(--dk-line)}
.tbl.tight td{padding:7px 10px}

/* ---------- KPI utama (Notion Clean Metric Compact - Opsi 1 Refined) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.kc{box-shadow:0 1px 2px rgba(15,15,15,0.04);background:#ffffff;color:#1e293b;border:1px solid #edece9;border-radius:10px;padding:9px 12px 8px;display:flex;flex-direction:column;gap:3px;font-family:'Inter',sans-serif;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative}
.kc:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,15,15,0.06);transform:translateY(-1.5px)}
.kc-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font:600 11.5px 'Inter',sans-serif;color:#1f2937;margin-bottom:1px}
.kc-title-group{display:flex;align-items:center;gap:6px;min-width:0}
.kc-icon{width:20px;height:20px;border-radius:5px;background:#f1f5f9;color:#004f86;display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:none}
.kc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;font-weight:600;font-size:11.5px}
.kc-val-row{display:flex;align-items:baseline;gap:6px;margin-top:1px}
.kc-v{font-weight:700;font-size:20px;line-height:1;color:#0f172a;letter-spacing:-.02em}
.kc-s{color:#64748b;font:400 10.5px/1.2 'Inter',sans-serif;margin-top:2px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.kc-s b{color:#1e293b;font-weight:600}
.kc .bar{height:3.5px;border-radius:99px;background:#f1f3f5;overflow:hidden;margin-top:3px;margin-bottom:3px}
.kc .bar i{display:block;height:100%;border-radius:99px;background:#004f86}
.kc.ok .bar i{background:#10b981}
.kc.amber .bar i,.kc.warn .bar i{background:#f59e0b}
.kc.red .bar i,.kc.bad .bar i{background:#ef4444}
.kc .foot-row{display:flex;align-items:center;justify-content:space-between;padding-top:3px;border-top:1px solid #f8fafc;font:500 10px 'Inter',sans-serif;color:#94a3b8;margin-top:2px}
.kc-g{font:600 10px 'Inter',sans-serif}
.kc-g.up{color:#10b981}.kc-g.down{color:#ef4444}
.kc-def-btn{border:0;background:transparent;color:#004f86;font:600 10.5px 'Inter',sans-serif;padding:1px 3px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:2px;transition:all .15s ease}
.kc-def-btn:hover{background:#e0f2fe;color:#0369a1;text-decoration:underline;text-underline-offset:2px}
.kc.nodata .kc-v{color:#a3aec4}

/* ---------- donuts (Notion Compact Donut Style) ---------- */
.dn-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;font-family:'Inter',sans-serif}
.dn{box-shadow:0 1px 2px rgba(15,15,15,0.04);background:#ffffff;color:#1e293b;border:1px solid #edece9;border-radius:10px;padding:10px 12px;font-family:'Inter',sans-serif;transition:all 0.2s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column;gap:8px}
.dn:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,15,15,0.06);transform:translateY(-1.5px)}
.dn.hl{border-color:#2563eb}
.dn-h{display:flex;align-items:center;justify-content:flex-start;padding-bottom:6px;border-bottom:1px solid #f1f5f9;margin-bottom:0}
.dn-h h4{font:600 11.5px/1.3 'Inter',sans-serif;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.dn-b{display:flex;flex-direction:column;align-items:center;gap:8px}
.dn-grid .dn{padding:10px 12px}
.dn-grid .dn-h{gap:0}
.dn-grid .dn-b{flex-direction:column;align-items:center;gap:8px}
.dn-grid .donut{align-self:center}
.dn-grid .dn-l{width:100%;flex:none}
.donut{flex:none}
.dn-l{width:100%;display:flex;flex-direction:column;gap:3px}
.dn-r{display:flex;align-items:center;justify-content:space-between;padding:2px 0;border-bottom:1px dashed #f8fafc;font-size:10.5px;font-family:'Inter',sans-serif}
.dn-r:last-child{border-bottom:0;padding-top:3px;margin-top:1px;border-top:1px solid #f1f5f9}
.dn-r span{color:#64748b;font-weight:400}
.dn-r b{font:600 10.5px 'Inter',sans-serif;color:#1e293b}
.dn-t{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px;color:#64748b;font-size:10px;font-family:'Inter',sans-serif}
.dn-t b{font:700 13px 'Inter',sans-serif;color:#1e293b}
.dn-t b.o{color:#c21f42}

/* ---------- MOM: Notion Database Property Table (Top 3 Masalah Prioritas) ---------- */
.notion-wrapper{background:#ffffff;border:1px solid #edece9;border-radius:12px;box-shadow:0 1px 3px rgba(15,15,15,0.04);font-family:'Inter',sans-serif;overflow:hidden}
.notion-header-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f1f5f9;background:#ffffff;gap:12px;flex-wrap:wrap;font-family:'Inter',sans-serif}
.notion-header-left{display:flex;align-items:center;gap:10px}
.notion-header-icon{width:26px;height:26px;border-radius:6px;background:#fee2e2;color:#dc2626;display:grid;place-items:center;font-size:14px;flex:none}
.notion-header-title{font:700 13px 'Inter',sans-serif;color:#0f172a}
.notion-header-subtitle{font:400 11.5px 'Inter',sans-serif;color:#64748b;margin-top:1px}
.notion-filter-select{background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;padding:4px 10px;font:500 11.5px 'Inter',sans-serif;color:#33435c;outline:none;cursor:pointer;transition:all 0.15s ease}
.notion-filter-select:hover{border-color:#cbd5e1;background:#ffffff}
.notion-footer-note{padding:8px 14px;border-top:1px solid #f1f5f9;background:#fafaf9;display:flex;align-items:center;justify-content:space-between;font:400 11px 'Inter',sans-serif;color:#64748b;flex-wrap:wrap;gap:8px}
.notion-footer-note .legend-items{display:flex;align-items:center;gap:12px}

.table-opt1{width:100%;border-collapse:separate;border-spacing:0;font-family:'Inter',sans-serif;font-size:11.5px}
.table-opt1 th{background:#f8fafc;color:#475569;font:600 11px 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.03em;padding:8px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;text-align:left}
.table-opt1 td{padding:9px 12px;border-bottom:1px solid #f1f5f9;vertical-align:top;color:#334155;line-height:1.45;font-family:'Inter',sans-serif}
.table-opt1 tr:last-child td{border-bottom:0}
.table-opt1 tr:hover td{background:#fbfcfd}
.table-opt1 .pic-cell{white-space:nowrap}
.table-opt1 .pic-name{font:700 11.5px 'Inter',sans-serif;color:#0f172a;display:flex;align-items:center;gap:5px}
.table-opt1 .pic-role{font:400 10px 'Inter',sans-serif;color:#64748b;display:block;margin-top:1px}
.table-opt1 .issue-text{font:500 11.5px/1.45 'Inter',sans-serif;color:#1e293b;max-width:320px}
.table-opt1 .action-text{font:400 11.5px/1.45 'Inter',sans-serif;color:#475569;max-width:340px}
.table-opt1 .deadline-cell{white-space:nowrap}
.table-opt1 .deadline-date{font:600 11.5px 'Inter',sans-serif;color:#1e293b}

.ai-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font:600 10.5px 'Inter',sans-serif;white-space:nowrap}
.ai-pill.bad{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.ai-pill.warn{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.ai-pill.ok{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}

.status-lock-pill{display:inline-flex;align-items:center;gap:4px;font:600 10px 'Inter',sans-serif;padding:1.5px 6px;border-radius:4px;white-space:nowrap}
.status-lock-pill.past{background:#fee2e2;color:#dc2626}
.status-lock-pill.warn{background:#fef3c7;color:#d97706}
.status-lock-pill.done{background:#dcfce7;color:#16a34a}

/* Legacy fallback classes preserved for other views */
.sel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:500 12px 'Inter',sans-serif;min-width:150px}
.mom td{font:400 12px 'Inter',sans-serif;line-height:1.45}
.mom td:first-child b{font:700 12px 'Inter',sans-serif}
.mom td small{display:block;font:400 10.5px 'Inter',sans-serif}
.mom .dl{white-space:nowrap;font:600 11.5px 'Inter',sans-serif}
.mom table{min-width:1040px;font-family:'Inter',sans-serif}
.ai{font:700 10.5px 'Inter',sans-serif;padding:4px 9px;border-radius:7px;white-space:nowrap;display:inline-block}
.ai.ok{background:var(--ok-bg);color:var(--ok-ink)}.ai.warn{background:var(--warn-bg);color:var(--warn-ink)}.ai.bad{background:var(--bad-bg);color:var(--bad-ink)}

/* ---------- realisasi vs target ---------- */
.rv .row-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rv .row-t h3{font:700 14px 'Inter',sans-serif}
.rv .prog{display:flex;justify-content:space-between;font-size:11px;color:var(--dk-muted);margin-bottom:5px}
.rv .prog b{font:700 11px 'Inter',sans-serif;color:var(--dk-ink)}
.rv .bar{height:9px;margin:0 0 12px}
.rv .g-up{color:#087a5c}.rv .g-dn{color:#c21f42}

/* ---------- scorecards ---------- */
.score-badge{font:700 12px 'Inter',sans-serif;padding:6px 12px;border-radius:9px;background:var(--warn-bg);color:var(--warn-ink);white-space:nowrap}
.score-badge.ok{background:var(--ok-bg);color:var(--ok-ink)}
.radar{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);justify-content:center;margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%}
.legend i.ln{width:18px;height:0;border-top:2px dashed;border-radius:0;background:none}
.dk .legend{color:var(--dk-muted)}
.hero-note{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.bars-wrap{overflow-x:auto}
.bars-wrap svg{display:block}

/* ---------- SP3K matrix ---------- */
.mx th{text-align:center}
.mx th:first-child,.mx td:first-child{text-align:left}
.mx td{text-align:center;padding:8px 6px}
.mx .cell{display:inline-flex;min-width:38px;justify-content:center;padding:4px 8px;border-radius:7px;font:700 11px 'Inter',sans-serif;background:var(--chip);color:#5b6b83}
.mx .cell.c0{background:rgba(255,77,109,.14);color:#c21f42}.mx .cell.c1{background:rgba(255,122,48,.16);color:#b8420b}.mx .cell.c2{background:rgba(255,160,48,.16);color:#a85a05}
.mx .cell.c3{background:rgba(245,179,1,.2);color:#8f6200}.mx .cell.c4{background:rgba(47,109,246,.14);color:#1f57d6}.mx .cell.c5{background:rgba(18,214,162,.16);color:#087a5c}
.mx .cell.hot{background:rgba(255,77,109,.16);color:#c21f42;box-shadow:inset 0 0 0 1px rgba(255,77,109,.55)}
.mx .cell.z{background:transparent;color:#a3aec4}
.mx tfoot td{border-top:1px solid var(--dk-line);font-weight:700;color:var(--teal-ink)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px}
.note{font-size:11px;color:var(--dk-muted);margin-top:10px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.tile{background:var(--dk2);border:1px solid var(--dk-line);border-radius:10px;padding:10px 8px;text-align:center}
.tile b{display:block;font:800 26px 'Inter',sans-serif}
.tile span{font-size:11px;color:var(--dk-muted)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--dk-muted);font-size:11px}
.pgbtn{border:1px solid var(--dk-line);background:var(--dk2);color:var(--dk-ink);padding:6px 14px;border-radius:8px;font:600 11px 'Inter',sans-serif}
.pgbtn:disabled{opacity:.4;cursor:not-allowed}
.pgbtn.on{background:#0b2740;color:#fff;border-color:#0b2740}

/* ---------- KPI tables (Notion Dense Spreadsheet View - Opsi 1) ---------- */
.kt {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  min-width: 1340px;
  width: 100%;
}
.kt th,
.kt td {
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 4.5px 7px;
  background: #ffffff;
  vertical-align: middle;
  white-space: nowrap;
}
.kt thead th {
  background: #f8fafc;
  color: #475569;
  font: 700 10px 'Inter', sans-serif;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}
.kt thead tr:first-child th {
  border-top: 1px solid #e2e8f0;
}
.kt td {
  text-align: center;
}
.kt td.l {
  text-align: left;
  white-space: normal;
}
.kt tr:hover td {
  background: #fafaf9;
}
.kt .grp {
  border-left: 2px solid #e2e8f0;
}
.kt td.g {
  border-left: 2px solid #e2e8f0;
}
.kt th.grp-m,
.kt td.grp-m {
  background: #fbfcfe;
  border-left: 2px solid #cbd5e1;
}
.kt tr:hover td.grp-m {
  background: #f4f7fb;
}
.kt tr.sum td {
  background: #f8fafc;
  font-weight: 700;
  border-top: 1px solid #cbd5e1;
}
.kt .s {
  position: sticky;
  z-index: 2;
  background: #ffffff;
}
.kt thead .s {
  z-index: 4;
  background: #f8fafc;
}
.kt tr:hover td.s {
  background: #fafaf9;
}
.kt tr.sum td.s {
  background: #f8fafc;
}
.kt td.nm {
  text-align: left;
  white-space: normal;
  vertical-align: top;
  border-right: 2px solid #e2e8f0;
}
.kt td.nm b {
  display: block;
  font: 700 11.5px 'Inter', sans-serif;
  color: #0f172a;
}
.kt td.nm small {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}
.kt td.ind {
  text-align: left;
  min-width: 250px;
  white-space: normal;
  border-right: 2px solid #e2e8f0;
}
.kt td.ind b {
  font-size: 11px;
  color: #0f172a;
}
.kt td.ind small {
  display: block;
  font-size: 9.5px;
  color: #64748b;
  line-height: 1.25;
  margin-top: 1px;
}
.kt .pill {
  font-size: 9.5px;
  padding: 1.5px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.kt .bobot0 {
  display: inline-block;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #64748b;
  margin-left: 3px;
}
.wk-note {
  font-weight: 500;
  font-size: 9.5px;
  display: block;
  opacity: .75;
}

/* Notion UI Card & Chip Classes for KPI Head (Opsi 1) */
.notion-table-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.notion-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 10px;
}
.notion-card-h h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.notion-card-h p {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}
.compact-tscroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #edece9;
  background: #ffffff;
}
.nt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px 5.5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.nt-chip.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.nt-chip.warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.nt-chip.bad { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.nt-chip.mute { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }
.nt-tag-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.nt-tag-score.ok { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.nt-tag-score.warn { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.nt-tag-score.mute { background: #f1f5f9; color: #94a3b8; border: 1px dashed #cbd5e1; }
.nt-tag-score.info { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

/* Notion Feedback Table (Opsi 2 Matrix + Two-Tone Action Highlights) */
.opt2-fb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  min-width: 1040px;
}
.opt2-fb-table th,
.opt2-fb-table td {
  padding: 6px 9px;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.opt2-fb-table thead th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  font-size: 10px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}
.opt2-fb-table tbody tr:hover td {
  background: #fafaf9;
}
.opt2-bubble-fb {
  background: #f8fafc;
  border-left: 2.5px solid #94a3b8;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  line-height: 1.4;
  color: #0f172a;
}
.opt2-bubble-sol {
  background: #f0fdf4;
  border-left: 2.5px solid #16a34a;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  line-height: 1.4;
  color: #14532d;
}
.nt-badge-task {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.nt-badge-task.done { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.nt-badge-task.progress { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.nt-badge-task.pending { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

.nt-wk-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.inp{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:12px;min-width:210px}
.fb td{font-size:11.5px;vertical-align:top}
.fb .empty{color:var(--muted);font-style:italic}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:11px}
.chk.done{color:var(--ok-ink)}
.two{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.alist{display:flex;flex-direction:column;gap:8px}
.arow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);font-size:12px}
.arow svg{flex:none;margin-top:2px}
.arow .pill{margin-left:auto;flex:none}
.arow.gov{align-items:center}
.m4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.m4 .box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface2)}
.m4 h4{font:700 11.5px 'Inter',sans-serif;margin-bottom:6px;display:flex;gap:6px;align-items:center}
.m4 ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:11.5px}
.m4 li{display:flex;gap:7px}
.m4 li::before{content:"";flex:none;width:10px;height:10px;margin-top:3px;border:1.5px solid var(--muted);border-radius:50%}
.h-machine{color:#1f57d6}.h-money{color:#a8620b}.h-man{color:#7a3fd1}.h-mat{color:#c21f42}

/* ---------- ranking / leaderboard ---------- */
.rk-tabs{display:inline-flex;gap:4px;padding:3px;border-radius:9px;background:var(--chip)}
.rk-tabs button{border:0;background:transparent;padding:5px 14px;border-radius:7px;font:600 11px 'Inter',sans-serif;color:var(--muted)}
.rk-tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.rkn{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px 'Inter',sans-serif;background:var(--chip);color:var(--muted)}
.rkn.r1{background:#fdeaa8;color:#7a5a00}.rkn.r2{background:#dfe4ee;color:#4a5568}.rkn.r3{background:#f5d3b3;color:#8a4a12}
.pbar{height:7px;border-radius:99px;background:var(--chip);overflow:hidden;min-width:120px}
.pbar i{display:block;height:100%;border-radius:99px;background:#16a34a}
.pbar i.w{background:#f59e0b}.pbar i.b{background:#ef4444}
.lb{display:flex;flex-direction:column}
.lb-r{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.lb-r:last-child{border-bottom:0}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 10.5px 'Inter',sans-serif;background:var(--info-bg);color:var(--info-ink);flex:none}
.lb-n{flex:1;min-width:0}
.lb-n b{display:block;font:600 12.5px 'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-s{font:700 14px 'Inter',sans-serif;color:var(--blue)}
.lb-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:700 12px 'Inter',sans-serif}

/* ---------- fungsi jabatan ---------- */
.eu{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.eu-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.eu-h b{display:block;font:700 13px 'Inter',sans-serif}
.eu-sc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.eu-sc div{font-size:10.5px;color:var(--muted)}
.eu-sc strong{display:block;font:800 22px 'Inter',sans-serif}
.eu-i{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:12px}
.eu-i span:last-child{font:600 11px 'Inter',sans-serif;white-space:nowrap}
.c-ok{color:#0f9d58}.c-wr{color:#d98a00}.c-bd{color:#e03252}
.sdm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.sdm .b{background:var(--surface);border:1px solid var(--line);border-top-width:3px;border-radius:12px;padding:14px 16px}
.sdm .b.t1{border-top-color:#f5b301}.sdm .b.t2{border-top-color:#2f6df6}.sdm .b.t3{border-top-color:#ef4444}
.sdm h4{font:700 12.5px 'Inter',sans-serif;margin-bottom:10px}
.sdm .st{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.sdm .st div{background:var(--surface2);border-radius:9px;padding:9px 6px;text-align:center}
.sdm .st b{display:block;font:800 20px 'Inter',sans-serif}
.sdm .st span{font-size:10.5px;color:var(--muted)}
.empty-s{display:grid;place-items:center;text-align:center;padding:64px 20px;gap:10px}
.empty-s .ic{width:54px;height:54px;border-radius:50%;background:var(--chip);display:grid;place-items:center;color:var(--muted)}
.empty-s h3{font:700 16px 'Inter',sans-serif}
.empty-s p{color:var(--muted);max-width:420px}

/* ---------- overlay ---------- */
#tip{position:fixed;z-index:60;pointer-events:none;background:#0b1424;color:#fff;border:1px solid #2a3a5e;border-radius:8px;padding:6px 10px;font-size:11.5px;opacity:0;transition:opacity .12s;max-width:260px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#0b2740;color:#fff;padding:10px 16px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:all .22s;z-index:70;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#modal{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;place-items:center;z-index:999;padding:18px;animation:fadeIn .2s ease}
#modal.on{display:grid}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlide{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

.notion-modal-box{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;width:min(600px,100%);max-height:88vh;box-shadow:0 20px 45px -10px rgba(15,23,42,.25),0 0 0 1px rgba(0,0,0,.04);display:flex;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;animation:modalSlide .22s cubic-bezier(.16,1,.3,1)}
.notion-modal-header{padding:16px 20px 14px;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:#fbfbfa}
.notion-modal-tag{display:inline-flex;align-items:center;gap:5px;font:600 11px 'Inter',sans-serif;color:#004f86;background:#e0f2fe;padding:2px 8px;border-radius:5px;margin-bottom:6px}
.notion-modal-title{font:700 15px/1.4 'Inter',sans-serif;color:#0f172a;letter-spacing:-.015em;margin:0}
.notion-modal-close{background:transparent;border:1px solid #e2e8f0;color:#64748b;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;cursor:pointer;transition:all .15s ease;flex:none}
.notion-modal-close:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.notion-modal-body{padding:16px 20px;overflow-y:auto;font-family:'Inter',sans-serif}
.notion-prop-table{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif}
.notion-prop-table tr{border-bottom:1px solid #f1f5f9}
.notion-prop-table tr:last-child{border-bottom:0}
.notion-prop-key{width:140px;padding:10px 12px 10px 0;vertical-align:top;font:600 11.5px 'Inter',sans-serif;color:#64748b;display:flex;align-items:center;gap:6px}
.notion-prop-key i{color:#94a3b8;font-size:14px}
.notion-prop-val{padding:10px 0;vertical-align:top;font:400 12.5px/1.55 'Inter',sans-serif;color:#1e293b}
.notion-prop-badge{display:inline-block;background:#f1f5f9;border:1px solid #e2e8f0;padding:3px 8px;border-radius:6px;font:600 11.5px 'Inter',sans-serif;color:#334155}
.notion-prop-formula{background:#f8fafc;border-left:3px solid #004f86;padding:6px 10px;border-radius:0 6px 6px 0;font:500 11.5px/1.5 'Inter',monospace;color:#0369a1}
.notion-modal-footer{padding:12px 20px;background:#f8fafc;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end}
.notion-modal-ok-btn{background:#004f86;border:0;color:#ffffff;padding:6px 16px;border-radius:7px;font:600 12px 'Inter',sans-serif;cursor:pointer;transition:background .15s ease}
.notion-modal-ok-btn:hover{background:#003861}

/* Legacy fallback box */
.mbox{box-shadow:0 20px 50px -12px rgba(15,28,46,.35);background:#ffffff;color:#1e293b;border:1px solid #e2e8f0;border-radius:14px;padding:20px 22px;width:min(560px,100%);max-height:90vh;overflow:auto;font-family:'Inter',sans-serif}
.mbox h3{font:700 15px 'Inter',sans-serif}
.close{float:right;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;border-radius:7px;padding:4px 10px;font:600 11px 'Inter',sans-serif;cursor:pointer}

@media (max-width:1180px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn-grid,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2b,.two{grid-template-columns:1fr}
  .sdm{grid-template-columns:1fr}
  .kt .s{position:static}
}
@media (max-width:820px){
  .topbar{grid-template-columns:1fr;justify-items:center;padding:12px}
  .top-r{justify-self:center;justify-content:center}
  .g2{grid-template-columns:1fr}
  main{padding:12px 12px 44px}
  .subnav{padding:0 12px}
}
@media (max-width:560px){
  .kpi-grid,.dn-grid,.g3,.g4{grid-template-columns:1fr}
  .m4{grid-template-columns:1fr}
  .title{white-space:normal}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- IVR: filter bar (Notion UI Style Opsi 1: Inline Pills Compact) ---------- */
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid #e9ecef;border-radius:10px;padding:6px 12px;margin:0 0 20px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.fbar-prefix{display:inline-flex;align-items:center;gap:5px;font:600 11.5px 'Inter',sans-serif;color:#94a3b8;margin-right:2px}
.fbar-prefix i{font-size:13px}
.fbar label{display:inline-flex;flex-direction:row;align-items:center;background:#f1f3f5;border:1px solid #e5e7eb;border-radius:6px;padding:2px 8px 2px 10px;font:500 11.5px 'Inter',sans-serif;color:#374151;transition:all .15s ease}
.fbar label:hover{background:#e9ecef;border-color:#d1d5db}
.fbar label span.flbl{font-size:11px;color:#6b7280;margin-right:6px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.fbar .sel{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;font:600 12px 'Inter',sans-serif;color:#111827;padding:3px 20px 3px 2px;cursor:pointer;min-width:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 256 256' fill='%236b7280'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.fbar .inp{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;font:600 12px 'Inter',sans-serif;color:#111827;padding:2px 4px;cursor:pointer;min-width:0}
.fend{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fend small{max-width:380px;font-size:11px;color:#94a3b8}
.info-tip-btn{display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;cursor:help;padding:2px;border-radius:50%;transition:all .15s ease}
.info-tip-btn:hover{color:#004f86;background:#e6f0f8}
.fbar .pgbtn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:6px;border:0;background:transparent;color:#94a3b8;font:500 11px 'Inter',sans-serif;cursor:pointer;transition:all .15s ease}
.fbar .pgbtn:hover{background:#fee2e2;color:#dc2626}

/* ---------- IVR: KPI cards ---------- */
.kc.amber .bar i{background:var(--amber)}.kc.red .bar i{background:var(--red)}
.kc .kc-s b{color:var(--dk-ink);font-weight:700}
.kc-g{font:600 11px 'Inter',sans-serif;color:var(--dk-muted)}
.kc-g.up{color:#087a5c}.kc-g.down{color:#c21f42}
.kc .foot-row{justify-content:space-between;gap:8px;margin-top:8px}
.kc .bar{margin-top:auto}
.kc.nodata .kc-v{color:#a3aec4}

/* ---------- IVR: rasio cards (Notion Compact Donut) ---------- */
.dwrap{position:relative;align-self:center;width:76px;height:76px;flex:none}
.dwrap .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.dwrap .dc b{font:700 13px/1 'Inter',sans-serif;letter-spacing:-0.02em}
.dwrap .dc small{font:500 8.5px 'Inter',sans-serif;color:#64748b;margin-top:1px}
.rs .dn-r{padding:2px 0}
.rs .dn-r b{font-size:10.5px}
.rs .dn-r span{color:#64748b}

/* ---------- IVR: Management Alert (Notion Split Summary Matrix - Opsi 3) ---------- */
.alert-notion-card{background:#ffffff;border:1px solid #edece9;border-radius:12px;box-shadow:0 1px 3px rgba(15,15,15,0.04);font-family:'Inter',sans-serif;overflow:hidden}
.alert-v3-header-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 14px;background:#fafaf9;border-bottom:1px solid #edece9;font-family:'Inter',sans-serif}
@media (max-width:768px){.alert-v3-header-stats{grid-template-columns:1fr}}
.stat-mini-pill{background:#ffffff;border:1px solid #e2e8f0;border-radius:6px;padding:6px 10px;display:flex;align-items:center;gap:10px}
.stat-mini-icon{width:28px;height:28px;border-radius:6px;background:#fee2e2;color:#dc2626;display:grid;place-items:center;font-size:14px;flex:none}
.stat-mini-meta small{font-size:9.5px;text-transform:uppercase;color:#64748b;font-weight:600;display:block}
.stat-mini-meta b{font:700 13px 'Inter',sans-serif;color:#0f172a}

.alert-top-toolbar{padding:10px 14px;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:8px;background:#ffffff;font-family:'Inter',sans-serif}
.alert-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.notion-segmented-tabs{display:inline-flex;align-items:center;gap:4px;background:#f1f5f9;padding:3px;border-radius:8px}
.notion-seg-btn{border:0;background:transparent;padding:4px 10px;border-radius:6px;font:600 11.5px 'Inter',sans-serif;color:#64748b;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all 0.15s ease}
.notion-seg-btn:hover{color:#0f172a}
.notion-seg-btn.active{background:#ffffff;color:#0f172a;box-shadow:0 1px 3px rgba(15,15,15,0.06)}
.notion-seg-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:99px;line-height:1.2}
.notion-seg-badge.has-count{background:#fee2e2;color:#dc2626}
.notion-seg-badge.zero-count{background:#e2e8f0;color:#94a3b8}
.alert-sub-info{font:400 11.5px 'Inter',sans-serif;color:#64748b;display:flex;align-items:center;gap:6px}
.alert-sub-info i{color:#dc2626;font-size:13px}

.alert-tbl-v1{width:100%;border-collapse:separate;border-spacing:0;font-family:'Inter',sans-serif;font-size:11.5px}
.alert-tbl-v1 th{background:#f8fafc;color:#475569;font:600 11px 'Inter',sans-serif;text-transform:uppercase;letter-spacing:0.03em;padding:8px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;text-align:left}
.alert-tbl-v1 th.r{text-align:right}
.alert-tbl-v1 th.c{text-align:center}
.alert-tbl-v1 td{padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#334155;line-height:1.4;font-family:'Inter',sans-serif}
.alert-tbl-v1 tr:last-child td{border-bottom:0}
.alert-tbl-v1 tr:hover td{background:#fbfcfd}
.alert-tbl-v1 .entity-title{font-weight:700;color:#0f172a}
.alert-tbl-v1 .entity-sub{font-size:10px;color:#64748b;display:block}
.alert-tbl-v1 .val-num{font-family:'Inter',sans-serif;font-weight:600;color:#0f172a;text-align:right;white-space:nowrap}

.pill-nt{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font:600 10.5px 'Inter',sans-serif;white-space:nowrap}
.pill-nt.bad{background:#fee2e2;color:#b91c1c}
.pill-nt.warn{background:#fef3c7;color:#b45309}
.pill-nt.ok{background:#dcfce7;color:#15803d}
.pill-nt.info{background:#e0f2fe;color:#0369a1}
.pill-nt.mute{background:#f1f5f9;color:#64748b}

.dev-text{font-weight:600;font-family:'Inter',sans-serif}
.dev-text.late{color:#dc2626}
.dev-text.ontime{color:#16a34a}

/* Management Alert Pagination (10 data per halaman) */
.alert-pagination-bar{padding:10px 14px;border-top:1px solid #f1f5f9;background:#ffffff;display:flex;align-items:center;justify-content:space-between;font-family:'Inter',sans-serif;font-size:11.5px;color:#64748b;flex-wrap:wrap;gap:8px}
.alert-pagination-info{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.alert-pagination-info b{color:#0f172a}
.alert-pagination-controls{display:inline-flex;align-items:center;gap:4px}
.alert-pg-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid #e2e8f0;background:#ffffff;color:#475569;font:500 11px 'Inter',sans-serif;border-radius:6px;cursor:pointer;transition:all 0.15s ease}
.alert-pg-btn:hover:not(:disabled){background:#f8fafc;color:#0f172a;border-color:#cbd5e1}
.alert-pg-btn:disabled{opacity:0.45;cursor:not-allowed}
.alert-pg-num{min-width:26px;height:26px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;background:#ffffff;color:#475569;font:600 11px 'Inter',sans-serif;border-radius:6px;cursor:pointer;transition:all 0.15s ease}
.alert-pg-num:hover:not(.active){background:#f8fafc;color:#0f172a}
.alert-pg-num.active{background:#004f86;border-color:#004f86;color:#ffffff;cursor:default}
.alert-pg-ellipsis{padding:0 4px;color:#94a3b8;font-size:11px}

.alert-notion-footer{padding:8px 14px;border-top:1px solid #f1f5f9;background:#fafaf9;display:flex;align-items:center;justify-content:space-between;font:400 11px 'Inter',sans-serif;color:#64748b}

/* Fallback tabs */
.al-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-family:'Inter',sans-serif}
.al-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 12px;font:600 11.5px 'Inter',sans-serif;color:var(--muted);display:inline-flex;gap:7px;align-items:center}
.al-tabs button:hover{color:var(--ink);background:var(--chip)}
.al-tabs button[aria-pressed="true"]{background:#0b2740;border-color:#0b2740;color:#fff}
.al-tabs .n{min-width:20px;height:18px;padding:0 6px;border-radius:99px;background:var(--bad-bg);color:var(--bad-ink);font:600 10.5px 'Inter',sans-serif;display:inline-grid;place-items:center}
.al-tabs .n.z{background:var(--chip);color:var(--muted)}
.al-tabs button[aria-pressed="true"] .n{background:#e5304f;color:#fff}
.al-tabs button[aria-pressed="true"] .n.z{background:rgba(255,255,255,.2)}

/* ---------- IVR: PSU matrix & steppers ---------- */
.psu td{text-align:center;vertical-align:middle}
.psu th{text-align:center}
.psu td.l,.psu th.l{text-align:left}
.stc{display:inline-flex;flex-direction:column;align-items:center;min-width:84px;padding:5px 8px;border-radius:8px;font:700 11px 'Inter',sans-serif;line-height:1.3}
.stc small{font:500 10px 'Inter',sans-serif;color:inherit;opacity:.85}
.stc.ok{background:var(--ok-bg);color:var(--ok-ink)}
.stc.late{background:var(--bad-bg);color:var(--bad-ink)}
.stc.run{background:var(--warn-bg);color:var(--warn-ink)}
.stc.runl{background:var(--bad-bg);color:var(--bad-ink);box-shadow:inset 0 0 0 1px rgba(229,48,79,.55)}
.stc.na{background:var(--chip);color:#8a97ab}
.steps{display:flex;gap:3px;min-width:200px}
.steps i{flex:1;height:8px;border-radius:99px;background:var(--chip)}
.steps i.d{background:var(--teal)}.steps i.c{background:var(--amber)}.steps i.x{background:var(--red)}
.stepl{font-size:11px;color:var(--muted);margin-top:4px}

/* ---------- IVR: horizontal bars / segments ---------- */
.hbar{display:flex;flex-direction:column;gap:13px}
.hbar .row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 64px;gap:12px;align-items:center;font-size:12px}
.hbar .row b{text-align:right;font:700 12px 'Inter',sans-serif}
.trk{height:10px;border-radius:99px;background:var(--chip);overflow:hidden}
.trk i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.seg{display:flex;height:12px;gap:3px;margin:6px 0 12px}
.seg i{display:block;height:100%;border-radius:99px;min-width:6px}
.lg{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lg i{width:9px;height:9px;border-radius:50%;flex:none}
.lg b{color:var(--ink);font:700 12px 'Inter',sans-serif}

/* ---------- IVR: modal definisi ---------- */
.def dl{display:grid;grid-template-columns:118px 1fr;gap:9px 14px;margin:14px 0 0;font-size:12px}
.def dt{font:600 11px 'Inter',sans-serif;color:var(--muted)}
.def dd{margin:0;white-space:pre-line}

/* ---------- IVR: KPI table ---------- */
.kt td.sc{font-weight:700}
.kt td.wz{color:var(--muted)}
.kt th.run{background:#fdf3d6;color:#8f6200}
.bobot0{display:block;font-size:10px;color:var(--muted);font-weight:500}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mini div{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mini b{display:block;font:800 20px 'Inter',sans-serif}
.mini span{font-size:11px;color:var(--muted)}
.chg{font:700 11px 'Inter',sans-serif;white-space:nowrap}
.chg.up{color:#087a5c}.chg.down{color:#c21f42}.chg.eq{color:var(--muted)}
.lock{display:block;margin-top:5px}

@media (max-width:1180px){ .mini{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .fend{margin-left:0} .hbar .row{grid-template-columns:110px minmax(0,1fr) 56px} .def dl{grid-template-columns:1fr} }
@media (max-width:560px){ .fbar .sel,.fbar .inp{min-width:0;width:100%} .fbar label{flex:1 1 140px} .mini{grid-template-columns:1fr} }
.g2b.eug{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}@media (max-width:1180px){.g2b.eug{grid-template-columns:1fr}}
.eu-sc.c3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:560px){.eu-sc.c3{grid-template-columns:1fr}}
.pill.crit{background:#7f1d2d;color:#fff}
.t3l{display:grid;gap:10px}.t3{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.t3 b{display:block;font-size:13px}.t3 small{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 6px}.t3 p{margin:2px 0;font-size:12px;line-height:1.45}.t3 p span{font-weight:600;color:var(--muted)}.t3 em{color:var(--muted);font-style:normal}
a.mn, a.sn, a.btn-out { text-decoration: none; }


/* ==========================================================================
   SAMPLE STYLES: DUAL-TIER HEADER & NAVIGATION RUMAH NINGRAT
   Diadaptasi langsung dari "Live Case Study: Rumah Ningrat" (Panduan Standar)
   ========================================================================== */

:root {
  --rn-primary: #004f86;      /* Deep Brand Navy dari Case Study */
  --rn-dark: #003860;         /* Capsule dark blue untuk dropdown */
  --rn-dark-hover: #002f52;   /* Hover capsule */
  --rn-accent: #0077c8;       /* Highlight link / accent */
  --rn-sky: #e0f2fe;          /* Sky 100 untuk active icon background */
  --rn-sky-text: #0284c7;     /* Sky text */
}

/* ---------------- TIER 1: CORPORATE NAVY HEADER ---------------- */
.rn-header-tier1 {
  background-color: var(--rn-primary);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.rn-tier1-container {
  width: 100%;
  margin: 0;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rn-brand-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rn-menu-btn {
  background: transparent;
  border: 0;
  color: #ffffff;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.rn-menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #bae6fd;
}

.rn-logo-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
}

.rn-logo-badge .rn-icon-house {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.rn-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.rn-logo-text .rn-name-1 {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #ffffff;
}

.rn-logo-text .rn-name-2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #bae6fd;
}

.rn-title-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 4px;
}

.rn-dashboard-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rn-dashboard-title span {
  color: #ffffff;
  font-weight: 500;
  opacity: 0.95;
}

/* Controls di sebelah kanan Tier 1 */
.rn-tier1-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rn-filter-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.rn-filter-pill-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #bae6fd;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.rn-filter-pill-select {
  background-color: var(--rn-dark);
  border: 1px solid rgba(186, 230, 253, 0.28);
  color: #ffffff;
  height: 32px;
  line-height: 30px;
  padding: 0 32px 0 14px;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bae6fd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 11px;
  transition: all 0.15s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.rn-filter-pill-select:hover {
  background-color: var(--rn-dark-hover);
  border-color: rgba(186, 230, 253, 0.5);
}

.rn-chip-dummy {
  background: rgba(245, 179, 1, 0.2);
  border: 1px solid rgba(245, 179, 1, 0.6);
  color: #fef08a;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  box-sizing: border-box;
}

.rn-btn-logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  transition: all 0.15s ease;
  user-select: none;
}
.rn-btn-logout i {
  font-size: 14px;
  color: #bae6fd;
  transition: color 0.15s;
}
.rn-btn-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.rn-btn-logout:hover i {
  color: #ffffff;
}

/* ---------------- TIER 2: WHITE PRIMARY NAVIGATION ---------------- */
.rn-nav-tier2 {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 52px;
  z-index: 45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.rn-tier2-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
}

.rn-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s ease-in-out;
}

.rn-tab-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 15px;
  transition: all 0.15s ease-in-out;
}

.rn-tab-link:hover {
  color: #0f172a;
}
.rn-tab-link:hover .rn-tab-icon {
  background-color: #e2e8f0;
  color: #334155;
}

/* State: Active Primary Tab */
.rn-tab-link.active {
  color: var(--rn-primary);
  border-bottom-color: var(--rn-primary);
  font-weight: 700;
}
.rn-tab-link.active .rn-tab-icon {
  background-color: #e0f2fe;
  color: var(--rn-primary);
}

/* ---------------- TIER 2.5: CONTEXTUAL SUBNAV PILLS ---------------- */
.rn-subnav-tier {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 24px;
}

.rn-subnav-container {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}

.rn-sub-pill {
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.rn-sub-pill:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rn-sub-pill.active {
  background: var(--rn-primary);
  color: #ffffff;
  border-color: var(--rn-primary);
  box-shadow: 0 1px 3px rgba(0, 79, 134, 0.25);
}
.rn-sub-pill.active i {
  color: #bae6fd;
}

/* Preview Banner */
.sample-banner {
  width: 100%;
  margin: 18px 0 0;
  padding: 12px 20px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: #1e40af;
}
.sample-banner strong { font-weight: 700; color: #1d4ed8; }
.sample-badge {
  background: #2563eb;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .rn-title-divider, .rn-dashboard-title { display: none; }
  .rn-tier1-container { padding: 8px 16px; }
  .rn-tier2-container { gap: 16px; padding: 0 16px; }
}

.rn-brand-img {
  height: 34px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ==========================================================================
   TREND BULANAN – 2026 (NOTION DUAL-PANE SPLIT & SMOOTH GRADIENT CURVE)
   ========================================================================== */
.trend-notion-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}
.trend-top-bar {
  padding: 14px 18px 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.trend-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trend-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.trend-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.trend-sub {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 400;
}
.trend-segmented-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f8fafc;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.trend-seg-btn {
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font: 500 11.5px 'Inter', sans-serif;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.trend-seg-btn:hover {
  color: #0f172a;
}
.trend-seg-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.trend-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  background: #fafaf9;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 8px;
}
.legend-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #475569;
}
.legend-pill {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.legend-line-preview {
  width: 16px;
  height: 2px;
  display: inline-block;
  vertical-align: middle;
}
.trend-split-opt2 {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .trend-split-opt2 {
    grid-template-columns: 1fr;
  }
}
.split-chart-area {
  padding: 10px 14px 6px 14px;
  overflow-x: auto;
  border-right: 1px solid #f1f5f9;
}
.split-stats-panel {
  padding: 10px 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.stat-box-side {
  padding: 8px 12px;
  border-radius: 7px;
  background: #fafaf9;
  border: 1px solid #f1f1ef;
}
.stat-box-side small {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.stat-box-side .big-val {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.stat-box-side .sub-val {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
}
.trend-notion-footer {
  padding: 10px 18px;
  background: #fbfbfa;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 8px;
}
.trend-notion-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Modern Card Tooltip ala Margaret Dashboard */
.chart-tip {
  position: fixed;
  z-index: 99999;
  background: #0b1329;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 9px;
  pointer-events: none;
  display: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-width: 140px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}
.chart-tip-title {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chart-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  margin: 3px 0;
}
.chart-tip-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
}
.chart-tip-bar-indicator {
  width: 2.5px;
  height: 12px;
  border-radius: 2px;
}

/* ==========================================================================
   NOTION STYLE SCORECARD: EXECUTIVE MATRIX + INSIGHTFUL BOARD CARDS
   ========================================================================== */
.sc-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1040px) {
  .sc-grid-layout {
    grid-template-columns: 1fr;
  }
}
.notion-sc-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notion-sc-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
}
.notion-sc-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notion-sc-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
}
.notion-sc-title-text h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0;
}
.notion-sc-title-text p {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
  margin-bottom: 0;
}
.notion-sc-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font: 700 13px 'Inter', sans-serif;
  letter-spacing: -0.01em;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  flex: none;
}
.notion-sc-score-badge.ok {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}
.notion-sc-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 10px;
}
.notion-sc-footer {
  padding: 10px 18px;
  background: #fafaf9;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 8px;
}

/* Executive Matrix Grid */
.opt3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  height: 100%;
}
.opt3-kpi-item {
  padding: 8px 12px;
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  transition: all 0.15s ease;
}
.opt3-kpi-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}
.opt3-kpi-item small {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt3-kpi-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.opt3-kpi-item b {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

/* Team Board Cards (Insightful Property Grid) */
.notion-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
}
@media (max-width: 860px) {
  .notion-insight-grid { grid-template-columns: 1fr; }
}
.notion-insight-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.15s ease;
}
.notion-insight-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.insight-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.insight-avatar-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.insight-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 10.5px;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.insight-name-role b {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-name-role small {
  font-size: 10px;
  color: #64748b;
  display: block;
}
.insight-rank-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  flex: none;
}
.insight-rank-tag.gold { background: #fef3c7; color: #b45309; }
.insight-rank-tag.silver { background: #f1f5f9; color: #475569; }
.insight-rank-tag.bronze { background: #ffedd5; color: #9a3412; }

.insight-metrics-list {
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.insight-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748b;
}
.insight-metric-row b {
  color: #1e293b;
  font-weight: 600;
}
.insight-card-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  margin-top: auto;
}
.insight-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.insight-score-val {
  font-size: 14px;
  font-weight: 800;
}
.notion-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
}
.notion-status-chip.ok { background: #dcfce7; color: #15803d; }
.notion-status-chip.info { background: #dbeafe; color: #1d4ed8; }
.notion-status-chip.warn { background: #fef3c7; color: #b45309; }
.notion-status-chip.bad { background: #fee2e2; color: #b91c1c; }
/* ==========================================================================
   NOTION UI STYLE FOR MONITORING MODULES (AR BANK, KYG, SBUM, MBR, PSU)
   ========================================================================== */

/* Notion Card Container: Clean, white surface with muted border */
.dk {
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #edece9;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.dk small, .dk .mut {
  color: #64748b;
}

/* Card Header Notion Style */
.card-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.card-h h3 {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0;
}
.card-h .sub {
  color: #64748b;
  font-size: 11.5px;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
}
.dk .card-h .sub {
  color: #64748b;
}

/* Notion Database Table: Clean & Compact */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
}
.tbl th {
  text-align: left;
  font: 700 10.5px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
  padding: 6.5px 9px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  white-space: nowrap;
}
.tbl td {
  padding: 6.5px 9px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
  line-height: 1.35;
  font-family: 'Inter', sans-serif;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl tr:hover td {
  background: #fafaf9;
}
.tbl tfoot td {
  background: #f8fafc;
  border-top: 1px solid #cbd5e1;
  font-weight: 700;
  padding: 7px 9px;
}
.dk .tbl th {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
.dk .tbl td {
  border-color: #f1f5f9;
}
.tbl.tight td {
  padding: 5px 8px;
}

/* Pills & Badges: Notion Style */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font: 600 10.5px 'Inter', sans-serif;
  white-space: nowrap;
}
.pill.ok { background: #dcfce7; color: #15803d; }
.pill.warn { background: #fef3c7; color: #b45309; }
.pill.bad { background: #fee2e2; color: #b91c1c; }
.pill.info { background: #dbeafe; color: #1d4ed8; }
.pill.mute { background: #f1f5f9; color: #64748b; }
.pill.crit { background: #fee2e2; color: #991b1b; font-weight: 700; }

.tag {
  display: inline-flex;
  align-items: center;
  font: 600 10.5px 'Inter', sans-serif;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.tag.ok { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tag.warn { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.dk .tag { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Notion Stepper (KYG) */
.steps {
  display: flex;
  gap: 4px;
  min-width: 200px;
  align-items: center;
}
.steps i {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: #e2e8f0;
  transition: all 0.2s ease;
}
.steps i.d { background: #10b981; }
.steps i.c { background: #2563eb; }
.steps i.x { background: #ef4444; }
.stepl {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
}

/* Horizontal Progress Bars in Monitoring */
.hbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Inter', sans-serif;
}
.hbar .row {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
  font-size: 11.5px;
}
.hbar .row b {
  text-align: right;
  font: 700 11.5px 'Inter', sans-serif;
  color: #0f172a;
}
.trk {
  height: 6px;
  border-radius: 99px;
  background: #f1f5f9;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.trk i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #2563eb;
}

/* Segmented Bar (SBUM) */
.seg {
  display: flex;
  height: 8px;
  gap: 3px;
  margin: 6px 0 10px;
  border-radius: 99px;
  overflow: hidden;
  background: #f1f5f9;
}
.seg i {
  display: block;
  height: 100%;
  border-radius: 99px;
  min-width: 4px;
}
.lg {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #64748b;
  font-family: 'Inter', sans-serif;
}
.lg span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lg i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.lg b {
  color: #0f172a;
  font: 700 11.5px 'Inter', sans-serif;
}

/* Top 3 List Cards (SBUM) */
.t3l {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
}
.t3 .rkn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px 'Inter', sans-serif;
  flex: none;
  background: #f1f5f9;
  color: #475569;
}
.t3 .rkn.r1 { background: #fef3c7; color: #b45309; }
.t3 .rkn.r2 { background: #f1f5f9; color: #475569; }
.t3 .rkn.r3 { background: #ffedd5; color: #9a3412; }
.t3 b {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  display: block;
}
.t3 small {
  font-size: 10.5px;
  color: #64748b;
  display: block;
  margin-top: 2px;
}
.t3 p {
  font-size: 11px;
  color: #334155;
  margin: 4px 0 0;
  line-height: 1.4;
}
.t3 p span {
  font-weight: 600;
  color: #64748b;
}

/* PSU Stage Matrix Cells (Option 1: Dense Spreadsheet View) */
table.tbl.psu th,
.dk table.tbl.psu th {
  padding: 6px 8px !important;
  font-size: 10px !important;
  text-align: center;
  white-space: nowrap;
}
table.tbl.psu td,
.dk table.tbl.psu td {
  padding: 5px 8px !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
table.tbl.psu td.l,
.dk table.tbl.psu td.l,
table.tbl.psu th.l,
.dk table.tbl.psu th.l {
  text-align: left;
}
.stc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2.5px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.stc small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}
.stc.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.stc.late { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.stc.run { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.stc.runl { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; font-weight: 700; }
.stc.na { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }

/* Notion Interactive Property Tiles (PSU Issue per Kategori - Opsi 2) */
.opt2-container {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.opt2-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 7px;
  transition: all 0.15s ease;
}
.opt2-card:hover {
  border-color: #cbd5e1;
  background: #fcfcfd;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.opt2-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.opt2-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.opt2-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
}
.opt2-mid {
  flex: 1;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.opt2-track {
  width: 100%;
  height: 4.5px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.opt2-fill {
  height: 100%;
  border-radius: 99px;
}
.opt2-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.opt2-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* Notion Compact Property Tiles for MBR Stages & Issues (Ultra-Compact Equal Height) */
.mbr-tile-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mbr-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  min-height: 33px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.mbr-tile:hover {
  border-color: #cbd5e1;
  background: #fcfcfd;
}
.mbr-tile-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 215px;
  min-width: 0;
}
.mbr-icon-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mbr-tile-title {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mbr-tile-mid {
  flex: 1;
  padding: 0 10px;
  display: flex;
  align-items: center;
  min-width: 50px;
}
.mbr-track {
  width: 100%;
  height: 4.5px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.mbr-fill {
  height: 100%;
  border-radius: 99px;
}
.mbr-tile-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.mbr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}



/* Notion Progress Bar for Weekly Plan */
.rv .row-t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.rv .row-t h3 {
  font: 700 13px 'Inter', sans-serif;
  color: #0f172a;
  margin: 0;
}
.rv .prog {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 5px;
  font-family: 'Inter', sans-serif;
}
.rv .prog b {
  font: 700 11.5px 'Inter', sans-serif;
  color: #0f172a;
}
.rv .bar {
  height: 6px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
  margin: 0 0 12px;
}
.rv .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.rv .g-up { color: #15803d; }
.rv .g-dn { color: #b91c1c; }

/* Filter Bar: Notion Clean Toolbar */
.fbar {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.03);
}
.fbar-prefix {
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fbar label {
  font-size: 11px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.fbar select {
  background: #fafaf9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font: 500 11.5px 'Inter', sans-serif;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fbar select:hover, .fbar select:focus {
  border-color: #cbd5e1;
  background: #ffffff;
}
.fend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-tip-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #e2e8f0;
}
.info-tip-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.pgbtn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  padding: 4px 10px;
  border-radius: 6px;
  font: 600 11px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.pgbtn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Notion Segmented Pill Tabs for SBUM Bermasalah (.al-tabs) */
.al-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.al-tabs button {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 10px;
  border-radius: 6px;
  font: 500 11.5px 'Inter', sans-serif;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.al-tabs button:hover {
  color: #0f172a;
}
.al-tabs button[aria-pressed="true"] {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.al-tabs .n {
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 99px;
  background: #fee2e2;
  color: #b91c1c;
  font: 700 10px 'Inter', sans-serif;
  display: inline-grid;
  place-items: center;
}
.al-tabs .n.z {
  background: #f1f5f9;
  color: #94a3b8;
}
.al-tabs button[aria-pressed="true"] .n {
  background: #fee2e2;
  color: #b91c1c;
}
.al-tabs button[aria-pressed="true"] .n.z {
  background: #f1f5f9;
  color: #94a3b8;
}

/* ==========================================================================
   NOTION STYLE AGING MASALAH & TOP 3 CARDS
   ========================================================================== */
.aging-opt3-timeline {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}
.aging-opt3-seg {
  flex: 1;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.aging-opt3-seg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
}
.aging-opt3-seg.ok::before { background: #10b981; }
.aging-opt3-seg.info::before { background: #3b82f6; }
.aging-opt3-seg.warn::before { background: #f59e0b; }
.aging-opt3-seg.late::before { background: #ef4444; }

.opt1-rank-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10.5px 'Inter', sans-serif;
  flex: none;
  background: #f1f5f9;
  color: #475569;
}
.opt1-rank-badge.r1 { background: #fef3c7; color: #b45309; }
.opt1-rank-badge.r2 { background: #f1f5f9; color: #475569; }
.opt1-rank-badge.r3 { background: #ffedd5; color: #9a3412; }

/* ==========================================================================
   NOTION STYLE A/R BANK AGING OUTSTANDING (OPSI 3)
   ========================================================================== */
.ar-aging-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.opt3-bucket-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}
.opt3-bucket-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3.5px;
}
.opt3-bucket-card.ok::before { background: #10b981; }
.opt3-bucket-card.warn::before { background: #f59e0b; }
.opt3-bucket-card.bad::before { background: #ef4444; }

.opt3-bucket-card:hover {
  background: #fafaf9;
  border-color: #cbd5e1;
}
.opt3-highlight-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ==========================================================================
   NOTION STYLE ANALISA AI DAN 4M (OPSI 1: BALANCED 2-COLUMN MATRIX)
   ========================================================================== */
.notion-ai4m-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 992px) {
  .notion-ai4m-container {
    grid-template-columns: 1fr;
  }
}
.notion-ai4m-panel {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.notion-ai4m-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.notion-ai4m-panel-h h4 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.notion-ai-row-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5.5px 9px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  gap: 10px;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.notion-ai-row-strip:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.notion-ai4m-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .notion-ai4m-grid {
    grid-template-columns: 1fr;
  }
}
.notion-4m-box {
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 8px;
  padding: 12px 13px;
  box-sizing: border-box;
}
.notion-4m-box h5 {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.notion-4m-box.machine h5 { color: #0284c7; }
.notion-4m-box.money h5 { color: #d97706; }
.notion-4m-box.man h5 { color: #7c3aed; }
.notion-4m-box.material h5 { color: #dc2626; }
.notion-4m-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.notion-4m-box li {
  font-size: 11px;
  line-height: 1.35;
  color: #1e293b;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.notion-4m-box li i {
  font-size: 10px;
  margin-top: 3px;
  flex: none;
}
.notion-4m-box.machine li i { color: #0284c7; }
.notion-4m-box.money li i { color: #d97706; }
.notion-4m-box.man li i { color: #7c3aed; }
.notion-4m-box.material li i { color: #dc2626; }

/* ==========================================================================
   NOTION STYLE FEEDBACK HEAD IVR (OPSI 3: COMPACT TOGGLE ACCORDION)
   ========================================================================== */
.notion-staff-toggle-panel {
  border: 1px solid #edece9;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.02);
}
.notion-staff-toggle-head {
  padding: 8px 12px;
  background: #fafaf9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1ef;
  user-select: none;
  transition: background 0.12s ease;
}
.notion-staff-toggle-head:hover {
  background: #f1f5f9;
}
.notion-staff-fb-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.5px;
  font-family: 'Inter', sans-serif;
  min-width: 960px;
}
.notion-staff-fb-tbl th,
.notion-staff-fb-tbl td {
  padding: 4px 7px;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.notion-staff-fb-tbl thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 9.5px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}
.notion-staff-fb-tbl tbody tr:hover td {
  background: #fafaf9;
}
.notion-staff-fb-bubble {
  background: #f8fafc;
  border-left: 2px solid #94a3b8;
  padding: 3px 6px;
  border-radius: 0 4px 4px 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: #0f172a;
}
.notion-staff-sol-bubble {
  background: #f0fdf4;
  border-left: 2px solid #16a34a;
  padding: 3px 6px;
  border-radius: 0 4px 4px 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: #14532d;
}

/* ==========================================================================
   NOTION STYLE ANALISA AI & 4M PER STAFF (OPSI 2: PARALLEL DUAL-COLUMN BOARD)
   ========================================================================== */
.staff-parallel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1040px) {
  .staff-parallel-grid {
    grid-template-columns: 1fr;
  }
}
.staff-full-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* ==========================================================================
   NOTION STYLE LEADERBOARD KINERJA (COMPACT & SEJAJAR)
   ========================================================================== */
.notion-lb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .notion-lb-grid {
    grid-template-columns: 1fr;
  }
}
.notion-lb-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.notion-lb-card-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}
.notion-lb-card-h i {
  color: #004f86;
  font-size: 15px;
}
.notion-lb-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.notion-lb-person:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.notion-lb-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px 'Inter', sans-serif;
  flex: none;
}
.notion-lb-av.head {
  background: #e0f2fe;
  color: #0284c7;
}
.notion-lb-av.staff {
  background: #dbeafe;
  color: #1e40af;
}
.notion-lb-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px 'Inter', sans-serif;
  flex: none;
}
.notion-lb-rank.r1 {
  background: #fef08a;
  color: #854d0e;
}
.notion-lb-rank.r2 {
  background: #e2e8f0;
  color: #475569;
}
.notion-lb-sc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.notion-lb-sc div {
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
}
.notion-lb-sc strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.notion-lb-bars {
  display: flex;
  flex-direction: column;
  gap: 6.5px;
  margin-bottom: 12px;
}
.notion-lb-bars .row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.notion-lb-bars .row span {
  color: #334155;
  white-space: nowrap;
}
.notion-lb-bars .row span small {
  color: #94a3b8;
}
.notion-lb-bars .row b {
  text-align: right;
  font: 700 11px 'Inter', sans-serif;
  color: #0f172a;
}
.notion-lb-trk {
  height: 4.5px;
  border-radius: 3px;
  background: #f1f5f9;
  overflow: hidden;
}
.notion-lb-trk i {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.notion-lb-note {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

/* Opsi 2 Ranking Staff: Notion Side-by-Side Dual Tile */
.notion-staff-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .notion-staff-dual-grid {
    grid-template-columns: 1fr;
  }
}
.notion-staff-tile {
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}
.notion-staff-tile:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.notion-staff-tile.r1 {
  border-top: 3px solid #eab308;
}
.notion-staff-tile.r2 {
  border-top: 3px solid #94a3b8;
}
.notion-staff-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.notion-staff-score-box {
  margin: 10px 0 6px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Opsi 2 Performa Manager vs Target: Notion 2-Column KPI Property Tiles */
.notion-mgr-banner {
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.notion-mgr-grid-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .notion-mgr-grid-props {
    grid-template-columns: 1fr;
  }
}
.notion-mgr-tile {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s ease;
}
.notion-mgr-tile:hover {
  border-color: #cbd5e1;
}

/* ==========================================================================
   EVENT USER MANAGER IVR: NOTION ACTIVITY TILES + MODULAR TIMELINE (OPSI 2)
   ========================================================================== */
.notion-eu-wrap {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.notion-eu-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 10px;
}
.notion-eu-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .notion-eu-tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .notion-eu-tiles-grid {
    grid-template-columns: 1fr;
  }
}
.notion-eu-tile {
  background: #fafaf9;
  border: 1px solid #f1f1ef;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}
.notion-eu-tile:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.notion-eu-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.notion-eu-timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  font-size: 11px;
  transition: all 0.15s ease;
  flex-wrap: wrap;
  gap: 8px;
}
.notion-eu-timeline-item:hover {
  background: #fbfcfd;
  border-color: #e2e8f0;
}

/* ==========================================================================
   SDM TREATMENT: NOTION METRIC STRIP (VARIAN 1C - COLORFUL ACCENTS & BADGES)
   ========================================================================== */
.notion-sdm-strip-wrap {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin-bottom: 16px;
}
.notion-sdm-strip-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 2fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 992px) {
  .notion-sdm-strip-grid {
    grid-template-columns: 1fr;
  }
}
.notion-sdm-strip-col {
  background: #fafaf9;
  border: 1px solid #edece9;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
}
.notion-sdm-strip-col:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}
.notion-sdm-strip-col.col-coco {
  border-left: 3.5px solid #f59e0b;
}
.notion-sdm-strip-col.col-training {
  border-left: 3.5px solid #2563eb;
}
.notion-sdm-strip-col.col-punishment {
  border-left: 3.5px solid #ef4444;
}
.notion-sdm-col-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notion-sdm-col-h-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notion-sdm-val-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.notion-sdm-val-box div small {
  font-size: 9.5px;
  color: #64748b;
  display: block;
}
.notion-sdm-val-box div b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

/* ==========================================================================
   EVENT USER MANAGER: NOTION EXECUTIVE COMPACT CARD (NAL FIRDAUS STYLE)
   ========================================================================== */
.notion-eu-layout {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.notion-eu-layout:has(.notion-eu-card:only-of-type) {
  grid-template-columns: minmax(360px, 580px);
}
@media (max-width: 1040px) {
  .notion-eu-layout {
    grid-template-columns: 1fr;
  }
}
.notion-eu-card {
  background: #ffffff;
  border: 1px solid #edece9;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.notion-eu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.notion-eu-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #d97706;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px 'Inter', sans-serif;
  flex: none;
}
.notion-eu-info h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.notion-eu-info p {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
}
.notion-eu-scores {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.notion-eu-score-item small {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-bottom: 2px;
}
.notion-eu-score-item b {
  font-size: 20px;
  font-weight: 800;
  color: #dc2626;
  line-height: 1.1;
  display: block;
}
.notion-eu-score-item b.ok {
  color: #059669;
}
.notion-eu-score-item b.warn {
  color: #d97706;
}
.notion-eu-rows {
  display: flex;
  flex-direction: column;
}
.notion-eu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}
.notion-eu-row-name {
  color: #334155;
  font-weight: 500;
}
.notion-eu-row-vals {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
}
.notion-eu-row-vals .val-pct {
  font-weight: 700;
}
.notion-eu-row-vals .val-sep {
  color: #cbd5e1;
  font-weight: 400;
}
.notion-eu-row-vals .val-score {
  color: #2563eb;
  font-weight: 600;
}
.notion-eu-table-wrap {
  overflow-x: auto;
}
.notion-eu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.notion-eu-table th {
  text-align: left;
  padding: 8px 10px;
  background: #fafaf9;
  color: #475569;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  white-space: nowrap;
}
.notion-eu-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}
.notion-eu-table tr:hover td {
  background: #fafaf9;
}

/* ==========================================================================
   OPSI 1: DENSE SPREADSHEET VIEW (ULTRA-COMPACT) - PSU
   ========================================================================== */
.opt1-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.opt1-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 10px;
  padding: 6px 8px !important;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  white-space: nowrap;
}
.opt1-table th.l { text-align: left; }
.opt1-table td {
  padding: 5px 8px !important;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
.opt1-table td.l { text-align: left; }
.opt1-table tr:hover td { background: #fafaf9; }

.opt1-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2.5px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.opt1-chip small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
}
.opt1-chip.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.opt1-chip.late { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.opt1-chip.run { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.opt1-chip.runl { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; font-weight: 700; }
.opt1-chip.na { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; }

/* ==========================================================================
   OPSI 2: NOTION INTERACTIVE PROPERTY TILES (ISSUE PER KATEGORI) - PSU
   ========================================================================== */
.opt2-container {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.opt2-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 7px;
  transition: all 0.15s ease;
}
.opt2-card:hover {
  border-color: #cbd5e1;
  background: #fcfcfd;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.opt2-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.opt2-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.opt2-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
}
.opt2-mid {
  flex: 1;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.opt2-track {
  width: 100%;
  height: 4.5px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.opt2-fill {
  height: 100%;
  border-radius: 99px;
}
.opt2-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.opt2-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   NOTION COMPACT PROPERTY TILES FOR MBR STAGES & ISSUES
   ========================================================================== */
.mbr-tile-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mbr-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  min-height: 33px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.mbr-tile:hover {
  border-color: #cbd5e1;
  background: #fcfcfd;
}
.mbr-tile-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 215px;
  min-width: 0;
}
.mbr-icon-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mbr-tile-title {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mbr-tile-mid {
  flex: 1;
  padding: 0 10px;
  display: flex;
  align-items: center;
  min-width: 50px;
}
.mbr-track {
  width: 100%;
  height: 4.5px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.mbr-fill {
  height: 100%;
  border-radius: 99px;
}
.mbr-tile-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.mbr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}