/* ===================== DASHBOARD — match reference mockup 1672px =====================
   Semua ukuran desktop memakai --u (1 design px). --u menyusut proporsional
   di layar lebih kecil, berhenti di 0.88px agar teks tetap terbaca.
   ================================================================================= */
:root {
  --dash-bg: #fdfbfe;
  --dash-ink: #2c1a3d;
  --dash-mut: #7b6890;
  --dash-line: #f1e7f9;
  --dash-pur: #6d1b8f;
  --dash-pink: #ec2a86;
}
.app { --u: clamp(0.74px, 0.05981vw, 1px); }

html, body { background: var(--dash-bg); overflow-x: hidden; }
.app, .main, .content, .dash-wrap { min-width: 0; }
.dash-wrap { width: 100%; }
.m-gudang { display: none; }
.content { background: var(--dash-bg); }

/* ---------- sidebar ---------- */
.sidebar {
  width: calc(287 * var(--u)) !important; flex: 0 0 calc(287 * var(--u));
  padding: calc(10 * var(--u)) calc(15 * var(--u)) 0 !important;
  background: linear-gradient(180deg, #4e0b6b 0%, #3f0858 42%, #470a62 68%, #3d0752 100%) !important;
  display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
  box-sizing: border-box; border-right: 0 !important; overflow: hidden;
}
.brand-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u)) !important;
  text-decoration: none; flex: 0 0 auto; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
