/* assets/css/pos.css */
* { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { margin: 0; padding: 0; background-color: #f4f6f8; overflow: hidden; }

/* Screen Toggling */
.screen { display: none; height: 100vh; width: 100vw; }
.screen.active { display: flex; flex-direction: column; }

/* ================== LOGIN SCREEN ================== */
#login-screen { justify-content: center; align-items: center; background-color: #2c3e50; }
.login-container { background: white; padding: 30px; border-radius: 8px; text-align: center; width: 350px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#pin-input { width: 100%; font-size: 32px; text-align: center; letter-spacing: 10px; margin-bottom: 20px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.num-btn { padding: 20px; font-size: 24px; background: #ecf0f1; border: none; border-radius: 4px; cursor: pointer; }
.num-btn:active { background: #bdc3c7; }
.clear-btn { background: #e74c3c; color: white; }
.enter-btn { grid-column: span 3; padding: 20px; font-size: 20px; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }
.error-msg { color: #e74c3c; margin-top: 15px; min-height: 20px; }

/* ================== MAIN TILL ================== */
.till-header { background: #34495e; color: white; display: flex; justify-content: space-between; padding: 15px 20px; align-items: center; }
.danger-btn { background: #c0392b; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; }

.till-body { display: flex; flex: 1; overflow: hidden; }

/* Cart Panel (Left) */
.cart-panel { width: 40%; background: white; border-right: 2px solid #ddd; display: flex; flex-direction: column; }
.cart-header { 
    display: grid; 
    grid-template-columns: 55% 15% 30%; /* Strict widths */
    padding: 15px; 
    background: #ecf0f1; 
    font-weight: bold; 
    border-bottom: 2px solid #ddd; 
}

.cart-list li { 
    display: grid; 
    grid-template-columns: 55% 15% 30%; /* Strict widths */
    padding: 15px; 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    align-items: center; 
}

.cart-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; }


/* Align the specific columns */
.cart-header span:nth-child(2), .item-qty { text-align: center; }
.cart-header span:nth-child(3), .item-price { text-align: right; }
.item-price { font-weight: bold; color: #2c3e50; }
.cart-list li.selected { background-color: #d6eaf8; }

.cart-totals { padding: 20px; background: #fdfdfd; border-top: 2px solid #ddd; }
.total-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 18px; }
.grand-total { font-size: 32px; font-weight: bold; color: #2c3e50; margin-top: 10px; }

.payment-actions { display: flex; padding: 10px; gap: 10px; background: #eee; }
.pay-btn { flex: 1; padding: 20px; font-size: 18px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; color: white; }
.pay-btn.cash { background: #27ae60; }
.pay-btn.card { background: #2980b9; }
.pay-btn.mixed { background: #f39c12; }

/* Action Panel (Right) */
.action-panel { width: 60%; padding: 20px; display: flex; flex-direction: column; }
.scanner-input-group { display: flex; margin-bottom: 20px; }
#barcode-input { flex: 1; padding: 20px; font-size: 20px; border: 2px solid #ccc; border-radius: 4px 0 0 4px; }
#search-item-btn { padding: 20px 30px; background: #34495e; color: white; font-size: 18px; border: none; border-radius: 0 4px 4px 0; cursor: pointer; }

.quick-keys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; flex: 1; }
.quick-btn { background: #3498db; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background 0.2s; }
.quick-btn:hover { background: #2980b9; }
.quick-btn[data-action="void-line"] { background: #e74c3c; }
.quick-btn[data-action="manager"] { background: #7f8c8d; }

/* ==========================================
   THERMAL RECEIPT PRINTING STYLES
   ========================================== */
@media print {
    /* 1. Tell the printer to use 80mm roll width */
    @page {
        margin: 0;
        size: 80mm auto; 
    }

    /* 2. Hide everything else (The UI screens) */
    .screen {
        display: none !important;
    }

    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Force ONLY the receipt to show */
    #print-receipt {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 75mm !important; /* Slightly under 80mm to prevent cutoff */
        padding: 2mm !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 12px !important;
        color: #000 !important;
    }

    /* 4. Receipt Typography & Flexbox Layout */
    .receipt-header, .receipt-footer, .receipt-info {
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    .receipt-header h2 { 
        margin: 0 !important; 
        font-size: 16px !important; 
        font-weight: bold !important; 
        text-transform: uppercase !important; 
    }
    .receipt-header p, .receipt-footer p, .receipt-info p { 
        margin: 2px 0 !important; 
    }
    
    .receipt-item, .receipt-row {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 4px !important;
    }
    .receipt-grand-total {
        font-weight: bold !important;
        font-size: 14px !important;
        margin-top: 5px !important;
    }
    .receipt-divider {
        border-top: 1px dashed #000 !important;
        margin: 8px 0 !important;
    }
}