<div class="container-fluid sales-report-page" id="container-wrapper">
	<div class="pj-page-heading mb-4">
		<h1 class="h3 mb-1 text-gray-800">Laporan Omset Penjualan</h1>
		<p class="pj-page-subtitle mb-0">Pantau jumlah penjualan, pemakaian bahan, dan omset dalam satu laporan.</p>
		<!--ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item">Laporan</li>
			<li class="breadcrumb-item active" aria-current="page">penjualan</li>
		</ol-->
	</div>

	<div class="row">
		<div class="col-12">
			<!-- Tabs on Plain Card -->
			<div class="card card-nav-tabs card-plain pj-report-card">
				<div class="card-header pj-header">
  <div class="pj-header__inner">

    <!-- NAV TABS -->
    <div class="pj-tabs">
      <div class="nav-tabs-navigation">
        <div class="nav-tabs-wrapper">
          <ul class="nav nav-tabs tabs-scroll pj-tabs__list" data-tabs="tabs" id="tab_penjualan">
            <li class="nav-item">
              <a class="nav-link active" href="#produk" data-toggle="tab">Semua Produk</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#kategori" data-toggle="tab">Semua Kategori</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#grup" data-toggle="tab">Filter Produk Per Kategori</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#bahan" data-toggle="tab">Semua Bahan</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- TOOLS: PRINT + DATE RANGE -->
    <div class="pj-tools cetak_laporan" role="toolbar" aria-label="Toolbar cetak & rentang tanggal">
      <button type="button"
              class="btn btn-primary btn-sm pj-tools__btn"
              id="cetak_laporan"
              aria-label="Cetak laporan (PDF)"
              title="Cetak laporan (PDF)">
        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
        <span class="pj-tools__btnText">Print</span>
      </button>

      <!-- NOTE: tetap gunakan id=report_penjualan agar JS lama tetap bekerja -->
      <div id="report_penjualan"
           class="pj-date"
           role="button"
           tabindex="0"
           aria-label="Pilih rentang tanggal laporan"
           title="Pilih rentang tanggal laporan">
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <span class="pj-date__text"></span>
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
    </div>

  </div>
</div>


				<div class="card-body">
					<div class="tab-content">

						<!-- TAB: PRODUK -->
						<div class="tab-pane active" id="produk">
							<div class="row align-items-center mb-2">
								<div class="col-12 col-md-6">
									<div class="input-group input-group-sm sort-wrapper">
										<div class="input-group-prepend">
											<span class="input-group-text">Urutkan</span>
										</div>
										<select id="sort_produk" class="form-control custom-select">
											<option value="">Default (server)</option>
											<option value="omzet_desc">Omzet/Omset: besar → kecil</option>
											<option value="omzet_asc">Omzet/Omset: kecil → besar</option>
											<option value="meter_desc">Total meter: besar → kecil</option>
											<option value="meter_asc">Total meter: kecil → besar</option>
										</select>
									</div>
								</div>
							</div>
							<div id="dataProduk"></div>
						</div>

						<!-- TAB: KATEGORI -->
						<div class="tab-pane" id="kategori">
							<div class="row align-items-center mb-2">
								<div class="col-12 col-md-6">
									<div class="input-group input-group-sm sort-wrapper">
										<div class="input-group-prepend">
											<span class="input-group-text">Urutkan</span>
										</div>
										<select id="sort_kategori" class="form-control custom-select">
											<option value="">Default (server)</option>
											<option value="omzet_desc">Omzet/Omset: besar → kecil</option>
											<option value="omzet_asc">Omzet/Omset: kecil → besar</option>
											<option value="meter_desc">Total meter: besar → kecil</option>
											<option value="meter_asc">Total meter: kecil → besar</option>
										</select>
									</div>
								</div>
							</div>
							<div id="dataKategori"></div>
						</div>

						<!-- TAB: GRUP -->
						<div class="tab-pane" id="grup">
							<div class="row align-items-center mb-2">
								<div class="col-12 col-lg-7">
									<div class="input-group input-group-sm mb-2">
										<div class="input-group-prepend">
											<span class="input-group-text" for="sortBy">Kategori</span>
										</div>
										<select id="jenis_grup" name="jenis_grup[]" class="form-control custom-select2 w-80px"
											onchange="search_LaporanGrup()" multiple="multiple" data-allow-clear="1">
											<?php foreach($jenis AS $val){
												echo '<option value="'.$val->id_jenis.'">'.$val->jenis_cetakan.'</option>';
											} ?>
										</select>
									</div>
								</div>
								<div class="col-12 col-lg-5">
									<div class="input-group input-group-sm sort-wrapper">
										<div class="input-group-prepend">
											<span class="input-group-text">Urutkan</span>
										</div>
										<select id="sort_grup" class="form-control custom-select">
											<option value="">Default (server)</option>
											<option value="omzet_desc">Omzet/Omset: besar → kecil</option>
											<option value="omzet_asc">Omzet/Omset: kecil → besar</option>
											<option value="meter_desc">Total meter: besar → kecil</option>
											<option value="meter_asc">Total meter: kecil → besar</option>
										</select>
									</div>
								</div>
							</div>
							<div id="dataGrup"></div>
						</div>

						<!-- TAB: BAHAN -->
						<div class="tab-pane" id="bahan">
							<div class="row align-items-center mb-2">
								<div class="col-12 col-md-6">
									<div class="input-group input-group-sm sort-wrapper">
										<div class="input-group-prepend">
											<span class="input-group-text">Urutkan</span>
										</div>
										<select id="sort_bahan" class="form-control custom-select">
											<option value="">Default (server)</option>
											<option value="omzet_desc">Omzet/Omset: besar → kecil</option>
											<option value="omzet_asc">Omzet/Omset: kecil → besar</option>
											<option value="meter_desc">Total meter: besar → kecil</option>
											<option value="meter_asc">Total meter: kecil → besar</option>
										</select>
									</div>
								</div>
							</div>
							<div id="dataBahan"></div>
						</div>

					</div>
				</div>
			</div>
			<!-- End Tabs on plain Card -->
		</div>
	</div>
