:root {
  /* Default palet = Original Neng Syafa (identik [data-theme="original"]) */
  --primary: #0f172a;
  --primary-dark: #020617;
  --primary-light: #1e293b;
  --accent: #ea580c;
  --accent-light: #fff7ed;
  --accent-hover: #c2410c;
  --secondary: #0284c7;
  --success: #059669;        /* Emerald 600 */
  --success-light: #ecfdf5;
  --warning: #d97706;        /* Amber 600 */
  --warning-light: #fffbeb;
  --danger: #dc2626;         /* Red 600 */
  --danger-light: #fef2f2;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --nav-glass-hover: rgba(255, 255, 255, 0.40);
  --nav-glass-hover-wash: rgba(234, 88, 12, 0.07);
  --nav-glass-active-top: rgba(255, 255, 255, 0.48);
  --nav-glass-active-wash: rgba(15, 23, 42, 0.12);
  --nav-glass-border: rgba(255, 255, 255, 0.22);
  --nav-glass-border-accent: rgba(212, 160, 72, 0.50);
  --nav-glass-gloss: rgba(255, 255, 255, 0.88);
  --nav-glass-inset: rgba(15, 23, 42, 0.08);
  --nav-glass-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  --nav-glass-rail: rgba(234, 88, 12, 0.42);
  --nav-glass-text: #0f172a;
  --nav-icon-lit: #c2410c;
  --nav-icon-glow: rgba(212, 160, 72, 0.50);
  --nav-icon-glow-hot: rgba(234, 88, 12, 0.58);
  --nav-icon-glow-soft: rgba(212, 160, 72, 0.20);
  --dash-stamp-ink: var(--accent); /* oranye/merah cap basah */
  
  /* Kalibrasi Resolusi Laptop 1366x768 */
  --sidebar-width: 260px;    /* Cukup untuk label + badge satu baris di 1366px */
  --topbar-height: 60px;     /* Tinggi vertikal topbar standar */
  --bk-content-h: calc(100vh - var(--topbar-height, 60px));
}

/* ================= 4 PALET WARNA DESAIN (THEME PALETTES) ================= */

/* 0. Default: Neng Syafa Classic (Warm Orange & Slate) */
[data-theme="original"] {
  --primary: #0f172a;
  --primary-dark: #020617;
  --primary-light: #1e293b;
  --accent: #ea580c;
  --accent-light: #fff7ed;
  --accent-hover: #c2410c;
  --secondary: #0284c7;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --nav-glass-hover: rgba(255, 255, 255, 0.40);
  --nav-glass-hover-wash: rgba(234, 88, 12, 0.07);
  --nav-glass-active-top: rgba(255, 255, 255, 0.48);
  --nav-glass-active-wash: rgba(15, 23, 42, 0.12);
  --nav-glass-border: rgba(255, 255, 255, 0.22);
  --nav-glass-border-accent: rgba(212, 160, 72, 0.50);
  --nav-glass-gloss: rgba(255, 255, 255, 0.88);
  --nav-glass-inset: rgba(15, 23, 42, 0.08);
  --nav-glass-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  --nav-glass-rail: rgba(234, 88, 12, 0.42);
  --nav-glass-text: #0f172a;
  --nav-icon-lit: #c2410c;
  --nav-icon-glow: rgba(212, 160, 72, 0.50);
  --nav-icon-glow-hot: rgba(234, 88, 12, 0.58);
  --nav-icon-glow-soft: rgba(212, 160, 72, 0.20);
  --dash-stamp-ink: var(--accent); /* oranye/merah cap basah */
}

/* 1. Gambar 1: FROSTED PALETTE (#29353C, #44576D, #768A96, #AAC7D8, #DFEBF6, #E6E6E6) */
[data-theme="frosted"] {
  --primary: #29353c;
  --primary-dark: #1c252a;
  --primary-light: #44576d;
  --accent: #44576d;
  --accent-light: #dfebf6;
  --accent-hover: #29353c;
  --secondary: #768a96;
  --bg: #edf3f7;
  --card-bg: #ffffff;
  --border: #c8d8e4;
  --text: #29353c;
  --text-muted: #627785;
  --nav-glass-hover: rgba(255, 255, 255, 0.42);
  --nav-glass-hover-wash: rgba(68, 87, 109, 0.08);
  --nav-glass-active-top: rgba(255, 255, 255, 0.50);
  --nav-glass-active-wash: rgba(41, 53, 60, 0.15);
  --nav-glass-border: rgba(255, 255, 255, 0.24);
  --nav-glass-border-accent: rgba(68, 87, 109, 0.44);
  --nav-glass-gloss: rgba(255, 255, 255, 0.86);
  --nav-glass-inset: rgba(41, 53, 60, 0.10);
  --nav-glass-shadow: 0 6px 16px rgba(41, 53, 60, 0.10);
  --nav-glass-rail: rgba(68, 87, 109, 0.50);
  --nav-glass-text: #29353c;
  --nav-icon-lit: #29353c;
  --nav-icon-glow: rgba(118, 138, 150, 0.48);
  --nav-icon-glow-hot: rgba(170, 199, 216, 0.62);
  --nav-icon-glow-soft: rgba(68, 87, 109, 0.18);
  --dash-stamp-ink: var(--primary);
}

/* 2. Gambar 2: NAVY & BEIGE PALETTE (#2F4156, #567C8D, #C8D9E6, #F5EFEB, #FFFFFF) */
[data-theme="navy-beige"] {
  --primary: #2f4156;
  --primary-dark: #1c2735;
  --primary-light: #445c75;
  --accent: #567c8d;
  --accent-light: #e8f0f5;
  --accent-hover: #3d5a67;
  --secondary: #2f4156;
  --bg: #f5efeb;
  --card-bg: #ffffff;
  --border: #ded6cf;
  --text: #2f4156;
  --text-muted: #687988;
  --nav-glass-hover: rgba(255, 247, 240, 0.42);
  --nav-glass-hover-wash: rgba(86, 124, 141, 0.08);
  --nav-glass-active-top: rgba(255, 255, 255, 0.48);
  --nav-glass-active-wash: rgba(47, 65, 86, 0.15);
  --nav-glass-border: rgba(255, 255, 255, 0.24);
  --nav-glass-border-accent: rgba(86, 124, 141, 0.46);
  --nav-glass-gloss: rgba(255, 255, 255, 0.86);
  --nav-glass-inset: rgba(47, 65, 86, 0.10);
  --nav-glass-shadow: 0 6px 16px rgba(47, 65, 86, 0.10);
  --nav-glass-rail: rgba(86, 124, 141, 0.52);
  --nav-glass-text: #2f4156;
  --nav-icon-lit: #2f4156;
  --nav-icon-glow: rgba(86, 124, 141, 0.50);
  --nav-icon-glow-hot: rgba(200, 217, 230, 0.70);
  --nav-icon-glow-soft: rgba(86, 124, 141, 0.18);
  --dash-stamp-ink: var(--primary);
}

/* 3. Gambar 3: OCEANIC SERENADE (#1B4769, #507FA9, #75A4C5, #97BCD7, #CADBE7) */
[data-theme="oceanic"] {
  --primary: #1b4769;
  --primary-dark: #0f2c42;
  --primary-light: #2b5d84;
  --accent: #507fa9;
  --accent-light: #ebf3f8;
  --accent-hover: #3a658c;
  --secondary: #75a4c5;
  --bg: #f1f6fa;
  --card-bg: #ffffff;
  --border: #cadbe7;
  --text: #1b4769;
  --text-muted: #53758f;
  --nav-glass-hover: rgba(255, 255, 255, 0.42);
  --nav-glass-hover-wash: rgba(80, 127, 169, 0.08);
  --nav-glass-active-top: rgba(255, 255, 255, 0.50);
  --nav-glass-active-wash: rgba(27, 71, 105, 0.16);
  --nav-glass-border: rgba(255, 255, 255, 0.22);
  --nav-glass-border-accent: rgba(80, 127, 169, 0.46);
  --nav-glass-gloss: rgba(255, 255, 255, 0.88);
  --nav-glass-inset: rgba(27, 71, 105, 0.10);
  --nav-glass-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  --nav-glass-rail: rgba(80, 127, 169, 0.55);
  --nav-glass-text: #1b4769;
  --nav-icon-lit: #1b4769;
  --nav-icon-glow: rgba(80, 127, 169, 0.52);
  --nav-icon-glow-hot: rgba(117, 164, 197, 0.72);
  --nav-icon-glow-soft: rgba(80, 127, 169, 0.20);
  --dash-stamp-ink: var(--primary);
}

/* 4. Gambar 4: VENICE BLUE & MERINO (#16587B, #84B3CE, #F5EEDD) */
[data-theme="venice-merino"] {
  --primary: #16587b;
  --primary-dark: #0c364d;
  --primary-light: #21739e;
  --accent: #16587b;
  --accent-light: #e6f1f7;
  --accent-hover: #0f435e;
  --secondary: #84b3ce;
  --bg: #f7f2e8;
  --card-bg: #ffffff;
  --border: #e0d6c4;
  --text: #16587b;
  --text-muted: #517183;
  --nav-glass-hover: rgba(255, 251, 242, 0.42);
  --nav-glass-hover-wash: rgba(22, 88, 123, 0.08);
  --nav-glass-active-top: rgba(255, 255, 255, 0.48);
  --nav-glass-active-wash: rgba(22, 88, 123, 0.15);
  --nav-glass-border: rgba(255, 255, 255, 0.26);
  --nav-glass-border-accent: rgba(196, 165, 86, 0.48);
  --nav-glass-gloss: rgba(255, 255, 255, 0.88);
  --nav-glass-inset: rgba(22, 88, 123, 0.10);
  --nav-glass-shadow: 0 6px 16px rgba(12, 54, 77, 0.10);
  --nav-glass-rail: rgba(196, 165, 86, 0.55);
  --nav-glass-text: #16587b;
  --nav-icon-lit: #16587b;
  --nav-icon-glow: rgba(196, 165, 86, 0.52);
  --nav-icon-glow-hot: rgba(212, 184, 110, 0.70);
  --nav-icon-glow-soft: rgba(196, 165, 86, 0.20);
  --dash-stamp-ink: var(--primary);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-app-shell] {
  background: var(--bg, #f1f6fa);
  height: 100%;
  overflow: hidden; /* scroll hanya di .content-body — cegah dokumen terkunci tanpa scrollbar */
}

html[data-app-shell] body {
  background: var(--bg);
  color: var(--text);
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 13px;
  line-height: 1.5;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Layout — shell terkunci ke viewport; kolom konten yang scroll */
.app-container {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ================= SIDEBAR (240px di 1366x768) ================= */
.sidebar {
  width: var(--sidebar-width);
  background: #ffffff;
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,0.02);
  transition: all 0.25s ease;
}

.brand-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card-bg, #ffffff) 0%, var(--accent-light, #fffaf5) 100%);
}

.brand-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-title span.highlight {
  color: var(--accent);
}

.brand-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.brand-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* Owner Card Widget */
.owner-info-box {
  margin: 10px 12px;
  padding: 9px 10px;
  background: #f1f5f9;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

.owner-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.owner-meta h4 {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--primary);
  line-height: 1.2;
}

.owner-meta p {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sidebar-menu {
  padding: 6px 10px 24px;
  flex-grow: 1;
}

.menu-group {
  margin-bottom: 4px;
}

.menu-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 4px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.menu-group-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.menu-group-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0;
  margin: 0;
  transition: color 0.15s ease;
}

.menu-group-header:hover .menu-group-title {
  color: var(--primary);
}

.menu-group-chevron {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2.2 !important;
  color: var(--text-muted) !important;
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
}

.menu-group-header:hover .menu-group-chevron {
  color: var(--primary) !important;
}

.menu-group.collapsed .menu-group-chevron {
  transform: rotate(-90deg);
}

.menu-group-items {
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  max-height: 800px;
  opacity: 1;
}

.menu-group.collapsed .menu-group-items {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 2px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  overflow: hidden;
  min-width: 0;
}

.nav-item:hover {
  background: linear-gradient(180deg, var(--nav-glass-hover) 0%, var(--nav-glass-hover-wash) 100%);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  border-color: var(--nav-glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 2px 8px rgba(15, 23, 42, 0.04);
  color: var(--nav-glass-text);
}

.nav-item.active,
.nav-item.active:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 46%),
    linear-gradient(180deg, var(--nav-glass-active-top) 0%, var(--nav-glass-active-wash) 100%);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
  border-color: var(--nav-glass-border-accent);
  color: var(--nav-glass-text) !important;
  font-weight: 700;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 var(--nav-glass-gloss),
    inset 0 -1px 0 var(--nav-glass-inset),
    inset 2px 0 0 var(--nav-glass-rail),
    var(--nav-glass-shadow);
}

.nav-item.active span {
  color: var(--nav-glass-text) !important;
}

.nav-item.active i:not(.nav-parent-chevron),
.nav-item.active svg:not(.nav-parent-chevron),
.nav-item.active .lucide:not(.nav-parent-chevron) {
  color: var(--nav-icon-lit) !important;
  stroke: var(--nav-icon-lit) !important;
  animation: bk-nav-icon-spark 280ms ease-out,
             bk-nav-icon-breath 2.4s ease-in-out 280ms infinite;
}

.nav-item i,
.nav-item svg,
.nav-item .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  color: #64748b;
  transition: color 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
  flex: 0 0 auto;
  transform-origin: center center;
}

.nav-item:hover:not(.active) i:not(.nav-parent-chevron),
.nav-item:hover:not(.active) svg:not(.nav-parent-chevron),
.nav-item:hover:not(.active) .lucide:not(.nav-parent-chevron) {
  color: var(--nav-glass-text);
  stroke: var(--nav-glass-text);
  filter: drop-shadow(0 0 2px var(--nav-icon-glow-soft));
}

.nav-item > span:not(.nav-badge) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.nav-badge {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 700;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.48) !important;
  color: var(--nav-glass-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Nested leaf di bawah Transaksi / Penjualan (bukan rewrite accordion grup) */
.nav-tree {
  margin-bottom: 2px;
}
button.nav-item.nav-parent {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  appearance: none;
}
button.nav-item.nav-parent:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-parent-chevron {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-tree.is-collapsed .nav-parent-chevron {
  transform: rotate(-90deg);
}
.nav-tree.has-active > .nav-parent {
  color: var(--primary);
  font-weight: 700;
}
.nav-tree.has-active > .nav-parent i,
.nav-tree.has-active > .nav-parent svg,
.nav-tree.has-active > .nav-parent .lucide {
  color: var(--primary) !important;
  stroke: var(--primary) !important;
}
.nav-tree-children {
  overflow: hidden;
  max-height: 180px;
  opacity: 1;
  margin: 0 0 2px 12px;
  padding: 2px 0 2px 8px;
  border-left: 2px solid var(--accent, #507fa9);
  transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s ease,
              margin 0.18s ease,
              padding 0.18s ease;
}
.nav-tree.is-collapsed .nav-tree-children {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  border-left-width: 0;
  pointer-events: none;
}
.nav-item.nav-child {
  padding: 6px 10px;
  font-size: 11.5px;
}

/* ================= MAIN CONTENT WRAPPER ================= */
.main-wrapper {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ================= TOPBAR (60px) ================= */
.topbar {
  height: 60px;
  flex: 0 0 auto;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Jangan backdrop-filter di sini: itu jadi containing group,
     menu palet yang overflow ke bawah topbar jadi tembus/tidak bisa diklik. */
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;
  height: 36px;
  transition: width 0.2s ease;
}

.search-container:focus-within {
  width: 290px;
}

.search-container i,
.search-container svg,
.search-container .lucide {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 2;
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 54px 0 34px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  transition: all 0.2s;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.search-shortcut {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
  line-height: 1.3;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Topbar Divider */
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
}

/* Generic / Data Tools Dropdown */
.dropdown-container {
  position: relative;
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 6px;
  display: none;
  z-index: 100;
  animation: modalZoom 0.15s ease;
}

.custom-dropdown-menu.open {
  display: block;
}

.dropdown-header {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 10px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background: var(--bg);
}

.dropdown-item i,
.dropdown-item svg,
.dropdown-item .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.dropdown-item-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.dropdown-item-desc {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dropdown-item.text-danger:hover {
  background: #fef2f2;
}

.dropdown-item.text-danger .dropdown-item-title {
  color: var(--danger);
}

.dropdown-item.text-danger i,
.dropdown-item.text-danger svg {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Theme Dropdown Container & Menu */
.theme-dropdown-container {
  position: relative;
  z-index: 2;
}

.theme-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 8px;
  display: none;
  z-index: 100;
  animation: modalZoom 0.15s ease;
}

.theme-dropdown-menu.open {
  display: block;
}

.theme-dropdown-header {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.theme-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 3px;
  border: 1px solid transparent;
}

.theme-option-item:hover {
  background: var(--bg);
  border-color: var(--border);
}

.theme-option-item.active {
  background: var(--accent-light);
  border-color: var(--accent);
}

.theme-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-option-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-option-desc {
  font-size: 10px;
  color: var(--text-muted);
}

.theme-swatches {
  display: flex;
  gap: 4px;
  align-items: center;
}

.swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  /* Jangan `transition: all` — interpolasi color/outline ke UA :focus
     membuat teks tombol outline hilang (putih di atas putih). */
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  height: 36px;
  white-space: nowrap;
}

.btn i,
.btn svg,
.btn .lucide {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-sm {
  padding: 0 8px;
  font-size: 11px;
  height: 28px;
}

.btn-accent {
  background: var(--accent);
  color: #ffffff;
}
.btn-accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.25);
}

.btn-outline {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
.btn-outline:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: #ffffff;
}

.btn-success {
  background: var(--success);
  color: #ffffff;
}
.btn-success:hover {
  background: #047857;
  color: #ffffff;
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}
.btn-danger:hover {
  background: #b91c1c;
  color: #ffffff;
}

.btn-accent:focus,
.btn-accent:focus-visible,
.btn-accent:active,
.btn-accent:visited {
  background: var(--accent);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/*
 * Anti teks hilang setelah klik / Tab.
 * UA `a:focus` (0,1,1) dan `a:visited` (0,1,1) mengalahkan `.btn-outline` (0,1,0).
 * Di Windows, warna tautan terfokus/terkunjung bisa putih → outline putih-di-atas-putih.
 * Ikon Lucide memakai stroke=currentColor, ikut hilang. Kunci kontras di semua state.
 */
a.btn.btn-outline:link,
a.btn.btn-outline:visited,
a.btn.btn-outline:hover,
a.btn.btn-outline:focus,
a.btn.btn-outline:focus-visible,
a.btn.btn-outline:active,
button.btn.btn-outline:hover,
button.btn.btn-outline:focus,
button.btn.btn-outline:focus-visible,
button.btn.btn-outline:active {
  background: #ffffff;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  border-color: #cbd5e1;
}
a.btn.btn-outline:focus,
a.btn.btn-outline:focus-visible,
button.btn.btn-outline:focus,
button.btn.btn-outline:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

a.btn.btn-primary:link,
a.btn.btn-primary:visited,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:focus-visible,
a.btn.btn-primary:active,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
button.btn.btn-primary:focus-visible,
button.btn.btn-primary:active {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
a.btn.btn-primary:focus,
a.btn.btn-primary:focus-visible,
button.btn.btn-primary:focus,
button.btn.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

a.btn.btn-accent:link,
a.btn.btn-accent:visited,
a.btn.btn-accent:hover,
a.btn.btn-accent:focus,
a.btn.btn-accent:focus-visible,
a.btn.btn-accent:active,
button.btn.btn-accent:hover,
button.btn.btn-accent:focus,
button.btn.btn-accent:focus-visible,
button.btn.btn-accent:active {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

a.btn.btn-success:link,
a.btn.btn-success:visited,
a.btn.btn-success:hover,
a.btn.btn-success:focus,
a.btn.btn-success:focus-visible,
a.btn.btn-success:active,
a.btn.btn-danger:link,
a.btn.btn-danger:visited,
a.btn.btn-danger:hover,
a.btn.btn-danger:focus,
a.btn.btn-danger:focus-visible,
a.btn.btn-danger:active {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.btn-outline svg,
.btn-outline .lucide,
.btn-outline i,
.btn-primary svg,
.btn-primary .lucide,
.btn-primary i,
.btn-accent svg,
.btn-accent .lucide,
.btn-accent i {
  color: inherit;
  stroke: currentColor;
}

/* Anti-FOUC for Lucide Icons & Layout Stability */
i[data-lucide] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.content-body.is-pjax-swapping {
  opacity: 0.82;
  pointer-events: none;
}

/* ================= CONTENT BODY =================
   Shell viewport-locked; HANYA .content-body yang scroll vertikal.
   Anak langsung TIDAK dipaksa flex-column/flex:1 (itu merusak baris tombol
   Fasilitas & halaman multi-blok). Modul list dengan table scroll di-scope
   lewat :has(.…-scroll) di bawah. */
.content-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.content-body > :not(script):not(style):not(link):not(noscript) {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.content-body script,
.content-body style,
.content-body noscript,
.content-body link {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}
/* Header halaman: tetap baris judul+aksi. Jangan di-column oleh flex-fill viewport. */
.content-body > .bk-dtl-header,
.content-body > .page-header,
.content-body > .bk-list-hero {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-body > .bk-dtl-header {
  flex-wrap: nowrap;
}
.content-body > .page-header {
  flex-wrap: wrap;
}
.content-body > #card-log-shift {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.content-body > #formSetoran,
.content-body > #formSetoranV2,
.content-body > #view-penjualan-v2-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.view-section:not(.active) {
  display: none !important;
}
.content-body > :not(script):not(style):not(link):not(noscript):has(.table-container),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-dash-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-pj-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-pv2-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.jh-table-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-produksi-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-gudang-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-aset-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-coa-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-sku-board-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-uom-board-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-gb-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-sp-scroll),
.content-body > :not(script):not(style):not(link):not(noscript):has(.bk-vp-scroll) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.content-body .bk-pj-container,
.content-body .bk-gb-page,
.content-body .bk-sku {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.content-body .bk-produksi[data-bk-prd-page="riwayat"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.content-body .panel:has(> .table-container),
.content-body .panel:has(> .bk-dash-scroll),
.content-body .bk-pj-table-card,
.content-body .bk-sku-board,
.content-body .bk-uom-board,
.content-body .card:has(> .jh-table-scroll),
.content-body .card:has(> .bk-gb-scroll),
.content-body .card:has(> .bk-vp-scroll),
.content-body .card:has(> .bk-aset-scroll),
.content-body .bk-produksi-board,
.content-body .bk-gb-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin-bottom: 0;
}
.content-body .table-container,
.content-body .bk-dash-scroll,
.content-body .bk-pj-scroll,
.content-body .bk-pv2-scroll,
.content-body .jh-table-scroll,
.content-body .bk-produksi-scroll,
.content-body .bk-gudang-scroll,
.content-body .bk-aset-scroll,
.content-body .bk-coa-scroll,
.content-body .bk-sku-board-scroll,
.content-body .bk-uom-board-scroll,
.content-body .bk-gb-scroll,
.content-body .bk-sp-scroll,
.content-body .bk-vp-scroll,
.content-body .table-responsive {
  flex: 1 1 auto;
  min-height: 240px;
  overflow: auto;
}
.content-body .bk-dash-scroll {
  max-height: none !important;
}
.content-body .bk-pj-scroll,
.content-body .bk-pv2-scroll,
.content-body .jh-table-scroll,
.content-body .bk-produksi-scroll,
.content-body .bk-gudang-scroll,
.content-body .bk-aset-scroll,
.content-body .bk-coa-scroll,
.content-body .bk-sku-board-scroll,
.content-body .bk-uom-board-scroll,
.content-body .bk-gb-scroll,
.content-body .bk-sp-scroll,
.content-body .bk-vp-scroll,
.content-body .table-container,
.content-body .table-responsive {
  max-height: calc(100vh - 295px) !important;
}
.content-body .bk-pv2-form-scroll,
#view-penjualan-v2-form .bk-pv2-form-scroll {
  max-height: none !important;
  overflow: visible;
}
.bk-vp-scroll table th,
.bk-gudang-scroll table th,
.bk-aset-scroll table th,
.bk-gb-scroll table th,
.bk-coa-scroll table th,
.bk-sku-board-scroll table th,
.bk-produksi-scroll table th,
.bk-sp-scroll table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg) !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
}
body.costing-workspace .content-body {
  height: auto;
  max-height: none;
  overflow: auto;
}

.content-body:has(#jh-page),
.content-body:has(.jh-wrap) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Pane konten scroll — jangan kunci overflow di wrapper JH */
  overflow-y: auto;
  overflow-x: hidden;
}
/* JH: tinggi mengikuti konten agar .content-body bisa scroll.
   Jangan flex:1 + overflow:hidden (itu mengunci viewport & memotong sticky TH). */
.content-body > .jh-wrap,
.content-body .jh-wrap {
  flex: 0 0 auto !important;
  min-height: auto !important;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.content-body .jh-wrap > .bk-list-hero {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.content-body .jh-wrap > .jh-toolbar {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: visible;
}
.content-body:has(#jh-page) .jh-page,
.content-body:has(#jh-page) #jh-results,
.content-body .jh-wrap > #jh-page,
.content-body .jh-wrap #jh-results {
  flex: 0 0 auto;
  min-height: auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.content-body:has(#jh-page) .jh-page > .card,
.content-body:has(#jh-page) #jh-results > .card,
.content-body .jh-wrap .jh-table-card,
.content-body .card:has(> .jh-table-scroll) {
  flex: 0 0 auto !important;
  min-height: auto !important;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* visible: overflow:hidden di card memotong sticky TH (header terputus) */
  overflow: visible !important;
  margin-bottom: 0;
}
.content-body:has(#jh-page) .jh-filter-form {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.content-body:has(#jh-page) .jh-table-scroll,
.content-body .jh-wrap .jh-table-scroll {
  flex: 0 0 auto;
  overflow: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 160px;
  /* Inner scroll tabel; header TH wajib penuh di dalam scrollport */
  max-height: calc(100vh - 295px) !important;
}
.content-body:has(.bk-produksi[data-bk-prd-page="riwayat"]) {
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: visible;
}
.content-body:has(.bk-produksi[data-bk-prd-page="riwayat"]) .bk-produksi[data-bk-prd-page="riwayat"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.content-body:has(.bk-produksi[data-bk-prd-page="riwayat"]) .bk-produksi-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.content-body:has(.bk-produksi[data-bk-prd-page="riwayat"]) .bk-produksi-scroll {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: none;
  overflow: auto;
}
.content-body:has(#view-dashboard) {
  padding: 8px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
}

/* View Sections / Transitions */
.view-section {
  display: none;
  animation: fadeIn 0.2s ease forwards;
}

.view-section.active {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page Header */
.page-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.page-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.4px;
}

.page-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ================= DASHBOARD HERO (1366x768 Above-the-Fold Fit) ================= */
.dashboard-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 100%);
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.dashboard-hero::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
}

.hero-content h2 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
}

.hero-content p {
  font-size: 11.5px;
  opacity: 0.92;
  max-width: 580px;
  line-height: 1.4;
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  text-align: right;
  flex-shrink: 0;
}

.hero-stat-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.85;
}

.hero-stat-val {
  font-size: 22px;
  font-weight: 800;
  margin: 2px 0;
  color: #fed7aa;
}

/* ================= DASHBOARD EXECUTIVE SURFACE =================
   Scope ketat: #view-dashboard Baris 1 (.dashboard-hero) + Baris 2 (.kpi-card).
   Fill hero+KPI = warna sticky TH tabel (var(--bg), oceanic #f1f6fa) — abu-biru
   muda bersih, bukan wash navy / hitam / oranye-ungu. Frost tipis opsional.
   5 Kanopi Lapak   = pita 4px var(--primary) tepi ATAS hero saja.
   1 Kaldu Kuah     = garis 1px var(--accent) tepat di bawah kanopi (atap 4+1).
   10 Stempel Owner  = cap oktagon overlay ~96px @1366 (multiply, opacity ~0.48) menimpa kiri judul+paragraf; jangan hapus.
   8 Botol Saus     = strip 5px kiri .kpi-card (6 kartu, warna aksen ikon).
   Chip/stat nested tanpa blur kedua. Latar halaman #ffffff.
   TANPA outer drop shadow. Baris 3–4 .panel tetap putih. Sidebar tidak di-revert. */
#view-dashboard {
  --dash-glass-surface: var(--bg);
  --dash-glass-inner: rgba(255, 255, 255, 0.22);
  --dash-glass-border: rgba(255, 255, 255, 0.55);
  --dash-glass-gloss: rgba(255, 255, 255, 0.72);
  background: #ffffff;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* ---- Baris 1: Executive Hero (fill TH + kanopi 4px + kaldu 1px) ---- */
#view-dashboard .dashboard-hero {
  flex: 0 0 auto;
  min-height: 88px;
  height: 88px;
  max-height: 96px;
  box-sizing: border-box;
  padding: 8px 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 -1.5px 0 var(--border);
  transform: translateZ(0);
}
#view-dashboard .dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* kaldu 1px var(--accent) tepat di bawah kanopi 4px; sheen tipis agar fill TH tetap kebaca */
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 1px no-repeat,
    linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%);
}
#view-dashboard .dashboard-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 180px;
  height: 180px;
  right: -58px;
  top: -74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, transparent 68%);
}
#view-dashboard .dashboard-hero > * {
  position: relative;
  z-index: 1;
}
#view-dashboard .hero-content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
#view-dashboard .hero-content h2 {
  margin: 0 0 2px;
  color: var(--primary);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.2;
}
#view-dashboard .hero-content p {
  margin: 0;
  max-width: none;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 11.5px;
  line-height: 1.3;
  opacity: 1;
}
#view-dashboard .hero-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 4px;
}
#view-dashboard .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid var(--dash-glass-border);
  /* nested frost tanpa blur kedua — maks 7 backdrop (1 hero + 6 KPI) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 var(--dash-glass-gloss),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
#view-dashboard .hero-chip i,
#view-dashboard .hero-chip svg,
#view-dashboard .hero-chip .lucide {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--primary);
  stroke: var(--primary);
}
#view-dashboard .hero-chip.is-mitra,
#view-dashboard .hero-chip.is-mitra i,
#view-dashboard .hero-chip.is-mitra svg,
#view-dashboard .hero-chip.is-mitra .lucide {
  color: var(--success);
  stroke: var(--success);
}
#view-dashboard .hero-stat-card {
  flex: 0 0 auto;
  min-width: 240px;
  box-sizing: border-box;
  position: relative;
  padding: 6px 14px 6px 72px;
  border-radius: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid var(--dash-glass-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 var(--dash-glass-gloss),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}
/* Stempel Owner: cap basah instansi — tinta menimpa paragraf/judul (bukan sela chip–omzet).
   Interior berongga (tanpa fill disc) supaya teks dokumen tembus seperti foto HME. */
#view-dashboard .hero-stat-card .hero-owner-stamp,
#view-dashboard .hero-owner-stamp {
  position: absolute;
  z-index: 5;
  left: 8px;
  top: 50%;
  right: auto;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  display: block;
  flex: none;
  align-self: auto;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  color: var(--dash-stamp-ink, var(--primary));
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateY(-50%) rotate(-12deg);
  mix-blend-mode: normal;
  opacity: 0.90;
  overflow: visible;
}
#view-dashboard .hero-owner-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#view-dashboard .hero-owner-stamp .bk-stamp-outer,
#view-dashboard .hero-owner-stamp .bk-stamp-mid,
#view-dashboard .hero-owner-stamp .bk-stamp-inner {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: miter;
  stroke-linecap: square;
}
#view-dashboard .hero-owner-stamp .bk-stamp-outer {
  stroke-width: 2.8;
}
#view-dashboard .hero-owner-stamp .bk-stamp-mid {
  stroke-width: 0.8;
  stroke-dasharray: 2.4 1.15 6.8 0.85 3.1 1.4;
  opacity: 0.85;
}
#view-dashboard .hero-owner-stamp .bk-stamp-inner {
  stroke-width: 1.5;
}
#view-dashboard .hero-owner-stamp .bk-stamp-around {
  fill: currentColor;
  font-size: 7.6px;
  font-weight: 800;
  letter-spacing: 0.7px;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.7));
}
#view-dashboard .hero-owner-stamp .bk-stamp-core {
  fill: currentColor;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.9));
}
@supports not (mix-blend-mode: multiply) {
  #view-dashboard .hero-stat-card .hero-owner-stamp,
  #view-dashboard .hero-owner-stamp {
    mix-blend-mode: normal;
  }
}
#view-dashboard .hero-stat-label {
  position: relative;
  z-index: 1;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  opacity: 1;
}
#view-dashboard .hero-stat-val {
  position: relative;
  z-index: 1;
  margin: 1px 0;
  color: var(--primary);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .hero-stat-note {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 10.5px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 1;
}

