:root {
  --navy: #0e1b3f;
  --navy-2: #142654;
  --orange: #ff7a1a;
  --orange-glow: rgba(255, 122, 26, 0.18);
  --orange-dark: #e8690c;
  --bg: #f5f6fa;
  --card: #ffffff;
  --border: #e9ebf1;
  --text: #16213e;
  --text-muted: #8891a7;
  --text-soft: #aeb6cc;
  --green: #17a673;
  --red: #e5484d;
  --blue: #2f6fed;
  --purple: #7c5cfc;
  --yellow: #f5b93d;
  --teal: #16b3a3;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 64, 0.04), 0 8px 24px rgba(16, 24, 64, 0.04);
  font-size: 16px;
}

* { box-sizing: border-box; }
button, select, input, textarea { color: inherit; font-family: inherit; }

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy) 0%, #0a1330 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform 0.22s ease, width 0.22s ease;
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Mode "mini" (ciutkan menu, khusus desktop): sidebar mengecil jadi
   ikon-saja, teks label disembunyikan, tapi setiap item TETAP bisa diklik
   normal — beda dari .collapsed (mode mobile) yang menyembunyikan sidebar
   SEPENUHNYA dari layar. */
.sidebar.mini {
  width: 72px;
  padding-left: 10px;
  padding-right: 10px;
}
.sidebar.mini .brand-text,
.sidebar.mini .sidebar-footer-text,
.sidebar.mini .nav-item span,
.sidebar.mini .nav-section-label {
  display: none;
}
.sidebar.mini .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.mini .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.mini .sidebar-footer { justify-content: center; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 22px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  position: relative;
}

.brand-text { flex: 1; min-width: 0; }

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.89rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item svg { flex-shrink: 0; opacity: 0.9; }

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-item.active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 122, 26, 0.35);
}

.nav-item.active svg { opacity: 1; }

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3a4a80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

.store-name { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.2; }
.store-role { font-size: 0.72rem; color: var(--text-soft); }
.sidebar-footer svg { margin-left: auto; color: var(--text-soft); }

/* ---------- Main ---------- */
.main {
  margin-left: 232px;
  flex: 1;
  min-width: 0;
  padding: 22px 28px 40px;
  transition: margin-left 0.22s ease;
}

.main.expanded {
  margin-left: 0;
}

.main.sidebar-mini {
  margin-left: 72px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-toggle {
  display: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.date-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--text);
}

.badge-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* ---------- Grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat-card { padding: 18px 18px 16px; border-radius: 18px; }

.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.stat-value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.stat-sub { font-size: 0.74rem; font-weight: 600; }
.stat-sub.up { color: var(--green); }
.stat-sub.link { color: var(--blue); cursor: pointer; }
.stat-sub.warn { color: var(--red); }
.stat-sub.muted { color: var(--text-muted); }

/* ---------- Widget Tren Pendapatan (line chart custom, SVG) ---------- */
.trend-chart-wrap { padding-top: 16px; }
.trend-chart-empty {
  padding: 40px 10px;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.84rem;
}

/* Kartu "hero" — 1 kartu statistik paling penting ditonjolkan dengan
   gradient warna brand penuh, mengikuti gaya dashboard modern (kartu utama
   gradient, kartu lain tetap putih). */
.stat-card-hero {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(255, 122, 26, 0.28);
}
.stat-card-hero .stat-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.stat-card-hero .stat-label { color: rgba(255, 255, 255, 0.85); }
.stat-card-hero .stat-value { color: #fff; }
.stat-card-hero .stat-sub.muted,
.stat-card-hero .stat-sub.up,
.stat-card-hero .stat-sub.warn { color: rgba(255, 255, 255, 0.85); }

.row-3 {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}

.card-pad { padding: 18px 18px 16px; }

.card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card-title > a { flex-shrink: 0; }
.title-sub { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-muted); margin-top: 1px; }

