@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
#tab-kuitansi {color:#0f172a;}
#tab-kuitansi .kw-head-bar {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
#tab-kuitansi .kw-head-bar h4 {margin:0; font-family:'Space Grotesk',sans-serif; font-weight:900; color:#0f172a; letter-spacing:-.4px;}
#tab-kuitansi .kw-head-bar p {margin:3px 0 0; color:#64748b; font-size:.82rem; font-weight:700;}
#tab-kuitansi .kw-actions {display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
#tab-kuitansi .kw-stats {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:15px;}
#tab-kuitansi .kw-stat {position:relative; overflow:hidden; border-radius:16px; padding:15px 17px; color:#fff; box-shadow:0 12px 26px rgba(15,23,42,.12);}
#tab-kuitansi .kw-stat .kw-ic {position:absolute; right:12px; top:10px; font-size:1.9rem; opacity:.28;}
#tab-kuitansi .kw-stat .kw-lbl {font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; opacity:.92; font-weight:900;}
#tab-kuitansi .kw-stat .kw-val {font-size:1.35rem; font-weight:950; margin-top:5px; font-family:'Space Grotesk',sans-serif;}
#tab-kuitansi .kw-stat.kw-blue {background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
#tab-kuitansi .kw-stat.kw-green {background:linear-gradient(135deg,#10b981,#047857);}
#tab-kuitansi .kw-stat.kw-purple {background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
#tab-kuitansi .kw-empty-hint {font-size:.8rem; color:#94a3b8; font-style:italic; text-align:center; margin-top:10px;}
#tab-kuitansi .kw-receipt-card {background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 14px 34px rgba(15,23,42,.06); padding:14px; margin-bottom:15px; overflow-x:auto;}
#tab-kuitansi .kw-receipt-wrap {display:flex; justify-content:center;}
.kw-receipt {width:100%; max-width:820px; min-height:500px; background:#fff; border:2px solid #1e3a8a; border-radius:12px; padding:12px; position:relative; overflow:hidden; color:#1f2937; font-family:'VT323','Courier New',monospace; box-sizing:border-box;}
.kw-receipt .kw-no span, .kw-receipt .kw-sign-sub {font-family:'VT323','Courier New',monospace!important;}
.kw-receipt .kw-head-company h3 {font-size:1.34rem!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;}
.kw-receipt .kw-head-addr, .kw-receipt .kw-head-contact {font-size:.7rem!important; letter-spacing:-.02em!important; white-space:nowrap!important; overflow:visible!important;}
.kw-receipt .kw-tbl td, .kw-receipt .kw-tbl .kw-col-label {font-size:1.14rem!important;}
.kw-receipt .kw-jumlah-label {font-size:.8rem!important;}
.kw-receipt .kw-jumlah-val {font-size:1.4rem!important;}
.kw-receipt .kw-title-badge {font-size:1.14rem!important;}
.kw-receipt .kw-no {font-size:.9rem!important;}
.kw-receipt .kw-sign-date {font-size:.92rem!important;}
.kw-receipt .kw-sign-title {font-size:.9rem!important;}
.kw-receipt .kw-sign {width:360px!important; max-width:360px!important;}
.kw-receipt .kw-sign-name {font-size:.92rem!important; white-space:nowrap!important;}
.kw-receipt .kw-sign-sub {font-size:.78rem!important;}
.kw-watermark {position:absolute; top:50%; left:50%; width:70%; max-width:460px; height:auto; transform:translate(-50%,-50%); opacity:.08; filter:grayscale(20%); pointer-events:none; z-index:0; object-fit:contain;}
.kw-inner {position:relative; z-index:1; border:1px solid #9db8d6; border-radius:8px; padding:24px 28px;}
.kw-head {display:grid; grid-template-columns:minmax(0,1fr) 248px; align-items:center; gap:16px; border-bottom:2px solid #1f2937; padding-bottom:14px;}
.kw-head-left {display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden;}
.kw-head-logo {width:118px!important; height:64px!important; max-width:118px!important; min-width:118px!important; max-height:64px!important; object-fit:contain; object-position:left center; display:block; background:transparent; flex-shrink:0; filter:drop-shadow(0 2px 5px rgba(30,58,138,.16));}
.kw-head-company {min-width:0; overflow:hidden;}
.kw-head-company h3 {margin:0; font-size:1.06rem; font-weight:900; letter-spacing:.2px; color:#0f172a; line-height:1.12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kw-head-addr {margin:5px 0 0; font-size:.62rem; color:#4b5563; line-height:1.25; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:clip;}
.kw-head-contact {margin:2px 0 0; font-size:.62rem; color:#4b5563; line-height:1.25; display:flex; flex-wrap:nowrap; gap:3px 5px; white-space:nowrap; overflow:hidden;}
.kw-head-contact .kw-nowrap {white-space:nowrap;}
.kw-head-right {text-align:right; justify-self:end; width:248px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.kw-title-badge {display:inline-flex; justify-content:flex-end; max-width:100%; font-size:.9rem; font-weight:900; text-transform:uppercase; letter-spacing:.045em; color:#1e3a8a; border-bottom:2px solid #1e3a8a; padding-bottom:3px; line-height:1.2; text-align:right; white-space:normal;}
.kw-no {font-size:.72rem; color:#4b5563; margin-top:0; line-height:1.35; white-space:nowrap; padding-top:2px;}
.kw-no span {display:inline-block; font-family:monospace; font-weight:800; color:#dc2626; letter-spacing:.02em;}
.kw-tbl {width:100%; border-collapse:collapse; margin-top:22px; table-layout:fixed;}
.kw-tbl td {padding:9px 4px; vertical-align:top; font-size:.9rem;}
.kw-tbl .kw-col-label {width:180px; font-weight:700; color:#374151;}
.kw-tbl .kw-col-sep {width:14px; text-align:center; color:#374151;}
.kw-tbl .kw-col-value {color:#111827; word-wrap:break-word; overflow-wrap:anywhere;}
.kw-foot {margin-top:34px; display:flex; justify-content:space-between; align-items:flex-end; gap:22px; flex-wrap:wrap;}
.kw-jumlah-box {flex-shrink:0;}
.kw-jumlah-label {font-size:.66rem; color:#6b7280; text-transform:uppercase; letter-spacing:.16em; margin-bottom:4px;}
.kw-jumlah-val {background:#f3f4f6; border:2px solid #1f2937; padding:11px 22px; border-radius:6px; font-weight:900; font-size:1.12rem; font-style:italic; color:#111827; letter-spacing:.02em;}
.kw-sign {text-align:center; width:270px; max-width:100%;}
.kw-sign p {margin:0;}
.kw-sign .kw-sign-date {font-size:.74rem; margin-bottom:2px;}
.kw-sign-title {font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#374151;}
.kw-cap {position:relative; width:240px; height:124px; margin:2px auto 0;}
.kw-stempel, .kw-ttd {position:absolute; left:50%; top:50%; pointer-events:none; object-fit:contain;}
.kw-stempel {width:240px; height:124px; object-fit:contain; transform:translate(-50%,-50%) rotate(-3deg); opacity:.85; z-index:1;}
.kw-ttd {width:168px; height:80px; transform:translate(-50%,-50%) rotate(-3deg); opacity:1; z-index:2;}
.kw-sign-name {font-weight:800; text-decoration:underline; text-transform:uppercase; letter-spacing:.02em; color:#0f172a; font-size:.86rem;}
.kw-sign-sub {font-size:.62rem; color:#6b7280; letter-spacing:.14em; font-family:monospace; margin-top:2px;}
#tab-kuitansi .kw-hist-head {display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
#tab-kuitansi .kw-hist-list {display:grid;}
#tab-kuitansi .kw-hist-item {justify-content:space-between;}
#tab-kuitansi .kw-hist-item:hover {background:#f5f7ff;}
#tab-kuitansi .kw-hist-amt {font-size:.84rem; font-weight:900; color:#059669; text-align:right;}
#tab-kuitansi .kw-hist-del {font-weight:800;}
#tab-kuitansi .kw-stat {transition:transform .15s ease,box-shadow .15s ease;}
#tab-kuitansi .kw-stat:hover {transform:translateY(-2px); box-shadow:0 16px 30px rgba(15,23,42,.16);}
#tab-kuitansi .kw-hist-count {display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 8px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-size:.72rem; font-weight:900; margin-left:6px; vertical-align:middle;}
#tab-kuitansi .kw-filterbar {display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:12px; margin-bottom:14px; border:1px solid #e2e8f0; border-radius:14px; background:linear-gradient(180deg,#f8fbff,#eef2f7);}
#tab-kuitansi .kw-fb-search {position:relative; flex:1 1 240px; min-width:190px;}
#tab-kuitansi .kw-fb-search i {position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.82rem; pointer-events:none;}
#tab-kuitansi .kw-fb-search input {width:100%; height:40px; border:1px solid #cbd5e1; border-radius:11px; background:#fff; padding:0 12px 0 34px; font-size:.86rem; font-weight:600; outline:none; color:#0f172a; transition:border-color .15s ease,box-shadow .15s ease;}
#tab-kuitansi .kw-fb-date {display:flex; flex-direction:column; gap:4px;}
#tab-kuitansi .kw-fb-date span {font-size:.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:#64748b;}
#tab-kuitansi .kw-fb-date input {height:40px; border:1px solid #cbd5e1; border-radius:11px; background:#fff; padding:0 10px; font-size:.82rem; font-weight:700; color:#0f172a; outline:none; transition:border-color .15s ease,box-shadow .15s ease;}
#tab-kuitansi .kw-fb-search input:focus, #tab-kuitansi .kw-fb-date input:focus {border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.14);}
#tab-kuitansi .kw-fb-reset {height:40px; border:1px solid #cbd5e1; border-radius:11px; background:#fff; color:#334155; font-size:.8rem; font-weight:800; padding:0 14px; cursor:pointer; transition:all .15s ease; white-space:nowrap;}
#tab-kuitansi .kw-fb-reset:hover {background:#0f172a; color:#fff; border-color:#0f172a;}
#tab-kuitansi .kw-hist-list {grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
#tab-kuitansi .kw-hist-item {display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #eef2f7; border-radius:14px; background:#fff; cursor:pointer; transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
#tab-kuitansi .kw-hist-item:hover {border-color:#bae6fd; box-shadow:0 8px 20px rgba(14,165,233,.10); transform:translateY(-1px);}
#tab-kuitansi .kw-hist-ava {flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem; color:#fff; background:linear-gradient(135deg,#38bdf8,#2563eb); box-shadow:0 6px 14px rgba(37,99,235,.22);}
#tab-kuitansi .kw-hist-main {flex:1 1 auto; min-width:0;}
#tab-kuitansi .kw-hist-top {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#tab-kuitansi .kw-hist-no {font-family:monospace; font-size:.7rem; color:#1d4ed8; font-weight:800; background:#eff6ff; border:1px solid #dbeafe; padding:2px 7px; border-radius:7px;}
#tab-kuitansi .kw-badge {font-size:.6rem; font-weight:900; padding:3px 8px; border-radius:999px; letter-spacing:.3px;}
#tab-kuitansi .kw-badge-lunas {background:#dcfce7; color:#047857; border:1px solid #86efac; text-transform:uppercase;}
#tab-kuitansi .kw-badge-sisa {background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;}
#tab-kuitansi .kw-hist-name {font-size:.92rem; color:#0f172a; font-weight:800; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#tab-kuitansi .kw-hist-sub {font-size:.7rem; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#tab-kuitansi .kw-hist-sub i {color:#94a3b8;}
#tab-kuitansi .kw-hist-sub .kw-dot {margin:0 5px; color:#cbd5e1;}
#tab-kuitansi .kw-hist-right {flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
#tab-kuitansi .kw-hist-del {width:32px; height:32px; border-radius:9px; border:1px solid #e2e8f0; background:#f8fafc; cursor:pointer; font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; transition:all .14s ease;}
#tab-kuitansi .kw-hist-del {color:#dc2626;}
#tab-kuitansi .kw-hist-del:hover {background:#dc2626; color:#fff; border-color:#dc2626; text-decoration:none;}
@media(max-width:900px) {
#tab-kuitansi .kw-hist-list {grid-template-columns:1fr;}
#tab-kuitansi .kw-fb-search {flex:1 1 100%;}
#tab-kuitansi .kw-fb-date {flex:1 1 45%;}
#tab-kuitansi .kw-fb-date input {width:100%;}
}
#tab-kuitansi .kw-hist-empty {grid-column:1/-1; text-align:center; color:#94a3b8; font-style:italic; padding:16px; font-size:.84rem;}
.kw-modal-backdrop {position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:100000; padding:16px;}
.kw-modal-backdrop.show {display:flex;}
.kw-modal {background:#fff; border-radius:18px; width:min(560px,96vw); max-height:92vh; overflow-y:auto; box-shadow:0 26px 70px rgba(0,0,0,.28); animation:kwPop .22s ease;}
@keyframes kwPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.kw-modal-head {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; background:linear-gradient(135deg,#0f172a,#0369a1); color:#fff; border-radius:18px 18px 0 0;}
.kw-modal-head b {font-size:1rem; font-weight:900; letter-spacing:-.2px;}
.kw-modal-x {width:31px; height:31px; border:0; border-radius:11px; background:rgba(255,255,255,.14); color:#fff; font-weight:800; cursor:pointer;}
.kw-modal-body {padding:16px 18px;}
.kw-grid {display:grid; grid-template-columns:1fr 1fr; gap:10px 12px;}
.kw-fld {display:flex; flex-direction:column;}
.kw-fld.kw-col2 {grid-column:1/-1;}
.kw-fld label {font-size:.68rem; font-weight:900; color:#475569; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;}
.kw-fld input, .kw-fld textarea {width:100%; padding:8px 11px; font-size:.86rem; color:#0f172a; background:#f8fafc; border:1px solid #cbd5e1; border-radius:11px; outline:none; font-weight:600; transition:all .16s ease; box-sizing:border-box;}
.kw-fld textarea {resize:vertical; min-height:52px;}
.kw-fld input:focus, .kw-fld textarea:focus {background:#fff; border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.14);}
.kw-modal-foot {display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 18px 18px;}
.kw-btn {display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:800; padding:9px 14px; border-radius:11px; font-size:.84rem; border:0; cursor:pointer; transition:all .16s ease;}
.kw-btn-primary {background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.22);}
.kw-btn-primary:hover {transform:translateY(-1px);}
.kw-btn-primary:disabled {opacity:.65; cursor:not-allowed; transform:none;}
.kw-btn-outline {background:#fff; color:#334155; border:1px solid #cbd5e1;}
.kw-btn-outline:hover {background:#f1f5f9;}
.kw-btn:disabled {opacity:.6; cursor:not-allowed;}
@media(max-width:900px) {
#tab-kuitansi .kw-stats {grid-template-columns:1fr;}
#tab-kuitansi .kw-hist-list {grid-template-columns:1fr;}
.kw-receipt {padding:22px 18px;}
.kw-head {grid-template-columns:1fr;}
.kw-head-right {text-align:left;justify-self:start;width:auto;align-items:flex-start;}
}
#tab-kuitansi .kw-receipt-wrap {overflow:visible;}
#tab-kuitansi #kwArea.kw-receipt {transform:none; margin-bottom:0;}
@page{size:A4 portrait;margin:0;}
@media print {
html, body {width:210mm!important;min-height:297mm!important;background:#fff!important;overflow:visible!important;margin:0!important;padding:0!important;}
body {display:block!important;position:relative!important;}
body * {visibility:hidden!important;}
#kwArea, #kwArea * {visibility:visible!important;}
#kwArea {position:absolute!important;left:50%!important;top:8mm!important;width:820px!important;max-width:820px!important;min-width:820px!important;margin:0!important;box-shadow:none!important;transform:translateX(-50%) scale(.86)!important;transform-origin:top center!important;page-break-inside:avoid!important;}
.kw-head {display:grid!important;grid-template-columns:minmax(0,1fr) 248px!important;align-items:center!important;gap:16px!important;}
.kw-head-logo {width:118px!important;height:64px!important;max-width:118px!important;min-width:118px!important;max-height:64px!important;object-fit:contain!important;object-position:left center!important;display:block!important;background:transparent!important;}
.kw-head-right {width:248px!important;text-align:right!important;justify-self:end!important;align-items:flex-end!important;}
}
.kw-head-logo, .kw-stempel, .kw-ttd, .kw-watermark {image-rendering:auto; -webkit-font-smoothing:antialiased; backface-visibility:hidden; transform-style:preserve-3d;}