/* ---- Baris 2: KPI Grid (6 kartu, teks utuh @1366) ---- */
#view-dashboard .kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
#view-dashboard .kpi-card {
  --dash-kpi-saus: var(--accent);
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px 6px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1.5px 0 var(--border);
  transform: translateZ(0);
  transition:
    transform 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
#view-dashboard .kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, transparent 32%);
  opacity: 0.45;
}
/* Botol Saus: strip 5px sisi kiri kartu (warna token ikon), bukan tutup atas ikon */
#view-dashboard .kpi-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--dash-kpi-saus);
  pointer-events: none;
  z-index: 2;
}
#view-dashboard .kpi-card > * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  #view-dashboard .kpi-card:hover {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1.5px 0 var(--border);
  }
}
#view-dashboard .kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}
#view-dashboard .kpi-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#view-dashboard .kpi-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dash-glass-border);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--dash-glass-gloss);
}
#view-dashboard .kpi-icon i,
#view-dashboard .kpi-icon svg,
#view-dashboard .kpi-icon .lucide {
  width: 13px;
  height: 13px;
}
/* Ikon KPI semantic theme-aware (token existing, bukan hex hardcoded) */
#view-dashboard .kpi-icon.is-omzet { background: var(--success-light); color: var(--success); }
#view-dashboard .kpi-icon.is-pendapatan { background: var(--accent-light); color: var(--accent); }
#view-dashboard .kpi-icon.is-modal { background: var(--warning-light); color: var(--warning); }
#view-dashboard .kpi-icon.is-setor { background: var(--nav-glass-hover-wash); color: var(--primary-light); }
#view-dashboard .kpi-icon.is-beban { background: var(--danger-light); color: var(--danger); }
#view-dashboard .kpi-icon.is-laba { background: var(--accent-light); color: var(--primary); }
#view-dashboard .kpi-card.is-omzet,
#view-dashboard .kpi-card:has(.kpi-icon.is-omzet) { --dash-kpi-saus: var(--success); }
#view-dashboard .kpi-card.is-pendapatan,
#view-dashboard .kpi-card:has(.kpi-icon.is-pendapatan) { --dash-kpi-saus: var(--accent); }
#view-dashboard .kpi-card.is-modal,
#view-dashboard .kpi-card:has(.kpi-icon.is-modal) { --dash-kpi-saus: var(--warning); }
#view-dashboard .kpi-card.is-setor,
#view-dashboard .kpi-card:has(.kpi-icon.is-setor) { --dash-kpi-saus: var(--primary-light); }
#view-dashboard .kpi-card.is-beban,
#view-dashboard .kpi-card:has(.kpi-icon.is-beban) { --dash-kpi-saus: var(--danger); }
#view-dashboard .kpi-card.is-laba,
#view-dashboard .kpi-card:has(.kpi-icon.is-laba) { --dash-kpi-saus: var(--primary); }
#view-dashboard .kpi-val {
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
#view-dashboard .kpi-footer {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-items: unset;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
  text-overflow: ellipsis;
}
#view-dashboard .kpi-footer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
}
/* Fallback engine tanpa backdrop-filter: kartu putih (bukan frost) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #view-dashboard .dashboard-hero,
  #view-dashboard .kpi-card {
    background: var(--bg);
  }
}

#view-dashboard .panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  padding: 8px 10px;
  margin-bottom: 8px;
}
#view-dashboard .panel-header {
  margin-bottom: 6px;
}
#view-dashboard .panel-title {
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  #view-dashboard .kpi-card {
    transition: none;
  }
  #view-dashboard .kpi-card:hover {
    transform: translateZ(0);
  }
}
/* < laptop kerja: hanya proteksi wrap chip, bukan redesign */
@media (max-width: 1199px) {
  #view-dashboard .hero-chips {
    flex-wrap: wrap;
  }
  #view-dashboard .dashboard-hero {
    min-height: 80px;
    height: auto;
    max-height: none;
  }
}

/* ================= LIST HERO (selaras Dashboard; dipakai list DAN form create/edit) ================= */
.bk-list-hero {
  --dash-glass-border: rgba(255, 255, 255, 0.55);
  --dash-glass-gloss: rgba(255, 255, 255, 0.72);
  flex: 0 0 auto;
  min-height: 88px;
  height: 88px;
  max-height: 96px;
  box-sizing: border-box;
  padding: 8px 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  transform: translateZ(0);
}
.bk-list-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 1px no-repeat,
    linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%);
}
.bk-list-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 180px;
  height: 180px;
  right: -58px;
  top: -74px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, transparent 68%);
}
.bk-list-hero > * {
  position: relative;
  z-index: 1;
}
.bk-list-hero-content {
  flex: 1 1 auto;
  min-width: 0;
}
.bk-list-hero-content h2 {
  margin: 0 0 2px;
  color: var(--primary);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-list-hero-content p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bk-list-hero-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 4px;
  overflow: hidden;
}
.bk-list-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid var(--dash-glass-border);
  box-shadow:
    inset 0 1px 0 var(--dash-glass-gloss),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  text-decoration: none;
}
.bk-list-hero-chip i,
.bk-list-hero-chip svg,
.bk-list-hero-chip .lucide {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--primary);
  stroke: var(--primary);
}
.bk-list-hero-chip.is-mitra,
.bk-list-hero-chip.is-mitra i,
.bk-list-hero-chip.is-mitra svg {
  color: var(--success);
  stroke: var(--success);
}
.bk-list-hero-chip.is-action {
  background: #ffffff !important;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  cursor: pointer;
}
.bk-list-hero-chip.is-action:hover {
  background: #eff6ff !important;
  border-color: #93c5fd;
  color: #2563eb;
}
.bk-list-hero-chip.is-primary {
  background: var(--primary) !important;
  border-color: var(--primary);
  color: #ffffff;
}
.bk-list-hero-chip.is-primary i,
.bk-list-hero-chip.is-primary svg {
  color: #ffffff;
  stroke: #ffffff;
}
.bk-list-hero-chip.is-excel {
  color: #059669;
  border-color: #a7f3d0;
}
.bk-list-hero-chip.is-pdf {
  color: #dc2626;
  border-color: #fecaca;
}
.bk-list-hero-stat {
  flex: 0 0 auto;
  min-width: 220px;
  box-sizing: border-box;
  position: relative;
  padding: 6px 14px 6px 72px;
  border-radius: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid var(--dash-glass-border);
  box-shadow:
    inset 0 1px 0 var(--dash-glass-gloss),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}
.bk-list-hero-stamp {
  position: absolute;
  z-index: 5;
  left: 8px;
  top: 50%;
  width: 72px;
  height: 72px;
  color: var(--dash-stamp-ink, var(--primary));
  pointer-events: none;
  transform: translateY(-50%) rotate(-12deg);
  mix-blend-mode: multiply;
  opacity: 0.72;
}
.bk-list-hero-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bk-list-hero-stamp .bk-stamp-outer,
.bk-list-hero-stamp .bk-stamp-mid,
.bk-list-hero-stamp .bk-stamp-inner {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: miter;
}
.bk-list-hero-stamp .bk-stamp-outer { stroke-width: 2.8; }
.bk-list-hero-stamp .bk-stamp-mid { stroke-width: 0.8; stroke-dasharray: 2.4 1.15 6.8 0.85 3.1 1.4; opacity: 0.85; }
.bk-list-hero-stamp .bk-stamp-inner { stroke-width: 1.5; }
.bk-list-hero-stamp .bk-stamp-around {
  fill: currentColor;
  font-size: 7.6px;
  font-weight: 800;
  letter-spacing: 0.7px;
}
.bk-list-hero-stamp .bk-stamp-core {
  fill: currentColor;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
}
.bk-list-hero-stat-label {
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.bk-list-hero-stat-val {
  margin: 1px 0;
  color: var(--primary);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bk-list-hero-stat-note {
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-size: 10.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.bk-list-hero-stat.is-clickable {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms ease !important;
}
a.bk-list-hero-stat.is-clickable:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow: inset 0 1px 0 var(--dash-glass-gloss), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(234, 88, 12, 0.4) !important;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bk-list-hero { background: var(--bg); }
}
@media (max-width: 1199px) {
  .bk-list-hero {
    height: auto;
    max-height: none;
    min-height: 80px;
  }
  .bk-list-hero-chips { flex-wrap: wrap; }
}

/* Form create/edit: hero list 88px full-bleed, body scroll di kontainer (anti double-scroll) */
.bk-pj-wrap.bk-form-page,
.bk-form-page {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.content-body > .bk-form-page,
.content-body > .bk-pj-wrap.bk-form-page {
  overflow: hidden;
}
.bk-form-page > .bk-list-hero,
.bk-pj-wrap > .bk-list-hero,
.bk-produksi > .bk-list-hero,
.bk-sku-page > .bk-list-hero,
.bk-karyawan-page > .bk-list-hero,
.bk-aset-form-page > .bk-list-hero,
.bk-bkk-page > .bk-list-hero,
.bk-user-form-page > .bk-list-hero {
  flex: 0 0 auto;
  width: 100%;
}
.bk-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

#view-dashboard .bk-dash-trend-empty {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}
#view-dashboard .bk-dash-charts {
  flex: 0 0 auto;
}
#view-dashboard > .panel:last-of-type {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0;
}
#view-dashboard .bk-dash-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}
#view-dashboard .bk-dash-scroll .custom-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg) !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
}
#view-dashboard .bk-dash-scroll .custom-table tbody tr {
  height: 34px;
  content-visibility: auto;
  contain-intrinsic-size: auto 34px;
}
#table-dash-mitra-top3 {
  table-layout: fixed;
  width: 100%;
}
#table-dash-mitra-top3 .bk-dash-col-rank { width: 7%; }
#table-dash-mitra-top3 .bk-dash-col-nama { width: 26%; }
#table-dash-mitra-top3 .bk-dash-col-hari { width: 12%; }
#table-dash-mitra-top3 .bk-dash-col-porsi { width: 14%; }
#table-dash-mitra-top3 .bk-dash-col-omzet { width: 16%; }
#table-dash-mitra-top3 .bk-dash-col-skor { width: 14%; }
#table-dash-mitra-top3 .bk-dash-col-aksi { width: 11%; }
#table-dash-mitra-top3 th,
#table-dash-mitra-top3 td {
  padding: 6px 10px;
  vertical-align: middle;
}
#table-dash-mitra-top3 th.is-rank,
#table-dash-mitra-top3 td.is-rank,
#table-dash-mitra-top3 th.is-hari,
#table-dash-mitra-top3 td.is-hari,
#table-dash-mitra-top3 th.is-aksi,
#table-dash-mitra-top3 td.is-aksi {
  text-align: center;
}
#table-dash-mitra-top3 th.is-nama,
#table-dash-mitra-top3 td.is-nama {
  text-align: left;
}
#table-dash-mitra-top3 th.is-porsi,
#table-dash-mitra-top3 td.is-porsi,
#table-dash-mitra-top3 th.is-omzet,
#table-dash-mitra-top3 td.is-omzet,
#table-dash-mitra-top3 th.is-skor,
#table-dash-mitra-top3 td.is-skor {
  text-align: right;
}
#table-dash-mitra-top3 tbody tr {
  height: 44px;
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
#table-dash-mitra-top3 tbody tr.is-top1 {
  background: #fffdf7;
}
#table-dash-mitra-top3 td.is-porsi {
  font-weight: 700;
}
#table-dash-mitra-top3 td.is-omzet {
  font-weight: 800;
  color: var(--success, #059669);
}
#table-dash-mitra-top3 .bk-dash-rank-cell {
  width: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}
#table-dash-mitra-top3 .bk-dash-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 0;
}
#table-dash-mitra-top3 .bk-dash-rank svg {
  display: block;
  width: 24px;
  height: 24px;
}
#table-dash-mitra-top3 .bk-dash-rank.is-n {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 24px;
}
#table-dash-mitra-top3 .bk-dash-nik {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 1px;
}
#table-dash-mitra-top3 .bk-dash-unit,
#table-dash-mitra-top3 .bk-dash-th-unit {
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
}
#table-dash-mitra-top3 td.is-hari .bk-dash-unit {
  font-weight: 400;
  font-size: 10px;
}
#table-dash-mitra-top3 .bk-dash-score {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  max-width: 96px;
}
#table-dash-mitra-top3 .bk-dash-score-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  font-family: ui-monospace, "JetBrains Mono", monospace;
}
#table-dash-mitra-top3 .bk-dash-score-num small {
  margin-left: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
#table-dash-mitra-top3 .bk-dash-score-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
}
#table-dash-mitra-top3 .bk-dash-score-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #64748b;
}
#table-dash-mitra-top3 .bk-dash-score.is-1 .bk-dash-score-fill { background: #d97706; }
#table-dash-mitra-top3 .bk-dash-score.is-2 .bk-dash-score-fill { background: #94a3b8; }
#table-dash-mitra-top3 .bk-dash-score.is-3 .bk-dash-score-fill { background: #c2410c; }
#table-dash-mitra-top3 td.is-aksi {
  white-space: nowrap;
}

/* Tren lebih lebar dari donat @1366; canvas mengisi panel; tanpa overflow dokumen */
.bk-dash-charts {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.88fr);
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  align-items: stretch;
}
#view-dashboard .bk-dash-charts > .panel,
.bk-dash-charts > .panel {
  overflow: visible;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}
#view-dashboard .bk-dash-charts > .panel .panel-header {
  gap: 8px;
  min-width: 0;
  overflow: visible;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 6px;
}
#view-dashboard .bk-dash-charts > .panel .panel-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  line-height: 1.35;
}
#view-dashboard .bk-dash-charts > .panel .panel-title > span {
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}
#view-dashboard .bk-dash-charts > .panel .panel-header > .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.bk-dash-trend {
  position: relative;
  height: 180px;
  min-height: 180px;
  max-height: 180px;
  width: 100%;
  overflow: hidden;
}
.bk-dash-trend canvas,
#chart-omzet-trend {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}

/* Donat biaya dashboard: flex mengisi panel + legend full-width */
.bk-dash-pie {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 188px;
  max-height: none;
  padding: 0 0 4px;
  overflow: visible;
  box-sizing: border-box;
}
.bk-dash-pie-ring {
  position: relative;
  flex: 0 0 148px;
  width: 148px;
  height: 148px;
  overflow: hidden;
}
.bk-dash-pie-ring canvas {
  width: 148px !important;
  height: 148px !important;
}
.bk-dash-pie-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
  padding: 24px 22px;
}
.bk-dash-pie-center-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.1;
}
.bk-dash-pie-center-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
  max-width: 100%;
}
.bk-dash-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}
.bk-dash-pie-legend li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 1px 2px 2px 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.bk-dash-pie-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  margin-top: 4px;
}
.bk-dash-pie-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bk-dash-pie-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bk-dash-pie-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.bk-dash-pie-amt {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.bk-dash-pie-pct {
  font-size: 10.5px;
  font-weight: 750;
  color: #047857;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-left: auto;
}
.bk-dash-pie-tip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  left: 0;
  top: 0;
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11px;
  line-height: 1.35;
  max-width: min(280px, calc(100% - 8px));
  white-space: normal;
  overflow: hidden;
  transition: opacity 0.08s ease;
}
.bk-dash-pie-tip strong {
  display: block;
  font-weight: 700;
  margin-bottom: 3px;
}
.bk-dash-pie-tip em {
  display: block;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: #a7f3d0;
  font-weight: 650;
}
.bk-dash-pie-empty {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}

/* ================= KPI GRID (6 Compact Cards, ~80px @ 1366) ================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  min-height: 80px;
  max-height: 88px;
  height: 80px;
  box-sizing: border-box;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.kpi-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon i,
.kpi-icon svg,
.kpi-icon .lucide {
  width: 16px;
  height: 16px;
}

/* Warna ikon KPI dashboard: lihat blok DASHBOARD EXECUTIVE GLASS LAYER (#view-dashboard .kpi-icon.is-*, token tema) */

