<div class="container-fluid stok-masuk-page" id="container-wrapper">
<?php
if (!function_exists('pj_fmt_stok_masuk')) {
	function pj_fmt_stok_masuk($val, $maxDec = 2)
	{
		if ($val === null || $val === '') return '0';

		$n = (float) $val;
		if (abs($n - round($n)) < 0.000000001) {
			return number_format($n, 0, ',', '.');
		}

		$s = number_format(round($n, $maxDec), $maxDec, ',', '.');
		return rtrim(rtrim($s, '0'), ',');
	}
}
?>
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800"><?=$judul;?></h1>
		<!--ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page"><?=$judul;?></li>
		</ol-->
	</div>
	<div class="row">
		<div class="col-md-12">
			<?php if (!empty($stok_pembelian_pending)) : ?>
			<div class="card mb-3" style="border:1px solid #fed7aa;background:#fffaf5;box-shadow:0 8px 22px rgba(15,23,42,.05)">
				<div class="card-header d-flex align-items-center justify-content-between" style="background:#fff7ed;border-bottom:1px solid #fed7aa">
					<div><strong style="color:#9a3412"><i class="fa fa-clock-o mr-1"></i> Stok Pembelian Menunggu ACC</strong><div class="small text-muted mt-1">Belum dihitung sebagai stok masuk sampai disetujui.</div></div>
					<span class="badge badge-warning"><?= count($stok_pembelian_pending); ?> transaksi</span>
				</div>
				<div class="table-responsive">
					<table class="table table-sm mb-0">
						<thead><tr><th>No. Pembelian</th><th>Tanggal</th><th>Item Stok dan Qty Pembelian</th><th class="text-center">Jumlah Item</th><th class="text-right">Aksi</th></tr></thead>
						<tbody>
						<?php foreach ($stok_pembelian_pending as $pending) : ?>
						<tr>
							<td><strong><?= html_escape($pending['no_transaksi']); ?></strong></td>
							<td><?= html_escape(dtime($pending['tgl_pembelian'])); ?></td>
							<td>
								<div class="d-flex flex-wrap" style="gap:.35rem">
								<?php foreach ($pending['items'] as $pending_item) :
									$qty = (float)$pending_item['qty'];
									$qty_text = abs($qty - round($qty)) < 0.000001 ? number_format($qty, 0, ',', '.') : rtrim(rtrim(number_format($qty, 2, ',', '.'), '0'), ',');
								?>
									<span style="display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .55rem;border:1px solid #fed7aa;border-radius:6px;background:#fff;color:#475569;white-space:nowrap">
										<span><?= html_escape($pending_item['title']); ?></span>
										<strong style="color:#9a3412"><?= $qty_text; ?> <?= html_escape($pending_item['satuan']); ?></strong>
									</span>
								<?php endforeach; ?>
								</div>
							</td>
							<td class="text-center"><?= (int)$pending['jumlah_item']; ?></td>
							<td class="text-right">
							<?php if (!empty($boleh_acc_stok)) : ?>
								<button type="button" class="btn btn-success btn-sm acc-stok-pembelian" data-id="<?= encrypt_url($pending['id_pembelian']); ?>"><i class="fa fa-check"></i> ACC Stok</button>
							<?php else : ?><span class="badge badge-warning">Menunggu Owner/Superadmin</span><?php endif; ?>
							</td>
						</tr>
						<?php endforeach; ?>
						</tbody>
					</table>
				</div>
			</div>
			<?php endif; ?>
			<form action="#" method="post">
				<div class="card">
					<div class="card-header pb-0">
						<div class="input-group input-group-sm stok-masuk-filter-toolbar">
							<div class="input-group-prepend">
								<span class="input-group-text" for="limits">LIMIT</span>
							</div>
							<select id="limits" name="limits" class="form-control custom-select w-1" onchange="search_Stok_Masuk()">
								<option value="10">10</option>
								<option value="20">20</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</select>
							<div class="input-group-prepend">
								<span class="input-group-text" for="sortBy">SORT</span>
							</div>
							<select id="sortBy" class="form-control custom-select w-1" onchange="search_Stok_Masuk()">
								<option value="ASC">ASC</option>
								<option value="DESC" selected>DESC</option>
							</select>
							<div class="input-group-prepend stok-masuk-search-label">
								<span class="input-group-text" for="keywords">CARI DATA</span>
							</div>
							<input type="text" id="keywords" class="form-control w-20" placeholder="Cari data" onkeyup="search_Stok_Masuk();"/>
							<div class="input-group-append stok-masuk-filter-actions">
								<button class="btn btn-danger clear_search stok-masuk-filter-btn" type="button"><i class="fa fa-times"></i> Clear</button>
								<button type="button" class="btn btn-info add_bahan stok-masuk-filter-btn" data-id="0"><i class="fa fa-plus"></i> Tambah</button>
								<button type='button' class='btn btn-secondary print_stok stok-masuk-filter-btn' id='print_stok' data-toggle='tooltip' data-original-title='Print PDF'><i class='fa fa-print 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 Produk" data-placement="left"><i class="fa fa-info-circle"></i></button-->
							</div>
						</div>
					</div>
					
					<div class="card-body table-responsive" id="dataStokMasuk">
						<div class="card-block stok-masuk-results">
						<table class="table table-striped table-mailcard stok-masuk-table">
							<thead>
								<tr>
									<th class="w-1 text-center">No</th>
									<th class="w-10 pl-1">Nama bahan</th>
									<th class="w-8 text-right">Stok Masuk</th>
									<th class="w-8 text-right">Aksi</th>
								</tr>
							</thead>
							<tbody>
								<?php if(!empty($result)){
									$no = 1;
									foreach ($result as $row){
										$jml_masuk = stok_masuk($row->id);
										$disabled = '';
										if($jml_masuk <= 0 ){
											$disabled = 'disabled';
										}
										echo "<tr><td class='text-center'>$no</td>
										<td class='pl-1'>".$row->title."</td>
										<td class='text-right'>".pj_fmt_stok_masuk($jml_masuk)."</td>
										<td class='text-right'>
										<div class='btn-group btn-group-sm' role='group'>
										<button type='button' class='btn btn-info btn-sm detail_stok_masuk' data-id='".$row->id."' data-title='".$row->title."' ".$disabled."><i class='fa fa-search'></i> Detail</button>
										<button type='button' data-id='".$row->id."' class='btn btn-secondary btn-sm print_stok_masuk flat' data-toggle='tooltip' data-original-title='Print PDF'><i class='fa fa-file-pdf-o fa-1x'></i> Print</button>
										</div>
										</td>
									</tr>";
										$no++;
									}
								}else{ ?>
									<tr>
										<td colspan="4">Data belum ada</td>
									</tr>
								<?php } ?>
							</tbody>
						</table>

						<div class="stok-masuk-mobile-list">
							<?php if(!empty($result)){
								$no = 1;
								foreach ($result as $row){
									$jml_masuk = stok_masuk($row->id);
									$disabled = '';
									if($jml_masuk <= 0 ){
										$disabled = 'disabled';
									}
							?>
							<div class="stok-masuk-mobile-card">
								<div class="stok-masuk-mobile-number"><?php echo $no; ?></div>
								<div class="stok-masuk-mobile-main">
									<div class="stok-masuk-mobile-title"><?php echo $row->title; ?></div>
									<div class="stok-masuk-mobile-label">Stok Masuk</div>
									<div class="stok-masuk-mobile-value"><?php echo pj_fmt_stok_masuk($jml_masuk); ?> pcs</div>
								</div>
								<div class="stok-masuk-mobile-actions">
									<button type="button" class="stok-masuk-mobile-btn stok-masuk-mobile-btn-detail detail_stok_masuk" data-id="<?php echo $row->id; ?>" data-title="<?php echo htmlspecialchars($row->title, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $disabled; ?>>
										<i class="fa fa-search"></i> Detail
									</button>
									<button type="button" class="stok-masuk-mobile-btn stok-masuk-mobile-btn-print print_stok_masuk" data-id="<?php echo $row->id; ?>" data-toggle="tooltip" data-original-title="Print PDF">
										<i class="fa fa-print"></i> Print
									</button>
								</div>
							</div>
							<?php $no++; } ?>
							<div class="stok-masuk-mobile-info">
								<i class="fa fa-info-circle"></i>
								<span>Menampilkan : <?php echo count($result); ?></span>
							</div>
							<?php } else { ?>
							<div class="stok-masuk-mobile-empty">Data belum ada</div>
							<?php } ?>
						</div>

						<nav aria-label="Page navigation" class="mt-2 stok-masuk-pagination">
							<?php echo $this->ajax_pagination->create_links(); ?>
						</nav>
					</div><!-- /.card-body -->
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</form>
		</div>
	</div>
