/* ============================================================
   theme.css
   Design System Terpusat - DMS Web
   ============================================================ */

:root {
  /* Warna utama */
  --primary-green: #2e9e3e;
  --dark-green: #1f6b2e;
  --darker-green: #17531f;
  --light-green: #eaf6ec;
  --accent-blue: #2f80ed;
  --accent-orange: #e67e22;

  --bg-page: #dcdcdc;
  --bg-card: #ffffff;
  --text-dark: #1f2a24;
  --text-muted: #6b7a71;
  --border-light: #d0d7d2;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography & Radius */
  --font-base: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Dimension & Table Header Sticky Height */
  --sidebar-width: 250px;
  --table-header-row-height: 40px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--bg-page);
  color: var(--text-dark);
}

/* ── Layout ─────────────────────────────────────────────── */
.dms-layout {
  display: flex;
  min-height: 100vh;
}

.dms-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: var(--space-lg);
  flex: 1;
}

/* Judul halaman & filter panel - DIAM saat scroll */
.dms-page-title,
.dms-filter-panel,
#dmsFilterForm {
  flex-shrink: 0;
}

/* ── Sidebar ────────────────────────────────────────────── */
.dms-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--darker-green), var(--primary-green));
  color: #fff;
  display: flex;
  flex-direction: column;
  border-top-right-radius: 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.2s ease, transform 0.25s ease;
  z-index: 100;
}

.dms-sidebar__brand {
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  justify-content: center;
}

.dms-sidebar__logo {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 1px;
}

.dms-sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-sm);
}

.dms-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border-left: 4px solid transparent;
}

.dms-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dms-sidebar__link.is-active {
  background: rgba(0, 0, 0, 0.18);
  border-left-color: #fff;
  font-weight: 600;
}

.dms-sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  display: inline-block;
}

.dms-sidebar__footer {
  margin-top: auto;
  padding: var(--space-md);
}

.dms-sync-card {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}

.dms-sync-card__title {
  font-size: 0.75rem;
  font-weight: 600;
}

.dms-sync-card__time {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Mobile Sidebar Controls */
.dms-hamburger {
  display: none;
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary-green);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.dms-hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
  display: block;
}

.dms-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}

/* ── Page Header & Filter ───────────────────────────────── */
.dms-page-title {
  color: var(--primary-green);
  font-weight: 800;
  text-align: center;
  font-size: 1.8rem;
  margin: 0 0 var(--space-lg);
}

.dms-filter-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dms-filter-field {
  background: var(--primary-green);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: #fff;
}

.dms-filter-field label {
  display: block;
  font-size: 0.7rem;
  opacity: 0.85;
  margin-bottom: 2px;
}

.dms-filter-field select,
.dms-filter-field input {
  width: 100%;
  border: none;
  background: #fff;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 7px 10px;
  margin-top: 2px;
}

.dms-filter-field select:focus,
.dms-filter-field input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 1px;
}

