/* Palet: kertas termal (putih kebiruan), tinta biru-hitam, petrol sebagai aksen tunggal */
:root {
    --canvas: #dde5e8;
    --panel: #f5f8f9;
    --ink: #1b2430;
    --muted: #55626e;
    --line: #b9c6cc;
    --petrol: #135d66;
    --petrol-dark: #0d444b;
    --danger: #b3261e;
    --paper: #fdfcf8;
    --ok: #1d7a46;
}

html { scroll-padding-top: 5rem; }
body { background: var(--canvas); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; }

/* ---------- panel ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.panel > header { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.panel > header h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; }
.panel > .body { padding: 1.1rem; }

/* ---------- form ---------- */
.lbl { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; }
.inp {
    width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 4px;
    padding: .5rem .65rem; font-size: .93rem; color: var(--ink); min-height: 2.45rem;
}
.inp:focus { outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol); }
.inp.invalid { border-color: var(--danger); background: #fff6f5; outline: 1px solid var(--danger); }
.inp[readonly] { background: #eef2f4; color: var(--muted); }
textarea.inp { resize: vertical; }
.chk { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink); cursor: pointer; user-select: none; white-space: nowrap; }
.chk input { width: 1.05rem; height: 1.05rem; accent-color: var(--petrol); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- tombol ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-weight: 500; font-size: .9rem; padding: .5rem .95rem; min-height: 2.45rem;
    border-radius: 4px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--petrol); color: var(--petrol-dark); }
.btn:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--petrol-dark); border-color: var(--petrol-dark); color: #fff; }
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.btn-icon { padding: .35rem .6rem; min-height: 2.1rem; }

/* ---------- status printer ---------- */
.status { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; }
.status i { width: .7rem; height: .7rem; border-radius: 50%; background: #9aa7b0; display: inline-block; }
.status.on i { background: var(--ok); box-shadow: 0 0 0 3px rgba(29, 122, 70, .2); }
.status.on { color: var(--ok); }

/* ---------- tabel item ---------- */
.items { width: 100%; border-collapse: collapse; min-width: 640px; }
.items th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--muted); padding: 0 .35rem .4rem; }
.items td { padding: .2rem .35rem; vertical-align: middle; }
.items th.num { text-align: right; }
.sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.sum dt { font-size: .78rem; color: var(--muted); }
.sum dd { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum dd.big { font-size: 1.45rem; color: var(--petrol-dark); }
@media (max-width: 640px) { .sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- pratinjau struk ---------- */
.paper-wrap { display: flex; justify-content: center; padding: 1.2rem .8rem 1.6rem; background: #c7d2d7; border-radius: 0 0 6px 6px; overflow-x: auto; }
.paper {
    --cols: 32;
    position: relative; background: var(--paper); color: #111;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.38;
    width: calc(var(--cols) * 1ch + 2.2rem); padding: 1.1rem 1.1rem 1.4rem; flex: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 8px 18px -10px rgba(20, 35, 45, .55);
}
.paper::after { /* tepi sobek di bawah struk */
    content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
    background: linear-gradient(135deg, var(--paper) 5px, transparent 0) 0 0 / 10px 10px,
                linear-gradient(225deg, var(--paper) 5px, transparent 0) 0 0 / 10px 10px;
}
.paper .rl { white-space: pre; min-height: 1.38em; }
.paper .rl-b { font-weight: 700; }
.paper .rl-title { font-weight: 700; font-size: 2em; line-height: 1.2; min-height: 0; }
.paper .rl-gap { min-height: 1.4em; }

/* ---------- navigasi ---------- */
.nav a { padding: .4rem .8rem; border-radius: 4px; font-size: .92rem; font-weight: 500; color: #d8e6e9; }
.nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav a.active { background: #fff; color: var(--petrol-dark); }

/* toastr: mengikuti palet */
#toast-container > div { box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5); opacity: .97; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Pastikan utilitas Tailwind "hidden" menang atas display khusus */
.hidden { display: none !important; }