.kpi-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 2px;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-footer {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-footer span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.trend-up { color: var(--success); font-weight: 600; }
.trend-down { color: var(--danger); font-weight: 600; }

/* Jurnal Harian KPI: 6 kolom @≥1401; @≤1400 pecah 3×2 agar kartu ke-6 tidak terpotong */
.jh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.jh-kpi-card {
  min-width: 0;
  min-height: 64px;
  max-height: 64px;
  height: 64px;
  padding: 4px 6px;
}
.jh-kpi-card .kpi-title {
  white-space: nowrap;
  line-height: 1.2;
  text-transform: none;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-kpi-card .kpi-header {
  margin-bottom: 2px;
}
.jh-kpi-card .kpi-icon {
  width: 22px;
  height: 22px;
}
.jh-kpi-card .kpi-icon i,
.jh-kpi-card .kpi-icon svg {
  width: 12px;
  height: 12px;
}
.jh-kpi-card .kpi-val {
  font-size: 13px;
  margin-bottom: 0;
}
.jh-kpi-card .kpi-footer {
  display: none;
}
/* Keterangan rumus aktif kartu Pertumbuhan Harian (bukan footer tersembunyi) */
.jh-kpi-card.is-growth {
  max-height: none;
  height: auto;
  min-height: 64px;
  overflow: visible;
}
.jh-kpi-growth-note {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  max-width: 100%;
}
.jh-chart-wrap {
  padding: 6px 10px;
  margin-bottom: 6px;
}
.jh-chart {
  position: relative;
  height: 56px;
  width: 100%;
}

/* Toggle sumber setoran gerobak — toolbar filter Jurnal Harian */
.jh-setoran-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.jh-setoran-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.jh-setoran-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.jh-setoran-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease;
}
.jh-setoran-toggle.is-on,
.jh-setoran-toggle:has(input:checked) {
  border-color: #507fa9;
  background: #ebf3f8;
  color: #1b4769;
}
.jh-setoran-toggle.is-on .jh-setoran-switch,
.jh-setoran-toggle:has(input:checked) .jh-setoran-switch {
  background: #507fa9;
}
.jh-setoran-toggle.is-on .jh-setoran-switch::after,
.jh-setoran-toggle:has(input:checked) .jh-setoran-switch::after {
  transform: translateX(14px);
}
.jh-setoran-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.jh-setoran-table tbody tr {
  height: 34px;
}

.jh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
}
.jh-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.jh-head h2 i,
.jh-head h2 svg { width: 18px; height: 18px; }
.jh-head-lead { display: none; }
.jh-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.jh-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.jh-chip {
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  line-height: 24px;
}
.jh-chip.is-on {
  background: var(--primary);
  color: #fff;
}
.jh-chip.is-final.is-on {
  background: var(--success);
  color: #fff;
}
.jh-chip.is-void.is-on {
  background: var(--danger);
  color: #fff;
}
.jh-filter-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 0;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.jh-field-wrap {
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 200px;
}
.jh-field-coa { min-width: 160px; width: 180px; }
.jh-field-sumber { min-width: 130px; width: 150px; }
.jh-filter-sep {
  font-size: 12px;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.jh-reset-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  background: #ffffff !important;
}
.jh-filter-form select,
.jh-filter-form input[type="date"],
.jh-filter-form input[type="text"],
.jh-filter-form input[type="search"] {
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 6px;
  background: #ffffff !important;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
.jh-filter-form .select2-container {
  width: 100% !important;
}
.jh-filter-form .select2-container .select2-selection--single {
  height: 32px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px;
}
.jh-filter-form .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
  color: #0f172a;
  font-size: 12px;
  padding-left: 8px;
}
.jh-filter-form .select2-container .select2-selection--single .select2-selection__arrow {
  height: 30px;
}
.jh-filter-form select:focus,
.jh-filter-form input[type="date"]:focus,
.jh-filter-form input[type="text"]:focus,
.jh-filter-form input[type="search"]:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.jh-page {
  transition: opacity 0.15s ease;
}
.jh-page.is-loading,
.jh-page.is-busy {
  opacity: 0.48;
  pointer-events: none;
}

.jh-detail-cell,
.jh-detail-col {
  min-width: 200px;
  width: 26%;
  max-width: none;
  overflow: hidden;
  vertical-align: top;
}
.jh-detail-narasi {
  display: block;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
tr.jh-jurnal-row {
  height: auto !important;
  min-height: 40px;
}
tr.jh-jurnal-row td {
  vertical-align: top;
}
tr.jh-jurnal-row td:nth-child(6),
tr.jh-jurnal-row td:nth-child(7),
tr.jh-jurnal-row td:nth-child(8),
tr.jh-jurnal-row td:nth-child(10) {
  white-space: nowrap;
}
.jh-aksi {
  min-width: 0;
  justify-content: center;
}
.jh-aksi .btn {
  font-size: 10.5px;
  padding: 0 7px;
  height: 24px;
}

.jh-excel-v2-banner {
  flex: 0 0 auto;
  margin: 0 0 6px !important;
  padding: 4px 8px !important;
  border: 1px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  box-shadow: none;
}
.jh-excel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}
.jh-excel-head-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-excel-head-title i,
.jh-excel-head-title svg {
  width: 13px;
  height: 13px;
  color: #15803d;
  flex-shrink: 0;
}
.jh-excel-head-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dcfce7;
  color: #14532d;
  font-weight: 700;
  border: 1px solid #86efac;
  white-space: nowrap;
  flex-shrink: 0;
}
.jh-excel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.jh-excel-cell {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 6px;
  min-width: 0;
}
.jh-excel-cell.is-green {
  background: #C6EFCE;
  border: 2px solid #006100;
}
.jh-excel-lbl {
  font-size: 8.5px;
  font-weight: 800;
  color: #1e3a8a;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-excel-cell.is-green .jh-excel-lbl {
  color: #006100;
}
.jh-excel-val {
  font-size: 12px;
  font-weight: 800;
  color: #1e3a8a;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jh-excel-cell.is-green .jh-excel-val {
  color: #006100;
}
.jh-excel-sub { display: none !important; }
/* Strip kas: tinggi mengikuti konten; teks penuh (tanpa ellipsis / max-height pendek). */
.jh-saldo-kas-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  min-height: 0;
  max-height: none;
  gap: 10px 14px !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  overflow: visible;
}
.jh-saldo-kas-strip .jh-strip-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.jh-saldo-kas-strip .jh-strip-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  min-height: 28px;
  height: auto;
  background: var(--border);
}
.jh-saldo-kas-strip strong.font-mono {
  font-size: 14px !important;
}
.jh-saldo-kas-strip .jh-strip-recon,
.jh-saldo-kas-strip > div:last-child {
  font-size: 11px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.45;
}
/* Mobile ~390px: stack vertikal agar label + nominal + narasi kas tidak terpotong horizontal. */
@media (max-width: 720px) {
  .jh-saldo-kas-strip {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .jh-saldo-kas-strip .jh-strip-divider {
    display: none !important;
  }
  .jh-saldo-kas-strip .jh-strip-cell {
    flex: 0 0 auto;
    width: 100%;
  }
  .jh-saldo-kas-strip .jh-strip-recon,
  .jh-saldo-kas-strip > div:last-child {
    flex: 0 0 auto;
    width: 100%;
    text-align: left !important;
  }
  .jh-saldo-kas-strip .jh-strip-recon .jh-strip-recon-note {
    justify-content: flex-start !important;
  }
}
.jh-table-card {
  padding: 0;
  /* Jangan overflow:hidden — memotong sticky TH di tepi atas scrollport */
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.jh-table-scroll {
  max-height: calc(100vh - 295px);
  overflow: auto;
  flex: 0 0 auto;
  min-height: 160px;
  /* Scrollport dimulai di baris header — tanpa padding/radius yang menggeser/memotong sticky */
  padding-top: 0;
  margin-top: 0;
  border-radius: 0;
  background: #fff;
}
.jh-table-scroll table {
  width: 100%;
  /* separate + spacing 0: sticky TH tidak terputus/tersayat (bug border-collapse) */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: fixed;
  margin: 0;
}
/* Satu pita header solid: thead + setiap th warna sama (anti patchy / celah putih) */
.jh-table-scroll thead {
  background: var(--bg);
}
.jh-table-scroll th,
.jh-table-scroll table thead th,
.jh-table-scroll table th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 10.5px;
  line-height: 34px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  background-image: none !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
  white-space: nowrap;
  /* Anti-gap putih di antara thead sticky dan tbody */
  border-top: none;
  border-bottom: none;
  /* Dilarang radius per-sel — sudut memotong pita vs #fff scroll (terlihat berantakan) */
  border-radius: 0 !important;
}
.jh-col-no { width: 36px; text-align: center; }
.jh-col-tgl { width: 78px; }
.jh-col-nomor { width: 152px; }
.jh-col-sumber { width: 108px; }
/* Debit/Kredit seirama; Saldo Kas lebih lebar agar 20.544.250 tidak wrap */
.jh-col-num { width: 100px; text-align: right; }
.jh-ledger-table th.jh-col-num:nth-child(8),
.jh-ledger-table td.jh-saldo-kas-cell {
  width: 118px;
  min-width: 118px;
}
.jh-col-user { width: 88px; }
.jh-col-status { width: 68px; text-align: center; }
/* JH hanya "Rincian" — override global master min-width:248px / width:1% pada .bk-col-aksi
   (itu meremukkan AKSI ~11px + menyisakan celah putih ~190px tanpa background header) */
.jh-col-aksi,
.jh-table-scroll th.bk-col-aksi,
.jh-table-scroll td.bk-col-aksi,
.jh-table-scroll .jh-col-aksi,
.jh-table-scroll .bk-col-aksi {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 100px !important;
  text-align: center;
  white-space: nowrap;
}
.jh-table-scroll tbody tr {
  height: 34px;
}
.jh-ledger-table tbody tr.jh-jurnal-row {
  height: auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
  border-bottom: 1px solid var(--border);
}
.jh-ledger-table tbody tr.jh-jurnal-row.is-void {
  opacity: 0.55;
}
.jh-ledger-table tbody td.jh-no-col {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  width: 36px;
}
.jh-ledger-table tbody td.jh-col-tgl {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  white-space: nowrap;
}
.jh-ledger-table tbody td.jh-col-nomor {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.jh-ledger-table tbody td.jh-col-sumber > div:first-child {
  font-weight: 700;
}
.jh-ledger-table tbody td.jh-col-num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}
.jh-ledger-table tbody td.jh-saldo-kas-cell.is-kas {
  font-weight: 700;
  color: var(--primary);
}
.jh-kpi-gap-note {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: #b45309;
}
.jh-setoran-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 34px;
}

/* —— Ledger tabel: proporsi profesional @1366 (CSS-only; jangan sentuh KPI) —— */
.jh-ledger-table tbody td,
.jh-ledger-table tfoot td {
  vertical-align: top;
  padding: 7px 8px !important;
  box-sizing: border-box;
}
.jh-ledger-table thead th {
  vertical-align: middle;
  text-align: inherit;
}
.jh-ledger-table thead th.jh-col-num,
.jh-ledger-table thead th:nth-child(6),
.jh-ledger-table thead th:nth-child(7),
.jh-ledger-table thead th:nth-child(8) {
  text-align: right;
  padding-right: 10px !important;
}
.jh-ledger-table thead th.jh-col-no,
.jh-ledger-table thead th.jh-col-status {
  text-align: center;
}
/* Baris sekunder (JRN / kode akun / nama akun): lebih kecil, muted, tidak tabrak.
   - `div + div` = baris ke-2 pada SUMBER & DETAIL
   - `div:only-of-type` = satu-satunya div di NO. TRANSAKSI (nomor JRN di bawah teks SPA/TRX) */
.jh-ledger-table tbody td > div + div,
.jh-ledger-table tbody td > div:only-of-type {
  display: block;
  margin-top: 2px;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.jh-ledger-table tbody td > div:first-child:not(:only-of-type),
.jh-ledger-table tbody td > .jh-detail-narasi {
  line-height: 1.3;
  font-size: 11.5px;
}
/* Kolom uang: kanan rata, tabular figures, ritme lebar sama */
.jh-ledger-table tbody td:nth-child(6),
.jh-ledger-table tbody td:nth-child(7),
.jh-ledger-table tbody td:nth-child(8),
.jh-ledger-table tfoot td.jh-total-mutasi-debit,
.jh-ledger-table tfoot td.jh-total-mutasi-kredit,
.jh-ledger-table tfoot td.jh-saldo-kas-total {
  text-align: right !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  white-space: nowrap !important;
  padding-left: 6px !important;
  padding-right: 10px !important;
}
.jh-ledger-table tbody td:nth-child(1),
.jh-ledger-table tbody td:nth-child(10),
.jh-ledger-table tbody td.bk-col-aksi {
  text-align: center;
  vertical-align: top;
}
.jh-ledger-table tbody td:nth-child(10) .badge,
.jh-ledger-table tbody td:nth-child(10) span[style*="border-radius:9999px"] {
  margin-top: 1px;
}

@media (max-height: 800px) {
  .jh-total-mutasi-head {
    display: none;
  }
}
@media (max-width: 1400px) {
  .jh-col-user {
    display: none;
  }
  /* @1366: kunci ritme kolom uang agar tepi kanan sejajar, tanpa blowout horizontal.
     Sisakan ruang DETAIL ≥ ~220px agar narasi tidak elipsis parah. */
  .jh-ledger-table {
    width: 100%;
    max-width: 100%;
  }
  .jh-col-tgl { width: 74px; }
  .jh-col-nomor { width: 138px; }
  .jh-col-sumber { width: 92px; }
  .jh-col-num { width: 88px; }
  .jh-ledger-table th.jh-col-num:nth-child(8),
  .jh-ledger-table td.jh-saldo-kas-cell {
    width: 108px;
    min-width: 108px;
  }
  .jh-col-status { width: 62px; }
  .jh-table-scroll table.jh-ledger-table thead th.bk-col-aksi,
  .jh-table-scroll table.jh-ledger-table thead th:last-child,
  .jh-table-scroll table.jh-ledger-table tbody td.bk-col-aksi,
  .jh-table-scroll table.jh-ledger-table tbody td:last-child {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 90px !important;
  }
  .jh-ledger-table .jh-detail-col,
  .jh-ledger-table .jh-detail-cell {
    width: 280px;
    min-width: 220px;
  }
}

/* ================= PANELS & CARDS ================= */
.panel {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  margin-bottom: 14px;
}
.panel.jh-chart-wrap {
  padding: 6px 10px;
  margin-bottom: 6px;
}
@media (max-height: 800px) {
  .panel.jh-chart-wrap {
    display: none;
  }
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.panel-title {
  font-size: 14px;
  font-weight: 750;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title i,
.panel-title svg,
.panel-title .lucide {
  width: 16px;
  height: 16px;
}

/* ================= SUB TABS ================= */
.sub-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 12px;
  width: fit-content;
}

.sub-tab-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.sub-tab-btn.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ================= TABLES (Compact Data-Dense Layout) ================= */
.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 295px);
  position: relative;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.custom-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  padding: 6px 10px;
  background: var(--bg) !important;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1.5px 0 var(--border);
  white-space: nowrap;
}

.custom-table td {
  height: 34px;
  padding: 4px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
  box-sizing: border-box;
}

.custom-table tbody tr {
  height: 34px;
  content-visibility: auto;
  contain-intrinsic-size: auto 34px;
}

.custom-table tbody tr:hover {
  background: #fbfcfe;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
}

.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-primary { background: #eff6ff; color: #1d4ed8; }
.badge-accent { background: var(--accent-light); color: var(--accent); }
.badge-neutral { background: #f1f5f9; color: #475569; }

/* ================= GEROBAK CARD GRID (4 Columns on 1366px) ================= */
.gerobak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 12px;
}

.gerobak-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.15s ease;
  position: relative;
}

.gerobak-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.08);
}

.gerobak-badge-code {
  font-size: 11px;
  font-weight: 800;
  background: var(--primary);
  color: white;
  padding: 2px 7px;
  border-radius: 5px;
}

.gerobak-loc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 6px 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.gerobak-metric-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
}

/* ================= MODALS (Max Height 88vh for 768px Screens) ================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-box {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  animation: modalZoom 0.18s ease;
}

.modal-box.modal-lg {
  max-width: 860px;
}

.modal-box.modal-pitch {
  max-width: 960px;
  background: #0b1324;
  color: #f8fafc;
}

@keyframes modalZoom {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-pitch .modal-header {
  border-color: #1e293b;
}

.modal-title {
  font-size: 15px;
  font-weight: 750;
  color: var(--primary);
}

.modal-pitch .modal-title {
  color: #ffffff;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 18px;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.modal-close:hover {
  background: #f1f5f9;
  color: var(--primary);
}

.modal-pitch .modal-close:hover {
  background: #1e293b;
  color: #ffffff;
}

.modal-body {
  padding: 16px 18px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-control {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ================= PITCH DECK PRESENTATION (PID Template - seleksi-karyawan-tetap) ================= */
.modal-box.modal-pitch {
  max-width: 1040px;
  background: #0b3d91;
  color: #f8fafc;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e5fbf;
  display: flex;
  flex-direction: column;
}

.modal-pitch .modal-header {
  background: #082c69;
  border-bottom: 1px solid #1e5fbf;
  padding: 10px 20px;
}

.modal-pitch .modal-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-pitch .modal-body {
  padding: 0;
  background: #f8fafc;
  color: #1e293b;
  min-height: 480px;
  max-height: calc(86vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.deck-slide {
  display: none;
  animation: fadeIn 0.2s ease;
  flex-grow: 1;
}

.deck-slide.active-slide {
  display: flex;
  flex-direction: column;
}

/* Quick Jump Slide Toolbar */
.slide-jump-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 16px;
  background: #072559;
  border-bottom: 1px solid #1e5fbf;
}

.slide-pill-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.slide-pill-btn:hover, .slide-pill-btn.active {
  background: #1e5fbf;
  color: #ffffff;
  font-weight: 700;
}

/* COVER SLIDE (Slide 1) */
.slide-cover {
  background: #0b3d91;
  color: #ffffff;
  padding: 28px 32px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.cover-badge {
  background: #1e5fbf;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}

.cover-title {
  font-size: 24px;
  font-weight: 850;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.cover-subtitle {
  font-size: 13px;
  color: #aac7d8;
  line-height: 1.5;
  margin-bottom: 22px;
}

.cover-identity-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 12px;
}

.cover-identity-card table {
  width: 100%;
  border-collapse: collapse;
}

.cover-identity-card td {
  padding: 3px 0;
  vertical-align: top;
}

.cover-identity-card td.lbl {
  color: #93c5fd;
  width: 130px;
  font-weight: 600;
}

.cover-identity-card td.val {
  color: #ffffff;
  font-weight: 700;
}

.cover-agenda-box {
  background: #072559;
  border: 1px solid #1e5fbf;
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover-agenda-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fed7aa;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agenda-item-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11.5px;
  color: #e2e8f0;
  line-height: 1.4;
}

.agenda-alpha {
  background: #1e5fbf;
  color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* MATERI SLIDES (Slides 2 to 11) */
.slide-materi {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.materi-header-zone {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  padding: 12px 24px 10px;
}

.materi-breadcrumb {
  font-size: 10px;
  font-weight: 800;
  color: #1e5fbf;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 3px;
}

.materi-title {
  font-size: 18px;
  font-weight: 800;
  color: #0b3d91;
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}

.materi-subtitle {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
}

.materi-content-zone {
  padding: 16px 24px 20px;
  flex-grow: 1;
}

/* DI SLIDE BOX */
.di-slide-box {
  background: #f0f7ff;
  border: 1px solid #cbdff7;
  border-left: 4px solid #1e5fbf;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.di-slide-badge {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #1e5fbf;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.di-slide-text {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
  margin: 0;
}

/* PURE FLAT VISUAL ZONE */
.flat-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.flat-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.flat-card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.flat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #0b3d91;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: none !important;
}

.flat-card.accent-card {
  border-top-color: #ea580c;
}

.flat-card.success-card {
  border-top-color: #059669;
}

.flat-card h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: #0b3d91;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flat-card p, .flat-card ul {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

.flat-card ul {
  padding-left: 16px;
}

.flat-kpi-strip {
  display: flex;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.flat-kpi-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid #e2e8f0;
  padding: 0 8px;
}

.flat-kpi-item:last-child {
  border-right: none;
}

.flat-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}

.flat-kpi-val {
  font-size: 17px;
  font-weight: 850;
  color: #0b3d91;
}

.flat-kpi-val.success { color: #059669; }
.flat-kpi-val.danger { color: #dc2626; }
.flat-kpi-val.accent { color: #ea580c; }

.deck-flat-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.deck-flat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.deck-flat-table th {
  background: #0b3d91;
  color: #ffffff;
  font-weight: 750;
  padding: 6px 10px;
  text-align: left;
}

.deck-flat-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

.deck-flat-table tr:nth-child(even) {
  background: #f8fafc;
}

.deck-flat-table tr:last-child td {
  border-bottom: none;
}

/* SPEAKER NOTES / NARASI BACAN */
.speaker-notes-drawer {
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: #334155;
  line-height: 1.5;
  display: none;
}

.speaker-notes-drawer.open {
  display: block;
}

.speaker-notes-title {
  font-weight: 800;
  color: #0b3d91;
  font-size: 10.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-toggle-notes {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.btn-toggle-notes:hover {
  background: #cbd5e1;
  color: #0f172a;
}

/* MATERI FOOTER ZONE */
.materi-footer-zone {
  background: #0b3d91;
  color: #cbd5e1;
  padding: 6px 24px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #1e5fbf;
  margin-top: auto;
}

/* PENUTUP SLIDE (Slide 12) */
.slide-penutup {
  background: #0b3d91;
  color: #ffffff;
  padding: 28px 32px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.penutup-content-box {
  background: #072559;
  border: 1px solid #1e5fbf;
  border-radius: 10px;
  padding: 24px 28px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.penutup-title {
  font-size: 22px;
  font-weight: 850;
  color: #ffffff;
  margin-bottom: 8px;
}

.penutup-subtitle {
  font-size: 12.5px;
  color: #aac7d8;
  margin-bottom: 20px;
  line-height: 1.5;
}

.penutup-contact-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 11.5px;
}

.penutup-contact-card div h5 {
  font-size: 11px;
  font-weight: 750;
  color: #fed7aa;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* DECK NAV BAR */
.deck-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #072559;
  border-top: 1px solid #1e5fbf;
}

/* Select2 Theme Alignment */
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 8px !important;
}

/* SweetAlert2 — diselaraskan ke kartu cap setoran BaksoKu */
.swal2-popup,
.bk-swal-popup {
  border-radius: 16px !important;
  font-size: 13px !important;
  padding: 0 0 18px !important;
  background: var(--card-bg) !important;
  color: var(--text) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 85%, transparent),
    0 28px 64px -20px color-mix(in srgb, var(--primary-dark) 42%, transparent) !important;
}
.swal2-title,
.bk-swal-title {
  font-size: 17px !important;
  font-weight: 750 !important;
  color: var(--primary) !important;
  padding: 8px 22px 0 !important;
}
.bk-swal-text,
.swal2-html-container {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  padding: 0 22px !important;
}
.swal2-input {
  height: 36px !important;
  font-size: 12px !important;
  margin: 0.5em auto !important;
  border-radius: 8px !important;
}
.swal2-backdrop-show,
.swal2-container.swal2-backdrop-show {
  background: color-mix(in srgb, var(--primary-dark) 58%, transparent) !important;
}
.bk-swal-toast.swal2-popup,
.swal2-popup.swal2-toast {
  padding: 10px 14px !important;
  border-radius: 12px !important;
}

/* SweetAlert2 Actions & Buttons Hardening (Anti-Gepeng, Elegan, Proporsional) */
div:where(.swal2-container) div:where(.swal2-actions),
.bk-swal-actions {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 18px 0 0 0 !important;
  padding: 0 24px 8px !important;
}
div:where(.swal2-container) div:where(.swal2-actions) button,
.bk-swal-actions .bk-notice-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 100px !important;
  height: 38px !important;
  padding: 0 22px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  line-height: 1 !important;
  transition: all 0.15s ease-in-out !important;
  flex: 0 0 auto !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm),
div:where(.swal2-container) button.swal2-confirm,
.bk-notice-btn-ok {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover,
div:where(.swal2-container) button.swal2-confirm:hover,
.bk-notice-btn-ok:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 6px 16px -2px color-mix(in srgb, var(--primary-dark) 55%, transparent) !important;
}

.bk-notice-btn-ok.is-danger,
.bk-notice.is-danger .bk-notice-btn-ok,
.bk-swal-btn-danger,
button.swal2-confirm.is-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.4) !important;
}
.bk-notice-btn-ok.is-danger:hover,
.bk-notice.is-danger .bk-notice-btn-ok:hover,
.bk-swal-btn-danger:hover,
button.swal2-confirm.is-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 6px 16px -2px rgba(185, 28, 28, 0.5) !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel),
div:where(.swal2-container) button.swal2-cancel,
.bk-notice-btn-ghost {
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  color: var(--text, #1e293b) !important;
  box-shadow: none !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover,
div:where(.swal2-container) button.swal2-cancel:hover,
.bk-notice-btn-ghost:hover {
  background: var(--bg, #f8fafc) !important;
  border-color: var(--text-muted, #64748b) !important;
}


/* ================= RESPONSIVE QUERIES (1024, 1366, 1920) ================= */
@media (max-width: 1400px) {
  /* Dashboard 3+3; Jurnal Harian 3×2 — kartu Pertumbuhan Harian wajib masuk viewport. */
  .kpi-grid,
  #view-dashboard .kpi-grid { 
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    gap: 8px !important;
  }
  .jh-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .topbar {
    padding: 0 10px;
  }
  .search-container {
    width: 190px;
  }
  .search-container:focus-within {
    width: 230px;
  }
  .topbar-actions {
    gap: 4px;
  }
  .topbar-actions .btn {
    padding: 0 8px;
    height: 32px;
    font-size: 11.5px;
  }
  #topbar-top1-link {
    padding: 0 8px;
  }
  #topbar-top1-nama {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1200px) {
  .topbar-actions a[href*="/laporan/laba-rugi"] span,
  .topbar-actions a[href*="/jurnal-harian"] span {
    display: none;
  }
  .topbar-actions a[href*="/laporan/laba-rugi"],
  .topbar-actions a[href*="/jurnal-harian"] {
    padding: 0 8px;
  }
  #topbar-top1-nama {
    max-width: 100px;
  }
}

@media (max-width: 1024px) {
  /* Tablet / POS mini 1024x768: 2 + 2 + 2 — dashboard only. JH ikut 3×2 dari MQ 1400. */
  .kpi-grid,
  #view-dashboard .kpi-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    gap: 8px !important;
  }
  .bk-dash-charts {
    grid-template-columns: 1fr !important;
  }
  .search-container {
    width: 150px;
  }
  .search-container:focus-within {
    width: 180px;
  }
  #user-tools-container span {
    display: none;
  }
  #topbar-top1-nama {
    display: none;
  }
  #topbar-top1-link {
    padding: 0 6px;
  }
}