/* ── KPI & Cards ────────────────────────────────────────── */
.dms-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dms-kpi-card {
  background: var(--primary-green);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dms-kpi-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.dms-kpi-card__value {
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: 2px;
}

.dms-kpi-card__value--blue { color: #6fd0ff; }
.dms-kpi-card__value--orange { color: #ffb066; }

/* ── Table & Wrapper (Fix Scroll Vertikal & Horizontal) ─── */
.dms-table-wrapper,
.table-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

.dms-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.dms-table thead th,
.table-container th {
  background-color: var(--primary-green);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
  height: var(--table-header-row-height);
  position: sticky;
  background-clip: padding-box;
  box-sizing: border-box;
}

/* Multi-header Sticky Positions */
.dms-table thead tr:nth-child(1) th,
.table-container thead tr:nth-child(1) th {
  top: 0;
  z-index: 20;
}

.dms-table thead tr:nth-child(2) th,
.table-container thead tr:nth-child(2) th {
  top: var(--table-header-row-height);
  z-index: 10;
}

.dms-table tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.dms-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.dms-table tfoot td {
  font-weight: 700;
  background: var(--light-green);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ── Formatting Kolom Total ─────────────────────────────── */
/* Class khusus sel blok Total dari JavaScript (target-sales.js / product-cabang.js) */
.dms-table td.dms-total-col {
  font-weight: 700;
  color: var(--text-dark);
  background-color: #e2f3e5;
}

/* Kolom Paling Kanan (Total Akhir) */
.dms-table tbody td:last-child,
.dms-table tfoot td:last-child {
  background-color: #e2f3e5;
  font-weight: 700;
}

.dms-table thead th:last-child,
.dms-table thead th.dms-total-col {
  background-color: var(--dark-green) !important;
}

/* ── Hierarchy Table Helpers ───────────────────────────── */
.dms-hierarchy-toggle {
  display: inline-block;
  width: 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: var(--primary-green);
}

.dms-row-level-0 td:first-child { font-weight: 700; }
.dms-row-level-1 td:first-child { padding-left: 28px; }
.dms-row-level-2 td:first-child { padding-left: 48px; color: var(--text-muted); }
.dms-row-hidden { display: none; }

/* ── Responsive Breakpoints ─────────────────────────────── */
@media (max-width: 1199px) {
  .dms-filter-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .dms-sidebar {
    position: fixed;
    height: 100vh;
    transform: translateX(-100%);
  }
  .dms-sidebar.is-open { transform: translateX(0); }
  .dms-hamburger { display: flex; }
  .dms-overlay.is-open { display: block; }
  .dms-content { padding: var(--space-md); padding-top: 64px; }
  .dms-filter-panel { grid-template-columns: 1fr; }
  .dms-kpi-grid { grid-template-columns: 1fr; }
  .dms-page-title { font-size: 1.3rem; }
}


/* ── Formatting Kolom Total ─────────────────────────────── */

/* 1. Body & Foot Kolom Total (Hijau Muda) */
.dms-table tbody td.dms-total-col,
.dms-table tfoot td.dms-total-col,
.dms-table tbody td:last-child,
.dms-table tfoot td:last-child {
  background-color: #e2f3e5 !important;
  font-weight: 700;
}

/* 2. Header Kolom Total - Tingkat 1 & Tingkat 2 (Hijau Tua) */
.dms-table thead th.dms-total-col,
.dms-table thead tr:nth-child(1) th:last-child,
.dms-table thead tr:nth-child(2) th.dms-total-col {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
}

/**
 * PERBAIKAN: sticky kolom Company belum aktif (kolom masih ikut ke-scroll,
 * warna belum berubah). Kemungkinan konflik prioritas CSS dengan aturan
 * yang sudah ada duluan di theme.css (rule lama utk .dms-table thead th
 * yang sudah set position:sticky + z-index duluan, dengan specificity yang
 * kebetulan lebih tinggi dari rule sticky-kolom yang baru).
 *
 * Perbaikan: pakai !important supaya PASTI menang di cascade, terlepas dari
 * urutan/specificity rule lain. TEMPEL BLOK INI DI PALING BAWAH theme.css
 * (setelah SEMUA rule lain, termasuk yang dari pesan-pesan sebelumnya).
 */

.dms-table thead th:first-child {
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 30 !important;
}

.dms-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 8 !important;
  background: #ffffff !important;
}

.dms-table tbody tr:nth-child(even) td:first-child {
  background: #fafafa !important;
}

.dms-table tbody tr.dms-row-level-1 td:first-child {
  background: #ffffff !important;
}

.dms-table tbody tr.dms-row-level-2 td:first-child {
  background: #fafafa !important;
}

.dms-table tfoot td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 8 !important;
  background: var(--light-green) !important;
}

/* Bonus: garis pemisah tegas di kanan kolom sticky - supaya kelihatan jelas
   batas antara kolom yg "nempel" dgn kolom yg ikut scroll di baliknya. */
.dms-table th:first-child,
.dms-table td:first-child {
  border-right: 2px solid var(--primary-green) !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN: header "Company" (rowspan=2) berantakan
   ============================================================
   Penyebab: sel Company punya rowspan="2" (menggabung baris header 1 & 2),
   tapi aturan sebelumnya (.dms-table thead th { height: var(...); }) MEMAKSA
   semua <th> termasuk Company jadi tinggi SATU baris saja (40px) - padahal
   Company seharusnya otomatis setinggi GABUNGAN 2 baris (~80px). Konflik
   tinggi ini yang bikin header numpuk/berantakan pas discroll.

   Perbaikan: kecualikan sel Company dari height paksa itu - biarkan
   tingginya otomatis mengikuti rowspan. */
.dms-table thead th:first-child {
  height: auto !important;
}

/* ============================================================
   Warna header "Company" disamakan dengan header "Total" (hijau tua)
   ============================================================ */
.dms-table thead th:first-child {
  background-color: var(--dark-green) !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 2: "Target Sales" ikut ke-anggap Company
   ============================================================
   Penyebab: sel "Company" di baris header 1 pakai rowspan="2", jadi dia
   TIDAK MUNCUL LAGI sebagai elemen anak di baris header 2 (rowspan sudah
   "memakai" tempatnya). Akibatnya, kolom PERTAMA di baris 2 secara struktur
   HTML adalah "Target Sales" - dan `:first-child` tanpa embel-embel lain
   salah menganggap "Target Sales" ini SAMA statusnya dengan "Company",
   ikut jadi sticky + hijau tua + garis tegas.

   Perbaikan: ganti selector jadi LEBIH SPESIFIK - cuma target baris
   PERTAMA (tr:first-child) untuk perlakuan Company, dan baris KEDUA
   (tr:nth-child(2)) dikembalikan ke tampilan normal (bukan sticky-left,
   bukan hijau tua). */

.dms-table thead tr:first-child th:first-child {
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 30 !important;
  height: auto !important;
  background-color: var(--dark-green) !important;
  border-right: 2px solid var(--primary-green) !important;
}

/* Kembalikan kolom pertama di baris KEDUA (yg sebenarnya "Target Sales")
   ke tampilan NORMAL - bukan sticky-left, bukan hijau tua, bukan garis tegas. */
.dms-table thead tr:nth-child(2) th:first-child {
  position: sticky !important; /* tetap sticky TOP saja (bagian header biasa) */
  left: auto !important;       /* JANGAN sticky-left */
  top: var(--table-header-row-height) !important;
  z-index: 10 !important;
  height: var(--table-header-row-height) !important;
  background-color: var(--primary-green) !important; /* warna hijau NORMAL, bukan dark-green */
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important; /* garis biasa, bukan garis tegas hijau */
}

/* ============================================================
   PERBAIKAN LANJUTAN 3: isi data kolom Company disamakan warnanya
   dengan kolom Total (hijau muda #e2f3e5)
   ============================================================ */
.dms-table tbody td:first-child {
  background: #e2f3e5 !important;
}

.dms-table tbody tr:nth-child(even) td:first-child {
  background: #e2f3e5 !important; /* samakan juga baris genap - tidak usah beda lagi (zebra) khusus kolom ini */
}

/* ============================================================
   PERBAIKAN LANJUTAN 4: pertegas garis pemisah kolom di header
   ============================================================
   Garis sebelumnya (rgba(255,255,255,0.25)) terlalu transparan, hampir
   tidak kelihatan di atas background hijau. Dinaikkan opacity-nya + sedikit
   lebih tebal. */
.dms-table thead th {
  border-right: 2px solid rgba(255, 255, 255, 0.6) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 5: ikon expand/collapse jadi segitiga
   (▶ collapsed / ▼ expanded) - lebih profesional & familiar
   dibanding simbol matematika sebelumnya (⊠, dsb).
   ============================================================ */
.dms-hierarchy-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
  color: var(--primary-green);
  transition: transform 0.15s ease;
}

.dms-hierarchy-toggle:hover {
  color: var(--dark-green);
}

/* ============================================================
   PERBAIKAN LANJUTAN 6: footer "Total" disamakan gayanya dengan
   header (background hijau tua, teks putih, tegas)
   ============================================================
   !important dipakai karena ada aturan lama (.dms-total-col dkk) yang
   sebelumnya bikin footer tetap hijau muda - footer sekarang HARUS
   menang jadi hijau tua terlepas dari kolom biasa atau kolom Total. */
.dms-table tfoot td {
  background: var(--dark-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-right: 2px solid rgba(255, 255, 255, 0.6) !important;
}

.dms-table tfoot td:first-child {
  background: var(--dark-green) !important; /* kolom Company di footer juga ikut hijau tua, bukan hijau muda seperti body */
}

/* ============================================================
   PERBAIKAN LANJUTAN 7: footer masih belang (kolom Total tetap
   hijau muda) + label "Total" ikut ke-geser saat scroll horizontal
   ============================================================
   Penyebab belang: ada aturan LAMA di file Anda (duplikat dari awal)
   yang override .dms-total-col & :last-child di tfoot balik ke hijau
   muda (#e2f3e5) - kalau aturan lama itu posisinya LEBIH BAWAH di file
   dari fix kemarin, dia menang. Solusi: target PERSIS selector yang sama
   supaya dijamin menang asal blok INI ditempel PALING BAWAH di file.

   Penyebab "Total" ikut geser: kemarin cuma kasih warna hijau tua ke
   td:first-child di footer, LUPA kasih position:sticky + left:0 (baru
   dikasih ke header & body, footer belum). */

.dms-table tfoot td.dms-total-col,
.dms-table tfoot td:last-child {
  background: var(--dark-green) !important;
  color: #ffffff !important;
}

.dms-table tfoot td:first-child {
  position: sticky !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 15 !important;
  background: var(--dark-green) !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 8: freeze/sticky blok kolom Total/Last Stok
   di kanan - mirror dari sticky kolom Company di kiri.
   ============================================================
   z-index diatur supaya sel Total tetap di atas sel biasa yang di-scroll
   di baliknya, tapi TIDAK melebihi z-index sel Company (pojok kiri-atas
   tetap prioritas tertinggi kalau kebetulan tabel sempit & tumpang tindih). */

.dms-table thead th.dms-total-col {
  z-index: 22 !important;
}

.dms-table tbody td.dms-total-col,
.dms-table tfoot td.dms-total-col {
  z-index: 8 !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 9: header tanggal (rowspan=2) di Stock by
   Company ikut berantakan - bug SAMA seperti kasus Company
   sebelumnya, tapi sekarang kena SEMUA kolom tanggal karena mereka
   juga pakai rowspan="2" (perubahan struktur terbaru).
   ============================================================
   Sebelumnya fix cuma menyasar :first-child (kolom Company). Sekarang
   perlu SEMUA <th rowspan> di baris header pertama, bukan cuma yang
   pertama. */
.dms-table thead tr:first-child th[rowspan] {
  height: auto !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 10: styling utk 2 level hierarki baru (Category,
   GP) di Target vs Actual by Product by Cabang - direvisi jadi 5 level
   (Company->Cabang->Category->GP->Produk), sebelumnya cuma 3 level.
   ============================================================ */
.dms-row-level-3 td:first-child { padding-left: 68px; color: var(--text-muted); }
.dms-row-level-4 td:first-child { padding-left: 88px; color: var(--text-muted); font-size: 0.9em; }

/* ============================================================
   PERBAIKAN LANJUTAN 11: perbesar indentasi level produk (leaf,
   di bawah GP) - sebelumnya cuma 68px, kurang menjorok dibanding
   levelnya sendiri (permintaan user, 2 September 2026).
   ============================================================
   !important supaya pasti menang dari aturan level-3 sebelumnya. */
.dms-row-level-3 td:first-child {
  padding-left: 100px !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 12: pastikan header Stok Akhir/AVG 3 Month
   (dan semua header dms-total-col lain) SELALU hijau tua, terlepas
   dari urutan/prioritas rule lain yang mungkin bentrok.
   ============================================================ */
.dms-table thead th.dms-total-col {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 13: garis grid data DIPERTEGAS di semua
   halaman + kolom Total/Last Stok dibuat LEBIH KOKOH saat freeze
   (supaya tidak "hilang"/blend saat di-scroll).
   ============================================================
   Permintaan user, 2 September 2026. */

/* Garis grid antar kolom & baris DATA (tbody) dipertegas - sebelumnya
   pakai --border-light yang cukup terang, sekarang pakai warna lebih
   gelap + tebal supaya jelas kelihatan. */
.dms-table tbody td {
  border-right: 1px solid #b8c2bd !important;
  border-bottom: 1px solid #b8c2bd !important;
}

.dms-table tbody td:last-child {
  border-right: none !important;
}

/* Kolom Total/Last Stok (sticky kanan) - background WAJIB solid +
   box-shadow di sisi kiri, supaya ada pemisah visual yang jelas dari
   kolom yang di-scroll di baliknya (mencegah kesan "menyatu"/hilang). */
.dms-table tbody td.dms-total-col,
.dms-table tfoot td.dms-total-col {
  background-color: #e2f3e5 !important;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}

.dms-table thead th.dms-total-col {
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15);
}

/* Baris footer (Total) - kolom Total-nya tetap solid hijau tua + shadow. */
.dms-table tfoot td.dms-total-col {
  background-color: var(--dark-green) !important;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}

/* Jaring pengaman: SEL PALING KANAN di setiap baris (apapun urutan
   penghitungan offset dari JS) MINIMAL selalu nempel di right:0 -
   supaya walau perhitungan JS meleset, kolom paling kanan tidak pernah
   "hilang" total dari pandangan. right:0 di sini SENGAJA tanpa !important
   - supaya tetap bisa ditimpa JS (table-header-fix.js) dengan nilai yang
   presisi kalau perhitungannya berhasil; ini cuma fallback minimal. */
.dms-table thead tr:first-child th:last-child,
.dms-table tbody tr td:last-child,
.dms-table tfoot tr td:last-child {
  position: sticky !important;
  right: 0;
}

/* ============================================================
   PERBAIKAN LANJUTAN 14: khusus Stock by Company - blok "Last Stok"
   pakai lebar TETAP (bukan dihitung dinamis oleh JS) supaya tidak ada
   lagi masalah timing pengukuran yang bikin header ke-potong/tidak
   freeze dengan benar. Trade-off: lebar kolom jadi tetap 130px (bukan
   menyesuaikan panjang angka), tapi jauh lebih STABIL.
   ============================================================
   Discope KHUSUS ke #stockCompanyTableWrapper - TIDAK mempengaruhi
   halaman lain yang masih pakai perhitungan dinamis JS. */

#stockCompanyTableWrapper .dms-table th.dms-total-col,
#stockCompanyTableWrapper .dms-table td.dms-total-col {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
}

#stockCompanyTableWrapper .dms-table td.dms-total-col {
  background-color: #e2f3e5 !important;
  color: var(--text-dark) !important;
}

#stockCompanyTableWrapper .dms-table tfoot td.dms-total-col {
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
}

/* Kolom kedua ("AVG 3 Month") - paling kanan, nempel di tepi. */
#stockCompanyTableWrapper .dms-table th.dms-total-col:last-child,
#stockCompanyTableWrapper .dms-table td.dms-total-col:last-child {
  right: 0 !important;
}

/* Kolom pertama ("Stok Akhir") - nempel PERSIS setelah lebar kolom kedua
   (130px), supaya tidak tumpang tindih. */
#stockCompanyTableWrapper .dms-table th.dms-total-col:not(:last-child),
#stockCompanyTableWrapper .dms-table td.dms-total-col:not(:last-child) {
  right: 130px !important;
}

/* "Last Stok" (baris header 1, colspan=2, gabungan 2 kolom di atas)
   lebarnya = 130px x 2 = 260px, nempel di tepi kanan (right:0). */
#stockCompanyTableWrapper .dms-table thead tr:first-child th.dms-total-col {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  right: 0 !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 15: table-layout FIXED khusus Stock by Company
   ============================================================
   Akar masalah SEBENARNYA: .dms-table pakai table-layout:auto (default) -
   artinya lebar kolom yang kita tentukan di CSS cuma "saran", browser
   tetap boleh menghitung ulang sendiri terutama utk sel colspan/rowspan
   campuran (persis kasus header 2-baris kita). Ini penyebab kenapa
   berkali-kali dicoba tetap "bocor" (tanggal terakhir tumpang tindih
   dgn Stok Akhir).

   table-layout:fixed memaksa browser PATUH PERSIS pada lebar yang kita
   set di baris PERTAMA tabel - tidak ada lagi penghitungan ulang. */

#stockCompanyTableWrapper .dms-table {
  table-layout: fixed !important;
}

#stockCompanyTableWrapper .dms-table th,
#stockCompanyTableWrapper .dms-table td {
  width: 100px;
}

#stockCompanyTableWrapper .dms-table th:first-child,
#stockCompanyTableWrapper .dms-table td:first-child {
  width: 220px !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 16: footer (baris Total paling bawah) - kolom
   terakhir (Total/Last Stok) dipastikan freeze ke KANAN, SEKALIGUS
   freeze ke BAWAH (kombinasi sticky bottom+right, mirip kasus Company
   yg sticky top+left sebelumnya).
   ============================================================ */

.dms-table tfoot td:last-child,
.dms-table tfoot td.dms-total-col {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 15 !important;
}

/* Khusus Stock by Company - footer Total/Last Stok pakai lebar tetap
   yang sama dgn header (130px per kolom), biar freeze-nya presisi
   sinkron dgn header di atasnya. */
#stockCompanyTableWrapper .dms-table tfoot td.dms-total-col {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 17: AKAR MASALAH ditemukan - "PERBAIKAN LANJUTAN 2"
   (jauh di atas) secara tidak sengaja ikut menimpa "Stok Akhir" karena
   posisinya SAMA (tr:nth-child(2) th:first-child) dengan kasus lama
   "Target Sales" yang jadi tujuan awal fix itu. Selector lama itu punya
   specificity lebih tinggi (kombinasi :nth-child + :first-child), jadi
   MENANG dan bikin "Stok Akhir" ikut diperlakukan seolah bukan kolom
   Total (warna salah, right tidak konsisten) - padahal Stok Akhir PUNYA
   class dms-total-col, beda kasus dengan Target Sales yang TIDAK punya.

   Perbaikan: override PERSIS selector yang sama tapi + class
   .dms-total-col supaya specificity-nya PASTI lebih tinggi (nambah 1
   class dibanding rule lama), sehingga menang HANYA utk kasus yang
   memang kolom Total asli (spt Stok Akhir), tanpa mengganggu fix lama
   utk kasus Target Sales (yg tidak punya class ini). */

.dms-table thead tr:nth-child(2) th:first-child.dms-total-col {
  position: sticky !important;
  left: auto !important;
  top: var(--table-header-row-height) !important;
  height: var(--table-header-row-height) !important;
  background-color: var(--dark-green) !important;
  color: #ffffff !important;
  z-index: 22 !important;
  border-right: 2px solid rgba(255, 255, 255, 0.6) !important;
}

/* Khusus Stock - pastikan right & width-nya tetap 130px (tidak ke-reset
   oleh rule di atas, yang sengaja tidak menyentuh right/width). */
#stockCompanyTableWrapper .dms-table thead tr:nth-child(2) th:first-child.dms-total-col {
  right: 130px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 18: sidebar lebih profesional - ikon SVG per
   menu (ganti kotak polos), logo KSP disandingkan dgn teks brand.
   ============================================================ */

.dms-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dms-sidebar__logo-img {
  height: 34px;
  width: auto;
}

/* Ikon SVG menggantikan kotak polos lama (yg pakai background solid) */
.dms-sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: none !important; /* hapus background kotak lama */
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s ease, transform 0.15s ease;
}

.dms-sidebar__link:hover .dms-sidebar__icon {
  color: #ffffff;
  transform: scale(1.08);
}

.dms-sidebar__link.is-active .dms-sidebar__icon {
  color: #ffffff;
}

/* Sedikit lebih banyak spasi antar menu item + hover lebih halus */
.dms-sidebar__menu {
  gap: 4px;
}

.dms-sidebar__link {
  transition: background 0.15s ease, border-left-color 0.15s ease;
}

/* ============================================================
   PERBAIKAN LANJUTAN 19: sidebar bisa di-collapse/hide (desktop),
   content area otomatis full-width saat sidebar disembunyikan.
   ============================================================
   Permintaan user, 2 September 2026. Karena .dms-layout pakai flexbox
   dan .dms-content sudah punya flex:1, cukup set width sidebar jadi 0
   saat collapsed - content OTOMATIS melebar mengisi ruang kosongnya
   tanpa perlu hitung ulang lebar manual. */

.dms-sidebar.is-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

/* Sembunyikan ISI sidebar (bukan cuma pakai overflow:hidden) supaya tidak
   ada elemen yg masih bisa di-tab/fokus keyboard saat collapsed. */
.dms-sidebar.is-collapsed > * {
  display: none !important;
}

/* Tombol toggle - "menempel" di tepi kanan sidebar, ikut bergeser ke kiri
   (nempel di tepi kiri layar) saat sidebar collapsed. */
.dms-sidebar-toggle {
  position: fixed;
  top: 24px;
  left: calc(var(--sidebar-width) - 14px);
  z-index: 150;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--primary-green);
  background: #ffffff;
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: left 0.2s ease, transform 0.2s ease;
}

.dms-sidebar-toggle:hover {
  background: var(--primary-green);
  color: #ffffff;
}

.dms-sidebar-toggle.is-collapsed {
  left: 6px;
}

.dms-sidebar-toggle.is-collapsed svg {
  transform: rotate(180deg); /* panah balik arah, menandakan "klik utk buka lagi" */
}

/* Sembunyikan tombol collapse di layar kecil - biar tidak bentrok dgn
   hamburger mobile yang sudah ada. */
@media (max-width: 767px) {
  .dms-sidebar-toggle {
    display: none;
  }
}

/* ============================================================
   PERBAIKAN LANJUTAN 20: footer "Total" dibuat lebih profesional
   di semua halaman - border pemisah tegas, bayangan "mengambang",
   tipografi lebih rapi (uppercase + letter-spacing).
   ============================================================
   Permintaan user, 3 September 2026. */

.dms-table tfoot td {
  padding: 12px var(--space-md) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3px;
  border-top: 3px solid #0f3d1a !important; /* pemisah tegas dari baris data di atasnya */
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15); /* efek "mengambang" di atas konten yg discroll */
}

