<div class="container-fluid kas-keluar-page" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4 kas-page-heading">
		<div class="kas-page-title-wrap">
			<div>
				<h1 class="h3 mb-0 text-gray-800 kas-page-title">Kas Keluar / Pengeluaran</h1>
				<p class="kas-page-subtitle">Kelola data pengeluaran kas perusahaan</p>
			</div>
		</div>
	</div>

	<div class="card kas-filter-card">
		<div class="card-body kas-filter-header">
			<div class="kas-filter-grid">
				<div class="kas-filter-field kas-filter-sort">
					<label for="sortBy">SORT</label>
					<select id="sortBy" class="form-control custom-select" onchange="searchFilterKas()">
						<option value="DESC" selected>TERBARU</option>
						<option value="ASC">TERLAMA</option>
					</select>
				</div>

				<div class="kas-filter-field kas-filter-limit">
					<label for="limits">LIMIT</label>
					<select id="limits" name="limits" class="form-control custom-select" onchange="searchFilterKas()">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="50">50</option>
						<option value="100">100</option>
						<option value="500">500</option>
						<option value="1000">1000</option>
					</select>
				</div>

				<div class="kas-filter-field kas-filter-user">
					<label for="user">PENGGUNA</label>
					<select name="user" id="user" class="form-control custom-select" onchange="searchFilterKas()">
						<option value="0" style="font-weight:bold;border-bottom:1px solid #ddd;">PILIH</option>
						<?php  
							/* 
							 * $pilihan harus di-passing dari controller, berisi daftar user:
							 * tiap item minimal: ['id_user' => ..., 'nama_lengkap' => ...]
							 * Perilaku sama persis dengan pembelian.php:
							 * - admin/owner bisa melihat semua user, auto-select dirinya
							 * - user biasa hanya melihat dirinya sendiri (auto-select)
							 */
							if (!empty($pilihan)) {
								foreach ($pilihan as $values) {
									if ($this->session->level == 'admin' || $this->session->level == 'owner') {
										if ($this->session->idu == $values['id_user']) {
											echo '<option value="'.$values['id_user'].'" selected>'.$values['nama_lengkap'].'</option>';
										} else {
											echo '<option value="'.$values['id_user'].'">'.$values['nama_lengkap'].'</option>';
										}
									} else {
										if ($this->session->idu == $values['id_user']) {
											echo '<option value="'.$values['id_user'].'" selected>'.$values['nama_lengkap'].'</option>';
										}
									}
								}
							}
						?>
					</select>
				</div>

				<div class="kas-filter-field kas-filter-period">
					<label for="tgl">PERIODE</label>
					<div class="kas-field-icon-wrap">
						<i class="fa fa-calendar"></i>
						<input type="text" id="tgl" class="form-control date-order" name="range" onchange="searchFilterKas();"/>
					</div>
				</div>

				<div class="kas-filter-field kas-filter-search">
					<label for="keywords">Cari data</label>
					<div class="kas-field-icon-wrap">
						<i class="fa fa-search"></i>
						<input type="text" id="keywords" class="form-control" placeholder="Cari data..." onkeyup="searchFilterKas();"/>
					</div>
				</div>

				<div class="kas-filter-actions" role="group" aria-label="Aksi filter kas keluar">
					<button type="button" class="btn btn-danger btn-sm clear_kas flat kas-filter-btn kas-btn-clear" id="clear" data-toggle="tooltip" data-original-title="Clear filter"><i class="fa fa-times fa-1x"></i> <span>Clear</span></button>
					<button type="button" class="btn btn-success btn-sm flat add_kas kas-filter-btn kas-btn-add" data-toggle="tooltip" data-original-title="Tambah Kas keluar"><i class="fa fa-plus fa-1x"></i> <span>Tambah</span></button>
					<button class="btn btn-danger btn-sm print_kas kas-filter-btn kas-btn-pdf" data-url="export" type="button" data-toggle="tooltip" data-original-title="Cetak" data-placement="left"><i class="fa fa-file-pdf-o"></i> <span>PDF</span></button>
				</div>
			</div>
		</div>
	</div>

	<div class="post-list pt-0" id="dataKasKeluar"></div>
</div>

