/* --- RESET & BASIC STYLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f6f8; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* --- HEADER --- */
header { background: #ffffff; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); z-index: 10; }
.logo { font-size: 1.5rem; font-weight: 800; color: #2c3e50; display: flex; align-items: center; gap: 10px; }
.header-info { color: #7f8c8d; font-size: 0.9rem; }

/* --- LAYOUT UTAMA --- */
.main-container { display: flex; flex: 1; overflow: hidden; }

/* --- BAGIAN KIRI (MENU) --- */
.menu-section { flex: 1; padding: 20px; overflow-y: auto; background: #ecf0f1; }

.category-bar { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.cat-btn { padding: 10px 20px; background: white; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; color: #7f8c8d; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.2s; white-space: nowrap; }
.cat-btn.active { background: #3498db; color: white; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

.product-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.prod-img { height: 180px; background: #ddd; object-fit: cover; width: 100%; }
.prod-info { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; }
.prod-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 5px; color: #2c3e50; }
.prod-price { color: #e74c3c; font-weight: bold; margin-top: auto; font-size: 1.1rem; }

/* --- BAGIAN KANAN (SIDEBAR KASIR) --- */
.sidebar { width: 380px; background: #2c3e50; color: white; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }

.sidebar-header { padding: 20px; background: #34495e; display: flex; justify-content: space-between; align-items: center; }
.sidebar-header h2 { font-size: 1.2rem; margin: 0; }
.btn-clear { background: #e74c3c; border: none; padding: 5px 10px; border-radius: 4px; color: white; cursor: pointer; font-size: 0.8rem; }

.cart-list { flex: 1; overflow-y: auto; padding: 10px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.1); padding: 10px; border-radius: 6px; margin-bottom: 8px; }
.item-details h4 { margin: 0; font-size: 0.9rem; }
.item-details span { font-size: 0.8rem; color: #bdc3c7; }
.qty-controls button { width: 24px; height: 24px; border: none; background: #fff; border-radius: 4px; cursor: pointer; font-weight: bold; color: #2c3e50; }
.qty-controls span { margin: 0 5px; font-size: 0.9rem; }

/* Kalkulasi Uang (Bagian Bawah Sidebar) */
.sidebar-footer { padding: 20px; background: #34495e; border-top: 1px solid #46637f; }

.summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.1rem; }
.total-display { font-size: 1.8rem; font-weight: bold; color: #2ecc71; margin-bottom: 20px; display: block; text-align: right; }

.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-size: 0.8rem; margin-bottom: 5px; color: #bdc3c7; }
.input-group input { width: 100%; padding: 10px; border-radius: 5px; border: none; font-size: 1.1rem; color: #2c3e50; }

.change-display { text-align: right; font-size: 1.4rem; font-weight: bold; margin-bottom: 20px; color: #f1c40f; }
.change-display.negative { color: #e74c3c; }

.btn-print { width: 100%; background: #27ae60; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px; }
.btn-print:hover { background: #2ecc71; }

/* --- PRINT STYLES (HIDDEN ON SCREEN) --- */
@media print {
	/* 1. Reset body layout yang berantakan karna flexbox */
	body { 
		display: block !important; 
		background: white; 
		height: auto !important; 
		overflow: visible !important; 
	}

	/* 2. Sembunyikan Header dan Layout Utama secara eksplisit */
	header, .main-container, .no-print { 
		display: none !important; 
		visibility: hidden !important; 
	}

	/* 3. Tampilkan area struk dengan paksa (!important) */
	#receipt-area { 
		display: block !important; 
		visibility: visible !important; 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		padding: 10px; 
		font-family: 'Courier New', monospace; 
		font-size: 12pt; 
		text-align: center; 
		z-index: 9999;
	}
	
	/* Style elemen dalam struk */
	.receipt-header { margin-bottom: 10px; text-transform: uppercase; }
	.receipt-divider { border-top: 1px dashed #000; margin: 5px 0; }
	.receipt-item { display: flex; justify-content: space-between; margin-bottom: 2px; }
	.receipt-total { display: flex; justify-content: space-between; font-weight: bold; margin-top: 10px; font-size: 14pt; border-top: 1px solid #000; padding-top: 5px; }
	
	/* Hilangkan margin kertas */
	@page { margin: 0; size: auto; }
}