.link-orange { color: var(--orange); font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.link-blue { color: var(--blue); font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; }

/* Donut */
.donut-wrap { display: flex; align-items: center; gap: 14px; }
.donut-svg { flex-shrink: 0; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend .amount { margin-left: auto; color: var(--text-muted); font-weight: 600; font-size: 0.78rem; }

.donut-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Activity */
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.activity-item { display: flex; gap: 10px; }
.activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.activity-title { font-size: 0.83rem; font-weight: 600; margin: 0 0 2px; }
.activity-desc { font-size: 0.76rem; color: var(--text-muted); }
.activity-time { font-size: 0.7rem; color: var(--text-soft); margin-left: auto; white-space: nowrap; padding-left: 8px; }
.activity-row-top { display: flex; align-items: flex-start; width: 100%; }

/* Attention */
.attn-list { display: flex; flex-direction: column; gap: 10px; }
.attn-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  border-radius: 10px;
}
.attn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attn-title { font-size: 0.83rem; font-weight: 700; margin: 0 0 1px; }
.attn-desc { font-size: 0.75rem; opacity: 0.85; }
.attn-orange { background: #fdf1e0; color: #8a5a12; }
.attn-blue { background: #e9f1ff; color: #1e4fa8; }
.attn-red { background: #fdeaea; color: #b3282d; }

/* Bottom row */
.row-2 {
  display: grid;
  grid-template-columns: 1.9fr 1.2fr;
  gap: 14px;
  align-items: start;
}

/* max-width WAJIB — sama seperti .table-scroll (lihat komentar di sana),
   tanpa ini wrapper ikut melebar mengikuti tabel di dalamnya alih-alih
   dibatasi lebar parent. */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: none;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
.order-id { color: var(--blue); font-weight: 600; }
.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.pill-orange { background: #fdf1e0; color: #b46a10; }
.pill-red { background: #fdeaea; color: #c62e33; }
.pill-green { background: #e6f7f0; color: #128a5c; }
.pill-blue { background: #e9f1ff; color: #2255c4; }
.pill-purple { background: #f1ecff; color: #6b46f0; }
.pill-gray { background: #eef0f5; color: #6b7280; }

.best-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.best-item { display: flex; align-items: center; gap: 12px; }
.best-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.best-name { font-size: 0.83rem; font-weight: 600; }
.best-sold { font-size: 0.74rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* Placeholder page */
.placeholder {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  color: var(--text-muted);
}
.placeholder-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #fdf1e0;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder h2 { color: var(--text); margin: 0; font-size: 1.05rem; }
.placeholder p { margin: 0; max-width: 360px; font-size: 0.88rem; line-height: 1.5; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 35, 0.45);
  z-index: 30;
}

/* =========================================================
   New topbar (search + hamburger + avatar)
   ========================================================= */
.topbar2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--bg);
  padding: 4px 0 12px;
}

.hamburger-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}

#mobileHomeBtn { display: none; }

/* Loading motion untuk tombol "Copy/Buat Link untuk Pelanggan" — selama
   proses pembuatan link berjalan (bisa perlu waktu beberapa detik kalau
   koneksi ke Google Sheets sedang lambat), tombol memudar dan menampilkan
   spinner berputar di tengahnya, supaya jelas terlihat sedang memproses
   (bukan diam tanpa indikasi apa pun yang terkesan "macet" atau tombolnya
   tidak merespons klik). Berlaku sama untuk versi topbar desktop maupun
   versi Mobile Home Screen. */
#topbarCustomerLinkBtn.btn-link-loading, #mhCopyLinkBtn.btn-link-loading {
  position: relative; color: transparent !important; pointer-events: none;
}
#topbarCustomerLinkBtn.btn-link-loading *, #mhCopyLinkBtn.btn-link-loading * { visibility: hidden; }
#topbarCustomerLinkBtn.btn-link-loading::after, #mhCopyLinkBtn.btn-link-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border: 2px solid rgba(0,0,0,0.15); border-top-color: var(--orange);
  border-radius: 50%; animation: btnLinkSpin 0.7s linear infinite;
}
@keyframes btnLinkSpin { to { transform: rotate(360deg); } }

/* ---------- Mobile Home Screen — halaman awal khusus mobile ---------- */
#mobileHomeScreen { display: none; }
.mh-topbar {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.mh-hero {
  background: radial-gradient(circle at 15% 0%, rgba(255,122,26,0.22) 0%, transparent 45%),
              radial-gradient(circle at 100% 100%, rgba(255,255,255,0.06) 0%, transparent 50%),
              linear-gradient(160deg, #0e1b3f 0%, #0a1330 100%);
  padding: 30px 20px 48px; text-align: center; color: #fff;
}
.mh-hero-logo {
  width: 66px; height: 66px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  background-size: cover; background-position: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.mh-hero h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.mh-hero p { margin: 0; font-size: 0.86rem; color: rgba(255,255,255,0.62); }
.mh-panel {
  background: var(--bg); border-radius: 28px 28px 0 0; margin-top: -28px;
  flex: 1; padding: 30px 18px 20px; position: relative; z-index: 1;
}
.mh-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 12px; }
.mh-menu-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer; background: none; border: none; padding: 0; font-family: inherit;
  transition: transform 0.12s ease;
}
.mh-menu-tile:active { transform: scale(0.92); }
.mh-menu-icon {
  width: 58px; height: 58px; border-radius: 19px;
  display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
  transition: box-shadow 0.15s ease;
}
.mh-menu-tile span { font-size: 0.72rem; font-weight: 700; color: var(--text); text-align: center; line-height: 1.2; }
.mh-footer {
  background: #0e1b3f; padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 860px) {
  body.mobile-home-active #mobileHomeScreen { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }
  body.mobile-home-active .main { display: none; }
  body.mobile-home-active .sidebar { transform: translateX(-100%); position: fixed; }
  /* Di mobile, sidebar buka-tutup diganti tombol "kembali ke beranda" — jadi
     hamburger lama disembunyikan dan tombol Home yang tampil sebagai gantinya. */
  #menuToggle { display: none; }
  #mobileHomeBtn { display: flex; }
  /* Transisi halus saat berpindah antara Beranda <-> halaman menu — supaya
     terasa seperti berganti "layar" pada aplikasi native, bukan konten
     yang tiba-tiba berganti tanpa jeda. */
  #mobileHomeScreen, .main { animation: mhFadeIn 0.22s ease; }
}
@keyframes mhFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.topbar-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  height: 40px;
  color: var(--text-muted);
}
.topbar-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-family: inherit;
}
.topbar-search input::placeholder { color: var(--text-soft); }

.topbar-date {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  height: 40px;
  font-size: 0.83rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-date-plain {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 6px;
  user-select: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 12px 4px 4px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text);
}
.topbar-user .avatar { width: 30px; height: 30px; background: var(--orange); font-size: 0.72rem; }
.topbar-user .who { line-height: 1.15; }
.topbar-user .who .name { font-size: 0.78rem; font-weight: 600; }
.topbar-user .who .role { font-size: 0.68rem; color: var(--text-muted); }
.topbar-user { border: 1px solid var(--border); font-family: inherit; }

/* ---------- User dropdown (topbar + sidebar) ---------- */
.user-menu-wrap { position: relative; }
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 270px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 15, 35, 0.16);
  z-index: 60;
  overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown.up { top: auto; bottom: calc(100% + 8px); }
.user-dropdown.left { left: 0; right: auto; }
.ud-head { display: flex; gap: 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border); }
.ud-head .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.ud-head .n { font-weight: 700; font-size: 0.85rem; }
.ud-head .e { font-size: 0.72rem; color: var(--text-muted); }
.ud-section-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-soft); text-transform: uppercase; padding: 10px 14px 4px; }
.ud-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ud-user-item:hover { background: var(--bg); }
.ud-user-item .avatar { width: 28px; height: 28px; font-size: 0.66rem; }
.ud-user-item .n { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.ud-user-item .r { font-size: 0.68rem; color: var(--text-muted); }
.ud-user-item.current { background: rgba(255, 122, 26, 0.12); }
.ud-user-item.current .n { font-weight: 500; }
.ud-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ud-foot a, .ud-foot button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ud-foot a:hover, .ud-foot button:hover { background: var(--bg); }
.ud-foot .danger { color: var(--red); }

/* ---------- Page header (title + subtitle + actions) ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-header .titles h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.page-header .titles p { margin: 0; color: var(--text-muted); font-size: 0.83rem; }
.page-header .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
}
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }
.btn-blue-outline { background: var(--card); color: var(--blue); border-color: var(--border); }
.btn-outline { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-green { background: var(--green); color: #fff; }
.btn-red-outline { background: #fff; color: var(--red); border-color: #f3caca; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-sm { padding: 7px 12px; font-size: 0.78rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
/* Wrapper opsional untuk sekelompok dropdown filter — "transparan" secara
   layout di desktop (anak-anaknya tetap jadi flex item .filter-bar
   langsung, TIDAK ada perubahan tampilan desktop sama sekali), tapi jadi
   grid 2 kolom rapi di mobile (lihat media query 860px). */
.filter-grid-2col { display: contents; }
.filter-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  height: 38px;
  color: var(--text-muted);
}
.filter-search input { border: none; outline: none; background: transparent; font-size: 0.82rem; flex: 1; color: var(--text); font-family: inherit; }
.filter-select {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  height: 38px;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.filter-select svg { color: var(--text-muted); }

/* ---------- Tabs (status counters) ---------- */
.status-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.status-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-tab .count { font-weight: 700; }
.status-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- Split layout (list + detail) ---------- */
.split-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}
/* min-width:0 WAJIB di sini — .split-layout adalah grid container, dan
   grid item (sama seperti flex item) secara BAWAAN punya min-width:auto
   (bukan 0), artinya tidak bisa menyusut lebih kecil dari konten
   intrinsiknya. Kalau di dalam salah satu anak (mis. #poDetailContainer)
   ada tabel dengan min-width tetap (560px untuk ringkasan PO), anak itu
   tidak akan pernah bisa menyusut di bawah itu — dan ukuran itu "bocor"
   ke .split-layout sendiri, lalu ke seluruh halaman, menyebabkan geser
   horizontal yang tidak diinginkan di layar sempit. min-width:0 di sini
   memaksa grid item benar-benar mengikuti lebar kolom yang dialokasikan,
   sehingga overflow-x:auto di .table-scroll/.table-wrap di dalamnya baru
   benar-benar bisa "aktif" men-scroll konten sendiri, alih-alih mendorong
   seluruh layout melebar. */
