* { box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; }
body { background-color: #f3f4f6; color: #111827; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* Header */
.top-header { background-color: #111827; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 4px solid #ef4444; }
.logo-area { display: flex; align-items: center; gap: 10px; }
.header-info { display: flex; gap: 30px; text-align: center; }

/* Tata Letak Utama */
.pos-container { display: flex; flex: 1; padding: 10px; gap: 10px; }
.main-panel { flex: 3; display: flex; flex-direction: column; background: white; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 15px; }
.sidebar-panel { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* Input & Total Besar */
.input-total-row { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #e5e7eb; padding-bottom: 15px; margin-bottom: 10px; }
.input-section { flex: 1; position: relative; }
.input-section label { font-weight: bold; font-size: 12px; display: block; margin-bottom: 5px; }
.input-section input { width: 90%; padding: 10px; border: 2px solid #d1d5db; border-radius: 4px; font-size: 16px; outline: none; }
.input-section input:focus { border-color: #ef4444; }
.big-total-section { text-align: right; }
#total-price-big { font-size: 42px; margin: 0; line-height: 1; }

/* Toolbar & Sidebar */
.action-toolbar { display: flex; gap: 10px; margin-bottom: 10px; }
.action-toolbar button, .sidebar-buttons button { background: white; border: 1px solid #d1d5db; padding: 8px 12px; font-size: 12px; font-weight: bold; color: #111827; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.action-toolbar button:hover, .sidebar-buttons button:hover { background: #fef2f2; border-color: #ef4444; color: #ef4444; }
.sidebar-buttons { display: flex; flex-direction: column; gap: 8px; }
.sidebar-buttons button { text-align: left; padding: 10px; }

/* Tabel Keranjang */
.table-container { flex: 1; overflow-y: auto; border: 1px solid #d1d5db; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { background: #ef4444; color: white; padding: 10px; text-align: left; position: sticky; top: 0; }
.cart-table td { padding: 10px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.cart-table tr:nth-child(even) { background-color: #f9fafb; }

/* Pembayaran */
.payment-summary { background: white; padding: 15px; border-radius: 4px; border: 1px solid #d1d5db; flex: 1; }
.input-group { margin-bottom: 10px; }
.input-group label { font-size: 12px; font-weight: bold; }
.input-group input { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 4px; outline: none; }
.btn-bayar { background: #ef4444; color: white; border: none; padding: 20px; font-size: 24px; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%; }
.btn-bayar:active { transform: scale(0.98); }

/* Dropdown & Modal */
.smooth-transition { transition: all 0.2s ease-in-out; }
.dropdown { position: absolute; top: 100%; left: 0; width: 90%; background: white; border: 1px solid #d1d5db; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10; max-height: 200px; overflow-y: auto; }
.dropdown-item { padding: 10px; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
.dropdown-item:hover { background: #f3f4f6; }

/* Gaya Modal Struk Baru */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; }
.modal-content { background: #fff; padding: 20px; border-radius: 8px; width: 320px; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.modal-actions { display: flex; flex-direction: column; margin-top: 20px; gap: 8px; }
.btn-primary { background: #2563eb; color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;}
.btn-secondary { background: #4b5563; color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;}
.btn-danger { background: #ef4444; color: white; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;}

@media print {
    body * { visibility: hidden; }
    #struk-preview, #struk-preview * { visibility: visible; }
    #struk-preview { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; }
    .modal { background: none; position: absolute; }
    .modal-content { box-shadow: none; width: 100%; }
}