<div class="container-fluid bahan-page" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-4 bahan-page-heading">
    <div>
      <h1 class="h3 mb-1 text-gray-800">Data Harga Produk</h1>
      <p class="mb-0">Kelola harga, stok, dan informasi produk dalam satu tempat.</p>
    </div>
    <button type="button" class="btn bahan-mobile-primary add_bahan" data-id="0"><i class="fa fa-plus-circle"></i> Tambah Produk</button>
  </div>

  <div class="row">
    <div class="col-md-12">
      <form action="#" method="post">
        <div class="card">
          <div class="card-header pb-0">
            <!-- Toolbar responsif -->
            <div class="toolbar-wrap">
              <!-- LIMIT -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text bahan-label-desktop">LIMIT</span>
                  <label class="input-group-text bahan-label-mobile" for="limits">Limit</label>
                </div>
                <select id="limits" name="limits" class="form-control custom-select" onchange="search_Bahan()">
                  <option value="10">10</option>
                  <option value="20">20</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                </select>
              </div>

              <!-- SORT -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text bahan-label-desktop">SORT</span>
                  <label class="input-group-text bahan-label-mobile" for="sortBy">Sort</label>
                </div>
                <select id="sortBy" class="form-control custom-select" onchange="search_Bahan()">
                  <option value="ASC">ASC</option>
                  <option value="DESC" selected>DESC</option>
                </select>
              </div>

              <!-- KATEGORI -->
              <div class="input-group input-group-sm toolbar-item">
                <div class="input-group-prepend">
                  <span class="input-group-text bahan-label-desktop">KATEGORI</span>
                  <label class="input-group-text bahan-label-mobile" for="sort_kategori">Kategori</label>
                </div>
                <select name="sort_kategori" id="sort_kategori" class="form-control custom-select" onchange="search_Bahan()">
                  <option value="">Semua kategori</option>
                  <?php foreach($kategori AS $val){ ?>
                    <option value="<?=$val->id_jenis;?>"><?=$val->jenis_cetakan;?></option>
                  <?php } ?>
                </select>
              </div>

              <!-- PENCARIAN -->
              <div class="toolbar-search toolbar-grow">
                <label class="bahan-search-label" for="keywords">Cari Data</label>
                <div class="bahan-search-field">
                  <i class="fa fa-search"></i>
                  <input type="text" id="keywords" class="form-control form-control-sm" placeholder="Cari data" onkeyup="search_BahanDebounced();" />
                </div>
              </div>

              <!-- ACTIONS -->
              <div class="input-group-append toolbar-actions">
                <button class="btn btn-danger clear_bahan bahan-action-clear" type="button"><i class="fa fa-times"></i> Clear</button>
                <button type="button" class="btn btn-info add_bahan bahan-toolbar-add" data-id="0"><i class="fa fa-plus"></i> Tambah</button>
                <a href="<?=base_url();?>produk/export_bahan_excel" target="_blank" download="export-data-produk.xlsx" class="btn btn-success btn-sm bahan-action-export" data-toggle="tooltip" data-original-title="Export Excel"><i class="fa fa-file-excel-o fa-1x"></i> Export</a>
                <button type="button" class="btn btn-primary btn-sm bahan-action-import" data-toggle="modal" data-target="#ModalImportBahan" data-original-title="Import Excel"><i class="fa fa-file-excel-o fa-1x"></i> Import</button>
                <a href="<?=base_url();?>produk/export_harga" target="_blank" data-toggle="tooltip" class="btn btn-success btn-sm bahan-action-barcode" data-original-title="Print Barcode"><i class="fa fa-barcode fa-1x"></i></a>
                <button type="button" class="btn btn-secondary btn-sm print_order flat bahan-action-print" id="print_bahan" data-toggle="tooltip" data-original-title="Print PDF"><i class="fa fa-file-pdf-o fa-1x"></i> Print</button>
                <!--button class="btn btn-primary url_doc" data-url="bahan" type="button" data-toggle="tooltip" data-original-title="Dok Bahan & Harga" data-placement="left"><i class="fa fa-info-circle"></i></button-->
              </div>
            </div>
          </div>

          <div class="card-body" id="dataBahan"></div><!-- /.card-body -->
        </div><!-- /.card -->
      </form>
    </div>
  </div>
</div>

<!-- Modal Import Bahan -->
<div id="ModalImportBahan" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered bahan-import-dialog">
    <div class="modal-content bahan-import-modal">
      <div class="modal-header bahan-import-header">
        <div class="bahan-import-heading">
          <span><i class="fa fa-file-excel-o"></i></span>
          <div>
            <h5 class="modal-title">Import Data Produk</h5>
            <p>Tambahkan atau perbarui produk melalui file Excel.</p>
          </div>
        </div>
        <button type="button" class="close bahan-import-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body bahan-import-body">
        <form id="formImportBahan" action="<?=base_url();?>produk/import_bahan_excel" method="POST" enctype="multipart/form-data">
          <div class="bahan-import-info">
            <i class="fa fa-info-circle"></i>
            <?php if (product_item_image_enabled()) { ?>
            <span>Gunakan template terbaru. Kolom <strong>FOTO PRODUK</strong> sekarang ikut tersedia; kosongkan kolom tersebut saat update untuk mempertahankan foto lama.</span>
            <?php } else { ?>
            <span>Gunakan template terbaru agar struktur data produk sesuai dengan aplikasi.</span>
            <?php } ?>
          </div>
          <div class="form-group bahan-import-file">
            <label>Pilih file import</label>
            <div class="custom-file bahan-import-picker">
              <input type="file" name="file_excel" id="file_excel_bahan" class="custom-file-input" accept=".xlsx,.xls,.csv" required>
              <label class="custom-file-label" for="file_excel_bahan">Pilih file .xlsx / .xls / .csv</label>
            </div>
            <small class="form-text text-muted">Maksimal 10 MB. Format Excel mendukung seluruh metode harga; CSV hanya mendukung Satu Harga.</small>
          </div>
          <div class="alert alert-info py-2 px-3 mb-3 import-bahan-status d-none" role="status" aria-live="polite"></div>
          <div class="bahan-import-actions">
            <a href="<?=base_url();?>produk/template_import_bahan" target="_blank" download="template-import-data-produk.xlsx" class="btn bahan-import-template">
              <i class="fa fa-download"></i> Unduh Template
            </a>
            <div class="bahan-import-actions__right">
              <button type="button" class="btn bahan-import-cancel" data-dismiss="modal">Batal</button>
              <button type="submit" class="btn bahan-import-submit upload-bahan-excel"><i class="fa fa-upload"></i> Import Data</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
#ModalImportBahan .bahan-import-dialog {
  width: calc(100% - 28px);
  max-width: 610px;
}
#ModalImportBahan .bahan-import-modal {
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(24, 36, 58, .22);
}
#ModalImportBahan .bahan-import-header {
  min-height: 82px;
  padding: 17px 21px;
  align-items: center;
  border-bottom: 1px solid #e8edf4;
}
#ModalImportBahan .bahan-import-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
#ModalImportBahan .bahan-import-heading > span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eaf8ef;
  color: #199653;
  font-size: 19px;
}
#ModalImportBahan .bahan-import-heading h5 {
  margin: 0 0 3px;
  color: #172033;
  font-size: 18px;
  font-weight: 700;
}
#ModalImportBahan .bahan-import-heading p {
  margin: 0;
  color: #7c8799;
  font-size: 11px;
}
#ModalImportBahan .bahan-import-close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f3f5f8;
  color: #596579;
  opacity: 1;
}
#ModalImportBahan .bahan-import-body {
  padding: 20px 21px 21px;
}
#ModalImportBahan .bahan-import-info {
  display: flex;
  margin-bottom: 17px;
  padding: 11px 13px;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #d8e6ff;
  border-radius: 9px;
  background: #f4f8ff;
  color: #53627a;
  font-size: 11px;
  line-height: 1.55;
}
#ModalImportBahan .bahan-import-info i {
  margin-top: 2px;
  color: #1769e8;
}
#ModalImportBahan .bahan-import-file > label {
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}
#ModalImportBahan .bahan-import-picker,
#ModalImportBahan .bahan-import-picker .custom-file-input,
#ModalImportBahan .bahan-import-picker .custom-file-label {
  height: 44px;
}
#ModalImportBahan .bahan-import-picker .custom-file-label {
  padding: 11px 13px;
  border-color: #dbe2ec;
  border-radius: 8px;
  color: #667085;
  font-size: 12px;
}
#ModalImportBahan .bahan-import-picker .custom-file-label::after {
  height: 42px;
  padding: 11px 15px;
  border-left-color: #dbe2ec;
  background: #f5f7fa;
  content: "Pilih File";
}
#ModalImportBahan .bahan-import-actions {
  display: flex;
  padding-top: 4px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#ModalImportBahan .bahan-import-actions__right {
  display: flex;
  gap: 8px;
}
#ModalImportBahan .bahan-import-actions .btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}
#ModalImportBahan .bahan-import-template {
  border: 1px solid #bce3cd;
  background: #f2fbf6;
  color: #168e50;
}
#ModalImportBahan .bahan-import-cancel {
  border: 1px solid #dfe4eb;
  background: #fff;
  color: #667085;
}
#ModalImportBahan .bahan-import-submit {
  border: 1px solid #1769e8;
  background: #1769e8;
  box-shadow: 0 5px 12px rgba(23, 105, 232, .2);
  color: #fff;
}
@media (max-width: 575.98px) {
  #ModalImportBahan .bahan-import-actions {
    align-items: stretch;
    flex-direction: column;
  }
  #ModalImportBahan .bahan-import-actions__right,
  #ModalImportBahan .bahan-import-actions .btn {
    width: 100%;
  }
  #ModalImportBahan .bahan-import-actions__right .btn {
    flex: 1;
  }
}

#ModalBahan .pembulatan-ukuran-control {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
#ModalBahan .pembulatan-ukuran-control #margin_finishing_aktif {
  flex: 0 0 82px;
  width: 82px;
}
#ModalBahan .pembulatan-ukuran-control #atur_lebar_bahan {
  flex: 1 1 auto;
  white-space: nowrap;
}
#ModalLebarBahan {
  z-index: 1080 !important;
  padding-right: 0 !important;
}
#ModalLebarBahan .lebar-bahan-modal-dialog {
  width: calc(100% - 30px);
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}
#ModalLebarBahan .modal-content {
  border: 1px solid #e1e6ef;
  border-radius: 8px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .24);
}
#ModalLebarBahan .modal-header {
  padding: 17px 18px;
  align-items: center;
  border-bottom: 1px solid #e5eaf2;
  background: #fff !important;
}
#ModalLebarBahan .modal-header .close {
  margin: -8px -8px -8px auto;
}
#ModalLebarBahan .modal-body {
  position: relative;
  max-height: 60vh;
  padding: 16px 18px !important;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff !important;
}
#ModalLebarBahan .modal-footer {
  display: flex;
  padding: 14px 18px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e5eaf2;
  background: #fff !important;
}
#ModalLebarBahan .modal-footer > * { margin: 0 !important; }
#ModalLebarBahan .lebar-bahan-row { margin-bottom: 9px; }
#ModalLebarBahan .lebar-bahan-row .form-control {
  height: 40px;
  min-width: 0;
  border-color: #d8e0ec;
  background: #fff !important;
  color: #344054;
}
#ModalLebarBahan .lebar-bahan-unit {
  min-width: 66px;
  justify-content: center;
  border-color: #d8e0ec !important;
  background: #f4f6f9 !important;
  color: #475467 !important;
  font-weight: 500;
}
#ModalLebarBahan .hapus-lebar-bahan {
  width: 40px;
  border-color: #ff4d5a;
  background: #fff;
  color: #e52939;
}
#ModalLebarBahan .pembulatan-batas-wrap {
  display: flex;
  margin-top: 16px;
  padding: 13px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #e1e6ef;
  border-radius: 7px;
  background: #f8fafc;
}
#ModalLebarBahan .pembulatan-batas-copy strong {
  display: block;
  margin-bottom: 2px;
  color: #344054;
  font-size: 13px;
}
#ModalLebarBahan .pembulatan-batas-copy small {
  display: block;
  color: #667085;
  line-height: 1.4;
}
#ModalLebarBahan .pembulatan-batas-switch {
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  flex: 0 0 42px;
}
#ModalLebarBahan .pembulatan-batas-switch input {
  width: 0;
  height: 0;
  opacity: 0;
}
#ModalLebarBahan .pembulatan-batas-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: .18s ease;
}
#ModalLebarBahan .pembulatan-batas-slider::before {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.25);
  content: "";
  transition: .18s ease;
}
#ModalLebarBahan .pembulatan-batas-switch input:checked + .pembulatan-batas-slider {
  background: #1769e8;
}
#ModalLebarBahan .pembulatan-batas-switch input:checked + .pembulatan-batas-slider::before {
  transform: translateX(18px);
}
</style>

<!-- Modal Bahan -->
<style>
  #ModalBahan .komisi-penjualan-row{
    align-items:stretch;
  }
  #ModalBahan .komisi-penjualan-field{
    display:flex;
    flex-direction:column;
  }
  #ModalBahan .komisi-penjualan-field > label{
    align-items:flex-end;
    display:flex;
    flex:1 0 auto;
    line-height:1.25;
    margin-bottom:.4rem;
    min-height:40px;
  }
  #ModalBahan .komisi-penjualan-field .form-control,
  #ModalBahan .komisi-penjualan-field .custom-select{
    height:calc(1.5em + .75rem + 2px);
    min-height:calc(1.5em + .75rem + 2px);
    width:100%;
  }
  @media(max-width:767.98px){
    #ModalBahan .komisi-penjualan-field{
      margin-bottom:.75rem;
    }
    #ModalBahan .komisi-penjualan-field > label{
      min-height:0;
    }
  }
</style>

<style>
/* Katalog produk bergambar — dibatasi pada halaman produk/bahan. */
#container-wrapper.bahan-page {
  color: #172033;
}
#container-wrapper.bahan-page .bahan-page-heading p {
  color: #7b8497;
  font-size: 13px;
}
#container-wrapper.bahan-page > .row > .col-md-12 > form > .card {
  overflow: hidden;
  border: 1px solid #e7ebf2;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(34, 48, 73, .07);
}
#container-wrapper.bahan-page .card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
}
#container-wrapper.bahan-page .toolbar-wrap {
  display: grid;
  grid-template-columns: minmax(116px, .65fr) minmax(150px, .9fr) minmax(190px, 1.1fr) minmax(240px, 2fr) auto;
  gap: 10px;
  align-items: center;
}
#container-wrapper.bahan-page .toolbar-item,
#container-wrapper.bahan-page .toolbar-search {
  min-width: 0;
}
#container-wrapper.bahan-page .toolbar-item .input-group-text {
  border-color: #dfe5ef;
  background: #f7f9fc;
  color: #4e5a70;
  font-size: 11px;
  font-weight: 700;
}
#container-wrapper.bahan-page .toolbar-item .form-control,
#container-wrapper.bahan-page .bahan-search-field .form-control {
  height: 39px;
  border-color: #dfe5ef;
  background-color: #fff;
}
#container-wrapper.bahan-page .bahan-search-label {
  display: none;
}
#container-wrapper.bahan-page .bahan-search-field {
  position: relative;
}
#container-wrapper.bahan-page .bahan-search-field i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  color: #98a2b3;
  transform: translateY(-50%);
}
#container-wrapper.bahan-page .bahan-search-field input {
  padding-left: 36px;
  border-radius: 7px;
}
#container-wrapper.bahan-page .toolbar-actions {
  display: flex;
  gap: 7px;
  white-space: nowrap;
}
#container-wrapper.bahan-page .toolbar-actions .btn {
  display: inline-flex;
  min-height: 39px;
  padding: 0 12px;
  align-items: center;
  gap: 6px;
  border-radius: 7px !important;
  font-size: 12px;
  font-weight: 600;
}
#container-wrapper.bahan-page .card-body {
  padding: 20px;
  background: #fbfcfe;
}
#container-wrapper.bahan-page .bahan-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
#container-wrapper.bahan-page .bahan-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e9f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(32, 45, 69, .04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#container-wrapper.bahan-page .bahan-product-card:hover {
  border-color: #cddcff;
  box-shadow: 0 10px 24px rgba(36, 91, 187, .12);
  transform: translateY(-3px);
}
#container-wrapper.bahan-page .bahan-product-card.is-inactive {
  opacity: .72;
}
#container-wrapper.bahan-page .bahan-product-card__media {
  position: relative;
  height: 174px;
  overflow: hidden;
  background: linear-gradient(145deg, #f5f7fb, #eef2f7);
}
#container-wrapper.bahan-page .bahan-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
#container-wrapper.bahan-page .bahan-product-card:hover .bahan-product-card__media img {
  transform: scale(1.035);
}
#container-wrapper.bahan-page .bahan-product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #a0a9b8;
  font-size: 11px;
}
#container-wrapper.bahan-page .bahan-product-card__placeholder i {
  font-size: 33px;
  color: #c5cdda;
}
#container-wrapper.bahan-page .bahan-product-card__number,
#container-wrapper.bahan-page .bahan-product-card__status {
  position: absolute;
  top: 10px;
  padding: 5px 8px;
  border-radius: 20px;
  box-shadow: 0 2px 7px rgba(31, 42, 61, .12);
  font-size: 10px;
  font-weight: 700;
}
#container-wrapper.bahan-page .bahan-product-card__number {
  left: 10px;
  background: rgba(255,255,255,.94);
  color: #536074;
}
#container-wrapper.bahan-page .bahan-product-card__status {
  right: 10px;
  background: rgba(255,255,255,.94);
}
#container-wrapper.bahan-page .bahan-product-card__status.is-on { color: #169b5b; }
#container-wrapper.bahan-page .bahan-product-card__status.is-off { color: #e24b5b; }
#container-wrapper.bahan-page .bahan-product-card__content {
  padding: 14px;
}
#container-wrapper.bahan-page .bahan-product-card__heading {
  min-height: 61px;
}
#container-wrapper.bahan-page .bahan-product-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: #18243a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#container-wrapper.bahan-page .bahan-product-card__title:hover { color: #1769e8; }
#container-wrapper.bahan-page .bahan-product-card__category {
  display: inline-block;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 8px;
  overflow: hidden;
  border-radius: 20px;
  background: #edf4ff;
  color: #1769e8;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#container-wrapper.bahan-page .bahan-product-card__prices {
  display: grid;
  margin-top: 13px;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
#container-wrapper.bahan-page .bahan-product-card__prices > div {
  padding: 9px;
  border-radius: 8px;
  background: #f7f9fc;
}
#container-wrapper.bahan-page .bahan-product-card__prices span,
#container-wrapper.bahan-page .bahan-product-card__stock > span {
  display: block;
  margin-bottom: 3px;
  color: #8691a4;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}
