/* The departure lounge keeps the existing management and dialog components. */
:root {
  --border: #718096; --text: #172033; --muted: #475569;
  --bg-1: #f2f4f9; --bg-2: #e9eef6; --card: #ffffff;
  --subtle: #e9eef6; --input: #ffffff; --input-border: #64748b;
  --focus: #6336ad; --btn: #6336ad; --btn-text: #ffffff;
  --accent: #6336ad; --ok: #245ca1; --warn: #8c4609;
  --danger: #b42335; --danger-fill: #b42335;
  --shadow: 0 12px 40px #17203312;
}
:root[data-theme="dark"] {
  --border: #7a8ca8; --text: #f5f7ff; --muted: #c2ccde;
  --bg-1: #0d1018; --bg-2: #171e2b; --card: #181e2b;
  --subtle: #242d3d; --input: #101624; --input-border: #7a8ca8;
  --focus: #e1c7ff; --btn: #bda0f3; --btn-text: #141021;
  --accent: #d5b9ff; --ok: #a9ccff; --warn: #ffd18a;
  --danger: #ffadba;
  --shadow: 0 20px 60px #0007;
}
body {
  background: var(--bg-1);
  line-height: 1.5;
}
.shell { max-width: 1240px; padding: 26px 28px 38px; }
.topbar { align-items: center; gap: 20px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.title-wrap { flex: 0 1 330px; gap: 4px; }
.kicker { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { font-size: clamp(18px, 2vw, 23px); line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.toolbar { flex: 1 1 auto; gap: 7px; align-items: center; }
.toolbar-status { font-size: 14px; min-height: 30px; }
button, select, input, textarea { border-radius: 9px; }
button { transition: background .15s, border-color .15s; }
button:hover:not(:disabled) { filter: brightness(1.06); }
button.secondary { background: transparent; }
.toolbar button, .toolbar select { font-size: 14px; padding: 8px 11px; min-height: 40px; }
.toolbar button { max-width: 100%; }
#themeToggle { font-size: 13px; color: var(--muted); background: transparent; border-color: transparent; }
.lounge { gap: 24px; }
.dispatch-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(0, 1.65fr); gap: 36px;
  padding: 34px; background: #392063; color: #ffffff; border-radius: 22px;
  border: 1px solid #b79ad4; box-shadow: 0 18px 45px #321c4b24;
}
.dispatch-hero::before {
  content: ""; position: absolute; z-index: -1; width: 500px; height: 500px;
  border: 1px solid #d8b4ff26; border-radius: 50%; top: -290px; left: -200px;
  box-shadow: 0 0 0 65px #d8b4ff08, 0 0 0 130px #d8b4ff05; pointer-events: none;
}
.dispatch-intro { align-self: center; }
.dispatch-eyebrow { margin: 0 0 16px; color: #eee5ff; font-size: 13px; font-weight: 700; letter-spacing: .18em; }
#dispatchTitle { margin: 0; max-width: 13em; font-size: clamp(27px, 3vw, 38px); font-weight: 750; line-height: 1.35; letter-spacing: -.045em; text-wrap: balance; }
#dispatchSubtitle { color: #eee5ff; font-size: 13px; margin: 14px 0 25px; max-width: 26em; line-height: 1.8; }
.route-mark { display: flex; align-items: center; gap: 12px; max-width: 185px; color: #eee5ff; font-size: 13px; letter-spacing: .16em; }
.route-mark i { flex: 1; border-top: 1px dashed #c3a3df6e; position: relative; }
.route-mark i::before { content: ""; position: absolute; top: -3px; left: -1px; width: 5px; height: 5px; border-radius: 50%; background: #eee5ff; }
.daily-selections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.departure-ticket { min-width: 0; display: flex; flex-direction: column; background: #ffffff; color: #241737; padding: 20px; border-radius: 13px; position: relative; }
.departure-ticket::after { content: ""; position: absolute; top: 59%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #392063; box-shadow: none; }
.ticket-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.ticket-top h3 { margin: 0; font-size: 14px; font-weight: 650; }
.ticket-number { font-family: Georgia, serif; font-size: 28px; line-height: 1; color: #574266; }
.ticket-date { display: flex; align-items: center; gap: 9px; margin: 9px 0 13px; color: #4d3b60; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.ticket-status { height: 5px; width: 5px; border-radius: 50%; background: #6635a7; }
.is-pending .ticket-status { background: #925000; }
.selection-name { display: block; min-height: 2.65em; margin-bottom: 15px; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.3; font-weight: 750; overflow-wrap: anywhere; }
.ticket-departure { margin-top: auto; padding-top: 13px; border-top: 1px dashed #8c7e9e; display: grid; gap: 4px; }
.ticket-departure > span:first-child { font-size: 12px; color: #4d3b60; }
.ticket-departure time, .ticket-departure > span:last-child { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card { border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: none; }
.dispatch-board { padding: 26px; }
.dispatch-board > .section-head { align-items: center; margin-bottom: 24px; }
.section-title { font-size: 18px; letter-spacing: -.02em; }
.section-copy { font-size: 14px; line-height: 1.7; }
#refreshSlots { padding: 8px 13px; font-size: 14px; flex-shrink: 0; }
.dispatch-columns { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); align-items: start; gap: 32px; }
.calendar-pane, .date-pane { min-width: 0; }
.calendar-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 0 0 14px; }
.calendar-heading h3 { font-size: 13px; margin: 0; }
#calendarRange { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.booking-calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.booking-day { padding: 11px 3px 9px; border-radius: 10px; text-align: center; justify-items: center; gap: 5px; min-height: 88px; }
.booking-day-week { font-size: 12px; color: var(--muted); white-space: nowrap; }
.booking-day-date { font-family: Georgia, serif; font-size: 23px; font-weight: 500; line-height: 1.2; }
.booking-day-meta { display: flex; align-items: center; gap: 4px; min-height: 15px; font-size: 12px; }
.day-dot { width: 4px; height: 4px; background: var(--ok); border-radius: 50%; }
[data-state="pending"] .day-dot { background: var(--warn); }
[data-state="approved"] .day-dot { background: var(--accent); }
.booking-day[data-state="approved"] { background: var(--subtle); }
.booking-day.selected { background: var(--btn); color: var(--btn-text); border-color: var(--btn); box-shadow: none; }
.booking-day.selected .booking-day-week, .booking-day.selected .booking-day-meta { color: inherit; opacity: 1; }
.booking-day.selected .day-dot { background: currentColor; }
.own-mark { color: inherit; font-size: 12px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 17px; margin: 17px 0 8px; font-size: 12px; color: var(--muted); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.calendar-legend .legend-pending::before { background: var(--warn); }
.calendar-legend .legend-decided::before { background: var(--accent); }
.calendar-legend .legend-own::before { content: "✓"; background: transparent; width: auto; height: auto; line-height: 1; }
#dateHint { font-size: 13px; line-height: 1.7; }
#availabilitySummary { font-size: 13px; padding-top: 15px; border-top: 1px solid var(--border); margin-top: 20px; font-weight: 400; }
.date-pane { border-left: 1px solid var(--border); padding-left: 30px; }
.date-pane .slot-grid { display: block; }
.date-pane .slot-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.date-pane .slot-top { align-items: center; }
.date-pane .slot-date { font-size: 15px; font-variant-numeric: tabular-nums; }
.date-pane .slot-meta { font-size: 14px; gap: 8px; }
.date-pane .slot-meta > div:not(.departure-highlight):first-child { display: none; }
.date-pane .slot-summary { font-size: 13px; margin: 18px 0 10px; color: var(--muted); }
.date-pane .slot-empty { font-weight: 500; }
.badge { padding: 4px 8px; font-size: 12px; letter-spacing: 0; }
.badge.approved { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.badge.pending { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.app-item { background: var(--subtle); padding: 12px; border-radius: 9px; }
.app-name { font-size: 14px; overflow-wrap: anywhere; }
.date-pane .app-list { max-height: 290px; }
.departure-highlight { border: 0; padding: 0; background: transparent; gap: 3px; }
.departure-highlight strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.departure-value { font-size: 14px; font-weight: 600; }
.app-actions button, .day-actions button { font-size: 13px; padding: 7px 9px; }
.booking-form { margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--border); }
.booking-form h3 { font-size: 13px; margin: 0 0 4px; }
.booking-form label { margin-top: 14px; font-size: 13px; }
.booking-form select { padding: 11px; font-size: 13px; min-height: 43px; }
.booking-form .hint { font-size: 13px; line-height: 1.7; }
#departureTimeHint { margin-top: 6px; }
#departureTimePreview { margin-top: 9px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; }
.preparation-note { padding-left: 11px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 13px; line-height: 1.8; margin: 16px 0 0; }
.booking-actions { margin-top: 17px; }
#bookingSubmit { width: 100%; padding: 13px 16px; font-size: 13px; font-weight: 700; min-height: 46px; }
#bookingSubmit:disabled { background: var(--subtle); color: var(--muted); opacity: 1; border-color: var(--border); }
#bookingMessage { margin: 8px 0 0; font-size: 14px; min-height: 0; }
#bookingMessage:empty { display: none; }
.dispatch-rules { padding: 17px 22px; background: transparent; box-shadow: none; }
.dispatch-rules summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.dispatch-rules summary::-webkit-details-marker { display: none; }
.dispatch-rules .section-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.rules-toggle { font-size: 20px; color: var(--muted); transition: transform .15s; }
.dispatch-rules[open] .rules-toggle { transform: rotate(45deg); }
.dispatch-rules .notice-list { margin-top: 17px; font-size: 14px; line-height: 1.8; padding-right: 14px; }
@media (max-width: 900px) {
  .topbar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .title-wrap { flex: 1 1 240px; }
  .toolbar { flex: 1 1 400px; justify-content: flex-start; }
  .dispatch-hero { grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); padding: 26px; gap: 24px; }
  .dispatch-columns { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .date-pane { padding-left: 24px; }
  .dispatch-board > .section-head { flex-direction: row; align-items: center; }
}
@media (max-width: 700px) {
  .shell { padding: 18px 16px 28px; }
  .topbar { gap: 13px; padding-bottom: 16px; margin-bottom: 18px; }
  .title-wrap { flex: 1 1 100%; }
  .toolbar { flex: 1 1 100%; gap: 6px; }
  .toolbar-status { flex: 1 0 100%; text-align: left; min-height: 18px; font-size: 13px; }
  .toolbar button, .toolbar select { flex: 0 1 auto; max-width: 100%; font-size: 13px; min-height: 40px; padding: 7px 10px; }
  .lounge { gap: 17px; }
  .dispatch-hero { grid-template-columns: 1fr; padding: 22px 18px 18px; gap: 20px; border-radius: 17px; }
  .dispatch-eyebrow { margin-bottom: 9px; font-size: 12px; }
  #dispatchTitle { font-size: 27px; max-width: none; }
  #dispatchSubtitle { font-size: 13px; margin: 9px 0 0; max-width: none; line-height: 1.8; }
  .route-mark { display: none; }
  .daily-selections { gap: 9px; }
  .departure-ticket { padding: 14px 12px; border-radius: 9px; }
  .ticket-top h3 { font-size: 14px; }
  .ticket-number { font-size: 23px; }
  .ticket-date { font-size: 12px; letter-spacing: 0; margin: 8px 0 11px; gap: 5px; }
  .selection-name { font-size: 21px; min-height: 2.6em; margin-bottom: 13px; }
  .ticket-departure { padding-top: 10px; }
  .ticket-departure time, .ticket-departure > span:last-child { font-size: 13px; }
  .dispatch-board { padding: 20px 16px; }
  .dispatch-board > .section-head { gap: 12px; margin-bottom: 21px; }
  .section-title { font-size: 16px; }
  .section-copy { font-size: 13px; }
  .dispatch-columns { grid-template-columns: 1fr; gap: 24px; }
  .date-pane { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 22px; }
  .booking-calendar { gap: 4px; }
  .booking-day { min-height: 79px; border-radius: 8px; padding: 9px 2px 7px; }
  .booking-day-week { font-size: 12px; }
  .booking-day-date { font-size: 21px; }
  .booking-day-meta { font-size: 12px; gap: 3px; }
  #availabilitySummary { padding-top: 12px; margin-top: 13px; }
  .calendar-legend { gap: 8px 12px; }
  .dispatch-rules { padding: 15px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  button, .rules-toggle { transition: none; }
}

.badge.available { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.member-confirm { margin-top: 12px; padding: 12px; border: 1px solid var(--danger); border-radius: 10px; font-size: 13px; }
.member-removed { opacity: 1; border-style: dashed; }
.member-filter { display: flex; gap: 8px; align-items: center; margin: 14px 0; font-size: 13px; }
.member-filter input { width: auto; }

button.warn, .badge-count { background: var(--danger-fill); color: #ffffff; }
button.secondary, .toolbar-link.secondary { background: var(--input); border-color: var(--input-border); }
.modal-card { border: 2px solid var(--border); }
.subtle-card { border-color: var(--border); }
.app-item.rejected { opacity: 1; }
.history-day[aria-pressed="true"] { outline-width: 3px; }