body {
    background-color: #f8f9fa;
}

.passcode-container {
    max-width: 320px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.number-button {
    font-size: 1.5rem;
    padding: 20px;
}
.passcode-display {
    font-size: 2rem;
    letter-spacing: 0.4rem;
    margin-bottom: 20px;
    text-align: center;
}

#submit-btn {
    display: none;
}

/* Base styles for menu cards */
.menu-card {
    border: none; /* Remove default Bootstrap card border */
    border-radius: 0.75rem; /* Slightly more rounded corners */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transitions for hover effects */
    height: 100%; /* Ensure card fills the height of its container */
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally (if not using text-center) */
}

.menu-card:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Stronger shadow on hover */
}

/* Icon styling */
.menu-card .menu-icon {
    font-size: 3.5rem; /* Make icon larger */
    margin-bottom: 1rem; /* Space between icon and text */
    line-height: 1; /* Adjust line height for icon if needed */
}

/* Heading styling */
.menu-card h5 {
    font-weight: 600; /* Make heading a bit bolder */
    margin-bottom: 0; /* Remove default h5 bottom margin */
}

/* Ensure text color doesn't change on hover from the anchor tag */
.text-decoration-none.text-dark:hover {
    color: #343a40 !important; /* Keep text dark on hover */
}

/* --- Custom Card Colors --- */

/* Receipts Card */
.menu-card.bg-receipts {
    background-color: #e6f7ff; /* Light blue */
}
.menu-card.bg-receipts .menu-icon {
    color: #007bff; /* Primary blue for icon */
}
.menu-card.bg-receipts h5 {
    color: #343a40; /* Dark text for light background */
}
.menu-card.bg-receipts:hover {
    background-color: #cceeff; /* Slightly darker blue on hover */
}
.menu-card.bg-receipts:hover .menu-icon {
    color: #0056b3; /* Darker blue on hover */
}

/* Orders Card */
.menu-card.bg-orders {
    background-color: #e0ffe0; /* Light green */
}
.menu-card.bg-orders .menu-icon {
    color: #28a745; /* Success green for icon */
}
.menu-card.bg-orders h5 {
    color: #343a40; /* Dark text for light background */
}
.menu-card.bg-orders:hover {
    background-color: #c2f0c2; /* Slightly darker green on hover */
}
.menu-card.bg-orders:hover .menu-icon {
    color: #1e7e34; /* Darker green on hover */
}

/* Products Card */
.menu-card.bg-products {
    background-color: #fff0e6; /* Light orange */
}
.menu-card.bg-products .menu-icon {
    color: #fd7e14; /* Orange for icon */
}
.menu-card.bg-products h5 {
    color: #343a40; /* Dark text for light background */
}
.menu-card.bg-products:hover {
    background-color: #ffe0cc; /* Slightly darker orange on hover */
}
.menu-card.bg-products:hover .menu-icon {
    color: #df6909; /* Darker orange on hover */
}

/* Settings Card */
.menu-card.bg-settings {
    background-color: #f7e6ff; /* Light purple */
}
.menu-card.bg-settings .menu-icon {
    color: #6f42c1; /* Purple for icon */
}
.menu-card.bg-settings h5 {
    color: #343a40; /* Dark text for light background */
}
.menu-card.bg-settings:hover {
    background-color: #e0c2ff; /* Slightly darker purple on hover */
}
.menu-card.bg-settings:hover .menu-icon {
    color: #5a359d; /* Darker purple on hover */
}

/* Logout Card */
.menu-card.bg-logout {
    background-color: #ffe6e6; /* Light red/pink */
}
.menu-card.bg-logout .menu-icon {
    color: #dc3545; /* Bootstrap danger red */
}
.menu-card.bg-logout h5 {
    color: #343a40; /* Dark text for light background */
}
.menu-card.bg-logout:hover {
    background-color: #ffcccc; /* Slightly darker red on hover */
}
.menu-card.bg-logout:hover .menu-icon {
    color: #c82333; /* Darker red on hover */
}

.category-card {
    background: #e6f7ff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.item-image {
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    max-height: 400px;
}
.item-detail-card {
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 2rem;
}

#important-row {
    background-color: #ffcccc; /* Light red for important row */
    font-weight: bold;
    color: #cc0000;
}