.split-layout > * { min-width: 0; }
.split-list { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Generic list-detail (table page + right drawer) ---------- */
.list-detail-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
/* min-width:0 WAJIB — sama persis alasannya dengan .split-layout (lihat
   komentar di sana): grid item secara bawaan punya min-width:auto, jadi
   kalau di dalam list-panel ada tabel lebar dengan min-width tetap,
   list-panel itu (dan seluruh grid ini) akan ikut melebar mengikuti
   tabel tersebut alih-alih dibatasi lebar kolom yang dialokasikan grid —
   inilah sebabnya menu Order/Produk/Pembayaran/Customer/Pengguna/Kemasan
   masih terlihat "belum sejajar tepi kanannya" meski PO sudah diperbaiki
   duluan (PO memakai .split-layout, class yang berbeda dari ini).
*/
.list-detail-layout > * { min-width: 0; }
.list-detail-layout.no-detail { grid-template-columns: 1fr; }
#orderLayout { grid-template-columns: 1fr 280px; }
#produkLayout, #kemasanLayout, #pembayaranLayout, #customerLayout, #penggunaLayout { grid-template-columns: 1fr 300px; }
#produkLayout .detail-panel, #kemasanLayout .detail-panel, #customerLayout .detail-panel, #penggunaLayout .detail-panel {
  padding: 16px;
}
#produkLayout .btn-block, #kemasanLayout .btn-block, #customerLayout .detail-panel .btn-block, #penggunaLayout .detail-panel .btn-block {
  font-size: 0.78rem;
  padding: 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pembayaranLayout table { font-size: 0.76rem; }
