/* Remove all Tailwind classes and use the ones from Tailwind CDN */
/* Only keep custom styles that aren't covered by Tailwind */

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #e0e7f4 100%);
    min-height: 100vh;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

#splash-screen {
    transition: opacity 0.7s ease-out, visibility 0.7s ease-out;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes pulse-logo {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.2));
    }
    50% {
        transform: scale(1.08);
        opacity: 0.95;
        filter: drop-shadow(0 0 25px rgba(102, 126, 234, 0.4));
    }
}

.animate-pulse-logo {
    animation: pulse-logo 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar */
.custom-scroll::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.5);
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

/* Enhanced glassmorphism effects */
.glass-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(31, 45, 61, 0.1);
    transition: all 0.2s ease-in-out;
}

.glass-info-card {
    background: #ffffff;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.glass-card {
    background: #ffffff;
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Modern button styles */
.modern-btn {
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.modern-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modern-btn:active {
    transform: translateY(0);
}

.modern-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.modern-btn:hover::before {
    left: 100%;
}

/* Modern card hover effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gradient buttons */
.gradient-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

.gradient-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
}

/* Enhanced premium gradient buttons */
.premium-gradient-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0ea5e9, #22c55e); /* Blue to Green */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.premium-gradient-btn:hover {
    background: linear-gradient(135deg, #16a34a, #0284c7); /* Darker Green to Darker Blue */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.3); /* Green shadow */
}

.premium-gradient-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.premium-gradient-btn:hover::before {
    left: 100%;
}

.icon-btn {
    position: relative;
    height: 2.5rem; /* h-10 */
    width: 2.5rem; /* w-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    color: #0f172a; /* text-slate-900 for best contrast on light background */
    background-color: rgba(255, 255, 255, 0.75); /* Slightly less transparent */
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-btn:hover {
    color: #0ea5e9; /* hover:text-primary-600 */
    background-color: white;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* Modern input styling */
.modern-input {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.modern-input:focus {
    border-color: #22c55e; /* Green focus */
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1); /* Green shadow */
}

/* Enhanced ultra modern input styling */
.ultra-modern-input {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.4s;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.ultra-modern-input:focus {
    background: rgba(255, 255, 255, 1);
    border-color: #0ea5e9; /* Blue focus */
    box-shadow: 
        0 0 0 4px rgba(14, 165, 233, 0.1),
        0 8px 24px rgba(14, 165, 233, 0.15);
    transform: translateY(-2px);
}

/* Advanced animations */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    33% { 
        transform: translateY(-8px) rotate(1deg); 
    }
    66% { 
        transform: translateY(-4px) rotate(-0.5deg); 
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.8); }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced ultra modern card styles */
.ultra-modern-card {
    background: #ffffff;
    backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ultra-modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ultra-modern-card:hover {
    transform: translateY(-12px) scale(1.01);
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.15),
        0 16px 32px -8px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Enhanced glassmorphism */
.premium-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

/* Kitchen display enhancements */
.kitchen-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.kitchen-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.kitchen-card:hover::before {
    opacity: 1;
}

.kitchen-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}

/* Status indicators */
.status-indicator {
    position: relative;
    overflow: hidden;
}

.status-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s;
}

.status-indicator:hover::before {
    left: 100%;
}

/* Admin panel enhancements */
.admin-tab.active {
    background-color: #0ea5e9; /* Blue */
    color: white;
}

.admin-content {
    animation: fadeIn 0.3s ease-out;
}

.admin-stat-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.admin-stat-card:hover::before {
    opacity: 1;
}

.admin-stat-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}

/* Enhanced tab styles */
.modern-tab {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
}

.modern-tab.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%); /* Blue to Green */
    color: white;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
    transform: translateY(-2px);
}

.modern-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.modern-tab.active:hover::before {
    left: 100%;
}

/* Kitchen Display System styles */
.kitchen-order {
    transition: all 0.3s ease;
}

.kitchen-order.urgent {
    animation: urgentPulse 2s ease-in-out infinite;
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.9));
}

.kitchen-order.preparing {
    border-left-color: #3b82f6;
    background-color: #eff6ff;
}

.kitchen-order.ready {
    border-left-color: #10b981;
    background-color: #f0fdf4;
}

