/* TP central — SATU-SATUNYA file CSS panduan (isi ulang gaya dari versi PHP).
   GUIDE (halaman baru WAJIB ikut, jangan bikin pola sendiri):
   - Font: teks/label/input/tombol/tabel = 18px. Judul h1-h6 = 24px bold.
     Angka tagihan kasir = 32px (#txtTotal). Ikon/teks kecil pengecualian.
   - Warna: --hijau #27ae60 (aksi utama), --biru #2980b9 (info/simpan),
     --merah #e74c3c (hapus/tutup), --gelap #1a1a2e (header), --bg #f2f2f2.
   - Tombol: .btn (radius 10px, bold, UPPERCASE). Varian: .btn-konfirmasi/.btn-hijau/.btn-success,
     .btn-tutup/.btn-danger, .btn-biru/.btn-primary, .btn-abu/.btn-light.
   - Kartu: .card-s (putih, radius 10px, padding 12px, label di dalamnya bold).
   - Modal: .modal-custom (tirai) + .modal-content-custom (kotak, max 500px) +
     .modal-title (bar hitam) + .modal-x (tombol tutup merah).
   - htmx: .htmx-request -> elemen sedang dimuat; .klik -> teks bisa diklik. */
:root { --hijau: #27ae60; --hijau-tua: #1e8449; --merah: #e74c3c; --biru: #2980b9; --bg: #f2f2f2; --gelap: #1a1a2e; }
html, body, input, button, select, table { font-family: sans-serif; font-size: 18px !important; }
h1, h2, h3, h4, h5, h6 { font-size: 24px !important; margin: 0; font-weight: bold; }
html, body, input, button, select { box-shadow: none !important; transition: none !important; }
body, input, button, select { background: var(--bg); color: #212529; font-size: 18px; }
.btn { border-radius: 10px; border: none; font-weight: bold; padding: 12px; font-size: 18px !important; text-transform: uppercase; }
.btn-konfirmasi, .btn-hijau, .btn-success { background: var(--hijau) !important; color: #fff; }
.btn-tutup, .btn-danger { background: var(--merah) !important; color: #fff; }
.btn-biru, .btn-primary { background: var(--biru) !important; color: #fff; }
.btn-abu, .btn-light { background: #ddd !important; color: #212529; }
.btn:hover { filter: brightness(0.93); }
.btn-biru:hover, .btn-konfirmasi:hover, .btn-tutup:hover, .btn-hijau:hover, .btn-primary:hover, .btn-success:hover, .btn-danger:hover { color: #fff !important; }
.btn-abu:hover, .btn-light:hover { color: #212529 !important; }
small, .small { font-size: 1em !important; }
.form-control, .form-select { border-radius: 10px; border: 1px solid #e3e8e6; background: #fff; }
.form-control:focus, .form-select:focus { border-color: #e3e8e6; outline: none; }
.card-s { background: #fff; border: 1px solid #e3e8e6; border-radius: 10px; padding: 12px; }
.card-s label { font-weight: bold; }
.card-s > :first-child { margin-top: 0 !important; }
.card-w, .card-w .small, .card-w .big { color: #fff !important; }
.modal-custom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; overflow-y: auto; padding: 10px 0; align-items: flex-start; }
.modal-title { background: #000 !important; color: #fff !important; display: block; padding: 10px 15px; margin: -15px -15px 12px; position: relative; padding-right: 46px !important; }
.modal-content-custom { background: #fff; padding: 15px; width: 95%; max-width: 500px; margin: 0 auto; display: block; border-radius: 10px; }
.modal-scroll { max-height: calc(100vh - 20px); overflow-y: auto; }
.modal-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: #e74c3c !important; color: #fff !important; border: none; border-radius: 6px; width: 34px; height: 34px; font-size: 22px !important; font-weight: bold; line-height: 1; padding: 0; }
[x-cloak] { display: none !important; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* htmx */
.htmx-request { opacity: .55; }
.klik { cursor: pointer; text-decoration: none; color: #212529; font-weight: bold; }
.klik:hover { text-decoration: underline; }
/* Galat 422 dari server (mis. "Stok kurang") come sebagai satu kotak merah.
   Target-nya #wrapStruk, jadi kalau isinya cuma galat, made it melayang. */
#wrapStruk:has(> .sisa-merah) { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999999; max-width: 92vw; }