#canteen-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 5rem); /* Keep height */
    padding: 1.5rem; /* Keep padding */
    background-color: var(--clay-darkest); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
    font-family: 'Inter', sans-serif;
}

#canteen-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    margin-bottom: 1.5rem; /* Keep spacing */
    padding-bottom: 1rem; /* Keep padding */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
}

#canteen-header .back-button {
    /* Styles handled by clay-theme.css */
    margin-right: 1rem; /* Add spacing */
}

#canteen-header h1 {
    font-size: 1.5rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Use theme variable */
    margin: 0;
}

#canteen-content {
    display: grid; /* Keep layout */
    grid-template-columns: 1fr 1fr; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
    flex-grow: 1; /* Keep layout */
    overflow: hidden; /* Keep layout */
}

#canteen-left-column, #canteen-right-column {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    overflow: hidden; /* Keep layout */
}

/* Tabs */
#canteen-tabs {
    display: flex; /* Keep layout */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.canteen-tab {
    /* Styles handled by clay-theme.css */
    padding: 0.8rem 1.3rem; /* Adjusted padding */
    font-size: 0.9rem; /* Adjusted size */
}
.canteen-tab.active {
    color: var(--clay-secondary); /* Use theme variable */
    border-bottom-color: var(--clay-secondary); /* Use theme variable */
}

#canteen-tab-content {
    flex-grow: 1; /* Keep layout */
    overflow-y: auto; /* Keep layout */
    padding: 1.5rem; /* Keep padding */
}
.tab-pane { display: none; } /* Keep layout */
.tab-pane.active { display: block; } /* Keep layout */

/* Dish Grid */
#dish-grid {
    display: grid; /* Keep layout */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Use auto-fill */
    gap: 1rem; /* Keep spacing */
}

.dish-item {
    position: relative; /* Keep layout */
    aspect-ratio: 1 / 1; /* Keep layout */
    background: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.5rem; /* Adjusted rounding */
    cursor: pointer; /* Keep interaction */
    padding: 0.5rem; /* Keep padding */
    transition: all 0.2s ease-in-out; /* Keep transition */
}

.dish-item img {
    width: 100%; /* Keep layout */
    height: 100%; /* Keep layout */
    object-fit: contain; /* Keep layout */
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Add filter/opacity transition */
}

/* REMOVED HOVER EFFECT FOR DISH ITEM
.dish-item:hover {
    border-color: var(--clay-focus);
    background-color: var(--clay-medium);
    transform: scale(1.03);
} */

.dish-item.selected {
    border-color: var(--clay-focus); /* Use theme variable */
    background-color: var(--clay-medium); /* Use theme variable */
    box-shadow: 0 0 8px var(--clay-glow); /* Use theme variable */
}

.dish-item.on-cooldown {
    cursor: not-allowed; /* Keep interaction */
    filter: grayscale(80%); /* Apply grayscale filter */
    opacity: 0.5; /* Reduce opacity */
}
/* REMOVED HOVER EFFECT FOR DISABLED DISH ITEM
.dish-item.on-cooldown:hover {
    transform: none;
    border-color: var(--clay-border);
    background-color: var(--clay-dark);
} */

.cooldown-overlay {
    /* Removed, using filter/opacity instead */
    display: none;
}

/* Dish Details (Right Column) */
#dish-details-container {
    padding: 1.5rem; /* Keep padding */
    flex-grow: 1; /* Keep layout */
    overflow-y: auto; /* Keep layout */
    color: var(--clay-text-secondary); /* Use theme variable */
}

#dish-details-container .placeholder-text {
    display: flex; /* Keep layout */
    justify-content: center; /* Keep layout */
    align-items: center; /* Keep layout */
    height: 100%; /* Keep layout */
    color: var(--clay-text-muted); /* Use theme variable */
}

.dish-details-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1rem; /* Adjusted gap */
    padding-bottom: 1rem; /* Keep padding */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    margin-bottom: 1rem; /* Add margin */
}

