/* ===== Table Basic (tanpa sticky) ===== */
.table-basic {
  position: relative;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
}
.table-basic table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
  white-space: nowrap;
  background-color: var(--surface);
}
.table-basic tbody tr:hover td {
  background-color: #146cdf4b !important;
}
.table-basic th, .table-basic td {
  border-right: 1px solid var(--stroke-strong);
  border-bottom: 1px solid var(--stroke-strong);
  padding: 6px 10px;
  font-size: var(--fs-table);
  line-height: 1.15;
  color: var(--text);
  vertical-align: middle;
}
.table-basic th:first-child, .table-basic td:first-child {
  border-left: 2px solid var(--stroke-strong);
}
.table-basic thead th {
  border-top: 1px solid var(--stroke-strong);
  background: #616162 !important;
  color: #9ecbff !important;
  text-align: center !important;
  vertical-align: middle;
  font-weight: 600;
  padding: 6px 10px 6px 10px;
  height: 30px;
  min-height: 26px;
  max-height: 40px;
}
.table-basic td {
  height: 28px;
}
.table-basic tfoot td {
  background: #dbeafe !important;
  color: #000 !important;
  font-weight: bold;
  border-top: 2px solid #243241;
}
/* === GLOBAL: ZEBRA STRIPE (tambahkan class 'table-zebra' ke elemen <table>) === */
.table-zebra tbody tr:nth-child(odd) td  { background: rgba(15, 22, 32, 0.35); }
.table-zebra tbody tr:nth-child(even) td { background: rgba(36, 50, 65, 0.75); }
.table-zebra tbody tr:hover td           { background: rgba(13, 110, 253, 0.15) !important; transition: background 0.15s ease; }

/* === GLOBAL: DATE RANGE PICKER (FLATPICKR) === */
.date-range-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
}
.date-range-wrapper .calendar-icon {
  position: absolute;
  right: 5px;
  color: #9ecbff;
  font-size: 15px;
  pointer-events: none;
  user-select: none;
  transition: color 0.25s ease;
}
.date-range-wrapper.active .calendar-icon {
  color: #0d6efd !important;
  text-shadow: 0 0 6px rgba(13,110,253,0.7);
  transition: all 0.25s ease;
}
.date-range-wrapper .flatpickr-range {
  height: 35px !important;
  width: 100%;
  border-radius: 8px;
  border: 2px solid #243241;
  background: #131920;
  color: #e6ebf0;
  padding: 0 10px 0 32px;
  font-weight: 600;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.25s ease;
  font-size: 0.7rem !important;
}
.date-range-wrapper .flatpickr-range:focus {
  outline: none !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
}

/* Paksa value & placeholder flatpickr range selalu rata kiri */
.date-range-wrapper .flatpickr-range,
.date-range-wrapper .flatpickr-range::placeholder {
  text-align: left !important;
}

.date-range-wrapper .flatpickr-range:focus + .calendar-icon,
.date-range-wrapper:hover .calendar-icon {
  color: #0d6efd;
}

/* =====================
   WINS Data Center - Master CSS (v3.2)
   - Body tabel lebih compact
   - Tombol Edit/Delete horizontal, auto width
   ===================== */