</div>
 
<div id="ModalStok" class="modal left fade" role="dialog">
    <div class="modal-dialog" id="load-save-bahan">
        <div class="modal-content flat">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalScrollableTitleStok">Stok Masuk</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="type" id="type" class="form-control" required>
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
							<label for="judul">Nama Bahan/Barang</label>
							<select class="form-control select-box" id="bahan_stok">
								<option value="">Pilih bahan</option>
								<?php foreach($bahan AS $val){ ?>
									<option value="<?=$val->id;?>"><?=$val->title;?></option>
								<?php } ?>
							</select>
						</div>
						<div class="form-group" style="display:none">
							<label for="harga_modal">Harga Beli</label>
							<input type="text" onkeyup='formatNumber(this)' name="harga_beli" id="harga_beli" class="form-control" readonly>
						</div>
						
						<div class="form-group">
							<label for="jumlah">Jumlah Stok</label>
							<input type="text" name="jumlah" id="jumlah" class="form-control" required>
						</div>
						<div class="form-group">
							<label for="keterangan">Keterangan</label>
							<input type="text" name="keterangan" id="keterangan" class="form-control" required>
						</div>
					</div>
				</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" name="submit" class="btn btn-info save_stok_masuk">Simpan [ctrl+s]</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div id="ModalPrintStok" class="modal fade" role="dialog">
    <div class="modal-dialog" id="load-save-bahan">
        <div class="modal-content flat">
			<form method="POST" id="form-print-stok-masuk" action="<?php echo base_url('stok/print_stok_masuk'); ?>" target="_blank">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalScrollableTitle">Print Stok Masuk</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="id" id="id_stok" class="form-control" required>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<label for="datepicker">Periode</label>
								<div class="btn-list text-white">
									<input type="text" id="datepicker" name="bulan" class="form-control form-control-sm" required="" />
								</div>
							</div>
						</div>
					</div>
					
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-info">Print</button>
					<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="ModalDetail" class="modal modal-fullscreen-xl fade" role="dialog">
    <div class="modal-dialog" id="load-save-bahan">
        <div class="modal-content flat">
			<div class="modal-header">
				<h5 class="modal-title" id="ModalScrollableTitle">Detail Stok Masuk</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body detail"></div>
			<div class="modal-footer">
				<a href="" target="_blank" id="cetak" class="btn btn-info btn-icon-split flat btn-sm">
					<span class="icon text-white-50" >
						<i class="fa fa-print fa-fw"></i>
					</span>
					<span class="text">Cetak Laporan</span>
				</a>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<input type="hidden" name="halaman" id="halaman" value="0">