.brand-card img { width: calc(84 * var(--u)); height: auto; object-fit: contain; filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.28)); }
.brand-card .bt { color: #fff !important; font-size: calc(19 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -.3px; }
.brand-card .bs {
  grid-column: 1 / -1; color: #e3c8f0 !important; font-size: calc(12 * var(--u));
  margin-top: calc(8 * var(--u)); letter-spacing: .1px; font-weight: 500;
}

.side-menu { flex: 0 0 auto; min-height: 0; overflow: visible; padding: calc(22 * var(--u)) 0 0; }
.side-menu::-webkit-scrollbar { width: 0; }
.side-label { display: none !important; }
.side-link {
  height: calc(42 * var(--u)); padding: 0 calc(17 * var(--u)); margin-bottom: calc(2 * var(--u)); border-radius: calc(9 * var(--u));
  display: flex; align-items: center; gap: calc(18 * var(--u)); border: 0 !important;
  color: #f1ddfa !important; font-size: calc(16.5 * var(--u)) !important; font-weight: 600;
  text-decoration: none; transition: .15s; background: transparent !important; letter-spacing: -.1px;
}
.side-link > svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: 0 0 auto; color: #ecd2f8; }
.side-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; }
.side-link.on, .side-link.active {
  background: linear-gradient(90deg, #ee1f7c 0%, #f75aa4 100%) !important;
  color: #fff !important; font-weight: 700;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(236, 32, 128, .36);
}
.side-link.on svg, .side-link.active svg { color: #fff; }
.side-chev { margin-left: auto; opacity: .75; width: calc(14 * var(--u)) !important; height: calc(14 * var(--u)) !important; }

/* pemisah sebelum Laporan */
.side-parent[data-menu="lap-gudang"] { position: relative; margin-top: calc(10 * var(--u)); }
.side-parent[data-menu="lap-gudang"]::before {
  content: ''; position: absolute; left: calc(4 * var(--u)); right: calc(4 * var(--u));
  top: calc(-8 * var(--u)); height: 1px; background: rgba(255,255,255,.18);
}

/* dekorasi bawah sidebar */
.side-deco { flex: 1 1 auto; min-height: calc(48 * var(--u)); margin: auto calc(-15 * var(--u)) 0; overflow: hidden; line-height: 0; display: flex; align-items: flex-end; }
.side-deco img {
  display: block; width: 100%; height: auto; max-height: 100%; object-fit: cover; object-position: bottom; flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.45) calc(38 * var(--u)), #000 calc(120 * var(--u)), #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.45) calc(38 * var(--u)), #000 calc(120 * var(--u)), #000 100%);
}

/* ---------- topbar ---------- */
.topbar {
  height: calc(62 * var(--u)) !important; padding: 0 calc(16 * var(--u)) !important; gap: calc(12 * var(--u)) !important;
  background: #fff !important; border-bottom: 1px solid #f4edfa !important;
  backdrop-filter: none !important; position: sticky; top: 0; z-index: 30;
}
.top-menu { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: 0; background: none; color: #2c1a3d; display: grid; place-items: center; margin-left: calc(-4 * var(--u)); }
.top-menu svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.gudang-pick, .range-pick {
  height: calc(42 * var(--u)); border: 1px solid #eee1f7 !important; border-radius: calc(10 * var(--u)) !important;
  background: #fff !important; padding: 0 calc(14 * var(--u)) !important; gap: calc(9 * var(--u)) !important;
  font-size: calc(15 * var(--u)) !important; font-weight: 700; color: #2f2140 !important;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(76, 20, 105, .05);
}
.gudang-pick { min-width: calc(318 * var(--u)); }
.range-pick { min-width: calc(286 * var(--u)); }
.gudang-pick > svg, .range-pick > svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #7c2ba6; }
.gudang-pick > svg:last-child, .range-pick > svg:last-child { width: calc(13 * var(--u)) !important; height: calc(13 * var(--u)) !important; color: #9a89ab; }
.top-right { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.icon-btn { position: relative; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); border: 0; background: none; color: #33204a; display: grid; place-items: center; }
.icon-btn svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.icon-btn .dot {
  position: absolute; top: calc(-4 * var(--u)); right: calc(-2 * var(--u)); min-width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: 0 calc(4 * var(--u));
  border-radius: 999px; background: #ef4444; color: #fff; font-size: calc(11 * var(--u)); font-weight: 700;
  display: grid; place-items: center; border: calc(2 * var(--u)) solid #fff;
}
.user-chip { display: flex; align-items: center; gap: calc(11 * var(--u)); text-decoration: none; color: inherit; }
.avatar {
  width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #8b2bb8, #c026d3); color: #fff; font-weight: 800; font-size: calc(15 * var(--u));
}
.avatar svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.user-chip .un { font-size: calc(14.5 * var(--u)); font-weight: 700; color: #2c1a3d; line-height: 1.2; }
.user-chip .ur { font-size: calc(12 * var(--u)); color: #8b7aa0; margin-top: calc(1 * var(--u)); }
.user-chip > svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #8b7aa0; margin-left: calc(2 * var(--u)); }

/* ---------- content ---------- */
.content { padding: 0 calc(16 * var(--u)) calc(34 * var(--u)) !important; }
.dash-wrap { max-width: none; margin: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  height: calc(132 * var(--u)) !important; min-height: 0 !important;
  padding: 0 0 0 calc(9 * var(--u)) !important;
  background: linear-gradient(90deg, #fdfbfe 42%, #fbf6fe 68%, #f9f2fd 100%) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.hero::before, .hero::after { display: none !important; }
.hero-tx { position: relative; z-index: 4; max-width: calc(560 * var(--u)); }
.hero h1 { font-size: calc(50 * var(--u)) !important; line-height: 1.02; font-weight: 800; color: #4a0a5e !important; letter-spacing: calc(-1.5 * var(--u)); margin: 0; }
.hero p { margin-top: calc(7 * var(--u)) !important; font-size: calc(20 * var(--u)) !important; color: #6a4a7c !important; font-weight: 500; letter-spacing: -.2px; }
.hero-img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 62%; z-index: 2; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%); }

/* ---------- stat cards ---------- */
.stat::before, .stat::after { display: none !important; }
.stats6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(13 * var(--u)); margin-top: calc(6 * var(--u)); }
.stat {
  display: block !important;
  background: #fff; border: 1px solid #f2e9f9; border-radius: calc(15 * var(--u));
  padding: calc(17 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u)); min-height: calc(146 * var(--u)); min-width: 0;
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(80, 24, 110, .06);
}
.st-top { display: flex; align-items: center; gap: calc(9 * var(--u)); min-width: 0; }
.stat, .st-top, .st-lb, .st-v, .st-tr { min-width: 0; }
.st-ic { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(12 * var(--u)); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.st-ic svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.st-lb { font-size: calc(15 * var(--u)); font-weight: 700; color: #3a2a50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.35px; }
.st-v { font-size: calc(34 * var(--u)); font-weight: 800; color: #231432; letter-spacing: calc(-1 * var(--u)); margin-top: calc(9 * var(--u)); line-height: 1.08; }
.st-tr { font-size: calc(13.5 * var(--u)); font-weight: 600; margin-top: calc(7 * var(--u)); color: #7b6890; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tr b { font-weight: 700; }
.st-tr.up b { color: #16a34a; }
.st-tr.down b { color: #e11d48; }
.st-tr.flat b { color: #8b7aa0; }
.s-violet .st-ic { background: linear-gradient(145deg, #a855f7, #7e22ce); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(126, 34, 206, .28); }
.s-green .st-ic { background: linear-gradient(145deg, #34d399, #15803d); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(21, 128, 61, .26); }
.s-blue .st-ic { background: linear-gradient(145deg, #60a5fa, #1d4ed8); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(29, 78, 216, .26); }
.s-pink .st-ic { background: linear-gradient(145deg, #f472b6, #db2777); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(219, 39, 119, .26); }
.s-orange .st-ic { background: linear-gradient(145deg, #fbbf24, #f97316); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(249, 115, 22, .28); }
.s-red .st-ic { background: linear-gradient(145deg, #f87171, #dc2626); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(220, 38, 38, .26); }

/* ---------- panels ---------- */
.panel {
  display: block;
  background: #fff; border: 1px solid #f2e9f9; border-radius: calc(15 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)); min-width: 0;
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(80, 24, 110, .055);
}
.dash-cols { display: grid; grid-template-columns: minmax(0, 612fr) minmax(0, 729fr); gap: calc(11 * var(--u)); margin-top: calc(11 * var(--u)); align-items: stretch; }
.dash-cols2 { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 640fr); gap: calc(11 * var(--u)); margin-top: calc(11 * var(--u)); align-items: start; }
.p-head { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(5 * var(--u)); min-height: calc(20 * var(--u)); min-width: 0; }
.p-head h3 { min-width: 0; }
.p-head h3 { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 800; color: #2c1a3d; margin: 0; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; }
.p-head h3 svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); color: #8b2bb8; flex: 0 0 auto; }
.p-legend { margin-left: auto; display: flex; gap: calc(18 * var(--u)); font-size: calc(12.5 * var(--u)); color: #4a3a5e; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.p-legend span { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.p-legend .dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; display: inline-block; }
.dot.blue { background: #3b82f6; } .dot.pink { background: #f472b6; }
.p-link { margin-left: auto; font-size: calc(13.5 * var(--u)); font-weight: 700; color: #8b2bb8; text-decoration: none; display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; }
.p-link:hover { color: #c026d3; }

/* chart */
.ch-svg { width: 100%; height: auto; display: block; margin-top: calc(2 * var(--u)); }
.ch-ax { font-size: calc(11.5 * var(--u)); fill: #8b7aa0; font-weight: 500; }
.chart-panel { display: flex; flex-direction: column; }
.chart-panel .ch-svg { flex: 0 0 auto; }

/* ---------- stok per gudang ---------- */
.gd-panel { display: flex; flex-direction: column; }
.gd-body { display: flex; align-items: center; gap: calc(10 * var(--u)); flex: 1 1 auto; min-width: 0; }
.gd-list2 { flex: 1 1 0; width: 100%; min-width: 0; display: flex; flex-direction: column; }
.gd-head2 {
  display: grid; grid-template-columns: calc(26 * var(--u)) calc(58 * var(--u)) minmax(0, 1fr) auto calc(110 * var(--u)) calc(42 * var(--u));
  align-items: center; gap: calc(8 * var(--u));
  background: #faf5fe; border-radius: calc(7 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 700; color: #3a2a50; margin-bottom: calc(2 * var(--u));
}
.gd-head2 span:nth-child(4) { text-align: right; }
.gd-head2 span:nth-child(6) { text-align: right; }
.gd-row2 {
  display: grid; grid-template-columns: calc(26 * var(--u)) calc(58 * var(--u)) minmax(0, 1fr) auto calc(110 * var(--u)) calc(42 * var(--u));
  align-items: center; gap: calc(8 * var(--u)); min-width: 0;
  padding: calc(2.5 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid #f8f2fd;
}
.gd-row2:last-child { border-bottom: 0; }
.gd-ic { display: grid; place-items: center; min-width: 0; }
.gd-ic svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.gd-name { display: contents; }
.gd-kode { font-size: calc(13 * var(--u)); line-height: 1.2; font-weight: 700; color: #3d2b52; white-space: nowrap; }
.gd-nm { font-size: calc(13 * var(--u)); line-height: 1.2; font-weight: 500; color: #3d2b52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-bar { height: calc(11 * var(--u)); border-radius: 999px; background: #f1eaf8; overflow: hidden; display: block; }
.gd-bar i { display: block; height: 100%; border-radius: 999px; }
.gd-qty2 { font-size: calc(13 * var(--u)); line-height: 1.2; font-weight: 700; color: #3d2b52; text-align: right; white-space: nowrap; }
.gd-pct { font-size: calc(13 * var(--u)); color: #4a3a5e; font-weight: 600; text-align: right; white-space: nowrap; }
.gd-donut { flex: 0 0 calc(200 * var(--u)); display: flex; justify-content: center; }
.donut-wrap { position: relative; width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
.donut-wrap .donut { width: calc(160 * var(--u)); height: calc(160 * var(--u)); display: block; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); }
.donut-c b { font-size: calc(22 * var(--u)); font-weight: 800; color: #231432; letter-spacing: -.5px; }
.donut-c span { font-size: calc(12.5 * var(--u)); color: #8b7aa0; font-weight: 600; }

/* ---------- tabel stok menipis ---------- */
.mn-wrap { overflow: hidden; }
.mn-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mn-tbl td, .mn-tbl th { min-width: 0; }
.mn-tbl th {
  font-size: calc(13 * var(--u)); font-weight: 700; color: #3a2a50; text-align: left; background: #faf5fe;
  padding: calc(7 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid #f2eafa; white-space: nowrap;
}
.mn-tbl th:nth-child(1) { width: calc(40 * var(--u)); }
.mn-tbl th:nth-child(3) { width: calc(74 * var(--u)); }
.mn-tbl th:nth-child(4) { width: calc(92 * var(--u)); }
.mn-tbl th:nth-child(5) { width: calc(96 * var(--u)); }
.mn-tbl th:nth-child(6) { width: calc(84 * var(--u)); }
.mn-tbl td { padding: calc(4 * var(--u)) calc(8 * var(--u)); line-height: 1.35; border-bottom: 1px solid #f8f2fd; font-size: calc(13.5 * var(--u)); color: #4a3a5e; vertical-align: middle; }
.mn-tbl tr:last-child td { border-bottom: 0; }
.mn-no { color: #6d5a80; font-weight: 600; }
.mn-nm { display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0; }
.mn-nm img { width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: calc(6 * var(--u)); object-fit: contain; background: #fff; flex: 0 0 auto; }
.mn-nm b { display: block; min-width: 0; font-size: calc(13.5 * var(--u)); font-weight: 700; color: #30203f; line-height: 1.25; overflow-wrap: anywhere; }
.mn-nm span { display: none; }
.mn-gd { font-weight: 700; color: #4a3a5e; white-space: nowrap; }
.mn-qt { white-space: nowrap; font-weight: 700; color: #33234a; }
.mn-qt em { font-style: normal; font-weight: 500; color: #8b7aa0; font-size: calc(11.5 * var(--u)); }
.mn-pill {
  display: inline-block; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700;
  background: #fde6c4; color: #b45309; white-space: nowrap;
}
.mn-pill.danger { background: #fee2e2; color: #dc2626; }
.mn-mlist { display: none; }

/* ---------- aktivitas ---------- */
.ak-list { display: flex; flex-direction: column; }
.ak-row {
  display: grid; grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u));
  padding: calc(2.5 * var(--u)) 0; text-decoration: none; color: inherit; border-bottom: 1px solid #f8f3fc;
}
.ak-row:last-child { border-bottom: 0; }
.ak-ic { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; flex: 0 0 auto; }
.ak-ic svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.ak-ic.green { background: #dcfce7; color: #16a34a; }
.ak-ic.pink { background: #fce7f3; color: #db2777; }
.ak-ic.violet { background: #f3e8ff; color: #9333ea; }
.ak-ic.blue { background: #dbeafe; color: #2563eb; }
.ak-ic.orange { background: #ffedd5; color: #ea580c; }
.ak-ic.red { background: #fee2e2; color: #dc2626; }
.ak-tx { min-width: 0; }
.ak-tx b { display: block; font-size: calc(13.8 * var(--u)); font-weight: 700; color: #30203f; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-tx span { display: block; font-size: calc(11.8 * var(--u)); color: #9482a8; margin-top: calc(3 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-time { font-size: calc(11.5 * var(--u)); color: #8b7aa0; white-space: nowrap; font-weight: 500; }

/* ---------- aksi cepat ---------- */
.quick {
  margin-top: calc(11 * var(--u)); background: #fff; border: 1px solid #f2e9f9; border-radius: calc(15 * var(--u));
  padding: calc(10 * var(--u)) calc(18 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(80, 24, 110, .055);
}
.q-tx { flex: 0 0 calc(292 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(2 * var(--u)); }
.q-tx > svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: #8b2bb8; flex: 0 0 auto; }
.q-tx b { display: block; font-size: calc(18 * var(--u)); font-weight: 800; color: #2c1a3d; letter-spacing: -.3px; white-space: nowrap; }
.q-tx span { display: block; font-size: calc(12.5 * var(--u)); color: #7b6890; font-weight: 500; white-space: nowrap; }
.q-btns { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(11 * var(--u)); }
.q-btns.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-btn {
  height: calc(56 * var(--u)); border-radius: calc(10 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u));
  color: #fff; font-size: calc(15.5 * var(--u)); font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(60, 10, 80, .13); transition: .16s;
}
.q-btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.q-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.q-btn.green { background: linear-gradient(135deg, #22c55e, #15a34a); }
.q-btn.pink { background: linear-gradient(135deg, #f0459e, #e11d63); }
.q-btn.violet { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.q-btn.blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* ---------- notifikasi / ranking ---------- */
.nf-panel { margin-top: calc(13 * var(--u)); }
.nf-list { display: flex; flex-direction: column; }
.nf-row { display: grid; grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: 1px solid #f8f3fc; }
.nf-row:last-child { border-bottom: 0; }
.nf-row.unread .ak-tx b { color: #7e22ce; }
.nf-row time { font-size: calc(11.5 * var(--u)); color: #9a8aad; white-space: nowrap; }
.rk-list { display: flex; flex-direction: column; }
.rk-row { display: grid; grid-template-columns: calc(34 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(11 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid #f8f3fc; }
.rk-row:last-child { border-bottom: 0; }
.rk-row img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(7 * var(--u)); object-fit: contain; background: #faf6fe; }
.rk-row b { display: block; font-size: calc(13.5 * var(--u)); font-weight: 700; color: #30203f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row span { display: block; font-size: calc(11.5 * var(--u)); color: #9a8aad; }
.rk-row em { font-style: normal; font-size: calc(13.5 * var(--u)); font-weight: 800; color: #16a34a; }
.rk-row em.low { color: #e11d48; }
.empty-min { padding: calc(14 * var(--u)) calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); color: #9482a8; text-align: center; }

/* ---------- modal pilih periode ---------- */
.pick-list { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.pick-item {
  display: flex; align-items: center; gap: calc(11 * var(--u)); width: 100%; text-align: left;
  padding: calc(11 * var(--u)) calc(12 * var(--u)); border: 1px solid #efe5f8; border-radius: calc(11 * var(--u)); background: #fff; cursor: pointer;
}
.pick-item .ic { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(9 * var(--u)); background: #f8efff; color: #8b2bb8; display: grid; place-items: center; }
.pick-item .t { font-size: calc(13 * var(--u)); font-weight: 700; color: #30203f; }
.pick-item .s { font-size: calc(11 * var(--u)); color: #9482a8; margin-top: calc(2 * var(--u)); }
.pick-item .radio { margin-left: auto; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid #ddcbe9; }
.pick-item.on { border-color: #c026d3; background: #fdf6ff; }
.pick-item.on .radio { border-color: #c026d3; background: radial-gradient(circle, #c026d3 45%, transparent 50%); }

/* ===== laptop kecil: judul panel & legend dirapatkan ===== */
@media (max-width: 1420px) and (min-width: 1241px) {
  .p-head h3 { font-size: calc(16.5 * var(--u)); }
  .p-legend { gap: calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); }
}

/* ===================== TABLET ===================== */
@media (max-width: 1240px) {
  .app { --u: 0.86px; }
  .side-menu { padding-bottom: calc(10 * var(--u)); }
  .hero h1 { font-size: calc(38 * var(--u)) !important; }
  .hero p { font-size: calc(16 * var(--u)) !important; }
  .hero-tx { max-width: 54%; }
  .hero-img { max-width: 46%; }
  .stats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-cols, .dash-cols2 { grid-template-columns: minmax(0, 1fr); }
  .gd-body { justify-content: space-between; }
  .gd-list2 { flex: 1 1 auto; }
  .gudang-pick { min-width: 0; }
  .range-pick { min-width: 0; }
}

/* ===================== MOBILE ===================== */
@media (max-width: 900px) {
  .app { --u: 1px; }
  body { overflow-x: hidden; }
  .sidebar {
    position: fixed !important; left: 0; top: 0; bottom: 0; height: 100vh;
    width: 230px !important; flex: none !important; padding: 12px 12px 0 !important;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 40;
  }
  body.nav-open .sidebar { transform: none !important; }
  .sidebar .side-menu { overflow: visible; }
  .brand-card img { width: 60px; }
  .brand-card .bt { font-size: 15px; }
  .brand-card .bs { font-size: 9.5px; margin-top: 5px; }
  .side-link { height: 46px; padding: 0 14px; gap: 14px; font-size: 15px !important; }
  .side-link > svg { width: 19px; height: 19px; }
  .side-deco img { width: 100%; max-height: 100%; object-fit: cover; object-position: bottom; }
  .topbar { display: none !important; }
  .m-head {
    display: flex !important; align-items: center; gap: 10px;
    background: linear-gradient(158deg, #7d1fa1, #4e0f66) !important;
    padding: 13px 14px 34px !important; border: 0 !important; position: relative; z-index: 2;
  }
  .m-head .icon-btn { color: #fff !important; background: transparent !important; border: 0 !important; width: 34px; height: 34px; }
  .m-head .icon-btn svg { width: 22px; height: 22px; }
  .m-head .brand-mini img { width: 34px; height: 34px; object-fit: contain; }
  .m-head .brand-mini b { color: #fff !important; font-size: 13.6px !important; font-weight: 800; line-height: 1.15; display: block; }
  .m-head .brand-mini span { color: #e8cff5 !important; font-size: 8.4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .m-head .dot { border-color: #4e0f66; }
  .m-gudang {
    display: flex !important; gap: 8px; margin: -24px 12px 0; background: #fff;
    border-radius: 13px; padding: 8px; box-shadow: 0 8px 20px rgba(70, 16, 96, .10);
    position: relative; z-index: 5;
  }
  .m-gudang .gudang-pick { flex: 1 1 0; min-width: 0; height: 40px; font-size: 11.6px; padding: 0 9px !important; border: 0 !important; background: #faf6fe !important; justify-content: flex-start; }
  .m-gudang .gudang-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-gudang .range-pick { flex: 0 0 auto; min-width: 0; height: 40px; font-size: 10.6px; padding: 0 9px !important; border: 0 !important; background: #faf6fe !important; }
  .content { padding: 8px 12px 88px !important; }
  .hero { height: auto !important; min-height: 0 !important; padding: 12px 2px 4px !important; background: transparent !important; }
  .hero-img { display: none; }
  .hero h1 { font-size: 25px !important; letter-spacing: -.5px; }
  .hero p { font-size: 12.6px !important; margin-top: 5px !important; }
  .stats6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 8px; }
  .stat { padding: 10px 11px 9px; border-radius: 11px; min-height: 0 !important; }
  .st-top { gap: 7px; }
  .st-ic { width: 27px; height: 27px; border-radius: 7px; }
  .st-ic svg { width: 14.5px; height: 14.5px; }
  .st-lb { font-size: 10.4px; white-space: nowrap; }
  .st-v { font-size: 21px; margin-top: 6px; }
  .st-tr { display: none; }
  .dash-cols, .dash-cols2 { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  .panel { padding: 12px 12px 11px; border-radius: 12px; }
  .p-head h3 { font-size: 12.2px; gap: 6px; }
  .d-only { display: none; }
  .p-head h3 svg { width: 15px; height: 15px; }
  .p-legend { font-size: 10px; gap: 9px; }
  .p-legend .dot { width: 8px; height: 8px; }
  .p-link { font-size: 10.6px; }
  .ch-ax { font-size: 9.4px; }
  .gd-body { flex-direction: column; gap: 10px; }
  .gd-head2 { display: none; }
  .gd-list2 { width: 100%; }
  .gd-row2 { grid-template-columns: 16px 52px minmax(0, 1fr) auto 70px 34px; gap: 5px; padding: 8px 2px; }
  .gd-ic svg { width: 14px; height: 14px; }
  .gd-kode, .gd-nm, .gd-qty2 { font-size: 10.2px; }
  .gd-pct { font-size: 9.2px; }
  .gd-bar { height: 8px; }
  .gd-donut { display: flex; justify-content: center; width: 100%; flex: 0 0 auto; }
  .donut-wrap, .donut-wrap .donut { width: 120px; height: 120px; }
  .donut-c b { font-size: 15px; }
  .donut-c span { font-size: 9px; }
  .mn-wrap { display: none; }
  .mn-mlist { display: flex; flex-direction: column; }
  .mn-mrow {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px;
    padding: 8px 0; border-bottom: 1px solid #f8f3fc; text-decoration: none; color: inherit;
  }
  .mn-mrow:last-child { border-bottom: 0; }
  .mn-mrow img { width: 36px; height: 36px; border-radius: 7px; object-fit: contain; background: #faf6fe; }
  .mn-mrow b { display: block; font-size: 11.8px; font-weight: 700; color: #30203f; line-height: 1.25; }
  .mn-mrow span { display: block; font-size: 9.8px; color: #9482a8; margin-top: 2px; }
  .ak-row, .nf-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px 0; gap: 9px; }
  .ak-ic { width: 30px; height: 30px; }
  .ak-ic svg { width: 15px; height: 15px; }
  .ak-tx b { font-size: 11.4px; }
  .ak-tx span { font-size: 9.8px; }
  .ak-time, .nf-row time { font-size: 9.4px; }
  .quick { flex-direction: column; align-items: stretch; gap: 11px; padding: 13px; border-radius: 12px; }
  .q-tx { flex: 0 0 auto; }
  .q-tx > svg { width: 22px; height: 22px; }
  .q-tx b { font-size: 13.4px; }
  .q-tx span { font-size: 10.4px; }
  .q-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .q-btn { height: 46px; font-size: 12px; gap: 7px; border-radius: 9px; }
  .q-btn svg { width: 16px; height: 16px; }
  .rk-row { gap: 8px; padding: 8px 0; }
}

@media (max-width: 400px) {
  .st-lb { font-size: 9.8px; }
  .hero h1 { font-size: 23px !important; }
  .gd-row2 { grid-template-columns: 14px 46px minmax(0, 1fr) auto 60px 30px; }
}

/* ============ Sidebar tetap, hanya konten dashboard yang scroll ============ */
@media (min-width: 901px) {
  html, body { height: 100%; overflow: hidden; }
  .app { height: 100vh; min-height: 0; overflow: hidden; }
  .sidebar { height: 100vh; align-self: flex-start; }
  .main {
    height: 100vh; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e0cdec transparent;
  }
  .main::-webkit-scrollbar { width: 8px; }
  .main::-webkit-scrollbar-track { background: transparent; }
  .main::-webkit-scrollbar-thumb { background: #e6d6f2; border-radius: 8px; }
  .main::-webkit-scrollbar-thumb:hover { background: #d9c2ea; }
  .topbar { position: sticky; top: 0; z-index: 30; }
  .content { flex: 0 0 auto; }
}

/* ===== Sidebar selalu tampil penuh: rapatkan menu saat layar pendek ===== */
@media (min-width: 901px) and (max-height: 900px) {
  .side-menu { padding-top: calc(14 * var(--u)); }
  .side-link { height: 42px; font-size: 16px !important; gap: 16px; }
  .side-link > svg { width: 19px; height: 19px; }
  .side-parent[data-menu="lap-gudang"] { margin-top: calc(7 * var(--u)); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .side-menu { padding-top: calc(10 * var(--u)); }
  .side-link { height: 41px; padding: 0 13px; font-size: 16px !important; gap: 13px; letter-spacing: -.25px; }
  .side-link > svg { width: 18px; height: 18px; }
  .brand-card img { width: calc(76 * var(--u)); }
  .brand-card .bt { font-size: calc(17.5 * var(--u)); }
  .brand-card .bs { font-size: calc(11 * var(--u)); margin-top: calc(4 * var(--u)); }
  .side-parent[data-menu="lap-gudang"] { margin-top: calc(6 * var(--u)); }
}
@media (min-width: 901px) and (max-height: 700px) {
  .side-menu { padding-top: calc(6 * var(--u)); padding-bottom: calc(4 * var(--u)); }
  .side-link { height: 37px; font-size: 15.5px !important; gap: 15px; }
  .brand-card img { width: calc(64 * var(--u)); }
  .brand-card .bt { font-size: calc(16 * var(--u)); }
  .side-link > svg { width: 18px; height: 18px; }
  .brand-card { padding: calc(4 * var(--u)) calc(2 * var(--u)) 0 calc(3 * var(--u)) !important; }
  .side-deco { min-height: calc(40 * var(--u)); }
}
@media (min-width: 901px) and (max-height: 620px) {
  .side-link { height: 32px; font-size: 14.5px !important; }
  .brand-card img { width: calc(56 * var(--u)); }
  .brand-card .bt { font-size: calc(15 * var(--u)); }
  .brand-card .bs { display: none; }
  .side-deco { min-height: calc(26 * var(--u)); }
}