<div class="container-fluid stok-keluar-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"><?=$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">
			<form action="#" method="post">
				<div class="card">
					<div class="card-header pb-0">
						<div class="input-group input-group-sm stok-keluar-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_Keluar()">
								<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_Keluar()">
								<option value="ASC">ASC</option>
								<option value="DESC" selected>DESC</option>
							</select>
							<div class="input-group-prepend stok-keluar-search-label">
								<span class="input-group-text" for="keywords">Cari data</span>
							</div>
							<input type="text" id="keywords" class="form-control w-40" placeholder="Cari data" onkeyup="search_Stok_Keluar();"/>
							<div class="input-group-append stok-keluar-filter-actions">
								<button class="btn btn-danger clear_search stok-keluar-filter-btn" type="button"><i class="fa fa-times"></i> Clear</button>
								<button type="button" class="btn btn-info add_bahan stok-keluar-filter-btn" data-id="0"><i class="fa fa-plus"></i> Input</button>
								<button type='button' class='btn btn-secondary print_stok stok-keluar-filter-btn' id='print_stok_keluar' 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="dataStokKeluar">
						<div class="card-block">
							<div class="stok-keluar-info-box">
							  <i class="fa fa-info-circle"></i>
							  <div>
							    <b>Info:</b> Jika ada Order <b>Gagal Cetak</b>, <b>Paper Jam</b>, dll, input di sini agar data stok sesuai.
							  </div>
							</div>

							<table class="table table-striped table-mailcard" >
								<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 Keluar</th>
										<th class="w-8 text-right">Aksi</th>
									</tr>
								</thead>
								<tbody>
									<?php if(!empty($result)){
										$no = 1;
										$total = 0;
										foreach ($result as $row){
											
											$jml_masuk = stok_masuk($row->id);
											$jml_keluar = stok_keluar($row->id);
											$total = $jml_masuk - $jml_keluar;
											
											$disabled = '';
											if($jml_keluar <=0 ){
												$disabled = 'disabled';
											}
											
											echo "<tr><td class='text-center'>$no</td>
											<td class='pl-1'>".$row->title."</td>
											<td class='text-right'>".$jml_keluar."</td>
											<td class='text-right'>
											<div class='btn-group btn-group-sm' role='group'>
											<button type='button' class='btn btn-info btn-sm detail_bahan' data-id='".$row->id."' data-title='".$row->title."' ".$disabled."><i class='fa fa-search'></i> Detail</button>
											<button type='button' class='btn btn-secondary btn-sm flat print_stok_keluar' data-toggle='tooltip' data-id='".$row->id."' 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-keluar-mobile-list">
								<?php if(!empty($result)){
									$no = 1;
									foreach ($result as $row){
										$jml_masuk = stok_masuk($row->id);
										$jml_keluar = stok_keluar($row->id);
										$total = $jml_masuk - $jml_keluar;
										$disabled = '';
										if($jml_keluar <=0 ){
											$disabled = 'disabled';
										}
								?>
								<div class="stok-keluar-mobile-card">
									<div class="stok-keluar-mobile-top">
										<div class="stok-keluar-mobile-number"><?php echo $no; ?></div>
										<div class="stok-keluar-mobile-title"><?php echo htmlspecialchars($row->title, ENT_QUOTES, 'UTF-8'); ?></div>
										<div class="stok-keluar-mobile-stock">
											<div>Stok Keluar</div>
											<strong><?php echo $jml_keluar; ?></strong>
										</div>
									</div>
									<div class="stok-keluar-mobile-actions">
										<button type="button" class="stok-keluar-mobile-btn stok-keluar-mobile-btn-detail detail_bahan" 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-keluar-mobile-btn stok-keluar-mobile-btn-print print_stok_keluar" data-toggle="tooltip" data-id="<?php echo $row->id; ?>" data-original-title="Print PDF"><i class="fa fa-print"></i> Print</button>
									</div>
								</div>
								<?php $no++; } ?>
								<div class="stok-keluar-mobile-summary">
									<i class="fa fa-users"></i>
									<span>Menampilkan: <?php echo count($result); ?></span>
								</div>
								<?php } else { ?>
								<div class="stok-keluar-mobile-empty">Data belum ada</div>
								<?php } ?>
							</div>
							<nav aria-label="Page navigation" class="mt-2 stok-keluar-pagination">
								<?php 
									echo $this->ajax_pagination->create_links(); 
								?>
							</nav>
						</div><!-- /.card-body -->
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</form>
		</div>
	</div>
</div>
<div id="ModalBahan" 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="exampleModalScrollableTitle">Stok Keluar</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="bahan">Nama barang/jenis</label>
							<select class="form-control pakainfo select-box" id="bahan">
								<option value="">Pilih bahan</option>
								<?php foreach($bahan AS $val){ ?>
									<option value="<?=$val->id;?>"><?=$val->title;?></option>
								<?php } ?>
							</select>
						</div>
						<div class="form-group">
							<label for="total">Jumlah Stok</label>
							<div class="input-group input-group-sm">
								<input type="text" name="total" id="total" class="form-control" readonly>
								<div class="input-group-append">
									<span class="input-group-text" id="satuan"></span>
								</div>
							</div>
							
						</div>
						
						<div class="form-group">
							<label for="jumlah">Stok Keluar</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_keluar">Simpan [ctrl+s]</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</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 Keluar</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>

<div id="ModalPrintStokKeluar" 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_keluar'); ?>" 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_keluar" 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>


<input type="hidden" name="halaman" id="halaman" value="0">
<form method="POST" action="<?=base_url();?>stok/print_semua_stok_keluar" id="target_stok_keluar" target="_blank">
</form>
<script>
	$("#print_stok_keluar").click(function(e) {
		e.preventDefault();
		$( "#target_stok_keluar" ).submit();
	});
	
	$(document).on('click','.print_stok_keluar',function(e){
		e.preventDefault();
		var id = $(this).data('id');
		$('#id_stok_keluar').val(id);
		
		$('#ModalPrintStokKeluar').modal('show');
		
	});
	$("#datepicker").datepicker( {
		format: "mm-yyyy",
		viewMode: "months", 
		minViewMode: "months"
	});
	$(".select-box").chosen();
	
	$('.clear_search').on('click', function(){
		$('#keywords').val('');
		search_Stok_Keluar();
	});
	
	
	function search_Stok_Keluar(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/cariStokKeluar/'+page_num
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
			beforeSend: function(){
				$('#dataStokKeluar').loading();
			},
			success: function(html){
				$('#dataStokKeluar').html(html);
				$('#halaman').val(page_num);
				$('#dataStokKeluar').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('#dataStokKeluar').loading('stop');
			}
		});
	}
	$(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_bahan',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 keluar bahan '+ title);
		$('#ModalDetail').modal('show');
		$("#cetak").attr("href", base_url+"stok/cetak_stok_keluar/"+id+"/?type=pdf")
		$.ajax({
			url: base_url + 'stok/detail_stok_keluar',
			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');
			}
		});
	});
	$(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');
		clearform();
		$('#ModalBahan').modal('show');
		if(id==0){
            $("#type").val('add');
			return
			}else{
            $("#type").val('edit');
		}
	});
	$(document).on('change','#bahan',function(e){
		e.preventDefault();
		var id = $(this).val();
		// console.log(id);
		// return
		
		$.ajax({
			url: base_url + 'produk/edit_bahan',
			data: {type:'edit',id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				console.log(data);
				$("#bahan_id").val(data.id);
				$("#harga_beli").val(data.modal);
				$("#harga_jual").val(data.tertinggi);
				$("#id_satuan").val(data.id_satuan);
				$("#satuan").html(data.satuan);
				$("#total").val(data.total);
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				var err = xhr.responseText ;
				$('#ModalBahan').modal('hide');
				// sweet('Server!!!',err,'error','danger');
				$('body').loading('stop');
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}	
			}
		});
	});
	$("#bahan").change(function(){
		if($("#bahan").val()==''){
			$("#bahan").addClass('is-invalid');
			}else{
			$("#bahan").removeClass("is-invalid").addClass("is-valid");
		}
	});
	
	$("#jumlah").keyup(function(){
		$("#jumlah").removeClass("is-invalid").addClass("is-valid");
	});
	$("#keterangan").keyup(function(){
		$("#keterangan").removeClass("is-invalid").addClass("is-valid");
	});
	
	$(document).on('click','.save_stok_keluar',function(e){
		e.preventDefault();
		var type = $("#type").val();
		var bahan = $("#bahan").val();
		var total = angka($("#total").val());
		var jumlah = angka($("#jumlah").val());
		var keterangan = angka($("#keterangan").val());
		
		var halaman = $("#halaman").val();
		if(bahan==''){
			$("#bahan").addClass('is-invalid');
			$("#bahan").focus();
			return;
		}
		
		if(jumlah==''){
			$("#jumlah").addClass('is-invalid');
			$("#jumlah").focus();
			return;
		}
		if(keterangan==''){
			$("#keterangan").addClass('is-invalid');
			$("#keterangan").focus();
			return;
		}
		if(parseInt(jumlah) > parseInt(total)){
			showNotif('top-right','Warning stok','Stok keluar melebihi stok','warning');
			$("#jumlah").focus();
			return
		}
		$.ajax({
			url: base_url + 'stok/save_stok_keluar',
			data: {type:type,bahan:bahan,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','Stok keluar',data.msg,'success');
					$('#ModalBahan').modal('hide');
					}else{
					sweet('Peringatan!!!','Data gagal disimpan','warning','warning');
				}
				$('#confirm-delete').modal('hide');
				search_Stok_Keluar(halaman);
				$('#load-save-bahan').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('#load-save-bahan').loading('stop');
			}
		});
	});
	
	$(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_Stok_Keluar(halaman);
				$('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'));
	});