@keyframes urgentPulse {
    0%, 100% {
        box-shadow: 0 16px 32px rgba(239, 68, 68, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 20px 40px rgba(239, 68, 68, 0.4);
        transform: scale(1.02);
    }
}

/* Cart styles */
.cart-slide-in {
    transform: translateX(0);
}

.cart-slide-out {
    transform: translateX(100%);
}

.cart-container {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: -20px 0px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pos-floating-cart-summary {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s;
    z-index: 40;
}

/* Only show floating cart on mobile/tablet */
@media (min-width: 1024px) {
    .pos-floating-cart-summary {
        display: none;
    }
}

@media (min-width: 640px) {
    .cart-container {
        max-width: 24rem;
        width: 24rem;
    }
    
    .modern-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .category-filter-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-width: 130px;
    }
    
    .admin-tab {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-width: 140px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cart-container {
        max-width: 28rem;
        width: 28rem;
    }
}

/* QR Code modal styles */
.modal-overlay {
    backdrop-filter: blur(4px);
}

/* Enhanced notifications */
.notification {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Product card enhancements */
.product-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card:hover::before {
    opacity: 1;
}

.product-card:hover {
    transform: translateY(-16px) scale(1.02);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}

.product-card img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover img {
    transform: scale(1.1) rotate(1deg);
}

/* Form enhancements */
.modern-form {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.modern-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.modern-form input, .modern-form select, .modern-form textarea {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-form input:focus, .modern-form select:focus, .modern-form textarea:focus {
    background: rgba(255, 255, 255, 1);
    border-color: #22c55e; /* Green focus */
    box-shadow: 
        0 0 0 4px rgba(34, 197, 94, 0.1),
        0 8px 24px rgba(34, 197, 94, 0.15);
    transform: translateY(-2px);
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
    
    .text-4xl {
        font-size: 2rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .glass-header {
        padding: 0 1rem;
    }
    
    .modern-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .premium-gradient-btn {
        padding: 0.75rem 1.5rem;
    }
    
    .ultra-modern-card {
        margin: 0.5rem;
    }
}

/* Enhanced Mobile-first responsive design */
@media (max-width: 640px) {
    .max-w-7xl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .glass-header {
        padding: 0.5rem;
    }
    
    .glass-header .h-18 {
        height: auto;
        min-height: 4rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .glass-header h1 {
        font-size: 1.25rem;
    }
    
    .glass-header nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .modern-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        min-width: auto;
    }
    
    .text-4xl {
        font-size: 1.875rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
    }
    
    .premium-gradient-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .ultra-modern-card {
        margin: 0.25rem;
        padding: 1rem;
        border-radius: 1rem;
    }
    
    .product-card {
        padding: 1rem;
    }
    
    .product-card img {
        height: 10rem;
    }
    
    .glass-card {
        padding: 1.5rem;
        border-radius: 1rem;
    }
    
    .modern-form {
        padding: 1.5rem;
    }
    
    .grid-cols-1 {
        grid-template-columns: 1fr;
    }
    
    .category-filter-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-width: 100px;
    }
    
    .admin-tab {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-width: 120px;
    }
    
    .cart-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        border-radius: 28px 28px 0 0;
        margin: 0;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .kitchen-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .admin-stat-card {
        padding: 1rem;
    }
    
    .modern-tab {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .notification {
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }
}

/* Admin Sidebar Menu Styles - REFINED */
.admin-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
    transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out, width 0.3s ease-in-out; /* Added width to transition */
}

/* The main content area of the admin panel */
#admin-main-content {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 0; /* Default: full width, sidebar positioned absolutely on mobile */
    flex: 1; /* Allow to grow */
    width: 100%; /* Ensure it takes full width initially */
}

/* Desktop-specific adjustments for admin-main-content when sidebar is expanded/collapsed */
@media (min-width: 1024px) {
    #admin-main-content {
        margin-left: 16rem; /* Default margin for desktop when sidebar is expanded */
    }
    #admin-main-content.content-pushed {
        margin-left: 4rem; /* Adjusted for collapsed sidebar */
    }
}

#sidebar-toggle-mobile, #sidebar-toggle-desktop {
    transition: transform 0.3s ease-in-out;
}

#sidebar-toggle-mobile svg, #sidebar-toggle-desktop svg {
    transition: transform 0.3s ease-in-out;
}

.rotate-90 {
    transform: rotate(90deg);
}

/* Mobile and Desktop specific sidebar handling */
@media (max-width: 1023px) {
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        width: 16rem; /* Default mobile width */
    }
    .admin-sidebar.sidebar-visible-mobile {
        transform: translateX(0);
    }
    
    #admin-main-content {
        margin-left: 0 !important; /* Full width on mobile */
    }
    
    #sidebar-toggle-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {
    .admin-sidebar {
        position: relative; /* Part of the flow on desktop */
        left: 0;
        width: 16rem; /* Default desktop width (w-64) */
    }
    .admin-sidebar.sidebar-collapsed {
        width: 4rem; /* Collapsed width (w-16) */
        overflow-x: hidden; /* Hide overflowing content */
    }
    
    /* These styles moved into the #admin-main-content block above for clarity */
    /* #admin-main-content {
        margin-left: 16rem; 
    }
    #admin-main-content.content-pushed {
        margin-left: 4rem; 
    } */
    
    #sidebar-toggle-mobile {
        display: none;
    }
}