<div class="modal fade" id="ModalKas" tabindex="-1"
aria-labelledby="OpenCart-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content flat">
			<div class="modal-header">
				<div class="kas-modal-heading">
					<span class="kas-modal-icon"><i class="fa fa-money"></i></span>
					<div>
						<h5 class="modal-title">Input Kas Keluar</h5>
						<small>Lengkapi transaksi dan rincian pengeluaran kas</small>
					</div>
				</div>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
            <div class="modal-body">
				<div class="load-data-kas"></div>
            </div>
            <div class="modal-footer">
				<a href="javascript:void(0);" data-toggle="modal" data-target="#modal-shortcut" class="btn btn-light kas-modal-help mr-auto" data-url="transaksi" data-original-title="Shortcut" data-placement="top" title="Informasi shortcut">
					<span class="icon text-white-50">
						<i class="fa fa-info-circle fa-fw fa-lg"></i>
					</span>	
				</a>
				<button type="button" class="btn btn-light kas-modal-cancel" data-dismiss="modal">Batal</button>
				<button type="button" class="btn btn-primary simpan_kas" title="Simpan Kas keluar"><i class="fa fa-save mr-1"></i> Simpan Kas Keluar</button>
			</div>
		</div>
	</div>
</div>

<style>
	#ModalKas {
		padding-right: 0 !important;
	}

	.modal-backdrop.modal-backdrop-kas-keluar {
		background: #10213d;
		opacity: .64 !important;
		backdrop-filter: blur(2px);
	}

	#ModalKas .modal-dialog {
		width: calc(100% - 56px);
		max-width: 1560px;
		margin-left: auto;
		margin-right: auto;
	}

	#ModalKas > .modal-dialog > .modal-content {
		border: 0;
		border-radius: 14px !important;
		box-shadow: 0 28px 80px rgba(9, 30, 66, .32);
		overflow: hidden;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-header {
		align-items: center;
		background: linear-gradient(135deg, #1556a8 0%, #2878d0 100%);
		border: 0;
		color: #fff;
		padding: 17px 22px;
	}

	#ModalKas .kas-modal-heading {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	#ModalKas .kas-modal-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, .16);
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 10px;
		font-size: 17px;
	}

	#ModalKas .kas-modal-heading .modal-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		margin: 0 0 2px;
	}

	#ModalKas .kas-modal-heading small {
		color: rgba(255, 255, 255, .76);
		font-size: 12px;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-header .close {
		color: #fff;
		opacity: .75;
		text-shadow: none;
		transition: opacity .2s ease, transform .2s ease;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-header .close:hover {
		opacity: 1;
		transform: rotate(90deg);
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-body {
		background: #f7f9fc;
		padding: 22px 24px;
	}

	#ModalKas #tambah-kas-keluar .form-group {
		margin-bottom: 15px;
	}

	#ModalKas #tambah-kas-keluar label {
		color: #4b596b;
		font-size: 13px;
		font-weight: 600;
		margin-bottom: 6px;
	}

	#ModalKas #tambah-kas-keluar .form-control,
	#ModalKas #tambah-kas-keluar .custom-select {
		border-color: #d7e0eb;
		border-radius: 7px;
		box-shadow: none;
		min-height: 38px;
		transition: border-color .2s ease, box-shadow .2s ease;
	}

	#ModalKas #tambah-kas-keluar .form-control:focus,
	#ModalKas #tambah-kas-keluar .custom-select:focus {
		border-color: #4c91df;
		box-shadow: 0 0 0 3px rgba(40, 120, 208, .12);
	}

	#ModalKas #tambah-kas-keluar #table-kas {
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 9px;
		box-shadow: 0 3px 12px rgba(15, 42, 74, .05);
		margin-bottom: 0;
		overflow: hidden;
	}

	#ModalKas #tambah-kas-keluar #table-kas thead {
		background: #eef3f9;
		color: #435167;
		font-size: 13px;
		font-weight: 600;
	}

	#ModalKas #tambah-kas-keluar #table-kas td {
		border-color: #e6ebf2;
		vertical-align: middle;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-footer {
		background: #fff;
		border-top: 1px solid #e4eaf1;
		padding: 14px 22px;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-footer .btn {
		border-radius: 7px;
		font-weight: 600;
		padding: 8px 15px;
		transition: transform .15s ease, box-shadow .15s ease;
	}

	#ModalKas > .modal-dialog > .modal-content > .modal-footer .btn:hover {
		transform: translateY(-1px);
	}

	#ModalKas .simpan_kas {
		background: #2878d0;
		border-color: #2878d0;
		box-shadow: 0 5px 14px rgba(40, 120, 208, .22);
	}

	#ModalKas .kas-modal-cancel,
	#ModalKas .kas-modal-help {
		border: 1px solid #d7e0eb;
		color: #5b6777;
	}

	#ModalKas .kas-modal-help {
		width: 40px;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#ModalKas .kas-modal-help .icon {
		color: #64748b !important;
	}

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

		#ModalKas > .modal-dialog > .modal-content > .modal-body {
			padding: 18px 14px;
		}

		#ModalKas > .modal-dialog > .modal-content > .modal-header,
		#ModalKas > .modal-dialog > .modal-content > .modal-footer {
			padding-left: 16px;
			padding-right: 16px;
		}
	}
