/* RestaurantInfo.css - Image card and form styles */
/* Layout shell provided by TwoColumnTemplate (leftFixedWidth + stickyLeft) */
/* Meal service rows now use ItemRow molecule */

/* Profile consolidation notice */
.ri-profile-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-info-light);
    border: var(--border-width-1) solid var(--color-info);
    border-radius: var(--border-radius-xl);
    font-size: var(--text-sm);
    color: var(--text-body);
}

/* Image card (sticky behaviour comes from TwoColumnTemplate.sticky-left) */
.ri-image-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ri-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--border-radius-xl);
    background: var(--bg-layer-2);
}

.ri-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-layer-2);
    border: var(--border-width-1) dashed var(--border-default);
    border-radius: var(--border-radius-xl);
    color: var(--text-muted);
}

.ri-image-name {
    font-size: var(--text-xs);
    color: var(--text-muted);
    word-break: break-all;
    line-height: 1.3;
}

.ri-image-actions {
    display: flex;
    gap: var(--space-1_5);
}

/* Form fields (used inside ExpandablePanel content + bar flat form) */
.ri-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Section label (reused in Policies panel for booking settings) */
.ri-section-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* Meal service list */
.ri-meal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ri-meal-item {
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    background: var(--bg-layer-4);
}

.ri-meal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.ri-meal-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.ri-meal-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ri-meal-hours {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ri-meal-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Slots section within a meal service */
.ri-slots-section {
    padding: 0 var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ri-slot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ri-slot-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1_5) var(--space-2);
    background: var(--bg-layer-3);
    border-radius: var(--border-radius-md);
    font-size: var(--text-xs);
}

.ri-slot-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ri-slot-time {
    color: var(--text-muted);
}

.ri-slot-covers,
.ri-slot-bookable {
    color: var(--text-body);
    white-space: nowrap;
}

.ri-slot-actions {
    display: flex;
    gap: var(--space-0_5);
}

/* Operating period (seasonal switch + date range) */
.ri-operating-period {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Operating days toggle group */
.ri-operating-days {
    display: flex;
    flex-direction: column;
    gap: var(--space-1_5);
}

.ri-operating-days-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.ri-operating-days-summary {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ri-operating-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ri-day-checkbox {
    min-width: 60px;
}

@media (max-width: 700px) {
    .ri-slot-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-1);
    }
    .ri-slot-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}