.admin-menu-item {
    color: #334155; /* slate-700 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 0.75rem; /* rounded-xl */
}

.admin-menu-item:hover {
    background: rgba(14, 165, 233, 0.1); /* Light Blue */
    color: #0c4a6e; /* primary-900 */
    transform: translateX(4px);
}

.admin-menu-item.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%); /* Blue to Green */
    color: white;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4); /* Blue shadow */
    transform: scale(1.03) translateX(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.admin-menu-item.active:hover {
    background: linear-gradient(135deg, #16a34a 0%, #0284c7 100%); /* Green to Blue on hover */
    transform: scale(1.03) translateX(4px);
}

.admin-menu-item.active svg {
    color: white;
}

.admin-menu-item.active img {
    filter: brightness(0) invert(1);
}

.admin-menu-item svg, .admin-menu-item img {
    transition: transform 0.3s ease;
}

.admin-menu-item:hover svg, .admin-menu-item:hover img {
    transform: scale(1.1);
}

/* POS Layout */
.pos-wrapper {
    display: none; /* Initially hidden */
    position: fixed; /* Ensures it covers the whole screen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    background: white;
    color: black;
    font-family: monospace;
    padding: 20px;
    box-sizing: border-box;
    z-index: 999; /* Above regular app content, below modals */
}

/* New: Hide main app UI when POS is active */
body.pos-active #main-app-header,
body.pos-active #app-content {
    display: none !important;
}

body.pos-active #pos-wrapper {
    display: block; /* Show pos-wrapper when pos-active */
}

.pos-main-grid {
    display: grid;
    grid-template-columns: 280px 1fr 350px; /* Left: orders/tables, Middle: products, Right: cart/checkout */
    gap: 1rem; /* 16px gap */
    padding: 1rem;
    height: calc(100vh - 4rem); /* Header height is h-16, so 4rem */
    overflow: hidden; /* Prevent main grid from scrolling */
}

.pos-panel {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    overflow: hidden; /* Ensure content within panel is contained */
}

.pos-panel-header {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #1e293b; /* slate-900 */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0; /* Prevent header from shrinking */
    text-align: center;
}

.pos-scroll-area {
    flex-grow: 1; /* Allow content to fill available space */
    overflow-y: auto;
    padding-right: 0.5rem; /* Space for scrollbar */
}

/* Specific button styles for POS */
.pos-func-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
    /* Specific adjustments for readability */
    &.bg-green-100 {
        background-color: #d1fae5; /* green-100 */
        color: #065f46; /* green-900 */
    }
    &.bg-yellow-100 {
        background-color: #fef9c3; /* yellow-100 */
        color: #a16207; /* yellow-900 */
    }
    &.bg-blue-100 {
        background-color: #bfdbfe; /* blue-200 */
        color: #1e40af; /* blue-800 */
    }
    &.bg-purple-100 {
        background-color: #e9d5ff; /* purple-200 */
        color: #6b21a8; /* purple-800 */
    }
    /* Red-500 with white text is already good contrast, add text shadow */
    &.bg-red-500 {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Stronger shadow for white text */
    }
}

.pos-func-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.pos-category-btn {
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-900 for stronger contrast */
}

.pos-category-btn:hover {
    background-color: #cbd5e1; /* slate-300 */
}

.pos-category-btn.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); /* primary-500 to primary-600 */
    color: white;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
    transform: scale(1.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Add text shadow for readability */
}

.pos-category-btn.campaign-btn {
    background-color: #fef3c7; /* amber-100 */
    color: #b45309; /* amber-700 */
}

.pos-category-btn.campaign-btn.active {
     background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* amber-500 to amber-600 */
     color: white;
     box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Add text shadow for readability */
}

.pos-product-card {
    position: relative;
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: white; /* Ensure it has a background */
}

.pos-product-card:hover {
    transform: translateY(-4px) scale(1.02); /* Adjusted scale for a smoother feel */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.pos-product-card.out-of-stock {
    cursor: not-allowed;
    opacity: 0.7; /* Increased opacity slightly */
}

.pos-product-card .product-name {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Slightly less dark shadow for better contrast */
    position: absolute;
    bottom: 0.5rem; /* Adjust positioning */
    left: 0.5rem;
    right: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.pos-product-card .product-price {
    top: 0.5rem; /* Adjust positioning */
    right: 0.5rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); /* Primary gradient */
    color: white;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700; /* font-bold */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Add text shadow for readability */
}

.pos-current-order-items {
    overflow-y: auto;
    padding-right: 1rem; /* Space for scrollbar */
}

/* Timeline styles for order status modal */
.timeline {
    position: relative;
    padding: 20px 0 0 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #d1d5db, #e2e8f0); /* slate-300 to slate-200 */
}

.timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
}

