/* ============================================================
   PayGate pages.css — pay page, docs, qris, misc
   ============================================================ */
/* ---------- payment page ---------- */
.pay-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:radial-gradient(1000px 460px at 50% -10%, var(--primary-soft-2), transparent 60%), var(--bg)}
.pay-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);border-radius:1.25rem;box-shadow:var(--shadow-lg);overflow:hidden}
.pay-head{padding:1.5rem 1.75rem;text-align:center;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--primary-soft),transparent)}
.pay-head .amt{font-size:2rem;font-weight:800;margin-top:.3rem;letter-spacing:-.02em}
.pay-body{padding:1.75rem;text-align:center}
.qr-box{width:216px;height:216px;margin:0 auto 1.1rem;padding:.6rem;border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--surface)}
.qr-box img{width:100%;height:100%;object-fit:contain}
.timer{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:800;color:var(--text);margin-bottom:.25rem;font-size:1.125rem}
.timer.warn{color:var(--danger)}
.pay-status{padding:1rem;border-radius:var(--radius);font-size:.875rem;font-weight:700;margin-top:1rem}
.pay-status.pending{background:var(--warn-soft);color:var(--warn)}
.pay-status.success{background:var(--ok-soft);color:var(--ok)}
.pay-status.expired{background:var(--surface-2);color:var(--text-2)}
.pay-status.cancel{background:var(--danger-soft);color:var(--danger)}
.pay-foot{padding:1rem 1.5rem;background:var(--surface-2);text-align:center;font-size:.75rem;color:var(--text-3)}

/* ---------- docs ---------- */
.docs-layout{display:flex;gap:2rem;max-width:1200px;margin:0 auto;padding:2.25rem 1.25rem;flex:1}
.docs-nav{width:232px;flex-shrink:0;position:sticky;top:5rem;align-self:flex-start;max-height:calc(100vh - 7rem);overflow-y:auto}
.docs-nav h4{font-size:.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin:1.1rem 0 .5rem}
.docs-nav a{display:block;padding:.42rem .8rem;border-radius:.5rem;font-size:.875rem;color:var(--text-2);margin-bottom:2px;font-weight:500}
.docs-nav a:hover{background:var(--surface-2);color:var(--text)}
.docs-nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.docs-content{flex:1;min-width:0}
.docs-content h2{font-size:1.5rem;font-weight:800;margin:2.25rem 0 .6rem;letter-spacing:-.015em;scroll-margin-top:5rem}
.docs-content h3{font-size:1.125rem;font-weight:700;margin:1.5rem 0 .5rem}
.docs-content p{font-size:.875rem;color:var(--text-2);line-height:1.65;margin-bottom:.8rem}
.endpoint{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code-bg);color:var(--code-fg);padding:.42rem .8rem;border-radius:.55rem;font-size:.8125rem;margin:.25rem 0;box-shadow:var(--shadow-sm)}
.endpoint .method{font-weight:800;color:#60a5fa}
.codeblock{background:var(--code-bg);color:var(--code-fg);border-radius:var(--radius);padding:1.1rem 1.25rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;line-height:1.65;margin:.8rem 0;white-space:pre;box-shadow:var(--shadow-sm)}
.codeblock .c{color:var(--text-3)}
.callout{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:var(--radius);padding:.9rem 1.1rem;font-size:.8125rem;color:var(--warn);margin:.8rem 0;line-height:1.6}
.callout-blue{background:var(--primary-soft);border-color:var(--primary-soft-2);color:var(--primary)}
code.inline{background:var(--surface-2);padding:.1rem .4rem;border-radius:.3rem;font-size:.78em;font-family:ui-monospace,Menlo,monospace}

/* ---------- QRIS generator ---------- */
.qris-gen-result{text-align:center;padding:1rem}
.qris-gen-result .qr-box{width:196px;height:196px}
.copy-btn{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);padding:.25rem .6rem;border-radius:.45rem;font-size:.75rem;color:var(--text-2);transition:all .15s}
.copy-btn:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-soft-2)}

/* ---------- input warna tema ---------- */
.color-input{width:44px;height:36px;padding:3px;border:1px solid var(--border);border-radius:.55rem;background:var(--surface);cursor:pointer}

