<div class="container-fluid jenis-page" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Kategori produk</h1>
    
  </div>

  <div class="row">
    <div class="col-md-12">
      <form action="#" method="post">
        <div class="card">
          <div class="card-header">
            <!-- 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 jenis-label-desktop">LIMIT</span>
                  <label class="input-group-text jenis-label-mobile" for="limits">Limit</label>
                </div>
                <?php
                    $limit_default = isset($limit_default) ? (int)$limit_default : 10;

                    // opsi standar yang kamu mau tampil
                    $limit_opts = [10, 20, 50, 100];

                    // kalau default sistem (perPage) bukan 10/20/50/100 (misal 12),
                    // kita sisipkan supaya dropdown sesuai dan auto-selected
                    $is_extra_default = !in_array($limit_default, $limit_opts, true);
                    if ($is_extra_default) array_unshift($limit_opts, $limit_default);
                  ?>
                  <select id="limits" name="limits" class="form-control custom-select" onchange="search_Jenis()">
                    <?php foreach ($limit_opts as $opt): ?>
                      <option value="<?= (int)$opt ?>" <?= ((int)$opt === $limit_default ? 'selected' : '') ?>>
                        <?= (int)$opt ?><?= ($is_extra_default && (int)$opt === $limit_default ? ' (default)' : '') ?>
                      </option>
                    <?php endforeach; ?>
                  </select>

              </div>

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

              <!-- KEYWORDS -->
              <div class="toolbar-search toolbar-grow">
                <label class="mobile-field-label" for="keywords">Search</label>
                <div class="jenis-search-field">
                  <i class="fa fa-search"></i>
                  <input type="text" id="keywords" class="form-control form-control-sm"
                         placeholder="Cari data" onkeyup="search_JenisDebounced();" />
                </div>
              </div>

              <!-- ACTIONS -->
              <div class="input-group-append toolbar-actions">
                <button class="btn btn-danger clear_jenis" type="button"><i class="fa fa-times"></i> Clear</button>
                <button type="button" class="btn btn-info jenis" data-id="0"><i class="fa fa-plus"></i> Tambah</button>
                <!--button class="btn btn-primary url_doc" data-url="jenis" type="button" data-toggle="tooltip"
                        data-original-title="Dok Kategori Produk" data-placement="left"><i class="fa fa-info-circle"></i></button-->
              </div>
            </div>
          </div>

          <!-- isi awal tetap, namun jika server mengganti via Ajax kita bungkus ulang tabel-nya di JS -->
          <div class="card-body" id="dataJenis">
            <div class="card-block">
              <div class="table-responsive">
                <table class="table table-striped table-mailcard">
                  <thead>
                    <tr>
                      <th class='text-center' style="width:60px">No</th>
                      <th>Uraian</th>
                      <th>No. Akun</th>
                      <th class='text-right' style="min-width:220px">Status | Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php if(!empty($result)){
                      $no = 1;
                      foreach ($result as $row){
                        if ($row['pub'] == 'Y'){ $aktif ='<i class="fa fa-check-circle text-white" title="Aktif"></i>'; }else{ $aktif = '<i class="fa fa-minus-circle text-danger" title="Nonaktif"></i>'; }
                        if ($row['id_jenis'] == 1){
                          $edit_jenis = "<a class='btn-sm text-warning' href='#'>$row[jenis_cetakan]</a>";
                          $edit_btn = "<a class='btn btn-secondary btn-sm text-white' href='#'><i class='fa fa-edit'></i> Edit</a>";
                          $hapus = '<a class="btn btn-secondary btn-sm text-white" href="#"><i class="fa fa-trash "></i> Hapus</a>';
                        }else{
                          $edit_jenis = "<a class='btn-sm jenis text-info' title='Edit Data' data-id='$row[id_jenis]' href='#'>$row[jenis_cetakan]</a>";
                          $edit_btn = "<a class='btn btn-info btn-sm jenis text-white' title='Edit Data' data-id='$row[id_jenis]' href='#'><i class='fa fa-edit'></i> Edit</a>";
                          $hapus = '<a class="btn btn-danger btn-sm text-white" data-id="'.$row['id_jenis'].'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash "></i> Hapus</a>';
                        }
                        echo "<tr>
                          <td class='text-center'>$no</td>
                          <td class='pl-1'>$edit_jenis</td>
                          <td class='pl-1'>".getIdAkunPendapatan($row['id_akun'])."</td>
                          <td class='text-right'>
                            <div class='btn-group btn-group-sm' role='group'>
                              <button type='button' class='btn btn-info btn-sm' data-id='".$row['id_jenis']."'><span class='icon text-white'>$aktif</span></button>
                              $edit_btn $hapus
                            </div>
                          </td>
                        </tr>";
                        $no++;
                      } }else{ ?>
                      <tr><td colspan="5">Data belum ada</td></tr>
                    <?php } ?>
                  </tbody>
                </table>
              </div>
              <div class="jenis-mobile-list">
                <?php if(!empty($result)){
                  $no = 1;
                  foreach ($result as $row){
                    if ($row['id_jenis'] == 1){
                      $edit_btn = "<a class='btn btn-secondary btn-sm text-white' href='#'><i class='fa fa-edit'></i> Edit</a>";
                      $hapus = '<a class="btn btn-secondary btn-sm text-white" href="#"><i class="fa fa-trash"></i> Hapus</a>';
                    }else{
                      $edit_btn = "<a class='btn btn-info btn-sm jenis text-white' title='Edit Data' data-id='$row[id_jenis]' href='#'><i class='fa fa-edit'></i> Edit</a>";
                      $hapus = '<a class="btn btn-danger btn-sm text-white" data-id="'.$row['id_jenis'].'" data-toggle="modal" data-target="#confirm-delete" href="#"><i class="fa fa-trash"></i> Hapus</a>';
                    }
                    $status_label = ($row['pub'] == 'Y') ? 'Aktif' : 'Nonaktif';
                ?>
                <div class="jenis-mobile-card">
                  <div class="jenis-mobile-no"><?=$no;?></div>
                  <div class="jenis-mobile-info">
                    <a class="jenis-mobile-title jenis" title="Edit Data" data-id="<?=$row['id_jenis'];?>" href="#"><?=$row['jenis_cetakan'];?></a>
                    <div class="jenis-mobile-account">No. Akun: <?=getIdAkunPendapatan($row['id_akun']);?></div>
                  </div>
                  <div class="jenis-mobile-actions">
                    <?=$edit_btn;?>
                    <?=$hapus;?>
                    <button type="button" class="jenis-mobile-status" title="<?=$status_label;?>" aria-label="<?=$status_label;?>">
                      <i class="fa fa-ellipsis-v"></i>
                    </button>
                  </div>
                </div>
                <?php $no++; } }else{ ?>
                <div class="jenis-mobile-empty">Data belum ada</div>
                <?php } ?>
              </div>
              <nav aria-label="Page navigation" class="mt-2">
                <?php echo $this->ajax_pagination->create_links(); ?>
              </nav>
            </div><!-- /.card-block -->
          </div><!-- /.card-body -->
        </div><!-- /.card -->
      </form>
    </div>
  </div>
