/* ============================================================
   DuckCode Nobu QRIS — design system
   Ported from the DuckCode Dashboard handoff (colors, type, layout).
   ============================================================ */
:root{
  --bg:#EDF1F9; --card:#fff; --border:#E7ECF5; --line:#F0F3F9; --line2:#F1F4FA;
  --primary:#2F6BED; --primary-hover:#2860d8; --primary-dark:#1E52C9; --primary-soft:#EAF1FF;
  --ink:#26324B; --ink2:#33415C; --ink3:#2B3A55; --label:#5B6B8C; --muted:#8B99B6; --muted2:#9AA6BE; --faint:#AAB6CE;
  --green:#1E9E6A; --green-bg:#E4F6EE; --green-dot:#22A06B;
  --amber:#C98A15; --amber-bg:#FFF6E8; --amber-fg:#B77A16;
  --red:#D14650; --red-bg:#FCE9EC;
  --violet:#6D4FE0; --violet-bg:#F0ECFE;
  --radius:16px; --radius-sm:11px; --radius-xs:9px;
  --shadow:0 1px 2px rgba(43,58,85,.04),0 8px 22px rgba(43,58,85,.05);
  --shadow-btn:0 8px 18px -8px rgba(47,107,237,.7);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);-webkit-font-smoothing:antialiased;color:var(--ink3)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D3DBEA;border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#B8C4DA;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