:root{
  --gold:#c9a55b;
  --surface:#0f1318;
  --surface-2:#131920;
  --stroke:#1b2530;
  --stroke-strong:#3a556b;
  --text:#e6ebf0;
  --radius:12px;
  --fs-table:.86rem; /* compact */
  --stickyTop:-1px;
  --colNoWidth:25px;
  --control-font-family: inherit;
  --control-font-size: 13px;
  --control-font-weight: 600;
  --control-placeholder-size: 12px;
}
html,body{background:var(--surface); color:var(--text); margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji',sans-serif; min-height:100%;}
a{color:#8dc6ff}

input,
select,
textarea,
button,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-search__field,
.import-toolbar .import-file::file-selector-button,
.import-toolbar .import-file::-webkit-file-upload-button{
  font-family: var(--control-font-family) !important;
  font-size: var(--control-font-size) !important;
  font-weight: var(--control-font-weight) !important;
}

input::placeholder,
textarea::placeholder{
  font-family: var(--control-font-family) !important;
  font-size: var(--control-placeholder-size) !important;
  font-weight: var(--control-font-weight) !important;
  color:#96a3b2;
  opacity:1;
}

button,
input,
select,
textarea{
  line-height: 1.15 !important;
}

/* ===== Global Anti-FOUC ===== */
.fouc-guard{
  opacity:0;
  transition:opacity .15s ease-in;
}
.fouc-guard.is-ready{
  opacity:1;
}

/* Keep form controls in dark theme before page-specific styles apply */
input, select, textarea{
  background:#131920;
  color:#e6ebf0;
  border:2px solid #243241;
}

/* ===== Header / Nav (tetap) ===== */
.header-bar{ position:sticky; top:0; z-index:10000; background:rgba(15,19,24,.97); border-bottom:1px solid var(--stroke); backdrop-filter:saturate(120%) blur(3px); }
.header-top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 18px 6px; }
.logo, .brand-logo img, .header-bar img[src*="logo"]{ display:inline-block; height:56px; max-height:56px; width:auto; object-fit:contain; }
.main-nav{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-top:1px solid rgba(52,80,108,.85);
  border-bottom:1px solid rgba(13,110,253,.22);
  background:linear-gradient(180deg, rgba(15,19,24,.98) 0%, rgba(10,16,24,.98) 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(147,193,236,.06);
  z-index:10001;
  max-width:calc(100vw - 420px);
  overflow:visible;
}
.main-nav::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg, rgba(0,200,255,.08) 0%, rgba(88,178,255,1) 50%, rgba(0,200,255,.08) 100%);
  box-shadow:0 0 12px rgba(90,180,255,.7);
  border-radius:999px;
  pointer-events:none;
}
.main-nav a,
.main-nav .nav-label{
  color:#b9d8ff;
  text-decoration:none;
  font-size:1rem;
  font-weight:700;
  padding:9px 12px;
  line-height:1.15;
  border:1px solid transparent;
  border-radius:10px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
  flex:0 0 auto;
}
.main-nav a:hover,
.main-nav .nav-label:hover{
  color:#eaf4ff;
  background:rgba(30,58,93,.52);
  border-color:#2f4c68;
}
.main-nav a.active{
  color:#fff;
  border-color:#4b7497;
  background:linear-gradient(180deg, rgba(37,86,132,.52) 0%, rgba(26,58,89,.44) 100%);
  box-shadow:inset 0 0 0 1px rgba(125,195,255,.26);
}
.main-nav .nav-label.active,
.main-nav .nav-label.active:hover{
  color:#fff;
  border-color:#4b7497;
  background:linear-gradient(180deg, rgba(37,86,132,.52) 0%, rgba(26,58,89,.44) 100%);
  box-shadow:inset 0 0 0 1px rgba(125,195,255,.26);
}
.nav-drop{ position:relative; flex:0 0 auto; }
.nav-drop > .nav-label{ cursor:default; user-select:none; display:inline-flex; align-items:center; white-space:nowrap; }
.nav-drop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.nav-drop > .nav-label::after{
  content:"▾";
  margin-left:8px;
  font-size:.78em;
  color:#8fb8df;
}
.nav-drop-menu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  min-width:250px;
  background:linear-gradient(180deg, #131a23 0%, #10171f 100%);
  border:1px solid #2f4559;
  border-radius:12px;
  padding:5px;
  max-height:min(72vh, 620px);
  overflow-y:auto;
  overflow-x:hidden;
  box-shadow:0 16px 30px rgba(0,0,0,.38);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:1300;
}
.nav-drop-menu a{
  display:block;
  padding:7px 10px;
  color:#a8c8e8;
  text-decoration:none;
  white-space:nowrap;
  font-size:.84rem;
  border-radius:8px;
  margin:0;
  transition:background .16s ease, color .16s ease;
}
.nav-drop-menu .nav-sub-link{
  margin-left:14px;
}
.nav-drop-menu a:hover{
  background:rgba(40,84,126,.36);
  color:#ffffff;
}
.nav-group-title{
  margin:5px 14px 2px;
  color:#d4ecff;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.nav-group-title-gap{
  margin-top:6px;
}
.revisi-notif-badge{
  display:none;
  background:#dc3545;
  color:#fff;
  border-radius:999px;
  padding:1px 6px;
  font-size:.72rem;
  vertical-align:middle;
}
.kpk-notif-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  z-index:12000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.kpk-notif-panel{
  width:min(520px,95vw);
  background:#101826;
  border:1px solid #243241;
  border-radius:12px;
  padding:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
}
.kpk-notif-title-main{
  margin:0 0 8px;
  color:#dbeafe;
}
.kpk-notif-body{
  color:#cbd5e1;
  font-size:.95rem;
  line-height:1.5;
  max-height:50vh;
  overflow:auto;
}
.kpk-notif-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
.kpk-notif-close{
  background:#0d6efd;
  border:1px solid #0d6efd;
  color:#fff;
  border-radius:8px;
  padding:7px 12px;
  font-weight:600;
  cursor:pointer;
}
.kpk-notif-item{
  padding:8px 0;
  border-bottom:1px solid #243241;
}
.kpk-notif-item-last{
  border-bottom:none;
}
.kpk-notif-item-title{
  font-weight:700;
  color:#e2e8f0;
}
.kpk-notif-item-meta{
  font-size:.86rem;
  color:#94a3b8;
}
.kpk-notif-item-time{
  font-size:.82rem;
  color:#7dd3fc;
}
.header-right-tools{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.stock-notif-wrap{
  position:relative;
}
.stock-notif-bell{
  position:relative;
  height:36px;
  min-width:36px;
  border-radius:10px;
  border:1px solid #2a4258;
  background:#111a24;
  color:#dbeafe;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.stock-notif-bell:hover{
  background:#183047;
}
.stock-notif-icon{
  font-size:17px;
  line-height:1;
}
.stock-notif-badge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:18px;
  height:18px;
  border-radius:999px;
  background:#dc3545;
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}
.stock-notif-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(440px,92vw);
  background:#101826;
  border:1px solid #243241;
  border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  display:none;
  z-index:1400;
}
.stock-notif-header{
  padding:10px 12px;
  border-bottom:1px solid #243241;
  color:#dbeafe;
  font-weight:700;
}
.stock-notif-list{
  max-height:300px;
  overflow:auto;
}
.stock-notif-item{
  padding:10px 12px;
  border-bottom:1px solid #1f2f3f;
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}
.stock-notif-item:hover{
  background:rgba(37, 99, 235, 0.16);
  box-shadow:inset 3px 0 0 #60a5fa;
}
.stock-notif-item:last-child{
  border-bottom:none;
}
.stock-notif-item-title{
  color:#e2e8f0;
  font-weight:700;
  font-size:.9rem;
}
.stock-notif-item-meta{
  color:#93c5fd;
  font-size:.8rem;
  margin-top:2px;
}
.stock-notif-item-time{
  color:#94a3b8;
  font-size:.78rem;
  margin-top:2px;
}
.stock-notif-empty{
  padding:12px;
  color:#94a3b8;
  font-size:.86rem;
}
.stock-notif-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #243241;
}
.stock-notif-footer #stockNotifSeeAll{
  margin-right:auto;
}
.stock-notif-btn{
  border:none;
  border-radius:8px;
  background:#0d6efd;
  color:#fff;
  padding:7px 11px;
  font-weight:600;
  cursor:pointer;
}
.stock-notif-wrap.open .stock-notif-panel{
  display:block;
}
.stock-notif-wrap.open .stock-notif-bell{
  background:#1e3a5f;
}
.ui-help-tip-wrap,
.forecast-help-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  outline:none;
}
.ui-help-tip-icon,
.forecast-help-icon{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  line-height:1;
  color:#e6ebf0;
  background:#3b3b3b;
  border:1px solid #9ecbff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.ui-help-tip-tooltip,
.forecast-help-tooltip{
  display:none;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%);
  width:max-content;
  max-width:260px;
  padding:8px 10px;
  border-radius:8px;
  background:#111827;
  color:#f3f4f6;
  border:1px solid #334155;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  font-size:11px;
  line-height:1.35;
  white-space:normal;
  z-index:20;
}
.ui-help-tip-tooltip::before,
.forecast-help-tooltip::before{
  content:'';
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid #111827;
}
.ui-help-tip-wrap:hover .ui-help-tip-tooltip,
.ui-help-tip-wrap:focus .ui-help-tip-tooltip,
.ui-help-tip-wrap:focus-within .ui-help-tip-tooltip,
.forecast-help-wrap:hover .forecast-help-tooltip,
.forecast-help-wrap:focus .forecast-help-tooltip,
.forecast-help-wrap:focus-within .forecast-help-tooltip{
  display:block;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
@media (max-width:640px){
  .brand-title{ font-size:clamp(22px,5.5vw,28px); }
  .logo, .brand-logo img, .header-bar img[src*="logo"]{ height:44px; max-height:44px; }
}

/* ===== Cards / Layout ===== */
.app-main{ padding:10px 28px 0; max-width:1600px; margin:0 auto; width:100%; box-sizing:border-box; }
.card{ background:var(--surface-2); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; margin:22px 0; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.card h2{ color:#fff; margin:0 0 12px; }

.site-footer{
  position:static;
  margin:24px auto 0;
  width:100%;
  max-width:1600px;
  padding:12px 28px 18px;
  box-sizing:border-box;
  text-align:left;
  color:#cfd8e3;
  font-size:.86rem;
  line-height:1.2;
}

@media (max-width:640px){
  .site-footer{
    margin-top:18px;
    padding:10px 12px 14px;
    font-size:.78rem;
  }
  .app-main{ padding:10px 12px 0; }
}

/* ===== Page Opening Title ===== */
.page-hero{
  margin:0 0 18px 0;
  text-align:center;
}
.page-hero-title{
  margin:0;
  color:#fff;
  font-size:1.58rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1.2;
}

/* ===== Filter form ===== */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select{
  height:30px; padding:0 14px; border-radius:10px; border:2px solid #243241;
  background:#131920; color:#e6ebf0;
}

/* Override untuk semua field tanggal flatpickr (range tanggal) */
.flatpickr-input {
  width: 200px !important;
  min-width: 120px !important;
  max-width: 220px !important;
  height: 44px !important;
  font-size: 1rem !important;
  padding: 10px 14px !important;
  box-sizing: border-box;
  display: block !important;
}

/* Input date: ikon kalender putih default, biru saat hover */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);              /* ikon jadi putih */
  cursor: pointer;
  transition: filter 0.2s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
  filter: invert(38%) sepia(98%) saturate(7476%) hue-rotate(199deg) brightness(97%) contrast(104%);
  /* filter di atas = warna biru */
}

.filters button{
  height:28px; padding:6px 12px; border-radius:8px; border:2px solid #243241;
  background:#121821; color:#e6ebf0; line-height:1.1; font-size:.70rem; width:auto; white-space:nowrap;
}

.filters button{ cursor:pointer; background:#121821; }
.filters button:hover{ filter:brightness(1.12); }

/* ===== Sales form ===== */
#salesForm input, #salesForm select{
  height:44px; padding:0 14px; border-radius:10px; border:2px solid #243241;
  background:#131920; color:#e6ebf0;
}
#salesForm button{
  height:36px; padding:6px 12px; border-radius:8px; border:2px solid #047af9;
  background:#131920; color:#e6ebf0; line-height:1.1; font-size:.80rem; width:auto; white-space:nowrap;
}
#salesForm button[name="simpan"]{ background:#0d6efd !important; border-color:#0d6efd !important; color:#fff !important; cursor:pointer; }
#salesForm button[name="simpan"]:hover{ background:#0b5ed7 !important; border-color:#0b5ed7 !important; }