/* Label "Total" (kolom pertama) - uppercase + sedikit lebih besar, jadi
   penanda visual yang jelas ini baris ringkasan, bukan data biasa. */
.dms-table tfoot td:first-child {
  text-transform: uppercase;
  font-size: 0.95rem !important;
  letter-spacing: 0.8px;
}

/* Angka-angka di footer - font-weight lebih tegas drpd body biasa. */
.dms-table tfoot td:not(:first-child) {
  font-weight: 800 !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 21: Dashboard dibuat lebih profesional +
   perbaiki chart "Monthly Sales" yang tidak terlihat.
   ============================================================
   AKAR MASALAH CHART: dashboard.js pakai warna PUTIH utk semua teks
   chart (legend, angka sumbu, grid) - asumsinya background KARTU chart
   gelap (spt kartu KPI hijau). Tapi .dms-chart-card belum pernah diberi
   CSS sama sekali (background transparan/putih polos) - teks putih jadi
   tidak kelihatan di atas background terang. Permintaan user, 3 September
   2026. */

.dms-chart-card {
  background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  margin-top: var(--space-md);
}

.dms-chart-card__title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  margin-bottom: var(--space-md);
}

/* KPI card dibuat lebih "hidup" - hover halus + border tipis supaya
   terkesan lebih premium/profesional, bukan flat polos. */