</div>

<form method="POST" action="<?=base_url();?>laporan/cetak_laporan_penjualan" id="target" target="_blank">
	<input type="hidden" name="startdate" id="startdate" readonly  />
	<input type="hidden" name="enddate" id="enddate" readonly />
	<input type="hidden" name="jenis" id="jenis" readonly />
	<input type="hidden" name="id_jenis" id="id_jenis" readonly />
</form>

<script>
	var awal = '<?=$dari;?>';
	var dari = start.format(awal);
	var sampai = end.format('DD/MM/YYYY');
</script>

<script>
  // Hanya membuat jika belum ada (tidak menimpa implementasi asli, jika ada)
  window.searchFilter = window.searchFilter || function(termOrInput, tableSelector) {
    try {
      // Fallback sederhana: filter baris tabel mengandung teks
      var q = '';
      if (typeof termOrInput === 'string') {
        q = termOrInput;
      } else if (termOrInput && termOrInput.value !== undefined) {
        q = termOrInput.value;
      } else if (window.jQuery && termOrInput && termOrInput.jquery) {
        q = termOrInput.val();
      }
      q = (q || '').toString().toLowerCase();

      if (!window.jQuery) return; // tidak ada jQuery, cukup diam
      var $ = window.jQuery;
      var $table = tableSelector ? $(tableSelector) : $('.table:visible').first();
      if (!$table.length) return;

      $table.find('tbody tr').each(function () {
        var show = $(this).text().toLowerCase().indexOf(q) > -1;
        $(this).toggle(show);
      });
    } catch (err) {
      // Jangan biarkan error menghentikan script lain
      console.warn('searchFilter fallback warning:', err);
    }
  };
</script>