#pembayaranLayout th, #pembayaranLayout td { padding: 8px 6px; }
#orderLayout table { font-size: 0.73rem; table-layout: fixed; width: 100%; }
#orderLayout th, #orderLayout td { padding: 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#orderLayout .truncate-cell { max-width: none; }
#orderLayout .pill { font-size: 0.68rem; padding: 3px 7px; }
#orderLayout .action-icons { gap: 6px; }
#orderLayout .action-icons a { width: 24px; height: 24px; }
#orderLayout th:nth-child(1), #orderLayout td:nth-child(1) { width: 26px; }
#orderLayout th:nth-child(2), #orderLayout td:nth-child(2) { width: 50px; }
#orderLayout th:nth-child(3), #orderLayout td:nth-child(3) { width: 82px; }
#orderLayout th:nth-child(4), #orderLayout td:nth-child(4) { width: 70px; }
#orderLayout th:nth-child(5), #orderLayout td:nth-child(5) { width: 80px; }
#orderLayout th:nth-child(6), #orderLayout td:nth-child(6) { width: 62px; }
#orderLayout th:nth-child(7), #orderLayout td:nth-child(7) { width: 62px; }
#orderLayout th:nth-child(8), #orderLayout td:nth-child(8) { width: 62px; }
#orderLayout th:nth-child(9), #orderLayout td:nth-child(9) { width: 72px; }
#orderLayout th:nth-child(10), #orderLayout td:nth-child(10) { width: 78px; }
#orderLayout th:nth-child(11), #orderLayout td:nth-child(11) { width: 78px; }

.detail-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

@media (max-width: 860px) {
  /* Panel detail (Order/Produk/Kemasan/Pembayaran/Customer/Pengguna) di
     mobile TIDAK stack permanen di bawah tabel — disembunyikan sampai
     benar-benar diminta (klik ikon mata / baris), lalu tampil sebagai
     overlay penuh layar yang bisa ditutup dengan tombol "×". Lihat
     MutationObserver generik di app.js yang mendeteksi kapan panel ini
     terisi konten sungguhan, terlepas dari menu mana pun dan cara apa pun
     yang memicunya. */
  .detail-panel { display: none; }
  .detail-panel.mobile-detail-open {
    display: block; position: fixed; inset: 0; z-index: 300;
    border-radius: 0; overflow-y: auto; padding: 60px 16px 24px;
  }
  #mobileDetailCloseBtn { display: none; }
  body.mobile-detail-active #mobileDetailCloseBtn {
    display: flex; position: fixed; top: 14px; right: 14px; z-index: 301;
    width: 36px; height: 36px; border-radius: 50%; background: var(--text);
    color: var(--card); border: none; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
}
.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.detail-panel-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.detail-close {
  width: 26px; height: 26px; border-radius: 8px; border: none; background: var(--bg);
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.detail-section { margin-bottom: 16px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 10px; }

.info-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 7px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text-muted); }
.info-row .value { font-weight: 600; text-align: right; }
.info-row .value.pos { color: var(--green); }
.info-row .value.neg { color: var(--red); }