@media (max-width: 768px) {
  .sidebar { left: -100%; width: 260px; }
  .sidebar.open { left: 0; }
  .main-wrapper { margin-left: 0; width: 100%; }
  .topbar { padding: 0 14px; }
  .search-container { width: 140px; }
  .kpi-grid,
  #view-dashboard .kpi-grid,
  .jh-kpi-grid { grid-template-columns: 1fr !important; }
  .dashboard-hero { flex-direction: column; text-align: left; gap: 12px; }
  .hero-stat-card { text-align: left; width: 100%; }
}

/* ================= 12. HALAMAN AUTENTIKASI (LOGIN SCREEN) ================= */
/* Reset Native Browser Password Reveal agar tidak muncul kotak unstyled */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.auth-page {
  min-height: 100vh;
  background: var(--bg);
  background-image: 
    radial-gradient(at 50% 0%, var(--accent-light) 0px, transparent 60%),
    radial-gradient(at 100% 100%, rgba(2, 132, 199, 0.05) 0px, transparent 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--text);
  padding: 32px 24px;
  position: relative;
}

/* Floating Top Bar */
.auth-top-bar {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.auth-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.status-indicator-dot.pulse {
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.6);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* Auth Container & Card */
.auth-container {
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 2;
  margin: auto 0;
}

.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.02);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.auth-header {
  padding: 36px 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.auth-header .brand-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px auto;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.15);
}

.auth-header .brand-icon i,
.auth-header .brand-icon svg {
  width: 28px;
  height: 28px;
}

.auth-header .brand-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 auto;
  gap: 6px;
}

.auth-header .brand-title span.highlight-ku {
  color: var(--accent);
}

.auth-header .brand-version {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.auth-header .brand-badge-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.auth-header .brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 9999px;
  background: var(--accent-light);
  color: var(--accent);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 auto;
}

.auth-header .brand-subtitle {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 10px auto 0 auto;
  line-height: 1.5;
  width: 100%;
  max-width: 380px;
}

.auth-body {
  padding: 24px 32px;
}

.auth-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-alert.error {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.auth-alert.success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.auth-body .form-group {
  margin-bottom: 18px;
}

.auth-body .form-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-body .form-group label .label-hint {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
}

.auth-body .input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-body .input-icon-wrapper .input-lead-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  width: 17px;
  height: 17px;
  pointer-events: none;
  transition: color 0.2s ease;
}

.auth-body .input-icon-wrapper input {
  width: 100%;
  height: 44px;
  padding: 8px 40px 8px 42px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  background: var(--card-bg);
  transition: all 0.2s ease;
  font-family: inherit;
}

.auth-body .input-icon-wrapper input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.auth-body .input-icon-wrapper:focus-within .input-lead-icon {
  color: var(--accent);
}

.btn-toggle-password {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-toggle-password:hover {
  color: var(--primary);
  background: var(--bg);
}

.btn-toggle-password svg {
  width: 16px;
  height: 16px;
}

.auth-btn-submit {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
  margin-top: 10px;
}

.auth-btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.35);
}

/* Auth Footer & Quick Chips */
.auth-footer {
  padding: 20px 32px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.quick-login-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.quick-login-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-login-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quick-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.quick-chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}

.quick-chip .chip-role {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.quick-chip.chip-admin .chip-role { color: #ea580c; }
.quick-chip.chip-finance .chip-role { color: #0284c7; }
.quick-chip.chip-logistik .chip-role { color: #d97706; }
.quick-chip.chip-ops .chip-role { color: #7c3aed; }
.quick-chip.chip-operator .chip-role { color: #059669; }

.quick-chip .chip-user {
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
}

.auth-footer .copyright {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Kalibrasi 1366×768 (tinggi ≤820): kartu login 1 viewport, proporsi profesional */
@media (max-height: 820px) {
  .auth-page {
    padding: 12px 20px;
    justify-content: center;
    overflow-y: auto;
  }

  .auth-top-bar {
    position: absolute;
    top: 10px;
    left: 16px;
    right: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .auth-status-badge {
    padding: 4px 10px;
    font-size: 10.5px;
    gap: 6px;
  }

  .auth-status-badge .status-indicator-dot {
    width: 6px;
    height: 6px;
  }

  .auth-container {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  .auth-card {
    border-radius: 12px;
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(15, 23, 42, 0.02);
  }

  .auth-header {
    padding: 16px 22px 12px;
  }

  .auth-header .brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin: 0 auto 8px;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.12);
  }

  .auth-header .brand-icon i,
  .auth-header .brand-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .auth-header .brand-title {
    font-size: 18.5px;
    gap: 5px;
  }

  .auth-header .brand-version {
    font-size: 11.5px;
  }

  .auth-header .brand-badge-wrapper {
    margin-top: 6px;
  }

  .auth-header .brand-badge {
    padding: 2px 10px;
    font-size: 9.5px;
    letter-spacing: 0.6px;
  }

  .auth-header .brand-subtitle {
    font-size: 11px;
    margin-top: 6px;
    line-height: 1.35;
    max-width: 320px;
  }

  .auth-body {
    padding: 14px 22px 12px;
  }

  .auth-body .form-group {
    margin-bottom: 11px;
  }

  .auth-body .form-group label {
    font-size: 10.5px;
    margin-bottom: 5px;
  }

  .auth-body .input-icon-wrapper .input-lead-icon {
    left: 12px;
    width: 15px;
    height: 15px;
  }

  .auth-body .input-icon-wrapper input {
    height: 36px;
    padding: 6px 36px 6px 36px;
    font-size: 12.5px;
    border-radius: 7px;
  }

  .btn-toggle-password {
    width: 28px;
    height: 28px;
    right: 6px;
  }

  .auth-btn-submit {
    height: 36px;
    font-size: 12.5px;
    margin-top: 4px;
    border-radius: 7px;
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.22);
  }

  .auth-footer {
    padding: 10px 22px 12px;
  }

  .quick-login-panel {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 8px;
  }

  .quick-login-header {
    font-size: 10px;
    margin-bottom: 6px;
    gap: 4px;
  }

  .quick-login-chips {
    gap: 6px;
  }

  .quick-chip {
    padding: 4px 8px;
    border-radius: 5px;
  }

  .quick-chip .chip-role {
    font-size: 8.5px;
  }

  .quick-chip .chip-user {
    font-size: 10.5px;
  }

  .auth-footer .copyright {
    font-size: 10px;
    line-height: 1.3;
  }

  /* Dashboard KPI: 6 kartu tetap ~80px di 1366×768 */
  .kpi-card {
    padding: 8px 10px;
  }
  .kpi-header {
    margin-bottom: 4px;
  }
  .kpi-icon {
    width: 26px;
    height: 26px;
  }
  .kpi-val {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .auth-top-bar {
    position: static;
    margin-bottom: 20px;
    width: 100%;
  }
  .auth-container {
    max-width: 100%;
  }
  .auth-header {
    padding: 24px 20px 18px;
  }
  .auth-body {
    padding: 20px 20px;
  }
  .auth-footer {
    padding: 16px 20px 20px;
  }
  .quick-login-chips {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ENTERPRISE NATIVE GRID & UTILITY SYSTEM (ZERO COMPOSER / ZERO CDN)
   Kalibrasi Optimal 1366x768 & Workspace Layout Standar
   ========================================================================== */

/* 1. Grid Rows & Columns */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.row > * {
  box-sizing: border-box;
}

.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 8px; }
.col-9  { flex: 0 0 75%;   max-width: 75%;   padding: 0 8px; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 8px; }
.col-6  { flex: 0 0 50%;   max-width: 50%;   padding: 0 8px; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 8px; }
.col-3  { flex: 0 0 25%;   max-width: 25%;   padding: 0 8px; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; padding: 0 8px; }

@media (max-width: 992px) {
  .col-8, .col-4, .col-6, .col-3, .col-9 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 14px;
  }
}

/* 2. Display & Flex Utilities */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }

.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* 3. Gap Utilities */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

/* 4. Margin & Spacing Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 14px !important; }
.mb-4 { margin-bottom: 20px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 14px !important; }
.mt-4 { margin-top: 20px !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 4px 8px !important; }
.p-2 { padding: 8px 12px !important; }
.p-3 { padding: 14px 18px !important; }
.p-4 { padding: 20px 24px !important; }

/* 5. Typography Utilities */
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }
.text-nowrap { white-space: nowrap !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.small { font-size: 11.5px !important; }

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: #0284c7 !important; }

/* 6. Content Header & Titles */
.content-header {
  margin-bottom: 14px;
}
.content-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  letter-spacing: -0.2px;
}
.content-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

/* 7. Table Header & Responsive Scroller */
.table-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 8. KPI Card Components Harmonization */
.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace, -apple-system;
}
.kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.kpi-icon-sm {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
}

/* 9. Progress Bar */
.progress {
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 6px;
}
.bg-primary { background: var(--primary) !important; }
.bg-success { background: var(--success) !important; }
.bg-danger  { background: var(--danger) !important; }
.bg-warning { background: var(--warning) !important; }
.bg-light   { background: #f8fafc !important; }

/* 10. Badges Harmonization */
.badge-primary   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-secondary { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-success   { background: var(--success-light); color: var(--success); border: 1px solid rgba(5, 150, 105, 0.2); }
.badge-danger    { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.2); }
.badge-warning   { background: var(--warning-light); color: var(--warning); border: 1px solid rgba(217, 119, 6, 0.2); }
.badge-info      { background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; }

/* 11. Enterprise Card & Panel System */
.card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* 12. Enterprise Data Tables (Compact & High Readability) */
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.table th {
  padding: 10px 14px;
  background: #f8fafc;
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  white-space: nowrap;
  vertical-align: middle;
}

.table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: var(--text, #1e293b);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: #fbfcfe;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 13. Button Sizing & Monospace Helpers */
.btn-xs {
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.font-mono, .td-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.cell-kode {
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 14. Empty State Component */
.table-empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted, #64748b);
}

.table-empty-state i {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.table-empty-state p {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin: 0;
}

/* ==========================================================================
   ============================================================================
   BATCH A — BEAUTY, SMOOTH, HALUS, EXCLUSIVE (Sidebar Redesign)
   ----------------------------------------------------------------------------
   1. Anti-flash reveal (body invisible sampai UI ready)
   2. View Transitions API (perpindahan menu halus tanpa refresh)
   3. Sidebar Ciut mini-rail 64px + tooltip pop-out
   4. Tombol toggle sidebar
   5. Accordion `<button>` + focus-visible + chevron modern
   6. Transisi ter-scope (hindari `transition: all` yang menciptakan glitch)
   7. Active state highlight halus + adaptive shadow
   8. Reserve slot ikon Lucide (anti layout shift)
   9. Prefers-reduced-motion
   ============================================================================
   ========================================================================== */

/* 1. ANTI-FLASH REVEAL ---------------------------------------------------
   CSS shell sudah di <head>. Menyembunyikan body sampai app.js
   (opacity:0) justru FLASH PUTIH. Body selalu terlihat. */
html[data-app-shell] body,
body {
  opacity: 1;
}

/* 2. VIEW TRANSITIONS API — MPA auto crossfade bertabrakan dengan Pjax
   dan menghasilkan layar kosong saat fallback reload. Matikan. */
@view-transition { navigation: none; }

@supports (view-transition-name: sidebar) {
  html:not([data-motion="reduce"]) .sidebar      { view-transition-name: bku-sidebar; }
  html:not([data-motion="reduce"]) .topbar       { view-transition-name: bku-topbar; }
  html:not([data-motion="reduce"]) .content-body { view-transition-name: bku-content; }

  /* Sidebar & topbar praktis instan → tidak animasi, terasa persisten */
  ::view-transition-old(bku-sidebar),
  ::view-transition-new(bku-sidebar),
  ::view-transition-old(bku-topbar),
  ::view-transition-new(bku-topbar) {
    animation-duration: 0.01s;
  }

  /* Content body crossfade pendek (120–180ms). Jangan 0.82s. */
  ::view-transition-old(bku-content) {
    animation: bku-fade-out 0.12s ease forwards;
  }
  ::view-transition-new(bku-content) {
    animation: bku-fade-in 0.15s ease forwards;
  }

  @keyframes bku-fade-out { to { opacity: 0.94; } }
  @keyframes bku-fade-in {
    from { opacity: 0.94; }
    to   { opacity: 1; }
  }
}

/* Jangan visibility:hidden — itu flash putih. Fade pendek setelah swap innerHTML. */
html[data-pjax-busy] .content-body {
  view-transition-name: none !important;
}

/* 3. SIDEBAR CIUT (MINI-RAIL 64px) --------------------------------------- */
:root {
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 64px;
}

.app-container.sidebar-collapsed .sidebar,
html[data-sidebar="collapsed"] .sidebar {
  width: var(--sidebar-width-collapsed);
}
.app-container.sidebar-collapsed .main-wrapper,
html[data-sidebar="collapsed"] .main-wrapper {
  margin-left: var(--sidebar-width-collapsed);
  width: calc(100% - var(--sidebar-width-collapsed));
}

/* Elemen teks disembunyikan pada mode ciut */
.app-container.sidebar-collapsed .brand-title > div,
.app-container.sidebar-collapsed .brand-badge,
.app-container.sidebar-collapsed .brand-sub,
.app-container.sidebar-collapsed .owner-meta,
.app-container.sidebar-collapsed .menu-group-header,
.app-container.sidebar-collapsed .nav-item > span:not(.nav-badge),
.app-container.sidebar-collapsed .nav-badge {
  display: none;
}
.app-container.sidebar-collapsed .nav-parent-chevron,
.app-container.sidebar-collapsed .nav-tree-children,
.app-container.sidebar-collapsed .nav-tree.is-collapsed .nav-tree-children {
  display: none !important;
}
.app-container.sidebar-collapsed .nav-tree.has-active > .nav-parent {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 46%),
    linear-gradient(180deg, var(--nav-glass-active-top) 0%, var(--nav-glass-active-wash) 100%);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
  border: 1px solid var(--nav-glass-border-accent);
  color: var(--nav-glass-text) !important;
  box-shadow:
    inset 0 1px 0 var(--nav-glass-gloss),
    inset 0 -1px 0 var(--nav-glass-inset),
    inset 2px 0 0 var(--nav-glass-rail),
    var(--nav-glass-shadow);
}
.app-container.sidebar-collapsed .nav-tree.has-active > .nav-parent i,
.app-container.sidebar-collapsed .nav-tree.has-active > .nav-parent svg,
.app-container.sidebar-collapsed .nav-tree.has-active > .nav-parent .lucide {
  color: var(--nav-glass-text) !important;
  stroke: var(--nav-glass-text) !important;
}

/* CRITICAL FIX (HOTFIX #1) — Force reveal semua nav-item ikon di mode mini-rail
   Root cause: `.menu-group.collapsed .menu-group-items { max-height: 0 }` (accordion)
   tetap berlaku di mode ciut → kategori yang di-collapse user, ikon-ikon-nya HILANG total.
   Solusi: paksa items terlihat penuh karena header kategori sudah disembunyikan di rail. */
.app-container.sidebar-collapsed .menu-group-items,
.app-container.sidebar-collapsed .menu-group.collapsed .menu-group-items {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.app-container.sidebar-collapsed .brand-header {
  padding: 44px 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.app-container.sidebar-collapsed .brand-title {
  justify-content: center;
  gap: 0;
  margin: 0;
}

.app-container.sidebar-collapsed .owner-info-box {
  margin: 6px 8px;
  padding: 6px 4px;
  justify-content: center;
  border-left: none;
  border-radius: 10px;
}
.app-container.sidebar-collapsed .sidebar-menu {
  padding: 6px 8px 20px;
}
.app-container.sidebar-collapsed .menu-group {
  margin-bottom: 2px;
  padding-top: 0;
  border-top: none;
}
.app-container.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 9px 6px;
  position: relative;
  margin: 2px 0;
}

/* Tooltip pop-out saat mode ciut (dari data-label) */
.app-container.sidebar-collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--primary);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.app-container.sidebar-collapsed .nav-item:hover::after,
.app-container.sidebar-collapsed .nav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 4. TOMBOL TOGGLE SIDEBAR ----------------------------------------------- */
.brand-header { position: relative; }

.btn-sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  z-index: 5;
}
.btn-sidebar-toggle:hover {
  color: var(--primary);
  background: var(--accent-light, #f0f9ff);
  border-color: var(--primary);
}
.btn-sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-sidebar-toggle svg,
.btn-sidebar-toggle i[data-lucide] {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.btn-sidebar-toggle .ic-collapsed { display: none; }
.btn-sidebar-toggle .ic-expanded  { display: inline-flex; }

.app-container.sidebar-collapsed .btn-sidebar-toggle {
  top: 12px;
  right: 50%;
  transform: translateX(50%);
}
.app-container.sidebar-collapsed .btn-sidebar-toggle .ic-collapsed { display: inline-flex; }
.app-container.sidebar-collapsed .btn-sidebar-toggle .ic-expanded  { display: none; }

/* 5. ACCORDION HEADER SEBAGAI BUTTON -------------------------------------- */
button.menu-group-header {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 4px;
  border-radius: 6px;
  user-select: none;
}
button.menu-group-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Chevron modern — rotasi diperhalus */
.menu-group-chevron {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}
.menu-group.collapsed .menu-group-chevron {
  transform: rotate(-90deg);
}

/* Menu-group-items animasi lebih halus */
.menu-group-items {
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease;
  max-height: 900px;
}
.menu-group.collapsed .menu-group-items {
  max-height: 0;
  opacity: 0;
}

/* 6. TRANSISI DI-SCOPE (ganti `transition: all` yang bikin glitch) -------- */
.sidebar {
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease,
              box-shadow 0.25s ease;
}
.main-wrapper {
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item {
  transition: background 0.15s ease,
              color 0.15s ease,
              padding 0.2s ease,
              box-shadow 0.18s ease,
              border-color 0.15s ease;
}

/* 7. ACTIVE STATE GLOSSY GLASS (bukan fill solid gelap) ------------------- */
.nav-item.active,
.nav-item.active:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 46%),
    linear-gradient(180deg, var(--nav-glass-active-top) 0%, var(--nav-glass-active-wash) 100%);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
  border-color: var(--nav-glass-border-accent);
  color: var(--nav-glass-text) !important;
  font-weight: 700;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 var(--nav-glass-gloss),
    inset 0 -1px 0 var(--nav-glass-inset),
    inset 2px 0 0 var(--nav-glass-rail),
    var(--nav-glass-shadow);
}
.nav-item.active i:not(.nav-parent-chevron),
.nav-item.active svg:not(.nav-parent-chevron),
.nav-item.active .lucide:not(.nav-parent-chevron) {
  color: var(--nav-icon-lit) !important;
  stroke: var(--nav-icon-lit) !important;
  animation: bk-nav-icon-spark 280ms ease-out,
             bk-nav-icon-breath 2.4s ease-in-out 280ms infinite;
}

@keyframes bk-nav-icon-spark {
  0% {
    filter: drop-shadow(0 0 0 var(--nav-icon-glow)) brightness(1);
  }
  38% {
    filter:
      drop-shadow(0 0 4px var(--nav-icon-glow-hot))
      drop-shadow(0 0 8px var(--nav-icon-glow))
      brightness(1.32);
  }
  100% {
    filter:
      drop-shadow(0 0 2.5px var(--nav-icon-glow))
      drop-shadow(0 0 5px var(--nav-icon-glow-soft))
      brightness(1.12);
  }
}

@keyframes bk-nav-icon-breath {
  0%, 100% {
    filter:
      drop-shadow(0 0 2.5px var(--nav-icon-glow))
      drop-shadow(0 0 5px var(--nav-icon-glow-soft))
      brightness(1.08);
  }
  50% {
    filter:
      drop-shadow(0 0 4.5px var(--nav-icon-glow-hot))
      drop-shadow(0 0 7px var(--nav-icon-glow))
      brightness(1.20);
  }
}

/* 8. RESERVE SLOT IKON LUCIDE (anti layout shift saat SVG di-inject) ----- */
i[data-lucide]:empty {
  visibility: hidden;
}
.sidebar i[data-lucide],
.sidebar svg.lucide,
.sidebar .lucide,
.topbar i[data-lucide],
.topbar svg.lucide,
.topbar .lucide {
  min-width: 15px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ikon soup di brand-header lebih besar (28px) */
.brand-title > i[data-lucide],
.brand-title > svg.lucide {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

/* 9. PREFERS-REDUCED-MOTION ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .content-body,
  .sidebar,
  .main-wrapper,
  .nav-item,
  .menu-group-items,
  .menu-group-chevron,
  .nav-tree-children,
  .nav-parent-chevron,
  .btn-sidebar-toggle,
  body {
    animation: none !important;
    transition: none !important;
  }
  .nav-item.active i:not(.nav-parent-chevron),
  .nav-item.active svg:not(.nav-parent-chevron),
  .nav-item.active .lucide:not(.nav-parent-chevron) {
    animation: none !important;
    filter:
      drop-shadow(0 0 3px var(--nav-icon-glow))
      brightness(1.16);
  }
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   LOG SHIFT OPERASIONAL — Form Setoran (/penjualan/create)
   Exclusive / modern / kompak 1366×768 · token tema BaksoKu
   ========================================================================== */

.bk-shift-card {
  --bk-shift-radius: 12px;
  position: relative;
  margin-bottom: 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--bk-shift-radius);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent-light) 70%, #fff) 0%, var(--card-bg) 42%, var(--card-bg) 100%);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 6%, transparent),
              0 8px 22px -16px color-mix(in oklab, var(--primary) 35%, transparent);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.18s ease;
}
.bk-shift-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
  opacity: 0.85;
}
.bk-shift-card.is-ready {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 12%, transparent),
              0 10px 26px -14px color-mix(in oklab, var(--primary) 40%, transparent);
}
.bk-shift-card.is-empty .bk-shift-mitra {
  opacity: 0.92;
}
.bk-shift-card.is-shake {
  animation: bk-shift-shake 0.42s ease;
}
@supports not (color: color-mix(in oklab, red, blue)) {
  .bk-shift-card {
    background: var(--card-bg);
    box-shadow: 0 8px 22px -16px rgba(27, 71, 105, 0.28);
  }
  .bk-shift-card.is-ready {
    border-color: var(--accent);
  }
}

@keyframes bk-shift-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.bk-shift-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-left: 6px;
}
.bk-shift-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bk-shift-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  flex-shrink: 0;
}
.bk-shift-icon i,
.bk-shift-icon svg {
  width: 16px;
  height: 16px;
}
.bk-shift-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.bk-shift-sub {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.bk-shift-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(520px, 100%);
}
.bk-shift-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 80%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
  white-space: nowrap;
}
.bk-shift-pill i,
.bk-shift-pill svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}
.bk-shift-msg {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
  text-align: right;
  transition: color 0.15s ease;
}
.bk-shift-msg.is-ok { color: var(--success); font-weight: 700; }
.bk-shift-msg.is-err { color: var(--danger); font-weight: 700; }

.bk-shift-body {
  display: grid;
  grid-template-columns: minmax(180px, 1.55fr) 96px 96px minmax(118px, 132px) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 8px 10px 6px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--card-bg) 88%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}
@supports not (color: color-mix(in oklab, red, blue)) {
  .bk-shift-body { background: var(--bg); border-color: var(--border); }
  .bk-shift-icon { border-color: var(--border); }
  .bk-shift-pill { background: var(--accent-light); border-color: var(--border); }
}