/* ===== Table ===== */
.table-scroll{ position:relative; overflow:auto; background:var(--surface); border:1px solid var(--stroke); border-radius:12px; }
.table-scroll table{ border-collapse:separate; border-spacing:0; width:100%; margin:0; white-space:nowrap; }

/* ===== Background Colour ===== */
.table-scroll table {
  background-color: #1574d95e; /* biru halus */}
.table-scroll tbody tr:hover td {
  background-color: #146cdf4b !important; /* highlight lebih biru saat hover */}

/* Header sticky */
.table-scroll thead{ position:sticky; top:var(--stickyTop); z-index:60; background:var(--surface); }
.table-scroll thead th{
  position:sticky; top:var(--stickyTop); z-index:60;
  background:#616162 !important;
  border-bottom:1px solid var(--stroke-strong);
  color:#9ecbff !important;
  padding:0 10px;
  line-height:1.1;
  height:25px;
  min-height:22px;
  max-height:44px;
  text-align:center !important;
  vertical-align:middle;
  font-weight:600;
}

/* ====== tfoot Sticky ======= */
.table-scroll tfoot {
  position: sticky;
  bottom: 0;
  z-index: 500;
  background: #dbeafe !important; /* biru pastel */
}

.table-scroll tfoot td {
  color: #000 !important;         /* teks hitam */
  font-weight: bold;
  border-top: 2px solid #243241;  /* garis pemisah */
}

/* Body lebih compact */
.table-scroll th, .table-scroll td{
  border-right:1px solid var(--stroke-strong); border-bottom:1px solid var(--stroke-strong);
  padding:6px 10px; font-size:var(--fs-table); line-height:1.15; color:var(--text);
  vertical-align:middle;
}
.table-scroll th:first-child, .table-scroll td:first-child{ border-left:2px solid var(--stroke-strong); }
.table-scroll thead th{ border-top:1px solid var(--stroke-strong); }

/* Sticky kiri (No, Tanggal) */
.table-scroll thead th:nth-child(1), .table-scroll tbody td:nth-child(1){
  position:sticky; left:0; background:var(--surface); box-shadow:1px 0 0 var(--stroke-strong); z-index:70;
}



/* ==== Sticky kanan kolom No. Transaksi dan Aksi ==== */

.table-scroll thead th:last-child,
.table-scroll tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 73;
  background: var(--surface);
  min-width: 80px;
  max-width: 80px;
  width: 80px;
}

/* Style isi kolom aksi */
.table-scroll tbody td:last-child {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  min-width: max-content;
  max-width: none;
  padding: 6px 8px;
  text-align: center;
}
.table-scroll tbody td:last-child a {
  display: inline-flex !important;
  width: auto !important;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 0 !important;
  text-decoration: none;
}

/* Solid rows + hover */
.table-scroll tbody tr > td{ background:var(--surface) !important; }
.table-scroll tbody tr.row-profit > td{ background:#163b25 !important; }
.table-scroll tbody tr.row-loss  > td{ background:#3b1a1a !important; }
.table-scroll tbody tr.row-zero  > td{ background:#2f2a12 !important; }
.table-scroll tbody tr:hover > td{ filter:brightness(1.05); }

/* Sticky Fix */
.table-scroll thead{ z-index: 380 !important; }
.table-scroll thead th{ position: sticky; top: var(--stickyTop, 0px); z-index: 400 !important; background: var(--surface); }
.table-scroll thead th:nth-child(1), .table-scroll thead th:nth-child(2){ z-index: 420 !important; }
.table-scroll tbody td:nth-child(1), .table-scroll tbody td:nth-child(2){ position: sticky; z-index: 360 !important; }
.table-scroll thead th:nth-child(1), .table-scroll tbody td:nth-child(1){ box-shadow: 1px 0 0 var(--stroke-strong); }
.table-scroll thead th:nth-child(2), .table-scroll tbody td:nth-child(2){ box-shadow: 1px 0 0 var(--stroke-strong); }


/* Header: lapisan paling atas */
.table-scroll thead{ z-index: 380 !important; }
.table-scroll thead th{
  position: sticky;                 /* pastikan sticky aktif */
  top: var(--stickyTop, 0px);       /* jika perlu, ubah -1px → 0px */
  z-index: 400 !important;          /* DI ATAS semua sel body */
  background: var(--surface);       /* solid agar tidak “tembus” */
}

/* Header No, Tanggal, Aksi sedikit lebih tinggi lagi */
.table-scroll thead th:nth-child(1),
.table-scroll thead th:nth-child(2),
.table-scroll thead th:last-child{
  z-index: 420 !important;
}

/* Body sticky kiri/kanan di bawah header */
.table-scroll tbody td:nth-child(1),
.table-scroll tbody td:nth-child(2),
.table-scroll tbody td:last-child{
  position: sticky;
  z-index: 360 !important;          /* < 400 agar tak menutup header */
}

/* Bayangan pemisah agar rapi saat overlap */
.table-scroll thead th:nth-child(1),
.table-scroll tbody td:nth-child(1){ box-shadow: 1px 0 0 var(--stroke-strong); }
.table-scroll thead th:nth-child(2),
.table-scroll tbody td:nth-child(2){ box-shadow: 1px 0 0 var(--stroke-strong); }

/* Submenu tetap: .nav-drop-menu a { font-size: .95rem; } */

/* === Global Search + Button Colors (Filter Data Penjualan / card ke-2) === */
.app-main > .card:nth-of-type(2) .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Input pencarian di kiri (auto grow) */
.app-main > .card:nth-of-type(2) .filters .filter-any{
  order:0;                    /* tampil paling kiri */
  flex:1 1 280px;             /* lebar fleksibel, min ~280px */
  height:44px; padding:0 14px;
  border-radius:10px;
  border:2px solid #243241;
  background:#131920; color:#e6ebf0;
}

/* Tombol Terapkan (biru) */
.app-main > .card:nth-of-type(2) .filters button[type="submit"]{
  background:#0d6efd !important; border-color:#0d6efd !important; color:#fff !important;
}
.app-main > .card:nth-of-type(2) .filters button[type="submit"]:hover{
  filter:brightness(1.08);
}

/* Tombol Reset (merah) -> berada di <a href="...sales.php"><button>Reset</button></a> */
.app-main > .card:nth-of-type(2) .filters a[href*="sales.php"] > button{
  background:#dc3545 !important; border-color:#dc3545 !important; color:#fff !important;
}
.app-main > .card:nth-of-type(2) .filters a[href*="sales.php"] > button:hover{
  filter:brightness(1.08);
}

/* Tombol Export (hijau) -> <a href="export_sales.php?..."><button>Export to Excel</button></a> */
.app-main > .card:nth-of-type(2) .filters a[href*="export_sales.php"] > button{
  background:#198754 !important; border-color:#198754 !important; color:#fff !important;
}
.app-main > .card:nth-of-type(2) .filters a[href*="export_sales.php"] > button:hover{
  filter:brightness(1.08);
}

/* Laporan Pemindahan filter controls */
.lp-pemindahan-filter .lp-search-btn,
.lp-pemindahan-filter .lp-reset-btn{
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:8px;
  text-decoration:none;
  line-height:1;
  font-size:1rem;
  font-weight:600;
}
.lp-pemindahan-filter .lp-search-btn{
  min-width:86px;
}
.lp-pemindahan-filter .lp-reset-btn{
  min-width:92px;
}
.lp-pemindahan-filter .lp-search-btn:hover,
.lp-pemindahan-filter .lp-reset-btn:hover{
  filter:brightness(1.08);
}

/* Sembunyikan baris yang tidak match tanpa mengganggu pagination (JS hanya set data-match=0/1) */
.table-scroll tbody tr[data-match="0"]{ display:none !important; }

/* ===== PATCH: Edit Barang same-row layout ===== */
.card.edit-product .edit-grid{
  display:grid; grid-template-columns: minmax(420px, 1fr) 260px 240px auto; gap:14px 16px; align-items:end;
}
.card.edit-product .field{ display:flex; flex-direction:column; gap:8px; }
.card.edit-product .field label{ color:#b9d8ff; font-weight:600; }
.card.edit-product .field input{
  height:44px; padding:0 14px; border-radius:10px; border:2px solid #243241; background:#131920; color:#e6ebf0;
}
.card.edit-product .actions{ grid-column:4; display:flex; gap:10px; justify-self:start; align-items:center; }
.card.edit-product .btn-primary{ background:#0d6efd; border:2px solid #0d6efd; color:#fff; height:36px; padding:6px 14px; border-radius:8px; }
.card.edit-product .btn-secondary{ display:inline-flex; align-items:center; text-decoration:none; background:#f60404; color:#e6ebf0; border:2px solid #243241; height:21px; padding:6px 14px; border-radius:8px; }

/* Tombol: gunakan gaya konsisten */
.card.edit-product .btn-primary{
  background:#0d6efd; border:2px solid #0d6efd; color:#fff;
  height:36px; padding:6px 14px; border-radius:8px; white-space:nowrap;
}
.card.edit-product .btn-secondary{
  display:inline-flex; align-items:center; text-decoration:none;
  background:#f60404; color:#e6ebf0; border:2px solid #243241;
  height:21px; padding:6px 14px; border-radius:8px; white-space:nowrap;
}
.card.edit-product .btn-primary:hover,
.card.edit-product .btn-secondary:hover{ filter:brightness(1.08); }

/* Responsif: di layar sedang-kecil, biar tetap rapi */
@media (max-width: 1100px){
  .card.edit-product .edit-grid{
    grid-template-columns: 1fr 1fr; /* Nama & SKU atas, Harga & Aksi bawah */
  }
  .card.edit-product .name{ grid-column:1 / -1; }
  .card.edit-product .sku{ grid-column:auto; }
  .card.edit-product .harga{ grid-column:auto; }
  .card.edit-product .actions{ grid-column:1 / -1; justify-content:flex-start; }
}

/* ===== Modern Table Pager (dark theme) ===== */

.table-pager{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0 12px;
  width:100%;
}
.table-pager .pager-stat{
  color:#b9d8ff;
  opacity:.9;
  font-size:.95rem;
  white-space:nowrap;
}
/* Tombol Prev & Next tetap polos */
.table-pager .pager-prev,
.table-pager .pager-next {
  background:#121821 !important;
  border:2px solid #243241 !important;
  color:#e6ebf0 !important;
}

/* Nomor halaman aktif tetap biru */
.table-pager .page-pill.is-active {
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
  font-weight:bold;
}
/* Buttons */
.table-pager .btn,
.table-pager .btn-pager,
.table-pager button,
.table-pager a,
.table-pager input[type=button]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:1 12px;
  border-radius:8px;
  border:2px solid #24412a;
  background:#122118;
  color:#e6ebf0;
  text-decoration:none;
  cursor:pointer;
  transition:.15s ease;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
.table-pager .btn:hover,
.table-pager .btn-pager:hover,
.table-pager button:hover,
.table-pager a:hover,
.table-pager input[type=button]:hover{
  filter:brightness(1.08);
}
/* Primary (Prev/Next) */
.table-pager .is-primary{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}
/* Icons */
.table-pager .pager-prev::before{ content:"‹"; margin-right:6px; font-size:14px; line-height:1; }
.table-pager .pager-next::after{ content:"›"; margin-left:6px; font-size:14px; line-height:1; }
/* Compact page number pills */
.table-pager .page-pill{
  background:#0f1620;
  border-color:#2c3a4a;
}
.table-pager .page-pill.is-active{
  background:#19324a;
  border-color:#345e89;
}
.table-pager .page-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px; height:25px;
  margin:0 -3px;
  border-radius:6px;
  background:#0f1620;
  border:1px solid #2c3a4a;
  color:#b9d8ff;
  cursor:pointer;
  text-decoration:none;
}

.table-pager .page-pill:hover {
  filter:brightness(1.15);
}

.table-pager .page-pill.is-active {
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
  font-weight:bold;
}

/* ===== PATCH: Input Data Barang (Create) — samakan dengan layout Edit ===== */
.card.products-create .create-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:14px 16px;
  align-items:end;
}
.card.products-create .field{ display:flex; flex-direction:column; gap:8px; }
.card.products-create .field label{ color:#b9d8ff; font-weight:600; }
.card.products-create .field input{
  height:44px; padding:0 14px; border-radius:10px; border:2px solid #243241;
  background:#131920; color:#e6ebf0;
}
.card.products-create .name{ grid-column:1; }
.card.products-create .sku{ grid-column:2; }
.card.products-create .harga{ grid-column:3; }
.card.products-create .actions{ grid-column:4; display:flex; gap:10px; align-items:center; }
.card.products-create .actions .btn-primary{
  background:#0d6efd; border:2px solid #0d6efd; color:#fff;
  height:36px; padding:6px 14px; border-radius:8px; white-space:nowrap;
}
.card.products-create .actions .btn-primary:hover{ filter:brightness(1.08); }

/* Responsif agar tidak pecah di layar sedang-kecil */
@media (max-width: 1100px){
  .card.products-create .create-grid{ grid-template-columns: 1fr 1fr; }
  .card.products-create .name{ grid-column:1 / -1; }
  .card.products-create .actions{ grid-column:1 / -1; justify-content:flex-start; }
}


/* ===== Sales (create & edit) label spacing ===== */
.card .filters label, .sales-edit-grid label{
  font-weight:600; color:#b9d8ff;
}

/* === Sales Edit Equalizer: buat EDIT persis dengan Input (sales.php) === */
/* Gunakan ID yang sama (#salesForm) supaya style tombol/field identik */
#salesForm.sales-edit-equal{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

/* Setiap pasangan label+field adalah satu flex-item */
#salesForm.sales-edit-equal > .fi{ flex: 1 260px; min-width:220px; display:flex; flex-direction:column; }
#salesForm.sales-edit-equal > .fi > label{
  font-weight:600; color:#b9d8ff; margin:0 0 6px;
}

/* Samakan tinggi, radius, border, warna persis create (sudah ada di #salesForm input/select) */

/* Urutan & lebar mengikuti form Input (sales.php) */
#salesForm.sales-edit-equal > .fi.tanggal     { order:10; }
#salesForm.sales-edit-equal > .fi.invoice     { order:20; }
#salesForm.sales-edit-equal > .fi.ekspedisi   { order:30; }
#salesForm.sales-edit-equal > .fi.platform    { order:40; }
/* Nama Barang lebih lebar (seperti create) */
#salesForm.sales-edit-equal > .fi.barang      { order:50; flex:2 1 480px; }

#salesForm.sales-edit-equal > .fi.harga       { order:60; flex:0 1 220px; }
#salesForm.sales-edit-equal > .fi.qty         { order:70; flex:0 1 180px; }
#salesForm.sales-edit-equal > .fi.net         { order:80; }
#salesForm.sales-edit-equal > .fi.nama        { order:90; }
#salesForm.sales-edit-equal > .fi.penerima    { order:100; }

/* Tombol Update/Batal kanan, satu baris dengan baris 2 */
#salesForm.sales-edit-equal > .fi.actions{
  order:110; flex:0 0 auto; display:flex; gap:10px; align-items:center; white-space:nowrap;
}

/* Tombol style sama dengan Simpan (create) */
#salesForm.sales-edit-equal .fi.actions button[type="submit"]{
  background:#0d6efd; border:2px solid #0d6efd; color:#fff;
  height:36px; padding:6px 12px; border-radius:8px;
}
#salesForm.sales-edit-equal .fi.actions .btn-cancel{
  display:inline-flex; align-items:center; text-decoration:none;
  background:#121821; color:#e6ebf0; border:2px solid #243241;
  height:36px; padding:6px 12px; border-radius:8px;
}

/* Dashboard cards */
.dash-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
.dash-card{ background: var(--surface); border: 1px solid var(--stroke); border-radius: 12px; padding: 14px 16px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.dash-card .kpi-label{ color:#b9d8ff; font-size:.95rem; margin-bottom:6px; }
.dash-card .kpi-value{ color:#fff; font-weight:800; font-size: clamp(18px, 2.6vw, 28px); letter-spacing:.2px; }
.dash-card.primary .kpi-value{ color:#8dc6ff; }
.dash-card.success .kpi-value{ color:#43d39e; }
.dash-card.subtle  .kpi-value{ color:#dcdcdc; }

/* dua kolom tabel berdampingan */
.dash-two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 1100px){ .dash-two-col{ grid-template-columns: 1fr; } }

/* rapikan header tabel dashboard */
.dash-two-col .table-scroll thead th,
.dash-cards + .table-scroll thead th{
  top: var(--stickyTop, 0px);
  z-index: 400;
}

.account-menu{
  justify-self:end;
  align-self:center;
  position:relative;
  border:1.5px solid #35516b;
  border-radius:999px;
  padding:2px 8px 2px 7px;
  background:linear-gradient(180deg, rgba(18,27,38,.94) 0%, rgba(12,19,27,.98) 100%);
  box-shadow:inset 0 0 0 1px rgba(140,190,235,.08), 0 0 0 1px rgba(0,0,0,.15);
}

.account-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}

.account-toggle{
  cursor:pointer;
  color:#fff;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:.78rem;
  padding:2px 0;
  white-space:nowrap;
}

.account-profile-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(91,138,187,.28) 0%, rgba(35,62,92,.28) 100%);
  color:#cbe7ff;
  border:1px solid #4d6f91;
  flex:0 0 auto;
}

.account-profile-icon svg{
  width:12px;
  height:12px;
  display:block;
}

.account-text{
  line-height:1;
  letter-spacing:.1px;
}

.account-caret{
  color:#8ebae5;
  font-size:.82em;
  line-height:1;
}

.account-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:linear-gradient(180deg, #141d27 0%, #101720 100%);
  border:1.5px solid #35516b;
  border-radius:12px;
  min-width:190px;
  box-shadow:0 14px 28px rgba(0,0,0,.35);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:1400;
}

.account-dropdown .account-username{
  font-weight:700;
  padding:8px 10px;
  color:#ffffff;
  border-bottom:1px solid #35516b;
  margin-bottom:4px;
}

.account-dropdown a{
  display:block;
  padding:7px 10px;
  color:#d5e7fb;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
}

.account-dropdown a:hover{
  background:rgba(35,84,129,.48);
  color:#fff;
}

.account-menu:hover .account-dropdown,
.account-menu:focus-within .account-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

@media (max-width: 900px){
  .header-top{
    grid-template-columns:auto 1fr auto;
    gap:8px;
    padding:8px 12px 6px;
  }

  .main-nav{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    max-width:none;
    overflow:visible;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 10px;
    border-top:1px solid rgba(52,80,108,.85);
    border-bottom:1px solid rgba(13,110,253,.2);
    background:linear-gradient(180deg, rgba(15,19,24,.96) 0%, rgba(13,18,24,.96) 100%);
  }

  .main-nav::after{
    left:12px;
    right:12px;
  }

  .main-nav a,
  .main-nav .nav-label,
  .main-nav > .nav-drop > .nav-label{
    font-size:.92rem !important;
    padding:7px 9px;
  }

  .nav-drop-menu{
    position:absolute;
    left:50%;
    top:calc(100% + 8px);
    min-width:min(92vw, 320px);
    width:min(92vw, 320px);
    max-width:min(92vw, 320px);
    max-height:calc(100vh - 180px);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translateX(-50%);
    padding:4px;
    z-index:1500;
  }

  .nav-drop-menu a{
    font-size:.8rem;
    color:#9fbbe0;
    padding:6px 8px;
  }

  .nav-group-title{
    color:#e0f3ff;
    font-size:.74rem;
    margin:4px 12px 1px;
  }

  /* Mobile: submenu dibuka via klik (.open), bukan hover. */
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu{
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    pointer-events:none;
  }

  .nav-drop.open .nav-drop-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .account-menu{
    padding:2px 7px 2px 5px;
  }

  .account-toggle{
    gap:4px;
    font-size:.74rem;
  }

  .account-profile-icon{
    width:16px;
    height:16px;
  }

  .account-profile-icon svg{
    width:10px;
    height:10px;
  }

  .account-dropdown{
    min-width:180px;
  }
}

@media (max-width: 640px){
  .nav-drop-menu{
    min-width:min(94vw, 300px);
    width:min(94vw, 300px);
    max-width:min(94vw, 300px);
    max-height:calc(100vh - 160px);
  }

  .nav-drop-menu a{
    font-size:.78rem;
    padding:6px 7px;
  }
}

/* Hand cursor untuk semua tombol */
.btn,
.btn-primary,
.btn-white,
.btn-edit,
.btn-del,
#btn-save,
#btn-cancel,
.table-scroll table td .btn,
.filters button {
  cursor: pointer;
}

.toast {
  position: fixed;
  top: 10%; /* dinaikkan sedikit (dari 40% → 35%) */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: #0d6efd;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 99999;
  pointer-events: none;

  /* 👇 Batas ukuran */
  display: inline-block;   /* biar selebar teks */
  max-width: 80%;          /* jaga kalau teks panjang */
  text-align: center;      /* teks rata tengah */
  white-space: nowrap;     /* jangan terpotong ke baris baru */
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.table-scroll thead th {
  background-color: #616162  !important; /* abu sedang */
  color: #ffffff;
  font-weight: 600;
}

/* ==== Fix kolom No & Tanggal pada tabel sales ==== */
.table-scroll thead th:first-child,
.table-scroll tbody td:first-child {
  min-width: 25px;
  max-width: 40px;
  text-align: center;
}

.table-scroll thead th:nth-child(2),
.table-scroll tbody td:nth-child(2) {
  min-width: 20px;
  text-align: left;
}

/* Jangan biarkan teks pecah baris */
.table-scroll thead th,
.table-scroll tbody td {
  white-space: nowrap;
  padding: 6px 10px;
}

/* Kolom sticky selalu pakai background solid */
.table-scroll thead th:nth-child(1),
.table-scroll thead th:nth-child(2),
.table-scroll tbody td:nth-child(1),
.table-scroll tbody td:nth-child(2),
.table-scroll tbody td:last-child {
  background: #131920; /* warna gelap konsisten */
}

/* Form sales with label */
#salesForm .field{ display:flex; flex-direction:column; gap:6px; }
#salesForm .field label{ font-weight:600; color:#b9d8ff; font-size:.9rem; }
@media (max-width: 992px){ #salesForm{ grid-template-columns: 1fr !important; } #salesForm .actions{ justify-content:flex-start; } }

.sales-edit-grid .field{ display:flex; flex-direction:column; gap:6px; }
.sales-edit-grid .field label{ font-weight:600; color:#b9d8ff; font-size:.9rem; }
@media (max-width: 992px){ .sales-edit-grid{ grid-template-columns: 1fr !important; } .sales-edit-grid .actions{ justify-content:flex-start; } }

.sales-edit-grid input, .sales-edit-grid select{
  height: 44px; padding: 0 14px; border-radius: 10px; border: 2px solid #243241; background: #131920; color:#e6ebf0;
}

/* ==== Modal SN ==== */
#snModal .modal-content {
  background: #131920;
  border-radius: 12px;
  padding: 20px;
  width: 400px;
  max-height: 80%;
  overflow-y: auto;
  color: #e6ebf0;
  border: 1px solid #243241;
}

#snModal h3 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 14px;
}

#snModal input {
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 2px solid #243241;
  background: #0f1620;
  color: #e6ebf0;
}

#snModal button {
  height: 38px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

#snModal button[onclick*="close"] {
  background: #6c757d;
  border: 2px solid #6c757d;
  color: #fff;
}

#snModal button[onclick*="close"]:hover {
  background: #5a6268;
  border-color: #545b62;
}

#snModal button[onclick*="save"] {
  background: #0d6efd;
  border: 2px solid #0d6efd;
  color: #fff;
}

#snModal button[onclick*="save"]:hover {
  background: #0b5ed7;
  border-color: #0a58ca;
}