<?php $this->RenderScript[] = function() { ?>
<script>
	/* ===========================================================
	   RESPONSIVE + SORT UTILITIES (tidak ubah endpoint/logic)
	   =========================================================== */

	/* --- Wrap table jadi responsif otomatis (mobile horizontal scroll) --- */
	function ensureResponsiveTables(containerSelector){
		const container = document.querySelector(containerSelector);
		if(!container) return;
		container.querySelectorAll('table').forEach(function(tbl){
			if (!tbl.closest('.table-responsive')) {
				const wrap = document.createElement('div');
				wrap.className = 'table-responsive';
				tbl.parentNode.insertBefore(wrap, tbl);
				wrap.appendChild(tbl);
			}
		});
	}

	/* --- Sorting (tetap seperti versi fix sebelumnya) --- */
	function getMainHeaderRow(table){
		const rows = table.querySelectorAll('thead tr');
		if(!rows.length) return null;
		let best = rows[0], max = 0;
		rows.forEach(r => { const c = r.querySelectorAll('th,td').length; if(c > max){ max = c; best = r; }});
		return best;
	}
	function findColumnIndexByHeader(table, keywords = []) {
		const headerRow = getMainHeaderRow(table);
		if (!headerRow) return -1;
		const ths = headerRow.querySelectorAll('th,td');
		const keys = keywords.map(k => k.toLowerCase());
		for (let i = 0; i < ths.length; i++) {
			const txt = (ths[i].innerText || ths[i].textContent || '').toLowerCase().trim();
			if (keys.some(k => txt.includes(k))) return i;
		}
		return -1;
	}
	function parseNumberLike(str) {
		if (str == null) return 0;
		let s = ('' + str).trim();
		s = s.replace(/[^0-9\.\,\-]/g, '');
		s = s.replace(/\.(?=\d{3}(\D|$))/g, '');
		s = s.replace(/,/g, '.');
		if (s === '' || s === '-' || s === '--') return 0;
		const n = parseFloat(s);
		return isNaN(n) ? 0 : n;
	}
	function getCellNumeric(tr, colIndex) {
		const tds = tr.querySelectorAll('td');
		if (!tds.length || !tds[colIndex]) return null;
		const td  = tds[colIndex];
		const raw = td.getAttribute('data-value') || td.innerText || td.textContent || '';
		return parseNumberLike(raw);
	}
	function sortTbodyByColumn(table, colIndex, direction = 'desc') {
		if (!table) return;
		const tbody = table.querySelector('tbody') || table;
		if (!tbody) return;
		const rows = Array.from(tbody.querySelectorAll('tr'));
		if (!rows.length) return;

		const dataRows  = [];
		const otherRows = [];
		rows.forEach(r => {
			const tds = r.querySelectorAll('td');
			if (tds.length && tds.length > colIndex && getCellNumeric(r, colIndex) !== null) {
				dataRows.push(r);
			} else {
				otherRows.push(r);
			}
		});
		dataRows.sort((a,b)=>{
			const va = getCellNumeric(a,colIndex) ?? 0;
			const vb = getCellNumeric(b,colIndex) ?? 0;
			return direction === 'asc' ? va - vb : vb - va;
		});
		tbody.innerHTML = '';
		dataRows.forEach(r => tbody.appendChild(r));
		otherRows.forEach(r => tbody.appendChild(r));
	}
	function applySortInContainer(containerSelector, sortValue) {
		if (!sortValue) return;
		const container = document.querySelector(containerSelector);
		if (!container) return;
		const table = container.querySelector('table');
		if (!table) return;
		let keywords = [], direction = 'desc';
		if (sortValue === 'omzet_desc') { keywords = ['omzet','omset','pendapatan','total omzet','total omset']; direction = 'desc'; }
		if (sortValue === 'omzet_asc')  { keywords = ['omzet','omset','pendapatan','total omzet','total omset']; direction = 'asc'; }
		if (sortValue === 'meter_desc') { keywords = ['total meter','meter']; direction = 'desc'; }
		if (sortValue === 'meter_asc')  { keywords = ['total meter','meter']; direction = 'asc'; }
		const colIndex = findColumnIndexByHeader(table, keywords);
		if (colIndex >= 0) sortTbodyByColumn(table, colIndex, direction);
	}
	function setSortPref(tabKey, val) { localStorage.setItem('sort_'+tabKey, val || ''); }
	function getSortPref(tabKey) { return localStorage.getItem('sort_'+tabKey) || ''; }

	/* --- Daterange init --- */
	function cbrange(start, end) {
  $("#report_penjualan .pj-date__text").html(start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY"));
}

	$("#report_penjualan").daterangepicker({
		startDate : start,
		endDate   : end,
		ranges : {
			"Today" : [moment(), moment()],
			"Yesterday" : [moment().subtract(1, "days"), moment().subtract(1, "days")],
			"Last 7 Days" : [moment().subtract(6, "days"), moment()],
			"Last 30 Days" : [moment().subtract(29, "days"), moment()],
			"This Month" : [moment().startOf("month"), moment().endOf("month")],
			"Last Month" : [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
		}
	}, cbrange);
	cbrange(start, end);
	$('#startdate').val(dari);
	$('#enddate').val(sampai);

	$('#report_penjualan').on('apply.daterangepicker', function(ev, picker) {
		const start_date = picker.startDate.format('DD/MM/YYYY');
		const end_date   = picker.endDate.format('DD/MM/YYYY');
		$('#startdate').val(start_date);
		$('#enddate').val(end_date);

		search_LaporanProduk(0,start_date,end_date);
		search_LaporanGrup(0,start_date,end_date);
		search_LaporanBahan(0,start_date,end_date);
		search_LaporanKategori(0);
	});

	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		var target = $(this).attr("href").replace("#", "");
		localStorage.setItem('activeTabs', $(e.target).attr('href'));
		$('#jenis').val(target);
		localStorage.setItem('activeTab', target);

		if(target=='produk'){ search_LaporanProduk(); }
		else if(target=='kategori'){ search_LaporanKategori(); }
		else if(target=='grup'){ search_LaporanGrup(); }
		else { search_LaporanBahan(); }

		restoreSortDropdownForTab(target);
	});

	var activeTab = localStorage.getItem('activeTabs');
	if(activeTab){
		$('#jenis').val(activeTab);
		$('#tab_penjualan a[href="' + activeTab + '"]').tab('show');
	}

	$(document).ready(function() {
		search_LaporanProduk(0,dari,sampai);
		restoreSortDropdownForTab('produk');
	});

	function restoreSortDropdownForTab(tab) {
		const m = { 'produk':'#sort_produk','kategori':'#sort_kategori','grup':'#sort_grup','bahan':'#sort_bahan' };
		const sel = m[tab]; if (!sel) return;
		const pref = getSortPref(tab);
		const el = document.querySelector(sel);
		if (el) el.value = pref;
	}

	/* --- AJAX loaders (endpoint tetap) + responsive wrapper + apply sort --- */
	function search_LaporanProduk(page_num,startdate,enddate){
		var tipe = localStorage.getItem('activeTab');
		$('#jenis').val(tipe);
		var start_date = $("#startdate").val();
		var end_date   = $("#enddate").val();
		page_num = page_num?page_num:0;
		startdate = startdate?startdate:start_date;
		enddate   = enddate?enddate:end_date;

		var urlnya = base_url+"laporan/produk/"+page_num;
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,dari:startdate,sampai:enddate},
			beforeSend: function(){ $('body').loading(); },
			success: function(html){
				$('#dataProduk').html(html);
				ensureResponsiveTables('#dataProduk');         // NEW: bungkus tabel
				applySortInContainer('#dataProduk', getSortPref('produk'));
				$('body').loading('stop');
				$("#cetak_laporan").prop('disabled', $("#total_pj").val()==0);
			},
			error: function(xhr){
				sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop');
			}
		});
	}

	function search_LaporanKategori(page_num){
		var tipe = localStorage.getItem('activeTab');
		$('#jenis').val(tipe);
		page_num = page_num?page_num:0;
		var start_date = $("#startdate").val();
		var end_date   = $("#enddate").val();
		var urlnya = base_url+"laporan/perkategori/"+page_num;
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,dari:start_date,sampai:end_date},
			beforeSend: function(){ $('body').loading(); },
			success: function(html){
				$('#dataKategori').html(html);
				ensureResponsiveTables('#dataKategori');       // NEW
				applySortInContainer('#dataKategori', getSortPref('kategori'));
				$('body').loading('stop');
			},
			error: function(xhr){
				sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop');
			}
		});
	}

	function search_LaporanGrup(page_num){
		page_num = page_num?page_num:0;
		var start_date = $("#startdate").val();
		var end_date   = $("#enddate").val();
		var jenis = $("#jenis_grup").val();
		$("#id_jenis").val(jenis);
		var tipe = localStorage.getItem('activeTab');
		$('#jenis').val(tipe);
		var urlnya = base_url+"laporan/pergrup/"+page_num;
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,dari:start_date,sampai:end_date,jenis:jenis},
			beforeSend: function(){ $('body').loading(); },
			success: function(html){
				$('#dataGrup').html(html);
				ensureResponsiveTables('#dataGrup');           // NEW
				applySortInContainer('#dataGrup', getSortPref('grup'));
				$('body').loading('stop');
			},
			error: function(xhr){
				sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop');
			}
		});
	}

	function search_LaporanBahan(page_num){
		page_num = page_num?page_num:0;
		var start_date = $("#startdate").val();
		var end_date   = $("#enddate").val();
		var tipe = localStorage.getItem('activeTab');
		$('#jenis').val(tipe);
		var urlnya = base_url+"laporan/perbahan/"+page_num;
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,dari:start_date,sampai:end_date},
			beforeSend: function(){ $('body').loading(); },
			success: function(html){
				$('#dataBahan').html(html);
				ensureResponsiveTables('#dataBahan');          // NEW
				applySortInContainer('#dataBahan', getSortPref('bahan'));
				$('body').loading('stop');
			},
			error: function(xhr){
				sweet('Server!!!',xhr.responseText,'error','danger'); $('body').loading('stop');
			}
		});
	}

	// Print
	$("#cetak_laporan").click(function(e) {
		e.preventDefault();
		$("#target").submit();
	});

	/* Events: Dropdown Sort */
	$('#sort_produk').on('change', function(){ const v=this.value; setSortPref('produk',v);  applySortInContainer('#dataProduk',v); });
	$('#sort_kategori').on('change', function(){ const v=this.value; setSortPref('kategori',v);applySortInContainer('#dataKategori',v); });
	$('#sort_grup').on('change', function(){ const v=this.value; setSortPref('grup',v);     applySortInContainer('#dataGrup',v); });
	$('#sort_bahan').on('change', function(){ const v=this.value; setSortPref('bahan',v);   applySortInContainer('#dataBahan',v); });

	
	(function(){
	var chip = document.getElementById('report_penjualan');
	if(chip){
	  chip.addEventListener('keydown', function(e){
	    if(e.key === 'Enter' || e.key === ' '){
	      e.preventDefault();
	      chip.click(); // biarkan handler lama yang sudah terpasang menangani
	    }
	  });
	  // Jika Anda ingin menampilkan placeholder bila span kosong
	  var span = chip.querySelector('.pj-date__text');

	  if(span && !span.textContent.trim()){
	    span.textContent = 'Pilih rentang tanggal';
	  }
	}
	})();


