/* Cute Marun design tokens */
:root{
  --marun:#C00000; --marun-gelap:#900000; --marun-muda:#FBE7E3;
  --krem:#FFF8F3; --kertas:#FFFFFF; --tinta:#2B2B2B; --redup:#8A7B72;
  --garis:#F0DCD2; --oranye:#FF9E1B; --pink:#FF5A7A; --navy:#0A2F7A;
  --hijau:#2E7D32; --radius:18px;
  --bayangan:0 6px 24px rgba(192,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--krem);color:var(--tinta);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:url(../assets/paw-pattern.svg) repeat;background-size:180px}
h1,h2,h3{margin:.2em 0}
button{font-family:inherit;cursor:pointer}
/* bar marun atas */
.topbar{height:12px;background:var(--marun)}
header.app{display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:#fff;border-bottom:2px solid var(--garis);position:sticky;top:0;z-index:5}
header.app img{width:52px;height:52px}
header.app .judul{font-family:"Parisienne","Dancing Script",cursive;
  font-size:34px;color:var(--marun);line-height:1}
header.app small{color:var(--redup)}
nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
nav button{border:2px solid var(--marun);background:#fff;color:var(--marun);
  border-radius:999px;padding:8px 16px;font-weight:800}
nav button.aktif,nav button:hover{background:var(--marun);color:#fff}
main{max-width:1080px;margin:0 auto;padding:20px;position:relative}
.kartu{background:#fff;border:2px solid var(--garis);border-radius:var(--radius);
  box-shadow:var(--bayangan);padding:18px;margin-bottom:18px}
label{font-weight:800;font-size:14px;display:block;margin:10px 0 4px}
input,select{width:100%;padding:10px 12px;border:2px solid var(--garis);
  border-radius:12px;font-family:inherit;font-size:15px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--marun);
  box-shadow:0 0 0 3px var(--marun-muda)}
.bariskolom{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.bariskolom{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
th{background:var(--marun);color:#fff;padding:8px;text-transform:uppercase;
  font-size:12px;letter-spacing:.3px}
td{border:1px solid var(--garis);padding:6px 8px}
tbody tr:nth-child(even){background:#FFF4EE}
tbody tr:hover{background:#FFE9D6}
td.kanan,th.kanan{text-align:right}
td.tengah{text-align:center}
.btn{background:var(--marun);color:#fff;border:none;border-radius:999px;
  padding:10px 20px;font-weight:800;font-size:15px}
.btn:hover{background:var(--marun-gelap);transform:scale(1.02)}
.btn.ghost{background:#fff;color:var(--marun);border:2px solid var(--marun)}
.btn.kecil{padding:5px 12px;font-size:13px}
.btn.bahaya{background:#fff;color:var(--marun);border:2px solid var(--marun)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{display:inline-block;border-radius:999px;padding:3px 12px;font-size:12px;
  font-weight:800}
.badge.ok{background:#E6F4EA;color:var(--hijau)}
.badge.kosong{background:var(--marun-muda);color:var(--marun)}
.kosong{text-align:center;padding:36px 10px;color:var(--redup)}
.kosong img{width:130px}
.peringatan{background:#FFF3E0;border:2px dashed var(--oranye);border-radius:12px;
  padding:10px 14px;margin-top:10px;font-size:14px}
/* ====== kertas invoice (mirip PDF lama) ====== */
.kertas{background:#fff;max-width:800px;margin:0 auto;padding:36px 40px;color:#111}
.kertas .bar{height:14px;background:var(--marun)}
.kop{display:flex;justify-content:space-between;align-items:flex-start;margin:14px 0 6px}
.kop .hello{font-family:"Parisienne","Dancing Script",cursive;font-size:64px;line-height:1}
.kop .sub{font-weight:800;letter-spacing:1px;font-size:13px}
.kop kanan,.kop .kanan{text-align:right}
.kop img{width:110px;height:110px}
.kop .tgl{color:var(--navy);font-weight:800;font-size:13px;border-top:1px solid #ccc;
  padding-top:4px;margin-top:6px}
.garis-ganda{border-top:2px solid #111;border-bottom:1px solid #111;height:5px;margin:8px 0}
.info{display:flex;justify-content:space-between;margin:10px 0;font-size:14px}
.info .bill{text-align:center;font-weight:700}
.kertas table{font-size:12px}
.kertas th{background:var(--marun)}
.kertas td{border:1px solid #111}
.totalbox{text-align:right;margin-top:6px;font-size:14px}
.totalbox .total{font-weight:800;font-size:17px;border-top:1px solid #111;
  border-bottom:3px double #111;display:inline-block;padding:2px 0 2px 30px}
.thanks{background:var(--marun);text-align:center;font-weight:800;
  padding:6px;margin-top:50px;letter-spacing:1px}
@media print{
  body::before,header.app,.noprint{display:none!important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .kartu{border:none;box-shadow:none;margin:0;padding:0}
  .kertas{max-width:none;padding:0}
  .kertas th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .thanks,.kertas .bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ====== mobile ====== */
@media(max-width:700px){
  header.app{flex-wrap:wrap;padding:10px 12px;gap:8px}
  header.app img{width:44px;height:44px}
  header.app .judul{font-size:26px}
  nav{width:100%;margin-left:0}
  nav button{flex:1 1 auto;min-height:44px;padding:10px 8px;font-size:14px}
  main{padding:12px}
  .kartu{padding:12px;border-width:1px}
  label{font-size:12px;font-weight:700;margin:8px 0 3px}
  input,select{font-size:16px;padding:8px 10px;border-width:1px;border-radius:10px}
  .btn{min-height:44px;padding:10px 16px}
  .btn.kecil{min-height:40px}
  .tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .in-nama{min-width:170px}
  .in-sak,.in-harga{width:96px}
  .kertas{padding:18px 12px}
  .kop .hello{font-size:42px}
  .kop img{width:76px;height:76px}
  .kertas table{font-size:10px}
  .kertas .tabel-gulir{display:block}
  .totalbox{font-size:13px}
  .totalbox .total{font-size:15px;padding-left:12px}
  .thanks{margin-top:28px}
  td .btn.kecil{min-height:38px;min-width:40px;border-width:1px}
  /* form barang jadi kartu ramping */
  #tbl-form thead{display:none}
  #tbl-form,#tbl-form tbody{display:block}
  #tbl-form tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;
    padding:10px 12px;background:#fff;border:1px solid var(--garis);
    border-radius:12px;margin-bottom:8px}
  #tbl-form tbody tr:last-child{margin-bottom:0}
  #tbl-form td{display:block;border:none;padding:0;background:transparent!important;text-align:left!important}
  #tbl-form td::before{content:attr(data-label);display:block;font-size:10px;
    font-weight:700;color:var(--redup);margin-bottom:2px}
  #tbl-form td.td-barang,#tbl-form td.c-tot{grid-column:1/-1}
  #tbl-form td.td-del{grid-column:1/-1;text-align:right!important}
  #tbl-form td.td-del::before{content:none}
  #tbl-form td.tengah{padding:6px 10px;background:#FAF6F1;border-radius:8px;min-height:34px}
  main{padding-bottom:40px}
  .kertas table{font-size:10px}
  .kertas .kop{flex-wrap:wrap;gap:6px}
  .kertas .kop .hello{font-size:36px}
}