/* Day view and reservation form (brief §7, screens 3 and 5). */
.day-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.day-header h1 { font-size: 1.25rem; margin: 0; text-align: center; }
.day-header__date { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--color-muted); }
.day-header .button { padding: 0 1rem; text-decoration: none; border: 1px solid var(--color-line); border-radius: .5rem; display: inline-flex; align-items: center; color: inherit; }

.button--primary { background: var(--color-accent); color: var(--color-accent-text); border: 0; border-radius: .5rem; padding: 0 1rem; min-height: var(--tap); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.day-plan > .button--primary { margin-bottom: .5rem; }
.button--danger { color: var(--color-danger); }

.time-slider { margin: .75rem 0 .5rem; }
.time-slider label { display: block; margin-bottom: .25rem; }
.time-slider output { font-weight: 600; font-variant-numeric: tabular-nums; }
.time-slider input[type="range"] { width: 100%; min-height: var(--tap); }

.table[data-state="busy"] { background: var(--color-busy); }
.table[data-state="later"]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text); opacity: .5; }
.table { position: relative; }
.floor-plan--picker .table { cursor: pointer; }
.floor-plan--picker .table input { position: absolute; top: 2px; left: 2px; margin: 0; }
.floor-plan--picker .table:has(input:checked) { outline: 3px solid var(--color-accent); }

.reservations { list-style: none; padding: 0; margin: 0; }
.reservation a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; padding: .6rem 0; min-height: var(--tap); border-bottom: 1px solid var(--color-line); color: inherit; text-decoration: none; }
.reservation time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3rem; }
.reservation.is-past a { color: var(--color-muted); }
.reservation .note { flex-basis: 100%; color: var(--color-muted); font-size: .9rem; }
.badge { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--color-line); }
.badge--seated { background: var(--color-free); }
.badge--no_show, .badge--cancelled { text-decoration: line-through; color: var(--color-muted); }
.overlap { color: var(--color-danger); font-size: .85rem; }


.field { margin-bottom: 1rem; }
.field label, .field legend { display: block; margin: 0 0 .25rem; }
.field input:not([type="checkbox"]), .field select { min-height: var(--tap); font-size: 1rem; max-width: 100%; }
.field--row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field button[type="button"] { margin-left: .25rem; }
.hint, .muted { color: var(--color-muted); font-size: .9rem; }
.statuses { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.statuses .is-active { font-weight: 600; }
details.field summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }

/* Settings (brief §7, screen 8) */
.settings { margin-bottom: 1.5rem; }
.settings h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.zones { list-style: none; padding: 0; margin: 0 0 1rem; }
.zone { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--color-line); }
.zone__form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zone__form input[type="text"] { width: 9rem; }
.zone__actions { display: flex; gap: .25rem; }
.zone__actions form { display: inline; }
.zone.is-inactive input[type="text"] { color: var(--color-muted); }
.zone--new { margin-top: .5rem; }

/* Guests (brief §7, screen 10) and the autocomplete in the reservation form */
.autocomplete { position: relative; }
.autocomplete__list { position: absolute; z-index: 2; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: .5rem; box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.autocomplete__list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .75rem; color: inherit; }
.autocomplete__list button:hover, .autocomplete__list button:focus { background: var(--color-unreservable); }
.search { display: flex; gap: .5rem; margin-bottom: 1rem; }
.search input { flex: 1; min-height: var(--tap); font-size: 1rem; }
.guests { list-style: none; padding: 0; margin: 0 0 1rem; }
.guest { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--color-line); }
.guest a { flex: 1; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; padding: .6rem 0; min-height: var(--tap); color: inherit; text-decoration: none; }
.guest .note { flex-basis: 100%; color: var(--color-muted); font-size: .9rem; }
.merge-pair { list-style: none; padding: 0; margin: 0 0 1rem; }
.merge-pair li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; padding: .5rem 0; border-bottom: 1px solid var(--color-line); }
.merge-pair .note { flex-basis: 100%; color: var(--color-muted); font-size: .9rem; }
fieldset.field label { display: block; min-height: var(--tap); display: flex; align-items: center; gap: .5rem; }

/* Venue notes (brief §7, screen 13) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.note-form textarea { flex: 1 1 100%; font-size: 1rem; font-family: inherit; padding: .5rem; }
.notes { list-style: none; padding: 0; margin: 0 0 1rem; }
.note-item { padding: .6rem 0; border-bottom: 1px solid var(--color-line); }
.note-item__body { margin: 0 0 .25rem; white-space: pre-line; }
.note-item__meta { margin: 0 0 .4rem; color: var(--color-muted); font-size: .85rem; }
.note-item__actions { display: flex; gap: .5rem; }
.note-item.is-resolved .note-item__body { color: var(--color-muted); text-decoration: line-through; }
.note-item.is-owner-only { border-left: 3px solid var(--color-accent); padding-left: .5rem; }
.resolved-notes summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--color-muted); }

/* Calendar (brief §7, screen 4) */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 1rem 0; }
.calendar__weekday { text-align: center; color: var(--color-muted); font-size: .8rem; padding: .25rem 0; }
.calendar__day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--tap); aspect-ratio: 1; border: 1px solid var(--color-line); border-radius: .5rem; color: inherit; text-decoration: none; }
.calendar__day--outside { border-color: transparent; }
.calendar__day.is-today { border-color: var(--color-accent); border-width: 2px; }
.calendar__day.has-reservations { background: var(--color-free); }
.calendar__number { font-weight: 600; }
.calendar__count { font-size: .8rem; color: var(--color-muted); }

/* Recurring reservations (brief §7, screen 11) */
.recurrences { list-style: none; padding: 0; margin: 0 0 1rem; }
.recurrence { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--color-line); }
.recurrence.is-paused strong { color: var(--color-muted); }
.recurrence__actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.repeat { margin-top: .75rem; }
.repeat label { display: flex; align-items: center; gap: .5rem; min-height: var(--tap); }

/* Change log (brief §7, screen 9) */
.changes { list-style: none; padding: 0; margin: 0 0 1rem; }
.changes li { padding: .5rem 0; border-bottom: 1px solid var(--color-line); }
.changes time { font-variant-numeric: tabular-nums; color: var(--color-muted); margin-right: .4rem; }
.history { margin-top: 1.5rem; }
.history h2 { font-size: 1.1rem; }

/* Notifications and the "On duty" switch (brief §7, screen 12) */
.offer { padding: .6rem .75rem; margin-bottom: .75rem; border: 1px solid var(--color-line); border-radius: .5rem; background: var(--color-free); }
.on-duty { margin-bottom: .5rem; }
.on-duty .is-active { background: var(--color-free); border-color: var(--color-accent); }