.dish-details-header img {
    width: 60px; /* Adjusted size */
    height: 60px; /* Adjusted size */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.5rem; /* Keep rounding */
    padding: 0.25rem; /* Add padding */
}

.dish-details-header h3 {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Use theme variable */
    margin: 0;
}

.dish-details-description {
    margin-top: 1rem; /* Keep spacing */
    font-size: 0.85rem; /* Adjusted size */
    color: var(--clay-text-muted); /* Use theme variable */
    line-height: 1.5; /* Keep layout */
}

.details-section {
    margin-top: 1.5rem; /* Keep spacing */
}

.details-section h4 {
    font-size: 1rem; /* Adjusted size */
    font-weight: 600; /* Keep weight */
    color: var(--clay-text-tertiary); /* Use theme variable */
    margin-bottom: 0.75rem; /* Keep spacing */
    border-bottom: 1px solid var(--clay-border); /* Add divider */
    padding-bottom: 0.3rem; /* Add padding */
}

.ingredient-list, .buff-list {
    list-style: none; /* Keep layout */
    padding: 0; /* Keep layout */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 0.5rem; /* Adjusted gap */
}

.ingredient-item {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 0.75rem; /* Keep spacing */
    background-color: var(--clay-dark); /* Use theme variable */
    padding: 0.4rem 0.6rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    border: 1px solid var(--clay-border); /* Use theme variable */
    font-size: 0.8rem; /* Adjusted size */
}

.ingredient-item img {
    width: 24px; /* Keep size */
    height: 24px; /* Keep size */
}
.ingredient-item span:last-child {
    margin-left: auto; /* Keep layout */
    font-weight: 600;
    font-family: monospace;
}
/* Insufficient ingredient styling */
.ingredient-item .insufficient {
    color: var(--clay-error);
}

.buff-item {
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    padding: 0.6rem 0.8rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    font-size: 0.8rem; /* Adjusted size */
}

.buff-item.buff { color: var(--clay-success); } /* Use theme variable */
.buff-item.hard-cap { color: var(--clay-warning); } /* Use theme variable */

.stat-points-section {
    margin-top: 1.5rem; /* Keep spacing */
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 0.5rem; /* Adjusted gap */
    background-color: var(--clay-dark); /* Add background */
    padding: 0.5rem 0.75rem; /* Add padding */
    border-radius: 0.375rem; /* Add rounding */
    border: 1px solid var(--clay-border); /* Add border */
}

.stat-points-section img {
    width: 20px; /* Adjusted size */
    height: 20px; /* Adjusted size */
}
.stat-points-section strong {
    font-size: 0.9rem; /* Adjusted size */
    color: var(--clay-highlight); /* Use highlight color */
}

#cook-dish-btn {
    /* Styles handled by clay-theme.css */
    width: 100%; /* Keep layout */
    margin-top: 2rem; /* Keep spacing */
    font-size: 0.9rem; /* Adjusted size */
}

/* Active Buffs List */
#active-buffs-list {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 1rem; /* Keep spacing */
}

.active-buff-item {
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    padding: 1rem; /* Keep padding */
    border-radius: 0.5rem; /* Keep rounding */
}

.active-buff-header {
    display: flex; /* Keep layout */
    justify-content: space-between; /* Keep layout */
    align-items: center; /* Keep layout */
    margin-bottom: 0.5rem; /* Keep spacing */
    color: var(--clay-text-secondary); /* Use theme variable */
    font-size: 0.9rem; /* Adjusted size */
}
.active-buff-header strong {
    color: var(--clay-text-primary); /* Use theme variable */
}

.active-buff-details {
    font-size: 0.85rem; /* Adjusted size */
}
.active-buff-details .buff { color: var(--clay-success); } /* Use theme variable */
.active-buff-details .hard-cap { color: var(--clay-warning); } /* Use theme variable */