#container-wrapper.bahan-page .bahan-product-card__prices strong {
  display: block;
  color: #303c51;
  font-size: 12px;
}
#container-wrapper.bahan-page .bahan-product-card__prices .selling-price { color: #159b57; }
#container-wrapper.bahan-page .bahan-product-card__stock {
  display: flex;
  margin: 11px 0 13px;
  align-items: center;
  justify-content: space-between;
}
#container-wrapper.bahan-page .bahan-product-card__stock > span { margin: 0; }
#container-wrapper.bahan-page .bahan-product-card__stock strong {
  color: #3e4a5f;
  font-size: 11px;
}
#container-wrapper.bahan-page .bahan-product-card__stock strong i { color: #20a766; }
#container-wrapper.bahan-page .bahan-product-card__stock strong.is-empty,
#container-wrapper.bahan-page .bahan-product-card__stock strong.is-empty i { color: #dd5562; }
#container-wrapper.bahan-page .bahan-product-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr);
  gap: 6px;
}
#container-wrapper.bahan-page .bahan-product-card__actions .btn {
  min-width: 0;
  padding: 7px 5px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
#container-wrapper.bahan-page .bahan-btn-price {
  border: 1px solid #c8ead8;
  background: #effaf4;
  color: #149756;
}
#container-wrapper.bahan-page .bahan-btn-price span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1da763;
  color: #fff;
  font-size: 9px;
}
#container-wrapper.bahan-page .bahan-btn-edit {
  border: 1px solid #d7e4ff;
  background: #f5f8ff;
  color: #1769e8;
}
#container-wrapper.bahan-page .bahan-btn-delete {
  border: 1px solid #ffd9dd;
  background: #fff7f7;
  color: #e34455;
}
#container-wrapper.bahan-page .bahan-list-footer {
  display: flex;
  margin-top: 18px;
  align-items: center;
  justify-content: space-between;
  color: #737f92;
  font-size: 12px;
}
#container-wrapper.bahan-page .bahan-pagination { margin: 0; }
#container-wrapper.bahan-page .bahan-pagination .pagination { margin: 0; }
#container-wrapper.bahan-page .bahan-product-empty {
  padding: 60px 20px;
  border: 1px dashed #d5ddea;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
#container-wrapper.bahan-page .bahan-product-empty__icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1769e8;
  font-size: 24px;
}

#ModalBahan .bahan-photo-field {
  display: grid;
  margin: 12px 0 18px;
  padding: 12px;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px dashed #cfd8e7;
  border-radius: 10px;
  background: #f9fbfe;
}
#ModalBahan .bahan-photo-preview {
  position: relative;
  height: 92px;
  overflow: hidden;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #eef2f7;
}
#ModalBahan .bahan-photo-preview img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ModalBahan .bahan-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #98a2b3;
  font-size: 10px;
}
#ModalBahan .bahan-photo-placeholder i { font-size: 25px; }
#ModalBahan .bahan-photo-preview.has-image .bahan-photo-placeholder { display: none; }
#ModalBahan .bahan-photo-copy label {
  display: block;
  margin-bottom: 2px;
  color: #263248;
  font-weight: 700;
}
#ModalBahan .bahan-photo-copy small {
  display: block;
  margin-bottom: 10px;
  color: #8792a5;
}
#ModalBahan .bahan-photo-actions {
  display: flex;
  gap: 7px;
}

@media (max-width: 1399px) {
  #container-wrapper.bahan-page .toolbar-wrap { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  #container-wrapper.bahan-page .toolbar-search { grid-column: span 2; }
  #container-wrapper.bahan-page .toolbar-actions { justify-content: flex-end; }
  #container-wrapper.bahan-page .bahan-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  #container-wrapper.bahan-page .toolbar-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #container-wrapper.bahan-page .toolbar-search,
  #container-wrapper.bahan-page .toolbar-actions { grid-column: 1 / -1; }
  #container-wrapper.bahan-page .toolbar-actions { flex-wrap: wrap; justify-content: flex-start; }
  #container-wrapper.bahan-page .bahan-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  #container-wrapper.bahan-page .bahan-page-heading p { display: none; }
  #container-wrapper.bahan-page .card-header,
  #container-wrapper.bahan-page .card-body { padding: 13px; }
  #container-wrapper.bahan-page .toolbar-wrap { grid-template-columns: 1fr; }
  #container-wrapper.bahan-page .toolbar-search,
  #container-wrapper.bahan-page .toolbar-actions { grid-column: auto; }
  #container-wrapper.bahan-page .bahan-product-grid { grid-template-columns: 1fr; }
  #container-wrapper.bahan-page .bahan-product-card__media { height: 190px; }
  #container-wrapper.bahan-page .bahan-list-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  #ModalBahan .bahan-photo-field { grid-template-columns: 88px 1fr; }
  #ModalBahan .bahan-photo-preview { height: 78px; }
  #ModalBahan .bahan-photo-actions { flex-wrap: wrap; }
}
</style>

<div id="ModalBahan" class="modal fade" role="dialog">
  <div class="modal-dialog" id="load-save-bahan">
    <div class="modal-content flat bahan-modal-modern">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Tambah / Edit Produk</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body pt-2" id="LoadingBahan">
        <input type='hidden' name='bahan_id' id='bahan_id' value='0'>
        <input type='hidden' name='type' id="type">
        <input type="hidden" name="id_satuan" id="id_satuan" class="form-control" required>
        <div class="row">
          <div class="col-md-12">
            <div class="bahan-top-grid">
            <div class="form-group mb-0">
              <label for="judul">Nama Barang/Merk</label>
              <input type="text" name="judul" id="judul" class="form-control form-control-sm" required>
            </div>

            <div class="form-group mb-1">
              <label for="barcode">BARCODE FORMAT EAN-13</label>
              <div class="input-group input-group-sm">
                <input type="text" class="form-control form-control-sm fcs" id="barcode_bahan" name="barcode_bahan" placeholder="" required>
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary generate" type="button" id="generate_add">Generate Barcode</button>
                </div>
              </div>
            </div>
            </div>

            <?php if (product_item_image_enabled()) { ?>
            <div class="bahan-photo-field">
              <input type="hidden" id="foto_bahan" name="foto" value="">
              <input type="file" id="foto_produk_file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" hidden>
              <div class="bahan-photo-preview" id="foto_produk_preview">
                <img src="" alt="Pratinjau foto produk">
                <div class="bahan-photo-placeholder">
                  <i class="fa fa-image"></i>
                  <span>Belum ada foto</span>
                </div>
              </div>
              <div class="bahan-photo-copy">
                <label>Foto Produk</label>
                <small>JPG, PNG, atau WEBP maksimal 4 MB. Otomatis dikonversi ke WEBP agar lebih ringan.</small>
                <div class="bahan-photo-actions">
                  <button type="button" class="btn btn-outline-primary btn-sm" id="pilih_foto_produk"><i class="fa fa-upload"></i> Upload Foto</button>
                  <button type="button" class="btn btn-outline-danger btn-sm d-none" id="hapus_foto_produk"><i class="fa fa-trash"></i> Hapus</button>
                </div>
              </div>
            </div>
            <?php } ?>

            <div class="bahan-section-title">Informasi Produk</div>
            <div class="form-group row">
              <div class="col-md-12">
                <label for="kategori">Produk</label>
                <select name="produk" id="produk" class="form-control custom-select select-box" required>
                  <option value="">Pilih</option>
                  <?php foreach($produk AS $val){ ?>
                    <option value="<?=$val->id;?>"><?=$val->title;?></option>
                  <?php } ?>
                </select>
              </div>
              <div class="col-md-4">
                <label for="kategori">Kategori</label>
                <select name="kategori" id="kategori" class="form-control custom-select" required>
                  <option value="">Pilih</option>
                  <?php foreach($kategori AS $val){ ?>
                    <option value="<?=$val->id_jenis;?>"><?=$val->jenis_cetakan;?></option>
                  <?php } ?>
                </select>
              </div>
              <div class="col-md-4">
                <label>Hitung Ukuran</label>
                <select name="ukuran" id="ukuran" class="form-control custom-select" required>
                  <option value="1">Meter Persegi (m2)</option>
                  <option value="2">Meter Lari (m)</option>
                  <option value="0" selected>Tidak</option>
                </select>
              </div>
              <div class="col-md-4 pembulatan-ukuran-option" style="display:none"
                   data-toggle="tooltip"
                   data-placement="top"
                   title="Bulatkan ukuran ke lebar bahan yang tersedia: 1 m, 1,5 m, 2 m, atau 3 m. Luas pesanan di bawah 1 m2 tetap dihitung 1 m2.">
                <label>Pembulatan Ukuran</label>
                <input type="hidden" id="lebar_bahan_tersedia" value="1,1.5,2,3">
                <input type="hidden" id="pembulatan_di_bawah_satu_meter" value="0">
                <div class="pembulatan-ukuran-control">
                  <select name="margin_finishing_aktif" id="margin_finishing_aktif" class="form-control custom-select" required>
                    <option value="0" selected>Tidak</option>
                    <option value="1">Ya</option>
                  </select>
                  <button type="button" id="atur_lebar_bahan" class="btn btn-outline-primary btn-sm" style="display:none">
                    <i class="fa fa-sliders"></i> Atur Lebar Bahan
                  </button>
                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-md-4">
                <label for="harga_modal">Harga Modal</label>
                <input type="text" oninput="hargaBahanInputDecimal(this)" name="harga_modal" id="harga_modal" class="form-control form-control-sm" required>
              </div>
              <div class="col-md-4">
                <label for="harga_jual_bahan">Harga Jual</label>
                <input type="text" oninput="hargaBahanInputDecimal(this)" name="harga_jual_bahan" id="harga_jual_bahan" class="form-control form-control-sm" required>
              </div>
              <div class="col-md-4">
                <label for="satuan">Satuan</label>
                <select name="satuan" id="satuan" class="form-control custom-select" required>
                  <option value="" selected>Pilih</option>
                  <?php foreach($satuan AS $val){ ?>
                    <option value="<?=$val->id;?>"><?=$val->satuan;?></option>
                  <?php } ?>
                </select>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-md-4">
                <label>Stok </label>
                <select name="stok" id="stok" class="form-control custom-select" required>
                  <option value="">Pilih</option>
                  <option value="Y">Ya</option>
                  <option value="N" selected>Tidak</option>
                </select>
              </div>
              <div class="col-md-4 batas-minimum-stok-wrap" style="display:none">
                <label for="batas_minimum_stok_bahan">Limit Stok</label>
                <input type="number" min="0" step="0.01" name="batas_minimum_stok" id="batas_minimum_stok_bahan" class="form-control form-control-sm" value="0">
              </div>
              <div class="col-md-4 jenis" style="display:none">
                <label>Jenis Bahan</label>
                <select name="jenis" id="jenis" class="form-control custom-select" required>
                  <option value="0">Barang/Bahan Baku</option>
                  <option value="1">Barang/Bahan Jadi</option>
                </select>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-md-6">
                <label>Aktif </label>
                <select name="aktif" id="aktif" class="form-control custom-select" required>
                  <option value="1" selected>Ya</option>
                  <option value="0">Tidak</option>
                </select>
              </div>
              <div class="col-md-6"
                   data-toggle="tooltip"
                   data-placement="top"
                   title="aktifkan komisi desainer hanya untuk produk biaya desain">
                <label>Komisi Desainer</label>
                <select name="komisi_desain_aktif" id="komisi_desain_aktif" class="form-control custom-select" required>
                  <option value="0" selected>Tidak</option>
                  <option value="1">Ya</option>
                </select>
              </div>
            </div>

            <div class="form-group row komisi-penjualan-row">
              <div class="col-md-4 komisi-penjualan-field"><label for="komisi_penjualan_aktif">Komisi Penjualan</label><select id="komisi_penjualan_aktif" class="form-control custom-select"><option value="0">Tidak</option><option value="1">Ya</option></select></div>
              <div class="col-md-4 komisi-penjualan-field komisi-penjualan-detail" style="display:none"><label for="komisi_penjualan_tipe">Jenis Nilai Komisi</label><select id="komisi_penjualan_tipe" class="form-control custom-select"><option value="persen">Persentase (%)</option><option value="nominal">Nominal (Rp)</option></select></div>
              <div class="col-md-4 komisi-penjualan-field komisi-penjualan-detail" style="display:none"><label for="komisi_penjualan_nilai">Nilai Komisi Penjualan</label><input type="number" min="0" step="0.01" id="komisi_penjualan_nilai" class="form-control" value="0"></div>
            </div>

            <div class="bahan-section-title">Komponen Produk</div>
            <div class="form-group row">
              <div class="col-md-6 komposisi-select-wrap"
                   data-toggle="tooltip"
                   data-placement="top"
                   title="aktifkan komposisi untuk produk yang menggunakan lebih dari 1 stok bahan">
                <label>Komposisi</label>
                <select name="komposisi_aktif" id="komposisi_aktif" class="form-control custom-select" required>
                  <option value="0" selected>Tidak</option>
                  <option value="1">Ya</option>
                </select>
              </div>
              <div class="col-md-6 ukuran-default-wrap">
                <label for="ukuran_default">Ukuran default</label>
                <input type="text" name="ukuran_default" id="ukuran_default" class="form-control form-control-sm" required>
              </div>
            </div>

            <div class="komposisi-box" style="display:none">
              <div id="komposisi_rows"></div>
              <button type="button" class="btn btn-secondary btn-sm flat add_komposisi">
                <i class="fa fa-plus"></i> Tambah Komponen
              </button>
            </div>

            <div class="bahan-section-title">Varian Produk</div>
            <div class="form-group row">
              <div class="col-md-12">
                <label>Varian Produk</label>
                <select name="varian_aktif" id="varian_aktif" class="form-control custom-select" required>
                  <option value="0" selected>Tidak</option>
                  <option value="1">Ya</option>
                </select>
              </div>
            </div>

            <div class="varian-box" style="display:none">
              <div id="varian_rows"></div>
              <button type="button" class="btn btn-warning btn-sm flat add_varian">
                <i class="fa fa-plus"></i> Tambah Varian
              </button>
            </div>

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light btn-sm bahan-modal-cancel" data-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary btn-sm save_bahan"><i class="fa fa-floppy-o"></i> Simpan</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal pengaturan lebar bahan -->
<div id="ModalLebarBahan" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered lebar-bahan-modal-dialog">
    <div class="modal-content flat">
      <div class="modal-header">
        <h5 class="modal-title">Lebar Bahan yang Tersedia</h5>
        <button type="button" class="close tutup-lebar-bahan" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-3">Masukkan lebar bahan dalam meter. Sistem akan memilih ukuran yang menghasilkan pemborosan paling kecil.</p>
        <div id="daftar_lebar_bahan"></div>
        <div id="lebar_bahan_error" class="text-danger small mb-2" style="display:none">Isi minimal satu lebar bahan lebih besar dari 0.</div>
        <button type="button" id="tambah_lebar_bahan" class="btn btn-outline-primary btn-sm">
          <i class="fa fa-plus"></i> Tambah Lebar
        </button>
        <div class="pembulatan-batas-wrap">
          <div class="pembulatan-batas-copy">
            <strong>Aktifkan Jika Pembulatan Hanya untuk ukuran di bawah 1 meter persegi</strong>
            <small>Jika aktif, ukuran 1 m² atau lebih tidak dibulatkan ke lebar bahan.</small>
          </div>
          <label class="pembulatan-batas-switch" title="Aktifkan hanya untuk luas di bawah 1 m²">
            <input type="checkbox" id="pembulatan_bawah_satu_editor">
            <span class="pembulatan-batas-slider"></span>
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light btn-sm tutup-lebar-bahan">Batal</button>
        <button type="button" id="simpan_lebar_bahan" class="btn btn-primary btn-sm"><i class="fa fa-check"></i> Terapkan</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Ukuran Komposisi -->
<div id="ModalKomposisiUkuran" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content flat">
      <div class="modal-header pt-1 pb-1">
        <h5 class="modal-title">Ukuran Komposisi</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body pt-2">
        <div class="form-group">
          <label>Panjang (cm)</label>
          <input type="text" id="komposisi_panjang" class="form-control form-control-sm">
        </div>
        <div class="form-group">
          <label>Lebar (cm)</label>
          <input type="text" id="komposisi_lebar" class="form-control form-control-sm">
        </div>
        <div class="form-group mb-0">
          <label id="komposisi_total_label">Total (m2)</label>
          <input type="text" id="komposisi_total" class="form-control form-control-sm" readonly>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info btn-sm flat apply_komposisi_ukuran">Terapkan</button>
        <button type="button" class="btn btn-danger btn-sm flat" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Harga -->
