:root{font-family:Arial,Helvetica,sans-serif;color:#1d2939;background:#f4f6fa}*{box-sizing:border-box}body{margin:0}.topbar{background:#172b4d;color:#fff;padding:14px 4%;display:flex;gap:24px;align-items:center;flex-wrap:wrap}.brand{font-size:19px;font-weight:800;color:#fff;text-decoration:none}.brand span{font-size:12px;font-weight:400;display:block;color:#d5deed}.topbar nav{display:flex;gap:16px;flex:1;flex-wrap:wrap}.topbar a{color:inherit;text-decoration:none}.topbar nav a{font-size:14px}.user{font-size:12px;color:#e2e8f0}.container{max-width:1200px;margin:28px auto;padding:0 20px}.footer{text-align:center;padding:28px;color:#667085;font-size:12px}.pagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}h1{font-size:26px;margin:0 0 6px}h2{font-size:18px}.muted{color:#667085;font-size:13px}.btn{display:inline-block;border:0;border-radius:8px;background:#244b83;color:#fff;padding:10px 14px;text-decoration:none;cursor:pointer;font-size:14px}.btn.secondary{background:#e8edf5;color:#26364d}.btn.danger{background:#b42318}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.card{background:white;border:1px solid #e4e7ec;border-radius:12px;padding:20px;box-shadow:0 2px 8px #1018280a}.stat{font-size:28px;font-weight:700;margin-top:8px}.tablewrap{overflow:auto;background:#fff;border:1px solid #e4e7ec;border-radius:10px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:12px;border-bottom:1px solid #eaecf0;vertical-align:top}th{background:#f8fafc;font-size:12px;color:#475467;text-transform:uppercase;letter-spacing:.03em}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:13px;font-weight:600}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d0d5dd;border-radius:7px;font:inherit;background:#fff}textarea{min-height:80px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.notice{padding:12px 14px;border-radius:8px;background:#ecfdf3;color:#027a48;margin-bottom:16px}.error{background:#fef3f2;color:#b42318}.login{max-width:430px;margin:7vh auto}.login .brand{color:#244b83}.small{font-size:12px}.inline{display:flex;gap:8px;align-items:center}.right{text-align:right}.pill{display:inline-block;border-radius:99px;padding:4px 8px;background:#eef2f6;font-size:12px}.item-row{display:grid;grid-template-columns:90px 1fr 100px 140px 36px;gap:8px;margin-bottom:8px}.item-row button{border:0;background:#fee4e2;color:#b42318;border-radius:7px;cursor:pointer}.print-paper{background:#fff;max-width:900px;margin:20px auto;padding:34px;border:1px solid #ddd}.companyhead{display:flex;gap:16px;align-items:center;color:var(--brand);border-bottom:3px solid var(--brand);padding-bottom:14px}.logo{border:3px solid var(--brand);width:76px;height:76px;border-radius:18px;display:grid;place-items:center;font-size:26px;font-weight:800;flex-shrink:0}.companyhead h2{margin:0 0 6px;font-size:20px}.companyhead p{margin:3px 0;font-size:11px}.doctype{margin-left:auto;font-weight:800;font-size:22px;letter-spacing:1px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.meta p{margin:7px 0;font-size:13px}.invoice-table{border:1px solid var(--brand)}.invoice-table th,.invoice-table td{border:1px solid var(--brand)}.invoice-table th{background:#fff;color:var(--brand);text-transform:none;font-size:13px}.invoice-table td{height:35px}.totals{width:48%;margin-left:auto}.totals td{padding:8px;border:1px solid var(--brand)}.print-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:20px;font-size:12px}.signature{text-align:center;min-width:200px;padding-top:18px}.signature strong{display:block;margin-top:48px;text-decoration:underline}.receipt-title{text-align:center;color:var(--brand);font-size:28px;font-weight:800;border-bottom:2px solid var(--brand);padding:8px}.receipt-box{border:2px solid var(--brand);padding:14px;margin:22px 0}.receipt-line{border-bottom:1px dotted var(--brand);min-height:32px;padding:7px 0}.amountbox{border:2px solid var(--brand);padding:14px;display:inline-block;min-width:220px;font-size:20px;font-weight:700}.receipt-sign{text-align:right;margin-top:25px}.receipt-sign strong{display:block;margin-top:50px;text-decoration:underline}.print-actions{max-width:900px;margin:18px auto;display:flex;gap:8px}@media screen and (max-width:700px){.formgrid,.meta{grid-template-columns:1fr}.item-row{grid-template-columns:70px 1fr 80px}.item-row .price{grid-column:2}.item-row button{grid-column:3;grid-row:1}.print-paper{padding:16px;margin:10px}.companyhead h2{font-size:15px}.logo{width:56px;height:56px;font-size:19px}.doctype{font-size:15px}.print-bottom{flex-direction:column}.totals{width:100%}}@media print{body{background:#fff}.topbar,.footer,.print-actions{display:none!important}.container{max-width:none;margin:0;padding:0}.print-paper{border:0;margin:0 auto;padding:12mm;max-width:none;width:100%;min-height:0;break-inside:avoid}.companyhead,.invoice-table th,.invoice-table td,.totals td{print-color-adjust:exact;-webkit-print-color-adjust:exact}.print-paper.receipt{width:100%;min-height:0}.invoice-table td{height:28px}@page{size:A4;margin:10mm}}

.topbar .user{margin-left:auto;position:relative;font-size:14px}
.topbar .user-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font-size:14px;line-height:1;font-family:inherit}
.topbar .user-btn:hover{background:rgba(255,255,255,.18)}
.topbar .user-avatar{width:30px;height:30px;border-radius:50%;background:#fff;color:#172b4d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.topbar .user-caret{font-size:10px;opacity:.8;transition:transform .2s}
.topbar .user.open .user-caret{transform:rotate(180deg)}
.topbar .user-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:230px;background:#fff;color:#1d2939;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.28);z-index:50;overflow:hidden;text-align:left}
.topbar .user.open .user-menu{display:block}
.topbar .user-menu .who{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-bottom:1px solid #eef0f4;background:#f8fafc}
.topbar .user-menu .who strong{font-size:14px;color:#1d2939}
.topbar .user-menu .who small{font-size:12px;color:#667085;text-transform:capitalize}
.topbar .user-menu a{display:block;padding:12px 16px;font-size:14px;color:#b42318}
.topbar .user-menu a:hover{background:#fef3f2}
.topbar{position:relative;z-index:100}
.topbar .user-btn{white-space:nowrap}
.topbar .user-menu .who,.topbar .user-menu a{width:100%;margin:0}

@media print{@page{size:A4;margin:0}.print-paper{padding:15mm!important}}

@media print{.print-bottom{flex-direction:row!important;justify-content:space-between}.receipt-sign{text-align:right!important}.signature{text-align:center}.totals{width:48%!important}}

.signature strong,.receipt-sign strong{margin-top:100px!important}

.brand-logo{height:32px;width:auto;max-width:120px;object-fit:contain;vertical-align:middle;margin-right:6px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-page .login{width:min(100%,430px);margin:0;background:#172b4d;border-color:#263f65;color:#fff}
.login-page .login h1,.login-page .login label{color:#fff}
.login-page .login .muted{color:#d5deed}
.login .brand{text-align:center}
.login .brand-logo{display:block;height:72px;max-width:200px;margin:0 auto}

.login .brand span{color:#d5deed;font-size:14px;font-weight:600}

.item-head{font-size:12px;font-weight:700;color:#475467;margin-bottom:4px}
@media screen and (max-width:700px){.item-head{display:none}}

.companyhead .doctype{background:var(--brand);color:#fff;padding:8px 24px;border-radius:6px;print-color-adjust:exact;-webkit-print-color-adjust:exact}

.companyhead .doctype{font-size:18px;padding:5px 16px;letter-spacing:.5px}

.actmenu{display:inline-block}
.actbtn{background:#e8edf5;color:#26364d;border:0;border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.actbtn:hover{background:#dbe3ef}
.actlist{display:none;position:fixed;z-index:200;min-width:160px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.2);padding:6px 0;text-align:left}
.actlist.open{display:block}
.actlist a,.actlist button{display:block;width:100%;text-align:left;padding:9px 16px;background:none;border:0;font:inherit;font-size:14px;color:#1d2939;text-decoration:none;cursor:pointer;white-space:nowrap}
.actlist a:hover,.actlist button:hover{background:#f4f6fa}
.actlist .actdel{color:#b42318}
.actlist form{margin:0}
.topbar .navdd{position:relative}
.topbar .navbtn{background:none;border:0;color:inherit;font:inherit;font-size:14px;cursor:pointer;padding:0}
.topbar .navbtn:hover,.topbar .navdd.open .navbtn{text-decoration:underline}
.topbar .navmenu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:190px;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.28);padding:6px 0;z-index:60}
.topbar .navdd.open .navmenu{display:block}
.topbar .navmenu a{display:block;padding:10px 16px;color:#1d2939;font-size:14px;white-space:nowrap}
.topbar .navmenu a:hover{background:#f4f6fa}
.ico{width:16px;height:16px;flex:none}
.topbar nav>a,.topbar .navbtn,.topbar .navmenu a{display:inline-flex;align-items:center;gap:7px}
.topbar .navmenu a{display:flex}
.topbar nav>a{padding:6px 2px}
.topbar nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topbar nav>a,.topbar nav .navbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;margin:0;border-radius:8px;font-size:14px;line-height:1;font-family:inherit;color:inherit;text-decoration:none;box-sizing:border-box;white-space:nowrap}
.topbar nav .navbtn{background:none;border:0;cursor:pointer}
.topbar nav>a:hover,.topbar nav .navbtn:hover,.topbar nav .navdd.open .navbtn{background:rgba(255,255,255,.14);text-decoration:none}
.topbar nav .navdd{display:flex;align-items:center;position:relative}
.report-section+.report-section{margin-top:28px}
.report-section h3{font-size:15px;color:var(--brand)}
@media print{.report-section+.report-section{break-before:page;margin-top:0}.report-section{break-inside:auto}.invoice-table tr{break-inside:avoid}}
.pill.st-kirim{background:#e0ecff;color:#1d4ed8}
.pill.st-waiting_payment{background:#fef3c7;color:#b45309}
.pill.st-payment{background:#dcfce7;color:#15803d}
.pill.st-cancelled{background:#fee4e2;color:#b42318}
.kop{margin-bottom:10px;color:#000}.kop-top{display:flex;align-items:center;gap:18px;padding-bottom:12px}.kop-logo{width:92px;height:92px;object-fit:contain;flex:none}.kop-logo-txt{display:flex;align-items:center;justify-content:center;font:700 26px Georgia,serif;border:4px double;border-radius:18px}.kop-text{flex:1;text-align:center}.kop-name{font-size:34px;font-weight:900;line-height:1.1;white-space:nowrap}.kop-line{font-size:12px;line-height:1.45}.kop-tag{border-top:3px solid #000;border-bottom:3px solid #000;padding:3px 0;text-align:center;font-weight:700;font-size:12.5px;text-transform:uppercase;position:relative}.kop-tag:before{content:"";display:block}
@media print{.kop,.kop *{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.print-paper .receipt-sign{display:table;margin-left:auto;text-align:center!important}
@media print{.print-paper .receipt-sign{text-align:center!important}}

body.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}body.app>.container{flex:1 0 auto;width:100%}body.app>.footer{flex-shrink:0;margin-top:auto;width:100%;padding:20px 4%;line-height:1.6;border-top:1px solid #e4e7ec;background:#fff}@media(max-width:700px){body.app>.footer{padding:16px}.container{margin:18px auto}}

/* Responsive */
img{max-width:100%}
.tablewrap table{min-width:640px}
@media screen and (max-width:900px){
 [style*="grid-template-columns:2fr"],[style*="grid-template-columns:1fr 1fr auto"]{grid-template-columns:1fr 1fr!important}
 .topbar{gap:12px 16px;padding:12px 4%}
 .topbar nav{gap:10px 16px;order:3;flex-basis:100%}
 .topbar .navmenu{left:auto;right:auto}
}
@media screen and (max-width:600px){
 [style*="grid-template-columns:2fr"],[style*="grid-template-columns:1fr 1fr auto"]{grid-template-columns:1fr!important}
 [style*="repeat(auto-fit,minmax(340px"]{grid-template-columns:1fr!important}
 .container{padding:0 12px}
 .card{padding:14px}
 h1{font-size:22px}
 .pagehead>.actions,.pagehead form.inline{width:100%}
 .pagehead form.inline{flex-wrap:wrap}
 .pagehead form.inline select,.pagehead form.inline .btn{flex:1 1 120px;width:auto}
 .topbar .navmenu{position:fixed;left:12px;right:12px;top:auto;min-width:0}
 .topbar .user-menu{width:min(230px,calc(100vw - 24px))}
 .print-paper{overflow-x:auto}
 .kop-top{flex-direction:column;text-align:center;gap:8px}.kop-logo{width:72px;height:72px}.kop-name{font-size:clamp(18px,6.2vw,28px);white-space:normal}.kop-line{font-size:11px}.kop-tag{font-size:10px}
 .print-actions{flex-wrap:wrap;padding:0 12px}
 .stat{font-size:24px}
 .actions .btn{flex:1 1 auto;text-align:center}
}
@media print{.tablewrap table{min-width:0}}
/* Mobile navbar */
.navtoggle{display:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:10px;width:42px;height:42px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.navtoggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media screen and (max-width:900px){
 .topbar{flex-wrap:wrap;gap:10px 12px;padding:10px 4%}
 .topbar .brand{order:1;flex:1;min-width:0}
 .topbar .user{order:2;margin-left:0}
 .navtoggle{display:flex;order:3}
 .topbar .user-btn{padding:3px;gap:0}
 .topbar .user-btn .user-caret,.topbar .user-btn{font-size:0}
 .topbar .user-btn .user-avatar{font-size:14px}
 .topbar .user-btn .user-caret{display:none}
 .topbar nav{order:4;flex:0 0 100%;display:none;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.18);margin-top:4px;padding-top:6px;max-height:calc(100dvh - 80px);overflow-y:auto}
 .topbar nav.open{display:flex}
 .topbar nav>a,.topbar .navbtn{display:flex;width:100%;padding:13px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08);align-items:center;gap:10px;text-align:left}
 .topbar .navbtn{justify-content:flex-start}
 .topbar .navbtn:hover,.topbar .navdd.open .navbtn{text-decoration:none;background:rgba(255,255,255,.08)}
 .topbar .navdd{width:100%}
 .topbar .navmenu{position:static;display:none;box-shadow:none;background:rgba(0,0,0,.18);border-radius:8px;margin:4px 0 6px;padding:2px 0;min-width:0;left:auto;right:auto;top:auto}
 .topbar .navdd.open .navmenu{display:block}
 .topbar .navmenu a{color:#fff;padding:12px 18px;font-size:14px}
 .topbar .navmenu a:hover{background:rgba(255,255,255,.1)}
 .topbar .user-menu{position:fixed;right:12px;left:auto;top:62px;width:min(240px,calc(100vw - 24px))}
}
.user-avatar{overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.topbar .user-menu a.um-link{color:#1d2939;border-bottom:1px solid #eef0f4}.topbar .user-menu a.um-link:hover{background:#f4f6fa}
.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.profile-card{text-align:center}.profile-photo{width:140px;height:140px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:#244b83;color:#fff;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:700;box-shadow:0 2px 10px rgba(15,23,42,.18)}.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-info{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;font-size:14px}.profile-info dt{color:#667085}.profile-info dd{margin:0;font-weight:600;word-break:break-word}
@media screen and (max-width:800px){.profile-grid{grid-template-columns:1fr}.profile-info{grid-template-columns:110px 1fr}}
.tablewrap .user-avatar{width:34px;height:34px;border-radius:50%;background:#244b83;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;overflow:hidden}

.themebtn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);cursor:pointer;padding:0;font-size:16px;line-height:1}
.themebtn:hover{background:rgba(255,255,255,.2)}
.themebtn .ico{width:18px;height:18px}
.themebtn .t-sun,[data-theme=dark] .themebtn .t-moon{display:none}
[data-theme=dark] .themebtn .t-sun{display:inline-flex}
.themebtn+.user{margin-left:0}
.themebtn.floating{position:fixed;top:14px;right:14px;background:#e8edf5;color:#26364d;border-color:#d0d5dd;z-index:300}
@media print{.themebtn{display:none!important}}
@media screen{
[data-theme=dark]{color-scheme:dark;color:#e5e7eb;background:#0f172a}
[data-theme=dark] body{background:#0f172a;color:#e5e7eb}
[data-theme=dark] .topbar{background:#0b1220;border-bottom:1px solid #1e293b}
[data-theme=dark] .card,[data-theme=dark] .tablewrap,[data-theme=dark] body.app>.footer{background:#1e293b;border-color:#334155;box-shadow:none}
[data-theme=dark] .footer{color:#94a3b8}
[data-theme=dark] .muted,[data-theme=dark] .login .brand span,[data-theme=dark] .item-head{color:#94a3b8}
[data-theme=dark] .login .brand{color:#93b4e8}
[data-theme=dark] th:not(.invoice-table th){background:#162033;color:#94a3b8}
[data-theme=dark] :not(.invoice-table)>*>tr>th,[data-theme=dark] :not(.invoice-table)>*>tr>td{border-bottom-color:#334155}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:#0f172a;color:#e5e7eb;border-color:#475569}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#64748b}
[data-theme=dark] .btn{background:#3b6cb5}
[data-theme=dark] .btn.secondary,[data-theme=dark] .actbtn{background:#334155;color:#e5e7eb}
[data-theme=dark] .btn.danger{background:#b42318}
[data-theme=dark] .pill{background:#334155;color:#e5e7eb}
[data-theme=dark] .pill.st-kirim{background:#1e3a8a;color:#bfdbfe}
[data-theme=dark] .pill.st-waiting_payment{background:#713f12;color:#fde68a}
[data-theme=dark] .pill.st-payment{background:#14532d;color:#bbf7d0}
[data-theme=dark] .pill.st-cancelled{background:#7f1d1d;color:#fecaca}
[data-theme=dark] .notice{background:#052e1b;color:#6ee7b7}
[data-theme=dark] .error{background:#450a0a;color:#fca5a5}
[data-theme=dark] .item-row button{background:#450a0a;color:#fca5a5}
[data-theme=dark] .actlist,[data-theme=dark] .topbar .navmenu,[data-theme=dark] .topbar .user-menu{background:#1e293b;border-color:#334155;color:#e5e7eb}
[data-theme=dark] .actlist a,[data-theme=dark] .actlist button,[data-theme=dark] .topbar .navmenu a,[data-theme=dark] .topbar .user-menu a.um-link,[data-theme=dark] .topbar .user-menu .who strong{color:#e5e7eb}
[data-theme=dark] .actlist a:hover,[data-theme=dark] .actlist button:hover,[data-theme=dark] .topbar .navmenu a:hover,[data-theme=dark] .topbar .user-menu a.um-link:hover{background:#334155}
[data-theme=dark] .actlist .actdel,[data-theme=dark] .topbar .user-menu a{color:#fca5a5}
[data-theme=dark] .topbar .user-menu a.um-link{color:#e5e7eb;border-bottom-color:#334155}
[data-theme=dark] .topbar .user-menu a:hover{background:#450a0a}
[data-theme=dark] .topbar .user-menu .who{background:#162033;border-bottom-color:#334155}
[data-theme=dark] .topbar .user-menu .who small{color:#94a3b8}
[data-theme=dark] .themebtn.floating{background:#334155;color:#e5e7eb;border-color:#475569}
[data-theme=dark] .login-page .login{background:#0b1220;border-color:#1e293b}
[data-theme=dark] [style*="background:#e4e7ec"]{background:#334155!important}
[data-theme=dark] [style*="background:#f8fafc"],[data-theme=dark] [style*="background:#eef4ff"]{background:#162033!important;color:#e5e7eb!important}
[data-theme=dark] [style*="border-top:1px solid #eaecf0"]{border-top-color:#334155!important}
[data-theme=dark] [style*="#cbd5e1"]{border-color:#475569!important}
[data-theme=dark] [style*="color:#b42318"]{color:#fca5a5}
[data-theme=dark] .print-paper,[data-theme=dark] .print-paper .muted{color:#1d2939}
[data-theme=dark] .print-paper input,[data-theme=dark] .print-paper select{background:#fff;color:#1d2939}
}
[data-theme=dark] .invoice-table,[data-theme=dark] .invoice-table th,[data-theme=dark] .invoice-table td{background:#fff;color:#1d2939}
[data-theme=dark] .invoice-table th{color:var(--brand,#244b83)}
@media screen and (max-width:900px){[data-theme=dark] .topbar .navmenu a{color:#fff}}