/* ============================================================
   style.css - Aplikasi Stock Opname (Kartu Stok Bahan Operasional)
   (disamakan dengan style.css Pettycash / Daftar Transfer Bank)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg-top:       #7EC8E8;
  --bg-mid:       #5AB3D9;
  --bg-bot:       #3A9AC4;
  --navy:         #0D2158;
  --blue-dark:    #1A4480;
  --blue:         #1E5FAD;
  --blue-light:   #2E80C8;
  --accent:       #D4A847;
  --green:        #16A34A;
  --surface:      rgba(255,255,255,0.22);
  --surface-hov:  rgba(255,255,255,0.32);
  --border:       rgba(255,255,255,0.35);
  --border-dark:  rgba(13,33,88,0.18);
  --text:         #0A1E4E;
  --text-light:   #1A4480;
  --muted:        rgba(10,30,78,0.55);
  --white:        #ffffff;
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 4px 24px rgba(13,33,88,0.13);
  --shadow-lg:    0 8px 40px rgba(13,33,88,0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%,   #A8DCEA 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 85% 100%,  #3D9FC8 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #5AB3D9 0%, #4AA5CF 100%);
  background-attachment: fixed;
}

a { color: var(--blue); }

.wrapper { position: relative; z-index: 1; max-width: 1380px; margin: 0 auto; padding: 0 22px 48px; }

.navbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 14px 0 12px; margin-bottom: 28px;
  border-bottom: 1px solid var(--border); position: relative;
}
.navbar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo-circle {
  width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--accent);
  overflow: hidden; flex-shrink: 0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 16px rgba(212,168,71,0.25), 0 0 0 4px rgba(255,255,255,0.3); font-size: 1.5rem;
}
.logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.brand-text h1 { font-size: 1.05rem; font-weight: 800; color: var(--navy); letter-spacing: -.2px; line-height: 1.2; }
.brand-text p { font-size: .72rem; color: var(--muted); margin-top: 2px; font-weight: 500; }

.nav-menu { position: relative; margin-left: auto; }
.nav-menu-btn {
  display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff;
  border: none; border-radius: var(--radius-sm); padding: 9px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .2s; box-shadow: var(--shadow);
}
.nav-menu-btn:hover { background: var(--blue-dark); }
.nav-menu-btn .arrow { font-size: .65rem; transition: transform .2s; display: inline-block; }
.nav-menu.open .nav-menu-btn .arrow { transform: rotate(180deg); }
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--white);
  border: 1px solid var(--border-dark); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 220px; z-index: 999; overflow: hidden; animation: dropDown .18s ease;
}
@keyframes dropDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nav-menu.open .nav-dropdown { display: block; }
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: .83rem; font-weight: 600;
  color: var(--text); text-decoration: none; transition: background .15s; border-bottom: 1px solid rgba(13,33,88,0.07);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: #EBF5FB; color: var(--blue); }
.nav-dropdown a.active-link { background: #DBEAFE; color: var(--blue); }
.nav-dropdown a .nav-icon { font-size: 1rem; width: 22px; text-align: center; }
.nav-role-badge { background: var(--accent); color: #5a3800; font-size: .65rem; font-weight: 800; padding: 2px 7px; border-radius: 20px; letter-spacing: .4px; }
.nav-user-icon { font-size: .9rem; }
.nav-divider { height: 1px; background: rgba(13,33,88,0.09); margin: 4px 0; }
.nav-logout { color: #991b1b !important; }
.nav-logout:hover { background: #fee2e2 !important; }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.admin-toolbar h2 { font-size: 1.05rem; font-weight: 800; color: var(--navy); }

.category-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.category-tab {
  padding: 9px 18px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-light);
  text-decoration: none; backdrop-filter: blur(8px); transition: all .15s;
}
.category-tab:hover { background: var(--surface-hov); }
.category-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.category-tab .badge-count { background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 8px; margin-left: 6px; font-size: .72rem; }
.category-tab.active .badge-count { background: rgba(255,255,255,.25); }

.controls {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.controls::before { content: ''; position: absolute; inset: 0; background: var(--surface); backdrop-filter: blur(12px); border-radius: inherit; z-index: -1; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-row input, .filter-row select {
  background: rgba(255,255,255,0.55); border: 1.5px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: .82rem; font-family: inherit; outline: none;
  transition: border-color .2s, background .2s;
}
.filter-row input:focus, .filter-row select:focus { border-color: var(--blue); background: rgba(255,255,255,0.8); }

.btn {
  padding: 8px 18px; border-radius: var(--radius-sm); border: none; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .15s; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { background: rgba(13,33,88,.35); cursor: not-allowed; }
.btn-reset { background: rgba(255,255,255,0.45); border: 1px solid var(--border-dark); color: var(--muted); }
.btn-reset:hover { background: rgba(255,255,255,0.7); color: var(--text); }
.btn-outline-danger { background: rgba(239,68,68,.08); border: 1.5px solid rgba(239,68,68,.35); color: #991b1b; }
.btn-outline-danger:hover { background: rgba(239,68,68,.18); }
.btn-sm { padding: 5px 12px; font-size: .74rem; }

.table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); margin-bottom: 20px;
}
.table-head {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.15); flex-wrap: wrap; gap: 10px;
}
.table-head h2 { font-size: .92rem; font-weight: 800; color: var(--navy); }
.record-count { font-size: .76rem; color: var(--muted); font-weight: 600; }

.search-box-wrap { position: relative; display: inline-flex; align-items: center; }
.search-box-wrap .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: .78rem; opacity: .55; pointer-events: none;
}
.search-box-wrap input {
  width: 190px; max-width: 100%;
  background: rgba(255,255,255,0.5); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 6px 12px 6px 30px;
  font-size: .8rem; font-family: inherit; color: var(--text); outline: none;
  transition: border-color .2s, background .2s, width .2s;
}
.search-box-wrap input::placeholder { color: var(--muted); }
.search-box-wrap input:focus { border-color: var(--blue); background: #fff; width: 230px; }

table { width: 100%; border-collapse: collapse; }
thead th {
  background: rgba(13,33,88,0.07); padding: 11px 14px; text-align: left; font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-light); border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(255,255,255,0.4); }
tbody td { padding: 10px 14px; font-size: .82rem; border-bottom: 1px solid rgba(13,33,88,0.06); vertical-align: middle; color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
.text-end { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.small { font-size: .74rem; }

.badge { padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; display: inline-block; white-space: nowrap; }
.badge-basah  { background: rgba(30,95,173,0.15); color: var(--blue-dark); }
.badge-kering { background: rgba(212,168,71,0.20); color: #7c5205; }
.badge-gudang-lain { background: rgba(20,184,166,0.15); color: #0f766e; }
.badge-warn   { background: rgba(239,68,68,0.15); color: #991b1b; }
.badge-ok     { background: rgba(34,197,94,0.15); color: #166534; }

.empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.empty .icon { font-size: 3rem; margin-bottom: 14px; }
.empty p { font-size: .9rem; font-weight: 600; }

.footer { text-align: center; margin-top: 36px; font-size: .73rem; color: var(--muted); font-weight: 600; }

.card-header-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(12px); box-shadow: var(--shadow); padding: 18px 22px; margin-bottom: 18px;
}
.card-header-box h2 { text-align: center; font-size: 1rem; font-weight: 800; color: var(--navy); letter-spacing: .3px; }
.card-header-box .sub { text-align: center; font-size: .8rem; color: var(--text-light); font-weight: 700; margin-top: 2px; }
.card-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin-top: 16px; }
.card-meta-grid .form-field label { display: block; font-size: .76rem; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.card-meta-grid .form-field input, .card-meta-grid .form-field select {
  width: 100%; background: rgba(13,33,88,.04); border: 1.5px solid rgba(13,33,88,.15); border-radius: 8px;
  padding: 8px 11px; font-size: .83rem; font-family: inherit; color: var(--text); outline: none;
}

.opname-row-input { width: 78px; text-align: right; background: rgba(13,33,88,.04); border: 1.5px solid rgba(13,33,88,.15); border-radius: 6px; padding: 6px 8px; font-size: .8rem; font-family: inherit; }
.opname-row-input.wide { width: 100%; text-align: left; }
.opname-row-input.date { width: 128px; }
.opname-row-input:focus { border-color: var(--blue); background: #fff; }
.opname-row-input[readonly] { background: rgba(13,33,88,.08); color: var(--muted); cursor: not-allowed; }
.opname-sisa-cell { font-weight: 800; color: var(--navy); }
.opname-expired { color: #991b1b !important; }
.expiring-soon-badge { display: inline-block; margin-left: 4px; font-size: .68rem; background: rgba(239,68,68,.12); color: #991b1b; border-radius: 8px; padding: 1px 6px; }

/* Kolom Nama Barang dibuat "nempel" di kiri saat tabel isian kartu stok
   digeser ke samping (tablet/HP lebar sedang, sebelum breakpoint kartu
   di bawah) — supaya nama barang tetap kelihatan terus dan staff tidak
   salah isi ke baris yang salah. Dimatikan lagi di bawah breakpoint 561px
   karena di situ tabelnya sudah berubah jadi tumpukan kartu (lihat
   media query 560px), tidak butuh sticky lagi. */
