/* POS layout and interaction styles extracted from pos/index.html. */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --keyboard-pad: 0px;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

body {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sat) var(--sar) var(--sab) var(--sal);
}

.tap-active:active { transform: scale(0.95); transition: transform 0.1s; }
.fade-in { animation: fadeIn 0.2s ease-in-out; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.h-safe-screen { min-height: 100vh; min-height: 100dvh; height: auto; }
.pos-scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.touch-target { min-height: 44px; min-width: 44px; }

#ticket-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
#ticket-panel .ticket-panel-header,
#ticket-panel .ticket-panel-receipt { flex-shrink: 0; }
#ticket-items { flex: 1 1 0; min-height: 80px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#ticket-panel .support-pos-ticket-edit { flex-shrink: 0; min-height: 0; }
#ticket-items::-webkit-scrollbar { width: 6px; }
#ticket-items::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
#ticket-items::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
#ticket-items::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Compact ticket sizing for the receipt panel. */
#ticket-items .ticket-item-row { padding: 0.375rem 0.5rem; font-size: 0.65rem; }
#ticket-panel .support-pos-ticket-edit { padding: 0.5rem 0.75rem; }
#ticket-panel #cash-payment-area { padding-top: 0.375rem; margin-top: 0.375rem; }
#ticket-panel #cash-payment-area label { font-size: 0.65rem; margin-bottom: 0.2rem; }
#ticket-panel #cash-tendered-input { font-size: 1rem; padding: 0.35rem 0.5rem; }
#ticket-panel #change-due-display { font-size: 1rem; }
#ticket-panel .support-pos-ticket-edit .space-y-1 { font-size: 0.7rem; }
#ticket-panel .support-pos-ticket-edit #ticket-total-row { font-size: 1rem; padding-top: 0.25rem; }
#ticket-panel .support-pos-payment button { padding: 0.4rem 0.5rem !important; font-size: 0.65rem !important; }
#ticket-panel .support-pos-payment .pos-pay-icon { width: 0.875rem; height: 0.875rem; }
#ticket-panel #ticket-actions-row button { padding: 0.35rem 0.5rem !important; font-size: 0.65rem !important; }
#pos-quick-cash-buttons button { padding: 0.25rem 0.35rem; font-size: 0.65rem; }

/* PIN lock stays reachable when the mobile keyboard is open. */
#pin-lock-screen {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding: max(1rem, var(--sat)) max(1rem, var(--sar)) max(40vh, var(--sab)) max(1rem, var(--sal));
}

#pin-lock-screen .pin-lock-inner {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    padding-bottom: 2rem;
}

.pos-modal-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: min(90vh, 90dvh);
    padding-bottom: 30vh;
}

#modal-manager-auth .pos-modal-scroll { padding-bottom: 20vh; }
.pos-float-cta { padding-bottom: max(1rem, var(--sab)); }

@media (max-height: 700px) {
    #ticket-panel .support-pos-ticket-edit { padding: 0.4rem 0.5rem; }
    #ticket-actions-row button { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; font-size: 0.6rem !important; }
    #ticket-panel #cash-payment-area { padding-top: 0.25rem; margin-top: 0.25rem; }
    #ticket-panel #cash-payment-area label { font-size: 0.6rem; margin-bottom: 0.15rem; }
    #ticket-panel #cash-tendered-input { font-size: 0.9rem; padding: 0.25rem 0.4rem; }
    #ticket-panel #change-due-display { font-size: 0.9rem; }
    #ticket-panel .support-pos-ticket-edit .space-y-1 { font-size: 0.65rem; }
    #ticket-panel .support-pos-ticket-edit #ticket-total-row { font-size: 0.9rem; }
    #ticket-panel .support-pos-payment button { padding: 0.3rem 0.4rem !important; font-size: 0.6rem !important; }
    #pos-quick-cash-buttons button { padding: 0.2rem 0.3rem; font-size: 0.6rem; }
}

@media (max-width: 767px) {
    #pin-lock-screen { padding-bottom: max(35vh, var(--sab)); }
}