| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| @layer base { |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #c0c0c0; |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #a0a0a0; |
| } |
|
|
| input[type='number']::-webkit-inner-spin-button, |
| input[type='number']::-webkit-outer-spin-button { |
| -webkit-appearance: none; |
| margin: 0; |
| } |
|
|
| input[type='number'] { |
| -moz-appearance: textfield; |
| } |
| } |
|
|
| @layer components { |
| .btn { |
| @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed min-h-[44px]; |
| } |
|
|
| .btn-primary { |
| @apply btn bg-pos-highlight text-white hover:bg-red-600 focus:ring-pos-highlight; |
| } |
|
|
| .btn-success { |
| @apply btn bg-pos-success text-white hover:bg-emerald-600 focus:ring-pos-success; |
| } |
|
|
| .btn-warning { |
| @apply btn bg-pos-warning text-white hover:bg-yellow-600 focus:ring-pos-warning; |
| } |
|
|
| .btn-danger { |
| @apply btn bg-pos-danger text-white hover:bg-red-700 focus:ring-pos-danger; |
| } |
|
|
| .btn-info { |
| @apply btn bg-pos-info text-white hover:bg-blue-600 focus:ring-pos-info; |
| } |
|
|
| .btn-ghost { |
| @apply btn bg-transparent text-gray-600 hover:bg-gray-100 focus:ring-gray-200; |
| } |
|
|
| .btn-sm { |
| @apply px-3 py-2 text-xs min-h-[36px]; |
| } |
|
|
| .btn-lg { |
| @apply px-6 py-3 text-base; |
| } |
|
|
| .card { |
| @apply rounded-xl bg-white border border-gray-200 shadow-sm; |
| } |
|
|
| .input { |
| @apply w-full rounded-lg bg-white border border-gray-300 px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 transition-colors focus:border-pos-highlight focus:outline-none focus:ring-1 focus:ring-pos-highlight; |
| } |
|
|
| .label { |
| @apply block text-sm font-medium text-gray-600 mb-1.5; |
| } |
|
|
| .badge { |
| @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium; |
| } |
|
|
| .badge-success { |
| @apply badge bg-green-100 text-green-700; |
| } |
|
|
| .badge-warning { |
| @apply badge bg-yellow-100 text-yellow-700; |
| } |
|
|
| .badge-danger { |
| @apply badge bg-red-100 text-red-700; |
| } |
|
|
| .badge-info { |
| @apply badge bg-blue-100 text-blue-700; |
| } |
|
|
| .table-pos { |
| @apply w-full text-sm text-left; |
| } |
|
|
| .table-pos thead { |
| @apply bg-gray-50 text-gray-500 uppercase text-xs; |
| } |
|
|
| .table-pos th { |
| @apply px-3 py-3 font-medium lg:px-4; |
| } |
|
|
| .table-pos td { |
| @apply px-3 py-3 border-b border-gray-100 lg:px-4; |
| } |
|
|
| .table-pos tbody tr { |
| @apply hover:bg-gray-50 transition-colors; |
| } |
|
|
| .stat-card { |
| @apply card p-4 flex flex-col gap-1; |
| } |
|
|
| .stat-value { |
| @apply text-xl font-bold lg:text-2xl; |
| } |
|
|
| .stat-label { |
| @apply text-sm text-gray-500; |
| } |
|
|
| .menu-item-card { |
| @apply card p-3 cursor-pointer hover:border-pos-highlight/50 hover:shadow-md transition-all duration-200 active:scale-95 select-none; |
| } |
|
|
| .kot-card { |
| @apply card p-4 border-l-4; |
| } |
|
|
| .kot-card.pending { |
| @apply border-l-pos-warning; |
| } |
|
|
| .kot-card.preparing { |
| @apply border-l-pos-info; |
| } |
|
|
| .kot-card.ready { |
| @apply border-l-pos-success; |
| } |
|
|
| .table-cell { |
| @apply rounded-xl p-4 cursor-pointer transition-all duration-200 flex flex-col items-center justify-center gap-2 min-h-[100px] select-none; |
| } |
|
|
| .table-cell.available { |
| @apply bg-green-50 border-2 border-green-300 hover:border-green-500 text-green-700; |
| } |
|
|
| .table-cell.occupied { |
| @apply bg-red-50 border-2 border-red-300 hover:border-red-500 text-red-700; |
| } |
|
|
| .table-cell.reserved { |
| @apply bg-yellow-50 border-2 border-yellow-300 hover:border-yellow-500 text-yellow-700; |
| } |
|
|
| .table-cell.cleaning { |
| @apply bg-amber-50 border-2 border-amber-300 hover:border-amber-500 text-amber-700; |
| } |
|
|
| |
| .table-scroll { |
| @apply overflow-x-auto -mx-4 px-4; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| |
| .mobile-overlay { |
| @apply fixed inset-0 bg-black/40 z-40 lg:hidden; |
| } |
| } |
|
|
