/* OrderBell shared styles (Tailwind CDN handles utilities; these are component classes). */
body { font-family: 'Tajawal', 'Inter', system-ui, sans-serif; }
.inp { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; background: #fff; color: #0f172a; }
.inp:focus { outline: 2px solid #14b8a6; outline-offset: 1px; border-color: #14b8a6; }
.dark .inp { background: #1e293b; border-color: #475569; color: #f1f5f9; }
.btn, .btn-ghost, .btn-danger, .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .5rem; padding: .5rem 1rem; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; }
.btn { background: #0d9488; color: #fff; } .btn:hover { background: #0f766e; }
.btn:disabled, .btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { border: 1px solid #cbd5e1; background: transparent; } .btn-ghost:hover { background: rgba(148,163,184,.15); }
.btn-danger { background: #dc2626; color: #fff; } .btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; }
.dark .card { background: #1e293b; border-color: #334155; }
.tbl { width: 100%; font-size: .875rem; } .tbl th { text-align: start; padding: .5rem; color: #64748b; font-weight: 600; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.tbl td { padding: .5rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .dark .tbl td { border-color: #334155; } .dark .tbl th { border-color: #334155; }
.nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .5rem; color: inherit; }
.nav-link:hover { background: rgba(20,184,166,.12); } .nav-link.active { background: #0d9488; color: #fff; }
.kb-col { min-width: 250px; flex: 1; background: rgba(148,163,184,.12); border-radius: .75rem; padding: .5rem; }
.kb-col.drag-over { outline: 2px dashed #14b8a6; }
.order-card { background: #fff; border-radius: .6rem; border: 1px solid #e2e8f0; padding: .6rem; margin-bottom: .5rem; cursor: grab; }
.dark .order-card { background: #1e293b; border-color: #334155; }
.order-card.late { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.order-card.is-ready { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.25); }
@keyframes pop { 0% { transform: scale(.9); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.pop { animation: pop .25s ease-out; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.6) } 100% { box-shadow: 0 0 0 28px rgba(16,185,129,0) } }
.pulse-ring { animation: pulse-ring 1.6s infinite; }
.flash { animation: flash 1.2s ease-in-out 3; } @keyframes flash { 50% { background: #fde68a; color: #111 } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media print { .no-print { display: none !important; } body { background: #fff !important; } }