</style>

<div class="modal fade modal-fullscreen-xl" id="OpenDetail" tabindex="-1"
aria-labelledby="OpenCart-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content flat">
            <div class="modal-header py-1 flat bg-cart" >
                <h5 class="modal-title text-white">DETAIL KAS KELUAR</h5>
			</div>
            <div class="modal-body">
				<div class="load-detail-kas"></div>
			</div>
            <div class="modal-footer">
                <button type="button" data-toggle='tooltip' data-placement="top" title="Tutup" class="btn btn-danger btn-sm flat" data-dismiss="modal">TUTUP</button>
                
                <a href="javascript:void(0);"  data-toggle="modal" data-target="#modal-shortcut"  class="btn btn-secondary btn-sm mr-auto flat" data-url="transaksi" data-toggle="tooltip" data-original-title="Shortcut" data-placement="top">
					<span class="icon text-white-50">
						<i class="fa fa-info-circle fa-fw fa-lg"></i>
					</span>	
				</a>
				
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="OpenLampiranKasKeluar" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content flat">
			<div class="modal-header py-1 flat bg-cart">
				<h5 class="modal-title text-white">LAMPIRAN BUKTI NOTA</h5>
				<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body p-2">
				<div id="lampiranKasContainer" class="lampiran-kas-container text-center"></div>
			</div>
		</div>
	</div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content flat">
			<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-kas">
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary rounded-0" data-dismiss="modal" type="button">Batal</button> 
				<button class="btn btn-danger rounded-0 hapus_kas" type="button">YA</button> 
			</div>
		</div>
	</div>
</div>

<form id="form_print_kas" action="<?=base_url();?>kas_keluar/print_pdf" method="post" target="_blank">
	<input type="hidden" name="tanggal" id="tanggal_print">
</form>

