/*pos_style.css*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg-slate-950: #020617; --bg-slate-900: #0f172a; --bg-slate-800: #1e293b;
    --border-slate-800: #1e293b; --border-slate-700: #334155;
    --text-white: #ffffff; --text-slate-300: #cbd5e1; --text-slate-400: #94a3b8; --text-slate-500: #64748b;
    --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669;
    --sky-400: #38bdf8; --amber-400: #fbbf24; --amber-500: #f59e0b; --rose-500: #f43f5e; --rose-600: #e11d48;
    --indigo-400: #818cf8; --indigo-500: #6366f1; --teal-400: #2dd4bf;
}

html, body {
    height: 100%; background-color: var(--bg-slate-950); color: var(--text-slate-300);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden; user-select: none; -webkit-user-select: none;
}

.font-mono, .font-mono-num { font-family: "SFMono-Regular", Consolas, Menlo, "Courier New", monospace; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-slate-950); }
::-webkit-scrollbar-thumb { background: var(--bg-slate-800); border-radius: 4px; }

.flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-5 { grid-column: span 5 / span 5; } .col-span-7 { grid-column: span 7 / span 7; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
.h-full { height: 100%; } .w-full { width: 100%; } .hidden { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease-in-out; text-decoration: none; }
.btn-emerald { background-color: var(--emerald-600); color: var(--text-white); }
.btn-emerald:hover { background-color: var(--emerald-500); }
.btn-dark { background-color: var(--bg-slate-950); border-color: var(--border-slate-800); color: var(--text-slate-400); }
.btn-dark:hover { border-color: var(--border-slate-700); color: var(--text-white); }
.btn-rose { background-color: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--rose-500); }
.btn-rose:hover { background-color: var(--rose-600); color: var(--text-white); }
.btn-amber { background-color: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.35); color: var(--amber-400); }
.btn-amber:hover { background-color: var(--amber-500); color: var(--bg-slate-950); }

.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(2, 6, 23, 0.95); }
.modal-box { background-color: var(--bg-slate-900); border: 1px solid var(--border-slate-800); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); width: 100%; max-height: 95vh; overflow-y: auto; }

@media print {
    @page { margin: 0 !important; size: auto !important; }
    html, body { margin: 0 !important; padding: 0 !important; background: #ffffff !important; color: #000000 !important; }
    body * { visibility: hidden !important; }
    #pos-print-area, #pos-print-area * { visibility: visible !important; }
    #pos-print-area { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 2mm 3mm 1mm 3mm !important; box-sizing: border-box !important; font-family: 'Courier New', Courier, monospace !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #000000 !important; background: #ffffff !important; }
    .thermal-feed-cutter { display: block !important; height: 18mm !important; width: 100% !important; clear: both !important; }
}