/* ------------------------------------------------------------------
   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; }

/* ==================================================================
   Header: brand toko (logo + nama) — tetap terlihat saat panel mini
   ================================================================== */
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
  padding: 4px 8px 4px 4px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.topbar-brand:hover { background: rgba(99, 102, 241, 0.08); }
.topbar-brand .brand-mark {
  display: inline-flex;
  height: 36px;
  width: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(79, 70, 229, 0.9);
}
.topbar-brand .brand-logo { height: 34px; width: auto; max-width: 92px; object-fit: contain; }
.topbar-brand .brand-teks { min-width: 0; display: block; }
.topbar-brand strong {
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1e1b4b;
}
html.dark .topbar-brand strong { color: #fff; }
.topbar-pisah {
  width: 1px;
  align-self: stretch;
  margin: 2px 2px;
  background: rgba(148, 163, 184, 0.35);
}
@media (max-width: 640px) {
  .topbar-brand { max-width: 132px; }
  .topbar-brand .brand-teks { display: none; }
}

/* ==================================================================
   Panel navigasi MINI (hanya ikon)
   ================================================================== */
@media (min-width: 1024px) {
  html.nav-mini .sidebar { width: 76px; }
  html.nav-mini .sidebar .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
  html.nav-mini .sidebar .nav-item span,
  html.nav-mini .sidebar .sidebar-seksi,
  html.nav-mini .sidebar .sidebar-pengguna span:last-child { display: none; }
  html.nav-mini .sidebar .sidebar-pengguna {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }
  html.nav-mini .sidebar nav { padding-left: 10px; padding-right: 10px; }
  html.nav-mini .sidebar .nav-mini-btn svg { transform: rotate(180deg); }
}
.nav-mini-btn {
  display: inline-flex;
  height: 26px;
  width: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #fff;
  color: #64748b;
  transition: all 0.15s ease;
}
.nav-mini-btn:hover { background: #eef2ff; color: #4338ca; border-color: #a5b4fc; }
html.dark .nav-mini-btn { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.12); }
.nav-mini-btn svg { transition: transform 0.2s ease; }
html.nav-mini .nav-mini-btn svg { transform: rotate(180deg); }

/* -------- 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: 10px;
  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; }

/* -------- switch satuan CM / M di kalkulator kasir -------- */
.satuan-btn {
  display: inline-flex;
  min-width: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  background: transparent;
  transition: all 0.15s ease;
}
.satuan-btn:hover { color: #4338ca; }
.satuan-btn.is-aktif {
  background: #fff;
  color: #4338ca;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
html.dark .satuan-btn { color: #94a3b8; }
html.dark .satuan-btn:hover { color: #c7d2fe; }
html.dark .satuan-btn.is-aktif { background: rgba(99, 102, 241, 0.35); color: #fff; }

/* -------- 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;
  /* Di layar lebar: 6 kolom berbagi lebar (tanpa scroll mendatar) */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 1279px) {
  .kanban-grid { gap: 8px; }
}
/* Di layar sedang/kecil: gulir mendatar agar kartu tetap terbaca */
@media (max-width: 1023px) {
  .kanban-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(232px, 1fr);
    overflow-x: auto;
    padding-bottom: 10px;
  }
}
.kanban-kolom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  min-width: 0;
  padding: 9px;
  border-radius: 16px;
  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; }
}