<script>
	$(document).on('click', '.lihat_lampiran_kas', function(e) {
		e.preventDefault();
		var fileUrl = $(this).data('url');
		var $container = $('#lampiranKasContainer');

		if (!fileUrl) {
			sweet('Peringatan!!!', 'Lampiran tidak ditemukan', 'warning', 'warning');
			return;
		}

		var isImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(fileUrl);
		var viewer;

		if (isImage) {
			viewer = $('<img>', {
				src: fileUrl,
				alt: 'Lampiran Bukti Nota',
				class: 'img-fluid'
			});
		} else {
			viewer = $('<iframe>', {
				src: fileUrl,
				class: 'lampiran-kas-frame',
				frameborder: 0
			});
		}

		$container.empty().append(viewer);
		$('#OpenLampiranKasKeluar').modal('show');
	});

	$('#OpenLampiranKasKeluar').on('hidden.bs.modal', function() {
		$('#lampiranKasContainer').empty();
	});

	$(document).on('click','.print_kas',function(e){
		e.preventDefault();
		
		var total_u = $("#subtotal").val();
		var tgl = $("#tgl").val();
		var sampai = $("#tanggal").val();
		var user = $("#user").val(); // tersedia setelah kita tambahkan dropdown user
		$("#tanggal_print").val(tgl);
		
		if(total_u==0){
			sweet('Peringatan!!!','Maaf total masih kosong','warning','warning');
		}else{
			$("#form_print_kas").submit();
		}
	});

	$('.date-order').daterangepicker({
		opens: 'right',
		ranges: {
			'Hari ini': [moment(), moment()],
			'Bulan ini': [moment().startOf('month'), moment()],
			'Tahun ini': [moment().startOf('year'), moment()],
			'7 Hari Terakhir': [moment().subtract('days', 6), moment()],
			'30 Hari Terakhir': [moment().subtract('days', 29), moment()],
		},
		"dateLimit": {"days": 365},
		showDropdowns: true,
		"linkedCalendars": false,
		"startDate": tgl_awal,
		"endDate": end,
		"maxDate": end,
		locale: {
			customRangeLabel: 'Pilih Tanggal',
			format: 'DD/MM/YYYY',
			applyLabel: 'Pilih',
			separator: " - ",
			"monthNames": [
				"Januari","Februari","Maret","April","Mei","Juni",
				"Juli","Agustus","September","Oktober","November","Desember"
			],
		}
	},	function(startDate, endDate, label) {
		start = startDate.format('DD-MM-YYYY');
		end = endDate.format('DD-MM-YYYY');
		current_url = document.location.href;
		new_url = new URL(current_url);
		new_url.searchParams.set('daterange', start + ' - ' + end);
		history.pushState({}, null, new_url);
	});
	 
	$(document).ready(function() {
		searchFilterKas();
	});
	
	function searchFilterKas(path) {
		path = path ? path : 0;
		var trx = $("#trx").val();
		var LITERALS = $("#keywords").val();
		var sortBy = $("#sortBy").val();
		var limits = $("#limits").val();
		var tgl = $("#tgl").val();
		var user = $("#user").val(); // <-- TAMBAHAN: kirim user ke server (seperti pembelian.php)

		var param = base_url + "kas_keluar/ajaxKasKeluar/" + path;
		$.ajax({
			type : "POST",
			url : param,
			data : {
				page : path,
				keywords : LITERALS,
				sortBy : sortBy,
				limits : limits,
				trx : trx,
				tgl : tgl,
				user: user // <-- TAMBAHAN
			},
				beforeSend: function() {
				$("body").loading();
			},
			success : function(htmlExercise) {
				$("#dataKasKeluar").html(htmlExercise);
				$("body").loading('stop');
			},
			error : function(res, status, httpMessage) {
				sweet("Peringatan!!!", httpMessage, "warning", "warning");
				$("body").loading('stop');
			}
		});
	}
	
	$(document).on('click','.clear_kas',function(e){
		searchFilterKas()
	})

	$('#ModalKas').off('.kasKeluarOverlay');
	$('#ModalKas').on('show.bs.modal.kasKeluarOverlay', function(){
		setTimeout(function(){
			$('.modal-backdrop').last().addClass('modal-backdrop-kas-keluar');
		}, 0);
	});
	$('#ModalKas').on('shown.bs.modal.kasKeluarOverlay', function(){
		$(this).find('#dari_kas').focus();
	});
	$('#ModalKas').on('hidden.bs.modal.kasKeluarOverlay', function(){
		$('.modal-backdrop-kas-keluar').remove();
	});

	$(document).on('click','.add_kas',function(e){
		e.preventDefault();
		var id = $(this).attr('data-id');
		if(id==0){
            $("#type").val('add');
		}else{
            $("#type").val('edit');
		}
		$.ajax({
			url: base_url + 'kas_keluar/load_form',
			data: {id:id},
			method: 'POST',
			dataType:'html',
			beforeSend: function(){
				$("body").loading({zIndex:1060});
				$(".load-data-kas").empty();
			},
			success: function(data) {
				$('#ModalKas').modal({backdrop: 'static', keyboard: false});
				$(".load-data-kas").html(data);
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
				}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	
	$(document).on('click','.simpan_kas',function(e){
		e.preventDefault();
		
		var saldo_kas = angka($('#saldo_kas').val());
		var jumlah_kas = angka($('#jumlah_kas').val());
		
		if(parseInt(jumlah_kas) > parseInt(saldo_kas)){
			showNotif('top-right','Peringatan!!!','Maaf jumlah kas kurang','warning');
			return;
		}
		
		if($('#dari_kas').val()==''){
			showNotif('top-right','Peringatan!!!','Akun kas keluar harus diisi','warning');
			$('#dari_kas').focus();
			return;
		}
		
		if(angka($('#saldo_kas').val())=='0'){
			showNotif('top-right','Peringatan!!!','Saldo kas kosong','warning');
			return;
		}
		
		if($('#tanggal_kas').val()==''){
			showNotif('top-right','Peringatan!!!','Tanggal harus diisi','warning');
			$('#tanggal_kas').focus();
			return;
		}
		if($('#keterangan_kas').val()==''){
			showNotif('top-right','Peringatan!!!','Keterangan harus diisi','warning');
			$('#keterangan_kas').focus();
			return;
		}
		if(angka($('#jumlah_kas').val())==''){
			showNotif('top-right','Peringatan!!!','Jumlah Kas keluar harus diisi','warning');
			$('#jumlah_kas').focus();
			return;
		}
		var readersLength = $("#table-kas > tbody").children().length;
		var rr = 0;
		for (; rr < readersLength; rr++) {
			if ($("#idAkun_" + rr).val() == "") {
				showNotif("top-right", "Peringatan!!!", "Kode akun masih kosong", "warning");
				$("#idAkun_" + rr).focus();
				return;
			}
			
			if ($("#keterangan_" + rr).val() == "") {
				showNotif("top-right", "Peringatan!!!", "Keterangan masih kosong", "warning");
				$("#keterangan_" + rr).focus();
				return;
			}
			if ($("#jumlah_" + rr).val() == "") {
				showNotif("top-right", "Peringatan!!!", "Jumlah masih kosong", "warning");
				$("#jumlah_" + rr).focus();
				return;
			}
		}
		// [EDIT] Kirim form + file menggunakan FormData (bukti nota kas keluar)
			var formData = new FormData(document.getElementById('form-add-kas'));
			$.ajax({
				url: base_url + 'kas_keluar/simpan_kas_keluar',
				data: formData,
				method: 'POST',
				dataType:'json',
				processData: false, // [ADD] wajib untuk FormData
				contentType: false, // [ADD] wajib untuk FormData
				beforeSend: function(){
				$("body").loading({zIndex:1060});
			},
			success: function(data) {
				if(data.status==true){
					searchFilterKas();
					sweet('Sukses!!!',data.msg,'success','success');
					$('#ModalKas').modal('hide');
				}else{
					sweet('Peringatan!!!','Data gagal disimpan','warning','warning');
				}
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
				}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	
	function MathKas()
	{
		var total = 0;
		$("#table-kas .jumlah").each(function() {
			total += parseInt(angka($(this).val()), 10) || 0;
		});
		document.getElementById("jumlah_kas").value = formatMoney(total, 0, "Rp.");
	}
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus-kas').val($(e.relatedTarget).data('id'));
	});
	
	$(document).on('click','.hapus_kas',function(e){
		e.preventDefault();
		var id = $("#data-hapus-kas").val();
		$.ajax({
			url: base_url + 'kas_keluar/hapus_kas',
			data: {type:'hapus',id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				if(data.status==true){
					showNotif('bottom-right','Hapus data',data.msg,'success');
				}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				$('#confirm-delete').modal('hide');
				searchFilterKas();
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
				}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}	
		});
	});
</script>

<style>
	.btn-light {
		color: #3a3b45;
		padding:2px 5px;
		background-color: #fff;
		border-color: #e3eaef;
		border-radius: 0 !important;
	}
	.bs-searchbox .form-control {
		padding: 2px 8px;
		border-radius: 0 !important;
	}
	.lampiran-kas-container {
		min-height: 65vh;
	}
	.lampiran-kas-frame {
		width: 100%;
		height: 70vh;
	}
</style>

<style>
	.kas-keluar-page,
	.kas-keluar-page * {
		box-sizing: border-box;
	}
	#container-wrapper.kas-keluar-page {
		--kas-text: #172033;
		--kas-muted: #647085;
		--kas-line: #e6ebf2;
		--kas-soft: #f8fbff;
		--kas-shadow: 0 14px 32px rgba(18, 38, 63, .08);
		padding-top: 1.95rem;
		color: var(--kas-text);
	}
	.kas-keluar-page .kas-page-heading {
		margin-bottom: 1.45rem !important;
	}
	.kas-page-title-wrap {
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.kas-page-title-icon {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		background: linear-gradient(135deg, #6d5dfc, #5143d9);
		color: #fff;
		box-shadow: 0 10px 22px rgba(81, 67, 217, .22);
		font-size: 19px;
	}
	.kas-keluar-page .kas-page-title {
		font-size: 1.75rem;
		line-height: 1.2;
		font-weight: 700;
		letter-spacing: 0;
		color: #182236 !important;
		margin: 0;
	}
	.kas-page-subtitle {
		margin: .42rem 0 0;
		color: var(--kas-muted);
		font-size: .92rem;
		line-height: 1.35;
	}
	.kas-filter-card {
		border: 1px solid #edf1f7;
		border-radius: 12px;
		overflow: visible;
		background: #fff;
		box-shadow: var(--kas-shadow);
		margin-bottom: 1.55rem;
	}
	.kas-filter-header {
		background: #fff;
		border-bottom: 0;
		padding: 1.25rem 1.35rem;
	}
	.kas-filter-grid {
		display: grid;
		grid-template-columns: minmax(150px, .9fr) minmax(110px, .65fr) minmax(210px, 1.15fr) minmax(250px, 1.45fr) minmax(220px, 1.15fr) auto;
		gap: 1rem;
		align-items: end;
	}
	.kas-filter-field {
		min-width: 0;
	}
	.kas-filter-field label {
		display: block;
		margin: 0 0 .42rem;
		font-size: .8rem;
		font-weight: 600;
		color: #5f6b80;
		letter-spacing: 0;
	}
	.kas-filter-field .form-control,
	.kas-filter-field .custom-select,
	.kas-field-icon-wrap .form-control {
		width: 100%;
		height: 46px;
		border: 1px solid #dce4ef;
		border-radius: 6px;
		background-color: #fff;
		color: #253047;
		font-size: .93rem;
		box-shadow: none;
	}
	.kas-filter-field .form-control:focus,
	.kas-filter-field .custom-select:focus,
	.kas-field-icon-wrap .form-control:focus {
		border-color: #b8c7dd;
		box-shadow: 0 0 0 .16rem rgba(37, 99, 235, .07);
	}
	.kas-field-icon-wrap {
		position: relative;
	}
	.kas-field-icon-wrap > i {
		position: absolute;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: #516078;
		font-size: 14px;
		z-index: 2;
		pointer-events: none;
	}
	.kas-field-icon-wrap .form-control {
		padding-left: 2.8rem;
	}
	.kas-filter-search .kas-field-icon-wrap > i {
		left: auto;
		right: 1rem;
	}
	.kas-filter-search .kas-field-icon-wrap .form-control {
		padding-left: .95rem;
		padding-right: 2.8rem;
	}
	.kas-filter-actions {
		display: flex;
		align-items: end;
		gap: .75rem;
		min-width: 0;
	}
	.kas-filter-actions .kas-filter-btn {
		height: 46px;
		border: 0;
		border-radius: 6px !important;
		padding: 0 1.1rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		font-weight: 700;
		font-size: .88rem;
		white-space: nowrap;
		box-shadow: 0 8px 14px rgba(15, 23, 42, .10);
	}
	.kas-btn-clear,
	.kas-btn-pdf {
		background: linear-gradient(135deg, #ff4054, #f51f32) !important;
		color: #fff !important;
	}
	.kas-btn-add {
		background: linear-gradient(135deg, #35ba4b, #269b39) !important;
		color: #fff !important;
	}

	/* Toolbar desktop/tablet mengikuti gaya halaman Kategori Produk */
	@media (min-width: 769px) {
		.kas-filter-header {
			padding: .75rem 1rem;
		}

		.kas-filter-grid {
			align-items: center;
			gap: .5rem;
		}

		.kas-filter-sort,
		.kas-filter-limit,
		.kas-filter-user,
		.kas-filter-period {
			display: flex;
			align-items: stretch;
		}

		.kas-filter-sort > label,
		.kas-filter-limit > label,
		.kas-filter-user > label,
		.kas-filter-period > label {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 36px;
			margin: 0;
			padding: .25rem .5rem;
			background: var(--app-theme-color, #3f51b5);
			border: 1px solid var(--app-theme-color, #3f51b5);
			border-radius: .2rem 0 0 .2rem;
			color: var(--app-theme-text-color, #fff);
			font-size: .8rem;
			font-weight: 500;
			line-height: 1.5;
			white-space: nowrap;
			box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
		}

		.kas-filter-sort > .form-control,
		.kas-filter-limit > .form-control,
		.kas-filter-user > .form-control,
		.kas-filter-period > .kas-field-icon-wrap {
			flex: 1 1 auto;
			min-width: 0;
		}

		.kas-filter-sort > .form-control,
		.kas-filter-limit > .form-control,
		.kas-filter-user > .form-control,
		.kas-filter-period .form-control {
			height: 36px;
			min-height: 36px;
			border-color: #d1d3e2;
			border-left: 0;
			border-radius: 0 .2rem .2rem 0;
			font-size: .875rem;
		}

		.kas-filter-period .kas-field-icon-wrap {
			height: 36px;
		}

		.kas-filter-period .kas-field-icon-wrap > i {
			left: .75rem;
			font-size: .8rem;
		}

		.kas-filter-period .kas-field-icon-wrap .form-control {
			padding-left: 2.1rem;
		}

		.kas-filter-search > label {
			display: none;
		}

		.kas-filter-search .kas-field-icon-wrap,
		.kas-filter-search .kas-field-icon-wrap .form-control {
			height: 36px;
			min-height: 36px;
		}

		.kas-filter-search .kas-field-icon-wrap .form-control {
			border-color: #d1d3e2;
			border-radius: .2rem;
			font-size: .875rem;
		}

		.kas-filter-actions {
			align-items: center;
			gap: .5rem;
		}

		.kas-filter-actions .kas-filter-btn {
			height: 36px;
			min-height: 36px;
			padding: .25rem .65rem;
			border: 1px solid transparent;
			border-radius: .2rem !important;
			font-size: .875rem;
			font-weight: 600;
			line-height: 1.5;
			box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .2);
		}

		.kas-btn-clear {
			background: #fc544b !important;
			border-color: #fc544b !important;
		}

		.kas-btn-add {
			background: #3abaf4 !important;
			border-color: #3abaf4 !important;
		}

		.kas-btn-pdf {
			background: #fc544b !important;
			border-color: #fc544b !important;
		}

		.kas-filter-actions .kas-filter-btn:hover,
		.kas-filter-actions .kas-filter-btn:focus {
			filter: brightness(.96);
			box-shadow: 0 .2rem .4rem rgba(58, 59, 69, .28);
		}
	}

	@media (max-width: 1399.98px) and (min-width: 992px) {
		.kas-filter-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.kas-filter-actions {
			justify-content: flex-start;
		}
	}

	@media (max-width: 991.98px) and (min-width: 769px) {
		.kas-filter-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.kas-filter-period,
		.kas-filter-search {
			grid-column: span 1;
		}
		.kas-filter-actions {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 768px) {
		html,
		body {
			max-width: 100%;
			overflow-x: hidden;
		}
		body {
			background: #f8fafc;
		}
		#container-wrapper.kas-keluar-page {
			max-width: 100%;
			padding-left: 14px !important;
			padding-right: 14px !important;
			padding-top: 18px;
			padding-bottom: 24px;
			background: #f8fafc;
			overflow-x: hidden;
		}
		.kas-keluar-page .kas-page-heading {
			margin-bottom: 16px !important;
		}
		.kas-keluar-page .kas-page-title-wrap {
			width: 100%;
			gap: 14px;
		}
		.kas-keluar-page .kas-page-title-icon {
			flex: 0 0 46px;
			width: 46px;
			height: 46px;
			border-radius: 12px;
			font-size: 20px;
		}
		.kas-keluar-page .kas-page-title {
			font-size: 24px;
			line-height: 1.25;
			font-weight: 700;
			letter-spacing: -.02em;
			color: #1f2433 !important;
			margin: 0;
		}
		.kas-keluar-page .kas-filter-card {
			background: #fff;
			border: 0;
			border-radius: 18px;
			box-shadow: 0 10px 28px rgba(15, 23, 42, .09);
			margin-bottom: 16px;
			overflow: visible;
		}
		.kas-keluar-page .kas-filter-header {
			padding: 16px !important;
			border: 0;
			background: transparent;
		}
		.kas-keluar-page .kas-filter-grid {
			display: grid;
			grid-template-columns: repeat(6, minmax(0, 1fr));
			gap: 14px 12px;
			align-items: end;
			width: 100%;
		}
		.kas-keluar-page .kas-filter-sort,
		.kas-keluar-page .kas-filter-limit,
		.kas-keluar-page .kas-filter-user {
			grid-column: span 2;
		}
		.kas-keluar-page .kas-filter-period,
		.kas-keluar-page .kas-filter-search {
			grid-column: span 3;
		}
		.kas-keluar-page .kas-filter-actions {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 12px;
			width: 100%;
			margin-top: 2px;
		}
		.kas-keluar-page .kas-filter-field label {
			font-size: 14px;
			line-height: 1.2;
			font-weight: 700;
			color: #1f2433;
			margin-bottom: 9px;
		}
		.kas-keluar-page .kas-filter-field .form-control,
		.kas-keluar-page .kas-filter-field .custom-select,
		.kas-keluar-page .kas-field-icon-wrap .form-control {
			height: 54px;
			min-height: 54px;
			border: 1px solid #d7dce5;
			border-radius: 9px !important;
			background-color: #fff;
			font-size: 15.5px;
			line-height: 1.2;
			color: #1f2433;
			box-shadow: none !important;
			appearance: auto;
		}
		.kas-keluar-page .kas-filter-field select.form-control,
		.kas-keluar-page .kas-filter-field select.custom-select {
			padding-left: 14px;
			padding-right: 28px;
		}
		.kas-keluar-page .kas-field-icon-wrap > i {
			left: 16px;
			font-size: 17px;
			color: #30364a;
		}
		.kas-keluar-page .kas-field-icon-wrap .form-control {
			padding-left: 46px;
			padding-right: 12px;
		}
		.kas-keluar-page .kas-filter-actions .kas-filter-btn {
			width: 100%;
			height: 52px;
			min-height: 52px;
			border-radius: 9px !important;
			padding: 0 10px;
			font-size: 16px;
			line-height: 1;
			font-weight: 700;
			letter-spacing: .01em;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			box-shadow: 0 10px 18px rgba(15, 23, 42, .12);
		}
		.kas-keluar-page .kas-filter-actions .kas-filter-btn i {
			font-size: 18px;
			line-height: 1;
		}
		.kas-keluar-page #dataKasKeluar {
			max-width: 100%;
			overflow-x: hidden;
		}
	}

	@media (max-width: 430px) {
		#container-wrapper.kas-keluar-page {
			padding-left: 12px !important;
			padding-right: 12px !important;
		}
		.kas-keluar-page .kas-page-title {
			font-size: 23px;
		}
		.kas-keluar-page .kas-filter-header {
			padding: 14px !important;
		}
		.kas-keluar-page .kas-filter-grid {
			gap: 13px 10px;
		}
		.kas-keluar-page .kas-filter-actions {
			gap: 10px;
		}
		.kas-keluar-page .kas-filter-actions .kas-filter-btn {
			font-size: 15px;
		}
	}

	@media (max-width: 374px) {
		.kas-keluar-page .kas-page-title {
			font-size: 22px;
		}
		.kas-keluar-page .kas-filter-field label {
			font-size: 13px;
		}
		.kas-keluar-page .kas-filter-field .form-control,
		.kas-keluar-page .kas-filter-field .custom-select,
		.kas-keluar-page .kas-field-icon-wrap .form-control {
			font-size: 14px;
			height: 52px;
			min-height: 52px;
		}
		.kas-keluar-page .kas-filter-actions .kas-filter-btn {
			font-size: 14px;
			gap: 6px;
			padding: 0 6px;
		}
	}
</style>
