frontend/src/app.css

@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;
	}

	/* Mobile-friendly scrollable table wrapper */
	.table-scroll {
		@apply overflow-x-auto -mx-4 px-4;
		-webkit-overflow-scrolling: touch;
	}

	/* Mobile overlay backdrop */
	.mobile-overlay {
		@apply fixed inset-0 bg-black/40 z-40 lg:hidden;
	}
}