/* ============================================================
   TIPTAP - design system
   Putih dominan, aksen oranye (brand/identitas) + biru (aksi utama).
   Master pakai sidebar kiri putih. Kasir pakai top bar + bottom nav
   (dikonversi otomatis dari markup .sidebar yang sama lewat JS di
   firebase-config.js, jadi markup HTML tiap halaman TIDAK berubah).
   Nama class & variabel lama (--forest, --gold, dst) dipertahankan
   sebagai alias supaya semua halaman tetap jalan tanpa ubah logika.
   ============================================================ */
:root {
  --brand: #C0584E;
  --brand-hover: #A84740;
  --brand-tint: #FBEEEC;
  --brand-tint-2: #F5D9D5;

  --action: #C79A45;
  --action-hover: #B08639;
  --action-tint: #FBF3E0;

  --ink: #16181D;
  --ink-soft: #6B7280;
  --ink-faint: #9AA1AC;
  --line: #E7E9EE;
  --line-strong: #D8DCE3;

  --surface: #FFFFFF;
  --porcelain: #F7F8FA;
  --panel: #F2F3F6;

  --success: #1E9E5A;
  --success-soft: #E9F7EF;
  --success-ink: #167A46;
  --danger: #E5484D;
  --danger-soft: #FDECEC;
  --danger-ink: #C0292E;
  --warning: #E0A32E;
  --warning-soft: #FBF1DD;
  --warning-ink: #966A15;

  /* Palet kategori (dipakai bergilir di ubin kategori kasir) */
  --cat-1: #C0584E; --cat-1-tint: #FBEEEC;
  --cat-2: #C79A45; --cat-2-tint: #FBF3E0;
  --cat-3: #7C9473; --cat-3-tint: #EDF2EA;
  --cat-4: #6E8AA6; --cat-4-tint: #EAF0F5;
  --cat-5: #9B6B8C; --cat-5-tint: #F5EBF2;
  --cat-6: #B98860; --cat-6-tint: #F7EEE5;

  /* Alias lama */
  --paper: var(--porcelain);
  --paper-raised: var(--surface);
  --forest: var(--action);
  --forest-soft: var(--action-hover);
  --forest-tint: var(--action-tint);
  --gold: var(--action);
  --gold-soft: var(--action-tint);
  --ok: var(--success);
  --ok-soft: var(--success-soft);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px -16px rgba(16,24,40,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(16,24,40,0.28), 0 2px 8px rgba(16,24,40,0.06);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
}

/* Huruf Plus Jakarta Sans dibundel di aplikasi (lisensi SIL OFL 1.1), tidak diambil dari server Google lagi.
   Halaman tidak perlu menunggu jaringan sebelum tampil, dan tulisan tidak "lompat" saat huruf datang. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("font/plus-jakarta-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("font/plus-jakarta-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("font/plus-jakarta-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("font/plus-jakarta-sans-800.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--porcelain); }
/* Sentuhan: tanpa jeda tap ganda & tanpa kotak biru saat ditekan (terasa lebih responsif di HP/APK) */
html { -webkit-tap-highlight-color: transparent; }
a, button, select, input, label, [onclick] { touch-action: manipulation; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--porcelain);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--brand-tint-2); color: var(--brand-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 150ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.sidebar { view-transition-name: tiptap-chrome; }
::view-transition-group(tiptap-chrome) { animation-duration: 0s; }

/* Masuk halaman. Halaman Master: isi langsung tampil dengan fade singkat. Halaman kasir: isi ditahan
   (opacity 0) sampai profil & cabang terbaca (body.tiptap-ready), lalu masuk halus; sebelumnya isi disembunyikan
   lalu muncul mendadak. Sengaja hanya opacity, tanpa transform, karena di dalam .main ada elemen position: fixed
   (bar keranjang HP) yang posisinya rusak kalau induknya di-transform. */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.main { animation: pageIn 280ms var(--ease); }
body.kasir-page .main { animation: none; opacity: 0; transition: opacity 260ms var(--ease); }
body.kasir-page.tiptap-ready .main { opacity: 1; }
body.kasir-page:not(.tiptap-ready) .main { pointer-events: none; }
/* Garis tipis berjalan di tepi atas selama isi halaman kasir masih ditahan. Baru muncul setelah 160 ms supaya
   tidak berkedip kalau datanya cepat. Tidak dipakai saat pengguna mematikan animasi di HP-nya. */
@keyframes cpLoadBar { 0% { transform: translateX(-100%); } 60% { transform: translateX(60%); } 100% { transform: translateX(100%); } }
body.kasir-page:not(.tiptap-ready)::after {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 40%; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0; animation: cpLoadBar 1.1s var(--ease-in-out) 160ms infinite, pageIn 200ms 160ms both;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .main, body.kasir-page .main { animation: none; transition: none; }
  body.kasir-page:not(.tiptap-ready)::after { display: none; }
}

.app-shell { display: flex; min-height: 100vh; }

/* ============================================================
   SIDEBAR MASTER - putih, aksen oranye di item aktif
   ============================================================ */
.sidebar {
  width: 228px;
  background: var(--surface);
  color: var(--ink);
  padding: 20px 0 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  transition: width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}

.sidebar .brand {
  margin: 0 12px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border-bottom: none;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(135deg, #C0584E, #C79A45);
  background-size: 180% 180%;
  background-position: 0% 0%;
  box-shadow: 0 6px 16px -10px rgba(176,134,57,0.45);
  transition: background-position 0.6s var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sidebar .brand:hover {
  background-position: 100% 100%;
  transform: scale(1.02);
  box-shadow: 0 10px 22px -10px rgba(176,134,57,0.6);
}
/* Akun Central Kitchen: kotak brand merah maroon, biar langsung kelihatan beda dari outlet */
body[data-branch-tipe="central_kitchen"] .sidebar .brand {
  background: linear-gradient(135deg, #5E1420, #8B2232);
  background-size: 180% 180%;
  box-shadow: 0 6px 16px -10px rgba(94,20,32,0.6);
}
body[data-branch-tipe="central_kitchen"] .sidebar .brand:hover { box-shadow: 0 10px 22px -10px rgba(94,20,32,0.75); }
.sidebar .brand-mark { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.brand-logo { display: none; }
.sidebar .brand-mark .wordmark,
.sidebar .brand-mark .pos { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; }
.sidebar .brand .name {
  font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--dur) var(--ease);
}
.sidebar .brand:hover .name { opacity: 0.82; }
.sidebar .brand .sub { font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 700; margin-top: 1px; letter-spacing: 0.2px; }

.sidebar nav { flex: 1; overflow-y: auto; padding: 4px 0 10px; }
.sidebar nav a {
  position: relative;
  display: block;
  margin: 1px 10px;
  padding: 9px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 9px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar nav a:hover { background: var(--panel); color: var(--ink); }
.sidebar nav a.active { background: var(--brand-tint); color: var(--brand-hover); }
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}

.sidebar .user-box { width: 100%; padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 12px; flex-shrink: 0; }
.sidebar .user-box #userEmail {
  margin-bottom: 6px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 8px; padding: 4px 6px; margin-left: -6px; margin-right: -6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar .user-box .logout-link, .sidebar .user-box > a { display: none; }
.sidebar .user-box #userEmail { display: none; }

.sound-toggle-btn, .stock-alert-btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer; width: 100%; text-align: left;
  color: var(--ink-soft); font-size: 11.5px; padding: 5px 0; background: none; border: none; font-family: inherit;
  transition: color var(--dur) var(--ease);
}
.sound-toggle-btn:hover, .stock-alert-btn:hover { color: var(--ink); }
.stock-alert-btn.has-critical { color: var(--danger-ink); }
.stock-alert-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 100px; padding: 1px 7px; line-height: 1.5; }

.conn-indicator { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 5px 0; color: var(--ink-soft); }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); flex-shrink: 0; }
.conn-indicator.offline { color: var(--danger-ink); }
.conn-indicator.offline .conn-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); animation: softPulse 1.4s ease-in-out infinite; }