.meta-list { display: flex; flex-direction: column; gap: 9px; }
.meta-item { display: flex; gap: 9px; font-size: 0.8rem; }
.meta-item svg { color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.meta-item .meta-label { color: var(--text-muted); font-size: 0.72rem; }
.meta-item .meta-value { font-weight: 600; }

.mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-stat {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.mini-stat .v { font-size: 1.05rem; font-weight: 700; }
.mini-stat .l { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

.progress-track {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-fill { height: 100%; border-radius: 999px; }

/* ---------- Data table page shell ---------- */
.table-card { padding: 0; overflow: hidden; }
.table-card-head { padding: 16px 18px 0; }
/* max-width WAJIB di sini — tanpa ini, wrapper akan ikut melebar mengikuti
   tabel di dalamnya (yang sering punya min-width tetap agar kolom tidak
   terlalu sempit di desktop) alih-alih dibatasi oleh parent-nya. Akibatnya
   overflow-x:auto tidak pernah sempat "aktif" karena wrapper itu sendiri
   sudah lebih lebar dari layar — seluruh card dan bahkan seluruh halaman
   ikut terdorong melebar, menyebabkan geser horizontal yang tidak
   diinginkan di layar sempit (mobile). */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
  font-size: 0.78rem; color: var(--text); cursor: pointer; font-family: inherit;
}
.pager button.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.pager button.nav { color: var(--text-muted); border-color: transparent; background: transparent; }

table td, table th { vertical-align: middle; }
.cell-primary { display: flex; align-items: center; gap: 10px; }
.cell-primary img, .cell-primary .thumb {
  width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: #eef0f5;
}
.cell-primary .name { font-weight: 600; font-size: 0.82rem; }
.cell-primary .sub { font-size: 0.72rem; color: var(--text-muted); }

.avatar-xs {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

.action-icons { display: flex; align-items: center; gap: 10px; }
.action-icons button, .action-icons a {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);
}
.link-cell { color: var(--blue); font-weight: 600; cursor: pointer; }
.truncate-cell {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.row-more-wrap { position: relative; display: inline-block; }
.row-more-btn {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); font-family: inherit;
}
.row-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(10, 15, 35, 0.15);
  z-index: 50;
  padding: 6px;
}
.row-more-menu.open { display: block; }
.row-more-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.row-more-menu button:hover { background: var(--bg); }
.row-more-menu button.danger { color: var(--red); }

/* ---------- PO cards (list) ---------- */
.po-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.po-card.active { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.po-card:hover { border-color: #d9ddea; }
.po-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.po-date-block { display: flex; gap: 12px; align-items: baseline; }
.po-date-block .day { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.po-date-block .month-year { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }
.po-date-block .weekday { font-size: 0.72rem; color: var(--text-muted); }
.po-summary { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.po-summary b { color: var(--text); font-weight: 700; }
.po-substats { display: flex; gap: 18px; margin-bottom: 8px; }
.po-substats .item { font-size: 0.72rem; color: var(--text-muted); }
.po-substats .item b { display: block; font-size: 0.9rem; color: var(--text); font-weight: 700; }
.po-capacity { margin-bottom: 10px; }
.po-capacity-top { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 5px; }
.po-capacity-top b { font-size: 0.78rem; }
.po-deadline { font-size: 0.72rem; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 8px; }

.keterangan-box { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.keterangan-item { display: flex; gap: 10px; font-size: 0.76rem; }
.keterangan-item svg { flex-shrink: 0; margin-top: 2px; }
.keterangan-item b { display: block; font-size: 0.8rem; margin-bottom: 2px; }
.keterangan-item span { color: var(--text-muted); }

/* ---------- PO capacity progress list ---------- */
.capacity-list { display: flex; flex-direction: column; gap: 12px; }
.capacity-row { display: grid; grid-template-columns: 140px 1fr 90px 100px; align-items: center; gap: 12px; }
.capacity-name { font-size: 0.82rem; font-weight: 600; }
.capacity-bar-track { background: #eef0f5; border-radius: 999px; height: 8px; overflow: hidden; }
.capacity-bar-fill { height: 100%; border-radius: 999px; }
.capacity-count { font-size: 0.76rem; color: var(--text-muted); text-align: right; white-space: nowrap; }

/* Varian ringkas untuk konteks SEMPIT (fulfillment-group di Rekap, cuma
   setengah lebar halaman) — grid_template kolom fixed .capacity-row biasa
   (140px+90px+100px) tidak muat dan bikin layout berantakan di sini. */
.capacity-row-compact {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 5px 0;
}
.capacity-row-compact .capacity-name { font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
.capacity-row-compact .capacity-bar-track { display: none; }
.capacity-row-compact .capacity-count { font-size: 0.76rem; font-weight: 700; }
.rentang-waktu-progress-title {
  font-size: 0.72rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.02em;
  margin: 10px 0 2px; padding-top: 10px; border-top: 1px dashed var(--border);
}

/* ---------- Rekap: fulfillment status ---------- */
.fulfillment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fulfillment-group { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.fulfillment-group-label { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
.fulfillment-overall { border-top: 1px solid var(--border); padding-top: 14px; }

/* ---------- Actionable alert banner ---------- */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf1e0;
  border: 1px solid #f3d9ad;
  color: #8a5a12;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.8rem;
}
.alert-banner svg { flex-shrink: 0; color: #e07a1f; }

/* ---------- Settings ---------- */
.settings-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
}
.settings-tab {
  background: none; border: none; cursor: pointer; padding: 0 2px 12px; font-size: 0.85rem;
  font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; font-family: inherit;
}
.settings-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 14px; align-items: start; margin-bottom: 14px; }
.field-group { margin-bottom: 14px; }
.field-group:last-child { margin-bottom: 0; }
.field-label { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block; }
.password-field-wrap { position: relative; }
.password-field-wrap .field-input { padding-right: 40px; width: 100%; }
.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.password-toggle-btn:hover { color: var(--text-muted); }

.field-select, .field-input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: 0.82rem;
  color: var(--text); font-family: inherit; background: var(--card);
}
.field-input.field-error { border-color: var(--red); background: #fff8f8; }

/* ---------- Login screen ---------- */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--navy) 0%, #0a1330 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.login-card {
  background: var(--card);
  border-radius: 18px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.login-card h1 { font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; }
.login-card p#loginStoreTagline { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.login-card .field-group { text-align: left; }

.upload-preview-box {
  height: 160px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.78rem;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--bg);
}
.upload-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.field-row { display: flex; gap: 10px; }
.field-row > div { flex: 1; }

.toggle-switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #d5d9e3; border-radius: 999px; transition: 0.15s; cursor: pointer; }
.toggle-slider::before { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; }
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(17px); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.toggle-row:last-child { margin-bottom: 0; }
.toggle-row .t { font-size: 0.82rem; font-weight: 500; }

.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; margin-bottom: 10px; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--orange); }

.info-box {
  background: rgba(47, 111, 237, 0.08);
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: var(--radius);
  padding: 16px;
}
.info-box h4 { margin: 0 0 10px; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
.info-box a { display: flex; align-items: center; gap: 8px; color: var(--blue); text-decoration: none; font-size: 0.8rem; font-weight: 600; padding: 6px 0; }

.sysinfo-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 6px 0; color: var(--text-muted); }
.sysinfo-row b { color: var(--text); font-weight: 600; }

.color-swatches { display: flex; gap: 8px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.swatch.selected { border-color: var(--text); }

.radio-row { display: flex; gap: 18px; align-items: center; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; cursor: pointer; }

/* ---------- Ringkasan cepat strip ---------- */
.quick-strip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-strip .item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 140px; }
.quick-strip .qicon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-strip .qv { font-weight: 700; font-size: 0.95rem; }
.quick-strip .ql { font-size: 0.68rem; color: var(--text-muted); }

.note-item { display: flex; gap: 9px; font-size: 0.78rem; margin-bottom: 12px; }
.note-item:last-child { margin-bottom: 0; }
.note-item svg { flex-shrink: 0; margin-top: 1px; }
.note-item .muted { color: var(--text-muted); }

.wa-icon { color: #25d366; }
.wa-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e9fbf1;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.wa-icon-btn:hover { background: #d3f7e0; transform: scale(1.05); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 35, 0.5);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(10, 15, 35, 0.3);
  margin: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.modal-body { padding: 20px; max-height: 65vh; overflow-y: auto; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.product-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.product-pick-row:last-child { border-bottom: none; }
.product-pick-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.product-pick-row .pname { flex: 1; font-size: 0.83rem; font-weight: 600; }
.product-pick-row input.field-input { width: 90px; padding: 6px 10px; font-size: 0.78rem; }

.checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.checkbox-card input { width: 16px; height: 16px; accent-color: var(--orange); margin-top: 2px; flex-shrink: 0; }
.checkbox-card b { display: block; font-size: 0.83rem; margin-bottom: 2px; }
.checkbox-card span { font-size: 0.74rem; color: var(--text-muted); }

.paymethod-detail {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 4px 0 10px 26px;
}

.color-combo-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-combo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  flex: 1;
  min-width: 90px;
}
.color-combo input { position: absolute; opacity: 0; pointer-events: none; }
.color-combo.selected { border-color: var(--orange); background: rgba(255, 122, 26, 0.1); }
.combo-dots { display: flex; }
.combo-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.combo-dots span:last-child { margin-left: -8px; }
.combo-label { font-size: 0.74rem; font-weight: 600; text-align: center; }

/* ---------- Ongkir rows ---------- */
.ongkir-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px;
  gap: 10px;
  margin-bottom: 6px;
}
.ongkir-head span { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.ongkir-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}
.ongkir-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--red);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ongkir-remove:hover { background: #fdeaea; }

/* ---------- Map picker ---------- */
#mapPicker {
  height: 360px;
  width: 100%;
  background: #eef0f5;
}
.map-fallback {
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 20px;
  text-align: center;
}

.map-search-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 0.79rem;
  font-family: inherit;
  color: var(--text);
}
.map-search-item:last-child { border-bottom: none; }
.map-search-item:hover { background: var(--bg); }

.empty-state-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 20px;
  color: var(--text-soft);
  gap: 10px;
}
.empty-state-mini svg { opacity: 0.5; }
.empty-state-mini p { font-size: 0.82rem; margin: 0; max-width: 220px; }

.empty-state-row td {
  text-align: center;
  padding: 48px 20px !important;
  color: var(--text-soft);
}
.empty-state-row .es-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  color: var(--text-soft);
}
.empty-state-row .es-title { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state-row .es-sub { font-size: 0.8rem; color: var(--text-muted); }

.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 122, 26, 0.12);
  border: 1px solid #ffdcae;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 18px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #8a5a12;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .row-3 { grid-template-columns: 1fr 1fr; }
  .row-3 > :nth-child(3) { grid-column: span 2; }
}

@media (max-width: 860px) {
  .sidebar {
    transform: translateX(-100%);
    width: 240px;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,0.2); }
  .main { margin-left: 0; padding: 16px 16px 32px; }
  .menu-toggle { display: flex; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* !important WAJIB di sini — beberapa pemanggilan .row-3 (mis. detail PO,
     "Payment Summary" + "Pickup Method Summary" berdampingan) menulis
     grid-template-columns langsung sebagai INLINE STYLE di HTML-nya, yang
     specificity-nya SELALU menang atas aturan class biasa di media query
     manapun — tanpa !important, dua kartu itu akan tetap terpaksa
     berdampingan sempit di layar HP dan kontennya terpotong. */
  .row-3 { grid-template-columns: 1fr !important; }
  .row-3 > :nth-child(3) { grid-column: span 1; }
  /* Sama halnya untuk grid mini-stat 4 kolom di "PO Fill Progress" (juga
     inline style) — dipadatkan jadi 2 kolom di HP. */
  .mini-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .row-2 { grid-template-columns: 1fr; }
  .sidebar-backdrop.show { display: block; }
  .date-picker span { display: none; }
  .page-title { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .card-pad { padding: 15px; }
}

.stat-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1180px) {
  .split-layout { grid-template-columns: 1fr; }
  /* PENTING: selector di sini HARUS menyertakan id (#orderLayout, dst) yang
     sama persis dengan aturan desktop-nya (baris ~862) — kalau cuma pakai
     class ".list-detail-layout" saja, ATURAN INI KALAH SPECIFICITY dari
     "#orderLayout { grid-template-columns: 1fr 280px; }" (ID selector selalu
     menang atas class selector, TERLEPAS dari urutan penulisan CSS atau
     berada di dalam media query manapun) — akibatnya tabel di mobile tetap
     memakai kolom lebar desktop dan terpotong parah. Bug ini pernah lolos
     tidak terdeteksi karena pengujian sebelumnya hanya memeriksa panel
     detail itu sendiri, bukan lebar kolom list di sebelahnya.
  */
  .list-detail-layout,
  #orderLayout,
  #produkLayout, #kemasanLayout, #pembayaranLayout, #customerLayout, #penggunaLayout {
    grid-template-columns: 1fr !important;
  }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid > :nth-child(3) { grid-column: span 2; }
  .stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .topbar-date span { display: inline; }
  .topbar-user .who { display: none; }
  /* Padding kanan diperbesar khusus mobile — begitu nama+role (.who)
     disembunyikan di atas, chevron ikon jadi terasa terlalu "mepet" ke
     tepi kanan tombol (kesan terpotong), padahal secara teknis sudah
     dalam batas tombolnya. */
  .topbar-user { padding: 4px 4px 4px 4px; gap: 6px; }
  .page-header { flex-direction: column; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid > :nth-child(3) { grid-column: span 1; }
  .quick-strip { flex-direction: column; }
  .stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
  /* Dashboard: kolom Pembayaran/Pengambilan/Status di tabel "Order
     Terbaru" disembunyikan di mobile — cukup Order ID, Pelanggan, PO,
     Total, supaya tabel tidak melebar sampai perlu geser ke samping. */
  .dash-col-hide-mobile { display: none; }
  /* Cegah OVERFLOW HORIZONTAL secara menyeluruh di seluruh halaman mobile —
     apa pun sisa lebar berlebih dari elemen anak (tabel lebar, dsb) akan
     tersembunyi/scroll SENDIRI di dalam wrapper-nya (.table-wrap sudah
     overflow-x:auto), BUKAN membuat seluruh halaman bisa digeser ke
     samping. */
  body, .main, .container { overflow-x: hidden; max-width: 100vw; }
  /* Menu PO: kartu-kartu PO diganti dropdown saja di mobile — lebih ringkas
     daripada scroll panjang menelusuri kartu satu-per-satu di layar sempit. */
  .po-mobile-dropdown { display: block !important; }
  #poCardsContainer { display: none !important; }
  /* Filter bar: search tetap full-width sendiri, dropdown-dropdown di
     dalam .filter-grid-2col dipaksa jadi grid 2 kolom rapi (bukan flex-wrap
     bebas yang bisa jadi banyak baris tak beraturan tergantung panjang
     teks tiap opsi), tombol Reset tetap baris sendiri di bawahnya. */
  .filter-bar { display: flex; flex-direction: column; }
  .filter-grid-2col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .filter-grid-2col > select, .filter-grid-2col > button, .filter-grid-2col > .filter-select { max-width: none !important; width: 100%; }
  /* Info box grid: 4 kotak (Kemasan) & 5 kotak (Rekap) & 6 kotak
     (Pembayaran) semua dipadatkan jadi maks 3 kolom di mobile — otomatis
     jadi 2 baris tergantung jumlah kotaknya, bukan 1 baris sangat sempit
     berisi semua kotak sekaligus. */
  #kemasanStatGrid { grid-template-columns: repeat(2, 1fr) !important; }
  #rekapStatGrid, #pembayaranStatGrid { grid-template-columns: repeat(3, 1fr) !important; }
  #rekapStatGrid .stat-value, #pembayaranStatGrid .stat-value { font-size: 0.92rem !important; }
  /* min-width:0 WAJIB — sama seperti bug grid/flex lain yang sudah
     ditemukan sebelumnya: kotak dengan label panjang (mis. "Outstanding
     Balance") tidak bisa menyusut lebih kecil dari teks labelnya sendiri,
     sehingga kotak itu melebar melewati kolom grid yang dialokasikan dan
     tepi kanannya jadi tidak sejajar dengan kotak lain. */
  #kemasanStatGrid > *, #rekapStatGrid > *, #pembayaranStatGrid > * {
    min-width: 0; overflow-wrap: break-word;
  }
  /* Rekap: filter bulan+tahun tetap 1 baris berdampingan (tidak ikut wrap
     terpisah), dropdown PO baris sendiri di bawahnya, full-width. */
  .rekap-filter-bulan-tahun { flex-wrap: nowrap; }
  .rekap-filter-bulan-tahun > select { flex: 1; max-width: none !important; }
  #rekapPOSelect { width: 100%; margin-top: 8px; }
  /* Kolom "Aksi" (termasuk tombol lihat bukti transfer) di tabel Order
     dibuat STICKY di sisi kanan — supaya selalu terlihat berapa pun jauh
     tabel di-scroll ke samping (tabel TETAP horizontal di mobile, sesuai
     permintaan — bukan diubah jadi kartu vertikal). */
  #orderLayout table td:last-child, #orderLayout table th:last-child,
  #pembayaranLayout table td:last-child, #pembayaranLayout table th:last-child {
    position: sticky; right: 0; background: var(--card); box-shadow: -4px 0 8px -4px rgba(0,0,0,0.08);
  }
  /* Tabel TETAP horizontal di mobile (bukan kartu vertikal) — dipadatkan
     dengan padding & font lebih kecil, dan kolom-kolom yang kurang krusial
     disembunyikan lewat class .col-hide-mobile di bawah, supaya SISA
     kolom (termasuk kolom Aksi) muat terlihat semua tanpa perlu digeser. */
  .list-detail-layout table, .split-layout table {
    font-size: 0.72rem;
  }
  .list-detail-layout th, .list-detail-layout td,
  .split-layout th, .split-layout td {
    padding: 6px 5px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    overflow-wrap: break-word; word-break: normal;
  }
  .col-hide-mobile { display: none !important; }
  /* Header kolom yang teksnya cukup panjang tetap pakai versi singkat
     (data-mobile-label) di mobile untuk kerapian, meski sekarang kolom
     tidak lagi dipadatkan sangat sempit. */
  .list-detail-layout th[data-mobile-label], .split-layout th[data-mobile-label] {
    font-size: 0;
  }
  .list-detail-layout th[data-mobile-label]::before, .split-layout th[data-mobile-label]::before {
    content: attr(data-mobile-label); font-size: 0.72rem;
  }
  /* Tabel TIDAK dipaksa menyempit lagi — diberi min-width nyaman supaya
     tiap kolom (termasuk Aksi, yang sekarang di posisi PALING KIRI —
     lihat moveActionColumnFirst() di app.js) punya ruang cukup. Scroll
     ke samping terjadi DI DALAM kartu saja lewat .table-scroll (yang
     sudah overflow-x:auto + max-width:100%), sama seperti kartu ringkasan
     PO di menu PO — bukan seluruh halaman yang ikut bergeser.
  */
  #orderLayout table { min-width: 640px; table-layout: auto !important; width: auto !important; }
  #pembayaranLayout table { min-width: 560px; }
  #produkLayout table { min-width: 460px; }
  #customerLayout table { min-width: 460px; }
  #penggunaLayout table { min-width: 520px; }
  #kemasanLayout table { min-width: 460px; }

  /* Ikon aksi diperbesar (bukan diperkecil) — disusun sebagai grid supaya
     kolom Aksi tetap ringkas secara lebar walau ikonnya lebih besar. */
  .action-icons.action-icons-grid-2x2 {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: fit-content;
  }
  .action-icons.action-icons-grid-1col {
    display: grid; grid-template-columns: 1fr; gap: 4px; width: fit-content;
  }
  .list-detail-layout .action-icons a, .split-layout .action-icons a {
    width: 26px; height: 26px;
  }
  .list-detail-layout .action-icons svg, .split-layout .action-icons svg {
    width: 14px; height: 14px;
  }
  /* Kolom Aksi (sekarang di posisi pertama, lihat moveActionColumnFirst di
     app.js) diberi lebar tetap yang cukup untuk grid 2 kolom ikon 26px —
     grid 1 kolom otomatis lebih sempit karena kontennya sendiri sempit. */
  .aksi-col-mobile { width: 68px !important; min-width: 68px; }
}