<form method="POST" action="<?=base_url();?>stok/print_semua_stok_masuk" id="target_print_stok" target="_blank">
	 
</form>
<script>
	$(document).on('click', '.acc-stok-pembelian', function(){
		var id = $(this).data('id');
		confirm.show({title:'ACC Stok Pembelian', content:'Stok pembelian akan ditambahkan ke data stok masuk. Lanjutkan?', btns:[{
			text:'Ya, ACC', callback:function(instance){ instance.close=true; $.ajax({
				url:base_url+'pembelian/acc_stok_pembelian', type:'POST', dataType:'json', data:{id:id}, beforeSend:function(){$('body').loading();},
				success:function(res){$('body').loading('stop'); if(res.status){sweet('Sukses!!!',res.msg,'success','success'); window.location.reload();}else sweet('Peringatan!!!',res.msg,'warning','warning');},
				error:function(xhr){$('body').loading('stop'); sweet('Peringatan!!!',(xhr.responseJSON&&xhr.responseJSON.msg)||'ACC stok gagal','warning','warning');}
			}); }
		},{text:'Batal',callback:function(){}}]});
	});
	$("#print_stok").click(function(e) {
		e.preventDefault();
		$( "#target_print_stok" ).submit();
	});
	$(document).on('click','.print_stok_masuk',function(e){
		e.preventDefault();
		var id = $(this).data('id');
		$('#id_stok').val(id);
		
		$('#ModalPrintStok').modal('show');
		
	});
	
	$("#datepicker").datepicker( {
		format: "mm-yyyy",
		viewMode: "months", 
		minViewMode: "months"
	});
	$(".select-box").chosen();
	
	$('.clear_search').on('click', function(){
		$('#keywords').val('');
		search_Stok_Masuk();
	});
	
	
	function search_Stok_Masuk(page_num){
		page_num = page_num?page_num:0;
		var keywords = $('#keywords').val();
		var sortBy = $('#sortBy').val();
		var limits = $('#limits').val();
		
		var urlnya = base_url+'stok/cariStokMasuk/'+page_num
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
			beforeSend: function(){
				$('#dataStokMasuk').loading();
			},
			success: function(html){
				$('#dataStokMasuk').html(html);
				$('#halaman').val(page_num);
				$('#dataStokMasuk').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#dataStokMasuk').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	}
	$(document).ready(function() {
		$('input').click(function() {
			this.select();
		});
	});
	
	shortcut.add("ctrl+s",function() {
		$(".save_stok_keluar").click();
	});
	function clearform(){
		$("#bahan").val("");
		$("#harga_beli").val("");
		$("#harga_jual").val("");
		$("#total").val("");
		$("#satuan").val("");
		$("#id_satuan").val("");
		$("#jumlah").val("");
	}
	
	
	$(function(){
		$(document).fcs(".form-control");
	});
	
 
	$(document).on('click','.detail_stok_masuk',function(e){
		e.preventDefault();
		var id = $(this).attr('data-id');
		var title = $(this).attr('data-title');
		$('.form-control').addClass('form-control-sm');
		$('.form-group').css('margin-bottom','5px');
		$('#ModalScrollableTitle').html('Detail Stok masuk bahan '+ title);
		$('#ModalDetail').modal('show');
		$("#cetak").attr("href", base_url+"stok/cetak_stok_masuk/"+id+"/?type=pdf")
		$.ajax({
			url: base_url + 'stok/detail_stok_masuk',
			data: {type:'detail',id:id},
			method: 'POST',
			
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				
				$('.detail').html(data);
				$('body').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('body').loading('stop');
			}
		});
	});
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
	$(document).on('click','.add_bahan',function(e){
		e.preventDefault();
		clearform();
		$('.form-control').addClass('form-control-sm');
		$('.form-group').css('margin-bottom','5px');
		$('#ModalStok').modal('show');
		
	});
	shortcut.add("ctrl+s",function() {
		$(".save_stok_masuk").click();
	});
	function parseStokDecimal(value) {
		value = String(value || '').trim().replace(/\s/g, '');
		if (value.indexOf(',') !== -1) {
			value = value.replace(/\./g, '').replace(',', '.');
		} else if (/^\d{1,3}(\.\d{3})+$/.test(value)) {
			value = value.replace(/\./g, '');
		}
		return value;
	}
	$(document).on('click','.save_stok_masuk',function(e){
		e.preventDefault();
		var id = $("#bahan_stok").val();
		var keterangan = $("#keterangan").val();
		var harga_beli = angka($("#harga_beli").val());
		var jumlah = parseStokDecimal($("#jumlah").val());
		console.log(id)
		var halaman = $("#halaman").val();
		if(id==''){
			$("#bahan_stok").addClass('is-invalid');
			$("#bahan_stok").focus();
			return;
		}
		
		if(jumlah=='' || isNaN(parseFloat(jumlah)) || parseFloat(jumlah) <= 0){
			$("#jumlah").addClass('is-invalid');
			$("#jumlah").focus();
			return;
		}
		
		$.ajax({
			url: base_url + 'stok/save_stok',
			data: {id:id,harga_beli:harga_beli,jumlah:jumlah,keterangan:keterangan},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('#load-save-bahan').loading({zIndex:1060,theme:'dark'});
			},
			success: function(data) {
				if(data.status==200){
					showNotif('bottom-right','Hapus data',data.msg,'success');
					$('#ModalStok').modal('hide');
					}else{
					sweet('Peringatan!!!',data.msg || 'Data gagal disimpan','warning','warning');
				}
				search_Stok_Masuk(halaman);
				clearform();
				$('#load-save-bahan').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#load-save-bahan').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	
</script>
<style>
.card .table td, .card .table th {padding-right: 1rem;padding-left: 1rem;}

/* ===== Stok Masuk mobile refinement ===== */
.stok-masuk-page .stok-masuk-mobile-list,
.stok-masuk-page .stok-masuk-mobile-info,
.stok-masuk-page .stok-masuk-mobile-empty{display:none;}

.stok-masuk-page .stok-masuk-search-label{display:none;}

/* Toolbar desktop mengikuti pola filter biru pada halaman master. */
@media (min-width: 1200px){
  .stok-masuk-page .card-header{
    background:#fff;
    border-bottom:1px solid #e3e6f0;
    padding:1rem !important;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar{
    align-items:center;
    display:flex !important;
    flex-wrap:nowrap;
    width:100%;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .input-group-prepend{
    flex:0 0 auto;
    margin:0;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .input-group-prepend:not(:first-child){
    margin-left:.5rem;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar .input-group-text{
    align-items:center;
    background:var(--app-theme-color, #3f51b5);
    border:1px solid var(--app-theme-color, #3f51b5);
    border-radius:.25rem 0 0 .25rem;
    box-shadow:0 .125rem .25rem rgba(58,59,69,.14);
    color:var(--app-theme-text-color, #fff);
    display:inline-flex;
    font-size:.75rem;
    font-weight:600;
    height:38px;
    justify-content:center;
    letter-spacing:.01em;
    line-height:1;
    padding:0 .75rem;
    white-space:nowrap;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .custom-select{
    background-color:#fff;
    border:1px solid #d1d3e2;
    border-left:0;
    border-radius:0 .25rem .25rem 0;
    box-shadow:none;
    color:#3a3b45;
    flex:0 1 280px !important;
    font-size:.8rem;
    height:38px;
    min-width:100px;
    padding-left:.65rem;
    width:280px !important;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > #keywords{
    border:1px solid #d1d3e2;
    border-radius:.25rem !important;
    box-shadow:none;
    flex:1 1 220px;
    font-size:.8rem;
    height:38px;
    margin-left:.5rem;
    min-width:160px;
    padding:0 .75rem;
    width:auto !important;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .custom-select:focus,
  .stok-masuk-page .stok-masuk-filter-toolbar > #keywords:focus{
    border-color:#6f7bd9;
    box-shadow:0 0 0 .15rem rgba(63,81,181,.12);
    outline:0;
    position:relative;
    z-index:2;
  }

  .stok-masuk-page .stok-masuk-filter-actions{
    align-items:center;
    display:flex;
    flex:0 0 auto;
    gap:.5rem;
    margin-left:.5rem;
  }

  .stok-masuk-page .stok-masuk-filter-actions .stok-masuk-filter-btn{
    align-items:center;
    border:0;
    border-radius:.25rem !important;
    box-shadow:0 .125rem .25rem rgba(58,59,69,.18);
    display:inline-flex;
    font-size:.8rem;
    font-weight:600;
    gap:.3rem;
    height:38px;
    justify-content:center;
    line-height:1;
    padding:0 .78rem;
    white-space:nowrap;
  }

  .stok-masuk-page .stok-masuk-filter-actions .clear_search{
    background:#ff4d4f;
    color:#fff;
  }

  .stok-masuk-page .stok-masuk-filter-actions .add_bahan{
    background:#2eb6e6;
    color:#fff;
  }

  .stok-masuk-page .stok-masuk-filter-actions .print_stok{
    background:#3f51b5;
    color:#fff;
  }

  .stok-masuk-page .stok-masuk-filter-actions .stok-masuk-filter-btn:hover,
  .stok-masuk-page .stok-masuk-filter-actions .stok-masuk-filter-btn:focus{
    box-shadow:0 .2rem .4rem rgba(58,59,69,.24);
    color:#fff;
    filter:brightness(.96);
    outline:0;
  }
}

/* Tablet tetap tersusun rapih tanpa memisahkan label dari field. */
@media (min-width: 768px) and (max-width: 1199.98px){
  .stok-masuk-page .card-header{
    background:#fff;
    padding:1rem !important;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
    gap:.65rem 0;
    width:100%;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .input-group-prepend{
    margin:0;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .input-group-prepend:nth-of-type(1){grid-column:1; grid-row:1;}
  .stok-masuk-page .stok-masuk-filter-toolbar > #limits{grid-column:2; grid-row:1;}
  .stok-masuk-page .stok-masuk-filter-toolbar > .input-group-prepend:nth-of-type(2){grid-column:3; grid-row:1; margin-left:.65rem;}
  .stok-masuk-page .stok-masuk-filter-toolbar > #sortBy{grid-column:4; grid-row:1;}
  .stok-masuk-page .stok-masuk-filter-toolbar > #keywords{grid-column:1 / 5; grid-row:2;}
  .stok-masuk-page .stok-masuk-filter-toolbar > .stok-masuk-filter-actions{grid-column:1 / 5; grid-row:3;}

  .stok-masuk-page .stok-masuk-filter-toolbar .input-group-text{
    align-items:center;
    background:var(--app-theme-color, #3f51b5);
    border:1px solid var(--app-theme-color, #3f51b5);
    border-radius:.25rem 0 0 .25rem;
    color:var(--app-theme-text-color, #fff);
    display:inline-flex;
    font-size:.75rem;
    font-weight:600;
    height:38px;
    padding:0 .75rem;
    white-space:nowrap;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .custom-select,
  .stok-masuk-page .stok-masuk-filter-toolbar > #keywords{
    border:1px solid #d1d3e2;
    box-shadow:none;
    font-size:.8rem;
    height:38px;
    min-width:0;
    width:100% !important;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > .custom-select{
    border-left:0;
    border-radius:0 .25rem .25rem 0;
  }

  .stok-masuk-page .stok-masuk-filter-toolbar > #keywords{
    border-radius:.25rem !important;
  }

  .stok-masuk-page .stok-masuk-filter-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
  }

  .stok-masuk-page .stok-masuk-filter-actions .stok-masuk-filter-btn{
    border:0;
    border-radius:.25rem !important;
    font-size:.8rem;
    font-weight:600;
    height:38px;
  }

  .stok-masuk-page .stok-masuk-filter-actions .clear_search{background:#ff4d4f; color:#fff;}
  .stok-masuk-page .stok-masuk-filter-actions .add_bahan{background:#2eb6e6; color:#fff;}
  .stok-masuk-page .stok-masuk-filter-actions .print_stok{background:#3f51b5; color:#fff;}
}

@media (max-width: 767.98px){
  .stok-masuk-page{padding:1.35rem .9rem 1.25rem; background:#f6f7fb;}
  .stok-masuk-page .d-sm-flex{display:block !important; margin-bottom:1rem !important;}
  .stok-masuk-page h1.h3{font-size:1.9rem; font-weight:800; line-height:1.15; letter-spacing:0; color:#273244; margin-bottom:0;}
  .stok-masuk-page .card{background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible;}
  .stok-masuk-page .card-header{background:#fff; border:1px solid #e8ebf2; border-radius:16px !important; box-shadow:0 10px 30px rgba(15,23,42,.06); margin-bottom:1rem; padding:1rem !important;}
  .stok-masuk-page .card-body{background:transparent; border:0; padding:0; overflow:visible;}
  .stok-masuk-page .card-block{padding:0;}
  .stok-masuk-page .input-group.input-group-sm{display:flex; flex-direction:column; gap:.9rem;}
  .stok-masuk-page .input-group-prepend{display:block; width:100%; margin:0;}
  .stok-masuk-page .input-group-text{display:block; width:100%; padding:0; background:transparent !important; border:0 !important; box-shadow:none !important; color:#5c6574; font-size:.86rem; font-weight:800; line-height:1.15; text-align:left; text-transform:uppercase; letter-spacing:0; margin-bottom:.55rem;}
  .stok-masuk-page .custom-select,
  .stok-masuk-page #keywords{width:100% !important; flex:0 0 100% !important; max-width:100%; height:52px; border:1px solid #d9dee9; border-radius:9px !important; font-size:1rem; color:#4a5568; background-color:#fff; padding:.7rem 1rem; box-shadow:none;}
  .stok-masuk-page #keywords{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b7280'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'%3E%3C/circle%3E%3Cpath%20d='m21%2021-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); background-position:left 1rem center; background-repeat:no-repeat; background-size:1.25rem; padding-left:3rem;}
  .stok-masuk-page #keywords::placeholder{color:#9aa3b2;}
  .stok-masuk-page .input-group-append{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; width:100%; margin-top:.1rem;}
  .stok-masuk-page .input-group-append .stok-masuk-filter-btn{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:52px; width:100%; border:0; border-radius:9px !important; box-shadow:0 8px 16px rgba(15,23,42,.12); color:#fff; font-size:.92rem; font-weight:700; line-height:1; padding:0 .55rem; white-space:nowrap;}
  .stok-masuk-page .input-group-append .stok-masuk-filter-btn i{font-size:1.05rem; line-height:1; margin:0;}
  .stok-masuk-page .input-group-append .clear_search{background:linear-gradient(180deg,#ff4247,#f02f35);}
  .stok-masuk-page .input-group-append .add_bahan{background:linear-gradient(180deg,#55aef8,#2f8de4);}
  .stok-masuk-page .input-group-append .print_stok{background:linear-gradient(180deg,#7b7b7d,#69696b);}
  .stok-masuk-page .stok-masuk-table{display:none;}
  .stok-masuk-page .stok-masuk-mobile-list{display:block;}
  .stok-masuk-page .stok-masuk-mobile-card{display:grid; grid-template-columns:54px minmax(0,1fr) 116px; gap:.85rem; align-items:center; background:#fff; border:1px solid #e8ebf2; border-radius:16px; box-shadow:0 6px 24px rgba(15,23,42,.045); padding:1rem .85rem; margin-bottom:1rem;}
  .stok-masuk-page .stok-masuk-mobile-number{width:52px; height:52px; border-radius:50%; background:#edf2fb; color:#3268c7; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:800;}
  .stok-masuk-page .stok-masuk-mobile-main{min-width:0;}
  .stok-masuk-page .stok-masuk-mobile-title{font-size:1.05rem; font-weight:800; line-height:1.18; color:#253044; margin-bottom:.55rem; word-break:break-word;}
  .stok-masuk-page .stok-masuk-mobile-label{font-size:.9rem; font-weight:500; line-height:1.25; color:#687385; margin-bottom:.35rem;}
  .stok-masuk-page .stok-masuk-mobile-value{font-size:1.05rem; font-weight:800; line-height:1.2; color:#2f67c9;}
  .stok-masuk-page .stok-masuk-mobile-actions{display:flex; flex-direction:column; gap:.55rem;}
  .stok-masuk-page .stok-masuk-mobile-btn{width:100%; min-height:48px; border:1px solid #e0e6f4; border-radius:9px; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-size:.9rem; font-weight:500; color:#445066; padding:.4rem .55rem;}
  .stok-masuk-page .stok-masuk-mobile-btn i{font-size:1.1rem;}
  .stok-masuk-page .stok-masuk-mobile-btn-detail{background:#edf3ff; color:#2f67c9; border-color:#dbe6fb;}
  .stok-masuk-page .stok-masuk-mobile-btn-print{background:#f3f1ef; color:#585858; border-color:#ebe6e1;}
  .stok-masuk-page .stok-masuk-mobile-btn[disabled]{opacity:.6;}
  .stok-masuk-page .stok-masuk-mobile-info{display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid #e8ebf2; border-radius:14px; padding:.95rem 1rem; color:#445066; font-size:1rem; font-weight:500; box-shadow:0 6px 24px rgba(15,23,42,.035);}
  .stok-masuk-page .stok-masuk-mobile-info i{color:#3268c7; font-size:1.2rem;}
  .stok-masuk-page .stok-masuk-mobile-empty{display:block; padding:1rem; text-align:center; color:#6b7280; background:#fff; border:1px solid #e8ebf2; border-radius:16px;}
  .stok-masuk-page .stok-masuk-pagination{padding-top:.35rem;}
  .stok-masuk-page .stok-masuk-pagination .tampil{display:none !important;}
}

@media (max-width: 575.98px){
  .stok-masuk-page h1.h3{font-size:1.85rem;}
  .stok-masuk-page .card-header,
  .stok-masuk-page .card-body{padding-left:0; padding-right:0;}
}

@media (max-width: 420px){
  .stok-masuk-page h1.h3{font-size:1.82rem;}
  .stok-masuk-page .custom-select,
  .stok-masuk-page #keywords{height:52px; font-size:1rem;}
}
</style>
