/* ------------------------------------------------------------------
   Gaya tambahan Kasir Percetakan (bukan utility Tailwind).
   Berisi latar aplikasi, transisi sidebar, tema gelap, kanban, dan
   gaya kecil yang tidak nyaman dibuat dengan utility.
   ------------------------------------------------------------------ */

:root {
  --kp-ring: 99 102 241;
}

/* WAJIB: elemen dengan atribut `hidden` harus benar-benar tidak tampil,
   meskipun kelasnya mendefinisikan display (mis. .modal-lapis { display:flex }). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1f1b3a;
  background-color: #f5f4fb;
  background-image:
    radial-gradient(900px 520px at 8% -8%, rgba(129, 140, 248, 0.22), transparent 65%),
    radial-gradient(760px 460px at 92% 4%, rgba(192, 132, 252, 0.18), transparent 62%),
    radial-gradient(680px 420px at 50% 105%, rgba(56, 189, 248, 0.14), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

html.dark body {
  color: #e6e8f2;
  background-color: #070b18;
  background-image:
    radial-gradient(900px 520px at 6% -10%, rgba(79, 70, 229, 0.35), transparent 65%),
    radial-gradient(760px 460px at 96% 2%, rgba(139, 92, 246, 0.28), transparent 62%),
    radial-gradient(680px 420px at 50% 108%, rgba(14, 165, 233, 0.18), transparent 60%);
}

/* -------- tema: hanya tampilkan ikon yang sesuai -------- */
html:not(.dark) .only-dark,
html.dark .only-light { display: none !important; }

/* -------- sidebar (off-canvas di layar kecil) -------- */
.sidebar {
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 24px 0 60px -40px rgba(30, 27, 75, 0.5);
}
.sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
  .sidebar { transform: none !important; box-shadow: none; }
}

body.nav-terbuka { overflow: hidden; }

/* -------- scrollbar halus -------- */
* { scrollbar-width: thin; scrollbar-color: rgba(129, 140, 248, 0.5) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(129, 140, 248, 0.45); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* -------- brand: logo & tagline (tagline TIDAK boleh terpotong) -------- */
.brand-logo {
  height: 42px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-tagline {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
  /* dua baris penuh lebih baik daripada satu baris terpotong */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  overflow: hidden;
}
html.dark .brand-tagline { color: #a5b4fc; }

/* -------- tabel & angka -------- */
.angka { font-variant-numeric: tabular-nums; }

/* -------- kartu produk POS -------- */
.produk-kartu {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.produk-kartu:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px rgba(79, 70, 229, 0.85);
}
.produk-kartu.is-pilih {
  border-color: rgb(99 102 241 / 1);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.18);
}

/* -------- tombol angka qty -------- */
.qty-tombol {
  display: inline-flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  color: #334155;
  font-weight: 700;
  transition: all 0.12s ease;
}
.qty-tombol:hover { background: #eef2ff; color: #4338ca; border-color: #a5b4fc; }
html.dark .qty-tombol { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.12); }
html.dark .qty-tombol:hover { background: rgba(99, 102, 241, 0.2); color: #c7d2fe; }

/* -------- keranjang kosong -------- */
.keranjang-kosong {
  border: 1.5px dashed rgba(148, 163, 184, 0.55);
  border-radius: 18px;
}

/* -------- kanban -------- */
.kanban-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: start;
}
.kanban-kolom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: background 0.15s ease, border-color 0.15s ease;
}
html.dark .kanban-kolom { background: rgba(15, 23, 42, 0.55); border-color: rgba(255, 255, 255, 0.08); }
.kanban-kolom.is-target {
  border-color: rgb(99 102 241 / 0.9);
  background: rgba(238, 242, 255, 0.92);
}
html.dark .kanban-kolom.is-target { background: rgba(99, 102, 241, 0.16); }

.kanban-kartu {
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.kanban-kartu:active { cursor: grabbing; }
.kanban-kartu.is-drag { opacity: 0.45; transform: rotate(1deg) scale(0.99); }
.kanban-kartu:hover { box-shadow: 0 18px 34px -28px rgba(79, 70, 229, 0.8); }

/* -------- grafik -------- */
.grafik-batang { transition: filter 0.15s ease; cursor: default; }
.grafik-batang:hover { filter: brightness(1.12) saturate(1.1); }

/* -------- animasi masuk -------- */
@keyframes kpMuncul {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kp-muncul { animation: kpMuncul 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* -------- toast -------- */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  box-shadow: 0 22px 40px -26px rgba(30, 27, 75, 0.55);
  background: #fff;
  color: #1e293b;
  animation: kpMuncul 0.25s ease both;
}
.toast[data-tipe="sukses"] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.toast[data-tipe="gagal"]  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast[data-tipe="info"]   { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
html.dark .toast[data-tipe="sukses"] { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; }
html.dark .toast[data-tipe="gagal"]  { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.35); color: #fda4af; }
html.dark .toast[data-tipe="info"]   { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.35); color: #c7d2fe; }
.toast.is-keluar { opacity: 0; transform: translateY(6px); transition: all 0.2s ease; }

/* -------- scroll area keranjang -------- */
.keranjang-isi { max-height: min(46vh, 430px); overflow-y: auto; }

/* -------- status pita di kartu order -------- */
.pita-kiri { border-left-width: 4px; border-left-style: solid; }

/* -------- draf cetak dokumen handled in dokumen.css -------- */
@media print {
  .no-print { display: none !important; }
}