/*====================
Blok 1 — Page Laporan Mobile: mengatur header dan filter laporan serta tampilan tabel menjadi kartu di HP untuk laporan stok, mutasi stok, dan produksi, termasuk empty state.
======================*/
   @media (max-width:768px) {
  .card:has(#reportTableBody) {
    width:100%;
  }

  .card:has(#reportTableBody) .card-header {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .card:has(#reportTableBody) .card-header h3 {
    margin:0;
    font-size:15px;
  }

  .card:has(#reportTableBody) .card-header > .flex {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .card:has(#reportTableBody) .card-header > .flex #reportType {
    grid-column:1 / -1;
  }

  .card:has(#reportTableBody) .card-header > .flex span {
    display:none;
  }

  .card:has(#reportTableBody) .card-header > .flex .btn {
    grid-column:1 / -1;
    width:100%;
    height:40px;
  }

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

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

  .card:has(#reportTableBody) .data-table thead {
    display:none;
  }

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

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

  #reportTableBody tr {
    position:relative;
    width:100%;
    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;
  }

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

  #reportTableBody tr:hover {
    background:var(--bg-card,#ffffff);
  }

  .laporan-stok-table-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product stock"
      "category stock";
    gap:5px 12px;
    padding:15px 16px 15px 18px;
  }

  .laporan-stok-col-no {
    display:none;
  }

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

  .laporan-stok-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;
  }

  .laporan-stok-col-product .text-muted,
  .laporan-stok-col-product small {
    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;
  }

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

  .laporan-stok-col-category::before {
    content:"Kategori";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .laporan-stok-col-stock {
    grid-area:stock;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
    padding:0 !important;
    border:none;
    white-space:nowrap;
  }

  .laporan-stok-col-stock strong {
    font-size:14px;
    font-weight:700;
    color:var(--text-main,#1e293b);
  }

  .laporan-stok-col-stock span {
    font-size:10px;
    color:var(--text-muted,#64748b);
  }

  .laporan-mutasi-table-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product type"
      "date quantity"
      "reference reference"
      "user user";
    gap:5px 12px;
    padding:15px 16px 15px 18px;
  }

  .laporan-mutasi-col-no {
    display:none;
  }

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

  .laporan-mutasi-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;
  }

  .laporan-mutasi-col-product .text-muted,
  .laporan-mutasi-col-product small {
    display:block;
    margin-top:2px;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

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

  .laporan-mutasi-col-type .badge {
    padding:4px 8px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
  }

  .laporan-mutasi-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);
  }

  .laporan-mutasi-col-date::before {
    content:"Tanggal";
    margin-right:6px;
  }

  .laporan-mutasi-col-date small {
    margin-left:6px;
    color:var(--text-main,#1e293b);
  }

  .laporan-mutasi-col-quantity {
    grid-area:quantity;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    padding:5px 0 0 !important;
    border:none;
  }

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

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

  .laporan-mutasi-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);
  }

  .laporan-mutasi-col-reference::before {
    content:"Ref";
    margin-right:6px;
  }

  .laporan-mutasi-col-reference .text-muted,
  .laporan-mutasi-col-reference small {
    margin-left:6px;
  }

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

  .laporan-mutasi-col-user::before {
    content:"Oleh";
    margin-right:6px;
  }

  .laporan-produksi-table-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "product status"
      "date quantity"
      "batch quantity";
    gap:5px 12px;
    padding:15px 16px 15px 18px;
  }

  .laporan-produksi-col-no {
    display:none;
  }

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

  .laporan-produksi-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;
  }

  .laporan-produksi-col-product .text-muted,
  .laporan-produksi-col-product small {
    display:block;
    margin-top:2px;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

  .laporan-produksi-col-status {
    grid-area:status;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:0 !important;
    border:none;
  }

  .laporan-produksi-col-status .badge {
    padding:4px 8px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
  }

  .laporan-produksi-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);
  }

  .laporan-produksi-col-date::before {
    content:"Tanggal";
    margin-right:6px;
  }

  .laporan-produksi-col-date small {
    margin-left:6px;
    color:var(--text-main,#1e293b);
  }

  .laporan-produksi-col-quantity {
    grid-area:quantity;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    padding:5px 0 0 !important;
    border:none;
  }

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

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

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

  .laporan-produksi-col-batch strong {
    font-size:10px;
    font-weight:600;
    color:var(--text-main,#1e293b);
  }

  .laporan-produksi-col-batch::before {
    content:"Batch";
    margin-right:6px;
  }

  .laporan-produksi-col-batch small {
    margin-left:6px;
  }

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

  #reportTableBody tr:not(.laporan-stok-table-row):not(.laporan-mutasi-table-row):not(.laporan-produksi-table-row) td {
    display:block;
    padding:2rem 1rem;
    border:none;
  }
}