@media (min-width: 561px) {
  .opname-items-table thead th {
    background: #4d9fc9;
  }
  .opname-items-table tbody td {
    background: #6fb8dc;
  }
  .opname-items-table tbody tr:hover td {
    background: #7fc2e2;
  }
  .opname-items-table th:nth-child(2),
  .opname-items-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 2px 0 6px rgba(13,33,88,0.12);
  }
}

.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: .76rem; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.form-field input, .form-field select {
  width: 100%; background: rgba(13,33,88,.04); border: 1.5px solid rgba(13,33,88,.15); border-radius: 8px;
  padding: 8px 11px; font-size: .83rem; font-family: inherit; color: var(--text); outline: none; transition: border-color .2s;
}
.form-field input:focus, .form-field select:focus { border-color: var(--blue); background: #fff; }
.form-field .hint { font-size: .7rem; color: var(--muted); margin-top: 3px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }

.flash { border-radius: 10px; padding: 10px 16px; font-size: .83rem; font-weight: 600; margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; }
.flash-ok  { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.3);  color: #14532d; }
.flash-err { background: rgba(220,38,38,.12);  border: 1px solid rgba(220,38,38,.3);  color: #7f1d1d; }

.icon-btn { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 4px 6px; border-radius: 6px; }
.icon-btn:hover { background: rgba(13,33,88,.08); }
.action-cell { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Grafik statistik (line chart: SVG polyline + titik HTML, tanpa library JS) ─── */
.stat-item-list { padding: 4px 18px 14px; }
.stat-item-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 6px; border-bottom: 1px solid rgba(13,33,88,.08);
}
.stat-item-row:last-child { border-bottom: none; }
.stat-item-name { width: 190px; flex-shrink: 0; font-weight: 700; font-size: .85rem; color: var(--navy); }

.stat-item-chart { position: relative; flex: 1; min-width: 0; }
.stat-line-svg { position: absolute; top: 0; left: 0; width: 100%; height: 56px; overflow: visible; }
.stat-line-svg polyline { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }

.stat-item-points { display: flex; width: 100%; }
.stat-item-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stat-item-dot-area { position: relative; height: 56px; width: 100%; }
.stat-item-col.is-today .stat-item-day-label { color: var(--navy); font-weight: 800; }
.stat-item-day-label { font-size: .62rem; color: var(--text-light); margin-top: 4px; }

.stat-hover-wrap {
  position: absolute; left: 50%; transform: translate(-50%, 50%);
  padding: 8px; margin: -8px; cursor: default; /* padding = area sentuh/hover lebih besar dari titik yang terlihat */
}
.stat-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(13,33,88,.35);
}
.stat-dot.no-data { background: rgba(30,95,173,.4); } /* hari tanpa kartu — sisa cuma dibawa dari hari sebelumnya */
.stat-dot.is-today { box-shadow: 0 0 0 3px rgba(30,95,173,.25), 0 1px 3px rgba(13,33,88,.35); }

/* Tooltip hover, murni CSS (tanpa JS) — muncul di atas titik saat di-hover. */
.stat-tooltip {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; border-radius: 8px; padding: 8px 11px;
  font-size: .72rem; white-space: nowrap; z-index: 50; box-shadow: var(--shadow-lg);
  text-align: left; line-height: 1.5;
}
.stat-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--navy);
}
.stat-tooltip b { color: #fff; }
.stat-tooltip .tt-masuk { color: #86efac; }
.stat-tooltip .tt-keluar { color: #fca5a5; }
.stat-tooltip .text-muted { color: rgba(255,255,255,.65); }
.stat-hover-wrap:hover .stat-tooltip { display: block; }

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 8888; background: rgba(5,15,40,0.70); backdrop-filter: blur(5px);
  align-items: center; justify-content: center; animation: fadeIn .2s ease; padding: 16px;
}
.modal-overlay.show { display: flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes popIn { from { opacity:0; transform: scale(.88); } to { opacity:1; transform: scale(1); } }
.modal-box {
  background: #fff; border-radius: 18px; padding: 32px 30px 28px; width: 100%; max-width: 460px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35); animation: popIn .22s cubic-bezier(.34,1.56,.64,1); position: relative; max-height: 90vh; overflow-y: auto;
}
.modal-box h3 { font-size: 1rem; font-weight: 800; color: var(--navy); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(13,33,88,.1); }
.modal-close {
  position: absolute; top: 16px; right: 16px; background: rgba(13,33,88,.08); border: none; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.modal-close:hover { background: rgba(220,38,38,.15); color: #991b1b; }

.login-page { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 36px 32px; backdrop-filter: blur(14px);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 16px; font-size: 2rem; }
.login-title { text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--navy); margin-bottom: 2px; }
.login-sub { text-align: center; font-size: .78rem; color: var(--muted); margin-bottom: 26px; }
.login-card label { display: block; font-size: .76rem; font-weight: 700; color: var(--navy); margin: 14px 0 5px; }
.login-card input {
  width: 100%; background: rgba(13,33,88,.04); border: 1.5px solid rgba(13,33,88,.15); border-radius: 9px;
  padding: 11px 13px; font-size: .88rem; font-family: inherit; color: var(--text); outline: none;
}
.login-card input:focus { border-color: var(--blue); background: #fff; }
.login-card button {
  width: 100%; margin-top: 22px; padding: 11px; border: none; border-radius: var(--radius-sm); background: var(--navy);
  color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; font-family: inherit; box-shadow: var(--shadow); transition: background .2s;
}
.login-card button:hover { background: var(--blue-dark); }

@media (max-width: 720px) {
  .brand-text h1 { font-size: .92rem; }
  .card-meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  table { font-size: .74rem; }
  thead th, tbody td { padding: 8px 8px; }
  .logo-circle { width: 46px; height: 46px; font-size: 1.2rem; }

  /* Grafik statistik per barang: nama & grafik ditumpuk (bukan sejajar)
     supaya 7 kolom (Senin-Minggu) tetap muat tanpa geser di layar HP. */
  .stat-item-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .stat-item-name { width: auto; }
  .stat-line-svg { height: 44px; }
  .stat-item-dot-area { height: 44px; }
  .stat-item-day-label { font-size: .58rem; }
  .stat-tooltip { font-size: .68rem; padding: 7px 9px; }

  /* Kartu Stok: di layar sempit, tabel isian barang (Masuk/Keluar/Sisa/dst)
     diubah jadi tumpukan kartu per barang — supaya staff bisa mengisi tiap
     baris tanpa harus scroll ke samping berulang kali di HP. Cuma tabel ini
     yang diubah (lihat class .opname-items-table), tabel lain di aplikasi
     (Daftar Kartu, Master Barang, dst.) tetap seperti biasa. */
  .opname-items-table, .opname-items-table thead, .opname-items-table tbody,
  .opname-items-table th, .opname-items-table td, .opname-items-table tr {
    display: block;
  }
  .opname-items-table thead { display: none; }
  .opname-items-table tbody tr {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.45);
  }
  .opname-items-table td {
    border: none; padding: 6px 0; text-align: left !important;
  }
  .opname-items-table td[data-label="No"] { display: none; }
  .opname-items-table td[data-label="Nama Barang"] {
    font-weight: 800; font-size: .88rem; color: var(--navy);
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(13,33,88,.1);
  }
  .opname-items-table td:not([data-label="Nama Barang"]):not([data-label="No"])::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-light); margin-bottom: 3px;
  }
  .opname-items-table .opname-row-input {
    width: 100% !important; max-width: none; font-size: 16px; padding: 9px 8px;
  }
  .opname-items-table .opname-row-input.date { width: 100% !important; }

  /* Daftar Kartu (index.php): sama seperti tabel isian barang di atas, tapi
     untuk daftar kartu stok — supaya tidak perlu geser ke samping di HP
     untuk lihat SPPG/kategori/jumlah item/aksi tiap kartu. */
  .kartu-list-table, .kartu-list-table thead, .kartu-list-table tbody,
  .kartu-list-table th, .kartu-list-table td, .kartu-list-table tr {
    display: block;
  }
  .kartu-list-table thead { display: none; }
  .kartu-list-table tbody tr {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.45);
  }
  .kartu-list-table td {
    border: none; padding: 4px 0; text-align: left !important;
  }
  .kartu-list-table td[data-label="Tanggal"] {
    font-weight: 800; font-size: .9rem; color: var(--navy);
  }
  .kartu-list-table td[data-label="SPPG"] {
    font-size: .74rem; color: var(--muted); margin-top: -2px;
  }
  .kartu-list-table td[data-label="Kategori"] {
    margin: 6px 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(13,33,88,.1);
  }
  .kartu-list-table td:not([data-label="Tanggal"]):not([data-label="SPPG"]):not([data-label="Kategori"]):not([data-label="Aksi"])::before {
    content: attr(data-label);
    display: inline-block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-light); margin-right: 6px;
  }
  .kartu-list-table td[data-label="Aksi"] {
    display: flex !important; justify-content: flex-start !important;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(13,33,88,.1);
  }

  /* Master Barang (barang.php): sama seperti tabel Daftar Kartu di atas. */
  .barang-list-table, .barang-list-table thead, .barang-list-table tbody,
  .barang-list-table th, .barang-list-table td, .barang-list-table tr {
    display: block;
  }
  .barang-list-table thead { display: none; }
  .barang-list-table tbody tr {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.45);
  }
  .barang-list-table td {
    border: none; padding: 4px 0; text-align: left !important;
  }
  .barang-list-table td[data-label="Nama Barang"] {
    font-weight: 800; font-size: .9rem; color: var(--navy);
  }
  .barang-list-table td[data-label="SPPG"] {
    font-size: .74rem; color: var(--muted); margin-top: -2px;
  }
  .barang-list-table td[data-label="Kategori"] {
    margin: 6px 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(13,33,88,.1);
  }
  .barang-list-table td:not([data-label="Nama Barang"]):not([data-label="SPPG"]):not([data-label="Kategori"]):not([data-label="Aksi"])::before {
    content: attr(data-label);
    display: inline-block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-light); margin-right: 6px;
  }
  .barang-list-table td[data-label="Aksi"] {
    display: flex !important; justify-content: flex-start !important;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(13,33,88,.1);
  }

  /* Kelola Gudang (gudang.php): sama seperti tabel Master Barang di atas. */
  .gudang-list-table, .gudang-list-table thead, .gudang-list-table tbody,
  .gudang-list-table th, .gudang-list-table td, .gudang-list-table tr {
    display: block;
  }
  .gudang-list-table thead { display: none; }
  .gudang-list-table tbody tr {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.45);
  }
  .gudang-list-table td {
    border: none; padding: 4px 0; text-align: left !important;
  }
  .gudang-list-table td[data-label="Nama Gudang"] {
    font-weight: 800; font-size: .9rem; color: var(--navy);
  }
  .gudang-list-table td[data-label="SPPG"] {
    font-size: .74rem; color: var(--muted); margin-top: -2px;
  }
  .gudang-list-table td[data-label="Kode"] {
    margin: 6px 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(13,33,88,.1);
  }
  .gudang-list-table td:not([data-label="Nama Gudang"]):not([data-label="SPPG"]):not([data-label="Kode"]):not([data-label="Aksi"])::before {
    content: attr(data-label);
    display: inline-block;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-light); margin-right: 6px;
  }
  .gudang-list-table td[data-label="Aksi"] {
    display: flex !important; justify-content: flex-start !important;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(13,33,88,.1);
  }
}