/* =====================================================================
   MYT KASIR — gaya versi web.

   Token warna, radius, dan ukuran DISALIN PERSIS dari Tema.kt aplikasi
   Android. Setiap komponen di sini punya pasangan langsung di aplikasi:

     .panel-tinta   -> Panel Tinta (Surface Warna.tinta + TepiStruk)
     .nav-utama     -> BilahBawah / RailSamping (AktivitasUtama.kt)
     .aksi-cepat    -> AksiCepat (LayarBeranda.kt)
     .kartu-menu    -> KartuMenu (LayarBeranda.kt)
     .baris-trx     -> BarisTransaksiRingkas (LayarBeranda.kt)

   Aturan yang ikut dibawa dari aplikasi:
   - "Gelap + angka mono = uangmu" -> .panel-tinta
   - Angka uang selalu font mono agar kolom rupiah lurus
   - Ungu HANYA untuk aksi utama, nav aktif, dan total akhir; chip aktif
     memakai Tinta gelap
   - Tanpa kerangka CSS pihak ketiga: satu berkas ini saja
   ===================================================================== */

:root {
  --ungu: #6C4CF1;
  --ungu-gelap: #5438C6;
  --lavender: #EFEBFD;
  --lavender-tua: #E2DBFC;
  --tinta: #191921;
  --tinta-sekunder: #A9A8B6;
  --tinta-garis: #32323C;
  --latar: #FAFAF8;
  --putih: #FFFFFF;
  --garis: #E8E7E3;
  --latar-lembut: #F0EFEC;
  --teks: #191921;
  --teks-abu: #71707A;
  --nonaktif: #D8D7DC;
  --teks-nonaktif: #A3A2AB;
  --ikon-navy: #1D2B50;
  --hijau: #177A4E;  --hijau-muda: #E4F2EA;
  --merah: #B23B28;  --merah-muda: #F8E4DF;
  --oranye: #96690A; --oranye-muda: #F6ECD7;
  --laut: #2F6690;   --laut-muda: #E2ECF3;
  --mono: "IBM Plex Mono", "Roboto Mono", Consolas, monospace;
  --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--latar);
  color: var(--teks);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

/* =====================================================================
   NAVIGASI — di ponsel bilah bawah, di layar lebar rail kiri.
   Bentuk bawaannya (mobile-first) meniru BilahBawah aplikasi: bar putih
   solid, garis atas tipis, dan tombol Kasir bundar yang menonjol setengah
   keluar bar dengan cincin warna latar.
   ===================================================================== */
.kerangka { display: flex; flex-direction: column; min-height: 100vh; }

.nav-utama {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: space-around;
  height: 64px; padding: 0 4px;
  background: var(--putih);
  border-top: 1px solid var(--garis);
}
.nav-utama .merek { display: none; }
.nav-utama a.item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; height: 100%;
  color: var(--teks-abu); font-size: 11px; font-weight: 500;
}
.nav-utama a.item .ikon { display: block; width: 24px; height: 24px; }
.nav-utama a.item svg { width: 100%; height: 100%; display: block; }
.nav-utama a.item.aktif { color: var(--ungu); font-weight: 700; }
/* Tab aktif di aplikasi memakai ikon versi ISI (filled), bukan garis.
   Di web efek yang sama dicapai dengan mengisi bidang ikonnya. */
.nav-utama a.item.aktif svg { fill: currentColor; fill-opacity: .16; }

.nav-utama .tombol-kasir {
  flex: 1; position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 9px;
  color: var(--teks-abu); font-size: 11px; font-weight: 500;
}
.nav-utama .tombol-kasir .bulat {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--latar);                   /* cincin latar (ring-4) */
  display: grid; place-items: center;
}
.nav-utama .tombol-kasir .bulat::before {
  content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ungu); box-shadow: 0 8px 18px rgba(108, 76, 241, .38);
}
.nav-utama .tombol-kasir .bulat svg {
  position: relative; width: 26px; height: 26px; color: #fff;
}
.nav-utama .tombol-kasir:active .bulat { transform: translateX(-50%) scale(.92); }
.nav-utama .tombol-kasir .teks-kasir { position: relative; }

