/*====================
Blok 1 — Card Mobile Stok: mengatur tampilan setiap baris barang sebagai kartu, termasuk nama barang, SKU, kategori, saldo, dan satuan.
======================*/
@media (max-width:768px) {

  /* Table Container */

  #stokTableBody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .table-container:has(#stokTableBody) {
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }


  /* Table */

  .table-container:has(#stokTableBody) .data-table {
    display:block;
    width:100%;
  }

  .table-container:has(#stokTableBody) .data-table thead {
    display:none;
  }

  .table-container:has(#stokTableBody) .data-table tbody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }


  /* Stok Card */

  .stok-table-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "name actions"
      "sku actions"
      "kategori saldo"
      "satuan saldo";
    gap:5px 12px;
    width:100%;
    padding:15px 16px 15px 18px;
    background:var(--bg-card,#ffffff);
    border:1px solid var(--border-color,#e2e8f0);
    border-radius:14px;
    box-shadow:0 1px 3px rgba(15,23,42,0.04);
    overflow:hidden;
  }

  .stok-table-row:hover {
    background:var(--bg-card,#ffffff);
  }

  .stok-table-row::before {
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:3px;
    background:var(--primary,#2563eb);
    border-radius:0 4px 4px 0;
  }


  /* Hide Number */

  .stok-no {
    display:none;
  }


  /* Nama Barang */

  .stok-name {
    grid-area:name;
    min-width:0;
    padding:0 !important;
    border:none;
    font-size:13px;
    line-height:1.35;
    color:var(--text-main,#1e293b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .stok-name strong {
    display:block;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }


  /* SKU */

  .stok-sku {
    grid-area:sku;
    min-width:0;
    padding:0 !important;
    border:none;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .stok-sku code {
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    color:inherit;
  }


  /* Actions */

  .stok-actions {
    grid-area:actions;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:4px;
    padding:0 !important;
    border:none;
  }

  .stok-actions .btn-action {
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:9px;
  }

  .stok-actions .btn-action svg {
    width:17px;
    height:17px;
  }


  /* Kategori */

  .stok-kategori {
    grid-area:kategori;
    display:flex;
    align-items:center;
    min-width:0;
    padding:6px 0 0 !important;
    border:none;
    font-size:10px;
  }

  .stok-kategori .badge {
    padding:4px 8px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
  }


  /* Saldo */

  .stok-saldo {
    grid-area:saldo;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:5px;
    padding:4px 0 0 !important;
    border:none;
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

  .stok-saldo::before {
    content:"Stok";
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

  .stok-saldo strong {
    font-size:16px;
    font-weight:700;
    color:var(--text-main,#1e293b);
  }


  /* Satuan */

  .stok-satuan {
    grid-area:satuan;
    display:flex;
    align-items:flex-end;
    padding:4px 0 0 !important;
    border:none;
    font-size:10px;
    color:var(--text-muted,#64748b);
  }


  /* Remove Table Borders */

  .table-container:has(#stokTableBody) .data-table tbody td {
    border-bottom:none;
  }


  /* Empty State */

  #stokTableBody tr:not(.stok-table-row) {
    display:block;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  #stokTableBody tr:not(.stok-table-row) td {
    display:block;
    padding:2rem 1rem !important;
    border:none;
  }

}

/*====================
Blok 2 — Page Stok Mobile: mengatur tata letak halaman Stok, monitoring, grafik pergerakan, filter riwayat, dan nilai inventaris.
======================*/
@media (max-width:768px) {

  /* Page Structure */

  .stok-page {
    gap:24px;
  }

  .stok-summary-section,
  .stok-monitoring-section,
  .stok-movement-section,
  .stok-history-section,
  .stok-value-section {
    width:100%;
  }

  /* Section Header */

  .stok-section-header {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:14px;
  }

  .stok-section-header h3 {
    margin:0 0 4px;
    font-size:16px;
    line-height:1.35;
    color:var(--text-main);
  }

  .stok-section-header p {
    margin:0;
    font-size:11px;
    line-height:1.5;
    color:var(--text-muted);
  }


  /* Header Monitoring Mobile */

  .stok-monitor-card:has(#stokKritisCount) .stok-monitor-header {
    margin: -16px -16px 0;
    padding: 14px 16px;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    border-radius: 13px 13px 0 0;
  }

  .stok-monitor-card:has(#stokHabisCount) .stok-monitor-header {
    margin: -16px -16px 0;
    padding: 14px 16px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    border-radius: 13px 13px 0 0;
  }

  .stok-monitor-card:has(#stokKritisCount) .stok-monitor-count {
    background: #ffedd5;
    color: #c2410c;
  }

  .stok-monitor-card:has(#stokHabisCount) .stok-monitor-count {
    background: #fee2e2;
    color: #b91c1c;
  }


  .stok-monitor-card:has(#stokKategoriList) .stok-monitor-header {
    margin: -16px -16px 0;
    padding: 14px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    border-radius: 13px 13px 0 0;
  }

  .stok-monitor-card:has(#stokKategoriList) .stok-monitor-header h3 {
    color: #1d4ed8;
  }


  /* Monitoring */

  .stok-monitoring-section {
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .stok-monitor-card {
    width:100%;
    padding:16px;
    border-radius:14px;
  }

  .stok-monitor-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }

  .stok-monitor-header h3 {
    margin:0 0 4px;
    font-size:14px;
    line-height:1.35;
  }

  .stok-monitor-header p {
    margin:0;
    font-size:10px;
    line-height:1.5;
  }

  .stok-monitor-count {
    flex:0 0 auto;
    min-width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    border-radius:9px;
    background:var(--primary-50,#eff6ff);
    color:var(--primary,#2563eb);
    font-size:11px;
    font-weight:700;
  }

  .stok-monitor-body {
    margin-top:14px;
  }

  .stok-empty-state {
    padding:18px 10px;
    font-size:11px;
    text-align:center;
    color:var(--text-muted);
  }



  /* Kategori Stok Mobile */

  .stok-kategori-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .stok-kategori-item {
    padding: 13px;
    border-radius: 11px;
    gap: 6px;
  }

  .stok-kategori-nama {
    font-size: 13px;
  }

  .stok-kategori-item > strong {
    font-size: 11px;
  }

  .stok-kategori-status {
    font-size: 10px;
  }

  #stokKategoriDetail {
    margin-top: 16px;
    padding-top: 14px;
  }

  .stok-kategori-detail-header {
    align-items: center;
    gap: 8px;
  }

  .stok-kategori-detail-header h4 {
    font-size: 13px;
  }

  .stok-monitor-item {
    gap: 10px;
    padding: 12px 0;
  }

  .stok-monitor-item-main strong {
    font-size: 11px;
  }

  .stok-monitor-item-value strong {
    font-size: 13px;
  }

  .stok-monitor-item-value span {
    font-size: 9px;
  }


  /* Movement */

  .stok-period-filter {
    width:100%;
  }

  .stok-period-filter .form-control {
    width:100%;
  }

  .stok-custom-period {
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    padding:12px;
    margin-bottom:14px;
    background:var(--bg-soft,#f7f9fc);
    border:1px solid var(--border-color,#e5eaf2);
    border-radius:12px;
  }

  .stok-custom-period .filter-box {
    width:100%;
  }

  .stok-custom-period label,
  .stok-history-filter label {
    display:block;
    margin-bottom:6px;
    font-size:10px;
    font-weight:600;
    color:var(--text-secondary,#64748b);
  }

  .stok-custom-period .btn {
    width:100%;
    min-height:42px;
  }

  .stok-movement-summary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
  }

  .stok-movement-item {
    min-width:0;
    padding:13px;
    background:var(--bg-card,#ffffff);
    border:1px solid var(--border-color,#e5eaf2);
    border-radius:12px;
  }

  .stok-movement-label {
    display:block;
    margin-bottom:5px;
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

  .stok-movement-item strong {
    display:block;
    font-size:17px;
    line-height:1.2;
    color:var(--text-main,#0f172a);
  }



  /* Movement Chart */

  .stok-movement-chart-card {
    width:100%;
    padding:16px;
    border-radius:14px;
  }

  .stok-chart-header h3 {
    margin:0 0 4px;
    font-size:14px;
  }

  .stok-chart-header p {
    margin:0;
    font-size:10px;
    line-height:1.5;
  }

  .stok-movement-chart {
    width:100%;
    min-height:220px;
    margin-top:14px;
    overflow:hidden;
  }

  /* History Filter */

  .stok-history-filter {
    width:100%;
    padding:12px;
    border-radius:14px;
    margin-bottom:14px;
  }

  .stok-history-filter-grid {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .stok-history-filter-grid .filter-box {
    width:100%;
  }

  .stok-history-filter-grid .filter-box .form-control {
  width: 100%;
  box-sizing: border-box;
  }

  .stok-history-filter-action .btn {
    width:100%;
    min-height:42px;
  }

  /* History Table */

  .stok-history-section .table-container {
    width:100%;
  }

  #stokMutasiTableBody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .table-container:has(#stokMutasiTableBody) {
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .table-container:has(#stokMutasiTableBody) .data-table {
    display:block;
    width:100%;
  }

  .table-container:has(#stokMutasiTableBody) .data-table thead {
    display:none;
  }

  .table-container:has(#stokMutasiTableBody) .data-table tbody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* Inventory Value */

  .stok-value-card {
    width:100%;
    padding:18px;
    border-radius:14px;
  }

  .stok-value-content {
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .stok-value-label {
    font-size:10px;
    font-weight:600;
    color:var(--text-muted);
  }

  .stok-value-content strong {
    font-size:24px;
    line-height:1.2;
    color:var(--text-main);
  }

  .stok-value-content p {
    margin:4px 0 0;
    font-size:10px;
    line-height:1.5;
  }
}
/*====================
Blok 3 — Mobile Stok History Cards: mengatur tampilan kartu riwayat mutasi stok di HP, termasuk tanggal, tipe transaksi, nama barang, jumlah, referensi, keterangan, dan user.
======================*/
@media (max-width:768px) {
  .stok-history-section .table-container:has(#stokMutasiTableBody) {
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .stok-history-section .table-container:has(#stokMutasiTableBody) .data-table {
    display:block;
    width:100%;
  }

  .stok-history-section .table-container:has(#stokMutasiTableBody) .data-table thead {
    display:none;
  }

  .stok-history-section .table-container:has(#stokMutasiTableBody) .data-table tbody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .mutasi-table-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "tanggal tipe"
      "barang barang"
      "jumlah jumlah"
      "referensi referensi"
      "keterangan keterangan"
      "user user";
    gap:7px 12px;
    width:100%;
    box-sizing:border-box;
    padding:15px 16px 15px 18px;
    background:var(--bg-card,#ffffff);
    border:1px solid var(--border-color,#dbe2ea);
    border-radius:14px;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
    overflow:hidden;
  }

  .mutasi-table-row::before {
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:3px;
    background:var(--primary,#2563eb);
    border-radius:0 4px 4px 0;
  }

  .mutasi-no {
    display:none;
  }

  .mutasi-tanggal {
    grid-area:tanggal;
    padding:0 !important;
    border:none;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

  .mutasi-barang {
    grid-area:barang;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:0 !important;
    border:none;
    line-height:1.3;
  }

  .mutasi-barang strong {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
    color:var(--text-main,#0f172a);
  }

  .mutasi-barang code {
    display:block;
    margin-top:2px;
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

  .mutasi-tipe {
    grid-area:tipe;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:0 !important;
    border:none;
  }

  .mutasi-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:52px;
    padding:4px 8px;
    border-radius:7px;
    font-size:9px;
    font-weight:700;
    line-height:1;
  }

  .mutasi-masuk {
    background:#dcfce7;
    color:#15803d;
  }

  .mutasi-keluar {
    background:#fee2e2;
    color:#b91c1c;
  }

  .mutasi-produksi {
    background:#dbeafe;
    color:#1d4ed8;
  }

  .mutasi-koreksi {
    background:#fef3c7;
    color:#b45309;
  }

  .mutasi-jumlah,
  .mutasi-referensi,
  .mutasi-keterangan,
  .mutasi-user {
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    align-items:start;
    gap:8px;
    min-width:0;
    padding:0 !important;
    border:none;
    font-size:10px;
    line-height:1.4;
  }

  .mutasi-jumlah::before {
    content:"Jumlah";
  }

  .mutasi-referensi::before {
    content:"Referensi";
  }

  .mutasi-keterangan::before {
    content:"Keterangan";
  }

  .mutasi-user::before {
    content:"User";
  }

  .mutasi-jumlah::before,
  .mutasi-referensi::before,
  .mutasi-keterangan::before,
  .mutasi-user::before {
    color:var(--text-muted,#64748b);
    font-size:10px;
  }

  .mutasi-jumlah {
    grid-area:jumlah;
    margin-top:3px;
  }

  .mutasi-jumlah:not(:empty) {
    color:var(--text-main,#0f172a);
    font-weight:600;
  }

  .mutasi-referensi {
    grid-area:referensi;
  }

  .mutasi-keterangan {
    grid-area:keterangan;
  }

  .mutasi-user {
    grid-area:user;
  }

  .mutasi-referensi,
  .mutasi-keterangan,
  .mutasi-user {
    color:var(--text-main,#334155);
  }

  .stok-history-section .table-container:has(#stokMutasiTableBody) .data-table tbody td {
    border-bottom:none;
  }

  #stokMutasiTableBody tr:not(.mutasi-table-row) {
    display:block;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  #stokMutasiTableBody tr:not(.mutasi-table-row) td {
    display:block;
    padding:2rem 1rem !important;
    border:none;
  }
}