.bk-shift-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.bk-shift-mitra-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.bk-shift-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--primary-light), var(--primary-dark));
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--primary) 55%, transparent);
  transition: transform 0.18s ease, background 0.2s ease;
}
.bk-shift-card.is-empty .bk-shift-avatar {
  background: linear-gradient(145deg, #94a3b8, #64748b);
  box-shadow: none;
}
.bk-shift-card.is-ready .bk-shift-avatar {
  transform: scale(1.02);
}
.bk-shift-mitra-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.25;
  min-height: 16px;
}
.bk-shift-card.is-empty .bk-shift-mitra-name {
  color: var(--text-muted);
  font-weight: 700;
  font-style: italic;
}
.bk-shift-mitra-hint {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

.bk-shift-timewrap {
  position: relative;
  display: flex;
  align-items: center;
}
.bk-shift-timewrap > i,
.bk-shift-timewrap > svg {
  position: absolute;
  right: 8px;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.75;
}
.bk-shift-time {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'Plus Jakarta Sans', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bk-shift-time::placeholder {
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.bk-shift-time:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.bk-shift-time:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
  background: #fff;
}
.bk-shift-time.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 16%, transparent);
  background: var(--danger-light);
}
.bk-shift-timewrap.is-compact .bk-shift-time {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 6px;
}

.bk-shift-status-wrap {
  position: relative;
  display: grid;
}
.bk-shift-status-badge {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
}
.bk-shift-status-badge.is-hadir { background: var(--success-light); color: var(--success); border-color: rgba(5,150,105,0.22); }
.bk-shift-status-badge.is-izin  { background: var(--warning-light); color: var(--warning); border-color: rgba(217,119,6,0.22); }
.bk-shift-status-badge.is-sakit { background: #eff6ff; color: #2563eb; border-color: rgba(37,99,235,0.22); }
.bk-shift-status-badge.is-alpha { background: var(--danger-light); color: var(--danger); border-color: rgba(220,38,38,0.22); }
.bk-shift-status-badge.is-cuti  { background: #f5f3ff; color: #6d28d9; border-color: rgba(109,40,217,0.18); }
.bk-shift-status-badge.is-libur { background: var(--bg); color: var(--text-muted); border-color: var(--border); }

.bk-shift-select {
  width: 100%;
  height: 34px;
  padding: 0 8px 0 72px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bk-shift-select:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.bk-shift-select:focus {
  color: var(--primary);
  padding-left: 10px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.bk-shift-select:focus + .bk-shift-status-badge,
.bk-shift-status-wrap:focus-within .bk-shift-status-badge {
  opacity: 0;
}
.bk-shift-select.is-compact {
  height: 28px;
  padding: 0 22px 0 8px;
  color: var(--primary);
  font-size: 11px;
  border-radius: 6px;
  background-position: calc(100% - 12px) 12px, calc(100% - 7px) 12px;
}

.bk-shift-actions {
  display: flex;
  align-items: end;
  height: 100%;
}
.bk-shift-btn-save {
  height: 34px;
  min-width: 92px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--primary) 70%, transparent);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.bk-shift-btn-save i,
.bk-shift-btn-save svg {
  width: 13px;
  height: 13px;
}
.bk-shift-btn-save:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.bk-shift-btn-save:active { transform: translateY(0); }
.bk-shift-btn-save:disabled { opacity: 0.72; cursor: wait; transform: none; }
.bk-shift-btn-save.is-ok { background: var(--success); }
.bk-shift-btn-save.is-err { background: var(--danger); }
.bk-shift-btn-save.is-saving { background: var(--primary-light); }

.bk-shift-accordion {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px dashed color-mix(in oklab, var(--border) 85%, var(--accent));
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bk-shift-accordion:hover,
.bk-shift-accordion.is-open {
  background: color-mix(in oklab, var(--accent-light) 65%, transparent);
  border-style: solid;
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.bk-shift-acc-chevron {
  width: 14px;
  text-align: center;
  color: var(--accent);
  font-size: 12px;
}
.bk-shift-acc-label { flex: 1; text-align: left; }
.bk-shift-acc-count {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: var(--accent-light);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}

.bk-shift-tetap {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  overflow: hidden;
  animation: bk-shift-reveal 0.22s ease;
}
.bk-shift-tetap[hidden] { display: none !important; }
@keyframes bk-shift-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bk-shift-tetap-scroll {
  max-height: 180px;
  overflow-y: auto;
}
.bk-shift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.bk-shift-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.bk-shift-table tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
}
.bk-shift-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent-light) 55%, transparent);
}
.bk-shift-table td {
  padding: 5px 8px;
  vertical-align: middle;
}
.bk-shift-table th:nth-child(2),
.bk-shift-table td:nth-child(2),
.bk-shift-table th:nth-child(3),
.bk-shift-table td:nth-child(3) { width: 92px; }
.bk-shift-table th:nth-child(4),
.bk-shift-table td:nth-child(4) { width: 110px; }
.bk-shift-table th:nth-child(5),
.bk-shift-table td:nth-child(5) { width: 56px; text-align: right; }
.bk-shift-kt-name { font-weight: 700; color: var(--primary); }
.bk-shift-empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 14px 8px !important;
  font-style: italic;
}
.bk-shift-btn-ok {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bk-shift-btn-ok:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.bk-shift-btn-ok.is-ok {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.bk-shift-btn-ok:disabled { opacity: 0.65; cursor: wait; }

@media (max-width: 1100px) {
  .bk-shift-body {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .bk-shift-mitra { grid-column: 1 / -1; }
  .bk-shift-actions { grid-column: 1 / -1; }
  .bk-shift-btn-save { width: 100%; }
  .bk-shift-msg { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-shift-card,
  .bk-shift-btn-save,
  .bk-shift-tetap,
  .bk-shift-avatar {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Simpan Pinjam — meja teller / buku tabungan
   Exclusive · modern · kompak 1366×768 · token tema BaksoKu (bukan purple AI)
   ========================================================================== */

.bk-sp {
  --bk-sp-radius: 12px;
  --bk-sp-row: 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bk-sp-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--bk-sp-radius);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent-light) 72%, #fff) 0%, var(--card-bg) 46%, var(--card-bg) 100%);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 6%, transparent),
              0 8px 22px -16px color-mix(in oklab, var(--primary) 35%, transparent);
  overflow: hidden;
}
.bk-sp-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
  opacity: 0.9;
}
.bk-sp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.bk-sp-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--primary) 70%, transparent);
}
.bk-sp-mark i,
.bk-sp-mark svg { width: 18px; height: 18px; }
.bk-sp-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-sp-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary);
  line-height: 1.15;
}
.bk-sp-lead {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}
.bk-sp-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg) 70%, #fff);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.bk-sp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bk-sp-tab i,
.bk-sp-tab svg { width: 13px; height: 13px; }
.bk-sp-tab:hover {
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 80%, #fff);
}
.bk-sp-tab.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px -6px color-mix(in oklab, var(--primary) 80%, transparent);
}
.bk-sp-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bk-sp-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bk-sp-kpi {
  position: relative;
  height: 80px;
  padding: 8px 12px 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--bk-sp-radius);
  background: var(--card-bg);
  overflow: hidden;
  cursor: default;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.bk-sp-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.bk-sp-kpi.is-in::before { background: var(--success); }
.bk-sp-kpi.is-kasbon::before { background: var(--warning); }
.bk-sp-kpi.is-out::before { background: var(--danger); }
.bk-sp-kpi:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 8px 18px -14px color-mix(in oklab, var(--primary) 45%, transparent);
}
.bk-sp-kpi-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.bk-sp-kpi-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}
.bk-sp-kpi.is-in .bk-sp-kpi-ico { background: var(--success-light); color: var(--success); }
.bk-sp-kpi.is-kasbon .bk-sp-kpi-ico { background: var(--warning-light); color: var(--warning); }
.bk-sp-kpi.is-out .bk-sp-kpi-ico { background: var(--danger-light); color: var(--danger); }
.bk-sp-kpi-ico i,
.bk-sp-kpi-ico svg { width: 12px; height: 12px; }
.bk-sp-kpi-label {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-sp-kpi-chip {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent-light);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.bk-sp-kpi-val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.45px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.bk-sp-kpi-val.is-plus,
.bk-sp .is-plus { color: var(--success); }
.bk-sp-kpi-val.is-warn { color: var(--warning); }
.bk-sp-kpi-val.is-minus,
.bk-sp .is-minus { color: var(--danger); }
.bk-sp-kpi-hint {
  margin: 0;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bk-sp-desk {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 10px;
}
.bk-sp-desk.is-twin {
  grid-template-columns: 1fr 1fr;
}
.bk-sp-panel,
.bk-sp-slip {
  border: 1px solid var(--border);
  border-radius: var(--bk-sp-radius);
  background: var(--card-bg);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 5%, transparent),
              0 10px 24px -18px color-mix(in oklab, var(--primary) 28%, transparent);
  min-width: 0;
  overflow: hidden;
}
.bk-sp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent-light) 45%, #fff);
}
.bk-sp-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.15px;
}
.bk-sp-panel-sub {
  margin: 1px 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
}
.bk-sp-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bk-sp-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.bk-sp-search i,
.bk-sp-search svg {
  position: absolute;
  left: 8px;
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.bk-sp-search input {
  height: 28px;
  width: 148px;
  padding: 0 8px 0 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
}
.bk-sp-search input:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.bk-sp-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.bk-sp-cta {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bk-sp-cta:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.bk-sp-cta.is-solid {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bk-sp-cta.is-solid:hover { background: var(--primary-dark); }

.bk-sp-chips { display: inline-flex; gap: 3px; }
.bk-sp-chip {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bk-sp-chip:hover { border-color: var(--accent); color: var(--primary); }
.bk-sp-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.bk-sp-scroll {
  max-height: 220px;
  overflow: auto;
}
.bk-sp[data-bk-sp-page="ringkasan"] .bk-sp-scroll {
  max-height: 160px;
}
.bk-sp[data-bk-sp-page="ringkasan"] .bk-sp-empty {
  min-height: 96px;
  padding: 8px 12px;
}
.bk-sp-scroll.is-wide { max-height: 168px; }
.bk-sp-scroll.is-tall { max-height: calc(100vh - 420px); }
.bk-sp-scroll.is-stmt { max-height: calc(100vh - 295px); }

.bk-sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bk-sp-table thead th,
.bk-sp-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 28px;
  padding: 0 10px;
  background: var(--bg) !important;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: none;
  box-shadow: inset 0 -1.5px 0 var(--border);
}
.bk-sp-table tbody tr {
  height: var(--bk-sp-row);
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 34px;
}
.bk-sp-table tbody tr:has(.bk-sp-stack) {
  height: auto;
  min-height: var(--bk-sp-row);
}
.bk-sp-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent-light) 60%, transparent);
}
.bk-sp-table td {
  padding: 0 10px;
  height: var(--bk-sp-row);
  vertical-align: middle;
  line-height: 1.25;
}
.bk-sp-table tr:has(.bk-sp-stack) td {
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}
.bk-sp-table td.bk-sp-name {
  display: table-cell;
}
.bk-sp-table .is-num,
.bk-sp-table th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 700;
}
.bk-sp-name {
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
}
.bk-sp-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: calc(var(--bk-sp-row) - 12px);
}
.bk-sp-stack .bk-sp-name,
.bk-sp-stack .bk-sp-ref,
.bk-sp-stack .bk-sp-meta {
  display: block;
}
.bk-sp-ref,
.bk-sp-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.25;
}
.bk-sp-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-sp-pill,
.bk-sp-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.bk-sp-pill {
  background: color-mix(in oklab, var(--accent) 16%, #fff);
  color: var(--primary);
  border-color: color-mix(in oklab, var(--accent) 32%, var(--border));
}
.bk-sp-status.is-in { background: var(--success-light); color: var(--success); border-color: color-mix(in oklab, var(--success) 28%, var(--border)); }
.bk-sp-status.is-out { background: var(--danger-light); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 28%, var(--border)); }
.bk-sp-status.is-warn { background: var(--warning-light); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 32%, var(--border)); }
.bk-sp-status.is-mute { background: var(--bg); color: var(--text-muted); border-color: var(--border); }

.bk-sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 110px;
  padding: 10px 14px;
  text-align: center;
}
.bk-sp-empty.is-slim { min-height: 80px; }
.bk-sp-empty-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}
.bk-sp-empty-ico i,
.bk-sp-empty-ico svg { width: 18px; height: 18px; }
.bk-sp-empty-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}
.bk-sp-empty-copy {
  margin: 0 0 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 280px;
}
.bk-sp-nomatch {
  margin: 0;
  padding: 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
}

.bk-sp-slip { padding: 12px; }
.bk-sp-slip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bk-sp-form .form-group { margin-bottom: 8px; }
.bk-sp-form label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.bk-sp-form .bk-field-head {
  margin-bottom: 4px;
}
.bk-sp-form .bk-field-head label {
  margin-bottom: 0;
}
.bk-sp-form .form-control,
.bk-sp-form select.form-control {
  height: 34px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
.bk-sp-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  cursor: pointer;
}
.bk-sp-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.bk-sp-form .select2-container,
.bk-sp-form .bk-s2.select2-container {
  width: 100% !important;
}
.bk-sp-form .bk-s2 .select2-selection--single {
  box-sizing: border-box;
  height: 34px;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.bk-sp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bk-sp-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.bk-sp-form-actions .btn {
  flex: 1;
  height: 34px;
  font-weight: 800;
  border-radius: 8px;
}
.bk-sp-btn-ghost {
  color: var(--danger) !important;
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border)) !important;
}
.bk-sp-btn-ghost:hover {
  background: var(--danger-light) !important;
}

.bk-sp-people {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}
.bk-sp-person {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.bk-sp-person span { font-size: 10.5px; font-weight: 700; color: var(--primary); }
.bk-sp-person b { font-size: 11px; color: var(--success); font-variant-numeric: tabular-nums; }
.bk-sp-person:hover,
.bk-sp-person.is-picked {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}

.bk-sp-panel > .bk-sp-ledgers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent-light) 28%, #fff);
}
.bk-sp-ledger {
  display: grid;
  grid-template-columns: minmax(132px, 1.1fr) minmax(110px, 0.9fr) 88px minmax(200px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.bk-sp-ledger:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 6px 16px -14px color-mix(in oklab, var(--primary) 40%, transparent);
}
.bk-sp-ledger-who { min-width: 0; }
.bk-sp-ledger-who .bk-sp-name {
  margin: 0;
  font-size: 12.5px;
}
.bk-sp-ledger-who .bk-sp-ref {
  margin: 1px 0 0;
}
.bk-sp-ledger .bk-sp-meta { margin: 0; }
.bk-sp-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bk-sp-bar {
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.bk-sp-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.bk-sp-ledger-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 0;
}
.bk-sp-ledger-stats dt {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-sp-ledger-stats dd {
  margin: 1px 0 0;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .bk-sp-head,
  .bk-sp-panel-head,
  .bk-sp-panel > .bk-sp-ledgers { background: var(--card-bg); }
  .bk-sp-tabs { background: var(--bg); }
  .bk-sp-table tbody tr:hover { background: var(--accent-light); }
  .bk-sp-pill { background: var(--accent-light); color: var(--primary); border-color: var(--border); }
}

@media (max-width: 1100px) {
  .bk-sp-head { flex-wrap: wrap; }
  .bk-sp-split,
  .bk-sp-desk,
  .bk-sp-desk.is-twin { grid-template-columns: 1fr; }
  .bk-sp-kpis { grid-template-columns: 1fr; }
  .bk-sp-kpi { height: auto; min-height: 80px; }
  .bk-sp-ledger {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .bk-sp-ledger .bk-sp-bar,
  .bk-sp-ledger .bk-sp-ledger-stats { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-sp-kpi,
  .bk-sp-tab,
  .bk-sp-ledger,
  .bk-sp-person,
  .bk-sp-table tbody tr {
    transition: none !important;
  }
}

.content-body:has(.bk-sp) {
  /* scroll di pane konten — jangan kunci overflow:hidden */
  overflow-y: auto;
  overflow-x: hidden;
}
.content-body > .bk-sp,
.content-body > :has(> .bk-sp) {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.bk-sp {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.bk-sp-empty {
  min-height: 120px;
}
.bk-sp-empty.is-slim { min-height: 88px; }
.bk-sp[data-bk-sp-page="ringkasan"] > .bk-sp-split {
  flex: 1 1 auto;
  min-height: 0;
}
.bk-sp[data-bk-sp-page="ringkasan"] > .bk-sp-panel {
  flex: 0 1 auto;
  min-height: 0;
}
.bk-sp.is-stmt .bk-sp-micro {
  flex: 0 0 auto;
}
.bk-sp.is-stmt .bk-sp-panel,
.bk-sp[data-bk-sp-page="pinjaman"] > .bk-sp-panel {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bk-sp.is-stmt .bk-sp-scroll.is-stmt,
.bk-sp[data-bk-sp-page="pinjaman"] .bk-sp-scroll.is-tall {
  flex: 0 1 auto;
  min-height: 0;
}
.bk-sp-table a.bk-sp-stack {
  text-decoration: none;
  color: inherit;
}
.bk-sp-table a.bk-sp-stack:hover .bk-sp-name {
  color: var(--accent);
  text-decoration: underline;
}
.bk-sp-table tr.is-void td {
  color: var(--text-muted);
  background: color-mix(in oklab, var(--bg) 70%, #fff);
}
.bk-sp-table tr.is-void .bk-sp-mono { text-decoration: line-through; }
.bk-sp-empty-row td {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 18px 10px !important;
  height: auto !important;
}
.bk-sp-stmt td a.bk-sp-ref {
  display: inline-block;
  margin-left: 6px;
}
.bk-sp-table.bk-sp-stmt {
  table-layout: fixed;
}
.bk-sp-stmt th:nth-child(1),
.bk-sp-stmt td:nth-child(1) { width: 88px; }
.bk-sp-stmt th:nth-child(2),
.bk-sp-stmt td:nth-child(2) { width: 148px; }
.bk-sp-stmt th:nth-child(4),
.bk-sp-stmt td:nth-child(4) { width: 128px; }
.bk-sp-stmt th:nth-child(5),
.bk-sp-stmt td:nth-child(5) { width: 108px; }
.bk-sp-stmt td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-sp.is-stmt table.bk-sp-stmt th.is-debit,
.bk-sp.is-stmt table.bk-sp-stmt th.is-kredit,
.bk-sp.is-stmt table.bk-sp-stmt th.is-saldo,
.bk-sp.is-stmt table.bk-sp-stmt td.debit,
.bk-sp.is-stmt table.bk-sp-stmt td.kredit,
.bk-sp.is-stmt table.bk-sp-stmt td.saldo,
.bk-sp.is-stmt table.bk-sp-stmt .col-debit,
.bk-sp.is-stmt table.bk-sp-stmt .col-kredit,
.bk-sp.is-stmt table.bk-sp-stmt .col-saldo {
  display: none !important;
}
.bk-sp-sumber {
  display: inline-block;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.bk-sp-angsuran {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.bk-sp-angsuran-title {
  margin: 0 10px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.bk-sp-table.bk-sp-angsuran-table {
  table-layout: fixed;
}
.bk-sp-angsuran-table th:nth-child(2),
.bk-sp-angsuran-table td:nth-child(2) { width: 88px; }
.bk-sp-angsuran-table th:nth-child(3),
.bk-sp-angsuran-table td:nth-child(3) { width: 120px; }
.bk-sp-angsuran-table th:nth-child(4),
.bk-sp-angsuran-table td:nth-child(4) { width: 220px; }
.bk-sp-angsuran-table tbody tr.is-in td.is-plus {
  color: var(--success, #15803d);
}
.bk-sp-kpi.is-out .bk-sp-kpi-chip {
  background: var(--danger-light);
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border));
}

/* ==========================================================================
   Dapur Sentral & Produksi Olahan — command board dapur
   Exclusive · modern · kompak 1366×768 · token tema BaksoKu (bukan purple AI)
   Namespace: .bk-produksi-*  (jangan menimpa .bk-sp-* / aset)
   ========================================================================== */

.bk-produksi {
  --bk-prd-radius: 12px;
  --bk-prd-row: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bk-produksi-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bk-prd-radius);
  background:
    linear-gradient(125deg, color-mix(in oklab, var(--accent-light) 78%, #fff) 0%, var(--card-bg) 42%, var(--card-bg) 100%);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 6%, transparent),
              0 8px 22px -16px color-mix(in oklab, var(--primary) 35%, transparent);
  overflow: hidden;
}
.bk-produksi-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
}
.bk-produksi-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.bk-produksi-mark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--primary) 70%, transparent);
}
.bk-produksi-mark i,
.bk-produksi-mark svg { width: 18px; height: 18px; }
.bk-produksi-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-produksi-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary);
  line-height: 1.15;
}
.bk-produksi-lead {
  display: none;
}
.bk-produksi-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bk-produksi-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg) 70%, #fff);
  border: 1px solid var(--border);
}
.bk-produksi-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.bk-produksi-tab i,
.bk-produksi-tab svg { width: 13px; height: 13px; }
.bk-produksi-tab:hover {
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 80%, #fff);
}
.bk-produksi-tab.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px -6px color-mix(in oklab, var(--primary) 80%, transparent);
}
.bk-produksi-tab:focus-visible,
.bk-produksi-cta:focus-visible,
.bk-produksi-ghost:focus-visible,
.bk-produksi-chip:focus-visible,
.bk-produksi-kpi:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bk-produksi-cta,
.bk-produksi-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bk-produksi-cta {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--primary) 70%, transparent);
}
.bk-produksi-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.bk-produksi-cta.is-solid { height: 34px; padding: 0 14px; }
.bk-produksi-ghost {
  background: var(--card-bg);
  color: var(--primary);
  border-color: var(--border);
}
.bk-produksi-ghost:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: var(--accent-light);
}
.bk-produksi-cta i,
.bk-produksi-cta svg,
.bk-produksi-ghost i,
.bk-produksi-ghost svg { width: 13px; height: 13px; }

.bk-produksi-ghost.is-gudang {
  background: color-mix(in oklab, var(--accent-light) 70%, #fff);
  color: var(--primary);
  border-color: color-mix(in oklab, var(--accent) 58%, var(--border));
  box-shadow: 0 4px 12px -8px color-mix(in oklab, var(--accent) 55%, transparent);
  font-weight: 800;
}
.bk-produksi-ghost.is-gudang:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.bk-produksi-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 10px 4px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background:
    linear-gradient(105deg, color-mix(in oklab, var(--accent-light) 88%, #fff) 0%, var(--card-bg) 58%);
  box-shadow: 0 8px 20px -16px color-mix(in oklab, var(--primary) 40%, transparent),
              inset 3px 0 0 var(--accent);
}
.bk-produksi-notice-mark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
}
.bk-produksi-notice-mark i,
.bk-produksi-notice-mark svg { width: 14px; height: 14px; }
.bk-produksi-notice-copy { min-width: 0; flex: 1; }
.bk-produksi-notice-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-produksi-notice-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.bk-produksi-notice-meta {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-produksi-notice-ticket {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  padding: 4px 8px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--accent-light) 55%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
  flex-shrink: 0;
}
.bk-produksi-notice-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-produksi-notice-close:hover { background: color-mix(in oklab, var(--accent-light) 70%, transparent); color: var(--primary); }
.bk-produksi-notice-close i,
.bk-produksi-notice-close svg { width: 14px; height: 14px; }

.bk-produksi-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 55%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  text-decoration: none;
}
.bk-produksi-iconbtn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.bk-produksi-iconbtn i,
.bk-produksi-iconbtn svg { width: 13px; height: 13px; }
.bk-produksi-table .is-act { width: 76px; text-align: center; white-space: nowrap; }
.bk-produksi-table .is-act .bk-produksi-iconbtn + .bk-produksi-iconbtn { margin-left: 4px; }

@keyframes bk-prd-fresh {
  0% {
    background: color-mix(in oklab, var(--accent-light) 92%, var(--success-light));
    box-shadow: inset 3px 0 0 var(--accent);
  }
  72% {
    background: color-mix(in oklab, var(--accent-light) 70%, #fff);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
}
.bk-produksi-table tbody tr.is-fresh {
  animation: bk-prd-fresh 3s ease-out forwards;
}
.bk-produksi-table tbody tr.is-fresh-done {
  background: transparent;
}
.bk-produksi-table tbody tr.is-closed {
  opacity: 0.62;
  background-color: rgba(248, 250, 252, 0.7);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.bk-produksi-table tbody tr.is-closed:hover {
  opacity: 1;
  background-color: #ffffff;
}

.bk-produksi-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.bk-produksi-kpi {
  position: relative;
  height: 80px;
  padding: 8px 12px 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--bk-prd-radius);
  background: var(--card-bg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  width: 100%;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.bk-produksi-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.bk-produksi-kpi.is-batch::before { background: var(--primary); }
.bk-produksi-kpi.is-porsi::before { background: var(--success); }
.bk-produksi-kpi.is-stok::before { background: var(--accent); }
.bk-produksi-kpi.is-resep::before { background: var(--warning); }
.bk-produksi-kpi:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 8px 18px -14px color-mix(in oklab, var(--primary) 45%, transparent);
}
.bk-produksi-kpi-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.bk-produksi-kpi-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}
.bk-produksi-kpi.is-porsi .bk-produksi-kpi-ico { background: var(--success-light); color: var(--success); }
.bk-produksi-kpi.is-resep .bk-produksi-kpi-ico { background: var(--warning-light); color: var(--warning); }
.bk-produksi-kpi-ico i,
.bk-produksi-kpi-ico svg { width: 12px; height: 12px; }
.bk-produksi-kpi-label {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-produksi-kpi-chip {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--accent-light);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.bk-produksi-kpi-val {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.45px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.bk-produksi-kpi-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
}
.bk-produksi-kpi-hint {
  margin: 0;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-produksi-board,
.bk-produksi-slip,
.bk-produksi-rail,
.bk-produksi-hero,
.bk-produksi-sim {
  border: 1px solid var(--border);
  border-radius: var(--bk-prd-radius);
  background: var(--card-bg);
}
.bk-produksi-board-head,
.bk-produksi-slip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-light) 42%, #fff) 0%, var(--card-bg) 100%);
}
.bk-produksi-board-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-board-sub {
  display: none;
}
.bk-produksi-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-produksi-datefilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
}
.bk-produksi-datefilter input[type="date"] {
  border: 0;
  outline: none;
  background: transparent;
  height: 26px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  max-width: 138px;
}
.bk-produksi-datefilter:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-light) 80%, transparent);
}