<div id="ModalHarga" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content flat harga-modal-simple">
      <div class="modal-header harga-modal-header">
        <div class="harga-modal-heading">
          <span>Pengaturan Harga Produk</span>
          <h5 class="modal-title" id="TitleHarga">Nama Produk</h5>
        </div>
        <div class="harga-header-actions">
          <label class="harga-all-switch" for="aktifkan_semua_harga">
            <span class="harga-all-switch__copy">
              <strong>Semua Metode</strong>
              <small>Gunakan aturan harga otomatis</small>
            </span>
            <input type="checkbox" id="aktifkan_semua_harga">
            <span class="harga-all-switch__track"><span></span></span>
          </label>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
      </div>
      <div class="modal-body pt-2 harga-modal-body" id="LoadingBahan">
        <div class="tab-vertical harga-tabs-layout">
          <ul class="nav nav-tabs shadow-none harga-tabs-nav" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#tab_1" role="tab" aria-controls="satu" aria-selected="true">
                <input type="radio" radio-id="radio_1" id="radio_1" name="tabs" value="1">
                <i class="fa fa-tag"></i>
                <span><strong>Satu Harga</strong><small>Satu harga untuk semua penjualan</small></span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab_2" role="tab" aria-controls="satuan" aria-selected="false">
                <input type="radio" radio-id="radio_2" id="radio_2" name="tabs" value="2">
                <i class="fa fa-balance-scale"></i>
                <span><strong>Per Satuan</strong><small>Harga berbeda berdasarkan satuan</small></span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab_3" role="tab" aria-controls="level" aria-selected="false">
                <input type="radio" radio-id="radio_3" id="radio_3" name="tabs" value="3">
                <i class="fa fa-users"></i>
                <span><strong>Per Level</strong><small>Harga berdasarkan level pelanggan</small></span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab_4" role="tab" aria-controls="jumlah" aria-selected="false">
                <input type="radio" radio-id="radio_4" id="radio_4" name="tabs" value="4">
                <i class="fa fa-sort-amount-asc"></i>
                <span><strong>Per Jumlah</strong><small>Harga mengikuti jumlah pembelian</small></span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#tab_5" role="tab" aria-controls="range" aria-selected="false">
                <input type="radio" radio-id="radio_5" id="radio_5" name="tabs" value="5">
                <i class="fa fa-sliders"></i>
                <span><strong>Jumlah & Level</strong><small>Kombinasi jumlah dan pelanggan</small></span>
              </a>
            </li>
          </ul>

          <div class="tab-content harga-tab-content" id="myTabContent3">
            <input type="hidden" name="id_harga_menu" id="id_harga_menu" readonly />
            <div class="tab-pane fade show active" id="tab_1" role="tabpanel" aria-labelledby="harga-satu-tab">
              <div id="load_satu_harga"></div>
            </div>
            <div class="tab-pane fade" id="tab_2" role="tabpanel" aria-labelledby="harga-satuan-tab">
              <div class="card-header d-flex flex-row align-items-center justify-content-between pl-0">
                <h5 class="m-0 font-weight-bold">Per Satuan</h5>
                <button type="button" class="btn btn-info btn-sm flat info_satuan" data-toggle="tooltip" data-original-title="Klik pada harga untuk edit" data-placement="left"><i class="fa fa-info-circle fa-fw fa-lg"></i></button>
              </div>
              <div id="load_satuan_harga"></div>
            </div>
            <div class="tab-pane fade" id="tab_3" role="tabpanel" aria-labelledby="harga-level-tab">
              <div class="card-header d-flex flex-row align-items-center justify-content-between pl-0">
                <h5 class="m-0 font-weight-bold">Per Level</h5>
                <button type="button" class="btn btn-info btn-sm flat info_satuan" data-toggle="tooltip" data-original-title="Klik pada harga untuk edit" data-placement="left"><i class="fa fa-info-circle fa-fw fa-lg"></i></button>
              </div>
              <div id="load_harga_level"></div>
            </div>
            <div class="tab-pane fade" id="tab_4" role="tabpanel" aria-labelledby="harga-jumlah-tab">
              <div class="card-header d-flex flex-row align-items-center justify-content-between pl-0">
                <h5 class="m-0 font-weight-bold">Per Jumlah</h5>
                <button type="button" class="btn btn-info btn-sm flat info_satuan" data-toggle="tooltip" data-original-title="Klik pada harga untuk edit" data-placement="left"><i class="fa fa-info-circle fa-fw fa-lg"></i></button>
              </div>
              <div id="load_range"></div>
            </div>
            <div class="tab-pane fade" id="tab_5" role="tabpanel" aria-labelledby="harga-range-tab">
              <div class="card-header d-flex flex-row align-items-center justify-content-between pl-0">
                <h5 class="m-0 font-weight-bold">Jumlah & Level</h5>
                <button type="button" class="btn btn-info btn-sm flat info_satuan" data-toggle="tooltip" data-original-title="Klik pada harga untuk edit" data-placement="left"><i class="fa fa-info-circle fa-fw fa-lg"></i></button>
              </div>
              <div id="load_range_level"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <span class="harga-footer-hint"><i class="fa fa-info-circle"></i> Perubahan harga disimpan dari masing-masing panel.</span>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Selesai</button>
      </div>
    </div>
  </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <p>Anda akan menghapus satu url, prosedur ini tidak dapat diubah.</p>
        <p>Apakah Anda ingin melanjutkan?</p>
        <p class="debug-url"></p>
        <input type="hidden" id="data-hapus">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button>
        <button class="btn btn-danger hapus" type="button">YA</button>
      </div>
    </div>
  </div>
</div>

<input type="hidden" name="halaman" id="halaman" value="0">
<form method="POST" action="<?=base_url();?>laporan/cetak_data_bahan" id="target_print_bahan" target="_blank">
  <input type="hidden" name="sortby_cetak" id="sortby_cetak" readonly />
  <input type="hidden" name="trx_cetak" id="trx_cetak" readonly />
  <input type="hidden" name="tanggal_cetak" id="tanggal_cetak" readonly />
</form>