@keyframes dc-spin{to{transform:rotate(360deg)}}
@keyframes dc-toast{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mono{font-family:var(--mono)}

/* ── App shell ─────────────────────────────────────────── */
.shell{height:100vh;display:flex;overflow:hidden}
.sidebar{width:266px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%}
.sidebar .brand{padding:20px 20px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.sidebar .brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(160deg,#EAF1FF,#DCE8FF);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar .brand .logo img{width:34px;height:34px;object-fit:contain}
.brand-name{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.brand-sub{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}
.nav{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:2px}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--faint);text-transform:uppercase;padding:8px 12px 6px}
.nav-group.mt{padding-top:14px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;border:none;background:transparent;color:var(--label);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,color .12s;text-decoration:none}
.nav-item:hover{background:#F6F8FC;color:var(--label)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}
.nav-item span.txt{flex:1;text-align:left}
.nav-badge{width:18px;height:18px;border-radius:6px;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-badge.full{background:var(--green-bg);color:var(--green)}
.nav-badge.read{background:#FEF3E2;color:var(--amber-fg)}
.nav-badge.none{background:var(--red-bg);color:var(--red)}
.sidebar .userbox{padding:12px;border-top:1px solid var(--line)}
.userbox .inner{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#F6F8FC}
.userbox .av{width:36px;height:36px;border-radius:10px;background:linear-gradient(160deg,#2F6BED,#5B8DEF);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.userbox .nm{font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userbox .rl{font-size:11px;color:var(--muted)}
.icon-btn{border:none;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.logout-btn{width:32px;height:32px}
.logout-btn:hover{background:#FCE9EC;color:#D14650}

.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
.topbar{height:66px;flex-shrink:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 18px}
.page-title{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{flex:1 1 190px;min-width:0;max-width:260px;display:flex;align-items:center;height:36px;background:#F2F5FA;border:1px solid var(--border);border-radius:10px;padding:0 12px;gap:8px}
.search input{border:none;background:transparent;outline:none;font-size:12.5px;font-family:inherit;color:#3A4A66;width:100%}
.health-pill{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;flex-shrink:0}
.health-pill.up{background:#EAF7F0;border:1px solid #D3EDDF}
.health-pill.down{background:#FDECEE;border:1px solid #F6D6DA}
.health-pill .dot{width:7px;height:7px;border-radius:50%}
.health-pill.up .dot{background:#22A06B;animation:dc-pulse 2s infinite}
.health-pill.down .dot{background:#D14650}
.health-pill .nm{font-size:11.5px;font-weight:700}
.health-pill.up .nm{color:#1E9E6A}
.health-pill.down .nm{color:#D14650}
.health-pill .ms{font-size:11px;color:#5FA987}
.role-tag{display:inline-block;padding:6px 11px;border-radius:11px;font-size:11.5px;font-weight:700;text-transform:capitalize}
.role-tag.developer{background:var(--violet-bg);color:var(--violet)}
.role-tag.owner{background:#FFF1DE;color:var(--amber)}
.role-tag.admin{background:#E8F0FE;color:var(--primary)}

.content{flex:1;overflow-y:auto;padding:24px 26px 40px}
.fade{animation:dc-fade .35s ease}

/* ── Cards & primitives ────────────────────────────────── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:20px}
.card.pad-lg{padding:22px 24px}
.grid{display:grid;gap:14px}
.section-title{font-size:15px;font-weight:700;color:var(--ink2)}
.hr{height:1px;background:var(--line);margin:22px 0}

.banner{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;margin-bottom:18px;font-size:12.5px;line-height:1.4}
.banner.info{background:#EDF6FF;border:1px solid #D3E6FB;color:#2C5AB8}
.banner.warn{background:#FFF6E8;border:1px solid #F6E2BC;color:#8A6410}
.banner.violet{background:#F3F0FF;border:1px solid #E2DAFB;color:#5B4CAB}
.banner .ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Buttons */
.btn{height:42px;padding:0 20px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-ghost{border:1px solid var(--border);background:#fff;color:var(--label)}
.btn-ghost:hover{background:#F6F8FC;color:var(--label)}
.btn-sm{height:36px;padding:0 14px;font-size:12.5px;border-radius:10px}

/* Forms */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:600;color:var(--label)}
.input,.textarea,select.input{width:100%;height:42px;border:1px solid #DDE4F0;border-radius:10px;padding:0 13px;font-size:13px;font-family:var(--mono);color:var(--ink2);background:#F8FAFD;outline:none;transition:border-color .12s,box-shadow .12s}
.textarea{height:auto;padding:11px 13px;font-size:12px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus,select.input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(47,107,237,.12)}
.input.sans{font-family:var(--sans)}
.lock{color:var(--amber)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl thead tr{background:#FAFBFE}
.tbl th{text-align:left;padding:11px 12px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2)}
.tbl th:first-child,.tbl td:first-child{padding-left:20px}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.tbl td{padding:12px;border-top:1px solid var(--line2);color:var(--ink2)}
.tbl tbody tr:hover{background:#F8FAFE}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl .muted{color:var(--muted)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.st-credited{background:#E4F6EE;color:#1E9E6A}.st-credited .dot{background:#22A06B}
.st-paid{background:#E8F0FE;color:#2F6BED}.st-paid .dot{background:#2F6BED}
.st-pending{background:#FEF3E2;color:#B77A16}.st-pending .dot{background:#E8A93B}
.st-failed{background:#FCE9EC;color:#D14650}.st-failed .dot{background:#DC5A64}
.st-manual_review{background:#F0ECFE;color:#6D4FE0}.st-manual_review .dot{background:#7A5AF0}
.st-duplicated{background:#EEF2F7;color:#64748B}.st-duplicated .dot{background:#94A3BD}
.st-received{background:#E8F0FE;color:#2F6BED}.st-received .dot{background:#2F6BED}
.st-rejected{background:#FCE9EC;color:#D14650}.st-rejected .dot{background:#DC5A64}
.st-error{background:#FBE4E1;color:#C0392B}.st-error .dot{background:#E05A45}
.pill{display:inline-block;padding:2px 9px;border-radius:6px;font-size:10.5px;font-weight:700}
.pill.blue{background:#EAF1FF;color:#2F6BED}.pill.grey{background:#F1F4FA;color:#7A88A6}
.pill.ok{background:#E4F6EE;color:#1E9E6A}.pill.bad{background:#FCE9EC;color:#D14650}

/* Toggle */
.toggle{display:inline-block;width:40px;height:22px;border-radius:20px;background:#CFD9EA;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0;border:none;padding:0;vertical-align:middle}
.toggle.on{background:var(--primary)}
.toggle .knob{position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2.5px;left:3px;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on .knob{left:20px}

/* Stat cards */
.stat{padding:16px 17px}
.stat .top{display:flex;align-items:center;justify-content:space-between}
.stat .lbl{font-size:11.5px;font-weight:600;color:var(--muted)}
.stat .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.stat .val{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:12px;font-family:var(--mono)}
.stat .val small{font-size:14px;color:var(--muted)}
.stat .sub{font-size:11.5px;margin-top:6px;font-weight:600}

/* Toast */
.toast{position:fixed;bottom:26px;right:26px;z-index:80;display:flex;align-items:center;gap:11px;padding:13px 18px;border-radius:13px;color:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);animation:dc-toast .3s ease;max-width:400px;font-size:13px;font-weight:600}
.toast.success{background:#12351F}.toast.info{background:#0F1A2E}.toast.error{background:#3A1518}
.toast .ic{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}

/* code block */
pre.code{margin:0;background:#0F1A2E;color:#B7D3FF;border-radius:11px;padding:14px 16px;font-family:var(--mono);font-size:11.5px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%}

/* chips */
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--label);font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none}
.chip.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.chip .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:6px;background:#F1F4FA;color:var(--muted);font-size:10.5px;font-weight:800}
.chip.on .cnt{background:#D5E4FE;color:#2860d8}

/* drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(24,34,54,.32);backdrop-filter:blur(2px);z-index:60;animation:dc-fade .2s ease}
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:92vw;background:#fff;z-index:61;box-shadow:-20px 0 50px -20px rgba(24,34,54,.4);display:flex;flex-direction:column;animation:dc-toast .28s ease}

/* pagination (Bootstrap-5 markup) */
.pagination{display:flex;gap:5px;list-style:none;padding:0;margin:0;flex-wrap:wrap;align-items:center}
.pagination .page-item .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--label);font-size:12.5px;font-weight:600;text-decoration:none}
.pagination .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination .page-item.disabled .page-link{opacity:.45;pointer-events:none}
.pagination .page-link:hover{background:#F6F8FC}
.pagination [aria-hidden="true"]{display:none}

.flex{display:flex;align-items:center}.gap{gap:10px}.spacer{flex:1}
.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mt20{margin-top:20px}.mt22{margin-top:22px}
.text-red{color:var(--red)}.text-green{color:var(--green)}.text-muted{color:var(--muted)}