:root{
  --ink-deep:#0E1B33;
  --ink:#1B2C4F;
  --ink-soft:#4A5A7A;
  --paper:#F3EFE3;
  --paper-raised:#FBF9F3;
  --gold:#A9782F;
  --gold-soft:#D8B876;
  --line:rgba(14,27,51,0.14);
  --danger:#A63C3C;
  --success:#3E7A4A;
  --radius:3px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
}
h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink-deep);
  margin:0 0 4px;
}
a{color:var(--ink-deep);}
.container{max-width:900px; margin:0 auto; padding:32px 24px 80px;}
.topbar{
  background:var(--ink-deep); color:var(--paper-raised);
  padding:16px 0; margin-bottom:32px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:0; padding-bottom:0; margin-bottom:0; max-width:900px;
}
.topbar .brand{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600;}
.topbar nav a{color:rgba(251,249,243,0.8); text-decoration:none; font-size:0.86rem; margin-left:20px;}
.topbar nav a:hover{color:var(--paper-raised);}

.card{
  background:var(--paper-raised); border:1px solid var(--line);
  padding:32px; margin-bottom:24px;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:0.12em; font-size:0.72rem;
  font-weight:600; color:var(--gold); margin-bottom:8px;
}
label{display:block; font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px;}
input[type=text], input[type=number], input[type=password], textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line);
  background:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:0.95rem;
  color:var(--ink); border-radius:var(--radius);
}
input[readonly]{background:#EFEBDE; color:var(--ink-soft);}
textarea{resize:vertical; min-height:70px;}
.field{margin-bottom:18px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

table.items{width:100%; border-collapse:collapse; margin-top:8px;}
table.items th{
  text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-soft); border-bottom:1px solid var(--line); padding:8px 6px;
}
table.items td{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top;}
table.items td.col-no{width:40px; text-align:center; padding-top:14px; color:var(--ink-soft);}
table.items td.col-harga{width:200px;}
table.items td.col-hapus{width:40px; text-align:center;}
table.items input{text-align:left;}
table.items td.col-harga input{text-align:right;}

.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 22px; background:var(--ink-deep); color:var(--paper-raised);
  text-decoration:none; font-size:0.88rem; font-weight:500; border:1px solid var(--ink-deep);
  border-radius:var(--radius);
}
.btn:hover{background:transparent; color:var(--ink-deep);}
.btn-outline{background:transparent; color:var(--ink-deep);}
.btn-outline:hover{background:var(--ink-deep); color:var(--paper-raised);}
.btn-small{padding:6px 14px; font-size:0.8rem;}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn-danger:hover{background:transparent; color:var(--danger);}
button{font-family:inherit;}

.total-row{
  display:flex; justify-content:flex-end; align-items:center; gap:16px;
  margin-top:18px; padding-top:18px; border-top:1.5px solid var(--ink-deep);
}
.total-row .label{font-size:0.9rem; color:var(--ink-soft);}
.total-row .value{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--ink-deep); font-weight:600;}

.alert{padding:12px 16px; border-left:3px solid var(--gold); background:var(--paper-raised); margin-bottom:20px; font-size:0.9rem;}
.alert.error{border-color:var(--danger);}
.alert.success{border-color:var(--success);}

.actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}

/* -------- Invoice cetak -------- */
.invoice-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; border-bottom:2px solid var(--ink-deep); padding-bottom:20px; margin-bottom:28px;}
.invoice-head .kop h1{font-size:1.3rem; line-height:1.3;}
.invoice-head .kop p{margin:2px 0 0; font-size:0.85rem; color:var(--ink-soft); max-width:38ch;}
.invoice-head .meta{text-align:right; font-size:0.9rem;}
.invoice-head .meta .nomor{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--ink-deep); font-weight:600;}
.invoice-to{margin-bottom:26px;}
.invoice-to .eyebrow{margin-bottom:6px;}
table.print-items{width:100%; border-collapse:collapse; margin-bottom:8px;}
table.print-items th{text-align:left; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); border-bottom:1.5px solid var(--ink-deep); padding:8px 6px;}
table.print-items td{padding:10px 6px; border-bottom:1px solid var(--line); font-size:0.94rem;}
table.print-items td.num{text-align:right;}
.signature-block{margin-top:56px; display:flex; justify-content:flex-end;}
.signature-block .sign-inner{text-align:center; font-size:0.9rem;}
.signature-block .sign-space{height:70px;}

@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .container{max-width:100%; padding:0;}
  .card{border:none; padding:0;}
}

@media (max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .invoice-head{flex-direction:column;}
  .invoice-head .meta{text-align:left;}
}