.bk-produksi-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  min-width: 220px;
}
.bk-produksi-search.is-block {
  display: flex;
  margin: 0 10px 8px;
  min-width: 0;
}
.bk-produksi-search i,
.bk-produksi-search svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.bk-produksi-search input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--text);
}
.bk-produksi-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-light) 80%, transparent);
}

.bk-produksi-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 6px;
}
.bk-produksi-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bk-produksi-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.bk-produksi-chip:hover {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.bk-produksi-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.bk-produksi-scroll {
  max-height: calc(100vh - 295px);
  overflow: auto;
}
.bk-produksi-table {
  width: 100%;
  border-collapse: collapse;
}
.bk-produksi-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  padding: 0 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--bg) !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
  border-bottom: 1px solid var(--border);
}
.bk-produksi-table td {
  height: var(--bk-prd-row);
  padding: 0 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  font-size: 12px;
  vertical-align: middle;
}
.bk-produksi-table .is-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bk-produksi-menutable td.is-num { padding-right: 8px; }
.bk-produksi-table .is-act { width: 76px; text-align: center; white-space: nowrap; }
.bk-produksi-table tbody tr { transition: background 0.14s ease; }
.bk-produksi-table tbody tr:hover { background: color-mix(in oklab, var(--accent-light) 70%, #fff); }
.bk-produksi-table tfoot td {
  height: 36px;
  font-weight: 800;
  background: color-mix(in oklab, var(--accent-light) 35%, #fff);
}
.bk-produksi-table small { font-weight: 600; color: var(--text-muted); }

.bk-produksi-ticket {
  display: inline-block;
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.bk-produksi-note,
.bk-produksi-ref {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-produksi-name { display: block; font-weight: 800; color: var(--text); }
.bk-produksi-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bk-produksi-jurnal {
  display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-light);
  color: var(--primary);
}
.bk-produksi-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.bk-produksi-status.is-ok { background: var(--success-light); color: var(--success); }
.bk-produksi-status.is-wait { background: var(--warning-light); color: var(--warning); }
.bk-produksi-status.is-off { background: var(--danger-light); color: var(--danger); }
.bk-produksi-status.is-habis { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

.bk-produksi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px;
  gap: 8px;
}
.bk-produksi-empty.is-compact { padding: 28px 16px; }
.bk-produksi-empty-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
}
.bk-produksi-empty-ico i,
.bk-produksi-empty-ico svg { width: 22px; height: 22px; }
.bk-produksi-empty-title {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-empty-copy {
  margin: 0;
  max-width: 420px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.bk-produksi-empty-actions { display: flex; gap: 8px; margin-top: 6px; }
.bk-produksi-nomatch {
  margin: 0;
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.bk-produksi-desk { display: grid; grid-template-columns: minmax(0, 760px); }
.bk-produksi-desk.is-pass { grid-template-columns: minmax(0, 1fr); }
.bk-produksi-desk.is-catat {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.95fr);
  gap: 12px;
  align-items: start;
}
.bk-produksi-form { padding: 0; }
.bk-produksi-slip { padding-bottom: 14px; }
.bk-produksi-slip-body { padding: 14px 16px 0; }
.bk-produksi-scroll.is-form {
  max-height: 320px;
  margin: 0 -4px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bk-produksi-menutable th:nth-child(2),
.bk-produksi-menutable td:nth-child(2) { width: 64px; }
.bk-produksi-menutable th:nth-child(3),
.bk-produksi-menutable td:nth-child(3) { width: 110px; }
.bk-produksi-menutable th:nth-child(4),
.bk-produksi-menutable td:nth-child(4) { width: 88px; }
.bk-produksi-cell-input {
  width: 100%;
  height: 28px;
  padding: 2px 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bk-produksi-cell-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-light) 80%, transparent);
}
.bk-produksi-cell-input.is-satuan {
  text-align: left;
  font-weight: 600;
  max-width: 72px;
}

.bk-produksi-belanja {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--primary) 6%, transparent);
}
.bk-produksi-belanja-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 55%, #fff);
}
.bk-produksi-belanja-body {
  padding: 0 0 10px;
  max-height: min(560px, calc(100vh - 200px));
  overflow: auto;
}
.bk-produksi-belanja-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 14px 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent-light, #e0f2fe) 55%, #fff);
  border: 1px solid color-mix(in oklab, var(--accent, #0284c7) 22%, var(--border));
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.bk-produksi-belanja-meta-sep {
  color: var(--text-muted);
  font-weight: 500;
}
.bk-produksi-scroll.is-belanja {
  max-height: none;
  overflow: visible;
  padding: 0 10px;
}
.bk-produksi-belanja-table {
  font-size: 12px;
  width: 100%;
}
.bk-produksi-belanja-table th,
.bk-produksi-belanja-table td {
  padding: 5px 6px;
  vertical-align: middle;
}
.bk-produksi-belanja-table .bk-produksi-cell-input {
  max-width: 88px;
  margin-left: auto;
}
.bk-produksi-belanja-sub {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bk-produksi-belanja-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 28px 12px;
  color: var(--text-muted);
}
.bk-produksi-belanja-ro {
  margin-top: 14px;
  padding: 0 16px 16px;
}
.bk-produksi-belanja-ro .bk-produksi-table { font-size: 12px; }

.bk-produksi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bk-produksi-grid.is-2 { grid-template-columns: 1.2fr 0.8fr; }
.bk-produksi-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-field input,
.bk-produksi-field select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}
.bk-produksi-field input:focus,
.bk-produksi-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-light) 80%, transparent);
}
.bk-produksi-field input[readonly] { background: color-mix(in oklab, var(--bg) 70%, #fff); }
.bk-produksi-req { color: var(--danger); }
.bk-produksi-hint {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-produksi-hint a { color: var(--accent); font-weight: 700; text-decoration: none; }
.bk-produksi-hint a:hover { text-decoration: underline; }
.bk-produksi-note-card {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent-light) 55%, #fff);
}
.bk-produksi-note-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-note-title i,
.bk-produksi-note-title svg { width: 14px; height: 14px; }
.bk-produksi-note-card ul {
  margin: 0;
  padding-left: 16px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.bk-produksi-note-card li { margin: 3px 0; }
.bk-produksi-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Pass dapur — tiket menu (bukan tabel padat, tetap token tema) */
.bk-produksi-pass-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent-light) 48%, #fff) 0%, var(--card-bg) 100%);
}
.bk-produksi-pass-copy { min-width: 0; }
.bk-produksi-pass-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(108px, 1fr));
  gap: 8px;
  flex: 1 1 420px;
  max-width: 560px;
}
.bk-produksi-pass-kpi {
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-bg) 88%, #fff);
  box-shadow: 0 8px 18px -16px color-mix(in oklab, var(--primary) 40%, transparent);
}
.bk-produksi-pass-kpi.is-date { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.bk-produksi-pass-kpi.is-live { background: color-mix(in oklab, var(--success-light) 55%, var(--card-bg)); }
.bk-produksi-pass-kpi-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-produksi-pass-kpi-val {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.bk-produksi-pass-kpi-meta {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.bk-produksi-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bk-produksi-datefilter.is-pass { height: 34px; }
.bk-produksi-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding: 2px 2px 6px;
}
.bk-produksi-ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 10px 22px -18px color-mix(in oklab, var(--primary) 45%, transparent);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.bk-produksi-ticket-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.bk-produksi-ticket-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 14px 26px -16px color-mix(in oklab, var(--primary) 50%, transparent);
}
.bk-produksi-ticket-card.is-on {
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
  background: color-mix(in oklab, var(--success-light) 40%, var(--card-bg));
}
.bk-produksi-ticket-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}
.bk-produksi-ticket-dot,
.bk-produksi-ticket-status {
  flex-shrink: 0;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 55%, #fff);
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 18px;
  white-space: nowrap;
}
.bk-produksi-ticket-card.is-busy .bk-produksi-ticket-status {
  background: var(--warning-light);
  color: var(--warning);
}
.bk-produksi-ticket-card.is-filled .bk-produksi-ticket-status,
.bk-produksi-ticket-card.is-on .bk-produksi-ticket-dot {
  background: var(--success-light);
  color: var(--success);
}
.bk-produksi-ticket-card.is-busy {
  border-color: color-mix(in oklab, var(--warning) 40%, var(--border));
}
.bk-produksi-ticket-card.is-filled {
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
  background: color-mix(in oklab, var(--success-light) 32%, var(--card-bg));
}
.bk-produksi-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bk-produksi-preset {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent-light) 40%, #fff);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
.bk-produksi-preset:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.bk-produksi-sesi {
  padding: 12px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--bk-prd-radius);
  background: var(--card-bg);
  position: sticky;
  top: 8px;
}
.bk-produksi-sesi-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-produksi-sesi-date {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.bk-produksi-sesi-dow {
  margin: 2px 0 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-produksi-sesi-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.bk-produksi-sesi-stats > div {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent-light) 42%, #fff);
}
.bk-produksi-sesi-stats span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-produksi-sesi-stats strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.bk-produksi-sesi-stats small {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-produksi-sesi-list-label {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-produksi-sesi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow: auto;
}
.bk-produksi-sesi-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  font-size: 11.5px;
  color: var(--text);
}
.bk-produksi-sesi-list li strong {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  white-space: nowrap;
}
.bk-produksi-sesi-list li.is-empty {
  border: 0;
  color: var(--text-muted);
  font-size: 11px;
}
.bk-produksi-sesi-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bk-produksi-sesi-hint a { color: var(--accent); font-weight: 700; text-decoration: none; }
.bk-produksi-sesi-hint a:hover { text-decoration: underline; }
.bk-produksi-ticket-stock-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-produksi-ticket-stock-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-produksi-stockbar {
  display: block;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--border) 70%, #fff);
  overflow: hidden;
}
.bk-produksi-stockbar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.bk-produksi-ticket-harga {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-stepper-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-stepper-ctrl {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px auto;
  gap: 6px;
  align-items: center;
}
.bk-produksi-unit {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 28px;
}
.bk-produksi-step {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.bk-produksi-step:hover { border-color: var(--accent); color: var(--accent); }
.bk-produksi-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bk-produksi-cell-input.is-qty {
  height: 36px;
  text-align: center;
  font-size: 16px;
}
.bk-produksi-form-actions.is-pass {
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  padding: 10px 0 4px;
  background: linear-gradient(180deg, transparent, var(--card-bg) 28%);
}
.bk-produksi-livebar {
  margin: 0 auto 0 0;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bk-produksi-livebar strong { color: var(--primary); }
.bk-produksi-draft,
.bk-produksi-form-error {
  margin: 10px 0 0;
  font-size: 11.5px;
}
.bk-produksi-draft { color: var(--text-muted); }
.bk-produksi-form-error { color: var(--danger); font-weight: 700; }
.bk-produksi-cta.is-busy { opacity: 0.72; pointer-events: none; }

@media (max-width: 1100px) {
  .bk-produksi-pass-head { flex-wrap: wrap; }
  .bk-produksi-pass-kpis { max-width: none; grid-template-columns: 1fr; }
  .bk-produksi-desk.is-catat { grid-template-columns: minmax(0, 1fr); }
  .bk-produksi-sesi {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: start;
    padding: 10px 12px;
  }
  .bk-produksi-sesi-kicker,
  .bk-produksi-sesi-date,
  .bk-produksi-sesi-dow { grid-column: 1; }
  .bk-produksi-sesi-dow { margin-bottom: 0; }
  .bk-produksi-sesi-stats { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-width: 180px; }
  .bk-produksi-sesi-list-label,
  .bk-produksi-sesi-list,
  .bk-produksi-sesi-hint { grid-column: 1 / -1; }
  .bk-produksi-sesi-list { max-height: 88px; }
  .bk-produksi-tickets { grid-template-columns: 1fr; max-height: none; }
}
@media (max-width: 720px) {
  .bk-produksi-sesi { grid-template-columns: 1fr; }
  .bk-produksi-sesi-stats { grid-column: 1; grid-row: auto; min-width: 0; }
}
@media (max-height: 820px) {
  .bk-produksi-pass-kpi { min-height: 58px; padding: 6px 8px; }
  .bk-produksi-pass-kpi-val { font-size: 13.5px; }
  .bk-produksi-tickets { max-height: 260px; }
  .bk-produksi-cell-input.is-qty,
  .bk-produksi-step { height: 32px; }
  .bk-produksi-sesi { top: 4px; }
}

.bk-produksi-work {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}
.bk-produksi-rail { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.bk-produksi-rail-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.bk-produksi-menu {
  display: block;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.bk-produksi-menu:hover {
  background: var(--accent-light);
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}
.bk-produksi-menu.is-on {
  background: color-mix(in oklab, var(--accent-light) 80%, #fff);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.bk-produksi-menu-name { display: block; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.bk-produksi-menu-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.bk-produksi-menu-hpp {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.bk-produksi-stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bk-produksi-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.bk-produksi-hero-title {
  margin: 6px 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.3px;
}
.bk-produksi-hero-meta { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.bk-produksi-hero-cost { text-align: right; }
.bk-produksi-hero-cost span { display: block; font-size: 10.5px; color: var(--text-muted); }
.bk-produksi-hero-cost strong { font-size: 20px; color: var(--success); letter-spacing: -0.4px; }
.bk-produksi-statline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bk-produksi-statline > div {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
}
.bk-produksi-statline span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bk-produksi-statline strong { font-size: 13px; color: var(--primary); }
.bk-produksi-statline-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: color-mix(in oklab, var(--accent-light) 40%, #fff);
}
.bk-produksi-sim { padding: 10px 12px 12px; }
.bk-produksi-sim h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
}
.bk-produksi-sim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bk-produksi-sim-grid > div {
  padding: 8px;
  text-align: center;
  border-radius: 8px;
  background: color-mix(in oklab, var(--accent-light) 50%, #fff);
}
.bk-produksi-sim-grid span { display: block; font-size: 10.5px; color: var(--text-muted); }
.bk-produksi-sim-grid strong { font-size: 14px; color: var(--primary); }

.bk-produksi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.bk-produksi-icon:hover { background: var(--accent-light); }
.bk-produksi-icon.is-danger { color: var(--danger); }
.bk-produksi-icon.is-danger:hover { background: var(--danger-light); }
.bk-produksi-icon i,
.bk-produksi-icon svg { width: 12px; height: 12px; }

.bk-produksi-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--primary-dark) 45%, transparent);
}
.bk-produksi-modal.is-open,
.bk-produksi-modal:not([hidden]) { display: flex; }
.bk-produksi-modal[hidden] { display: none !important; }
.bk-produksi-modal-card {
  width: 460px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -20px color-mix(in oklab, var(--primary) 55%, transparent);
}
.bk-produksi-modal-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bk-produksi-modal-card h4 { margin: 0; font-size: 15px; color: var(--primary); }

@supports not (color: color-mix(in oklab, red, blue)) {
  .bk-produksi-head,
  .bk-produksi-board-head,
  .bk-produksi-slip-head { background: var(--card-bg); }
  .bk-produksi-tabs { background: var(--bg); }
  .bk-produksi-table tbody tr:hover { background: var(--accent-light); }
}

@media (max-width: 1100px) {
  .bk-produksi-head { flex-wrap: wrap; }
  .bk-produksi-kpis,
  .bk-produksi-statline,
  .bk-produksi-work,
  .bk-produksi-sim-grid,
  .bk-produksi-grid { grid-template-columns: 1fr; }
  .bk-produksi-kpi { height: auto; min-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-produksi-kpi,
  .bk-produksi-tab,
  .bk-produksi-cta,
  .bk-produksi-menu,
  .bk-produksi-table tbody tr,
  .bk-produksi-ticket-card {
    transition: none !important;
    transform: none !important;
  }
}

/* Inventaris /aset — ikut 5 tema mockup via CSS variables */
.bk-aset { display: flex; flex-direction: column; gap: 12px; }
.bk-aset-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.bk-aset-brand { display: flex; gap: 12px; align-items: flex-start; }
.bk-aset-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent); flex-shrink: 0;
}
.bk-aset-mark i, .bk-aset-mark svg { width: 18px; height: 18px; }
.bk-aset-kicker {
  margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
.bk-aset-title { margin: 2px 0 4px; font-size: 18px; font-weight: 800; color: var(--primary); }
.bk-aset-lead { margin: 0; font-size: 12px; color: var(--text-muted); max-width: 640px; }
.bk-aset-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-aset-btn { height: 34px; padding: 0 12px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; }
.bk-aset-btn i, .bk-aset-btn svg { width: 14px; height: 14px; color: inherit; stroke: currentColor; }
.bk-aset-actions a.btn.btn-outline:is(:link, :visited, :hover, :focus, :focus-visible, :active),
.bk-aset-actions button.btn.btn-outline:is(:hover, :focus, :focus-visible, :active) {
  background: #ffffff;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  border-color: #cbd5e1;
}
.bk-aset-actions a.btn.btn-primary:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.bk-aset-flash {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; font-size: 12px;
}
.bk-aset-flash.is-ok { background: var(--success-light); color: var(--success); }
.bk-aset-flash.is-bad { background: var(--danger-light); color: var(--danger); }
.bk-aset-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-aset-tab {
  height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center;
}
.bk-aset-tab:link,
.bk-aset-tab:visited {
  color: var(--text-muted);
  -webkit-text-fill-color: currentColor;
}
.bk-aset-tab:hover { color: var(--primary); border-color: var(--accent); }
.bk-aset-tab:focus,
.bk-aset-tab:focus-visible,
.bk-aset-tab:active {
  color: var(--primary, #0f172a);
  -webkit-text-fill-color: currentColor;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}
.bk-aset-tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.bk-aset-tab.is-active:link,
.bk-aset-tab.is-active:visited,
.bk-aset-tab.is-active:hover,
.bk-aset-tab.is-active:focus,
.bk-aset-tab.is-active:focus-visible,
.bk-aset-tab.is-active:active {
  background: var(--primary);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-color: var(--primary);
}
.bk-aset-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bk-aset-kpi {
  height: 80px; padding: 10px 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; display: flex; flex-direction: column; justify-content: center;
}
.bk-aset-kpi-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.bk-aset-kpi-val {
  font-size: 18px; font-weight: 800; color: var(--primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace; margin-top: 2px;
}
.bk-aset-kpi-hint { margin: 2px 0 0; font-size: 10.5px; color: var(--text-muted); }
.bk-aset-board {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.bk-aset-board-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.bk-aset-board-head h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--primary); }
.bk-aset-board-sub { margin: 4px 0 0; font-size: 11px; color: var(--text-muted); }
.bk-aset-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--border); color: var(--primary);
}
.bk-aset-scroll { max-height: calc(100vh - 295px); overflow-y: auto; overflow-x: auto; position: relative; }
.bk-aset-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bk-aset-table th {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg) !important; color: var(--text-muted);
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -1.5px 0 var(--border);
}
.bk-aset-table td {
  padding: 7px 10px; border-top: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.bk-aset-table tbody tr:hover { background: color-mix(in oklab, var(--accent-light) 55%, transparent); }
.bk-aset-table .is-num { text-align: right; }
.bk-aset-table .is-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.bk-aset-table .bk-aset-col-kode {
  white-space: normal;
  word-break: break-word;
  max-width: 148px;
  font-size: 11px;
}
.bk-aset-table .bk-aset-col-nama { min-width: 200px; width: 28%; }
.bk-aset-name {
  font-weight: 700;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
}
.bk-aset-sub { font-size: 10.5px; color: var(--text-muted); }
.bk-aset-status {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: var(--success-light); color: var(--success);
}
.bk-aset-empty { text-align: center; color: var(--text-muted); padding: 22px 12px; }
.bk-aset-row-actions { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: center; white-space: nowrap; min-width: 248px; }
.bk-aset-table td.is-filled { font-weight: 700; color: var(--primary); }
.bk-gudang-alat-scroll { max-height: 320px; overflow: auto; }
.bk-gudang-alat-nama { font-weight: 700; color: var(--text); font-size: 12.5px; line-height: 1.35; }

.bk-gudang {
  --bk-gudang-radius: 12px;
  --bk-gudang-row: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bk-gudang-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--bk-gudang-radius);
  background:
    linear-gradient(125deg, color-mix(in oklab, var(--accent-light) 78%, #fff) 0%, var(--card-bg) 42%, var(--card-bg) 100%);
  overflow: hidden;
}
.bk-gudang-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
}
.bk-gudang-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.bk-gudang-mark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}
.bk-gudang-mark i,
.bk-gudang-mark svg { width: 18px; height: 18px; }
.bk-gudang-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-gudang-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary);
  line-height: 1.15;
}
.bk-gudang-lead {
  display: none;
}
.bk-gudang-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg) 70%, #fff);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.bk-gudang-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.bk-gudang-tab i,
.bk-gudang-tab svg { width: 13px; height: 13px; }
.bk-gudang-tab:hover {
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 80%, #fff);
}
.bk-gudang-tab.is-active {
  background: var(--primary);
  color: #fff;
}
.bk-gudang-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bk-gudang-pita {
  margin: 0;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--accent-light);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.bk-gudang-pita.is-kritis {
  background: var(--danger-light);
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border));
  color: var(--danger);
  font-weight: 700;
}
.bk-gudang-pita.is-ingat {
  background: #ffedd5;
  border-color: #fdba74;
  color: #c2410c;
  font-weight: 650;
}
.bk-gudang-pita.is-ingat a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}
.bk-gudang-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-gudang-search {
  margin-left: auto;
  min-width: 220px;
}
.bk-gudang-search .form-control {
  height: 34px;
  font-size: 12px;
}
.bk-gudang-scroll { max-height: calc(100vh - 295px); overflow: auto; }
.bk-gudang-board .table-header { padding: 6px 10px; }
.bk-gudang-board .table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  padding: 0 10px;
  background: var(--bg) !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
}
.bk-gudang-board .table tbody tr { height: var(--bk-gudang-row); }
.bk-gudang-do {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 8px 12px;
}
.bk-gudang-do summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
}
.bk-gudang-do-empty {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.bk-gb-page {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  align-self: stretch;
  box-sizing: border-box;
}
.bk-gb-page .bk-gb-head {
  margin-bottom: 6px !important;
}
.bk-gb-page .bk-gb-lead { display: none; }
.bk-gb-page .bk-gb-head h2 { font-size: 15px !important; }
.bk-gb-page .bk-list-hero {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}
.bk-gb-page .bk-pj-toolbar-card,
.bk-gb-page .bk-pj-table-card,
.bk-gb-page .card {
  box-shadow: none;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.bk-gb-kpis {
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.bk-gb-kpi {
  min-height: 80px;
  max-height: 80px;
  height: 80px;
  padding: 8px 10px !important;
  box-sizing: border-box;
  overflow: hidden;
}
.bk-gb-filter.bk-pj-toolbar-card {
  padding: 4px 8px !important;
  margin-bottom: 6px !important;
  box-shadow: none;
}
.bk-gb-scroll {
  max-height: calc(100vh - 295px);
  overflow-y: auto;
}
.bk-gb-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 34px;
  background: var(--bg) !important;
  box-shadow: inset 0 -1.5px 0 var(--border);
}
@media (max-width: 1100px) {
  .bk-gudang-head { flex-wrap: wrap; }
  .bk-gudang-search { margin-left: 0; width: 100%; min-width: 0; }
}
.bk-salur-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}
.bk-salur-btn:hover { opacity: 0.92; color: #fff; }
.bk-salur-btn.is-disabled,
.bk-salur-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: auto;
}
.bk-salur-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
}
.bk-salur-icon i,
.bk-salur-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.bk-salur-icon:hover { opacity: 0.92; color: #fff; }
.bk-salur-icon.is-locked {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  cursor: not-allowed;
  pointer-events: auto;
}
.bk-do-form { max-width: 820px; margin: 0 auto; }
.bk-do-dest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-do-dest-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.bk-do-dest-opt input { margin: 0; }
.bk-do-dest-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light, #ecfeff);
  color: var(--primary);
}
.bk-do-dest-opt.is-preview { cursor: default; color: var(--text-muted); }
.bk-do-pick {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bk-do-pick .form-control { flex: 1; height: 34px; }
.bk-do-items th, .bk-do-items td { height: 34px; padding-top: 4px; padding-bottom: 4px; }
.bk-do-items input.form-control { height: 32px; }
.bk-do-gerobak-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
}
.bk-do-gerobak-tools .btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
}
.bk-do-gerobak-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px 0;
}
.bk-do-gerobak-grid.is-multi { grid-template-columns: 1fr 1fr; }
.bk-do-gerobak-grid.is-dense { grid-template-columns: 1fr 1fr 1fr; }
.bk-do-gerobak-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.bk-do-gerobak-item input { margin: 0; flex-shrink: 0; }
.bk-do-gerobak-item span { line-height: 1.2; }
.bk-do-gerobak-item:has(input:checked) {
  border-color: var(--accent, #0e7490);
  background: var(--accent-light, #ecfeff);
  color: var(--primary);
}
.bk-do-stok-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.bk-do-stok-hint.is-warn { color: #b45309; }
.bk-do-stok-hint.is-err { color: #b91c1c; font-weight: 700; }
@media (max-width: 720px) {
  .bk-do-gerobak-grid.is-dense,
  .bk-do-gerobak-grid.is-multi { grid-template-columns: 1fr 1fr; }
}
.bk-aset-salur-card { width: 580px; }
.bk-aset-salur-card form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}
.bk-aset-salur-itemname { margin: 0; font-size: 13px; font-weight: 800; color: var(--text); }
.bk-aset-salur-stok {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
}
.bk-aset-salur-money {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bk-aset-salur-money label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-aset-salur-money input { width: 100%; height: 32px; }
.bk-aset-salur-card .bk-field-head { display: flex; justify-content: space-between; align-items: center; }
.bk-aset-salur-card .bk-field-head label,
.bk-aset-salur-card .bk-field-head span { margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.bk-aset-salur-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-aset-salur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.bk-aset-salur-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
}
.bk-aset-salur-item input { width: 14px; height: 14px; margin: 0; }
.bk-aset-icon { height: 26px; padding: 0 6px; }
.bk-aset-icon i, .bk-aset-icon svg { width: 12px; height: 12px; }
.bk-aset-grid th:nth-child(n+3), .bk-aset-grid td:nth-child(n+3) { width: 56px; }
.bk-aset-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  align-items: center; justify-content: center;
}
.bk-aset-modal-card {
  width: 580px; max-width: 94%; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  max-height: 90vh; overflow-y: auto;
}
.bk-aset-modal-card header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.bk-aset-modal-card header h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--primary); }
.bk-aset-modal-card header button { border: 0; background: none; font-size: 20px; color: var(--text-muted); cursor: pointer; }
.bk-aset-modal-card form { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-aset-modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.bk-aset-modal-card input, .bk-aset-modal-card select {
  height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500;
}
.bk-aset-modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.bk-aset-modal-card .bk-aset-field,
.bk-aset-create-grid .bk-aset-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-aset-modal-card .bk-field-head,
.bk-aset-create-grid .bk-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bk-aset-modal-card .bk-field-head label,
.bk-aset-create-grid .bk-field-head label { margin: 0; }
.bk-aset-field-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
}
.bk-aset-field-span { grid-column: 1 / -1; }

.bk-aset-form-page .bk-aset-board { padding: 0; overflow: hidden; }
.bk-aset-create-form { padding: 14px 16px 16px; }
.bk-aset-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.bk-aset-create-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-aset-create-grid input,
.bk-aset-create-grid select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 32px;
  box-sizing: border-box;
  vertical-align: middle;
}
.bk-aset-form-page .bk-aset-create-grid input.bk-aset-editable,
.bk-aset-form-page .bk-aset-create-grid select.bk-aset-editable {
  background: #fff;
  color: var(--text);
  cursor: text;
}
.bk-aset-form-page .bk-aset-create-grid select.bk-aset-editable {
  cursor: pointer;
}
.bk-aset-form-page .bk-aset-create-grid input.bk-aset-ro,
.bk-aset-form-page .bk-aset-create-grid input[readonly],
.bk-aset-form-page .bk-aset-create-grid select:disabled,
.bk-aset-form-page .bk-aset-create-grid input:disabled {
  background: #eef2f6;
  color: var(--text-muted);
  cursor: default;
}
.bk-aset-kode-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-aset-form-page .select2-container .select2-selection--single,
.bk-aset-form-page .bk-s2 .select2-selection--single {
  height: 32px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
}
.bk-aset-form-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.bk-aset-form-page .bk-s2 .select2-selection--single .select2-selection__rendered {
  line-height: 30px !important;
  padding-left: 2px !important;
}
.bk-aset-form-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.bk-aset-form-page .bk-s2 .select2-selection--single .select2-selection__arrow {
  height: 30px !important;
}
.bk-aset-create-span { grid-column: 1 / -1; }
.bk-aset-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Form aset (create/edit) — header editorial, scoped. Daftar /aset tidak kena. */
.bk-aset-form-page .bk-aset-head {
  position: relative;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 18px 22px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 82%, var(--accent) 18%);
  background:
    linear-gradient(116deg,
      color-mix(in oklab, var(--accent-light) 52%, #fff) 0%,
      var(--card-bg) 40%,
      var(--card-bg) 100%);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--primary) 5%, transparent),
    0 12px 28px -20px color-mix(in oklab, var(--primary) 30%, transparent);
  overflow: hidden;
}
.bk-aset-form-page .bk-aset-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
  opacity: 0.88;
}
.bk-aset-form-page .bk-aset-brand {
  flex: 1;
  min-width: 0;
  gap: 0;
  align-items: flex-start;
  padding-left: 6px;
}
.bk-aset-form-page .bk-aset-mark { display: none; }
.bk-aset-form-page .bk-aset-id { min-width: 0; }
.bk-aset-form-page .bk-aset-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.018em;
  text-transform: none;
  line-height: 1.4;
  color: color-mix(in oklab, var(--accent) 62%, var(--text-muted));
}
.bk-aset-form-page .bk-aset-title {
  margin: 8px 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.28;
  color: var(--primary);
}
.bk-aset-form-page .bk-aset-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  max-width: 40rem;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}
.bk-aset-form-page .bk-aset-kode-line {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--primary) 6%, #fff);
  border: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--primary);
}
.bk-aset-form-page .bk-aset-lead-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--text-muted) 45%, var(--border));
  flex-shrink: 0;
}
.bk-aset-form-page .bk-aset-lead-copy {
  font-weight: 400;
}
.bk-aset-form-page .bk-aset-actions { padding-top: 1px; }
.bk-aset-form-page .bk-aset-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}
.bk-aset-form-page .bk-aset-flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
}
.bk-aset-form-page .bk-aset-board { border-radius: 14px; }
.bk-aset-form-page .bk-aset-board-head {
  padding: 14px 20px;
  background: color-mix(in oklab, var(--bg) 70%, #fff);
}
.bk-aset-form-page .bk-aset-board-head h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bk-aset-form-page .bk-aset-create-form { padding: 16px 20px 18px; }
.bk-aset-form-page .bk-aset-create-grid { gap: 14px 18px; }
.bk-aset-form-page .bk-aset-field-hint {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 2px;
}
.bk-aset-form-page .bk-aset-create-actions {
  margin-top: 18px;
  padding-top: 14px;
}

@media (max-width: 1100px) {
  .bk-aset-kpis { grid-template-columns: 1fr 1fr; }
  .bk-aset-head { flex-wrap: wrap; }
  .bk-aset-create-grid { grid-template-columns: 1fr; }
  .bk-aset-form-page .bk-aset-title { font-size: 18px; }
}

/* SALDO NORMAL — pill kontras (JANGAN pakai --primary-light: itu stop gradient gelap) */
.bk-saldo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}
.bk-saldo-badge.is-debit {
  background: #e8eef3;
  color: var(--primary);
  border: 1px solid #c5d4e0;
}
.bk-saldo-badge.is-debit {
  background: color-mix(in oklab, var(--primary) 10%, #ffffff);
  border-color: color-mix(in oklab, var(--primary) 22%, #ffffff);
}
.bk-saldo-badge.is-kredit {
  background: var(--warning-light, #fffbeb);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.28);
}

/* Kop surat PDF / cetak A4 — Logo Kiri, Identitas Kanan, Divider Elegan */
.bk-kop,
.kop-surat {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--primary, #1b4769);
  padding-bottom: 12px;
  margin-bottom: 18px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.bk-kop-badge,
.kop-logo {
  width: 64px;
  height: 64px;
  min-width: 64px;
  max-width: 64px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-kop-badge img,
.kop-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.bk-kop-info,
.kop-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.bk-kop-company,
.kop-company {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary, #1b4769);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.2;
  margin: 0 0 2px 0;
}
.bk-kop-brand,
.kop-brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #d97706);
  line-height: 1.3;
  margin: 0 0 3px 0;
}
.bk-kop-tagline,
.kop-tagline,
.bk-kop-address,
.kop-address {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted, #475569);
  margin: 0;
  line-height: 1.35;
}
.bk-kop-print-date {
  margin: 4px 0 0 0;
  font-size: 9.5px;
  color: var(--text-muted, #94a3b8);
}
.bk-kop-doc-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--text-dark, var(--text));
}
.bk-kop-doc-sub {
  margin: 0 0 12px;
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
}

/* Footer Dokumen Resmi 2 Kolom Seimbang */
.bk-doc-print-footer,
.report-company-footer {
  margin-top: 24px;
  padding-top: 14px;
  background: #ffffff;
  page-break-inside: avoid;
  text-align: left;
}
.bk-footer-columns {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 8px 0;
}
.bk-footer-col {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.bk-footer-col-left {
  text-align: left;
}
.bk-footer-col-right {
  text-align: right;
}
.bk-footer-title {
  font-size: 9pt;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 3px;
}
.bk-footer-text {
  font-size: 8.5pt;
  line-height: 1.35;
  color: #334155;
  font-weight: 400;
}
.bk-footer-custom-note {
  font-size: 8.5pt;
  color: #475569;
  margin-bottom: 8px;
  font-style: italic;
}
.bk-footer-meta {
  font-size: 8pt;
  color: #94a3b8;
  margin-top: 6px;
  margin-bottom: 4px;
  text-align: center;
}
.bk-footer-corporate-line {
  height: 3px;
  background: var(--primary, #1b4769);
  width: 100%;
  margin-top: 8px;
  border-radius: 1px;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

@media print {
  .bk-kop-badge,
  .kop-logo {
    width: 64px;
    height: 64px;
    min-width: 64px;
    max-width: 64px;
  }
  .bk-doc-print-footer,
  .report-company-footer {
    position: static;
    margin-top: 24px;
    page-break-inside: avoid;
    background: #fff;
  }
}

/* Transaksi Pendapatan — aksi Edit / Batalkan (bukan label status VOID) */
.bk-tpd-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
}
.bk-tpd-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bk-tpd-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--card-bg);
}
.bk-tpd-chip:hover { color: var(--primary); border-color: var(--primary); }
.bk-tpd-chip:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}
.bk-tpd-chip.is-on {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.bk-tpd-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.bk-tpd-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
}
.bk-tpd-badge.is-final {
  background: var(--success-light);
  color: var(--success);
}
.bk-tpd-badge.is-void {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.bk-tpd-acts,
.bk-tpd-detail-acts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bk-tpd-detail-acts { width: 100%; }
.bk-tpd-act-form { display: inline; margin: 0; }
.bk-tpd-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.bk-tpd-act i,
.bk-tpd-act svg { width: 11px; height: 11px; flex-shrink: 0; }
.bk-tpd-act:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.bk-tpd-act:focus-visible {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: 2px;
}
.bk-tpd-act.is-edit {
  color: var(--primary);
  background: var(--primary-light, #eff6ff);
  border-color: rgba(11, 61, 145, 0.22);
}
.bk-tpd-act.is-edit:hover {
  background: #dbeafe;
  border-color: var(--primary);
}
.bk-tpd-act.is-cancel {
  color: var(--danger);
  background: var(--danger-light, #fef2f2);
  border-color: rgba(220, 38, 38, 0.28);
}
.bk-tpd-act.is-cancel:hover {
  background: #fee2e2;
  border-color: var(--danger);
}

/* ===== Master COA — bagan rekening buku (.bk-coa-*) ===== */
.bk-coa {
  --bk-coa-radius: 10px;
  --bk-coa-row: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-coa-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--bk-coa-radius);
  background:
    linear-gradient(125deg, color-mix(in oklab, var(--accent-light) 78%, #fff) 0%, var(--card-bg) 42%, var(--card-bg) 100%);
  overflow: hidden;
}
.bk-coa-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
}
.bk-coa-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.bk-coa-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}
.bk-coa-mark i,
.bk-coa-mark svg { width: 18px; height: 18px; }
.bk-coa-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-coa-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary);
  line-height: 1.15;
}
.bk-coa-lead {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
  max-width: 640px;
}
.bk-coa-lead code,
.bk-coa-pita code,
.bk-coa-help code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
}
.bk-coa-head-acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.bk-coa-pintasan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
.bk-coa-pintasan .bk-coa-cta {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
}
.bk-coa-beban-pick { margin-top: 8px; }
.bk-coa-beban-lbl {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.bk-coa-pfx-select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text);
}
.bk-coa-pfx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.bk-coa-pfx {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 70%, #fff);
  border: 1px solid var(--border);
}
.bk-coa-pfx.is-on,
.bk-coa-pfx:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.bk-field-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bk-coa-pita {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--bk-coa-radius);
  border: 1px solid var(--border);
  background: var(--accent-light);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.bk-coa-flash {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.bk-coa-flash.is-ok {
  background: var(--success-light);
  color: var(--success);
}
.bk-coa-flash.is-err {
  background: var(--danger-light);
  color: var(--danger);
}
.bk-coa-desk {
  display: grid;
  grid-template-columns: minmax(420px, 460px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.bk-coa-form-card,
.bk-coa-board {
  border: 1px solid var(--border);
  border-radius: var(--bk-coa-radius);
  background: var(--card-bg);
}
.bk-coa-form-card { padding: 12px 14px 14px; }
.bk-coa-form-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-coa-form-title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}
.bk-coa-form-lead {
  margin: 4px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bk-coa-form { display: flex; flex-direction: column; gap: 10px; }
.bk-coa-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bk-coa-field .bk-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.bk-coa-field .bk-field-head label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.bk-coa-field input[type="text"],
.bk-coa-field input[type="search"],
.bk-coa-field select,
.bk-coa-field textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.bk-coa-field #coa_kode_akun {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bk-coa-field textarea { height: auto; min-height: 56px; padding: 8px 10px; resize: vertical; }
.bk-coa-field input[readonly],
.bk-coa-field select:disabled {
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
.bk-coa-help {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}
.bk-coa-form-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.bk-coa-cta,
.bk-coa-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--primary);
}
.bk-coa-cta i, .bk-coa-cta svg,
.bk-coa-ghost i, .bk-coa-ghost svg { width: 14px; height: 14px; }
.bk-coa-cta {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.bk-coa-cta:hover { background: var(--primary-dark, #0b3d91); }
.bk-coa-cta.is-solid { min-width: 148px; }
.bk-coa-ghost:hover {
  border-color: var(--accent);
  color: var(--primary);
  background: color-mix(in oklab, var(--accent-light) 70%, #fff);
}
.bk-coa-board { padding: 10px 10px 0; min-width: 0; }
.bk-coa-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bk-coa-search {
  position: relative;
  min-width: 200px;
  flex: 1 1 200px;
}
.bk-coa-search i,
.bk-coa-search svg {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}
.bk-coa-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: #fff;
}
.bk-coa-search input:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
  outline-offset: 1px;
}
.bk-coa-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-coa-chip {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.bk-coa-chip:hover { border-color: var(--accent); color: var(--primary); }
.bk-coa-chip.is-on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.bk-coa-legend,
.bk-coa-empty,
.bk-coa-group-empty {
  margin: 8px 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bk-coa-empty {
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.bk-coa-scroll { max-height: calc(100vh - 295px); overflow: auto; padding-bottom: 8px; }
.bk-coa-group { margin-top: 8px; }
.bk-coa-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px 4px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-bg);
}
.bk-coa-group-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
}
.bk-coa-group-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.bk-coa-group-n {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.bk-coa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bk-coa-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bk-coa-table tbody tr {
  height: var(--bk-coa-row);
  border-bottom: 1px solid var(--border);
}
.bk-coa-table tbody tr:hover { background: color-mix(in oklab, var(--accent-light) 45%, #fff); }
.bk-coa-table tbody tr.is-off { opacity: 0.72; }
.bk-coa-table td { padding: 4px 10px; vertical-align: middle; }
.bk-coa-table .is-center,
.bk-coa-table th.is-center { text-align: center; }
.bk-coa-table .is-acts,
.bk-coa-table th.is-acts { text-align: center; width: 1%; min-width: 248px; white-space: nowrap; }
.bk-coa-kode {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--secondary);
  white-space: nowrap;
}
.bk-coa-name { font-weight: 650; color: var(--text); }
.bk-coa-note { font-size: 11px; color: var(--text-muted); }
.bk-coa-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  height: 16px;
  line-height: 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.bk-coa-tag.is-inv { background: #ffedd5; color: #c2410c; }
.bk-coa-tag.is-sys { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.bk-coa-tag.is-off { background: var(--danger-light); color: var(--danger); }
.bk-coa-acts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.bk-coa-acts form { display: inline-flex; margin: 0; }
.bk-coa-act {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.bk-coa-act.is-warn { color: #b45309; background: #fffbeb; }
.bk-coa-act.is-danger { color: var(--danger); background: var(--danger-light); }
.bk-coa-act.is-ok { color: var(--success); background: var(--success-light); }
.bk-coa-lock {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
}
.bk-coa-why {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: right;
}
@media (max-width: 1100px) {
  .bk-coa-head { flex-wrap: wrap; }
  .bk-coa-head-acts { align-items: stretch; width: 100%; }
  .bk-coa-desk { grid-template-columns: 1fr; }
}

/* ================= Kartu unit gerobak (1366x768, KPI ~80px, row ~34px) ================= */
.bk-unit { min-width: 0; }
.bk-unit-head { margin-bottom: 10px; }
.bk-unit-back {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 4px;
}
.bk-unit-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}
.bk-unit-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.bk-unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}
.bk-unit-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.bk-unit-chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.bk-unit-range {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.bk-unit-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 12px;
}
.bk-unit-tab {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.bk-unit-tab.is-on { color: var(--primary); border-bottom-color: var(--accent); }
.bk-unit-pita {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 12px;
}
.bk-unit-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.bk-unit-kpi-card {
  height: 80px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-sizing: border-box;
  overflow: hidden;
}
.bk-unit-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.bk-unit-kpi-val {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--primary);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-unit-kpi-kotor .bk-unit-kpi-val { color: var(--accent); }
.bk-unit-kpi-mitra .bk-unit-kpi-val { color: var(--success); }
.bk-unit-kpi-owner .bk-unit-kpi-val { color: var(--primary); }
.bk-unit-kpi-foot {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.bk-unit-chart-wrap { padding: 12px 14px; margin-bottom: 12px; }
.bk-unit-chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.bk-unit-chart-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.bk-unit-chart { height: 168px; }
.bk-unit-compare-wrap { padding: 10px 12px; margin-bottom: 12px; }
.bk-unit-compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.bk-unit-compare-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.bk-unit-compare-who {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.bk-unit-compare-who strong {
  color: var(--text);
  font-weight: 700;
}
.bk-unit-compare-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.bk-unit-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.bk-unit-compare th,
.bk-unit-compare td {
  height: 34px;
  padding: 0 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.bk-unit-compare thead th {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
}
.bk-unit-compare .bk-unit-compare-label {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  background: var(--card-bg);
  min-width: 96px;
  box-shadow: 4px 0 8px -4px rgba(15, 23, 42, 0.18);
}
.bk-unit-compare thead .bk-unit-compare-label {
  z-index: 3;
  background: var(--bg);
  text-transform: uppercase;
  font-size: 10px;
  color: var(--text-muted);
}
.bk-unit-compare.is-wide td,
.bk-unit-compare.is-wide thead th:not(.bk-unit-compare-label) {
  min-width: 76px;
}
.bk-unit-compare-day-num { display: block; }
.bk-unit-compare.is-mixed thead th.bk-unit-compare-day {
  height: auto;
  min-height: 34px;
  padding: 4px 8px;
  line-height: 1.2;
}
.bk-unit-compare-day-nama {
  display: block;
  font-size: 9px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  max-width: 76px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-unit-compare-kotor td { color: var(--accent); }
.bk-unit-compare-mitra td { color: var(--success); }
.bk-unit-compare-owner td { color: var(--primary); }
.bk-unit-compare td.is-zero {
  color: var(--text-muted);
  opacity: 0.55;
  font-weight: 400;
}
.bk-unit-compare-kotor td.is-zero,
.bk-unit-compare-mitra td.is-zero,
.bk-unit-compare-owner td.is-zero {
  color: var(--text-muted);
}
.bk-unit-compare-delta .is-up { color: var(--success); font-weight: 700; }
.bk-unit-compare-delta .is-down { color: #dc2626; font-weight: 700; }
.bk-unit-compare-delta .is-same,
.bk-unit-compare-delta .is-na { color: var(--text-muted); }
.bk-unit-compare-delta .bk-unit-compare-label,
.bk-unit-compare-delta td { cursor: help; }
.bk-unit-empty, .bk-unit-empty-td {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 22px 12px;
}
.bk-unit-rekap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text);
  margin: 0 0 10px;
}
.bk-unit-table-card { padding: 0; overflow: hidden; }
.bk-unit-table-scroll { max-height: 380px; overflow-y: auto; }
.bk-unit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bk-unit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--border);
}
.bk-unit-table td {
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.bk-unit-table td.num, .bk-unit-table th.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
.bk-unit-row { cursor: pointer; }
.bk-unit-row:hover, .bk-unit-row.is-open { background: var(--bg); }
.bk-unit-detail td { height: auto; padding: 8px 12px 12px; background: var(--bg); }
.bk-unit-detail-box { font-size: 11.5px; color: var(--text); }
.bk-unit-detail-box ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 900px) {
  .bk-unit-kpi { grid-template-columns: 1fr; }
  .bk-unit-kpi-card { height: auto; min-height: 80px; }
}

/* Kolom Aksi master: Ubah + Nonaktifkan + Delete — SATU BARIS, seluruh modul */
table:has(.bk-master-aksi) thead th:last-child,
td:has(.bk-master-aksi),
th.bk-col-aksi,
td.bk-col-aksi {
  width: 1% !important;
  min-width: 248px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* JH ledger/setoran: hanya tombol Rincian — jangan pakai min 248px (meremukkan kolom @1366) */
.jh-table-scroll table.jh-ledger-table thead th.bk-col-aksi,
.jh-table-scroll table.jh-ledger-table thead th:last-child,
.jh-table-scroll table.jh-ledger-table tbody td.bk-col-aksi,
.jh-table-scroll table.jh-ledger-table tbody td:last-child,
.jh-table-scroll table.jh-setoran-table thead th.bk-col-aksi,
.jh-table-scroll table.jh-setoran-table thead th:last-child,
.jh-table-scroll table.jh-setoran-table tbody td.bk-col-aksi,
.jh-table-scroll table.jh-setoran-table tbody td:last-child {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 100px !important;
  vertical-align: top !important;
}

.bk-master-aksi {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  max-width: none;
}
.bk-master-aksi-form {
  display: inline-flex;
  margin: 0;
  flex: 0 0 auto;
}
.bk-master-aksi .btn,
.bk-master-aksi .bk-coa-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}
.bk-master-aksi .btn.is-delete,
.bk-master-aksi .btn.is-delete:hover,
.bk-master-aksi .bk-coa-act.is-danger {
  color: #dc2626;
  border-color: #fecaca;
}
.bk-master-aksi .btn.is-delete:hover,
.bk-master-aksi .bk-coa-act.is-danger:hover {
  background: #fef2f2;
}

/* ========== BaksoKu Notice — cap setoran dapur (bukan dialog native) ========== */
html.bk-notice-lock,
html.bk-notice-lock body {
  overflow: hidden;
}

.bk-notice {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.bk-notice[hidden] {
  display: none !important;
}

.bk-notice-veil {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary-dark) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

.bk-notice-card {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent),
    0 28px 70px -18px color-mix(in srgb, var(--primary-dark) 48%, transparent);
  animation: bkNoticeRise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.bk-notice-perf {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.bk-notice.is-danger .bk-notice-perf {
  background: linear-gradient(90deg, #f43f5e, var(--danger));
}

.bk-notice-inner {
  padding: 22px 22px 8px;
  text-align: center;
}

.bk-notice-stamp {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-light);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:
    inset 0 0 0 4px var(--card-bg),
    inset 0 0 0 5.5px color-mix(in srgb, var(--accent) 28%, transparent);
}
.bk-notice-stamp i,
.bk-notice-stamp svg {
  width: 22px;
  height: 22px;
}

.bk-notice.is-danger .bk-notice-stamp {
  color: var(--danger);
  background: var(--danger-light);
  border-color: #fecaca;
  box-shadow:
    inset 0 0 0 4px var(--card-bg),
    inset 0 0 0 5.5px #fecaca;
}
.bk-notice.is-warn .bk-notice-stamp {
  color: var(--warning);
  background: var(--warning-light);
  border-color: #fde68a;
  box-shadow:
    inset 0 0 0 4px var(--card-bg),
    inset 0 0 0 5.5px #fde68a;
}
.bk-notice.is-ok .bk-notice-stamp {
  color: var(--success);
  background: var(--success-light);
  border-color: #a7f3d0;
  box-shadow:
    inset 0 0 0 4px var(--card-bg),
    inset 0 0 0 5.5px #a7f3d0;
}

.bk-notice-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.bk-notice-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1.25;
  margin: 0 0 8px;
}

.bk-notice-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.bk-notice-foot {
  display: flex;
  justify-content: stretch;
  gap: 8px;
  padding: 18px 22px 20px;
}

.bk-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 96px;
  height: 38px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  flex: 1;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.bk-notice-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bk-notice-btn-ghost {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--primary);
}
.bk-notice-btn-ghost:hover {
  background: var(--bg);
}

.bk-notice-btn-ok {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--primary) 80%, transparent);
}
.bk-notice-btn-ok:hover {
  background: var(--primary-dark);
}
.bk-notice-btn-ok.is-danger,
.bk-notice.is-danger .bk-notice-btn-ok {
  background: var(--danger);
  box-shadow: 0 8px 18px -10px #dc2626;
}
.bk-notice-btn-ok.is-danger:hover,
.bk-notice.is-danger .bk-notice-btn-ok:hover {
  background: #b91c1c;
}

.bk-notice.is-alert .bk-notice-btn-ghost {
  display: none;
}

.bk-notice-toasts {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12060;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.bk-notice-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--primary-dark) 40%, transparent);
  animation: bkNoticeRise 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.bk-notice-toast.is-out {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.bk-notice-toast-stamp {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent-light);
  color: var(--accent);
}
.bk-notice-toast-stamp svg {
  width: 14px;
  height: 14px;
}
.bk-notice-toast.is-danger .bk-notice-toast-stamp {
  background: var(--danger-light);
  color: var(--danger);
}
.bk-notice-toast.is-ok .bk-notice-toast-stamp {
  background: var(--success-light);
  color: var(--success);
}
.bk-notice-toast.is-warn .bk-notice-toast-stamp {
  background: var(--warning-light);
  color: var(--warning);
}
.bk-notice-toast-copy {
  flex: 1;
  min-width: 0;
}
.bk-notice-toast-copy strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 2px;
}
.bk-notice-toast-copy span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-line;
}
.bk-notice-toast-x {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

@keyframes bkNoticeRise {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-notice-card,
  .bk-notice-toast,
  .bk-notice-toast.is-out {
    animation: none;
    transition: none;
  }
}

/* ===== Master Barang katalog + form SKU (.bk-sku-*) — tema Oceanic existing ===== */
.bk-sku,
.bk-sku-page,
.bk-uom {
  --bk-sku-radius: 10px;
  --bk-sku-row: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-sku-head,
.bk-uom-head,
.bk-sku-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--bk-sku-radius);
  background:
    linear-gradient(125deg, color-mix(in oklab, var(--accent-light) 78%, #fff) 0%, var(--card-bg) 42%, var(--card-bg) 100%);
  overflow: hidden;
}
.bk-sku-head::before,
.bk-uom-head::before,
.bk-sku-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
}
.bk-sku-brand,
.bk-uom-brand,
.bk-sku-hero-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.bk-sku-hero-copy { display: block; }
.bk-sku-mark,
.bk-uom-mark,
.bk-sku-panel-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  flex-shrink: 0;
}
.bk-sku-mark i, .bk-sku-mark svg,
.bk-uom-mark i, .bk-uom-mark svg,
.bk-sku-panel-mark i, .bk-sku-panel-mark svg { width: 18px; height: 18px; }
.bk-sku-panel-mark.is-uom { background: #0891b2; }
.bk-sku-kicker,
.bk-uom-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-sku-title,
.bk-uom-title,
.bk-sku-hero-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--primary);
  line-height: 1.15;
}
.bk-sku-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-sku-hero-title i,
.bk-sku-hero-title svg { width: 18px; height: 18px; }
.bk-sku-lead,
.bk-uom-lead {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
  max-width: 640px;
}
.bk-sku-cta,
.bk-uom-cta,
.bk-sku-back {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}
.bk-sku-cta i, .bk-sku-cta svg,
.bk-uom-cta i, .bk-uom-cta svg,
.bk-sku-back i, .bk-sku-back svg { width: 14px; height: 14px; }
.bk-sku-flash {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.bk-sku-flash.is-ok { background: var(--success-light); color: var(--success); }
.bk-sku-flash.is-err { background: var(--danger-light); color: var(--danger); }
.bk-sku-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bk-sku-filters-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-sku-filters .btn { height: 28px; font-size: 11px; padding: 0 10px; }
.bk-sku-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.bk-sku-search-wrap,
.bk-sku-kat-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bk-sku-search-wrap { flex: 1 1 240px; min-width: 200px; }
.bk-sku-kat-wrap { flex: 0 1 200px; }
.bk-sku-search,
.bk-sku-kat {
  height: 32px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text);
}
.bk-sku-search:focus,
.bk-sku-kat:focus {
  outline: 2px solid color-mix(in oklab, var(--primary) 35%, transparent);
  border-color: var(--primary);
}
.bk-sku-count {
  margin: 0 0 4px auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-sku-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
}
.bk-sku-more-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.bk-sku-sentinel { width: 100%; height: 1px; }
.bk-sku-board,
.bk-uom-board {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--bk-sku-radius);
  background: var(--card-bg);
}
.bk-sku-board-scroll,
.bk-uom-board-scroll {
  max-height: calc(100vh - 295px);
  overflow-y: auto;
}
.bk-sku-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
.bk-sku-table thead {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1.5px solid var(--border);
}
.bk-sku-table th {
  padding: 8px 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  height: var(--bk-sku-row);
}
.bk-sku-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  height: var(--bk-sku-row);
  color: var(--text);
}
.bk-sku-table .is-center { text-align: center; }
.bk-sku-table .is-right { text-align: right; }
.bk-sku-table .is-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.bk-sku-table .is-harga { font-weight: 700; color: var(--accent); }
.bk-sku-table .is-coa { font-weight: 600; color: var(--primary); }
.bk-sku-table .cell-kode {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--primary);
}
.bk-sku-sub { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.bk-sku-dash { color: #94a3b8; font-size: 11px; }
.bk-sku-empty { padding: 30px; text-align: center; color: var(--text-muted); }
.bk-sku-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.bk-sku-pill.is-merk { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; font-weight: 700; }
.bk-sku-pill.is-jual { background: #ffedd5; color: #c2410c; border: 0; font-weight: 700; font-size: 9.5px; }
.bk-sku-pill.is-stock { background: #ecfdf5; color: #047857; border: 0; font-weight: 700; }
.bk-sku-pill.is-non_stock { background: #f8fafc; color: #475569; border: 0; font-weight: 700; }
.bk-sku-pill.is-asset { background: #eff6ff; color: #1d4ed8; border: 0; font-weight: 700; }
.bk-sku-pill.is-uom { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-weight: 700; }
.bk-sku-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
}

.bk-sku-page { gap: 12px; }
.bk-sku-desk { display: flex; flex-direction: column; gap: 10px; }
.bk-sku-panel {
  border: 1px solid var(--border);
  border-radius: var(--bk-sku-radius);
  background: var(--card-bg);
  padding: 12px 14px 14px;
}
.bk-sku-panel-uom {
  background:
    linear-gradient(180deg, color-mix(in oklab, #ecfeff 70%, var(--card-bg)) 0%, var(--card-bg) 56%);
}
.bk-sku-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bk-sku-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}
.bk-sku-panel-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.bk-sku-hint { font-weight: 600; color: var(--text-muted); }
.bk-sku-page .bk-form-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  align-items: start;
}
.bk-sku-page .bk-form-row:last-child { margin-bottom: 0; }
.bk-sku-page .bk-form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-sku-page .bk-form-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-sku-page .bk-field-wrap { min-width: 0; }
.bk-sku-page .bk-field-head label.is-uom {
  color: #0891b2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bk-sku-page .bk-field {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  background: #fff;
}
.bk-sku-page .bk-field:focus {
  outline: none;
  border-color: var(--primary);
}
.bk-sku-page .bk-field[readonly],
.bk-sku-page .bk-field-ro,
.bk-sku-page .bk-field:disabled {
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
.bk-sku-page #kode_barang { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; }
.bk-sku-page input.bk-field[type="number"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  -moz-appearance: textfield;
}
.bk-sku-page input.bk-field[type="number"]::-webkit-outer-spin-button,
.bk-sku-page input.bk-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bk-sku-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 0 8px;
}
.bk-sku-actions .btn { height: 36px; padding: 0 16px; font-weight: 700; }

.bk-uom-desk {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.bk-uom-form-card {
  border: 1px solid var(--border);
  border-radius: var(--bk-sku-radius);
  background: var(--card-bg);
  padding: 12px 14px 14px;
}
.bk-uom-form-kicker {
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bk-uom-form-title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}
.bk-uom-form-lead {
  margin: 4px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bk-uom-form { display: flex; flex-direction: column; gap: 10px; }
.bk-uom-field-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.bk-uom-form .bk-field {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
}
.bk-uom-form #satuan_kode {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
}
.bk-uom-form textarea.bk-field {
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  resize: vertical;
}
.bk-uom-form-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.bk-uom-form-acts .btn { height: 34px; padding: 0 14px; font-weight: 700; }

@media (max-width: 1100px) {
  .bk-sku-page .bk-form-row-3,
  .bk-sku-page .bk-form-row-2,
  .bk-uom-desk,
  .bk-uom-field-row {
    grid-template-columns: 1fr;
  }
}

/* ================= SEAMLESS NAVIGATION (PJAX PROGRESS & TRANSITION) ================= */
html {
  scrollbar-gutter: stable;
}

#bku-pjax-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent, #507fa9), #38bdf8);
  z-index: 9999999;
  opacity: 0;
  transition: width 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #507fa9) 60%, transparent);
  pointer-events: none;
}
#bku-pjax-bar.is-on {
  opacity: 1;
}

.content-body.bku-pjax-entering {
  animation: bku-pjax-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
@keyframes bku-pjax-content-in {
  from { 
    opacity: 0.88;
    transform: translateY(3px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .content-body.bku-pjax-entering { animation: none; }
  #bku-pjax-bar { transition: none; }
}

/* ================= PENGATURAN RESPONSIVE LAYOUT (1024, 1366, 1920) ================= */
.settings-tab-nav-wrapper {
  width: 100%;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.settings-tab-nav-wrapper::-webkit-scrollbar {
  display: none;
}
.settings-tab-nav-list {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}
.settings-tab-nav-list .tab-button-item {
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1200px) {
  .settings-profile-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.settings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .settings-two-col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Fasilitas & Mess — grid kartu + tab pintasan horizontal
   ========================================================================== */
.bk-fasilitas-mess-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.bk-fasilitas-mess-card {
  padding: 12px 14px;
  margin: 0;
  min-width: 0;
}
.bk-fasilitas-mess-meta {
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.bk-fasilitas-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  width: 100%;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
.bk-fasilitas-tabs .tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.content-body > .bk-fasilitas-mess-grid,
.content-body > .bk-fasilitas-tabs,
.content-body > .tab-section {
  flex: 0 0 auto !important;
  display: block;
  min-height: auto !important;
}
.content-body > .bk-fasilitas-tabs {
  display: flex !important;
}

/* ==========================================================================
   KALIBRASI 1366×768 — densitas proporsional (bukan scale())
   Lebar ≤1400 ATAU tinggi ≤800: rapatkan shell/KPI/chart.
   Monitor 1920×1080 (lebar>1400 & tinggi>800) tetap baseline di atas.
   ========================================================================== */
@media (max-width: 1400px), (max-height: 800px) {
  :root {
    --sidebar-width: 240px;
    --topbar-height: 52px;
  }

  .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    flex: 0 0 auto;
    flex-shrink: 0;
    padding: 0 10px;
  }

  .content-body {
    padding: 8px 12px;
  }

  .brand-header {
    padding: 12px 12px 8px;
  }
  .owner-info-box {
    margin: 8px 10px;
    padding: 7px 8px;
  }
  .nav-item {
    padding: 6px 8px;
    font-size: 11.5px;
  }
  .sidebar-menu {
    padding: 4px 8px 16px;
  }

  /* Dashboard densitas */
  #view-dashboard .dashboard-hero {
    min-height: 72px;
    height: 72px;
    max-height: 80px;
    padding: 6px 12px;
    margin-bottom: 6px;
  }
  #view-dashboard .hero-content h2 {
    font-size: 14px;
  }
  #view-dashboard .hero-content p {
    font-size: 11px;
  }
  #view-dashboard .hero-stat-val {
    font-size: 18px;
  }
  #view-dashboard .kpi-grid {
    gap: 6px;
    margin-bottom: 6px;
  }
  #view-dashboard .kpi-card {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 5px 8px 5px 10px;
  }
  #view-dashboard .kpi-val,
  #view-dashboard .kpi-card .kpi-val {
    font-size: 14px;
  }
  .bk-dash-charts {
    gap: 6px;
    margin-bottom: 6px;
  }
  .bk-dash-trend {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
  }
  .bk-dash-pie-ring {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
  }
  .bk-dash-pie-ring canvas {
    width: 120px !important;
    height: 120px !important;
  }
  .panel {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .bk-list-hero {
    min-height: 72px !important;
    height: auto;
    max-height: 88px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Simpan Pinjam */
  .bk-sp {
    gap: 6px;
  }
  .bk-sp-head {
    padding: 8px 10px;
  }
  .bk-sp-title {
    font-size: 15px;
  }
  .bk-sp-kpi {
    min-height: 64px;
    padding: 8px 10px;
  }
  .bk-sp-kpi-val {
    font-size: 16px;
  }
  .bk-sp-scroll.is-stmt {
    max-height: min(280px, calc(100vh - 320px));
  }
  .bk-sp-scroll.is-tall {
    max-height: min(260px, calc(100vh - 360px));
  }

  /* Fasilitas */
  .bk-fasilitas-mess-grid {
    gap: 8px;
    margin-bottom: 8px;
  }
  .bk-fasilitas-mess-card {
    padding: 10px 12px;
  }

  /* ---------- Topbar: muat 1 baris tanpa clip Catat Setoran / nama user ---------- */
  .search-container {
    width: 148px;
    height: 30px;
    flex: 0 0 auto;
  }
  .search-container:focus-within {
    width: 178px;
  }
  .search-input {
    height: 30px;
    font-size: 11px;
    padding: 0 8px 0 30px;
  }
  .search-shortcut {
    display: none;
  }
  .topbar-actions {
    gap: 3px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .topbar-actions .btn {
    padding: 0 6px;
    height: 30px;
    font-size: 11px;
    white-space: nowrap;
  }
  #current-theme-name {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
  }
  #topbar-top1-nama {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
  #topbar-top1-link {
    padding: 0 6px;
  }
  #user-tools-container .btn span {
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
  }
  .topbar-divider {
    height: 18px;
    margin: 0 1px;
    flex-shrink: 0;
  }
  .topbar-actions .btn.btn-accent {
    padding: 0 10px;
    flex-shrink: 0;
  }

  /* ---------- Jurnal Harian: pita filter + KPI + strip kas proporsional ---------- */
  .content-body .jh-wrap > .jh-toolbar,
  .jh-toolbar {
    gap: 5px;
    margin-bottom: 5px;
    overflow: visible;
  }
  .jh-chips {
    gap: 3px;
    flex: 1 1 100%;
    margin-bottom: 0;
  }
  .jh-chip {
    height: 24px;
    padding: 0 7px;
    font-size: 10px;
    line-height: 22px;
  }
  .content-body:has(#jh-page) .jh-filter-form,
  .jh-filter-form {
    flex-wrap: wrap;
    gap: 5px 6px;
    overflow-x: visible;
    align-items: center;
  }
  .jh-field-wrap {
    min-width: 118px;
    max-width: 148px;
  }
  .jh-field-coa {
    min-width: 128px;
    width: 148px;
  }
  .jh-field-sumber {
    min-width: 110px;
    width: 128px;
  }
  .jh-filter-form select,
  .jh-filter-form input[type="date"],
  .jh-filter-form input[type="text"],
  .jh-filter-form input[type="search"] {
    height: 30px;
    background: #ffffff !important;
    border-color: #cbd5e1;
    color: #0f172a;
  }
  .jh-filter-form .select2-container .select2-selection--single {
    height: 30px !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
  }
  .jh-filter-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    color: #0f172a;
  }
  .jh-filter-form .select2-container--disabled .select2-selection--single {
    background: #ffffff !important;
    opacity: 1;
    color: #64748b;
  }
  .jh-setoran-toggle {
    height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
    background: #ffffff !important;
  }
  .jh-reset-btn,
  .jh-filter-form .bk-pj-btn-filter {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }

  .jh-excel-v2-banner {
    margin-bottom: 5px !important;
    padding: 4px 6px !important;
  }
  .jh-excel-head {
    margin-bottom: 3px;
  }
  .jh-excel-head-title {
    font-size: 9px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .jh-excel-grid {
    gap: 3px;
  }
  .jh-excel-cell {
    padding: 3px 5px;
  }
  .jh-excel-lbl {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 7.5px;
    line-height: 1.2;
  }
  .jh-excel-val {
    font-size: 11px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }

  /* 3×2 @1366: kartu ke-6 (Pertumbuhan Harian) penuh di dalam viewport */
  .jh-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
    margin-bottom: 5px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .jh-kpi-card {
    min-width: 0;
    min-height: 52px;
    max-height: none;
    height: auto;
    padding: 4px 7px;
  }
  .jh-kpi-card .kpi-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 9px;
    line-height: 1.15;
  }
  .jh-kpi-card .kpi-val {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .jh-kpi-card .kpi-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* Strip kas @1366 (bukan mobile ≤720): grid 2×2 — narasi Kas 111 penuh, rapat */
  @media (min-width: 721px) {
    .jh-saldo-kas-strip {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      justify-content: stretch;
      flex-wrap: unset;
      gap: 6px 10px !important;
      padding: 6px 8px !important;
      margin: 0 0 8px !important;
      overflow: visible;
    }
    .jh-saldo-kas-strip .jh-strip-divider {
      display: none !important;
    }
    .jh-saldo-kas-strip .jh-strip-cell {
      flex: none;
      min-width: 0;
      width: auto;
    }
    .jh-saldo-kas-strip .jh-strip-recon,
    .jh-saldo-kas-strip > div:last-child {
      flex: none;
      width: auto;
      max-width: none;
      text-align: left !important;
      font-size: 10.5px;
      line-height: 1.4;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
    }
    .jh-saldo-kas-strip .jh-strip-recon .jh-strip-recon-note {
      justify-content: flex-start !important;
    }
    .jh-saldo-kas-strip strong.font-mono {
      font-size: 13px !important;
    }
  }

  /* Table viewport lock sedikit lebih longgar agar pane sempat scroll */
  .content-body .bk-pj-scroll,
  .content-body .bk-pv2-scroll,
  .content-body .jh-table-scroll,
  .content-body .bk-produksi-scroll,
  .content-body .bk-gudang-scroll,
  .content-body .bk-aset-scroll,
  .content-body .bk-coa-scroll,
  .content-body .bk-sku-board-scroll,
  .content-body .bk-uom-board-scroll,
  .content-body .bk-gb-scroll,
  .content-body .bk-sp-scroll,
  .content-body .bk-vp-scroll,
  .content-body .table-container,
  .content-body .table-responsive {
    max-height: calc(100vh - 260px) !important;
  }
}

@media (max-width: 1400px) and (max-height: 800px) {
  /* Laptop 1366×768: KPI dashboard 3+3 sudah di MQ 1400; pastikan chart tidak mendominasi */
  .bk-dash-charts {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .bk-fasilitas-mess-grid {
    grid-template-columns: 1fr;
  }
}

/* Laporan laba rugi: kartu ringkas tidak ikut kunci tinggi 80px dashboard */
.bk-lr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.bk-lr-kpis .kpi-card {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 10px 12px;
  background: #ffffff;
}
.bk-lr-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.35;
}
.bk-lr-kpi-val {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.bk-lr-kpi-note {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}
@media (max-width: 1200px) {
  .bk-lr-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   BAKSOKU ENTERPRISE — EXECUTIVE PAYROLL MODULE STYLING
   ========================================================================== */
.bk-payroll-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.bk-payroll-control-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bk-payroll-control-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bk-payroll-control-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}
.bk-payroll-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 6px 10px !important;
  min-width: 240px;
  max-width: 340px;
  height: 34px !important;
}
.bk-pay-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bk-pay-status-badge.is-draft { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.bk-pay-status-badge.is-approved { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.bk-pay-status-badge.is-final { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.bk-pay-status-badge.is-paid { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.bk-payroll-control-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bk-payroll-control-right {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 1px solid var(--border, #e2e8f0);
  padding-left: 14px;
}
.bk-jrn-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}
.bk-jrn-pill-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #64748b);
  font-size: 9.5px;
}
.bk-jrn-pill-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11.5px;
}
.bk-jrn-pill-val.is-beban { color: #2563eb; }
.bk-jrn-pill-val.is-kas { color: #059669; }
.bk-jrn-pill-val.is-pending { color: #94a3b8; font-style: italic; }
.bk-payroll-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.bk-payroll-kpi-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  max-height: 80px;
  height: 80px;
  box-sizing: border-box;
}
.bk-payroll-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06);
}
.bk-payroll-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.bk-payroll-kpi-card.is-bruto::before { background: #2563eb; }
.bk-payroll-kpi-card.is-kasbon::before { background: #e11d48; }
.bk-payroll-kpi-card.is-bpjs::before { background: #d97706; }
.bk-payroll-kpi-card.is-thp::before { background: #059669; }
.bk-payroll-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.bk-payroll-kpi-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-payroll-kpi-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bk-payroll-kpi-icon i,
.bk-payroll-kpi-icon svg {
  width: 13px;
  height: 13px;
}
.bk-payroll-kpi-card.is-bruto .bk-payroll-kpi-icon { background: #eff6ff; color: #2563eb; }
.bk-payroll-kpi-card.is-kasbon .bk-payroll-kpi-icon { background: #fff1f2; color: #e11d48; }
.bk-payroll-kpi-card.is-bpjs .bk-payroll-kpi-icon { background: #fffbeb; color: #d97706; }
.bk-payroll-kpi-card.is-thp .bk-payroll-kpi-icon { background: #ecfdf5; color: #059669; }
.bk-payroll-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 2px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.bk-payroll-kpi-card.is-bruto .bk-payroll-kpi-val { color: #1e3a8a; }
.bk-payroll-kpi-card.is-kasbon .bk-payroll-kpi-val { color: #be123c; }
.bk-payroll-kpi-card.is-bpjs .bk-payroll-kpi-val { color: #b45309; }
.bk-payroll-kpi-card.is-thp .bk-payroll-kpi-val { color: #047857; }
.bk-payroll-kpi-sub {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-payroll-table-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}
.bk-payroll-table-head {
  padding: 10px 16px;
  background: var(--card-bg, #ffffff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bk-payroll-table-wrap {
  overflow-x: auto;
  max-height: calc(100vh - 350px);
  min-height: 240px;
}
.bk-payroll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
.bk-payroll-table thead th {
  background: var(--bg, #f8fafc);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #64748b);
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  white-space: nowrap;
}
.bk-payroll-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  vertical-align: middle;
  line-height: 1.35;
}
.bk-payroll-table tbody tr:hover {
  background: rgba(241, 245, 249, 0.6);
}
.bk-payroll-table td.num-cell {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap !important;
}
.bk-slip-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bk-btn-slip-ubah {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309 !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.bk-btn-slip-ubah:hover {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
}
.bk-btn-slip-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.bk-btn-slip-action:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.bk-btn-slip-action.is-pdf {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.bk-btn-slip-action.is-pdf:hover {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border-color: #6ee7b7 !important;
}
@media (max-width: 1024px) {
  .bk-payroll-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .bk-payroll-control-card {
    flex-direction: column;
    align-items: stretch;
  }
  .bk-payroll-control-right {
    border-left: none;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-left: 0;
    padding-top: 10px;
  }
}