/*====================
Blok 1 — Card Mobile Barang Keluar: mengatur tabel barang keluar menjadi kartu di HP, termasuk nama barang, tanggal, referensi, jumlah, tujuan, tombol aksi, dan empty state.
======================*/
   @media (max-width:768px) {
  #barangKeluarTableBody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

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

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

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

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

  .barang-keluar-table-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product action"
      "sku action"
      "date quantity"
      "reference destination";
    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,.04);
    overflow:hidden;
  }

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

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

  .barang-keluar-col-no {
    display:none;
  }

  .barang-keluar-col-product {
    grid-area:product;
    min-width:0;
    padding:0 !important;
    border:none;
  }

  .barang-keluar-col-product strong {
    display:block;
    min-width:0;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:var(--text-main,#1e293b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .barang-keluar-col-product .text-sm {
    display:block;
    margin-top:2px;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .barang-keluar-col-date {
    grid-area:date;
    min-width:0;
    padding:5px 0 0 !important;
    border:none;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

  .barang-keluar-col-date::before {
    content:"Tanggal";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

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

  .barang-keluar-col-reference::before {
    content:"Ref";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .barang-keluar-col-reference code {
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    color:var(--text-main,#1e293b);
  }

  .barang-keluar-col-reference .text-sm {
    display:none;
  }

  .barang-keluar-col-quantity {
    grid-area:quantity;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
    padding:5px 0 0 !important;
    border:none;
  }

  .barang-keluar-col-quantity strong {
    font-size:13px;
    font-weight:700;
    color:var(--text-main,#1e293b);
  }

  .barang-keluar-col-quantity strong::before {
    content:"Jumlah ";
    font-size:10px;
    font-weight:400;
    color:var(--text-muted,#64748b);
  }

  .barang-keluar-col-quantity .text-muted {
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

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

  .barang-keluar-col-destination::before {
    content:"Tujuan";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .barang-keluar-col-action {
    grid-area:action;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:0 !important;
    border:none;
  }

  .barang-keluar-col-action .btn-action {
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:9px;
  }

  .barang-keluar-col-action .btn-action svg {
    width:17px;
    height:17px;
  }

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

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

  #barangKeluarTableBody tr:not(.barang-keluar-table-row) td {
    display:block;
    padding:2rem 1rem;
    border:none;
  }
}


/* =========================
   2. RESPONSIVE global 
========================= */

@media (max-width: 767px) {
  .bkm-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 16px;
  }

  .bkm-body {
    padding: 18px;
    gap: 20px;
  }

  .bkm-info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .bkm-full {
    grid-column: auto;
  }

  .bkm-section-heading {
    align-items: flex-start;
  }

  .bkm-items-heading {
    flex-wrap: wrap;
  }

  .bkm-add-btn {
    font-size: 12px;
    padding: 8px 10px;
  }

  .mdl-footer {
    padding: 12px 18px;
  }
}

/*====================== 
3. MOBILE MODAL SCROLL FIX 
==================*/

@media (max-width: 767px) {
  body:has(.mdl-backdrop.show) {
    overflow: hidden;
  }

  .mdl-backdrop {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .bkm-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
    min-height: 0;
  }

  .bkm-dialog .bkm-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .bkm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .bkm-dialog .mdl-footer {
    flex-shrink: 0;
  }
}

/* =================================================
   4. Page Barang Masuk Mobile
   ================================================= */
@media (max-width:768px) {
  #barangMasukTableBody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }

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

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

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

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

  .barang-masuk-table-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product action"
      "sku action"
      "date quantity"
      "reference supplier";
    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,.04);
    overflow:hidden;
  }

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

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

  .barang-masuk-col-no {
    display:none;
  }

  .barang-masuk-col-product {
    grid-area:product;
    min-width:0;
    padding:0 !important;
    border:none;
  }

  .barang-masuk-col-product strong {
    display:block;
    min-width:0;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:var(--text-main,#1e293b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .barang-masuk-col-product .text-sm {
    display:block;
    margin-top:2px;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .barang-masuk-col-date {
    grid-area:date;
    min-width:0;
    padding:5px 0 0 !important;
    border:none;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

  .barang-masuk-col-date::before {
    content:"Tanggal";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

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

  .barang-masuk-col-reference::before {
    content:"Ref";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .barang-masuk-col-reference code {
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    color:var(--text-main,#1e293b);
  }

  .barang-masuk-col-reference .text-sm {
    display:none;
  }

  .barang-masuk-col-quantity {
    grid-area:quantity;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
    padding:5px 0 0 !important;
    border:none;
  }

  .barang-masuk-col-quantity strong {
    font-size:13px;
    font-weight:700;
    color:var(--text-main,#1e293b);
  }

  .barang-masuk-col-quantity strong::before {
    content:"Jumlah ";
    font-size:10px;
    font-weight:400;
    color:var(--text-muted,#64748b);
  }

  .barang-masuk-col-quantity .text-muted {
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

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

  .barang-masuk-col-supplier::before {
    content:"Supplier";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .barang-masuk-col-action {
    grid-area:action;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:0 !important;
    border:none;
  }

  .barang-masuk-col-action .btn-action {
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:9px;
  }

  .barang-masuk-col-action .btn-action svg {
    width:17px;
    height:17px;
  }

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

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

  #barangMasukTableBody tr:not(.barang-masuk-table-row) td {
    display:block;
    padding:2rem 1rem;
    border:none;
  }
}