<script>
  $('<style>' +
    '.varian-row{align-items:flex-end;margin-bottom:8px;}' +
    '.varian-remove-btn{width:34px;height:31px;min-width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.12);}' +
    '.varian-remove-btn i{font-size:13px;line-height:1;}' +
  '</style>').appendTo('head');

  // --- COMPAT: shim searchFilter (mencegah ReferenceError dari app.js) ---
  if (typeof window.searchFilter !== 'function') {
    window.searchFilter = function(){ return true; };
  }
  document.body.classList.add('bahan-mobile-page');

  // --- Debounce pencarian agar tidak spam request saat mengetik ---
  let __bahanTimer;
  function search_BahanDebounced() {
    clearTimeout(__bahanTimer);
    __bahanTimer = setTimeout(search_Bahan, 300);
  }

  // --- Bungkus tabel yang masuk ke #dataBahan agar bisa scroll di mobile ---
  function wrapTablesResponsive(scope) {
    var $root = scope ? $(scope) : $(document);
    $root.find('#dataBahan table').each(function(){
      var $tbl = $(this);
      if (!$tbl.parent().hasClass('table-responsive')) {
        $tbl.wrap('<div class="table-responsive"></div>');
      }
    });
  }

  // ===== PATCH START: helper untuk select Chosen (produk) =====
  function setSelectVal(selector, value) {
    var $el = $(selector);
    $el.val(value);

    // kalau pakai chosen, harus di-update biar teksnya ikut berubah
    if ($el.data('chosen')) {
      $el.trigger('chosen:updated');
    }

    // jaga-jaga untuk listener lain
    $el.trigger('change');
  }
  // ===== PATCH END =====

  var bahanKomposisiOptions = <?=json_encode($bahan_komposisi_options, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);?>;
  var activeKomposisiRow = null;

  function escapeHtml(text) {
    return $('<div/>').text(text == null ? '' : text).html();
  }

  function parseKomposisiNumber(value) {
    value = String(value == null ? '' : value).replace(',', '.');
    var number = parseFloat(value);
    return isNaN(number) ? 0 : number;
  }

  function formatKomposisiNumber(value) {
    var number = parseKomposisiNumber(value);
    if (!number) {
      return '';
    }
    return parseFloat(number.toFixed(4)).toString();
  }

  function getKomposisiOption(id) {
    id = String(id || '');
    for (var i = 0; i < bahanKomposisiOptions.length; i++) {
      if (String(bahanKomposisiOptions[i].id) === id) {
        return bahanKomposisiOptions[i];
      }
    }
    return null;
  }

  function hitungKomposisiJumlah(panjang, lebar, mode) {
    panjang = parseKomposisiNumber(panjang);
    lebar = parseKomposisiNumber(lebar);
    if (panjang <= 0 || lebar <= 0) {
      return 0;
    }
    if (parseInt(mode, 10) === 2) {
      return lebar / 100;
    }
    return (panjang / 100) * (lebar / 100);
  }

  function getKomposisiMode($row) {
    var option = $row ? getKomposisiOption($row.find(".komponen").val()) : null;
    return option ? parseInt(option.hitung_ukuran, 10) || 0 : 0;
  }

  function buildKomposisiOptions(selected) {
    var html = '<option value="">Pilih</option>';
    $.each(bahanKomposisiOptions, function(_, item) {
      var id = String(item.id);
      var label = item.title + ' (' + item.satuan + ')';
      html += '<option value="' + id + '"' + (String(selected) === id ? ' selected' : '') + '>' + escapeHtml(label) + '</option>';
    });
    return html;
  }

  function syncKomposisiSelectOptions() {
    $("#komposisi_rows .komposisi-row").each(function() {
      var $row = $(this);
      var $select = $row.find(".komponen");
      var selected = $select.val();

      $select.html(buildKomposisiOptions(selected));
      if (selected && $select.find('option[value="' + selected + '"]').length) {
        $select.val(selected);
      } else {
        $select.val('');
        $row.find(".komponen-panjang, .komponen-lebar").val('');
      }

      updateKomposisiRowUkuran($row);
    });
  }

  function refreshBahanKomposisiOptions() {
    $.ajax({
      type: 'POST',
      url: base_url + 'produk/bahan_komposisi_options',
      dataType: 'json',
      success: function(data) {
        bahanKomposisiOptions = $.isArray(data) ? data : [];
        syncKomposisiSelectOptions();
      }
    });
  }

  function toggleKomposisi() {
    if ($("#komposisi_aktif").val() == '1') {
      $(".komposisi-box").show();
      if ($("#komposisi_rows .komposisi-row").length == 0) {
        addKomposisiRow('', '');
      }
    } else {
      $(".komposisi-box").hide();
      $("#komposisi_rows").empty();
    }
  }

  function updateKomposisiRowUkuran($row) {
    var option = getKomposisiOption($row.find(".komponen").val());
    var hitungUkuran = option && parseInt(option.hitung_ukuran, 10) > 0;
    var panjang = $row.find(".komponen-panjang").val();
    var lebar = $row.find(".komponen-lebar").val();
    var title = panjang && lebar ? panjang + ' x ' + lebar + ' cm' : 'Panjang x Lebar';

    $row.find(".komposisi-ukuran-wrap").toggle(!!hitungUkuran);
    $row.find(".komposisi-ukuran").attr("title", title);

    if (!hitungUkuran) {
      $row.find(".komponen-panjang, .komponen-lebar").val('');
    }
  }

  function updateKomposisiTotalPreview() {
    var mode = getKomposisiMode(activeKomposisiRow);
    $("#komposisi_total_label").text(mode === 2 ? "Total (m)" : "Total (m2)");
    $("#komposisi_total").val(formatKomposisiNumber(hitungKomposisiJumlah($("#komposisi_panjang").val(), $("#komposisi_lebar").val(), mode)));
  }

  function addKomposisiRow(idKomponen, jumlah, panjang, lebar) {
    var row = '' +
      '<div class="form-group row komposisi-row">' +
        '<div class="col-md-6">' +
          '<label>Bahan Komponen</label>' +
          '<select class="form-control custom-select komponen" name="komponen[]">' + buildKomposisiOptions(idKomponen) + '</select>' +
        '</div>' +
        '<div class="col-md-3">' +
          '<label>Jumlah</label>' +
          '<input type="text" class="form-control form-control-sm komponen-jumlah" name="komponen_jumlah[]" value="' + escapeHtml(jumlah) + '">' +
        '</div>' +
        '<div class="col-md-2 komposisi-ukuran-wrap">' +
          '<label>&nbsp;</label>' +
          '<button type="button" class="btn btn-secondary btn-sm flat komposisi-ukuran" title="Panjang x Lebar"><i class="fa fa-arrows-alt"></i></button>' +
          '<input type="hidden" class="komponen-panjang" name="komponen_panjang[]" value="' + escapeHtml(panjang) + '">' +
          '<input type="hidden" class="komponen-lebar" name="komponen_lebar[]" value="' + escapeHtml(lebar) + '">' +
        '</div>' +
        '<div class="col-md-1 komposisi-action">' +
          '<button type="button" class="btn btn-danger btn-sm flat remove_komposisi"><i class="fa fa-times"></i></button>' +
        '</div>' +
      '</div>';
    $("#komposisi_rows").append(row);
    updateKomposisiRowUkuran($("#komposisi_rows .komposisi-row").last());
  }

  function resetKomposisi() {
    $("#komposisi_aktif").val("0");
    $("#komposisi_rows").empty();
    $(".komposisi-box").hide();
  }

  function loadKomposisi(aktif, rows) {
    resetKomposisi();
    if (parseInt(aktif, 10) !== 1) {
      return;
    }
    $("#komposisi_aktif").val("1");
    $(".komposisi-box").show();
    rows = $.isArray(rows) ? rows : [];
    $.each(rows, function(_, row) {
      addKomposisiRow(row.id_bahan_komponen, row.jumlah, row.panjang, row.lebar);
    });
    if (rows.length == 0) {
      addKomposisiRow('', '');
    }
  }

  function toggleVarian() {
    if ($("#varian_aktif").val() == '1') {
      $(".ukuran-default-wrap").hide();
      $(".komposisi-select-wrap").removeClass("col-md-6").addClass("col-md-12");
      $("#ukuran_default").removeClass("is-invalid is-valid");
      $(".varian-box").show();
      if ($("#varian_rows .varian-row").length == 0) {
        addVarianRow('', '');
      }
    } else {
      $(".ukuran-default-wrap").show();
      $(".komposisi-select-wrap").removeClass("col-md-12").addClass("col-md-6");
      $(".varian-box").hide();
      $("#varian_rows").empty();
    }
  }

  function addVarianRow(warna, ukuran, hargaJual) {
    hargaJual = hargaJual || '';
    var row = '' +
      '<div class="form-group row varian-row">' +
        '<div class="col-md-3">' +
          '<label>Warna</label>' +
          '<input type="text" class="form-control form-control-sm varian-warna" name="varian_warna[]" value="' + escapeHtml(warna) + '" placeholder="Contoh: Hitam">' +
        '</div>' +
        '<div class="col-md-3">' +
          '<label>Ukuran</label>' +
          '<input type="text" class="form-control form-control-sm varian-ukuran" name="varian_ukuran[]" value="' + escapeHtml(ukuran) + '" placeholder="Contoh: L">' +
        '</div>' +
        '<div class="col-md-4">' +
          '<label>Harga Jual</label>' +
          '<input type="text" class="form-control form-control-sm varian-harga-jual" name="varian_harga_jual[]" value="' + escapeHtml(hargaJual) + '" placeholder="Contoh: 35000" onkeyup="formatNumber(this)">' +
        '</div>' +
        '<div class="col-md-2 d-flex align-items-end justify-content-end">' +
          '<button type="button" class="btn btn-danger btn-sm flat remove_varian varian-remove-btn" title="Hapus varian"><i class="fa fa-times"></i></button>' +
        '</div>' +
      '</div>';
    $("#varian_rows").append(row);
  }

  function resetVarian() {
    $("#varian_aktif").val("0");
    $("#varian_rows").empty();
    $(".varian-box").hide();
    $(".ukuran-default-wrap").show();
    $(".komposisi-select-wrap").removeClass("col-md-12").addClass("col-md-6");
  }

  function loadVarian(aktif, rows) {
    resetVarian();
    if (parseInt(aktif, 10) !== 1) {
      return;
    }

    $("#varian_aktif").val("1");
    $(".varian-box").show();
    rows = $.isArray(rows) ? rows : [];
    $.each(rows, function(_, row) {
      addVarianRow(row.warna || '', row.ukuran || '', row.harga_jual ? formatMoney(row.harga_jual, 0, "") : '');
    });
    if (rows.length == 0) {
      addVarianRow('', '');
    }
  }

  var halaman = $("#halaman").val();

  // init chosen untuk select-box (produk)
  $(".select-box").chosen({width: "100%"});

  $("#ModalHarga").on("hidden.bs.modal", function() {
    var halaman = $("#halaman").val();
    search_Bahan(halaman);
  });

  $("#ModalKomposisiUkuran").on("hidden.bs.modal", function() {
    activeKomposisiRow = null;
  });

  $('.generate').on('click', function(){
    var digits = Math.floor(Math.random() * 900000000000) + 100000000000;
    $.ajax({
      url: base_url+'produk/barcode/',
      type: 'POST',
      dataType: 'json',
      data: { barcode: digits },
      success: function(res) { $('#barcode_bahan').val(res.barcode); }
    });
  });

  $(document).ready(function() {
    $("#stok").change(function(){
      toggleStokOptions();
    });

    $("#komposisi_aktif").change(function(){
      toggleKomposisi();
    });

    $("#varian_aktif").change(function(){
      toggleVarian();
    });

    $("#produk").change(function(){
      $("#produk").removeClass("is-invalid").addClass("is-valid");
      $("#produk_chosen").removeClass("is-invalid").addClass("is-valid");
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var target = $(e.target).attr("href");
      if (target == '#tab_1') { $("#radio_1").prop("checked", true); save_tab(1); }
      if (target == '#tab_2') { $("#radio_2").prop("checked", true); save_tab(2); }
      if (target == '#tab_3') { $("#radio_3").prop("checked", true); save_tab(3); }
      if (target == '#tab_4') { $("#radio_4").prop("checked", true); save_tab(4); }
      if (target == '#tab_5') { $("#radio_5").prop("checked", true); save_tab(5); }
    });
  });

  $("#print_bahan").click(function(e) {
    e.preventDefault();
    $("#target_print_bahan").submit();
  });

  $('.clear_bahan').on('click', function(){
    $('#keywords').val('');
    search_Bahan();
  });

  $(document).on('click', '.add_komposisi', function(e){
    e.preventDefault();
    addKomposisiRow('', '');
  });

  $(document).on('click', '.add_varian', function(e){
    e.preventDefault();
    addVarianRow('', '');
  });

  $(document).on('click', '.remove_komposisi', function(e){
    e.preventDefault();
    $(this).closest('.komposisi-row').remove();
    if ($("#komposisi_aktif").val() == '1' && $("#komposisi_rows .komposisi-row").length == 0) {
      addKomposisiRow('', '');
    }
  });

  $(document).on('click', '.remove_varian', function(e){
    e.preventDefault();
    $(this).closest('.varian-row').remove();
    if ($("#varian_aktif").val() == '1' && $("#varian_rows .varian-row").length == 0) {
      addVarianRow('', '');
    }
  });

  $(document).on('change', '.komponen', function(){
    var $row = $(this).closest('.komposisi-row');
    $row.find(".komponen-panjang, .komponen-lebar").val('');
    updateKomposisiRowUkuran($row);
  });

  $(document).on('input', '.komponen-jumlah', function(){
    var $row = $(this).closest('.komposisi-row');
    $row.find(".komponen-panjang, .komponen-lebar").val('');
    updateKomposisiRowUkuran($row);
  });

  $(document).on('click', '.komposisi-ukuran', function(e){
    e.preventDefault();
    activeKomposisiRow = $(this).closest('.komposisi-row');
    $("#komposisi_panjang, #komposisi_lebar").removeClass('is-invalid');
    $("#komposisi_panjang").val(activeKomposisiRow.find(".komponen-panjang").val());
    $("#komposisi_lebar").val(activeKomposisiRow.find(".komponen-lebar").val());
    updateKomposisiTotalPreview();
    $("#ModalKomposisiUkuran").modal('show');
    setTimeout(function(){ $("#komposisi_panjang").focus(); }, 250);
  });

  $("#komposisi_panjang, #komposisi_lebar").on('input', function(){
    updateKomposisiTotalPreview();
  });

  $(document).on('click', '.apply_komposisi_ukuran', function(e){
    e.preventDefault();
    if (!activeKomposisiRow) {
      return;
    }

    var panjang = parseKomposisiNumber($("#komposisi_panjang").val());
    var lebar = parseKomposisiNumber($("#komposisi_lebar").val());
    var total = hitungKomposisiJumlah(panjang, lebar, getKomposisiMode(activeKomposisiRow));

    if (panjang <= 0) {
      showNotif('bottom-right','Input data','Panjang komposisi harus lebih dari 0','error');
      $("#komposisi_panjang").addClass('is-invalid').focus();
      return;
    }
    if (lebar <= 0) {
      showNotif('bottom-right','Input data','Lebar komposisi harus lebih dari 0','error');
      $("#komposisi_lebar").addClass('is-invalid').focus();
      return;
    }

    $("#komposisi_panjang, #komposisi_lebar").removeClass('is-invalid');
    activeKomposisiRow.find(".komponen-panjang").val(formatKomposisiNumber(panjang));
    activeKomposisiRow.find(".komponen-lebar").val(formatKomposisiNumber(lebar));
    activeKomposisiRow.find(".komponen-jumlah").val(formatKomposisiNumber(total));
    updateKomposisiRowUkuran(activeKomposisiRow);
    $("#ModalKomposisiUkuran").modal('hide');
  });

  search_Bahan();

  $("#file_excel_bahan").on("change", function(e){
    // app.js menyalakan body loader untuk semua custom file input.
    // Import Excel memiliki state loading sendiri, jadi hentikan handler global khusus input ini.
    e.stopImmediatePropagation();
    var fileName = this.files && this.files.length ? this.files[0].name : "Pilih file .xlsx / .xls / .csv";
    $(this).next(".custom-file-label").html(fileName);
  });

  function setImportBahanStatus(message, type, allowHtml){
    var $status = $("#formImportBahan .import-bahan-status");
    if(!message){
      $status.addClass("d-none").removeClass("alert-info alert-success alert-warning alert-danger").html("");
      return;
    }
    $status
      .removeClass("d-none alert-info alert-success alert-warning alert-danger")
      .addClass("alert-" + (type || "info"));
    if(allowHtml){
      $status.html(message);
    }else{
      $status.text(message);
    }
  }

  function setImportBahanLoading(active){
    var $button = $("#formImportBahan .upload-bahan-excel");
    if(active){
      if(!$button.data("default-html")){
        $button.data("default-html", $button.html());
      }
      $button.prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Memproses...');
      setImportBahanStatus('<i class="fa fa-spinner fa-spin"></i> File sedang diperiksa dan diimport. Mohon tunggu.', "info", true);
      return;
    }
    $button.prop("disabled", false).html($button.data("default-html") || '<i class="fa fa-upload"></i> Upload');
  }

  window.stopImportBahanLoading = function(){
    if(window.importBahanWatchdog){ clearTimeout(window.importBahanWatchdog); window.importBahanWatchdog = null; }
    // Bersihkan overlay versi lama bila masih tertinggal, tanpa menghapus elemen global halaman.
    $("#ModalImportBahan .modal-content").loading("stop");
    $("body").loading("stop");
    setImportBahanLoading(false);
    window.importBahanRunning = false;
    window.importBahanRequest = null;
  };

  window.uploadBahanExcel = function(e){
    if(e && e.preventDefault){ e.preventDefault(); }
    if(window.importBahanRunning){ return; }
    var file = document.getElementById("file_excel_bahan");
    if(!file.files || file.files.length === 0){
      showNotif('bottom-right','Import Excel','File Excel belum dipilih','error');
      return false;
    }
    if(file.files[0].size > (10 * 1024 * 1024)){
      setImportBahanStatus("Ukuran file Excel maksimal 10 MB.", "warning");
      sweet("Import Excel", "Ukuran file Excel maksimal 10 MB.", "warning", "warning");
      return false;
    }

    window.importBahanRunning = true;
    setImportBahanLoading(true);

    var formData = new FormData(document.getElementById("formImportBahan"));
    var form = document.getElementById("formImportBahan");
    var importUrl = form.getAttribute("action") || (base_url + "produk/import_bahan_excel");
    var importRequest = new XMLHttpRequest();
    window.importBahanRequest = importRequest;
    importRequest.open("POST", importUrl, true);
    importRequest.timeout = 120000;

    importRequest.onload = function(){
      var data = {};
      try {
        data = JSON.parse(importRequest.responseText || "{}");
      } catch (err) {
        data = {status: 400, msg: (importRequest.responseText || "Response import tidak valid").replace(/\s+/g, " ").trim()};
      }

      if(importRequest.status >= 200 && importRequest.status < 300){
        if(data.status == 200){
          setImportBahanStatus(data.msg, "success");
          showNotif('bottom-right','Import Excel',data.msg,'success');
          $("#formImportBahan")[0].reset();
          $("#file_excel_bahan").next(".custom-file-label").html("Pilih file .xlsx / .xls / .csv");
          $("#ModalImportBahan").modal("hide");
          search_Bahan(0);
        }else{
          setImportBahanStatus(data.msg || "Import gagal", "warning");
          sweet("Import Excel", data.msg || "Import gagal", "warning", "warning");
        }
      }else if(importRequest.status == 401){
        sweet_login(data.msg || "Sesi login habis", 'warning', base_url);
      }else{
        var msg = data.msg || "Upload gagal diproses";
        if(msg.length > 300){ msg = msg.substring(0, 300) + "..."; }
        setImportBahanStatus(msg, "warning");
        sweet("Peringatan!!!", msg, "warning", "warning");
      }
    };

    importRequest.onerror = function(){
      setImportBahanStatus("Upload gagal terkirim. Periksa koneksi lokal atau coba reload halaman.", "danger");
      sweet("Peringatan!!!", "Upload gagal terkirim. Periksa koneksi lokal atau coba reload halaman.", "warning", "warning");
    };

    importRequest.ontimeout = function(){
      setImportBahanStatus("Upload terlalu lama diproses. Periksa ukuran file atau isi data Excel.", "warning");
      sweet("Peringatan!!!", "Upload terlalu lama diproses. Periksa ukuran file atau isi data Excel.", "warning", "warning");
    };

    importRequest.onabort = function(){
      if(!window.importBahanSilentAbort){
        setImportBahanStatus("Upload dihentikan karena proses terlalu lama. Silakan periksa file lalu coba kembali.", "warning");
        sweet("Peringatan!!!", "Upload dihentikan karena proses terlalu lama. Silakan periksa file lalu coba kembali.", "warning", "warning");
      }
    };

    importRequest.onloadend = function(){
      stopImportBahanLoading();
    };

    importRequest.send(formData);

    window.importBahanWatchdog = setTimeout(function(){
      if(importRequest && importRequest.readyState !== 4){
        importRequest.abort();
        stopImportBahanLoading();
      }
    }, 130000);
    return false;
  };

  $("#formImportBahan").on("submit", function(e){
    e.preventDefault();
    uploadBahanExcel(e);
  });

  $("#ModalImportBahan").on("hidden.bs.modal", function(){
    if(window.importBahanRequest && window.importBahanRequest.readyState !== 4){
      window.importBahanSilentAbort = true;
      window.importBahanRequest.abort();
      window.importBahanSilentAbort = false;
    }
    stopImportBahanLoading();
    setImportBahanStatus("");
  });

  function search_Bahan(page_num){
    page_num = page_num?page_num:0;
    var keywords = $('#keywords').val();
    var sortBy = $('#sortBy').val();
    var sort_kategori = $('#sort_kategori').val();
    var limits = $('#limits').val();

    var urlnya = base_url+"produk/cariBahan/"+page_num
    $.ajax({
      type: 'POST',
      url: urlnya,
      data:{page:page_num,keywords:keywords,sortBy:sortBy,kategori:sort_kategori,limits:limits},
      beforeSend: function(){ $('#dataBahan').loading(); },
      success: function(html){
        $('#dataBahan').html(html);
        $('#halaman').val(page_num);
        wrapTablesResponsive("#dataBahan");
        $('#dataBahan').loading('stop');
        refreshBahanKomposisiOptions();
      },
      error : function(res, status, httpMessage) {
        $('#dataBahan').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function hitung(){
    var harga_pokok = parseFloat(hargaDecimalValue($('#harga_pokok').val()) || 0);
    var total_hpp = parseFloat(hargaDecimalValue($('#total_hpp').val()) || 0);
    var persen = parseFloat(hargaDecimalValue($('#persen').val()) || 0);
    var total_harga = harga_pokok + total_hpp;
    var total = (total_harga * persen) / 100;
    var harga_jual = total_harga + total;
    $("#harga_jual").val(hargaFormatDecimalDisplay(harga_jual));
    save_satu_harga();
  }

  function hargaDigits(value){
    return (value || '').toString().replace(/[^0-9]/g, '');
  }

  function hargaDecimalValue(value){
    var raw = (value || '').toString().replace(/\s/g, '').replace(/[^0-9.,]/g, '');
    if(raw === ''){ return ''; }

    if(/^\d{1,3}([\.,]\d{3})+$/.test(raw)){
      return hargaDigits(raw);
    }

    var lastComma = raw.lastIndexOf(',');
    var lastDot = raw.lastIndexOf('.');
    var decimalPos = -1;

    if(lastComma !== -1 && lastDot !== -1){
      decimalPos = Math.max(lastComma, lastDot);
    } else {
      decimalPos = Math.max(lastComma, lastDot);
      if(decimalPos !== -1){
      var sep = raw.charAt(decimalPos);
      var firstSep = raw.indexOf(sep);
      var decimals = raw.length - decimalPos - 1;
      if(decimals > 4 || (sep === '.' && decimals === 3 && firstSep === decimalPos) || (firstSep === decimalPos && decimals === 0)){
        decimalPos = -1;
      }
    }
    }

    if(decimalPos === -1){
      return hargaDigits(raw);
    }

    var whole = hargaDigits(raw.slice(0, decimalPos));
    var decimal = hargaDigits(raw.slice(decimalPos + 1));
    return (whole || '0') + (decimal !== '' ? '.' + decimal : '');
  }

  function hargaFormatDecimalDisplay(value){
    var raw = (value || '').toString();
    if(/^\d{1,3}([\.,]\d{3})+$/.test(raw.replace(/\s/g, ''))){
      return hargaFormatNumber(raw);
    }
    var hasTrailingDecimal = /[.,]\s*$/.test(raw);
    var normalized = hargaDecimalValue(raw);
    if(normalized === ''){ return ''; }

    var parts = normalized.split('.');
    var whole = hargaFormatNumber(parts[0]);
    if(parts.length > 1 || hasTrailingDecimal){
      return whole + ',' + (parts[1] || '');
    }

    return whole;
  }

  function hargaHasDecimalPart(value){
    var raw = (value || '').toString().replace(/\s/g, '').replace(/[^0-9.,]/g, '');
    if(/[.,]$/.test(raw)){ return true; }
    if(raw.indexOf(',') !== -1 && raw.indexOf('.') !== -1){ return true; }

    var commaCount = (raw.match(/,/g) || []).length;
    var dotCount = (raw.match(/\./g) || []).length;
    if(commaCount + dotCount !== 1){ return false; }

    var decimalPos = Math.max(raw.lastIndexOf(','), raw.lastIndexOf('.'));
    var decimals = raw.length - decimalPos - 1;
    return decimals > 0 && decimals <= 4 && !(raw.charAt(decimalPos) === '.' && decimals === 3);
  }

  function hargaBahanInputDecimal(input){
    input.value = (input.value || '').toString().replace(/[^0-9.,]/g, '');
  }

  function hargaBaseColumn(column){
    return (column || '').toString().replace(/_\d+$/, '');
  }

  function hargaIsNumericColumn(column){
    column = hargaBaseColumn(column);
    return ['harga_pokok','harga_jual','jumlah_minimal','jumlah_maksimal'].indexOf(column) !== -1;
  }

  function hargaIsPriceColumn(column){
    column = hargaBaseColumn(column);
    return ['harga_pokok','harga_jual'].indexOf(column) !== -1;
  }

  function hargaFormatNumber(value){
    var numeric = hargaDigits(value);
    if(numeric === ''){ return ''; }
    return typeof formatMoney === 'function'
      ? formatMoney(numeric, 0, '')
      : numeric.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  }

  function hargaFormatDisplay(column, value){
    if(hargaIsPriceColumn(column)){
      return hargaFormatDecimalDisplay(value);
    }

    var numeric = hargaDigits(value);
    if(numeric === ''){ return ''; }
    return hargaIsNumericColumn(column) ? hargaFormatNumber(numeric) : value;
  }

  function hargaPrepareValue(column, value){
    if(hargaIsPriceColumn(column)){
      return hargaDecimalValue(value);
    }

    return hargaIsNumericColumn(column) ? hargaDigits(value) : value;
  }

  function hargaUpdateCellDisplay(cell, column, value){
    if(hargaIsNumericColumn(column)){
      $(cell).text(hargaFormatDisplay(column, value));
    }
  }

  function hargaColumnFromCell(cell){
    var onblur = ($(cell).attr('onblur') || $(cell).attr('onBlur') || '').toString();
    var match = onblur.match(/'(harga_pokok|harga_jual|jumlah_minimal|jumlah_maksimal)(?:_\d+)?'/);
    if(match && match[0]){
      return match[0].replace(/'/g, '');
    }

    var cellId = ($(cell).attr('id') || '').toString();
    match = cellId.match(/(harga_pokok|harga_jual|jumlah_minimal|jumlah_maksimal)(?:_\d+)?/);
    return match && match[0] ? match[0] : '';
  }

  function hargaMoveCaretToEnd(element){
    if(!element || !document.createRange || !window.getSelection){ return; }
    var range = document.createRange();
    range.selectNodeContents(element);
    range.collapse(false);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }

  $(document).on('keypress', '#ModalHarga table [contenteditable="true"]', function(e){
    var code = e.which || e.keyCode;
    var column = hargaColumnFromCell(this);
    var char = String.fromCharCode(code);
    if(e.ctrlKey || e.metaKey){ return true; }
    if(code === 0 || code === 8 || code === 13){ return true; }

    if(hargaIsPriceColumn(column) && /[.,]/.test(char)){
      if(hargaHasDecimalPart($(this).text())){
        e.preventDefault();
      }
      return;
    }

    if(!/[0-9]/.test(char)){
      e.preventDefault();
    }
  });

  $(document).on('input', '#ModalHarga table [contenteditable="true"]', function(){
    var column = hargaColumnFromCell(this);
    if(!hargaIsNumericColumn(column)){ return; }

    if(hargaIsPriceColumn(column)){
      var cleaned = $(this).text().replace(/[^0-9.,]/g, '');
      if($(this).text() !== cleaned){
        $(this).text(cleaned);
        hargaMoveCaretToEnd(this);
      }
      return;
    }

    var formatted = hargaFormatDisplay(column, $(this).text());
    if($(this).text() !== formatted){
      $(this).text(formatted);
      hargaMoveCaretToEnd(this);
    }
  });

  $(document).on('paste', '#ModalHarga table [contenteditable="true"]', function(e){
    e.preventDefault();
    var column = hargaColumnFromCell(this);
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');
    var cleanText = hargaIsNumericColumn(column) ? hargaFormatDisplay(column, text) : text;
    document.execCommand('insertText', false, cleanText);
    if(hargaIsNumericColumn(column)){
      $(this).text(hargaFormatDisplay(column, $(this).text()));
    }
    hargaMoveCaretToEnd(this);
  });

  function save_tab(idtab){
    var id = $('#id_harga_menu').val();
    $.ajax({
      url: base_url + 'produk/save_tab',
      data: {id:id,idtab:idtab},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function(data) {
        if(idtab==1){ load_satuan(data.id); load_satu_harga(id); }
        if(idtab==2){ load_satuan(data.id); load_satuan_harga(id); }
        if(idtab==3){ load_satuan(data.id); load_harga_level(id); }
        if(idtab==4){ load_range(id); }
        if(idtab==5){ load_range_level(id); }
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function setSemuaMetodeHargaState(active){
    $("#aktifkan_semua_harga").prop("checked", active);
    $("#ModalHarga").toggleClass("semua-metode-aktif", active);
  }

  $(document).on("change", "#aktifkan_semua_harga", function(){
    var active = this.checked;
    var currentTarget = $("#myTab .nav-link.active").attr("href") || "#tab_1";
    var currentTab = parseInt(currentTarget.replace("#tab_", ""), 10) || 1;
    var id = $("#id_harga_menu").val();

    $.ajax({
      url: base_url + "produk/save_semua_metode_harga",
      type: "POST",
      dataType: "json",
      data: {id:id, aktif:active ? 1 : 0, tab:currentTab},
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function(data){
        if(data.status == 200){
          setSemuaMetodeHargaState(parseInt(data.type_harga, 10) === 6);
          showNotif("bottom-right", "Pengaturan Harga", data.msg, "success");
        }else{
          setSemuaMetodeHargaState(!active);
          showNotif("bottom-right", "Pengaturan Harga", data.msg || "Pengaturan gagal disimpan", "warning");
        }
        $("body").loading("stop");
      },
      error: function(){
        setSemuaMetodeHargaState(!active);
        $("body").loading("stop");
      }
    });
  });

  function save_satu_harga(){
    var id = $('#id_harga_menu').val();
    var tab = 1;
    var satuan = $('#satuan_load').val();
    var harga_beli = hargaDecimalValue($('#harga_beli').val());
    var harga_pokok = hargaDecimalValue($('#harga_pokok').val());
    var total_hpp = hargaDecimalValue($('#total_hpp').val());
    var persen = hargaDecimalValue($('#persen').val()) || 0;
    var harga_jual = hargaDecimalValue($('#harga_jual').val());
    $.ajax({
      url: base_url + 'produk/save_satu_harga',
      data: {id:id,tab:tab,satuan:satuan,harga_beli:harga_beli,harga_pokok:harga_pokok,persen:persen,harga_jual:harga_jual,total_hpp:total_hpp},
      method: 'POST',
      dataType:'json',
      success: function() { showNotif('bottom-right','Update Harga','sukses','success'); }
    });
  }

  $(document).ready(function() {
    $('input').click(function() { this.select(); });
  });

  shortcut.add("ctrl+s",function() { $(".save_bahan").click(); });

  function toggleStokOptions(){
    var stokAktif = $("#stok").val() == 'Y';
    $(".jenis").toggle(stokAktif);
    $(".batas-minimum-stok-wrap").toggle(stokAktif);
  }

  function setFotoBahan(path, url){
    path = path || '';
    url = url || (path ? base_url + path : '');
    $("#foto_bahan").val(path);
    var $preview = $("#foto_produk_preview");
    var $image = $preview.find("img");
    if(path && url){
      $image.attr("src", url).show();
      $preview.addClass("has-image");
      $("#hapus_foto_produk").removeClass("d-none");
    }else{
      $image.attr("src", "").hide();
      $preview.removeClass("has-image");
      $("#hapus_foto_produk").addClass("d-none");
    }
  }

  $(document).on('click', '#pilih_foto_produk', function(){
    $("#foto_produk_file").trigger('click');
  });

  $(document).on('click', '#hapus_foto_produk', function(){
    $("#foto_produk_file").val('');
    setFotoBahan('', '');
  });

  $(document).on('change', '#foto_produk_file', function(){
    var file = this.files && this.files[0];
    if(!file){ return; }
    if(file.size > 4 * 1024 * 1024){
      showNotif('bottom-right','Upload foto','Ukuran foto maksimal 4 MB','error');
      $(this).val('');
      return;
    }
    var formData = new FormData();
    formData.append('foto_produk', file);
    $.ajax({
      url: base_url + 'produk/upload_foto_bahan',
      data: formData,
      method: 'POST',
      dataType: 'json',
      processData: false,
      contentType: false,
      beforeSend: function(){ $('#load-save-bahan').loading({zIndex:1060,theme:'dark'}); },
      success: function(data){
        $('#load-save-bahan').loading('stop');
        if(data.status === 200){
          setFotoBahan(data.path, data.url);
          showNotif('bottom-right','Upload foto',data.msg,'success');
        }else{
          $("#foto_produk_file").val('');
          showNotif('bottom-right','Upload foto',data.msg || 'Foto gagal diunggah','warning');
        }
      },
      error: function(res, status, httpMessage){
        $('#load-save-bahan').loading('stop');
        $("#foto_produk_file").val('');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  // ===== PATCH: reset form harus reset produk + chosen =====
  function clearformBahan(){
    $("#bahan_id").val("0");
    $("#type").val("");
    $("#judul").val("");
    $("#barcode_bahan").val("");
    $("#harga_modal").val("");
    $("#harga_jual_bahan").val("");
    $("#id_satuan").val("");
    $("#foto_produk_file").val("");
    setFotoBahan('', '');

    // reset dropdown normal
    $("#kategori").val("");
    $("#satuan").val("");
    $("#stok").val("N");
    $("#batas_minimum_stok_bahan").val("0");
    $("#ukuran").val(0);
    $("#aktif").val(1);
    $("#komisi_desain_aktif").val(0);
    $("#komisi_penjualan_aktif").val(0); $("#komisi_penjualan_tipe").val('persen'); $("#komisi_penjualan_nilai").val(0); toggleKomisiPenjualan();
    $("#margin_finishing_aktif").val(0);
    $("#lebar_bahan_tersedia").val("1,1.5,2,3");
    $("#pembulatan_di_bawah_satu_meter").val("0");
    $("#jenis").val(0);
    $("#ukuran_default").val("");
    toggleStokOptions();
    togglePembulatanUkuran();

    // reset Produk (chosen)
    setSelectVal("#produk", "");
    // (opsional) bersihin class invalid di chosen container
    $("#produk_chosen").removeClass("is-invalid is-valid");
    $("#ukuran_default").removeClass("is-invalid is-valid");
    resetKomposisi();
    resetVarian();
  }
  // ===== PATCH END =====

  $('#ModalBahan').on('shown.bs.modal', function() {
    $('#judul').focus();
    // jaga-jaga kalau modal bikin chosen “nggak ngepas”
    if ($("#produk").data('chosen')) {
      $("#produk").trigger("chosen:updated");
    }
  });
  $(function(){ $(document).fcs(".form-control"); });

  $(document).on('click','.featured',function(e){
    var id = $(this).attr('data-id');
    var featured = $(this).attr('data-featured');
    var kategori = $(this).attr('data-jenis');
    var produk = $(this).attr('data-produk');
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/save_bahan',
      data: {type:'featured',id:id,featured:featured,kategori:kategori,produk:produk},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function() { search_Bahan(halaman); $('body').loading('stop'); },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  $(document).on('click','.toggle_komisi_desain',function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');
    var value = $(this).attr('data-value');
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/toggle_komisi_desain_bahan',
      data: {id:id,value:value},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function(data) {
        if(data.status==200){
          showNotif('bottom-right','Simpan data',data.msg,'success');
        }else{
          showNotif('bottom-right','Simpan data',data.msg,'warning');
        }
        search_Bahan(halaman);
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  $(document).on('click','.menu_harga',function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');
    var idtype = $(this).attr('data-type');
    $('.form-control').addClass('form-control-sm');
    $('.form-group').css('margin-bottom','5px');

    $.ajax({
      url: base_url + 'produk/atur_harga',
      data: {type:'edit',id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $("body").loading({zIndex:1060}); },
      success: function(data) {
        $('#ModalHarga').modal('show');
        $("#id_harga_menu").val(data.id);
        $("#TitleHarga").html(data.judul);
        $("#harga_pokok").val(data.modal);
        var semuaMetode = parseInt(data.type_harga, 10) === 6;
        var initialTab = semuaMetode ? 1 : parseInt(data.type_harga, 10);
        setSemuaMetodeHargaState(semuaMetode);
        $('#myTab a[href="#tab_' + initialTab + '"]').tab('show');
        $("#radio_"+initialTab).prop("checked", true);
        if(semuaMetode || data.type_harga==1){ load_satu_harga(data.id); load_satuan(data.id_satuan); }
        else if(data.type_harga==2){ load_satuan_harga(data.id); }
        else if(data.type_harga==3){ load_harga_level(data.id); load_satu_harga(data.id); }
        else if(data.type_harga==4){ load_range(data.id); }
        else if(data.type_harga==5){ load_range_level(data.id); }
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  function load_satu_harga(id){
    $.ajax({
      url: base_url + 'produk/load_satu_harga',
      data: {id:id},
      method: 'POST',
      dataType:'html',
      beforeSend: function(){ $('body').loading(); },
      success: function(response) {
        $("#load_satu_harga").html(response);
        $('body').loading('stop');
      },
      error : function(){ $('body').loading('stop'); }
    });
  }

  $(document).on('click','.add_bahan',function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');
    $('.form-control').addClass('form-control-sm');
    $('.form-group').css('margin-bottom','5px');

    clearformBahan();
    $("#exampleModalScrollableTitle").text(id == 0 ? "Tambah Produk" : "Edit Produk");
    $('#ModalBahan').modal('show');

    if(id==0){
      $("#type").val('add');
      return;
    } else {
      $("#type").val('edit');
    }

    $.ajax({
      url: base_url + 'produk/edit_bahan',
      data: {type:'edit',id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        $("#bahan_id").val(data.id);
        $("#judul").val(data.judul);

        // dropdown normal
        $("#kategori").val(data.kategori);

        // ===== PATCH UTAMA: Produk (Chosen) wajib update =====
        setSelectVal("#produk", data.produk);
        // ===== END PATCH =====

        $("#ukuran_default").val(data.ukuran_default || '');
        $("#harga_modal").val(data.modal);
        $("#harga_jual_bahan").val(data.harga_jual || '');
        $("#harga_pokok_penjualan").val(data.harga_pokok);
        $("#barcode_bahan").val(data.barcode);
        setFotoBahan(data.foto || '', data.foto ? base_url + data.foto : '');
        $("#satuan").val(data.id_satuan);
        $("#ukuran").val(data.ukuran);
        togglePembulatanUkuran();
        $("#stok").val(data.stok);
        $("#batas_minimum_stok_bahan").val(data.batas_minimum_stok || 0);
        $("#jenis").val(data.jenis);
        $("#aktif").val(data.aktif);
        $("#komisi_desain_aktif").val(data.komisi_desain_aktif || 0);
        $("#komisi_penjualan_aktif").val(data.komisi_penjualan_aktif || 0); $("#komisi_penjualan_tipe").val(data.komisi_penjualan_tipe || 'persen'); $("#komisi_penjualan_nilai").val(data.komisi_penjualan_nilai || 0); toggleKomisiPenjualan();
        $("#margin_finishing_aktif").val(data.margin_finishing_aktif || 0);
        $("#lebar_bahan_tersedia").val(data.lebar_bahan_tersedia || '1,1.5,2,3');
        $("#pembulatan_di_bawah_satu_meter").val(parseInt(data.pembulatan_di_bawah_satu_meter || 0, 10) === 1 ? '1' : '0');
        togglePembulatanUkuran();
        loadKomposisi(data.komposisi_aktif, data.komposisi);
        loadVarian(data.varian_aktif, data.varian);

        $('body').loading('stop');
        toggleStokOptions();
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  $("#judul").keyup(function(){ $("#judul").removeClass("is-invalid").addClass("is-valid"); });
  $("#harga_modal").keyup(function(){ $("#harga_modal").removeClass("is-invalid").addClass("is-valid"); });
  $("#harga_jual_bahan").keyup(function(){ $("#harga_jual_bahan").removeClass("is-invalid").addClass("is-valid"); });
  $("#ukuran_default").keyup(function(){ $("#ukuran_default").removeClass("is-invalid").addClass("is-valid"); });

  $("#kategori").change(function(){
    if($("#kategori").val()=='Data tidak ditemukan'){ $("#kategori").addClass('is-invalid'); }
    else{ $("#kategori").removeClass("is-invalid").addClass("is-valid"); }
  });

  $("#satuan").change(function(){
    if($("#satuan").val()=='Data tidak ditemukan'){ $("#satuan").addClass('is-invalid'); }
    else{ $("#satuan").removeClass("is-invalid").addClass("is-valid"); }
  });

  $("#aktif").change(function(){ $("#aktif").removeClass("is-invalid").addClass("is-valid"); });
  $("#komisi_desain_aktif").change(function(){ $("#komisi_desain_aktif").removeClass("is-invalid").addClass("is-valid"); });
  function toggleKomisiPenjualan(){
    var aktif = $('#komisi_penjualan_aktif').val() === '1';
    $('.komisi-penjualan-detail').css('display', aktif ? 'flex' : 'none');
  }
  $(document).on('change','#komisi_penjualan_aktif',toggleKomisiPenjualan);
  function togglePembulatanUkuran(){
    var aktif = parseInt($('#ukuran').val() || 0, 10) > 0;
    $('.pembulatan-ukuran-option').toggle(aktif);
    if (!aktif) {
      $('#margin_finishing_aktif').val(0);
    }
    $('#atur_lebar_bahan').toggle(aktif && $('#margin_finishing_aktif').val() === '1');
  }
  $(document).on('change','#ukuran',togglePembulatanUkuran);
  togglePembulatanUkuran();
  $("#margin_finishing_aktif").change(function(){
    $("#margin_finishing_aktif").removeClass("is-invalid").addClass("is-valid");
    togglePembulatanUkuran();
  });

  function normalisasiLebarBahan(){
    var values = [];
    $('#daftar_lebar_bahan .lebar-bahan-input').each(function(){
      values.push(parseFloat(($(this).val() || '').toString().replace(',', '.')));
    });
    values = values.filter(function(item){ return isFinite(item) && item > 0; });
    return values.filter(function(item, index){ return values.indexOf(item) === index; })
      .sort(function(a, b){ return a - b; });
  }

  function tambahBarisLebarBahan(value){
    var nilai = value === undefined || value === null ? '' : value;
    var row = $('<div class="input-group lebar-bahan-row">' +
      '<input type="number" min="0.01" step="0.01" class="form-control lebar-bahan-input" aria-label="Lebar bahan">' +
      '<div class="input-group-append">' +
        '<span class="input-group-text lebar-bahan-unit">Meter</span>' +
        '<button type="button" class="btn btn-outline-danger hapus-lebar-bahan" aria-label="Hapus lebar">&times;</button>' +
      '</div>' +
    '</div>');
    row.find('.lebar-bahan-input').val(nilai);
    $('#daftar_lebar_bahan').append(row);
  }

  $(document).on('click','#atur_lebar_bahan',function(){
    $(this).closest('[data-toggle="tooltip"]').tooltip('hide');
    // Modal kedua harus menjadi anak langsung body agar tidak mewarisi
    // ukuran, scroll, dan gaya dari modal Edit Produk.
    $('#ModalLebarBahan').appendTo(document.body);
    var values = ($('#lebar_bahan_tersedia').val() || '1,1.5,2,3').split(',');
    $('#daftar_lebar_bahan').empty();
    values.forEach(function(value){ tambahBarisLebarBahan(value); });
    $('#pembulatan_bawah_satu_editor').prop('checked', $('#pembulatan_di_bawah_satu_meter').val() === '1');
    $('#lebar_bahan_error').hide();
    $('#ModalLebarBahan').modal('show');
  });
  $(document).on('click','#tambah_lebar_bahan',function(){
    tambahBarisLebarBahan('');
    $('#lebar_bahan_error').hide();
    $('#daftar_lebar_bahan .lebar-bahan-input').last().focus();
  });
  $(document).on('click','.hapus-lebar-bahan',function(){
    $(this).closest('.lebar-bahan-row').remove();
  });
  $(document).on('input','.lebar-bahan-input',function(){
    $(this).removeClass('is-invalid');
    $('#lebar_bahan_error').hide();
  });
  $(document).on('click','.tutup-lebar-bahan',function(){ $('#ModalLebarBahan').modal('hide'); });
  $('#ModalLebarBahan').on('shown.bs.modal', function(){
    $('.modal-backdrop').last().css('z-index', 1070);
  });
  $('#ModalLebarBahan').on('hidden.bs.modal', function(){
    if ($('#ModalBahan').hasClass('show')) {
      $('body').addClass('modal-open');
    }
  });
  $(document).on('click','#simpan_lebar_bahan',function(){
    var values = normalisasiLebarBahan();
    if (!values.length) {
      $('#lebar_bahan_error').show();
      $('#daftar_lebar_bahan .lebar-bahan-input').first().addClass('is-invalid').focus();
      return;
    }
    $('#lebar_bahan_tersedia').val(values.join(','));
    $('#pembulatan_di_bawah_satu_meter').val($('#pembulatan_bawah_satu_editor').is(':checked') ? '1' : '0');
    $('#ModalLebarBahan').modal('hide');
    showNotif('bottom-right','Lebar bahan','Pengaturan lebar bahan diterapkan','success');
  });

  $(document).on('click','.save_bahan',function(e){
    e.preventDefault();
    var id = $("#bahan_id").val();
    var type = $("#type").val();
    var judul = $("#judul").val();
    var barcode_bahan = $("#barcode_bahan").val();
    var foto_bahan = $("#foto_bahan").val();
    var produk = $("#produk").val();
    var kategori = $("#kategori").val();
    var harga_modal = angka($("#harga_modal").val());
    var harga_jual_bahan = angka($("#harga_jual_bahan").val());
    var satuan = angka($("#satuan").val());
    var ukuran = angka($("#ukuran").val());
    var ukuran_default = $("#ukuran_default").val();
    var aktif = $("#aktif").val();
    var stok = $("#stok").val();
    var batas_minimum_stok = $("#batas_minimum_stok_bahan").val();
    var jenis = $("#jenis").val();
    var komposisi_aktif = $("#komposisi_aktif").val();
    var komisi_desain_aktif = $("#komisi_desain_aktif").val();
    var komisi_penjualan_aktif = $("#komisi_penjualan_aktif").val();
    var komisi_penjualan_tipe = $("#komisi_penjualan_tipe").val();
    var komisi_penjualan_nilai = $("#komisi_penjualan_nilai").val();
    var margin_finishing_aktif = $("#margin_finishing_aktif").val();
    var lebar_bahan_tersedia = $("#lebar_bahan_tersedia").val();
    var pembulatan_di_bawah_satu_meter = $("#pembulatan_di_bawah_satu_meter").val();
    var varian_aktif = $("#varian_aktif").val();
    var komponen = [];
    var komponen_jumlah = [];
    var komponen_panjang = [];
    var komponen_lebar = [];
    var komponen_terpakai = {};
    var varian_warna = [];
    var varian_ukuran = [];
    var varian_harga_jual = [];

    if(judul==''){ showNotif('bottom-right','Input data','Judul masih kosong','error'); $("#judul").addClass('is-invalid').focus(); return; }
    if(barcode_bahan==''){ showNotif('bottom-right','Input data','Barcode masih kosong','error'); $("#barcode_bahan").addClass('is-invalid').focus(); return; }
    if(produk==''){ showNotif('bottom-right','Input data','Produk belum dipilih','error'); $("#produk").addClass('is-invalid'); $("#produk_chosen").addClass('is-invalid').focus(); return; }
    if(kategori==''){ showNotif('bottom-right','Input data','Kategori belum dipilih','error'); $("#kategori").addClass('is-invalid').focus(); return; }
    if(harga_modal==''){ showNotif('bottom-right','Input data','Harga masih kosong','error'); $("#harga_modal").addClass('is-invalid').focus(); return; }
    if(harga_jual_bahan==''){ showNotif('bottom-right','Input data','Harga jual masih kosong','error'); $("#harga_jual_bahan").addClass('is-invalid').focus(); return; }
    if(satuan==''){ showNotif('bottom-right','Input data','Satuan belum dipilih','error'); $("#satuan").addClass('is-invalid').focus(); return; }
    if(stok==''){ showNotif('bottom-right','Input data','Status Stok belum dipilih','error'); $("#stok").addClass('is-invalid').focus(); return; }
    if(stok=='Y' && (batas_minimum_stok==='' || isNaN(batas_minimum_stok) || parseFloat(batas_minimum_stok) < 0)){ showNotif('bottom-right','Input data','Batas minimum stok harus berupa angka 0 atau lebih','error'); $("#batas_minimum_stok_bahan").addClass('is-invalid').focus(); return; }
    if(aktif==''){ showNotif('bottom-right','Input data','Status Aktif belum dipilih','error'); $("#aktif").addClass('is-invalid').focus(); return; }
    if(komisi_desain_aktif==''){ showNotif('bottom-right','Input data','Komisi desain belum dipilih','error'); $("#komisi_desain_aktif").addClass('is-invalid').focus(); return; }
    if(komisi_penjualan_aktif==='1' && (komisi_penjualan_nilai==='' || isNaN(komisi_penjualan_nilai) || parseFloat(komisi_penjualan_nilai)<=0)){ showNotif('bottom-right','Input data','Nilai komisi penjualan harus lebih dari 0','error'); $("#komisi_penjualan_nilai").addClass('is-invalid').focus(); return; }
    if(komisi_penjualan_aktif==='1' && komisi_penjualan_tipe==='persen' && parseFloat(komisi_penjualan_nilai)>100){ showNotif('bottom-right','Input data','Persentase komisi maksimal 100%','error'); $("#komisi_penjualan_nilai").addClass('is-invalid').focus(); return; }
    if(margin_finishing_aktif==''){ showNotif('bottom-right','Input data','Pembulatan ukuran belum dipilih','error'); $("#margin_finishing_aktif").addClass('is-invalid').focus(); return; }
    if(varian_aktif==''){ showNotif('bottom-right','Input data','Status varian belum dipilih','error'); $("#varian_aktif").addClass('is-invalid').focus(); return; }
    if(varian_aktif != '1' && ukuran_default==''){ showNotif('bottom-right','Input data','Ukuran default masih kosong','error'); $("#ukuran_default").addClass('is-invalid').focus(); return; }

    if(komposisi_aktif == '1'){
      var komposisiValid = true;
      $("#komposisi_rows .komposisi-row").each(function(){
        var $row = $(this);
        var idKomponen = $row.find(".komponen").val();
        var qtyText = $row.find(".komponen-jumlah").val();
        var qty = parseFloat(String(qtyText).replace(',', '.'));
        var panjang = parseKomposisiNumber($row.find(".komponen-panjang").val());
        var lebar = parseKomposisiNumber($row.find(".komponen-lebar").val());

        $row.find(".komponen, .komponen-jumlah").removeClass("is-invalid");

        if(idKomponen == ''){
          showNotif('bottom-right','Input data','Bahan komponen belum dipilih','error');
          $row.find(".komponen").addClass('is-invalid').focus();
          komposisiValid = false;
          return false;
        }
        if(idKomponen == id){
          showNotif('bottom-right','Input data','Item tidak boleh menjadi komponen dirinya sendiri','error');
          $row.find(".komponen").addClass('is-invalid').focus();
          komposisiValid = false;
          return false;
        }
        if(!qty || qty <= 0){
          showNotif('bottom-right','Input data','Jumlah komposisi harus lebih dari 0','error');
          $row.find(".komponen-jumlah").addClass('is-invalid').focus();
          komposisiValid = false;
          return false;
        }
        if(komponen_terpakai[idKomponen]){
          showNotif('bottom-right','Input data','Bahan komponen tidak boleh duplikat','error');
          $row.find(".komponen").addClass('is-invalid').focus();
          komposisiValid = false;
          return false;
        }
        if((panjang > 0 || lebar > 0) && (panjang <= 0 || lebar <= 0)){
          showNotif('bottom-right','Input data','Ukuran komposisi harus lengkap','error');
          $row.find(".komposisi-ukuran").focus();
          komposisiValid = false;
          return false;
        }

        komponen_terpakai[idKomponen] = true;
        komponen.push(idKomponen);
        komponen_jumlah.push(qty);
        komponen_panjang.push(panjang > 0 ? panjang : '');
        komponen_lebar.push(lebar > 0 ? lebar : '');
      });

      if(!komposisiValid){ return; }
      if(komponen.length == 0){
        showNotif('bottom-right','Input data','Komposisi aktif, tetapi bahan komponen belum diisi','error');
        return;
      }
    }

    if(varian_aktif == '1'){
      var varianValid = true;
      var varianTerpakai = {};

      $("#varian_rows .varian-row").each(function(){
        var $row = $(this);
        var warna = $.trim($row.find(".varian-warna").val());
        var ukuranVarian = $.trim($row.find(".varian-ukuran").val());
        var hargaJualVarian = angka($row.find(".varian-harga-jual").val());

        $row.find(".varian-warna, .varian-ukuran, .varian-harga-jual").removeClass("is-invalid");

        if(warna == '' && ukuranVarian == ''){
          showNotif('bottom-right','Input data','Warna atau ukuran varian harus diisi','error');
          $row.find(".varian-warna").addClass('is-invalid').focus();
          varianValid = false;
          return false;
        }
        if(ukuranVarian == ''){
          showNotif('bottom-right','Input data','Ukuran varian harus diisi','error');
          $row.find(".varian-ukuran").addClass('is-invalid').focus();
          varianValid = false;
          return false;
        }
        if(hargaJualVarian == '' || parseFloat(hargaJualVarian) < 0){
          showNotif('bottom-right','Input data','Harga jual varian harus diisi','error');
          $row.find(".varian-harga-jual").addClass('is-invalid').focus();
          varianValid = false;
          return false;
        }

        var key = warna.toLowerCase() + '|' + ukuranVarian.toLowerCase();
        if(varianTerpakai[key]){
          showNotif('bottom-right','Input data','Varian tidak boleh duplikat','error');
          $row.find(".varian-warna").addClass('is-invalid').focus();
          varianValid = false;
          return false;
        }

        varianTerpakai[key] = true;
        varian_warna.push(warna);
        varian_ukuran.push(ukuranVarian);
        varian_harga_jual.push(hargaJualVarian);
      });

      if(!varianValid){ return; }
      if(varian_warna.length == 0){
        showNotif('bottom-right','Input data','Varian aktif, tetapi daftar varian belum diisi','error');
        return;
      }
    }

    $.ajax({
      url: base_url + 'produk/save_bahan',
      data: {id:id,type:type,judul:judul,foto:foto_bahan,kategori:kategori,produk:produk,ukuran_default:ukuran_default,modal:harga_modal,harga_jual:harga_jual_bahan,satuan:satuan,aktif:aktif,stok:stok,batas_minimum_stok:batas_minimum_stok,jenis:jenis,ukuran:ukuran,barcode:barcode_bahan,komisi_desain_aktif:komisi_desain_aktif,komisi_penjualan_aktif:komisi_penjualan_aktif,komisi_penjualan_tipe:komisi_penjualan_tipe,komisi_penjualan_nilai:komisi_penjualan_nilai,margin_finishing_aktif:margin_finishing_aktif,lebar_bahan_tersedia:lebar_bahan_tersedia,pembulatan_di_bawah_satu_meter:pembulatan_di_bawah_satu_meter,komposisi_aktif:komposisi_aktif,komponen:komponen,komponen_jumlah:komponen_jumlah,komponen_panjang:komponen_panjang,komponen_lebar:komponen_lebar,varian_aktif:varian_aktif,varian_warna:varian_warna,varian_ukuran:varian_ukuran,varian_harga_jual:varian_harga_jual},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('#load-save-bahan').loading({zIndex:1060,theme:'dark'}); },
      success: function(data) {
        if(data.status==200){
          showNotif('bottom-right','Simpan data',data.msg,'success');
          $('#ModalBahan').modal('hide');
        }else{
          showNotif('bottom-right','Simpan data',data.msg,'warning');
        }
        $('#confirm-delete').modal('hide');
        var halaman = $("#halaman").val();
        search_Bahan(halaman);
        $('#load-save-bahan').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('#load-save-bahan').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  $(document).on('click','.hapus',function(e){
    e.preventDefault();
    var id = $("#data-hapus").val();
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/hapus_bahan',
      method: 'POST',
      dataType:'json',
      data:{id:id,type:"hapus"},
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        if(data.status==200){
          $('#confirm-delete').modal('hide');
          sweet_time(500,'Status!!!',data.msg);
        }else{
          sweet('Peringatan!!!',data.msg,'warning','warning');
        }
        search_Bahan(halaman);
        $('body').loading('stop');
      },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  });

  $('#confirm-delete').on('show.bs.modal', function(e) {
    $('#data-hapus').val($(e.relatedTarget).data('id'));
  });

  function load_satuan(idjenis){
    $.ajax({
      url: base_url + "produk/load_satuan",
      type: 'POST',
      dataType: 'json',
      beforeSend: function () { $("#load_satuan").append("<option value='loading'>loading</option>"); $("#load_satuan").empty(); },
      success: function (response) {
        $("#load_satuan").append("<option value=''>Pilih</option>");
        var len = response.length;
        for (var i = 0; i < len; i++) {
          var id = response[i]['id'];
          var name = response[i]['name'];
          if(id==idjenis){ $("#load_satuan").append("<option value='" + id + "' selected>" + name + "</option>"); }
          else{ $("#load_satuan").append("<option value='" + id + "'>" + name + "</option>"); }
        }
      },
      error : function(res, status, httpMessage) {
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function load_harga_level(idjenis){
    $.ajax({
      url: base_url + "produk/load_harga_level",
      type: 'POST',
      data:{id:idjenis},
      dataType: 'html',
      beforeSend: function () { $("#load_harga_level").empty(); },
      success: function (response) { $("#load_harga_level").html(response); },
      error : function(res, status, httpMessage) {
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function load_range(idjenis){
    $.ajax({
      url: base_url + "produk/load_range",
      type: 'POST',
      data:{id:idjenis},
      dataType: 'html',
      beforeSend: function () { $("#load_range").empty(); },
      success: function (response) { $("#load_range").html(response); },
      error : function(res, status, httpMessage) {
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function load_range_level(idjenis){
    $.ajax({
      url: base_url + "produk/load_range_level",
      type: 'POST',
      data:{id:idjenis},
      dataType: 'html',
      beforeSend: function () { $('body').loading(); $("#load_range_level").empty(); },
      success: function (response) { $("#load_range_level").html(response); $('body').loading('stop'); },
      error : function(res, status, httpMessage) {
        $('body').loading('stop');
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }

  function load_satuan_harga(idbahan){
    $.ajax({
      url: base_url + "produk/satuan_harga",
      type: 'POST',
      data:{id:idbahan},
      dataType: 'html',
      beforeSend: function () { $("#load_satuan_harga").empty(); },
      success: function (response) { $("#load_satuan_harga").html(response); },
      error : function(res, status, httpMessage) {
        if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
        else{ sweet("Peringatan!!!", httpMessage, "warning", "warning"); }
      }
    });
  }
</script>


<style>
  /* Spasi tabel */
  .card .table td, .card .table th { padding-right: 1rem; padding-left: 1rem; }

  /* Toolbar: fleksibel & rapi di semua lebar */
  .toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
  }
  .toolbar-item { flex: 1 1 220px; min-width: 180px; }
  .toolbar-grow { flex: 2 1 260px; min-width: 180px; }
  .toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 1 auto; }
  .bahan-label-mobile,
  .bahan-mobile-primary,
  .bahan-mobile-list { display: none; }
  .bahan-search-field { width: 100%; }
  .bahan-search-field .fa { display: none; }
  .bahan-search-label { display: none; }

  /* Sentuhan untuk komponen kecil biar nyaman di mobile */
  .input-group.input-group-sm > .form-control,
  .input-group.input-group-sm > .custom-select { min-height: 36px; }

  /* Breadcrumb & judul rapi saat sangat sempit */
  @media (max-width: 576px) {
    body.bahan-mobile-page { background: #f6f7f9; }

    body.bahan-mobile-page .navbar.topbar {
      height: 76px;
      background: var(--app-theme-color, #3f51b5) !important;
      margin-bottom: 0 !important;
      padding: 0 14px;
      box-shadow: none !important;
      overflow: visible;
      position: relative;
      z-index: 1040;
    }

    body.bahan-mobile-page .navbar.topbar #sidebarToggleTop,
    body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft {
      position: relative;
      width: 34px;
      height: 34px;
      margin-right: 0 !important;
      color: var(--app-theme-text-color, #fff);
      font-size: 24px;
      padding: 0;
      flex: 0 0 34px;
    }

    body.bahan-mobile-page .navbar.topbar #sidebarToggleTop::before,
    body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft::before {
      content: none;
      display: none;
    }

    body.bahan-mobile-page .navbar.topbar #sidebarToggleTop::after,
    body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft::after {
      content: none;
      display: none;
    }

    body.bahan-mobile-page .navbar.topbar .navbar-nav {
      align-items: center;
      margin-left: auto !important;
      min-width: 0;
    }

    body.bahan-mobile-page .navbar.topbar .nav-link {
      color: var(--app-theme-text-color, #fff) !important;
      height: 76px;
      padding: 0 .4rem;
      font-size: 20px;
    }

    body.bahan-mobile-page #updateBellWrap,
    body.bahan-mobile-page .stok-notif {
      display: none !important;
    }

    body.bahan-mobile-page .navbar.topbar .topbar-divider {
      display: none !important;
    }

    body.bahan-mobile-page .navbar.topbar .img-profile {
      width: 36px;
      height: 36px;
      border: 2px solid var(--app-theme-text-color, #fff);
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown .small {
      display: none !important;
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown::after {
      content: none;
      display: none;
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown + .dropdown-menu {
      position: fixed !important;
      top: 78px !important;
      left: calc(50% - 181px) !important;
      right: auto !important;
      width: 362px;
      min-width: 0;
      transform: none !important;
      padding: 8px 0;
      border: 0;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(16,24,40,.12) !important;
      z-index: 2050;
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-item {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 9px 24px;
      color: #111827;
      font-size: 13px;
      line-height: 1.2;
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-item i {
      width: 18px;
      margin-right: 12px !important;
      color: #c7c9d6 !important;
      text-align: center;
    }

    body.bahan-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-divider {
      margin: 6px 0;
      border-color: #e5e7eb;
    }

    body.bahan-mobile-page #content { background: #f6f7f9; }

    #container-wrapper.bahan-page {
      min-width: 0;
      width: 100%;
      padding: 12px 12px 14px;
      background: #f6f7f9;
    }

    #container-wrapper.bahan-page .d-sm-flex {
      display: flex !important;
      flex-direction: column;
      align-items: stretch !important;
      gap: 0;
      margin-bottom: 10px !important;
    }

    #container-wrapper.bahan-page h1 {
      font-size: 18px;
      line-height: 1.15;
      font-weight: 700;
      color: #111827 !important;
    }

    #container-wrapper.bahan-page .bahan-mobile-primary {
      display: none !important;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 58px;
      border: 0;
      border-radius: 6px;
      background: linear-gradient(135deg, #7512df, #5f0dd7);
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
      box-shadow: 0 7px 16px rgba(95,13,215,.22);
    }

    #container-wrapper.bahan-page .bahan-mobile-primary .fa { margin-right: 10px; }

    #container-wrapper.bahan-page .row,
    #container-wrapper.bahan-page .col-md-12 {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }

    #container-wrapper.bahan-page .card {
      border: 0;
      border-radius: 8px;
      box-shadow: none;
      background: transparent;
    }

    #container-wrapper.bahan-page .card-header {
      padding: 10px 12px;
      background: #fff;
      border-bottom: 0;
      border-radius: 8px;
      box-shadow: 0 3px 14px rgba(16,24,40,.08);
    }

    #container-wrapper.bahan-page .toolbar-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "limit sort"
        "kategori search"
        "actions actions";
      gap: 8px 12px;
      align-items: end;
    }

    #container-wrapper.bahan-page .toolbar-item,
    #container-wrapper.bahan-page .toolbar-grow {
      min-width: 0;
      width: 100%;
      flex: none;
    }

    #container-wrapper.bahan-page .toolbar-item { display: block; }
    #container-wrapper.bahan-page .toolbar-item:nth-child(1) { grid-area: limit; }
    #container-wrapper.bahan-page .toolbar-item:nth-child(2) { grid-area: sort; }
    #container-wrapper.bahan-page .toolbar-item:nth-child(3) { grid-area: kategori; }
    #container-wrapper.bahan-page .toolbar-search { grid-area: search; }
    #container-wrapper.bahan-page .toolbar-actions { grid-area: actions; }

    #container-wrapper.bahan-page .toolbar-item .input-group-prepend {
      display: block;
      width: 100%;
      margin-bottom: 4px;
    }

    #container-wrapper.bahan-page .bahan-label-desktop { display: none !important; }
    #container-wrapper.bahan-page .bahan-label-mobile { display: block !important; }

    #container-wrapper.bahan-page .toolbar-item .input-group-text,
    #container-wrapper.bahan-page .bahan-label-mobile {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.25;
      text-align: left;
    }

    #container-wrapper.bahan-page .input-group-sm .input-group-text {
      min-height: 0;
      height: auto;
      width: auto;
    }

    #container-wrapper.bahan-page .toolbar-item .custom-select,
    #container-wrapper.bahan-page .bahan-search-field .form-control {
      height: 31px;
      min-height: 31px;
      border: 1px solid #cfd5e1;
      border-radius: 3px !important;
      color: #111827;
      font-size: 12px;
      box-shadow: none;
      background-color: #fff;
    }

    #container-wrapper.bahan-page .toolbar-item .custom-select {
      display: block !important;
      width: 100% !important;
      padding: 0 26px 0 8px;
      background-position: right 8px center;
    }

    #container-wrapper.bahan-page .bahan-search-label {
      display: block;
      margin: 0 0 4px;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.25;
    }

    #container-wrapper.bahan-page .bahan-search-field {
      position: relative;
      width: 100%;
    }

    #container-wrapper.bahan-page .bahan-search-field .fa {
      display: block;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #656b77;
      font-size: 14px;
      z-index: 2;
    }

    #container-wrapper.bahan-page .bahan-search-field .form-control {
      padding-left: 32px;
    }

    #container-wrapper.bahan-page .toolbar-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px 12px;
      width: 100%;
      margin-left: 0;
    }

    #container-wrapper.bahan-page .toolbar-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 31px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 3px 8px rgba(16,24,40,.12);
    }

    #container-wrapper.bahan-page .toolbar-actions .btn .fa { margin-right: 5px; }
    #container-wrapper.bahan-page .toolbar-actions .bahan-toolbar-add { display: inline-flex; }
    #container-wrapper.bahan-page .bahan-action-clear {
      background: #fff;
      color: #f23b45;
      border: 1px solid #ff8d95;
      box-shadow: none;
    }
    #container-wrapper.bahan-page .bahan-action-export {
      background: linear-gradient(135deg, #16b45f, #059967);
      border-color: #059967;
    }
    #container-wrapper.bahan-page .bahan-action-export {
      font-size: 12px;
    }
    #container-wrapper.bahan-page .bahan-action-export::after {
      content: none;
    }
    #container-wrapper.bahan-page .bahan-action-export .fa {
      font-size: 12px;
    }
    #container-wrapper.bahan-page .bahan-action-import {
      background: #6674ee;
      border-color: #6674ee;
    }
    #container-wrapper.bahan-page .bahan-action-print {
      background: #5f6368;
      border-color: #5f6368;
      grid-column: 1 / -1;
    }
    #container-wrapper.bahan-page .bahan-action-barcode {
      background: #43b96a;
      border-color: #43b96a;
      display: none !important;
    }

    #container-wrapper.bahan-page .card-body {
      padding: 8px 0 0;
      background: #f6f7f9;
    }

    #container-wrapper.bahan-page .bahan-desktop-table {
      display: none;
    }

    #container-wrapper.bahan-page .bahan-mobile-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    #container-wrapper.bahan-page .bahan-mobile-card {
      position: relative;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 132px;
      align-items: start;
      gap: 12px;
      min-height: 64px;
      padding: 8px 12px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 2px 12px rgba(16,24,40,.08);
      overflow: hidden;
    }

    #container-wrapper.bahan-page .bahan-mobile-card::before {
      display: none;
    }

    #container-wrapper.bahan-page .bahan-mobile-card.is-inactive::before {
      background: #ef3348;
    }

    #container-wrapper.bahan-page .bahan-mobile-no {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background: linear-gradient(135deg, #68c76d, #37a94b);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 3px 8px rgba(55,169,75,.25);
    }

    #container-wrapper.bahan-page .bahan-mobile-title {
      display: block;
      color: #168bff;
      font-size: 13px;
      line-height: 1.18;
      font-weight: 700;
      text-transform: none;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #container-wrapper.bahan-page .bahan-mobile-product {
      margin-top: 3px;
      color: #4b5563;
      font-size: 11px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #container-wrapper.bahan-page .bahan-mobile-divider {
      display: none;
    }

    #container-wrapper.bahan-page .bahan-mobile-stats {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 14px;
      margin-top: 5px;
      color: #111827;
      font-size: 10.5px;
      line-height: 1.15;
      white-space: nowrap;
    }

    #container-wrapper.bahan-page .bahan-mobile-stats > div {
      flex: 0 0 auto;
      min-width: 0;
    }

    #container-wrapper.bahan-page .bahan-mobile-stats .fa {
      margin-left: 2px;
      color: #555b67;
      font-size: 10px;
    }

    #container-wrapper.bahan-page .bahan-mobile-info {
      min-width: 0;
    }

    #container-wrapper.bahan-page .bahan-mobile-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 6px;
      margin-top: 0;
    }

    #container-wrapper.bahan-page .bahan-mobile-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 26px;
      border-radius: 4px;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 3px 8px rgba(16,24,40,.14);
      white-space: nowrap;
    }

    #container-wrapper.bahan-page .bahan-mobile-actions .btn .fa { margin-right: 4px; }
    #container-wrapper.bahan-page .bahan-mobile-actions .btn-outline-success {
      background: #43b35a;
      border-color: #43b35a;
      color: #fff;
    }
    #container-wrapper.bahan-page .bahan-mobile-actions .btn-danger {
      grid-column: 2;
    }
    #container-wrapper.bahan-page .bahan-mobile-actions .btn-info {
      background: #2f9bff;
      border-color: #2f9bff;
    }
    #container-wrapper.bahan-page .bahan-mobile-actions .btn-danger {
      background: #ff3f3f;
      border-color: #ff3f3f;
    }
    #container-wrapper.bahan-page .bahan-status-pill {
      box-shadow: none;
    }

    #container-wrapper.bahan-page .bahan-mobile-empty {
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      color: #555b67;
      box-shadow: 0 4px 18px rgba(16,24,40,.08);
    }

    #container-wrapper.bahan-page nav[aria-label="Page navigation"] {
      display: grid;
      grid-template-columns: minmax(168px, 1fr) max-content;
      align-items: center;
      min-height: 46px;
      margin-top: 8px !important;
      padding: 8px 10px;
      column-gap: 8px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 2px 12px rgba(16,24,40,.08);
    }

    #container-wrapper.bahan-page .pagination {
      margin-bottom: 0;
      gap: 8px;
      float: none !important;
      align-items: center;
    }

    #container-wrapper.bahan-page .pagination.float-left {
      margin-right: auto;
      margin-left: 0;
      min-width: 0;
      overflow: hidden;
    }

    #container-wrapper.bahan-page .pagination.float-right {
      flex: 0 0 auto;
      margin-left: auto;
    }

    #container-wrapper.bahan-page .page-link {
      min-width: 46px;
      height: 34px;
      border-radius: 5px;
      padding: 5px 12px;
      text-align: center;
      color: #6674ee;
      font-size: 13px;
      line-height: 22px;
      border-color: #d8dde8;
    }

    #container-wrapper.bahan-page .page-item.active .page-link {
      background: #6674ee;
      border-color: #6674ee;
      color: #fff;
      box-shadow: 0 5px 12px rgba(102,116,238,.24);
    }

    #container-wrapper.bahan-page .page-item.disabled .page-link {
      min-width: 0;
      width: auto;
      height: auto;
      border-color: transparent;
      color: #555b67;
      background: transparent;
      padding: 0;
      font-size: 12px;
      line-height: 1.25;
      white-space: nowrap;
    }

    body.bahan-mobile-page .scroll-to-top,
    body.bahan-mobile-page .scroll-fab {
      display: none !important;
    }
  }

  @media (max-width: 430px) {
      body.bahan-mobile-page .navbar.topbar #sidebarToggleTop,
      body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft {
        margin-right: 0 !important;
      }

      body.bahan-mobile-page .navbar.topbar #sidebarToggleTop::before,
      body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft::before {
        content: none;
        display: none;
      }

      body.bahan-mobile-page .navbar.topbar #sidebarToggleTop::after,
      body.bahan-mobile-page .navbar.topbar #sidebarToggleLeft::after {
        content: none;
        display: none;
      }

      body.bahan-mobile-page .navbar.topbar #clock { font-size: 14px; }
      body.bahan-mobile-page .navbar.topbar #userDropdown .small {
        display: none !important;
      }

      body.bahan-mobile-page .navbar.topbar #userDropdown + .dropdown-menu {
        left: 14px !important;
        right: 14px !important;
        width: auto;
      }

      #container-wrapper.bahan-page h1 { font-size: 18px; }
      #container-wrapper.bahan-page .bahan-mobile-primary { display: none !important; }
      #container-wrapper.bahan-page .card-header { padding: 10px 12px; }
      #container-wrapper.bahan-page .toolbar-wrap { gap: 8px 12px; }
      #container-wrapper.bahan-page .toolbar-item .input-group-text,
      #container-wrapper.bahan-page .bahan-label-mobile { font-size: 12px; }
      #container-wrapper.bahan-page .toolbar-item .custom-select,
      #container-wrapper.bahan-page .bahan-search-field .form-control {
        height: 33px;
        min-height: 33px;
        font-size: 12px;
        border-radius: 3px !important;
      }
      #container-wrapper.bahan-page .toolbar-item .custom-select {
        padding-left: 9px;
        padding-right: 26px;
        background-position: right 8px center;
      }
      #container-wrapper.bahan-page .bahan-search-field .fa {
        left: 12px;
        font-size: 14px;
      }
      #container-wrapper.bahan-page .bahan-search-field .form-control { padding-left: 32px; }
      #container-wrapper.bahan-page .toolbar-actions { gap: 8px; }
      #container-wrapper.bahan-page .toolbar-actions .btn {
        height: 31px;
        font-size: 12px;
        border-radius: 3px;
      }
      #container-wrapper.bahan-page .bahan-action-export::after { font-size: 12px; }
      #container-wrapper.bahan-page .bahan-action-export .fa { font-size: 12px; }
      #container-wrapper.bahan-page .bahan-mobile-card {
        grid-template-columns: 36px minmax(0, 1fr) 124px;
        gap: 10px;
        padding: 9px 10px;
      }
      #container-wrapper.bahan-page .bahan-mobile-title { font-size: 13px; }
      #container-wrapper.bahan-page .bahan-mobile-product { font-size: 11px; }
      #container-wrapper.bahan-page .bahan-mobile-stats {
        display: flex;
        flex-wrap: nowrap;
        gap: 9px;
        font-size: 10px;
        white-space: nowrap;
      }
      #container-wrapper.bahan-page .bahan-mobile-actions {
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px;
      }
      #container-wrapper.bahan-page .bahan-mobile-actions .btn {
        height: 26px;
        padding: 0 6px;
        font-size: 11px;
      }
      #container-wrapper.bahan-page nav[aria-label="Page navigation"] {
        min-height: 46px;
        grid-template-columns: minmax(0, 1fr) max-content;
        padding: 8px 10px;
        column-gap: 8px;
      }
      #container-wrapper.bahan-page .pagination { gap: 8px; }
      #container-wrapper.bahan-page .page-link {
        min-width: 40px;
        height: 34px;
        padding: 5px 12px;
        font-size: 13px;
        line-height: 22px;
      }
      #container-wrapper.bahan-page .page-item.disabled .page-link {
        font-size: 11px;
        white-space: nowrap;
      }
  }

  /* Konten tabel hasil Ajax */
  #dataBahan .table-responsive { margin-bottom: 0; }

  #ModalBahan .komposisi-box {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 10px;
  }

  #ModalBahan .komposisi-row {
    align-items: flex-end;
    margin-bottom: 8px !important;
  }

  #ModalBahan .komposisi-row label {
    margin-bottom: 4px;
  }

  #ModalBahan .komposisi-action {
    display: flex;
    padding-bottom: 1px;
  }

  #ModalBahan .komposisi-ukuran-wrap,
  #ModalBahan .komposisi-action {
    padding-left: 4px;
  }

  #ModalBahan .komposisi-ukuran,
  #ModalBahan .komposisi-action .btn {
    min-height: 31px;
    width: 100%;
  }

  #ModalKomposisiUkuran .modal-body .form-group {
    margin-bottom: 8px;
  }

  /* Tampilan modal harga */
  #ModalHarga .harga-modal-simple {
    background: #f6f8fb;
    color: #334155;
    font-size: 14px;
  }

  #ModalHarga .harga-modal-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    min-height: 54px;
    padding: 10px 18px !important;
  }

  #ModalHarga .harga-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #ModalHarga .harga-all-switch {
    display: inline-flex;
    margin: 0;
    padding: 7px 10px;
    align-items: center;
    gap: 10px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
  }

  #ModalHarga .harga-all-switch__copy strong,
  #ModalHarga .harga-all-switch__copy small {
    display: block;
    line-height: 1.2;
  }

  #ModalHarga .harga-all-switch__copy strong {
    color: #344054;
    font-size: 11px;
    font-weight: 800;
  }

  #ModalHarga .harga-all-switch__copy small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 9px;
  }

  #ModalHarga .harga-all-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  #ModalHarga .harga-all-switch__track {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .18s ease;
  }

  #ModalHarga .harga-all-switch__track span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
    transition: transform .18s ease;
  }

  #ModalHarga .harga-all-switch input:checked + .harga-all-switch__track {
    background: #1769e8;
  }

  #ModalHarga .harga-all-switch input:checked + .harga-all-switch__track span {
    transform: translateX(16px);
  }

  #ModalHarga.semua-metode-aktif .harga-all-switch {
    border-color: #b9d0fb;
    background: #eef4ff;
  }

  #ModalHarga.semua-metode-aktif .harga-tabs-nav .nav-link::after {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 1px rgba(34, 160, 107, .18);
    content: "";
  }

  #ModalHarga #TitleHarga {
    color: #1f2937;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
  }

  #ModalHarga .harga-modal-header .close {
    align-items: center;
    background: #f3f4f6;
    border-radius: 6px;
    color: #4b5563;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    margin: 0;
    opacity: 1;
    padding: 0;
    width: 34px;
  }

  #ModalHarga .harga-modal-body {
    background: #f6f8fb;
    padding: 16px 18px !important;
  }

  #ModalHarga .harga-tabs-layout {
    display: flex;
    gap: 16px;
    margin: 0 auto;
    max-width: 1120px;
    min-height: calc(100vh - 132px);
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav {
    border: 0;
    display: flex;
    flex: 0 0 250px;
    flex-direction: column;
    float: none;
    margin: 0;
    padding: 0;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-item {
    margin: 0 0 8px;
    width: 100%;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #475569;
    display: flex;
    font-weight: 600;
    line-height: 1.25;
    min-height: 42px;
    padding: 10px 12px;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link input[type="radio"] {
    margin: 0 8px 0 0;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link.active {
    background: #eef4ff !important;
    border-color: #5b6cff !important;
    color: #3443b8;
  }

  #ModalHarga .harga-tabs-layout .harga-tab-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 18px;
  }

  #ModalHarga .harga-tab-content > .tab-pane > .card-header {
    background: transparent;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 14px;
    padding: 0 0 12px !important;
  }

  #ModalHarga .harga-tab-content > .tab-pane > .card-header h5,
  #ModalHarga .harga-pane-title {
    color: #1f2937;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
    text-transform: none;
  }

  #ModalHarga .harga-tab-content > .tab-pane > .card-header h5 {
    margin-bottom: 0;
  }

  #ModalHarga .harga-single-form {
    max-width: 760px;
  }

  #ModalHarga .harga-single-form > .form-group.row {
    align-items: center;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    margin-left: 0;
    margin-right: 0;
    row-gap: 6px;
    column-gap: 16px;
  }

  #ModalHarga .harga-single-form > .form-group.row > label {
    color: #475569;
    flex: none;
    font-weight: 600;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
  }

  #ModalHarga .harga-single-form > .form-group.row > [class*="col-"] {
    flex: none;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  #ModalHarga .harga-hpp-group {
    align-items: start !important;
  }

  #ModalHarga .harga-hpp-group > label {
    padding-top: 8px !important;
  }

  #ModalHarga .harga-hpp-group .row {
    margin-left: 0;
    margin-right: 0;
  }

  #ModalHarga .harga-hpp-group .col-md-12 {
    overflow-x: auto;
    padding-left: 0;
    padding-right: 0;
  }

  #ModalHarga .harga-hpp-group .form-group {
    margin-bottom: 0 !important;
  }

  #ModalHarga .harga-hpp-table {
    margin-bottom: 0;
    min-width: 520px;
  }

  #ModalHarga .harga-hpp-table th,
  #ModalHarga .harga-hpp-table td {
    border-color: #e5e7eb;
    padding: 7px !important;
    vertical-align: middle;
  }

  #ModalHarga .harga-hpp-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
  }

  #ModalHarga .harga-hpp-table tfoot td {
    background: #f8fafc;
    font-weight: 700;
  }

  #ModalHarga .harga-hpp-table .btn {
    align-items: center;
    border-radius: 5px !important;
    display: inline-flex;
    height: 31px;
    justify-content: center;
    min-width: 31px;
    padding: 0 8px;
  }

  #ModalHarga .harga-modal-simple .form-control,
  #ModalHarga .harga-modal-simple .custom-select {
    border-color: #cfd7e3;
    border-radius: 4px !important;
    color: #334155;
    min-height: 36px;
  }

  #ModalHarga .harga-modal-simple .form-control:focus,
  #ModalHarga .harga-modal-simple .custom-select:focus {
    border-color: #5b6cff;
    box-shadow: 0 0 0 3px rgba(91, 108, 255, .12);
  }

  #ModalHarga .harga-modal-simple input[readonly] {
    background: #eef2f7;
    color: #475569;
  }

  #ModalHarga .harga-modal-simple .input-group-text {
    border-color: #cfd7e3;
    box-shadow: none !important;
  }

  #ModalHarga .modal-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 10px 18px;
  }

  #ModalHarga .modal-footer .btn {
    border-radius: 5px !important;
    min-width: 72px;
  }

  @media (max-width: 992px) {
    #ModalHarga .harga-tabs-layout {
      flex-direction: column;
      min-height: auto;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav {
      flex: 0 0 auto;
      flex-direction: row;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-item {
      flex: 0 0 auto;
      margin: 0 8px 0 0;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link {
      white-space: nowrap;
    }
  }

  @media (max-width: 576px) {
    #ModalHarga .harga-modal-header,
    #ModalHarga .harga-modal-body,
    #ModalHarga .modal-footer {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    #ModalHarga #TitleHarga {
      font-size: 16px;
    }

    #ModalHarga .harga-tabs-layout .harga-tab-content {
      padding: 14px;
    }

    #ModalHarga .harga-single-form > .form-group.row {
      grid-template-columns: 1fr;
    }

    #ModalHarga .harga-hpp-group > label {
      padding-top: 0 !important;
    }
  }

  /* Modal produk: hierarki sederhana dan modern tanpa mengubah alur form. */
  #ModalBahan .modal-dialog {
    width: calc(100% - 32px);
    max-width: 760px;
    margin: 24px auto;
  }

  #ModalBahan .bahan-modal-modern {
    overflow: hidden;
    border: 0;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
  }

  #ModalBahan .modal-header {
    min-height: 64px;
    padding: 0 24px;
    align-items: center;
    border-bottom: 1px solid #e8edf5;
    background: #fff;
  }

  #ModalBahan .modal-title {
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  #ModalBahan .modal-header .close {
    display: inline-flex;
    width: 36px;
    height: 36px;
    margin: 0 -8px 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #475467;
    font-size: 24px;
    opacity: 1;
    transition: background .15s ease, color .15s ease;
  }

  #ModalBahan .modal-header .close:hover {
    background: #f2f4f7;
    color: #101828;
  }

  #ModalBahan .modal-body {
    max-height: calc(100vh - 176px);
    padding: 22px 24px 24px !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
  }

  #ModalBahan .bahan-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: end;
  }

  #ModalBahan .bahan-section-title {
    display: flex;
    margin: 20px 0 14px;
    align-items: center;
    gap: 12px;
    color: #1769e8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #ModalBahan .bahan-section-title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e5eaf2;
  }

  #ModalBahan .form-group {
    margin-bottom: 13px !important;
  }

  #ModalBahan .form-group.row {
    margin-right: -8px;
    margin-left: -8px;
  }

  #ModalBahan .form-group.row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
  }

  #ModalBahan label {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
  }

  #ModalBahan .form-control,
  #ModalBahan .custom-select,
  #ModalBahan .chosen-container-single .chosen-single {
    min-height: 40px;
    border: 1px solid #d8e0ec;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: none;
    color: #344054;
    font-size: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  #ModalBahan .form-control,
  #ModalBahan .custom-select {
    height: 40px;
    padding-right: 11px;
    padding-left: 11px;
  }

  #ModalBahan .form-control:focus,
  #ModalBahan .custom-select:focus {
    border-color: #4c7cf3;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(23, 105, 232, .11);
  }

  #ModalBahan .chosen-container-single .chosen-single {
    height: 40px;
    padding: 0 11px;
    line-height: 38px;
  }

  #ModalBahan .chosen-container-single .chosen-single div b {
    background-position-y: 10px;
  }

  #ModalBahan #barcode_bahan {
    border-radius: 7px 0 0 7px;
  }

  #ModalBahan #generate_add {
    height: 40px;
    padding: 0 13px;
    border-color: #4c7cf3;
    border-radius: 0 7px 7px 0;
    background: #fff;
    color: #1769e8;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  #ModalBahan #generate_add:hover {
    background: #eef4ff;
  }

  #ModalBahan .komposisi-box,
  #ModalBahan .varian-box {
    margin: -3px 0 14px;
    padding: 14px;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #f8fafc;
  }

  #ModalBahan .add_komposisi,
  #ModalBahan .add_varian {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #b9cdf9;
    border-radius: 7px !important;
    background: #eef4ff;
    color: #1769e8;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
  }

  #ModalBahan .remove_komposisi,
  #ModalBahan .remove_varian {
    border: 0;
    border-radius: 7px !important;
    background: #ef4444;
    box-shadow: 0 3px 8px rgba(239, 68, 68, .2);
  }

  #ModalBahan .modal-footer {
    display: flex;
    min-height: 66px;
    padding: 12px 24px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e8edf5;
    background: #fbfcfe;
  }

  #ModalBahan .modal-footer .btn {
    min-width: 104px;
    height: 40px;
    margin: 0;
    border-radius: 7px !important;
    font-size: 12px;
    font-weight: 700;
  }

  #ModalBahan .bahan-modal-cancel {
    border: 1px solid #d8e0ec;
    background: #fff;
    color: #475467;
  }

  #ModalBahan .save_bahan {
    border: 0;
    background: #1769e8;
    box-shadow: 0 6px 14px rgba(23, 105, 232, .24);
    color: #fff;
  }

  #ModalBahan .save_bahan:hover {
    background: #0f5ed5;
  }

  @media (max-width: 767.98px) {
    #ModalBahan .modal-dialog {
      width: calc(100% - 20px);
      margin: 10px auto;
    }

    #ModalBahan .modal-header {
      min-height: 58px;
      padding: 0 16px;
    }

    #ModalBahan .modal-body {
      max-height: calc(100vh - 140px);
      padding: 18px 16px 20px !important;
    }

    #ModalBahan .bahan-top-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    #ModalBahan .modal-footer {
      padding: 10px 16px;
    }
  }

  /* Pengaturan harga: modal terpusat dengan pilihan strategi yang informatif. */
  #ModalHarga .modal-dialog {
    width: calc(100% - 40px);
    max-width: 1180px;
    margin: 24px auto;
  }

  #ModalHarga .harga-modal-simple {
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 0;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .24);
  }

  #ModalHarga .harga-modal-header {
    min-height: 76px;
    padding: 14px 24px !important;
    background: #fff;
  }

  #ModalHarga .harga-modal-heading > span {
    display: block;
    margin-bottom: 3px;
    color: #1769e8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #ModalHarga #TitleHarga {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.015em;
  }

  #ModalHarga .harga-modal-header .close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 24px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }

  #ModalHarga .harga-modal-header .close:hover {
    background: #e8edf5;
    color: #101828;
    transform: rotate(4deg);
  }

  #ModalHarga .harga-modal-body {
    max-height: calc(100vh - 180px);
    padding: 20px 24px !important;
    overflow: auto;
    background: #f5f7fb;
  }

  #ModalHarga .harga-tabs-layout {
    width: 100%;
    max-width: none;
    min-height: 530px;
    gap: 18px;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav {
    flex-basis: 270px;
    gap: 8px;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-item {
    margin: 0;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link {
    position: relative;
    min-height: 64px;
    padding: 10px 13px;
    gap: 11px;
    overflow: hidden;
    border-color: #e1e7f0;
    border-radius: 10px;
    background: #fff;
    color: #475467;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .035);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link:hover {
    border-color: #b9cdf9;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link > i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f2f4f7;
    color: #667085;
    font-size: 14px;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link > span {
    display: block;
    min-width: 0;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link strong,
  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link small {
    display: block;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link strong {
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link small {
    margin-top: 3px;
    overflow: hidden;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link.active {
    border-color: #7da6f7 !important;
    background: #eef4ff !important;
    box-shadow: 0 8px 18px rgba(23, 105, 232, .12);
    color: #175cd3;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link.active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #1769e8;
  }

  #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link.active > i {
    background: #1769e8;
    color: #fff;
  }

  #ModalHarga .harga-tabs-layout .harga-tab-content {
    min-height: 530px;
    padding: 22px 24px;
    border-color: #e1e7f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
  }

  #ModalHarga .harga-tab-content > .tab-pane > .card-header {
    min-height: 44px;
    margin-bottom: 18px;
    padding: 0 0 14px !important;
    align-items: center;
  }

  #ModalHarga .harga-tab-content > .tab-pane > .card-header h5,
  #ModalHarga .harga-pane-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
  }

  #ModalHarga .harga-tab-content .info_satuan {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px !important;
    background: #eef4ff;
    color: #1769e8;
  }

  #ModalHarga .harga-modal-simple .form-control,
  #ModalHarga .harga-modal-simple .custom-select {
    min-height: 40px;
    border-color: #d8e0ec;
    border-radius: 7px !important;
    font-size: 12px;
  }

  #ModalHarga .harga-hpp-table {
    border: 1px solid #e1e7f0;
    border-radius: 8px;
  }

  #ModalHarga .harga-hpp-table th {
    background: #f5f7fb;
    color: #344054;
  }

  /* Bahasa visual yang konsisten untuk seluruh metode pengaturan harga. */
  #ModalHarga .harga-single-form {
    max-width: 820px;
  }

  #ModalHarga .harga-single-form .harga-pane-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7ebf1;
  }

  #ModalHarga .harga-single-form > .form-group {
    margin-right: 0;
    margin-left: 0;
    padding: 4px 0;
    align-items: center;
  }

  #ModalHarga .harga-single-form > .form-group > label {
    padding-left: 0;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
  }

  #ModalHarga .harga-single-form > .form-group > .col-sm-6 {
    max-width: none;
    flex: 0 0 72%;
  }

  #ModalHarga .harga-single-form input,
  #ModalHarga .harga-single-form select {
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }

  #ModalHarga .harga-single-form input:hover,
  #ModalHarga .harga-single-form select:hover {
    border-color: #aebbd0;
  }

  #ModalHarga .harga-single-form input:focus,
  #ModalHarga .harga-single-form select:focus {
    border-color: #1769e8;
    box-shadow: 0 0 0 3px rgba(23, 105, 232, .1);
  }

  #ModalHarga .harga-hpp-group {
    margin: 8px 0 !important;
    padding: 10px 0 !important;
  }

  #ModalHarga .harga-hpp-table {
    overflow: hidden;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #ModalHarga .harga-hpp-table th,
  #ModalHarga .harga-hpp-table td {
    padding: 8px;
    border-color: #e7ebf1;
    vertical-align: middle;
  }

  #ModalHarga .harga-hpp-table th {
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #ModalHarga .harga-hpp-table .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px !important;
  }

  #ModalHarga #ck_hargajual {
    width: 15px;
    height: 15px;
    accent-color: #1769e8;
  }

  #ModalHarga #load_harga_level .table-wrapper,
  #ModalHarga #load_range .table-wrapper,
  #ModalHarga #load_range_level .table-wrapper {
    position: relative;
    padding-top: 52px;
  }

  #ModalHarga #table_level,
  #ModalHarga #table_range,
  #ModalHarga #table_range_level {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e4e9f1;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    table-layout: fixed;
  }

  #ModalHarga #table_level thead tr:first-child th,
  #ModalHarga #table_range thead tr:first-child th,
  #ModalHarga #table_range_level thead tr:first-child th {
    padding: 11px 10px;
    border: 0;
    border-bottom: 1px solid #e4e9f1;
    background: #f7f9fc;
    color: #657188;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  #ModalHarga #table_level th:first-child,
  #ModalHarga #table_range th:first-child,
  #ModalHarga #table_range_level th:first-child {
    width: 54px !important;
  }

  #ModalHarga #table_level th:last-child,
  #ModalHarga #table_range th:last-child,
  #ModalHarga #table_range_level th:last-child {
    width: 108px !important;
    font-size: 0;
  }

  #ModalHarga #table_level th:last-child::before,
  #ModalHarga #table_range th:last-child::before,
  #ModalHarga #table_range_level th:last-child::before {
    content: "Status / Aksi";
    font-size: 10px;
  }

  #ModalHarga #table_level td,
  #ModalHarga #table_range td,
  #ModalHarga #table_range_level td {
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
    color: #344056;
    vertical-align: middle;
  }

  #ModalHarga #table_level thead tr:nth-child(2) td,
  #ModalHarga #table_range thead tr:nth-child(2) td,
  #ModalHarga #table_range_level thead tr:nth-child(2) td {
    background: #fbfcfe;
  }

  #ModalHarga #table_level thead tr:nth-child(2) td:first-child,
  #ModalHarga #table_range thead tr:nth-child(2) td:first-child,
  #ModalHarga #table_range_level thead tr:nth-child(2) td:first-child {
    color: transparent;
  }

  #ModalHarga #table_level thead tr:nth-child(2) td:first-child::after,
  #ModalHarga #table_range thead tr:nth-child(2) td:first-child::after,
  #ModalHarga #table_range_level thead tr:nth-child(2) td:first-child::after {
    content: "—";
    color: #98a2b3;
  }

  #ModalHarga #table_level thead tr:nth-child(2) td:last-child,
  #ModalHarga #table_range thead tr:nth-child(2) td:last-child,
  #ModalHarga #table_range_level thead tr:nth-child(2) td:last-child {
    color: transparent;
    font-size: 0;
  }

  #ModalHarga #table_level thead tr:nth-child(2) td:last-child::after,
  #ModalHarga #table_range thead tr:nth-child(2) td:last-child::after,
  #ModalHarga #table_range_level thead tr:nth-child(2) td:last-child::after {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eaf8f0;
    color: #258557;
    content: "●  Utama";
    font-size: 10px;
    font-weight: 800;
  }

  #ModalHarga #table_level select,
  #ModalHarga #table_range select,
  #ModalHarga #table_range_level select {
    height: 35px;
    min-height: 35px;
    border-color: #dce3ed;
    border-radius: 7px !important;
    background-color: #fff;
    color: #344056;
  }

  #ModalHarga #table_level [contenteditable="true"],
  #ModalHarga #table_range [contenteditable="true"],
  #ModalHarga #table_range_level [contenteditable="true"] {
    cursor: text;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .16s ease, box-shadow .16s ease;
  }

  #ModalHarga #table_level td:nth-child(4),
  #ModalHarga #table_range td:nth-child(5),
  #ModalHarga #table_range_level td:nth-child(6) {
    position: relative;
    padding-left: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  #ModalHarga #table_level td:nth-child(4)::before,
  #ModalHarga #table_range td:nth-child(5)::before,
  #ModalHarga #table_range_level td:nth-child(6)::before {
    position: absolute;
    top: 50%;
    left: 10px;
    color: #9aa5b7;
    content: "Rp";
    font-size: 9px;
    font-weight: 700;
    transform: translateY(-50%);
  }

  #ModalHarga #table_level [contenteditable="true"]:hover,
  #ModalHarga #table_range [contenteditable="true"]:hover,
  #ModalHarga #table_range_level [contenteditable="true"]:hover {
    background: #f2f7ff !important;
    box-shadow: inset 0 0 0 1px #d5e4ff;
  }

  #ModalHarga #table_level [contenteditable="true"]:focus,
  #ModalHarga #table_range [contenteditable="true"]:focus,
  #ModalHarga #table_range_level [contenteditable="true"]:focus {
    outline: 0;
    background: #fff !important;
    box-shadow: inset 0 0 0 2px #1769e8;
  }

  #ModalHarga #add-level,
  #ModalHarga #add-more,
  #ModalHarga #add-range {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    min-width: 112px;
    height: 36px;
    border: 0;
    border-radius: 8px !important;
    background: #1769e8;
    box-shadow: 0 4px 10px rgba(23, 105, 232, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  #ModalHarga #load_harga_level .table-wrapper::before,
  #ModalHarga #load_range .table-wrapper::before,
  #ModalHarga #load_range_level .table-wrapper::before {
    position: absolute;
    top: 1px;
    left: 0;
    color: #8290a7;
    content: "Klik nilai pada tabel untuk mengubahnya langsung.";
    font-size: 11px;
  }

  #ModalHarga #table_level tbody tr:hover td,
  #ModalHarga #table_range tbody tr:hover td,
  #ModalHarga #table_range_level tbody tr:hover td {
    background-color: #f8fbff;
  }

  #ModalHarga #table_level .btn-danger,
  #ModalHarga #table_range .btn-danger,
  #ModalHarga #table_range_level .btn-danger {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    overflow: hidden;
    border: 1px solid #ffd9df;
    border-radius: 7px !important;
    background: #fff5f6;
    color: #e23d55;
    font-size: 0;
  }

  #ModalHarga #table_level .btn-danger i,
  #ModalHarga #table_range .btn-danger i,
  #ModalHarga #table_range_level .btn-danger i {
    font-size: 12px;
  }

  #ModalHarga #table_level .btn-danger:hover,
  #ModalHarga #table_range .btn-danger:hover,
  #ModalHarga #table_range_level .btn-danger:hover {
    border-color: #e23d55;
    background: #e23d55;
    color: #fff;
  }

  /* Aksi baris baru Per Jumlah: ringkas, sejajar, dan tidak keluar dari sel. */
  #ModalHarga #table_range #new_row_ajax .harga-new-row-action {
    padding: 8px !important;
    text-align: center;
  }

  #ModalHarga #table_range .harga-inline-actions {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }

  #ModalHarga #table_range .harga-inline-actions .btn {
    display: inline-flex;
    height: 34px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  #ModalHarga #table_range .harga-inline-actions .btn:hover {
    transform: translateY(-1px);
  }

  #ModalHarga #table_range .harga-inline-actions .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(23, 105, 232, .14);
  }

  #ModalHarga #table_range .harga-inline-save {
    min-width: 72px;
    padding: 0 11px;
    border: 1px solid #1769e8;
    background: #1769e8;
    box-shadow: 0 4px 10px rgba(23, 105, 232, .18);
    color: #fff;
  }

  #ModalHarga #table_range .harga-inline-save i {
    margin-right: 6px;
    font-size: 10px;
  }

  #ModalHarga #table_range .harga-inline-save:hover {
    border-color: #0f5ed5;
    background: #0f5ed5;
    color: #fff;
  }

  #ModalHarga #table_range .harga-inline-cancel {
    width: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid #d8e0ec;
    background: #fff;
    color: #667085;
  }

  #ModalHarga #table_range .harga-inline-cancel i {
    font-size: 12px;
  }

  #ModalHarga #table_range .harga-inline-cancel:hover {
    border-color: #f2a7b2;
    background: #fff5f6;
    color: #d92d46;
  }

  #ModalHarga .modal-footer {
    display: flex;
    min-height: 66px;
    padding: 12px 24px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }

  #ModalHarga .harga-footer-hint {
    color: #667085;
    font-size: 11px;
  }

  #ModalHarga .harga-footer-hint i {
    margin-right: 5px;
    color: #1769e8;
  }

  #ModalHarga .modal-footer .btn {
    min-width: 104px;
    height: 40px;
    border: 0;
    border-radius: 7px !important;
    background: #1769e8;
    box-shadow: 0 6px 14px rgba(23, 105, 232, .22);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  @media (max-width: 991.98px) {
    #ModalHarga .modal-dialog {
      width: calc(100% - 24px);
      margin: 12px auto;
    }

    #ModalHarga .harga-modal-simple {
      max-height: calc(100vh - 24px);
    }

    #ModalHarga .harga-modal-body {
      max-height: calc(100vh - 156px);
      padding: 16px !important;
    }

    #ModalHarga .harga-tabs-layout {
      min-height: auto;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav {
      gap: 8px;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link {
      min-width: 178px;
    }

    #ModalHarga .harga-tabs-layout .harga-tab-content {
      min-height: 460px;
    }

    #ModalHarga #load_harga_level .table-wrapper,
    #ModalHarga #load_range .table-wrapper,
    #ModalHarga #load_range_level .table-wrapper {
      overflow-x: auto;
    }

    #ModalHarga #table_level,
    #ModalHarga #table_range,
    #ModalHarga #table_range_level {
      min-width: 700px;
    }
  }

  @media (max-width: 575.98px) {
    #ModalHarga .harga-modal-header {
      min-height: 66px;
      padding: 10px 14px !important;
    }

    #ModalHarga #TitleHarga {
      max-width: 250px;
      overflow: hidden;
      font-size: 17px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #ModalHarga .harga-modal-body {
      padding: 12px !important;
    }

    #ModalHarga .harga-tabs-layout .harga-tab-content {
      min-height: 420px;
      padding: 16px 14px;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link {
      min-height: 52px;
      min-width: 160px;
    }

    #ModalHarga .harga-tabs-layout .harga-tabs-nav .nav-link small {
      display: none;
    }

    #ModalHarga .harga-footer-hint {
      display: none;
    }

    #ModalHarga .harga-single-form > .form-group {
      display: block;
    }

    #ModalHarga .harga-single-form > .form-group > label,
    #ModalHarga .harga-single-form > .form-group > .col-sm-6 {
      width: 100%;
      max-width: 100%;
      padding-right: 0;
      padding-left: 0;
    }

    #ModalHarga .modal-footer {
      justify-content: flex-end;
      padding: 10px 14px;
    }
  }