</div>

<!-- Modal Jenis (tetap) -->
<div class="modal fade" id="ModalJenis" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" id="save-jenis" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Kategori 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">
        <input type='hidden' name='jenis_id' id='jenis_id' value='0'>
        <input type='hidden' name='type' id="type">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group"><label for="id_akun">Akun</label>
              <select name="id_akun" id="id_akun" class="form-control" title="-- Pilih Akun jika ada --" data-width="100%" data-live-search="true"></select>
            </div>
            <div class="form-group"><label>Nama Kategori</label>
              <input type="text" name="judul" id="judul" class="form-control" required>
            </div>
            <label>Kelompok akun </label>
            <div class="form-group d-flex flex-row">
              <select name="kelompok" id="kelompok" class="form-control custom-select" required>
                <option value="6">Pendapatan Operasional</option>
                <option value="8">Beban operasional</option>
              </select>
            </div>
            <label>Aktif </label>
            <div class="form-group d-flex flex-row">
              <select name="aktif" id="aktif" class="form-control custom-select" required>
                <option value="Y" selected>Ya</option>
                <option value="N">Tidak</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" name="submit" class="btn btn-info save_jenis">Simpan</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal konfirmasi (tetap) -->
<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>

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

<input type="hidden" name="halaman" id="halaman" value="0">