/* === Base Button === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  padding: 0 16px;
  height: 44px;
  font-size: .9rem;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: all .2s ease;
}

/* Primary (biru) */
.btn-primary {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.btn-primary:hover {
  background: #0b5ed7;
  border-color: #0a58ca;
}

/* Success (hijau) */
.btn-success {
  background: #198754;
  border-color: #198754;
  color: #fff;
}
.btn-success:hover {
  background: #157347;
  border-color: #146c43;
}

/* Danger (merah) */
.btn-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.btn-danger:hover {
  background: #bb2d3b;
  border-color: #b02a37;
}

/* Secondary (abu-abu gelap) */
.btn-secondary {
  background: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
.btn-secondary:hover {
  background: #9b8258;
  border-color: #545b62;
}

/* menghilangkan tanda x di select drop menu */
.select2-selection__clear {
  display: none !important;
}

/* ===== Cancel Order (oranye) ===== */
.btn-warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.btn-warning:hover {
  background: #d97706;
  border-color: #b45309;
}

/* === Compact Buttons for Table Action & SN === */
.table-scroll tbody td a.btn,
.table-scroll tbody td button.btn {
  height: 10px !important;
  padding: 4px 1px !important;
  font-size: 0.78rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  
  align-items: center !important;
  justify-content: center !important;
}

/* Tombol SN di kolom Serial Number (sekarang urutan ke-3 dari kanan) */
.table-scroll tbody td:nth-last-child(3) .btn-sn {
  padding: 9px 12px !important;
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
.table-scroll tbody td:nth-last-child(3) .btn-sn:hover {
  background: #0b5ed7 !important;
}

/* Ukuran tetap kecil untuk tombol di kolom aksi (kolom terakhir) */
.table-scroll tbody td:last-child .btn {
  min-width: 50px;
}

.table-scroll thead th:last-child,
.table-scroll tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 73;
  background: var(--surface);
}