</style>

<style>
/* Final override kartu produk: gambar selalu berada di sisi kiri. */
#container-wrapper.bahan-page .bahan-product-card {
  display: grid;
  grid-template-columns: minmax(108px, 40%) minmax(0, 60%);
  grid-template-rows: auto auto auto auto;
  align-content: start;
}
#container-wrapper.bahan-page .bahan-product-card__media {
  width: auto;
  height: 154px !important;
  margin: 12px 0 0 12px;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1 / 4;
  border: 1px solid #e5eaf1;
  border-radius: 9px;
}
#container-wrapper.bahan-page .bahan-product-card__content {
  display: contents;
  padding: 0;
}
#container-wrapper.bahan-page .bahan-product-card__heading {
  min-width: 0;
  min-height: 58px;
  padding: 14px 14px 4px;
  grid-column: 2;
  grid-row: 1;
}
#container-wrapper.bahan-page .bahan-product-card__tags {
  display: flex;
  min-width: 0;
  margin-top: 5px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#container-wrapper.bahan-page .bahan-product-card__tags .bahan-product-card__category,
#container-wrapper.bahan-page .bahan-product-card__tags .bahan-product-card__status {
  display: inline-flex;
  height: 22px;
  margin: 0;
  padding: 3px 8px;
  align-items: center;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}