.timeline-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e2e8f0; /* slate-200 */
    border: 2px solid #cbd5e1; /* slate-300 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.timeline-item.completed .timeline-dot {
    background-color: #10b981; /* green-500 */
    border-color: #059669; /* green-600 */
}

.timeline-item.active .timeline-dot {
    background-color: #3b82f6; /* primary-500 */
    border-color: #2563eb; /* primary-600 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
    animation: pulse-dot 1.5s infinite ease-in-out;
}

.timeline-item-active-dot {
    background-color: #3b82f6; /* primary-500 */
    border-color: #2563eb; /* primary-600 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
    animation: pulse-dot 1.5s infinite ease-in-out;
}

@keyframes pulse-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.5);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0px rgba(59, 130, 246, 0);
    }
}

/* Enhanced tab styles */
.settings-tab {
    display: flex;
    align-items: center;
    space-x: 0.5rem; /* space-x-2 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.75rem; /* rounded-xl */
    font-weight: 600; /* font-semibold */
    font-size: 0.875rem; /* text-sm */
    color: #0f172a; /* text-slate-900 for best contrast on light background */
    background-color: #f1f5f9; /* bg-slate-100 */
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-tab:hover {
    background-color: #e2e8f0; /* bg-slate-200 */
    color: #475569; /* text-slate-600 */
    transform: translateY(-1px);
}

.settings-tab.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%); /* Blue to Green */
    color: white;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3); /* Blue shadow */
    transform: translateY(-2px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Add text shadow for readability */
}

.settings-tab svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    margin-right: 0.5rem; /* mr-2 */
}

.settings-tab-content {
    animation: fadeIn 0.3s ease-out;
}

/* All buttons with white text on a background that might make them hard to read */
.premium-gradient-btn,
.add-to-cart-btn,
.kitchen-status-btn,
.pos-action-btn,
.modern-btn.bg-red-500, /* Explicitly target the red modern button */
.modern-btn.bg-gradient-to-r.from-primary-500.to-primary-600, /* Guest/Staff login */
.modern-btn.bg-gradient-to-r.from-accent-500.to-accent-600,
.modern-btn.bg-gradient-to-r.from-secondary-500.to-secondary-600,
.modern-btn.bg-gradient-to-r.from-danger-500.to-danger-600 { /* Guest button */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Stronger shadow for white text */
}

/* Offline indicator styles */
.offline-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s;
}

.offline-indicator.online {
    background-color: #d1fae5; /* green-100 */
    color: #10b981; /* green-500 */
}

.offline-indicator .badge {
    background-color: #dc2626; /* red-600 */
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    margin-left: 0.25rem;
}

.pending-orders-badge {
    position: relative;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
}

/* New for POS customer search results */
#customer-search-results {
    position: absolute;
    top: 100%; /* Position below the input */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 50; /* Above other content, below modals */
    max-height: 200px;
    overflow-y: auto;
}

#customer-search-results div {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

#customer-search-results div:hover {
    background-color: #f1f5f9; /* slate-100 */
}

/* Print-specific styles */
@media print {
    body > *:not(.print-only-container) {
        display: none !important;
    }
    .print-only-container {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        background: white;
        color: black;
        font-family: monospace;
        padding: 20px;
        box-sizing: border-box;
    }
    .print-only-container pre {
        white-space: pre-wrap; /* Ensure wrapping for long lines */
    }
    .print-only-container .receipt-logo {
        display: block;
        margin: 0 auto 10px;
        width: 80px; /* Adjust as needed for print */
        height: auto;
    }
    .print-only-container .receipt-header,
    .print-only-container .receipt-footer {
        text-align: center;
        margin-bottom: 10px;
    }
    .print-only-container .receipt-item {
        display: flex;
        justify-content: space-between;
    }
    .print-only-container .receipt-total {
        font-weight: bold;
    }
}

/* Small adjustments for mobile responsiveness on POS, if needed */
@media (max-width: 1023px) {
    .pos-main-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        grid-template-rows: auto auto auto; /* Allow sections to auto-size */
        height: auto; /* Allow full height content */
        overflow-y: auto; /* Enable scroll for the whole grid */
    }
    
    .pos-middle-panel {
        order: 1; /* products and categories come first */
    }
    .pos-right-panel {
        order: 2; /* cart comes second */
    }
    .pos-left-panel {
        order: 3; /* orders and tables come last */
    }

    .pos-panel {
        margin-bottom: 1rem; /* Spacing between stacked panels */
    }

    .pos-panel-header {
        text-align: center;
    }

    .pos-product-card {
        height: auto; /* Allow product cards to adjust height */
    }
    .pos-product-card img {
        height: 100px; /* Smaller image height on mobile */
    }
}

/* Desktop specific height for delivery map */
@media (min-width: 1024px) {
    #delivery-map {
        height: 384px; /* lg:h-96 */
    }
}