@media (max-width: 640px) {
  .topbar-date, .topbar-date-plain { display: none; }
  .filter-bar { flex-direction: column; }
  .filter-select, .filter-search { width: 100%; }
  .ongkir-head { display: none; }
  .ongkir-row { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c d"; }
  .capacity-row { grid-template-columns: 1fr; gap: 6px; }
  .capacity-count { text-align: left; }
  .fulfillment-grid { grid-template-columns: 1fr; }
}

/* ---------- Pengaturan Tampilan: Tema Gelap ---------- */
body.theme-dark {
  --bg: #10131f;
  --card: #1a1e2e;
  --border: #2a2f42;
  --text: #eef0f6;
  --text-muted: #9aa1b9;
  --text-soft: #6b7290;
}
body.theme-dark .login-screen { background: #0a0c14; }
body.theme-dark .sidebar { background: #0a0c14; }

/* ---------- Pengaturan Tampilan: Kombinasi Warna ---------- */
/* Sidebar/login selalu pakai teks putih, jadi --navy harus tetap gelap & pekat agar kontras terjaga */
body.theme-blossom { --orange: #EC4899; --orange-dark: #db2777; --navy: #4a1942; --navy-2: #5b2150; --orange-glow: rgba(236, 72, 153, 0.18); }
body.theme-earth-tone { --orange: #C08552; --orange-dark: #9c6a3f; --navy: #2d3320; --navy-2: #33392a; --orange-glow: rgba(192, 133, 82, 0.18); }

@keyframes spin-sync {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Toast notifikasi global ---------- */
.global-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: min(90vw, 420px);
}
.global-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.global-toast.error { background: var(--red); }
.global-toast svg { flex-shrink: 0; }