:root{
--bg:#0b1220;--card:#101826;--ink:#e6eefb;--muted:#a6b3c9;--brand:#3b82f6;--danger:#ef4444;--ok:#10b981;--line:#1b2434;--paper:#ffffff;
--bg-light:#dfe6ef;--card-light:#f3f6fa;--ink-light:#0f172a;--line-light:#c1ccdc;--export:#eab308;
}
/* ===== THEME PRESETS (apply class pada ) ===== */
.theme-carbon{
--bg:#0a0f16; --card:#101827; --ink:#e6f0ff; --muted:#9cb2cf; --brand:#06b6d4; --ok:#10b981; --danger:#ef4444; --export:#eab308; --line:#1a2433; --paper:#ffffff;
--bg-light:#eaf2f9; --card-light:#f3f7fc; --ink-light:#0f172a; --line-light:#c8d6ea;
}
.theme-emerald{
--bg:#07110d; --card:#0d1b16; --ink:#e8fbf5; --muted:#a7c7ba; --brand:#22c55e; --ok:#22c55e; --danger:#ef4444; --export:#f59e0b; --line:#12231c; --paper:#ffffff;
--bg-light:#eaf7f0; --card-light:#fbf5f6; --ink-light:#102018; --line-light:#c9e8d7;
}
.theme-royal{
--bg:#0b1020; --card:#121834; --ink:#eef2ff; --muted:#b3b7d7; --brand:#6366f1; --ok:#10b981; --danger:#ef4444; --export:#f59e0b; --line:#1c2240; --paper:#ffffff;
--bg-light:#e9ecff; --card-light:#f2f4ff; --ink-light:#0e1330; --line-light:#cdd3fb;
}
.theme-plum{
--bg:#120914; --card:#1a0f22; --ink:#fdeefe; --muted:#d0b6d9; --brand:#d946ef; --ok:#22c55e; --danger:#ef4444; --export:#f4bfbf; --line:#271832; --paper:#ffffff;
--bg-light:#f8eefb; --card-light:#fbf5fe; --ink-light:#ead8f2;
}
/* =================================================== */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:var(--bg);color:var(--ink);line-height:1.5;transition:background .3s,color .3s}
.light-theme{--bg:var(--bg-light);--card:var(--card-light);--ink:var(--ink-light);--line:var(--line-light)}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.brand-title{margin:0;font-weight:900;font-size:28px;letter-spacing:.2px;color:var(--ink);line-height:1.15;text-wrap:balance;display:flex;gap:10px;align-items:baseline}
.brand-title .tag{font-weight:600;font-size:13px;opacity:.75}
.brand-title .ver{font-size:12px;opacity:.35}
.grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.aside{order:-1}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.card h2{margin:0 0 10px;font-size:14px;font-weight:800;color:#cfe0ff}
.light-theme .card h2{color:#0f172a}
details.qx{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:12px}
details.qx[open]{border-color:#2c3a56}
details.qx>summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:800;font-size:14px;color:#cfe0ff;display:flex;align-items:center;gap:8px}
.light-theme details.qx>summary{color:#0f172a}
details.qx>summary::before{content:"▸";transition:transform .2s}
details.qx[open]>summary::before{transform:rotate(90deg)}
details.qx .content{padding:12px 14px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.row{grid-template-columns:1fr}.card{padding:20px}}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0c1422;color:var(--ink)}
.light-theme input,.light-theme textarea,.light-theme select{background:#eef2f7;color:#0f172a;border-color:#c7d0df}
.muted{color:#8ea0bf;font-size:12px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
button{border:0;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700;transition:transform .15s}
button:hover{transform:translateY(-1px)}
.btn{background:var(--brand);color:#fff}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:var(--danger);color:#fff}.btn-ok{background:var(--ok);color:#fff}.btn-export{background:var(--export);color:#111827}
.items{width:100%;border-collapse:collapse}
.items th,.items td{border-bottom:1px solid var(--line);padding:8px}
.items th{font-size:12px;color:#bfd3ff;font-weight:800;text-align:left;user-select:none;cursor:pointer}
.items th.nosort{cursor:default}
.items td input{width:100%;padding:6px;border-radius:8px;border:1px solid var(--line);background:#0c1422;color:#e6eefb}
.light-theme .items td input{background:#eef2f7;color:#0f172a;border-color:#c7d0df}
.items .qty,.items .price{max-width:150px}.items .unit{max-width:120px}.items .group{max-width:200px}
.drag-col,.grab{width:26px;text-align:center;color:#9ca3af}.grab{cursor:grab;font-weight:800}tr.dragging{opacity:.6}
.sort-ind{margin-left:6px;opacity:.8}
.preview-wrap{background:transparent}
/* ===== PAPER (preview) ===== */
.paper{background:var(--paper);color:#0b1220;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);border:1px solid #e9eef5;padding:16px;position:relative;margin-bottom:16px}
.paper .head{display:flex;justify-content:space-between;gap:12px;padding:24px 24px 8px}
.paper .brand{display:flex;gap:12px;align-items:center}
/* --- LOGO: auto-resize + clickable ---------------------------------- */
.logo-wrap{
width:56px;height:56px;
border:1px solid #e5e7eb;background:#fff;border-radius:8px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;cursor:pointer;position:relative;
}
.logo-wrap:hover{box-shadow:0 0 0 2px rgba(59,130,246,.25)}
/* jika guna ![]()
*/
.logo-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* jika tiada logo, tunjuk kotak dashed */
.logo-box{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
color:#6b7280;font-size:10px;border:2px dashed #d1d5db;background:#fff;
}
/* guard: elakkan img bebas membesar dalam brand */
.paper .brand img{max-width:100%;height:auto;display:block}
/* -------------------------------------------------------------------- */
.paper .bname{font-size:18px;font-weight:800}
.paper .doc-title{font-size:26px;font-weight:900;letter-spacing:.4px}
.paper .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px 10px}
.paper table{width:100%;border-collapse:collapse}
.paper th,.paper td{border-bottom:1px solid #e9eef5;padding:10px}
.paper th{text-align:left;font-size:12px;color:#374151}
.right{text-align:right}
.paper .totals{padding:8px 24px 24px;display:grid;grid-template-columns:1fr 300px;gap:14px}
.paper .trow td{border:0;padding:6px 0}
.paper .trow td:last-child{text-align:right}
.paper .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 24px 24px}
.sig{min-height:60px;border-bottom:1px dashed #cbd5e1;display:flex;align-items:flex-end;position:relative;margin-bottom:4px}
.sig img,.sig canvas{max-height:60px;max-width:220px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
.signer-name{font-size:13px;color:#374151;margin-top:4px}
/* --- QR: auto-resize + clickable ------------------------------------ */
.qr-wrap{
width:120px;height:120px;
border:1px solid #e5e7eb;background:#fff;border-radius:10px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;cursor:pointer;
}
.qr-wrap:hover{box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.qr{max-width:100%;max-height:100%;object-fit:contain}
.qr-box{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
color:#6b7280;font-size:11px;border:2px dashed #d1d5db;background:#fff;
}
/* Status invois berwarna */
.status-badge{display:inline-block;color:#fff;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;margin-top:6px}
.status-badge.paid{background:var(--ok)}
.status-badge.unpaid{background:var(--danger)}
.accent{background:#111827;color:#fff;padding:2px 8px;border-radius:999px;font-size:11px}
/* ===== Combo Dropdown (Unit/Kumpulan) ===== */
.combo{position:relative}
.combo input{padding-right:28px}
.combo .combo-btn{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
background:transparent; border:1px solid var(--line); color:var(--ink); padding:2px 6px;
border-radius:8px; font-weight:800; cursor:pointer; line-height:1;
}
.light-theme .combo .combo-btn{background:#eef2f7;color:#0f172a;border-color:#c7d0df}
.combo .combo-menu{
position:absolute; left:0; right:0; top:calc(100% + 6px);
background:var(--card); border:1px solid var(--line); border-radius:10px;
max-height:220px; overflow:auto; display:none; z-index:40;
box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.light-theme .combo .combo-menu{background:#f8fafc;border-color:#c7d0df}
.combo .combo-menu.show{display:block}
.combo .combo-menu li{list-style:none; padding:8px 10px; cursor:pointer; font-size:14px}
.combo .combo-menu li:hover, .combo .combo-menu li.active{background:rgba(255,255,255,.08)}
.light-theme .combo .combo-menu li:hover, .light-theme .combo .combo-menu li.active{background:rgba(0,0,0,.06)}
/* print */
.print-header,.print-footer,.print-watermark{display:none}
@page{size:A4;margin:16mm}
@media print{
body{background:#fff!important;color:#000!important}
header,.controls,.card,.sig-controls,.logo-controls{display:none!important}
.preview-wrap{display:block!important}
.paper{box-shadow:none!important;border:0!important;border-radius:0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;margin-bottom:0}
#preview{padding:0!important;margin:0!important}
.paper{padding-top:26mm;padding-bottom:18mm}
.print-header,.print-footer{
display:block!important;position:fixed;left:0;right:0;padding:6mm 16mm;font-size:11px;color:#6b7280;background:#ffffff
}
.print-header{top:0;border-bottom:1px solid #e5e7eb}
.print-footer{bottom:0;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.page-counter::after{content:"Page " counter(page) " / " counter(pages)}
.paper table tr{break-inside:avoid;page-break-inside:avoid}
.tagline,.version-badge{display:none!important}
}
.error{color:var(--danger);font-size:11px;display:block;margin-top:4px}
.light-theme .error{color:#dc2626}
/* ===== Butang kalendar (📅) di dalam input tarikh =====
Struktur HTML (auto oleh JS):
*/
.cal-wrap{ position:relative; display:block; }
.cal-wrap > input[type="date"]{ padding-right:42px; } /* ruang untuk butang di kanan */
.cal-btn{
position:absolute; right:6px; top:50%; transform:translateY(-50%);
min-width:28px; height:28px; padding:0 6px;
border:1px solid var(--line); border-radius:8px;
background:transparent; color:var(--ink);
font-weight:800; line-height:1; cursor:pointer; user-select:none;
}
.cal-btn:hover{ transform:translateY(-50%) translateY(-1px); }
.cal-btn:focus{ outline:2px solid rgba(59,130,246,.6); outline-offset:2px; }
/* Tema cerah: pastikan warna sepadan */
.light-theme .cal-btn{ background:#eef2f7; color:#0f172a; border-color:#c7d0df; }
/* Jika parent label/row sempit, pastikan butang muat */
@media (max-width:640px){
.cal-btn{ min-width:26px; height:26px; }
.cal-wrap > input[type="date"]{ padding-right:38px; }
}
.actions {
display: grid; grid-template-columns: repeat(4, minmax(140px,1fr));
gap: 10px; margin-top: 10px;
}
.actions.secondary { grid-template-columns: repeat(5, minmax(120px,1fr)); }
.actions button {
display:flex; align-items:center; justify-content:center; gap:8px;
min-height:42px; font-weight:800; border-radius:12px;
}
.actions button span:first-child{ font-size:18px; line-height:1 }