.isi { flex: 1; min-width: 0; padding: 0 20px 96px; }

/* Layar lebar: bilah berubah menjadi rail kiri (JenisLayar.Lebar) */
@media (min-width: 900px) {
  .kerangka { flex-direction: row; }
  .nav-utama {
    position: sticky; top: 0; bottom: auto; left: auto; right: auto;
    width: 100px; flex: 0 0 100px; height: 100vh;
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 4px; padding: 14px 0;
    border-top: 0; border-right: 1px solid var(--garis);
  }
  .nav-utama .merek {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--ungu); color: #fff;
    font-weight: 800; font-size: 18px; margin-bottom: 12px;
  }
  .nav-utama a.item {
    flex: none; width: 84px; height: auto; padding: 11px 4px;
    border-radius: 14px; gap: 4px;
  }
  .nav-utama a.item.aktif { background: var(--lavender); }
  .nav-utama .tombol-kasir {
    flex: none; width: 84px; height: auto; padding: 0; margin: 10px 0 6px;
    gap: 6px; justify-content: center;
  }
  .nav-utama .tombol-kasir .bulat {
    position: static; transform: none; width: 56px; height: 56px;
    background: transparent;
  }
  .nav-utama .tombol-kasir .bulat::before { width: 56px; height: 56px; }
  /* Isi dibatasi lebarnya lalu ditengahkan: di monitor lebar, baris yang
     merentang penuh membuat mata jauh berpindah antara nama dan nominal —
     aplikasi tidak pernah selebar itu. */
  .isi { padding: 0 24px 40px; max-width: 1180px; margin: 0 auto; }
}

/* =====================================================================
   TATA LETAK ISI — aplikasi memakai padding tepi 20dp di semua layar.
   ===================================================================== */
/* Padding tepi 20px sudah dipegang .isi (sama dengan padding 20dp di
   aplikasi). .wadah dipertahankan sebagai penanda bagian, tanpa padding
   ganda. */
.wadah { }
.sela-14 { height: 14px; } .sela-16 { height: 16px; } .sela-20 { height: 20px; }
.sela-28 { height: 28px; }

/* Kepala layar bergaya aplikasi: sapaan kecil, judul tebal, sub abu. */
.kepala-layar { padding: 16px 0 14px; display: flex; align-items: flex-start; gap: 12px; }
.kepala-layar .sapaan {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--teks-abu);
}
.kepala-layar .sapaan svg { width: 16px; height: 16px; color: var(--ikon-navy); }
.kepala-layar .nama-apl {
  font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15;
  margin-top: 2px;
}
.kepala-layar .nama-toko { font-size: 13px; color: var(--teks-abu); }
.kepala-layar .kotak-kanan {
  width: 46px; height: 46px; border-radius: 15px; background: var(--putih);
  display: grid; place-items: center; flex: 0 0 46px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(25,25,33,.06);
}
.kepala-layar .kotak-kanan svg { width: 22px; height: 22px; color: var(--ikon-navy); }
.kepala-layar .kotak-kanan img { width: 100%; height: 100%; object-fit: cover; }

.judul-halaman { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 4px; }
.sub-halaman { color: var(--teks-abu); font-size: 13px; margin: 0 0 18px; }