/* ============================================================
   AREA KERJA
   ============================================================ */
.main { flex: 1; min-width: 0; padding: 28px 32px 40px; max-width: 1440px; }
.page-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--ink); letter-spacing: -0.3px; margin: 0 0 6px; }
.page-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px; max-width: 78ch; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; overflow-x: auto; }

/* ===== Tombol ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(199,154,69,0.25); }

.btn-gold { background: var(--action); color: #fff; box-shadow: 0 6px 16px -10px rgba(199,154,69,0.6); }
.btn-gold:hover { background: var(--action-hover); }
.btn-primary { background: var(--action-tint); color: var(--action); border-color: #CADCFF; }
.btn-primary:hover { background: var(--action); color: #fff; border-color: var(--action); }
.btn-outline { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { background: var(--panel); border-color: var(--ink-faint); }
.btn-danger { background: var(--danger-soft); color: var(--danger-ink); }
.btn-danger:hover { background: #FADBDC; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ===== Form ===== */
input, select, textarea {
  font-family: inherit; font-size: 13.5px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-tint); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--panel); color: var(--ink-soft); }
input[type="number"] { font-variant-numeric: tabular-nums; }

select {
  -webkit-appearance: none; appearance: none; padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; accent-color: var(--action); cursor: pointer; box-shadow: none; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }

label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.field { margin-bottom: 14px; }

/* ===== Tabel ===== */
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th { text-align: left; padding: 10px 12px; background: var(--panel); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; letter-spacing: 0.3px; text-transform: uppercase; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tbody tr td { transition: background var(--dur-fast) var(--ease); }
tr:hover td { background: var(--porcelain); }
tfoot td { background: var(--panel); font-weight: 700; }

/* ===== Badge ===== */
.badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.1px; }
.badge-ok { background: var(--success-soft); color: var(--success-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge-gold { background: var(--warning-soft); color: var(--warning-ink); }
.badge-gray { background: var(--panel); color: var(--ink-soft); }

@keyframes softPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pulse-warn { animation: softPulse 1.8s ease-in-out infinite; }

/* ===== Modal ===== */
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(16,24,40,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: overlayFadeIn var(--dur) var(--ease);
}
.modal { background: var(--surface); border-radius: 18px; padding: 24px; width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalPopIn var(--dur-slow) var(--ease); }
.modal h3 { margin: 0 0 16px; font-weight: 800; font-size: 19px; color: var(--ink); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal-header h3 { margin: 0; }
.modal-close-btn { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-soft); width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.modal-close-btn:hover { background: var(--panel); color: var(--ink); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.empty-state { text-align: center; padding: 44px 20px; color: var(--ink-soft); font-size: 13.5px; }

/* ===== Toast ===== */
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }
.toast {
  position: fixed; top: 20px; left: 20px; max-width: min(520px, calc(100vw - 40px));
  padding: 12px 16px 12px 38px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.45; z-index: 400;
  box-shadow: var(--shadow-lg); animation: toastIn var(--dur-slow) var(--ease);
  cursor: pointer; user-select: text; overflow-wrap: anywhere; word-break: break-word;
}
.toast::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background-repeat: no-repeat; background-size: 14px 14px; }
.toast.hide { animation: toastOut var(--dur) var(--ease-in-out) forwards; }
.toast-ok { background: var(--ink); color: #fff; }
.toast-ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.toast-error { background: var(--danger); color: #fff; }
.toast-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
.toast-warn { background: #8A5A00; color: #fff; }
.toast-warn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD27A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }

/* ===== Skeleton ===== */
@keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #EEF0F3 25%, #F7F8FA 50%, #EEF0F3 75%); background-size: 200% 100%; animation: skeletonShimmer 1.6s ease-in-out infinite; border-radius: 8px; color: transparent !important; pointer-events: none; }

/* ===== Popover ===== */
@keyframes popIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tiptap-popover { position: fixed; z-index: 300; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 8px; min-width: 240px; font-family: inherit; animation: popIn var(--dur) var(--ease); }
.tiptap-popover-title { font-size: 11px; color: var(--ink-soft); font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; padding: 6px 8px 8px; }
.tiptap-popover-note { padding: 0 8px 8px; font-size: 11px; color: var(--ink-faint); line-height: 1.45; }
.tiptap-popover-empty { padding: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.tiptap-popover-link { font-size: 11.5px; color: var(--action); text-decoration: none; font-weight: 700; }
.tiptap-popover-link:hover { text-decoration: underline; }

.tiptap-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background var(--dur) var(--ease); }
.tiptap-acc-row:not(.is-current):hover { background: var(--porcelain); }
.tiptap-acc-row.is-current { background: var(--brand-tint); cursor: default; }
.tiptap-acc-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiptap-acc-email { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiptap-acc-remove { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 17px; line-height: 1; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tiptap-acc-remove:hover { background: var(--danger-soft); color: var(--danger-ink); }
.tiptap-acc-addnew { display: block; padding: 9px 10px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--action); cursor: pointer; transition: background var(--dur) var(--ease); }
.tiptap-acc-addnew:hover { background: var(--porcelain); }
.tiptap-popover-logout { display: block; padding: 9px 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-size: 12.5px; font-weight: 700; color: var(--danger-ink); cursor: pointer; transition: background var(--dur) var(--ease); }
.tiptap-popover-logout:hover { background: var(--danger-soft); }

.tiptap-tab { border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 100px; cursor: pointer; font-family: inherit; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tiptap-tab:hover { background: var(--porcelain); color: var(--ink); }
.tiptap-tab.active { background: var(--brand-tint); color: var(--brand-hover); }
.tiptap-crit-row { padding: 7px 8px; border-radius: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tiptap-crit-row:hover { background: var(--porcelain); }
.tiptap-crit-item { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiptap-crit-branch { font-size: 11px; color: var(--ink-soft); }
.tiptap-crit-qty { font-size: 13px; font-weight: 800; flex-shrink: 0; color: var(--warning-ink); font-variant-numeric: tabular-nums; }
.tiptap-crit-qty.zero { color: var(--danger); }

/* ============================================================
   KASIR: top bar + bottom nav (dikonversi dari markup .sidebar yang
   sama lewat JS di firebase-config.js). body dapat class ini via JS.
   ============================================================ */
body.tiptap-kasir-chrome .app-shell { display: block; }
body.tiptap-kasir-chrome .main { max-width: none; padding: 68px 20px 76px; }
body.tiptap-kasir-chrome .kasir-layout { height: calc(100vh - 144px); }
@media (max-width: 880px) {
  body.tiptap-kasir-chrome .kasir-layout { height: auto; }
}

body.tiptap-kasir-chrome .sidebar {
  position: fixed; height: auto; top: 0; left: 0; right: 0; bottom: auto; width: auto;
  flex-direction: row; align-items: center; z-index: 40;
  padding: 0 16px; border-right: none; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16,24,40,0.02);
}
body.tiptap-kasir-chrome .sidebar .brand { display: flex; align-items: center; margin: 8px 0 8px 12px; padding: 8px 14px; height: auto; cursor: pointer; }
body.tiptap-kasir-chrome .sidebar .brand-mark { margin-bottom: 0; }
body.tiptap-kasir-chrome .sidebar .brand .name { font-size: 12.5px; margin-left: 10px; }
body.tiptap-kasir-chrome .sidebar .brand .sub { display: none; }
body.tiptap-kasir-chrome .sidebar nav, body.tiptap-kasir-chrome .sidebar .user-box { display: none; }

.tiptap-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tiptap-topbar-conn { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.tiptap-topbar-conn.offline { background: var(--danger); animation: softPulse 1.4s ease-in-out infinite; }
.tiptap-topbar-btn {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
  background: none; border: none; color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tiptap-topbar-btn:hover { background: var(--panel); color: var(--ink); }

.tiptap-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px -14px rgba(16,24,40,0.25);
}
.tiptap-bottomnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px 7px; text-decoration: none; color: var(--ink-soft); font-size: 10.5px; font-weight: 700;
  border-top: 2px solid transparent; background: none; border-left: none; border-right: none; border-bottom: none;
  cursor: pointer; font-family: inherit; position: relative;
  transition: color var(--dur) var(--ease);
}
.tiptap-bottomnav-item svg { width: 20px; height: 20px; }
.tiptap-bottomnav-item.active { color: var(--brand); border-top-color: var(--brand); }
.tiptap-bottomnav-item:hover { color: var(--ink); }
.tiptap-bottomnav-badge {
  position: absolute; top: 3px; right: calc(50% - 17px); min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 100px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.tiptap-more-sheet {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16,24,40,0.35); animation: overlayFadeIn var(--dur) var(--ease);
}
.tiptap-more-panel {
  background: var(--surface); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0;
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 78vh; overflow-y: auto;
  animation: moreSheetIn var(--dur-slow) var(--ease);
}
@keyframes moreSheetIn { from { transform: translateY(16px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.tiptap-more-handle { width: 36px; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 6px auto 12px; }
.tiptap-more-section-title { font-size: 11px; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 14px 6px; }
.tiptap-more-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  color: var(--ink); font-size: 14px; font-weight: 600; transition: background var(--dur) var(--ease);
}
.tiptap-more-link:hover { background: var(--porcelain); }
.tiptap-more-link.active { background: var(--brand-tint); color: var(--brand-hover); }
.tiptap-more-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-soft); }
.tiptap-more-link.active svg { color: var(--brand-hover); }
.tiptap-more-link.danger { color: var(--danger-ink); }
.tiptap-more-link.danger svg { color: var(--danger-ink); }
.tiptap-more-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.tiptap-more-row .lbl { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ===== Sidebar bisa dilipat (Master, desktop) ===== */
.sidebar-toggle {
  position: absolute; top: 16px; right: 12px; width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; z-index: 5;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-toggle:hover { background: var(--panel); color: var(--ink); }
body.sidebar-collapsed .sidebar { width: 0; padding: 0; opacity: 0; pointer-events: none; }
body.sidebar-collapsed .main { max-width: none; }
.sidebar-reopen {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
  align-items: center; justify-content: center; font-size: 17px; line-height: 1;
  transition: background var(--dur) var(--ease);
}
.sidebar-reopen:hover { background: var(--panel); }
body.sidebar-collapsed .sidebar-reopen { display: flex; animation: overlayFadeIn var(--dur) var(--ease); }
body.sidebar-collapsed .main { padding-left: 68px !important; }

@media (max-width: 880px) {
  .main { padding: 18px 16px 28px; max-width: 100%; }
  .page-title { font-size: 21px; }
  .sidebar { position: fixed; z-index: 45; top: 0; left: 0; height: 100vh; width: 250px; box-shadow: var(--shadow-lg); }
  body.sidebar-collapsed .main { padding-left: 16px !important; padding-top: 64px !important; }
  .mobile-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(16,24,40,0.35); z-index: 44; animation: overlayFadeIn var(--dur) var(--ease); }
  body:not(.sidebar-collapsed) .mobile-sidebar-backdrop { display: block; }
  body.tiptap-kasir-chrome .sidebar { position: fixed; height: auto; width: auto; top: 0; left: 0; right: 0; box-shadow: none; }
}
@media (min-width: 881px) { .mobile-sidebar-backdrop { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Cegah kedipan tampilan outlet di akun Central Kitchen: bar atas dan menu bawah disembunyikan sampai tipe cabang
   diketahui (biasanya langsung dari cache). Isi halaman ditahan sampai guardPage selesai lewat aturan opacity
   di bagian "Masuk halaman" di atas (bukan visibility, supaya bisa masuk halus). */
body.kasir-page:not([data-branch-tipe]) .sidebar,
body.kasir-page:not([data-branch-tipe]) .tiptap-bottomnav { visibility: hidden; }