</script>
<?php }; ?>

<style>
  :root{
    --pj-ink:#0f172a;
    --pj-ink-2:rgba(255,255,255,.92);
    --pj-ink-3:rgba(255,255,255,.78);
    --pj-line:rgba(255,255,255,.22);
    --pj-panel:rgba(255,255,255,.12);
    --pj-panel-2:rgba(255,255,255,.16);
    --pj-shadow: 0 10px 28px rgba(2,6,23,.18);
  }

  /* Card base */
  small { font-size: 75%; color: #777; font-weight: 400; }
  div.card{
    border:0; margin-bottom:30px; margin-top:30px; border-radius:14px;
    color:rgba(0,0,0,.87); background:#fff; width:100%;
    box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  }
  div.card.card-plain{ background:transparent; box-shadow:none; }

  div.card .card-header{
    border-radius:14px;
    padding:14px 16px;
    margin:-30px 15px 0 15px;
    border:0;
    background:#1769e8;
    color:#fff;
  }
  .card-plain .card-header:not(.card-avatar){ margin-left:0; margin-right:0; }
  div.card .card-body{ padding:16px; }

  /* ===== Header layout ===== */
  .pj-header{ position:relative; overflow:hidden; }
  .pj-header__inner{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
    min-height:56px;
  }

  /* ===== Tabs (FIX UTAMA: GRID, bukan scroll) ===== */
  .pj-tabs{ flex:1 1 auto; min-width:0; }

  /* override bootstrap nav flex -> grid */
  .pj-tabs__list{
  border:0;
  padding:6px;
  border-radius:12px;
  background:var(--pj-panel);
  box-shadow: inset 0 0 0 1px var(--pj-line);

  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:6px;

  /* bikin semua kartu tab tinggi rata */
  grid-auto-rows: 1fr;

  overflow:visible !important;
}

  .pj-tabs__list .nav-item{ margin:0; width:100%; }
  .pj-tabs__list .nav-link{
  width:100%;
  border:0 !important;
  margin:0;
  border-radius:10px;

  /* jadi “kartu” rapi dan rata tinggi */
  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px 10px;
  min-height:44px;

  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;

  color:var(--pj-ink-3);
  background:transparent;

  /* teks rapi: max 2 baris */
  text-align:center;
  line-height:1.15;
  white-space:normal;
  word-break:break-word;

  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;   /* <= batas 2 baris */
}

  .pj-tabs__list .nav-link:hover{
    background:var(--pj-panel-2);
    color:var(--pj-ink-2);
  }
  .pj-tabs__list .nav-link.active{
    background:rgba(255,255,255,.22);
    color:#fff;
    box-shadow:0 8px 20px rgba(2,6,23,.18);
  }

  /* kalau class tabs-scroll masih ada, pastikan tidak munculin scrollbar */
  .tabs-scroll{ overflow:visible !important; }

  /* ===== Tools (Print + Date) ===== */
  .pj-tools{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    white-space:nowrap;
  }
  .pj-tools__btn{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    border-radius:12px;
    padding:.42rem .7rem;
    line-height:1.2;
    box-shadow: 0 8px 18px rgba(2,6,23,.18);
    flex:0 0 auto;
  }
  .pj-tools__btnText{ font-weight:800; }

  #report_penjualan.pj-date{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    height:36px;
    padding:0 .75rem;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    color:var(--pj-ink);
    box-shadow: var(--pj-shadow);
    cursor:pointer;
    user-select:none;
    outline:none;

    /* penting biar tidak “nabrak” di layar kecil */
    flex:1 1 auto;
    min-width:0;
    max-width: 420px;
  }
  #report_penjualan.pj-date:focus{
    box-shadow: 0 0 0 .18rem rgba(23,105,232,.22), var(--pj-shadow);
  }
  .pj-date__text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 40ch;
    font-weight:800;
  }

  /* ===== Sort control ===== */
  .sort-wrapper .input-group-text{ min-width:90px; justify-content:center; }
  .sort-wrapper select{ min-width:180px; }

  /* ===== Table wrapper ===== */
  .table-responsive{
    border:1px solid rgba(2,6,23,.08);
    border-radius:10px;
    overflow:hidden;
  }

  /* ===============================
     RESPONSIVE BREAKPOINTS
     =============================== */

  /* Tablet & bawah: tools turun ke bawah, tab jadi 2 kolom biar rapi */
  @media (max-width: 991.98px){
  	.pj-tabs__list .nav-link{
		  min-height:46px;
		  font-size:11.5px;
		  padding:9px 8px;
		}

		@media (max-width: 575.98px){
  /* bikin header ungu lebih ringkas di HP */
  div.card .card-header{
    padding:12px 12px;
  }

  .pj-tabs__list{
    padding:6px;
    border-radius:12px;
  }

  .pj-tabs__list .nav-link{
    min-height:44px;
    font-size:11px;
    padding:9px 8px;
  }
}


    .pj-header__inner{ flex-wrap:wrap; gap:10px; }
    .pj-tabs{ flex:1 1 100%; }
    .pj-tools{ flex:1 1 100%; justify-content:flex-end; }

    .pj-tabs__list{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pj-tabs__list .nav-link{
      font-size:11.5px;
      padding:9px 8px;
    }

    #report_penjualan.pj-date{ max-width:100%; }
    .pj-date__text{ max-width: 30ch; }
  }

  /* HP kecil: print dan date jangan nabrak -> jadi 2 baris */
  @media (max-width: 420px){
    .pj-tools{ flex-wrap:wrap; justify-content:stretch; }
    .pj-tools__btn{ width:100%; justify-content:center; }
    #report_penjualan.pj-date{ width:100%; }
  }

  /* Saat cetak: sembunyikan header */
  @media print{
    .pj-header{ display:none !important; }
  }

  /* =========================
   FINISHING HEADER PENJUALAN
   ========================= */

/* Biar header ungu lebih compact (desktop juga enak) */
div.card .card-header{
  padding:12px 14px;              /* sebelumnya 14px 16px */
}

.pj-header__inner{
  min-height:52px;                /* sebelumnya 56px */
}

/* Tabs: rapihin panel + tinggi link */
.pj-tabs__list{
  padding:6px;
  border-radius:12px;
}

.pj-tabs__list .nav-link{
  min-height:42px;                /* sedikit lebih pendek */
}

/* Tools: samakan tinggi & jangan “ngembang” aneh */
.pj-tools__btn{
  height:36px;
  padding:.42rem .75rem;
  justify-content:center;
}

#report_penjualan.pj-date{
  height:36px;
  max-width:none;                 /* biar bisa full di mobile */
}