@media (max-width:768px){
  .sidebar{width:66px}
  .sidebar .logo span,.sidebar nav a span,.side-foot{display:none}
  .sidebar nav a{justify-content:center}
  .docs-layout{flex-direction:column}
  .docs-nav{width:100%;position:static;display:flex;gap:.4rem;flex-wrap:wrap;max-height:none}
  .docs-nav h4{display:none}
  .content{padding:1rem}
  .hero-stats{gap:1.5rem}
  .hero-stat + .hero-stat::before{display:none}
}

/* ============================================================
   PayGate polish.css — penyempurnaan tampilan (v2)
   ============================================================ */
/* ---------- role chip (topbar) ---------- */
.user-chip{display:flex;align-items:center;gap:.5rem}
.role-chip{font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:.22rem .55rem;border-radius:9999px;text-transform:uppercase}
.role-admin{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;box-shadow:0 2px 8px -2px var(--primary)}
.role-user{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}

/* ---------- balance strip (dashboard) ---------- */
.balance-strip{background:linear-gradient(120deg,var(--primary-soft),transparent 70%);border-color:var(--primary-soft-2)}
.balance-icon{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:var(--shadow-sm)}
.balance-inline{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}

/* ---------- balance card (halaman penarikan) ---------- */
.balance-card{position:relative;overflow:hidden;padding:1.4rem 1.5rem;border-color:var(--primary-soft-2);
  background:radial-gradient(420px 160px at 100% 0%, var(--primary-soft), transparent 60%), var(--surface)}
.balance-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.balance-label{font-size:.78rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.balance-value{font-size:1.9rem;font-weight:800;margin-top:.35rem;letter-spacing:-.03em;color:var(--primary)}
.balance-sub{font-size:.75rem;color:var(--text-3);margin-top:.3rem}

/* ---------- tabel: zebra + hover halus ---------- */
.table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.table tbody tr:hover td{background:var(--primary-soft)}
.table td .btn{margin-right:2px}
.whitespace-nowrap{white-space:nowrap}

/* ---------- empty state ---------- */
.empty{text-align:center;color:var(--text-3);padding:2.25rem 1rem;font-size:.875rem}

/* ---------- topbar title + avatar ---------- */
.topbar h1{display:flex;align-items:center;gap:.5rem}
.topbar h1::before{content:"";width:6px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--primary),var(--primary-hover));display:inline-block}
.avatar{box-shadow:0 2px 8px -2px var(--primary-soft-2)}

/* ---------- sidebar: footer logout rapi ---------- */
.side-foot a{display:flex;align-items:center;gap:.4rem;color:var(--sidebar-fg);font-weight:600;font-size:.8rem;padding:.4rem .5rem;border-radius:.5rem;transition:all .15s}
.side-foot a:hover{background:rgba(255,255,255,.07);color:#fff}

/* ---------- form & button focus ring ---------- */
.form-input:focus,.form-select:focus{box-shadow:0 0 0 3px var(--primary-soft)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft-2)}

/* ---------- card heading konsisten ---------- */
.card h3{letter-spacing:-.01em}

/* ---------- modal: footer tombol rapi ---------- */
.modal .btn + .btn{margin-top:0}
.qris-gen-result .qr-box{border-color:var(--primary-soft-2);background:var(--surface)}

@media (max-width:768px){
  .balance-strip .flex{width:100%}
  .balance-strip .btn{width:100%}
  .topbar h1{font-size:1rem}
}

/* ===== perbaikan mobile final (dimuat terakhir agar menang) ===== */
@media (max-width:768px){
  .docs-layout{width:100%!important;min-width:0!important;padding:1.25rem .9rem}
  .docs-content{width:100%!important;min-width:0!important}
  .docs-nav{min-width:0!important;width:100%!important}
  .navbar-inner{flex-wrap:wrap;gap:.4rem}
  .navbar-links{order:3;width:100%;display:flex;gap:.4rem;overflow-x:auto}
  .navbar-links a{white-space:nowrap}
  .codeblock{white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .table-wrap{min-width:0!important;max-width:100%!important}
  #tripay-status-badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}