*{box-sizing:border-box}body{margin:0;background:#f3f5f9;color:#202b3c;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.top{height:76px;background:#fff;border-bottom:1px solid #e6eaf0;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1d2b42}.logo>span,.brandmark{display:grid;place-items:center;background:#008b45;color:#fff;font-weight:800;letter-spacing:1px;border-radius:10px;width:48px;height:48px}.logo b{display:block;letter-spacing:1px;font-size:13px}.logo small{color:#7d8796}.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 110px)}aside{padding:25px 14px;border-right:1px solid #e3e8ef;background:#fff}aside a{display:block;text-decoration:none;color:#536176;padding:12px 14px;border-radius:8px;margin-bottom:5px;font-weight:600}aside a.active,aside a:hover{background:#eaf1fa;color:#008b45}main{padding:30px;min-width:0}.pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.pagehead h1{margin:0 0 4px;font-size:26px;letter-spacing:-.5px}.pagehead p{margin:0;color:#7c8798}.btn,button{background:#008b45;color:#fff;border:0;border-radius:7px;padding:11px 16px;text-decoration:none;font:inherit;font-weight:650;cursor:pointer;display:inline-block}.btn:hover,button:hover{background:#006c36}.secondary,.ghost{background:#eaf0f6;color:#334a64}.ghost{padding:8px 13px}.panel{background:white;border:1px solid #e4e9f0;border-radius:12px;padding:22px;margin-bottom:22px;box-shadow:0 3px 14px #20334a08}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat{background:#fff;border:1px solid #e4e9f0;border-radius:12px;padding:20px}.stat small{display:block;color:#78869a;margin-bottom:8px}.stat b{font-size:23px;overflow-wrap:anywhere}.tablehead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}.tablehead h2{font-size:17px;margin:0}.tablehead input{max-width:270px}.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;background:#f7f9fc;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.5px}td,th{padding:13px 12px;border-bottom:1px solid #edf0f4;white-space:nowrap}td:first-child{white-space:normal}.actions{display:flex;gap:10px;align-items:center}.actions a{color:#008b45;text-decoration:none;font-weight:650}.actions form{margin:0}.link{background:none;padding:0;color:#b42318;font-size:13px}.status{border-radius:20px;padding:4px 9px;background:#eef2f7;color:#586579;font-size:12px}.slunas{background:#e4f7ed;color:#137548}.sdikirim{background:#e8f2ff;color:#245ea8}.sjatuh tempo{background:#fff0e4;color:#a44b0a}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.formgrid label,.notes{display:flex;flex-direction:column;gap:7px;color:#4a596d;font-weight:600}.wide{grid-column:1/-1}input,select,textarea{font:inherit;border:1px solid #d7dee8;border-radius:7px;padding:11px 12px;color:#243246;background:#fff;width:100%;min-width:0}input:focus,textarea:focus,select:focus{outline:2px solid #d6e8fb;border-color:#6b9bca}h3{font-size:16px;margin:25px 0 12px}.items{margin:10px 0 15px}.itemrow{display:grid;grid-template-columns:minmax(170px,1fr) 75px minmax(130px,180px) 120px 30px;gap:9px;align-items:center;margin-bottom:8px}.itemrow.headings{font-size:11px;color:#738197;text-transform:uppercase;font-weight:700}.lineTotal{font-weight:650}.remove{background:#fff0f0;color:#b42318;padding:7px}.notes{margin-top:20px}.totalbox{margin:20px 0 20px auto;max-width:390px;background:#f7f9fc;border-radius:9px;padding:15px}.totalbox>div,.sum>div{display:flex;justify-content:space-between;gap:15px;padding:7px 0}.grand{border-top:1px solid #d9e0e9;margin-top:6px;padding-top:13px!important;font-size:17px;color:#006c36;font-weight:800}.savebtn{min-width:180px}.empty{color:#7d8999;text-align:center;padding:22px}.alert,.success{padding:12px 15px;border-radius:8px;margin-bottom:15px;background:#fff0ee;color:#a3261b}.success{background:#e5f8ed;color:#137548}.foot{text-align:center;padding:18px;color:#96a0ae;font-size:12px}.login{min-height:100vh;display:grid;place-items:center;background:#edf2f8}.loginbox{background:#fff;padding:35px;border-radius:15px;box-shadow:0 15px 45px #1c35521a;width:min(420px,92vw)}.loginbox .brandmark{margin-bottom:20px}.loginbox h1{margin:0;font-size:24px}.loginbox p{color:#778397;margin-top:5px;margin-bottom:25px}.loginbox label{display:block;margin-bottom:7px;font-weight:600}.loginbox button{width:100%;margin:15px 0}.loginbox small{display:block;color:#9b6500;background:#fff8e7;padding:10px;border-radius:7px}.invoice{background:#fff;max-width:950px;margin:0 auto;padding:48px 52px;border:1px solid #e3e7ed;box-shadow:0 4px 20px #20334a0a}.invhead{display:flex;justify-content:space-between;gap:30px}.invhead h2{font-size:19px;margin:14px 0 5px}.invhead p,.payment p{color:#657287;font-size:13px;line-height:1.8}.invtitle{text-align:right}.invtitle h1{font-size:30px;letter-spacing:3px;color:#008b45;margin:0 0 8px}.invtitle p{line-height:1.9}.invoice hr{border:0;border-top:2px solid #008b45;margin:25px 0}.billto small{color:#7d8999;letter-spacing:1px;font-weight:700}.billto h3{margin:5px 0 25px}.invoice table{margin-bottom:25px}.invoice th{background:#008b45;color:white}.invoice td,.invoice th{padding:14px}.invoice td:nth-child(n+2),.invoice th:nth-child(n+2){text-align:right}.invbottom{display:grid;grid-template-columns:1fr minmax(260px,350px);gap:30px}.payment h3{margin-top:0}.sum{background:#f7f9fc;padding:15px;border-radius:8px;height:max-content}.signature{margin:45px 0 20px auto;width:240px;text-align:center;line-height:1.7}.signature p{margin-bottom:0}.signspace{height:60px}.invoice footer{text-align:center;border-top:1px solid #e8ecf1;padding-top:18px;color:#7d8999;font-size:12px}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{display:flex;gap:5px;padding:10px;border-right:0;border-bottom:1px solid #e3e8ef}aside a{margin:0;padding:10px;font-size:12px}main{padding:18px}.stats{grid-template-columns:1fr}.itemrow{grid-template-columns:minmax(130px,1fr) 60px 110px 95px 28px;gap:5px}.invoice{padding:25px 18px}.invhead{flex-direction:column}.invtitle{text-align:left}.invbottom{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}}
@media print {
 @page { size: A4 portrait; margin: 8mm; }
 html,body { margin:0!important;padding:0!important;background:#fff!important;color:#202b3c!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important; }
 body * { visibility:hidden!important; }
 .invoice,.invoice * { visibility:visible!important; }
 .top,.layout>aside,.pagehead,.foot,.no-print { display:none!important; }
 .layout { display:block!important;min-height:0!important; }
 main { display:block!important;margin:0!important;padding:0!important; }
 .invoice { display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:4mm!important;border:0!important;box-shadow:none!important;background:#fff!important;font-size:10px!important;line-height:1.35!important;page-break-inside:avoid!important;break-inside:avoid-page!important; }
 .invoice .brandmark { background:#008b45!important;color:#fff!important;border-radius:5px!important;width:36px!important;height:36px!important;font-size:11px!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important; }
 .invhead { display:flex!important;flex-direction:row!important;justify-content:space-between!important;gap:18px!important; }
 .invhead h2 { font-size:15px!important;margin:7px 0 3px!important; }
 .invhead p,.payment p,.invtitle p { font-size:9px!important;line-height:1.45!important;margin:4px 0!important; }
 .invtitle h1 { font-size:23px!important;margin:0 0 4px!important; }
 .invoice hr { margin:10px 0!important;border-top:2px solid #008b45!important; }
 .billto small { font-size:8px!important; }
 .billto h3 { font-size:12px!important;margin:3px 0 5px!important; }
 .customer-address { font-size:9px!important;margin:0 0 10px!important;line-height:1.4!important; }
 .invoice table { margin:8px 0 12px!important;font-size:9px!important; }
 .invoice td,.invoice th { padding:7px 8px!important; }
 .invoice th { background:#008b45!important;color:#fff!important; }
 .invbottom { display:grid!important;grid-template-columns:1fr 260px!important;gap:15px!important; }
 .payment h3 { font-size:12px!important;margin:0 0 5px!important; }
 .sum { padding:9px!important;background:#f7f9fc!important; }
 .sum>div { padding:4px 0!important;font-size:9px!important; }
 .sum .grand { font-size:13px!important; }
 .signature { margin:18px 0 10px auto!important;width:190px!important;font-size:9px!important; }
 .signspace { height:32px!important; }
 .invoice footer { margin-top:10px!important;padding-top:8px!important;font-size:8px!important; }
 .invoice,.invoice * { page-break-inside:avoid!important;break-inside:avoid!important; }
}

/* ANS green branding and invoice signature area */
.company-brand{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1}
.company-logo{width:78px;height:78px;object-fit:contain;display:block;flex:0 0 78px}
.company-details{min-width:0}
.company-details h2{margin:3px 0 5px!important;color:#007a3d}
.company-details p{margin-top:0}
.stamp-row{display:flex;justify-content:center;gap:12px;margin:20px auto 0;max-width:310px}
.stamp-box{width:132px;height:92px;border:1.5px dashed #aeb8b2;border-radius:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:#68756d;text-align:center;font-size:12px;background:#fff}
.stamp-box b{font-weight:600}
.signature{width:320px!important;max-width:100%;margin:25px 0 20px auto!important}
.signature .regards{margin:0;line-height:1.7}
.signature .signspace{height:78px!important}
.director-name{display:inline-block;margin-top:2px}
@media print{
 .company-brand{display:flex!important;align-items:flex-start!important;gap:10px!important}
 .company-logo{width:64px!important;height:64px!important;flex-basis:64px!important;object-fit:contain!important}
 .company-details h2{font-size:14px!important;color:#007a3d!important}
 .stamp-row{gap:8px!important;margin-top:12px!important}
 .stamp-box{width:112px!important;height:68px!important;font-size:9px!important;border-color:#9aa69e!important}
 .signature{width:270px!important;margin:15px 0 8px auto!important}
 .signature .signspace{height:48px!important}
}

/* v1.4: clean recipient block and expanded blank signature area */
.billto h3{margin:2px 0 0!important}
.billto .customer-address{margin:0!important;padding:0!important;line-height:1.35!important}
.signature{width:340px!important;max-width:100%;margin:25px 0 20px auto!important}
.signature-space{height:150px;width:100%}
@media print{
 .billto h3{margin:1px 0 0!important}
 .billto .customer-address{margin:0!important;padding:0!important;line-height:1.25!important}
 .signature{width:300px!important;margin:12px 0 8px auto!important}
 .signature-space{height:115px!important}
}

/* v1.5: add a two-line visual gap between recipient address and item table */
.billto{margin-bottom:2.6em!important}
@media print{.billto{margin-bottom:2.6em!important}}

/* v1.6: raise director name and title by two text lines */
.signature .signature-space{height:calc(150px - 5.4em)!important}
@media print{.signature .signature-space{height:calc(115px - 5.4em)!important}}

/* v1.8: invoice TOTAL stays black and bold */
.sum .grand,
.sum .grand b{color:#000!important;font-weight:800!important}

/* v1.9: align invoice heading and metadata like a clean label/value list */
.invtitle{text-align:left!important;min-width:245px}
.invtitle h1{font-size:28px!important;letter-spacing:1px!important;margin:0 0 2px!important;color:#00a84f!important}
.invmeta{display:grid;gap:0;font-size:13px;line-height:1.5;color:#111}
.invmeta>div{display:grid;grid-template-columns:92px 12px minmax(0,1fr);align-items:baseline;gap:0}
.invmeta span,.invmeta i{font-style:normal;font-weight:400}
.invmeta b{font-weight:400;overflow-wrap:anywhere}
@media print{
 .invtitle{text-align:left!important;min-width:200px!important}
 .invtitle h1{font-size:24px!important;letter-spacing:1px!important;margin:0 0 2px!important}
 .invmeta{font-size:10px!important;line-height:1.45!important}
 .invmeta>div{grid-template-columns:72px 10px minmax(0,1fr)!important}
}

.session-user{font-size:13px;color:#536176;font-weight:600;margin-left:auto;margin-right:18px}.muted{color:#8a94a3;font-size:12px}@media(max-width:850px){.session-user{display:none}}

/* v2.2 baseline patch: TOTAL/Grand total black and bold for every user and print view */
.grand, .grand b, .totalbox .grand, .totalbox .grand b, .sum .grand, .sum .grand b { color:#000 !important; font-weight:800 !important; }
@media print { .grand, .grand b, .totalbox .grand, .totalbox .grand b, .sum .grand, .sum .grand b { color:#000 !important; font-weight:800 !important; } }


/* v2.5 premium green-white login theme */
body.login{
 min-height:100vh; display:flex; align-items:center; justify-content:center;
 padding:28px; position:relative; overflow:hidden;
 background:linear-gradient(135deg,#eaf8ef 0%,#f7fcf8 48%,#ffffff 100%);
}
body.login:before,body.login:after{content:"";position:fixed;z-index:0;border-radius:50%;pointer-events:none}
body.login:before{width:560px;height:560px;left:-180px;top:-210px;background:radial-gradient(circle at 65% 65%,#bce9cc 0%,#dff5e6 48%,#eaf8ef 72%);opacity:.9}
body.login:after{width:460px;height:460px;right:-150px;bottom:-190px;background:radial-gradient(circle,#b8e8c8 0%,#e1f5e7 55%,#f7fcf8 75%);opacity:.8}
.loginbox{
 position:relative;z-index:1;width:min(100%,430px);margin:0 auto;padding:42px 42px 34px;
 border:1px solid #dceee2;border-radius:24px;background:rgba(255,255,255,.96);
 box-shadow:0 24px 70px rgba(18,94,48,.13),0 3px 12px rgba(18,94,48,.05);
}
.loginbox .brandmark{
 width:68px;height:68px;margin:0 auto 22px;border-radius:20px;
 background:linear-gradient(145deg,#16a05a,#08783d);box-shadow:0 10px 22px rgba(8,120,61,.22);
 font-size:21px;letter-spacing:2px;
}
.loginbox h1{margin:0;text-align:center;color:#163b28;font-size:27px;line-height:1.25;letter-spacing:-.7px;font-weight:800}
.loginbox>p{text-align:center;margin:9px 0 28px;color:#668171;font-size:13px}
.loginbox label{display:block;margin:15px 0 7px;color:#294c37;font-size:12px;font-weight:750;letter-spacing:.25px}
.loginbox input:not([type=hidden]){
 display:block;width:100%;height:47px;padding:0 14px;border:1px solid #d8e7dc;border-radius:11px;
 background:#fbfefc;color:#183b27;font:inherit;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.loginbox input:not([type=hidden]):focus{border-color:#1b9a55;background:#fff;box-shadow:0 0 0 4px rgba(27,154,85,.12)}
.loginbox button{
 display:block;width:100%;margin-top:25px;padding:13px 16px;border-radius:11px;
 background:linear-gradient(100deg,#11874a,#20a65d);box-shadow:0 8px 18px rgba(17,135,74,.18);
 font-weight:750;letter-spacing:.2px;transition:transform .15s,box-shadow .15s,filter .15s
}
.loginbox button:hover{background:linear-gradient(100deg,#08763e,#168d4c);box-shadow:0 10px 22px rgba(17,135,74,.24);transform:translateY(-1px)}
.loginbox small{display:block;margin-top:20px;padding-top:16px;border-top:1px solid #edf4ef;color:#809386;font-size:11px;line-height:1.65;text-align:center}
.loginbox .alert{margin:0 0 14px;padding:10px 12px;border-radius:9px;background:#fff0f0;color:#a12626;border:1px solid #f4d0d0}
@media(max-width:520px){body.login{padding:18px} .loginbox{padding:32px 24px 26px;border-radius:20px}.loginbox h1{font-size:24px}body.login:before{width:360px;height:360px}}

/* STARCORE invoice layout based on the supplied reference image */
.invoice{max-width:1050px;padding:28px 30px 34px;border:0;box-shadow:none;color:#080808;font-family:Arial,Helvetica,sans-serif}
.invoice-masthead{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:112px;padding:0 8px 22px}
.invoice-masthead h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:56px;line-height:1;margin:0;color:#080808;letter-spacing:0}
.starcore-wordmark{display:block;width:min(42%,410px);height:auto;max-height:86px;object-fit:contain;object-position:right center}
.invoice-rule{height:4px;background:#888;margin:0;border:0}
.invoice-parties{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.08fr);min-height:240px;align-items:stretch}
.seller-block{padding:10px 18px 18px 5px;font-size:14px;line-height:1.85}
.seller-block h2{font-size:16px;font-weight:700;margin:0 0 8px;color:#111}
.seller-unit{display:block;margin:0 0 22px;font-size:14px}
.seller-block p{margin:0 0 8px;white-space:normal;color:#111;font-size:14px;line-height:1.85}
.party-divider{background:#bdbdbd;min-height:100%}
.recipient-block{padding:2px 5px 15px 2px;font-size:14px;line-height:1.65}
.recipient-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:6px;align-items:start}
.recipient-row>span:last-child,.recipient-row>b{overflow-wrap:anywhere}
.recipient-row b{font-weight:700}
.recipient-gap{height:18px}
.address-row{margin-top:0}
.invoice-rule-bottom{margin-bottom:26px}
.billto{margin:0 0 12px!important}
.billto small{font-size:12px;letter-spacing:.5px;color:#333}
.invoice table{margin-top:8px}
@media(max-width:700px){.invoice{padding:18px 12px}.invoice-masthead{min-height:80px;padding:0 2px 15px;gap:12px}.invoice-masthead h1{font-size:39px}.starcore-wordmark{width:48%;max-height:58px}.invoice-parties{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);min-height:0}.seller-block{padding:10px 8px 15px 2px;font-size:11px}.seller-block h2,.seller-unit,.seller-block p{font-size:11px}.seller-unit{margin-bottom:12px}.recipient-block{padding:5px 2px 12px;font-size:11px}.recipient-row{grid-template-columns:68px minmax(0,1fr);gap:3px}.recipient-gap{height:12px}}
@media print{.invoice{max-width:none;padding:4mm!important}.invoice-masthead{min-height:72px;padding-bottom:12px}.invoice-masthead h1{font-size:42px}.starcore-wordmark{width:40%;max-height:62px}.invoice-parties{grid-template-columns:minmax(0,1fr) 55px minmax(0,1.08fr);min-height:175px}.seller-block{font-size:10px;line-height:1.7;padding:6px 10px 10px 3px}.seller-block h2,.seller-unit,.seller-block p{font-size:10px}.seller-unit{margin-bottom:14px}.recipient-block{font-size:10px;line-height:1.5}.recipient-row{grid-template-columns:115px minmax(0,1fr)}.recipient-gap{height:12px}.invoice-rule{height:3px;background:#888!important}.invoice-rule-bottom{margin-bottom:16px}.billto{margin-bottom:10px!important}}

/* v1.2: editable customer contact details and logo co inside green circle */
.recipient-row{display:grid;grid-template-columns: minmax(100px, 34%) minmax(0,1fr);gap:10px;align-items:start}.recipient-row span:last-child{overflow-wrap:anywhere}.recipient-row.address-row span:last-child{line-height:1.5}.starcore-wordmark{width:min(42vw,420px);height:auto;object-fit:contain;object-position:right center}@media(max-width:600px){.recipient-row{grid-template-columns:90px minmax(0,1fr);gap:6px}.starcore-wordmark{width:min(70vw,360px)}}


/* v1.6: neatly aligned payment information labels and colons */
.payment-details{margin:5px 0 0;font-size:12px;line-height:1.7;color:#111}
.payment-row{display:grid;grid-template-columns:112px 10px minmax(0,1fr);gap:0;align-items:start}
.payment-row>span:nth-child(2){text-align:center;font-weight:600}
.payment-row>span:last-child{overflow-wrap:anywhere}
.payment-notes{margin-top:10px}
@media(max-width:700px){.payment-row{grid-template-columns:94px 10px minmax(0,1fr);font-size:11px}}
@media print{.payment-details{font-size:10px;line-height:1.55}.payment-row{grid-template-columns:100px 10px minmax(0,1fr)}}