.dms-kpi-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dms-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.dms-kpi-card__label {
  text-transform: uppercase;
  opacity: 0.9;
}

/* Layout tinggi chart DIKEMBALIKAN ke nilai tetap (bukan flex:1 dinamis) -
   percobaan sebelumnya (flex:1 auto-fill) ternyata bikin tinggi kontainer
   jadi 0 di beberapa kasus (Chart.js butuh tinggi PASTI saat pertama kali
   dibuat, tidak bisa mengandalkan flex yg masih dihitung ulang), sehingga
   chart tidak terlihat sama sekali. Dikembalikan ke pendekatan sederhana
   & pasti bekerja: biarkan height:340px inline dari index.ejs apa adanya. */

/* ============================================================
   PERBAIKAN LANJUTAN 22: filter panel dipercantik di semua halaman
   ============================================================
   Permintaan user, 3 September 2026 - sebelumnya kotak hijau flat polos,
   sekarang dikasih gradient halus, bayangan, dan interaksi hover/focus. */

.dms-filter-field {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  border-radius: var(--radius-md);
  padding: 10px var(--space-md) 12px;
  box-shadow: 0 2px 8px rgba(31, 107, 46, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dms-filter-field:hover {
  box-shadow: 0 4px 14px rgba(31, 107, 46, 0.35);
  transform: translateY(-1px);
}

.dms-filter-field label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.dms-filter-field select,
.dms-filter-field input {
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease;
}

.dms-filter-field select:focus,
.dms-filter-field input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Jarak antar kelompok filter sedikit lebih lega */
.dms-filter-panel {
  gap: 14px;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   PERBAIKAN LANJUTAN 23: filter panel dibuat lebih PROPORSIONAL
   (lebih kecil) - permintaan user 3 September 2026, versi sebelumnya
   (PERBAIKAN LANJUTAN 22) kebesaran & makan banyak ruang layar.
   ============================================================
   !important dipakai supaya menang dari aturan LANJUTAN 22 sebelumnya
   yang lebih besar. */

.dms-filter-field {
  padding: 6px 12px 8px !important;
  border-radius: 8px !important;
}

.dms-filter-field label {
  font-size: 0.62rem !important;
  margin-bottom: 2px !important;
}

.dms-filter-field select,
.dms-filter-field input {
  padding: 5px 9px !important;
  font-size: 0.8rem !important;
  border-radius: 5px !important;
}

.dms-filter-panel {
  gap: 10px !important;
  margin-bottom: var(--space-md) !important;
}

/* Hover jadi lebih halus (naiknya dikurangi) supaya tidak terlalu "kentara" */
.dms-filter-field:hover {
  transform: translateY(-0.5px) !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 24: lebar kolom tabel dibuat proporsional
   mengikuti ISI kolom masing-masing (bukan melar dipaksa penuh).
   ============================================================
   Permintaan user, 3 September 2026. Akar masalah: .dms-table punya
   min-width:100% (dari awal) - artinya tabel TIDAK BOLEH lebih sempit
   dari wrapper-nya, jadi kalau isi kolom sebenarnya lebih sempit dari
   lebar wrapper, browser "memaksa" melebarkan kolom-kolom supaya penuh -
   hasilnya kolom Company (dan lainnya) jadi lebih lebar dari yg
   dibutuhkan isinya.

   Perbaikan: hapus paksaan min-width:100% itu - tabel jadi murni selebar
   isi kontennya (width:max-content saja). Kalau totalnya lebih sempit
   dari layar, akan ada ruang kosong di kanan - itu WAJAR & DIHARAPKAN
   (tandanya kolom sudah proporsional, bukan dipaksa melebar).

   TIDAK berlaku utk Stock by Company - halaman itu SENGAJA pakai
   table-layout:fixed dgn lebar pasti (utk stabilitas sticky kolom Last
   Stok, sudah dijelaskan sebelumnya) - JANGAN diubah. */

.dms-table {
  min-width: 0 !important;
}

/* Stock TETAP pakai lebar pasti - kecualikan dari aturan di atas. */
#stockCompanyTableWrapper .dms-table {
  min-width: 100% !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 25: tinggi tabel mengikuti ISI DATA, bukan
   selalu memaksa mengisi sisa layar penuh.
   ============================================================
   Permintaan user, 3 September 2026. Akar masalah: .dms-table-wrapper
   pakai flex:1 (SELALU mengisi SEMUA sisa ruang vertikal, brp pun jumlah
   barisnya) - kalau datanya cuma 1-2 baris, sisa ruang kosong yg besar
   di bawahnya bikin tampilan terkesan "kebesaran"/tidak proporsional.

   Perbaikan: flex-grow diubah ke 0 (jangan paksa mengisi ekstra), tinggi
   MENGIKUTI konten (flex-basis:auto). flex-shrink TETAP 1 - jadi kalau
   datanya BANYAK dan melebihi sisa ruang layar, wrapper ini otomatis
   "dipepetkan" muat ke sisa ruang yang ada oleh flexbox, lalu scroll
   internal (overflow:auto yang sudah ada) yang menangani sisanya - tidak
   perlu max-height eksplisit yg berpotensi tidak konsisten dalam konteks
   flex container. */

.dms-table-wrapper {
  flex: 0 1 auto !important;
}

/* ============================================================
   PERBAIKAN LANJUTAN 26: rapikan pola warna baris (zebra) yang
   "belang-belang" tidak konsisten + lembutkan palet warna + tambah
   responsive utk mobile/laptop.
   ============================================================
   Permintaan user, 3 September 2026.

   AKAR MASALAH "belang-belang": setelah banyak perbaikan bertahap,
   kolom Company (sticky-left) punya aturan warna SENDIRI yang beda dari
   sisa baris - kadang dipaksa hijau, kadang ikut zebra putih/abu-abu,
   tidak sinkron dgn warna baris di kolom lainnya. Diperbaiki supaya
   SATU baris = SATU warna konsisten di semua kolomnya. */

/* --- 1. Zebra baris disederhanakan & disamakan di SEMUA kolom --- */
.dms-table tbody tr.dms-row-level-0 {
  background: #ffffff;
}
.dms-table tbody tr.dms-row-level-0 td:first-child {
  background: #ffffff !important;
}

.dms-table tbody tr.dms-row-level-1 {
  background: #f4f9f5;
}
.dms-table tbody tr.dms-row-level-1 td:first-child {
  background: #f4f9f5 !important;
}

.dms-table tbody tr.dms-row-level-2 {
  background: #eaf4ec;
}
.dms-table tbody tr.dms-row-level-2 td:first-child {
  background: #eaf4ec !important;
}

.dms-table tbody tr.dms-row-level-3 {
  background: #e0efe3;
}
.dms-table tbody tr.dms-row-level-3 td:first-child {
  background: #e0efe3 !important;
}

/* Matikan zebra nth-child lama - sudah digantikan warna per-level di atas
   yang lebih konsisten & bermakna (makin dalam level, makin gelap sedikit -
   bantu mata membedakan kedalaman hierarki tanpa perlu lihat indentasi). */
.dms-table tbody tr:nth-child(even) {
  background: inherit;
}

/* --- 2. Palet warna dilembutkan (kurangi saturasi/kontras tajam) --- */
:root {
  --primary-green: #3a9e4a; /* sedikit lebih lembut dari sebelumnya */
  --dark-green: #24693a;
  --border-light: #d8e2dc;
}

/* Warna "di bawah rata-rata" (merah) dilembutkan - dari #d32f2f (merah
   tajam) ke oranye-merah yang lebih nyaman dipandang tapi tetap jelas
   sbg peringatan. */
.dms-table td[style*="d32f2f"] {
  color: #c65b4e !important;
}

/* Garis grid dilembutkan sedikit lagi */
.dms-table tbody td {
  border-right: 1px solid #c9d6cf !important;
  border-bottom: 1px solid #c9d6cf !important;
}

/* --- 3. Responsive - mobile/tablet --- */
@media (max-width: 1023px) {
  .dms-page-title {
    font-size: 1.4rem !important;
  }

  .dms-filter-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dms-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .dms-table {
    font-size: 0.78rem !important;
  }

  .dms-table thead th,
  .dms-table tbody td,
  .dms-table tfoot td {
    padding: 6px 8px !important;
  }
}

@media (max-width: 640px) {
  .dms-filter-panel {
    grid-template-columns: 1fr !important;
  }

  .dms-page-title {
    font-size: 1.15rem !important;
  }

  .dms-content {
    padding: 12px !important;
  }

  .dms-sidebar-toggle {
    display: none !important; /* di HP, cukup andalkan hamburger yg sudah ada */
  }
}