/* ---------- Kartu ---------- */
.kartu {
  background: var(--putih);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(25, 25, 33, .06);
  padding: 18px;
}
.kartu.rapat { padding: 0; }
.kartu + .kartu { margin-top: 14px; }
.label-seksi {
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--teks-abu); margin: 0 0 10px;
}
.baris-seksi { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.baris-seksi .label-seksi { margin: 0; flex: 1; }
.tautan-abu {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; color: var(--teks-abu);
}
.tautan-abu svg { width: 16px; height: 16px; }

/* =====================================================================
   PANEL TINTA — elemen signature. Sudut atas 20px, tepi bawah BERGERIGI
   (TepiStruk di aplikasi): gerigi bagian dari bentuk panel, bukan elemen
   tempelan, sehingga tidak ada garis batas lurus yang ikut terlihat.
   ===================================================================== */
.panel-tinta {
  background: var(--tinta); color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 26px;
  box-shadow: 0 8px 20px rgba(25, 25, 33, .18);
  --gigi: 10px;
  -webkit-mask:
    radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) 0 100% / 16px var(--gigi) repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--gigi)) no-repeat;
          mask:
    radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) 0 100% / 16px var(--gigi) repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--gigi)) no-repeat;
}
.panel-tinta .label-seksi { color: var(--tinta-sekunder); }
.panel-tinta .kecil { color: var(--tinta-sekunder); font-size: 12px; }
.panel-tinta .besar {
  font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.2;
}
.panel-tinta hr { border: 0; border-top: 1px solid var(--tinta-garis); margin: 14px 0; }
.pil-tinta {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--tinta-garis); color: var(--tinta-sekunder);
  font-size: 11px; font-weight: 700;
}
/* Tiga statistik di dalam panel, dipisah garis tipis vertikal. */
.stat-tinta { display: flex; margin-top: 18px; }
.stat-tinta > div { flex: 1; text-align: center; padding: 0 4px; }
.stat-tinta > div.lebar { flex: 1.3; }
.stat-tinta .pemisah { flex: 0 0 1px; background: var(--tinta-garis); padding: 0; }
.stat-tinta .cip {
  width: 30px; height: 30px; border-radius: 9px; background: var(--tinta-garis);
  display: grid; place-items: center; margin: 0 auto 6px;
}
.stat-tinta .cip svg { width: 16px; height: 16px; color: #fff; }
.stat-tinta .nilai { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.stat-tinta .label { font-size: 9px; color: var(--tinta-sekunder); line-height: 11px; }

.uang { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Pil naik/turun persen (hijau/merah) seperti di panel aplikasi. */
.pil-delta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.pil-delta svg { width: 12px; height: 12px; }
.pil-naik { background: var(--hijau-muda); color: var(--hijau); }
.pil-turun { background: var(--merah-muda); color: var(--merah); }
.pil-turun svg { transform: rotate(180deg); }

/* =====================================================================
   AKSI CEPAT — empat lingkaran; hanya SATU yang ungu (aksi utama).
   ===================================================================== */
.aksi-cepat { display: flex; align-items: center; padding: 16px 0; }
.aksi-cepat a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--teks); text-align: center;
}
.aksi-cepat .bulat {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--latar-lembut);
  display: grid; place-items: center;
  transition: transform .1s ease;
}
.aksi-cepat a:active .bulat { transform: scale(.93); }
.aksi-cepat .bulat svg { width: 24px; height: 24px; color: var(--ikon-navy); }
.aksi-cepat .utama { background: var(--ungu); }
.aksi-cepat .utama svg { color: #fff; }

/* ---------- Kartu Menu Utama (2 kolom) ---------- */
.grid-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kartu-menu {
  background: var(--putih); border-radius: 14px; padding: 14px;
  box-shadow: 0 1px 2px rgba(25,25,33,.06);
  display: flex; align-items: center; gap: 11px;
}
.kartu-menu > svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--ikon-navy); }
.kartu-menu .teks { min-width: 0; }
.kartu-menu .judul { font-size: 12px; font-weight: 700; line-height: 14px; }
.kartu-menu .sub { font-size: 10px; color: var(--teks-abu); line-height: 12px; margin-top: 2px; }
.pil-aktif {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--hijau-muda); color: var(--hijau);
  font-size: 10px; font-weight: 600;
}
.pil-aktif::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hijau);
}