/* =========================
   RESPONSIVE: TABLET/HP
   ========================= */
@media (max-width: 991.98px){
  /* Tools jadi GRID: Print fixed, Tanggal melebar */
  .pj-tools{
    width:100%;
    display:grid;
    grid-template-columns: 108px 1fr;
    gap:10px;
    justify-content:stretch;
    align-items:center;
  }

  .pj-tools__btn{
    width:108px;                  /* tetap konsisten */
  }

  #report_penjualan.pj-date{
    width:100%;
  }

  /* Tab grid 2 kolom tetap */
  .pj-tabs__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* HP kecil: print jadi icon+text tetap center, tanggal full */
@media (max-width: 575.98px){
  div.card .card-header{
    padding:12px 12px;
  }

  .pj-tools{
    grid-template-columns: 96px 1fr; /* lebih pas utk iPhone */
    gap:8px;
  }

  .pj-tools__btn{
    width:96px;
    padding:.4rem .6rem;
  }

  .pj-date__text{
    max-width: 22ch;              /* biar ellipsis rapi */
  }
}

/* =========================================================
   UI MODERN LAPORAN OMSET — hanya area konten halaman ini
   ========================================================= */
.sales-report-page{
  color:#344054;
}
.sales-report-page .pj-page-heading{
  padding-top:2px;
}
.sales-report-page .pj-page-heading .h3{
  color:#1d2939!important;
  font-size:26px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:-.3px;
}
.sales-report-page .pj-page-subtitle{
  color:#667085;
  font-size:13px;
  line-height:1.5;
}
.sales-report-page div.card.pj-report-card{
  margin:0 0 24px;
  overflow:hidden;
  border:1px solid #e4e9f1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 7px 22px rgba(15,23,42,.07);
}
.sales-report-page div.card.pj-report-card .pj-header{
  margin:0;
  padding:16px 18px;
  border:0;
  border-bottom:1px solid #e8edf4;
  border-radius:12px 12px 0 0;
  background:#fff;
  color:#344054;
  box-shadow:none;
}
.sales-report-page .pj-header__inner{
  min-height:44px;
  gap:18px;
}
.sales-report-page .pj-tabs__list{
  padding:5px;
  border:1px solid #e1e7ef;
  border-radius:8px;
  background:#f7f9fc;
  box-shadow:none;
}
.sales-report-page .pj-tabs__list .nav-link{
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:6px;
  color:#667085;
  background:transparent;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  text-align:center;
  white-space:normal;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.sales-report-page .pj-tabs__list .nav-link:hover{
  background:#eaf2ff;
  color:#1769e8;
}
.sales-report-page .pj-tabs__list .nav-link.active{
  background:#1769e8;
  color:#fff;
  box-shadow:0 4px 10px rgba(23,105,232,.22);
}
.sales-report-page .pj-tools{
  gap:10px;
}
.sales-report-page .pj-tools__btn{
  height:40px;
  padding:0 15px;
  border:1px solid #1769e8;
  border-radius:7px;
  background:#1769e8;
  color:#fff;
  box-shadow:0 4px 10px rgba(23,105,232,.20);
  font-size:13px;
}
.sales-report-page .pj-tools__btn:hover,
.sales-report-page .pj-tools__btn:focus{
  background:#0f5fd4;
  border-color:#0f5fd4;
  color:#fff;
}
.sales-report-page #report_penjualan.pj-date{
  height:40px;
  min-width:245px;
  padding:0 13px;
  border:1px solid #dfe5ee;
  border-radius:7px;
  background:#fff;
  color:#344054;
  box-shadow:none;
}
.sales-report-page #report_penjualan.pj-date:hover{
  border-color:#9dbcf0;
  background:#f8fbff;
}
.sales-report-page #report_penjualan.pj-date:focus{
  border-color:#1769e8;
  box-shadow:0 0 0 3px rgba(23,105,232,.12);
}
.sales-report-page .pj-date__text{
  color:#344054;
  font-size:13px;
  font-weight:700;
}
.sales-report-page div.card.pj-report-card .card-body{
  padding:18px 20px 20px;
}
.sales-report-page .tab-pane > .row{
  margin:0 0 14px!important;
  padding:12px;
  border:1px solid #e7ebf2;
  border-radius:8px;
  background:#f8fafc;
}
.sales-report-page .sort-wrapper{
  max-width:760px;
}
.sales-report-page .sort-wrapper .input-group-text,
.sales-report-page #grup .input-group-text{
  min-width:90px;
  height:40px;
  justify-content:center;
  border:1px solid #dfe5ee;
  border-right:0;
  border-radius:6px 0 0 6px;
  background:#eef4ff;
  color:#1769e8;
  font-size:12px;
  font-weight:800;
}
.sales-report-page .sort-wrapper select,
.sales-report-page #grup select.form-control{
  min-width:180px;
  height:40px;
  border:1px solid #dfe5ee;
  border-radius:0 6px 6px 0;
  background-color:#fff;
  color:#344054;
  font-size:13px;
  font-weight:600;
  box-shadow:none;
}
.sales-report-page #dataProduk > h5,
.sales-report-page #dataKategori > h5,
.sales-report-page #dataGrup > h5,
.sales-report-page #dataBahan > h5{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px!important;
  color:#475467!important;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
}
.sales-report-page #dataProduk > h5:before,
.sales-report-page #dataKategori > h5:before,
.sales-report-page #dataGrup > h5:before,
.sales-report-page #dataBahan > h5:before{
  content:"\f073";
  font-family:FontAwesome;
  color:#1769e8;
  font-size:13px;
}
.sales-report-page .tab-pane .table-responsive{
  border:1px solid #e4e9f1;
  border-radius:8px;
  background:#fff;
  box-shadow:none;
  overflow-x:auto;
}
.sales-report-page .tab-pane table.table{
  width:100%;
  min-width:680px;
  margin:0;
  border-collapse:collapse;
  color:#475467;
  font-size:13px;
}
.sales-report-page .tab-pane table.table th,
.sales-report-page .tab-pane table.table td{
  padding:10px 14px!important;
  border-top:0;
  border-bottom:1px solid #e8edf3;
  vertical-align:middle;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.sales-report-page .tab-pane table.table thead th{
  background:#f3f6fb!important;
  color:#344054!important;
  border-bottom:1px solid #dfe5ee!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:none;
}
.sales-report-page .tab-pane table.table tbody tr:hover{
  background:#f8fbff;
}
.sales-report-page .tab-pane table.table tbody tr:last-child td{
  border-bottom:1px solid #dfe5ee;
}
.sales-report-page .tab-pane table.table tfoot th{
  padding:11px 14px!important;
  background:#eef5ff!important;
  color:#1769e8!important;
  border-top:1px solid #cfe0f8!important;
  border-bottom:0!important;
  font-weight:800;
}
.sales-report-page #grup .select2-container--default .select2-selection--multiple{
  min-height:40px;
  border-color:#dfe5ee;
  border-radius:0 6px 6px 0;
  background:#fff;
}
.sales-report-page #grup .select2-container--default .select2-selection__choice{
  border-color:#cfe0f8;
  background:#eef5ff;
  color:#1769e8;
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active{
  background:#1769e8!important;
  color:#fff!important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:#1769e8!important;
  color:#fff!important;
}

@media (max-width:991.98px){
  .sales-report-page .pj-header__inner{
    gap:12px;
  }
  .sales-report-page .pj-tools{
    grid-template-columns:105px minmax(0,1fr);
  }
  .sales-report-page .pj-tools__btn{
    width:105px;
  }
  .sales-report-page #report_penjualan.pj-date{
    min-width:0;
  }
}
@media (max-width:575.98px){
  .sales-report-page .pj-page-heading .h3{
    font-size:21px;
  }
  .sales-report-page .pj-page-subtitle{
    font-size:12px;
  }
  .sales-report-page div.card.pj-report-card .pj-header{
    padding:12px;
  }
  .sales-report-page .pj-tabs__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }
  .sales-report-page .pj-tabs__list .nav-link{
    min-height:42px;
    font-size:11px;
  }
  .sales-report-page div.card.pj-report-card .card-body{
    padding:12px;
  }
  .sales-report-page .tab-pane > .row{
    padding:9px;
  }
  .sales-report-page .sort-wrapper{
    max-width:none;
  }
}


</style>