</script>
<style>
  .stok-keluar-page .stok-keluar-info-box {
    align-items: center;
    background: #f8fbff;
    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 10px;
    color: #1f2937;
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 10px 12px;
  }

  .stok-keluar-page .stok-keluar-info-box > i {
    color: #2b6cb0;
  }

  .stok-keluar-page .stok-keluar-info-box > div {
    font-size: 13px;
  }

  .stok-keluar-page .stok-keluar-mobile-list,
  .stok-keluar-page .stok-keluar-mobile-summary,
  .stok-keluar-page .stok-keluar-mobile-empty {
    display: none;
  }

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

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

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

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

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

    .stok-keluar-page .stok-keluar-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-keluar-page .stok-keluar-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-keluar-page .stok-keluar-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-keluar-page .stok-keluar-filter-toolbar > .custom-select:focus,
    .stok-keluar-page .stok-keluar-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-keluar-page .stok-keluar-filter-actions {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      gap: .5rem;
      margin-left: .5rem;
    }

    .stok-keluar-page .stok-keluar-filter-actions .stok-keluar-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-keluar-page .stok-keluar-filter-actions .clear_search {
      background: #ff4d4f;
      color: #fff;
    }

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

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

    .stok-keluar-page .stok-keluar-filter-actions .stok-keluar-filter-btn:hover,
    .stok-keluar-page .stok-keluar-filter-actions .stok-keluar-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-keluar-page .card-header {
      background: #fff;
      padding: 1rem !important;
    }

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

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

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

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

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

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

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

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

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

  @media (max-width: 767.98px) {
    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    #container-wrapper.stok-keluar-page,
    .stok-keluar-page * {
      box-sizing: border-box;
    }

    #container-wrapper.stok-keluar-page {
      background: #f7f8fb;
      color: #1f2937;
      max-width: 100%;
      padding: 1.35rem 1.1rem 1.25rem;
      overflow-x: hidden;
    }

    .stok-keluar-page > .d-sm-flex {
      display: block !important;
      margin-bottom: 1.05rem !important;
    }

    .stok-keluar-page h1.h3 {
      color: #1f2937 !important;
      font-size: 1.9rem;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.15;
      margin: 0;
    }

    .stok-keluar-page > .row {
      margin-left: 0;
      margin-right: 0;
    }

    .stok-keluar-page > .row > .col-md-12 {
      padding-left: 0;
      padding-right: 0;
    }

    .stok-keluar-page form > .card {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .stok-keluar-page .card-header {
      background: #fff;
      border: 1px solid #e8ebf2;
      border-radius: 18px !important;
      box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
      margin-bottom: 1rem;
      padding: 1.05rem !important;
    }

    .stok-keluar-page .card-header .input-group {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .9rem .65rem;
      width: 100%;
    }

    .stok-keluar-page .card-header .input-group > .input-group-prepend {
      display: block;
      margin: 0;
      width: 100%;
    }

    .stok-keluar-page .card-header .input-group > .input-group-prepend:nth-of-type(1) {
      grid-column: 1;
      grid-row: 1;
    }

    .stok-keluar-page .card-header .input-group > #limits {
      grid-column: 1;
      grid-row: 2;
    }

    .stok-keluar-page .card-header .input-group > .input-group-prepend:nth-of-type(2) {
      grid-column: 2;
      grid-row: 1;
    }

    .stok-keluar-page .card-header .input-group > #sortBy {
      grid-column: 2;
      grid-row: 2;
    }

    .stok-keluar-page .card-header .input-group > .stok-keluar-search-label {
      grid-column: 3;
      grid-row: 1;
    }

    .stok-keluar-page .card-header .input-group > #keywords {
      grid-column: 3;
      grid-row: 2;
      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 .75rem center;
      background-repeat: no-repeat;
      background-size: 1.15rem;
      padding-left: 2.45rem;
    }

    .stok-keluar-page .card-header .input-group > .stok-keluar-filter-actions {
      display: grid;
      grid-column: 1 / span 3;
      grid-row: 3;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .65rem;
      margin: 0;
      width: 100%;
    }

    .stok-keluar-page .card-header .input-group .input-group-text {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      color: #667085;
      display: block;
      font-size: .95rem;
      font-weight: 800;
      height: auto;
      letter-spacing: 0;
      line-height: 1.15;
      padding: 0;
      text-transform: none;
      width: 100%;
    }

    .stok-keluar-page .card-header .custom-select,
    .stok-keluar-page .card-header .form-control {
      background-color: #fff;
      border: 1px solid #d7dce5;
      border-radius: 9px !important;
      box-shadow: none;
      color: #1f2937;
      font-size: 1rem;
      height: 56px;
      min-width: 0 !important;
      width: 100% !important;
    }

    .stok-keluar-page .card-header .stok-keluar-filter-btn {
      align-items: center;
      border: 0;
      border-radius: 9px !important;
      box-shadow: 0 8px 16px rgba(15, 23, 42, .13);
      color: #fff;
      display: inline-flex;
      font-size: .96rem;
      font-weight: 800;
      gap: .45rem;
      height: 56px;
      justify-content: center;
      line-height: 1;
      padding: 0 .55rem;
      white-space: nowrap;
      width: 100%;
    }

    .stok-keluar-page .card-header .stok-keluar-filter-btn i {
      font-size: 1.05rem;
      margin: 0;
    }

    .stok-keluar-page .card-header .clear_search {
      background: linear-gradient(180deg, #ff4247, #f02f35);
    }

    .stok-keluar-page .card-header .add_bahan {
      background: linear-gradient(180deg, #22b8ed, #159bd7);
    }

    .stok-keluar-page .card-header .print_stok {
      background: linear-gradient(180deg, #727b88, #606a76);
    }

    .stok-keluar-page .card-body {
      background: transparent;
      border: 0;
      overflow: visible;
      padding: 0;
    }

    .stok-keluar-page .card-block {
      padding: 0;
    }

    .stok-keluar-page .stok-keluar-info-box {
      align-items: center;
      background: rgba(255, 255, 255, .72);
      border: 1px dashed #cfd6e3;
      border-radius: 16px;
      color: #1f2937;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: .8rem;
      line-height: 1.55;
      margin-bottom: 1rem;
      max-width: 100%;
      padding: 1rem 1.05rem;
    }

    .stok-keluar-page .stok-keluar-info-box > i {
      align-items: center;
      background: #2f80d1;
      border-radius: 999px;
      color: #fff;
      display: flex;
      font-size: 1.2rem;
      height: 34px;
      justify-content: center;
      width: 34px;
    }

    .stok-keluar-page .stok-keluar-info-box > div {
      font-size: .98rem;
      min-width: 0;
    }

    .stok-keluar-page #dataStokKeluar table.table-mailcard {
      display: none;
    }

    .stok-keluar-page .stok-keluar-mobile-list {
      display: block;
      max-width: 100%;
    }

    .stok-keluar-page .stok-keluar-mobile-card {
      background: #fff;
      border: 1px solid #eef2f7;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
      margin-bottom: 1rem;
      max-width: 100%;
      overflow: hidden;
      padding: 0;
    }

    .stok-keluar-page .stok-keluar-mobile-top {
      align-items: center;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 92px;
      gap: .85rem;
      padding: 1rem 1rem .95rem;
    }

    .stok-keluar-page .stok-keluar-mobile-number {
      align-items: center;
      background: #f0efff;
      border-radius: 10px;
      color: #315eaa;
      display: flex;
      font-size: 1rem;
      font-weight: 800;
      height: 52px;
      justify-content: center;
      width: 52px;
    }

    .stok-keluar-page .stok-keluar-mobile-title {
      color: #1f2937;
      font-size: 1.05rem;
      font-weight: 800;
      line-height: 1.22;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .stok-keluar-page .stok-keluar-mobile-stock {
      color: #6b7280;
      font-size: .9rem;
      font-weight: 800;
      line-height: 1.15;
      text-align: center;
    }

    .stok-keluar-page .stok-keluar-mobile-stock strong {
      color: #1f2937;
      display: block;
      font-size: 1.8rem;
      line-height: 1.05;
      margin-top: .35rem;
    }

    .stok-keluar-page .stok-keluar-mobile-actions {
      border-top: 1px solid #e5e7eb;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .8rem;
      padding: .8rem 1rem 1rem;
    }

    .stok-keluar-page .stok-keluar-mobile-btn {
      align-items: center;
      border-radius: 9px;
      display: inline-flex;
      font-size: .96rem;
      font-weight: 800;
      gap: .5rem;
      height: 46px;
      justify-content: center;
      line-height: 1;
      padding: 0 .75rem;
      width: 100%;
    }

    .stok-keluar-page .stok-keluar-mobile-btn i {
      font-size: 1.1rem;
      margin: 0;
    }

    .stok-keluar-page .stok-keluar-mobile-btn-detail {
      background: #edf4ff;
      border: 1px solid #dbe8fb;
      color: #2f72c9;
    }

    .stok-keluar-page .stok-keluar-mobile-btn-print {
      background: #f3f1ef;
      border: 1px solid #e8e4df;
      color: #5f6368;
    }

    .stok-keluar-page .stok-keluar-mobile-btn[disabled] {
      opacity: .58;
    }

    .stok-keluar-page .stok-keluar-mobile-summary {
      align-items: center;
      background: #fff;
      border: 1px solid #e8ebf2;
      border-radius: 14px;
      box-shadow: 0 6px 24px rgba(15, 23, 42, .035);
      color: #3f4755;
      display: flex;
      font-size: 1rem;
      font-weight: 700;
      gap: .7rem;
      margin-top: .25rem;
      padding: .95rem 1rem;
    }

    .stok-keluar-page .stok-keluar-mobile-summary i {
      color: #665bea;
      font-size: 1.1rem;
    }

    .stok-keluar-page .stok-keluar-mobile-empty {
      background: #fff;
      border: 1px solid #e8ebf2;
      border-radius: 14px;
      color: #6b7280;
      display: block;
      padding: 1rem;
      text-align: center;
    }

    .stok-keluar-page .stok-keluar-pagination {
      padding-top: .25rem;
    }

    .stok-keluar-page .stok-keluar-pagination .tampil {
      display: none !important;
    }
  }

  @media (max-width: 430px) {
    #container-wrapper.stok-keluar-page {
      padding-left: .9rem;
      padding-right: .9rem;
    }

    .stok-keluar-page h1.h3 {
      font-size: 1.82rem;
    }

    .stok-keluar-page .card-header .input-group {
      gap: .85rem .55rem;
    }

    .stok-keluar-page .card-header .stok-keluar-filter-btn {
      font-size: .9rem;
    }

    .stok-keluar-page .stok-keluar-mobile-top {
      grid-template-columns: 50px minmax(0, 1fr) 86px;
      gap: .75rem;
      padding-left: .85rem;
      padding-right: .85rem;
    }

    .stok-keluar-page .stok-keluar-mobile-number {
      height: 48px;
      width: 48px;
    }

    .stok-keluar-page .stok-keluar-mobile-title {
      font-size: 1rem;
    }

    .stok-keluar-page .stok-keluar-mobile-actions {
      gap: .65rem;
      padding-left: .85rem;
      padding-right: .85rem;
    }
  }
</style>
<style>.card .table td, .card .table th {padding-right: 1rem;padding-left: 1rem;}</style>