/* ---------- Banner insight ---------- */
.banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--latar-lembut); border-radius: 18px; padding: 18px;
}
.banner .judul { font-size: 14px; font-weight: 700; }
.banner .sub { font-size: 12px; color: var(--teks-abu); line-height: 16px; }
.banner .pil {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  background: var(--putih); border-radius: 999px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; color: var(--ungu);
}
.banner .pil svg { width: 16px; height: 16px; }

/* ---------- Baris transaksi ringkas ---------- */
.baris-trx {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}
.baris-trx + .baris-trx { border-top: 1px solid var(--garis); }
.baris-trx .avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ungu);
  color: #fff; font-size: 15px; font-weight: 700;
  display: grid; place-items: center; flex: 0 0 40px;
}
.baris-trx .teks { flex: 1; min-width: 0; }
.baris-trx .nama {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.baris-trx .rinci { font-size: 11px; color: var(--teks-abu); margin-top: 2px; }
.baris-trx .kaki { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.cip-kecil {
  background: var(--latar-lembut); color: var(--teks-abu);
  border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 600;
}
.baris-trx .jam { font-size: 10px; color: var(--teks-abu); }
.baris-trx .nominal { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--hijau); }
.baris-trx > svg { width: 16px; height: 16px; color: var(--ikon-navy); flex: 0 0 16px; }

/* ---------- Tombol ---------- */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 13px 18px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: transform .08s ease, background .15s ease;
}
.tbl:active { transform: scale(.97); }
.tbl-utama { background: var(--ungu); color: #fff; width: 100%; }
.tbl-utama:hover { background: var(--ungu-gelap); }
.tbl-utama:disabled { background: var(--nonaktif); color: var(--teks-nonaktif); cursor: not-allowed; }
.tbl-sekunder { background: transparent; color: var(--ungu); border: 1px solid rgba(108,76,241,.5); width: 100%; }
.tbl-kecil { padding: 8px 12px; font-size: 12px; }
.tbl-bahaya { background: var(--merah-muda); color: var(--merah); }

/* ---------- Isian ---------- */
.kolom { margin-bottom: 16px; }
.kolom label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.kolom input, .kolom select, .kolom textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--garis); border-radius: 14px;
  background: var(--latar-lembut);
  font-family: inherit; font-size: 14px; color: var(--teks);
  transition: border-color .16s ease, background .16s ease;
}
.kolom input:focus, .kolom select:focus, .kolom textarea:focus {
  outline: none; border-color: var(--ungu); background: var(--putih);
}
.kolom input.angka { font-family: var(--mono); font-weight: 600; }
.petunjuk { font-size: 11px; color: var(--teks-abu); margin-top: 6px; }

/* ---------- Lencana ---------- */
.lencana {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.lencana-hijau { background: var(--hijau-muda); color: var(--hijau); }
.lencana-merah { background: var(--merah-muda); color: var(--merah); }
.lencana-oranye { background: var(--oranye-muda); color: var(--oranye); }
.lencana-ungu { background: var(--lavender); color: var(--ungu); }

/* ---------- Tabel ---------- */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--teks-abu); font-weight: 700;
  padding: 10px 8px; border-bottom: 1px solid var(--garis);
}
.tabel td { padding: 13px 8px; border-bottom: 1px solid var(--garis); font-size: 13px; }
.tabel tr:last-child td { border-bottom: 0; }
.kanan { text-align: right; }

/* ---------- Pesan & keadaan kosong ---------- */
.pesan {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
}
.pesan-galat { background: var(--merah-muda); color: var(--merah); }
.pesan-sukses { background: var(--hijau-muda); color: var(--hijau); }

.kosong { text-align: center; padding: 40px 20px; color: var(--teks-abu); }
.kosong .judul { font-size: 15px; font-weight: 700; color: var(--teks); margin-bottom: 4px; }
.kosong .tbl { margin-top: 14px; width: auto; }

/* ---------- Halaman masuk ---------- */
.masuk-bingkai { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.masuk-kotak { width: 100%; max-width: 380px; }

@media print {
  .nav-utama, .tanpa-cetak { display: none !important; }
  .isi { padding: 0; }
  body { background: #fff; }
}