/* Default Universal Print Settings (A4) */ @media print { .no-print { display: none !important; } #main-content { margin-left: 0 !important; width: 100% !important; } body { background-color: white; color: black; } .print-full-width { width: 100% !important; max-width: 100% !important; box-shadow: none !important; border: none !important; padding: 0 !important; } } /* Thermal Printing Configuration */ @media print { body.thermal-mode { width: 80mm !important; margin: 0 !important; padding: 0 !important; background-color: white; font-family: 'Courier New', Courier, monospace !important; font-size: 12px !important; } body.thermal-mode-page { margin: 0 !important; } } @page { size: auto; margin: 5mm; } .transition-custom { transition: all 0.3s ease; } /* ======================================================== */ /* COPY PROTECTION — block casual text selection/copying */ /* (deterrent only — see js/protect.js for details/limits) */ /* ======================================================== */ body { -webkit-user-select: none; user-select: none; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } @media print { body, body * { -webkit-user-select: text !important; user-select: text !important; } } /* ======================================================== */ /* MOBILE SMOOTHNESS — screen transitions & touch polish */ /* ======================================================== */ /* Sidebar drawer: snappier, more native-feeling easing than a flat linear/ease curve */ .sidebar-transition { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Screen-to-screen fade + slide when switching tabs (Billing / Inventory / Settings / Plugins) */ @keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-view.screen-enter { animation: screenIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Smooth momentum scrolling everywhere content scrolls */ #mainScrollArea, .overflow-y-auto, .overflow-x-auto { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain; } /* Remove the grey flash / 300ms delay on tap for buttons, links & controls */ button, a, .tab-btn, input, select, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button, .tab-btn, a[role="button"] { -webkit-user-select: none; user-select: none; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .sidebar-transition, .tab-view.screen-enter, .transition-custom, * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Prevent iOS Safari from auto-zooming when a form field is focused (it zooms in on any input/select with a computed font-size below 16px) */ @media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } } /* ======================================================== */ /* DARK MODE — class-based override applied on */ /* ======================================================== */ body.dark-mode { background-color: #0f172a; color: #e2e8f0; } body.dark-mode #sidebar, body.dark-mode .bg-white { background-color: #1e293b !important; } body.dark-mode .bg-slate-50 { background-color: #0f172a !important; } body.dark-mode .bg-slate-100 { background-color: #1e293b !important; } body.dark-mode .text-slate-800, body.dark-mode .text-slate-900, body.dark-mode .text-slate-700 { color: #e2e8f0 !important; } body.dark-mode .text-slate-600, body.dark-mode .text-slate-500, body.dark-mode .text-slate-400 { color: #94a3b8 !important; } body.dark-mode .border-slate-100, body.dark-mode .border-slate-200, body.dark-mode .border-b, body.dark-mode .border-t { border-color: #334155 !important; } body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; } body.dark-mode .hover\:bg-slate-50:hover, body.dark-mode .hover\:bg-slate-100:hover { background-color: #334155 !important; } body.dark-mode #darkModeToggle { color: #e2e8f0; border-color: #475569; } /* Printed output always stays light, regardless of dark mode */ @media print { body.dark-mode, body.dark-mode * { background-color: white !important; color: black !important; border-color: #ddd !important; } }