#container-wrapper.bahan-page .bahan-product-card__tags .bahan-product-card__status {
  gap: 3px;
  font-size: 10px;
}
#container-wrapper.bahan-page .bahan-product-card__prices {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 5px 14px 3px;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: 1fr;
  gap: 7px;
}
#container-wrapper.bahan-page .bahan-product-card__prices > div {
  padding: 0;
  background: transparent;
}
#container-wrapper.bahan-page .bahan-product-card__prices span {
  margin-bottom: 1px;
}
#container-wrapper.bahan-page .bahan-product-card__stock {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 6px 14px 12px;
  grid-column: 2;
  grid-row: 3;
}
#container-wrapper.bahan-page .bahan-product-card__stock > span {
  margin-bottom: 2px;
}
#container-wrapper.bahan-page .bahan-product-card__stock strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#container-wrapper.bahan-page .bahan-product-card__actions {
  margin-top: 12px;
  padding: 0 12px 12px;
  grid-column: 1 / -1;
  grid-row: 4;
}
#container-wrapper.bahan-page .bahan-product-card__number,
#container-wrapper.bahan-page .bahan-product-card__status {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-shadow: none;
  padding: 4px 7px;
}
#container-wrapper.bahan-page .bahan-product-card__number {
  background: #f2f5f9;
}
#container-wrapper.bahan-page .bahan-product-card__status {
  background: #f2f8f5;
}
#container-wrapper.bahan-page .bahan-product-card.without-product-image {
  grid-template-columns: minmax(0, 1fr);
}
#container-wrapper.bahan-page .bahan-product-card.without-product-image .bahan-product-card__heading,
#container-wrapper.bahan-page .bahan-product-card.without-product-image .bahan-product-card__prices,
#container-wrapper.bahan-page .bahan-product-card.without-product-image .bahan-product-card__stock {
  grid-column: 1;
}
@media (max-width: 575.98px) {
  #container-wrapper.bahan-page .bahan-product-card {
    grid-template-columns: minmax(112px, 38%) minmax(0, 62%);
  }
  #container-wrapper.bahan-page .bahan-product-card__media {
    height: 148px !important;
  }
}
</style>
