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

/* Department-mode chrome (TLP-209): a persistent restaurant selector above the
   editor body. Selector swaps only #ri-body so the SegmentedControl pill slides. */
.ri-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ri-chrome,
.ri-entity-tabs {
    display: flex;
}

/* F&B host white panel card (matches the Panel organism: bg-surface + subtle
   border + xl radius). The Hotel Information host omits this -- its per-restaurant
   expandable panel already provides the card. */
.ri-card {
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-3);
}

/* Shared editor (both hosts). Header row = section switcher + Save; below it the
   active section (full width). No outer Panel/title. Gap-only spacing. */
.ri-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Details section: image floated, fields wrap around it (part of the section, not
   a separate column). Each field is its own block-formatting context so it reflows
   beside the float and runs full-width once past the image. */
.ri-details {
    display: block;
}

.ri-details::after {
    content: '';
    display: block;
    clear: both;
}

/* Field groups (single fields + FormRow/FormGrid) each form their own formatting
   context, so they sit beside the floated image while alongside it and run full
   width once past it. Spacing via margin (block flow, not flex gap). */
.ri-details > .form-field {
    display: flow-root;
}

.ri-details > .form-field,
.ri-details > .form-field-row,
.ri-details > .form-grid-auto {
    margin-bottom: var(--space-3);
}

/* Groups that should sit BELOW the image (full width, left edge). Clearing the
   float drops them under the image instead of into the narrow right column. */
.ri-details-full {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ri-image-float {
    float: left;
    width: 240px;
    margin: 0 var(--space-4) var(--space-3) 0;
}

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

.ri-editor-actions {
    display: flex;
    justify-content: flex-end;
}

/* Section panes -- all render to the DOM; only the active one is visible (so
   getFormData reads every field across sections on Save). */
.ri-sections {
    display: flex;
    flex-direction: column;
}

.ri-section-pane {
    display: none;
}

.ri-section-pane-active {
    display: block;
}

/* 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 Schedule & Capacity for the meal services divider) */
.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 services region (inside Schedule & Capacity) + inline add button */
.ri-meal-services {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Meal Services divider row: full-width separator with the label left and the
   Add button right (saves the separate add-row). */
.ri-meal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

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

/* ========================================
   OPERATIONAL CALENDAR (TLP-209 Phase 3)
   ======================================== */
.ri-cal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ri-cal-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-body);
}

.ri-cal-summary-label {
    font-weight: 600;
    color: var(--text-primary);
}

.ri-cal-summary-item {
    color: var(--text-muted);
}

.ri-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.ri-cal-nav-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

/* Week grid: 7 day cells */
.ri-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1_5);
}

.ri-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    background: var(--bg-layer-3);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.1s, background 0.1s;
}

.ri-cal-cell:hover {
    border-color: var(--color-info);
}

.ri-cal-cell-selected {
    border-color: var(--color-info);
    background: var(--color-info-light);
}

.ri-cal-cell-dow {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
}

.ri-cal-cell-day {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ri-cal-cell-covers {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-success);
}

.ri-cal-cell-tag {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Closed (one-off override) stands out; off/season are muted */
.ri-cal-cell-closed {
    background: var(--color-warning-light, var(--bg-layer-2));
}

.ri-cal-cell-closed .ri-cal-cell-tag {
    color: var(--color-warning);
    font-weight: 600;
}

.ri-cal-cell-off,
.ri-cal-cell-season {
    background: var(--bg-layer-2);
}

/* Inline day editor */
.ri-cal-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-layer-2);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.ri-cal-day-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ri-cal-day-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.ri-cal-day-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ri-cal-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

.ri-cal-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-1_5);
}

.ri-cal-slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ri-cal-slot-name {
    font-size: var(--text-sm);
    color: var(--text-primary);
    flex: 1;
    min-width: 120px;
}

.ri-cal-slot-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.ri-cal-slot-base {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.ri-cal-slot-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

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

.ri-cal-slot-val {
    font-size: var(--text-sm);
    color: var(--text-body);
}

.ri-cal-day-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 700px) {
    .ri-cal-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 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);
}

/* Slots flow horizontally as compact cards and wrap. */
.ri-slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ri-slot-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    min-width: 150px;
    padding: var(--space-1_5) var(--space-2);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    background: var(--bg-layer-3);
}

.ri-slot-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

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

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

.ri-slot-covers {
    color: var(--text-body);
    white-space: nowrap;
    font-size: var(--text-xs);
}

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

/* Operating period (seasonal switch + date range) */
/* Seasonal toggle + inline From/To date fields, all on one row. */
.ri-operating-period {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: nowrap;
}
.ri-operating-period .form-field {
    flex: 0 0 auto;
}
/* Keep the From/To label tight against its date picker on the same line. */
.ri-operating-period .form-field-inline {
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.ri-operating-period .form-field-inline .form-label {
    min-width: 0;
}
.ri-operating-period .form-field-inline .input-wrapper {
    flex: 0 0 auto;
}

/* The Switch atom sits the thumb low and lets it reach (and here overshoot) the
   pill edge. Scope it: vertically centred, pinned a fixed inset from the left
   when off and from the right when on, so it always sits inside the pill both
   ways regardless of the rendered thumb size. */
.ri-operating-period .switch-thumb {
    top: 50%;
    left: var(--border-width-2);
    transform: translateY(-50%);
}
.ri-operating-period .switch-input:checked + .switch-track .switch-thumb {
    left: auto;
    right: var(--border-width-2);
    transform: translateY(-50%);
}

/* Seasonal From/To date fields, side by side on one row under the toggle */
/* Schedule row: Operating Days takes the most space (stretched day bar); Operating
   Hours is kept compact; Operating Period sizes to its content. */
.ri-schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
}
.ri-col-period { flex: 0 0 auto; }
.ri-col-hours { flex: 0 1 240px; }
.ri-col-days { flex: 1 1 340px; min-width: 320px; }

/* Operating days use the standard ButtonGroup molecule (styles in ButtonGroup.css)
   -- no module-specific rules needed. */