<script>
  // ===== UX kecil: debounce untuk pencarian =====
  let __jenisTimer;
  document.body.classList.add('jenis-mobile-page');

  function search_JenisDebounced(){
    clearTimeout(__jenisTimer);
    __jenisTimer = setTimeout(search_Jenis, 300);
  }

  // Bungkus tabel ke .table-responsive jika output Ajax belum membungkus
  function wrapTablesResponsive(scope){
    var $root = scope ? $(scope) : $(document);
    $root.find('#dataJenis table').each(function(){
      var $tbl = $(this);
      if(!$tbl.parent().hasClass('table-responsive')){
        $tbl.wrap('<div class="table-responsive"></div>');
      }
    });
  }

  $(function(){
    $(document).fcs(".form-control");
  });

  $('.clear_jenis').on('click', function(){
    $('#keywords').val('');
    search_Jenis();
  });

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

    var urlnya = '<?php echo base_url("produk/cariJenis/"); ?>'+page_num
    $.ajax({
      type: 'POST',
      url: urlnya,
      data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
      beforeSend: function(){ $('body').loading(); },
      success: function(html){
        $('#dataJenis').html(html);
        $('#halaman').val(page_num);
        wrapTablesResponsive('#dataJenis');
        $('body').loading('stop');
      },
      error: function(xhr, status, error) {
        sweet('Server!!!',xhr.responseText,'error','danger');
        $('body').loading('stop');
      }
    });
  }

  // Modal & CRUD (tetap)
  $('#ModalJenis').on('shown.bs.modal', function() { $('#judul').focus(); });

  $(document).on('click','.jenis',function(e){
    e.preventDefault();
    var id = $(this).attr('data-id');
    $('#ModalJenis').modal({backdrop: 'static', keyboard: false});
    if(id==0){ $("#type").val('add'); return; } else { $("#type").val('edit'); }
    $.ajax({
      url: base_url + 'produk/edit_jenis',
      data: {id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        $("#jenis_id").val(data.id);
        $("#id_akun").val(data.id_akun);
        $("#judul").val(data.judul);
        $("#kelompok").val(data.kelompok);
        $("#aktif").val(data.aktif);
        $('body').loading('stop');
      },
      error: function(xhr){ sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop'); }
    });
  });

  $('#aktif').on('change', function(){ $("#aktif").removeClass("is-invalid").addClass("is-valid"); });
  $("#judul").keyup(function(){ $("#judul").removeClass("is-invalid").addClass("is-valid"); });

  $(document).on('click','.save_jenis',function(e){
    e.preventDefault();
    var id = $("#jenis_id").val();
    var id_akun = $("#id_akun").val();
    var type = $("#type").val();
    var judul = $("#judul").val();
    var kelompok = $("#kelompok").val();
    var aktif = $("#aktif").val();
    var halaman = $("#halaman").val();
    if(judul==''){ $("#judul").addClass('is-invalid').focus(); return; }
    if(kelompok==''){ $("#kelompok").addClass('is-invalid'); return; }
    if(aktif==''){ $("#aktif").addClass('is-invalid'); return; }

    $.ajax({
      url: base_url + 'produk/save_jenis',
      data: {id:id,type:type,judul:judul,kelompok:kelompok,id_akun:id_akun,aktif:aktif},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('#save-jenis').loading({zIndex:1060}); },
      success: function(data) {
        if(data.status==200){
          $('#ModalJenis').modal('hide');
          showNotif('bottom-right','Simpan data',data.msg,'success');
        }else{
          sweet('Peringatan!!!',data.msg,'warning','warning');
        }
        search_Jenis(halaman);
        load_jenis_akun();
        $('#save-jenis').loading('stop');
      },
      error: function(xhr){ sweet('Server!!!',xhr.responseText,'error','danger'); $('#save-jenis').loading('stop'); }
    });
  });

  $(document).on('click','.hapus',function(e){
    var id = $("#data-hapus").val();
    var halaman = $("#halaman").val();
    $.ajax({
      url: base_url + 'produk/hapus_jenis',
      data: {type:'hapus',id:id},
      method: 'POST',
      dataType:'json',
      beforeSend: function(){ $('body').loading(); },
      success: function(data) {
        if(data.status==200){ showNotif('bottom-right','Hapus data',data.msg,'success'); }
        else{ sweet('Peringatan!!!',data.msg,'warning','warning'); }
        $('#confirm-delete').modal('hide');
        search_Jenis(halaman);
        $('body').loading('stop');
      },
      error: function(xhr){ sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop'); }
    });
  });

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

  $('body').on('hidden.bs.modal', '.modal', function() {
    $('.form-control').val('')
  });

  $("#id_akun").filter(function () {
    $.ajaxQueue({
      url: base_url + "produk/load_jenis",
      type: 'GET',
      dataType: 'json',
      beforeSend: function () {
        $("#id_akun").append("<option value='loading'>loading</option>").attr("disabled", true);
      },
      success: function (response) {
        $("#id_akun option[value='loading']").remove();
        $("#id_akun").attr("disabled", false).append("<option value=''>Pilih Akun Jika Ada</option>");
        for (var i = 0; i < response.length; i++) {
          var id = response[i]['id'], name = response[i]['name'];
          $("#id_akun").append("<option value='" + id + "'>" + name + "</option>");
        }
      }
    });
  });

  function load_jenis_akun(){
    $.ajax({
      url: base_url + "produk/load_jenis",
      type: 'POST',
      dataType: 'json',
      beforeSend: function () { $("#id_akun").append("<option value='loading'>loading</option>"); $("#id_akun").empty(); },
      success: function (response) {
        $("#id_akun").append("<option value=''>Pilih Akun jika ada</option>");
        for (var i = 0; i < response.length; i++) {
          var id = response[i]['id'], name = response[i]['name'];
          $("#id_akun").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"); }
      }
    });
  }
</script>

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

  /* Toolbar fleksibel di HP–desktop */
  .toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
  }
  .toolbar-item { flex: 1 1 200px; min-width: 160px; }
  .toolbar-grow { flex: 2 1 280px; min-width: 180px; }
  .toolbar-actions { display: flex; gap: .5rem; flex: 0 1 auto; }
  .mobile-field-label { display: none; }
  .jenis-label-mobile { display: none; }
  .jenis-search-field { width: 100%; }
  .jenis-search-field .fa { display: none; }
  .jenis-mobile-list { display: none; }

  /* Tinggi minimum biar enak di-tap */
  .input-group.input-group-sm > .form-control,
  .input-group.input-group-sm > .custom-select { min-height: 36px; }

  /* Judul & breadcrumb rapi saat sempit */
  @media (max-width: 576px) {
    body.jenis-mobile-page {
      background: #f6f7f9;
    }

    body.jenis-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.jenis-mobile-page .navbar.topbar #sidebarToggleTop,
    body.jenis-mobile-page .navbar.topbar #sidebarToggleLeft {
      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.jenis-mobile-page .navbar.topbar #sidebarToggleTop::before,
    body.jenis-mobile-page .navbar.topbar #sidebarToggleLeft::before {
      content: none;
      display: none;
    }

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

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

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

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

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

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

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

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

    body.jenis-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.jenis-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.jenis-mobile-page .navbar.topbar #userDropdown + .dropdown-menu .dropdown-item i {
      width: 18px;
      margin-right: 12px !important;
      color: #c7c9d6 !important;
      text-align: center;
    }

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

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

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

    #container-wrapper.jenis-page .d-sm-flex {
      flex-direction: column;
      align-items: flex-start !important;
      gap: .25rem;
      margin-bottom: 10px !important;
    }

    #container-wrapper.jenis-page h1 {
      font-size: 18px;
      line-height: 1.2;
      font-weight: 700;
      color: #3f4350 !important;
    }

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

    #container-wrapper.jenis-page .card {
      border: 0;
      border-radius: 5px;
      box-shadow: 0 2px 12px rgba(16,24,40,.08);
      background: #fff;
    }

    #container-wrapper.jenis-page .card-header {
      padding: 10px 12px 10px;
      background: #fff;
      border-bottom: 0;
      border-radius: 5px;
    }

    #container-wrapper.jenis-page .toolbar-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px 10px;
      align-items: end;
    }

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

    #container-wrapper.jenis-page .toolbar-item {
      display: block;
    }

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

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

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

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

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

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

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

    #container-wrapper.jenis-page .toolbar-search {
      grid-column: 1 / -1;
    }

    #container-wrapper.jenis-page .jenis-search-field {
      position: relative;
      margin-top: 4px;
    }

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

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

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

    #container-wrapper.jenis-page .toolbar-actions .btn {
      width: 100%;
      height: 30px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(16,24,40,.12);
    }

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

    #container-wrapper.jenis-page .table-responsive {
      display: none;
    }

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

    #container-wrapper.jenis-page .jenis-mobile-card {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      min-height: 78px;
      padding: 12px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 4px 15px rgba(16,24,40,.08);
    }

    #container-wrapper.jenis-page .jenis-mobile-no {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      background: #eef6ff;
      color: #3f4350;
      font-size: 19px;
      font-weight: 500;
      box-shadow: 0 5px 14px rgba(74,144,226,.12);
    }

    #container-wrapper.jenis-page .jenis-mobile-title {
      display: block;
      color: #2f9bff;
      font-size: 18px;
      line-height: 1.18;
      font-weight: 800;
      margin-bottom: 6px;
    }

    #container-wrapper.jenis-page .jenis-mobile-account {
      color: #555b67;
      font-size: 17px;
      line-height: 1.2;
    }

    #container-wrapper.jenis-page .jenis-mobile-actions {
      display: grid;
      grid-template-columns: 92px 102px 20px;
      align-items: center;
      gap: 10px;
    }

    #container-wrapper.jenis-page .jenis-mobile-actions .btn {
      height: 37px;
      border-radius: 5px;
      padding: 0 13px;
      font-size: 16px;
      font-weight: 700;
      line-height: 37px;
      box-shadow: 0 5px 12px rgba(16,24,40,.16);
    }

    #container-wrapper.jenis-page .jenis-mobile-actions .btn-info {
      background: #2f9bff;
      border-color: #2f9bff;
    }

    #container-wrapper.jenis-page .jenis-mobile-actions .btn-danger {
      background: #ff3f3f;
      border-color: #ff3f3f;
    }

    #container-wrapper.jenis-page .jenis-mobile-status {
      border: 0;
      background: transparent;
      color: #626b7b;
      font-size: 20px;
      padding: 0;
      line-height: 1;
    }

    #container-wrapper.jenis-page .jenis-mobile-empty {
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      color: #555b67;
    }

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

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

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

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

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

    #container-wrapper.jenis-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.jenis-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: normal;
      overflow-wrap: normal;
    }

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

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

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

      body.jenis-mobile-page .navbar.topbar #clock {
        font-size: 14px;
      }

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

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

      #container-wrapper.jenis-page h1 {
        font-size: 18px;
      }

      #container-wrapper.jenis-page .jenis-mobile-card {
        grid-template-columns: 42px minmax(108px, 1fr) auto;
        gap: 10px;
        min-height: 70px;
        padding: 10px 8px;
      }

      #container-wrapper.jenis-page .jenis-mobile-no {
        width: 38px;
        height: 38px;
        font-size: 17px;
      }

      #container-wrapper.jenis-page .jenis-mobile-title {
        font-size: 15px;
        margin-bottom: 4px;
      }

      #container-wrapper.jenis-page .jenis-mobile-account {
        font-size: 14px;
      }

      #container-wrapper.jenis-page .jenis-mobile-actions {
        grid-column: auto;
        grid-template-columns: 68px 76px 12px;
        gap: 6px;
      }

      #container-wrapper.jenis-page .jenis-mobile-actions .btn {
        height: 34px;
        padding: 0 6px;
        font-size: 13px;
        line-height: 34px;
      }

      #container-wrapper.jenis-page .jenis-mobile-status {
        font-size: 17px;
      }
    }
  }
</style>
