/* Bookings redesign M10 (#2348) — sheet under 1024px, right panel from 1024px.
   The sheet reuses .modal/.modal-content; this only turns the dialog into a
   bottom sheet across the whole phone-and-tablet range (the shared modal does
   that only below 680px). */
@media (max-width: 1023px) {
  .bk-sheet { align-items: flex-end; padding: 0; }
  .bk-sheet .bk-sheet-content {
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    --sheet-y: 26px;
  }
}

.bk-detail-body { min-width: 0; }

.bk-panel-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}
.bk-panel-title:focus { outline: none; }

/* Selected row: a bar, not colour alone — aria-current carries the meaning. */
[data-bookings-row][aria-current="true"] {
  box-shadow: inset 3px 0 0 var(--trip-main-accent, currentColor);
}

/* Desktop layout (#2351, R10.1): list left, one panel right. The panel host is
   only ever in the DOM from 1024px, so these rules need no media query except
   for the title, which phones do not show. */
.bk-title { display: none; margin: 0 auto 0 0; font-size: var(--fs-xl); font-weight: 700; }
.bk-layout { display: block; }
.bk-list-col { min-width: 0; }
@media (min-width: 1024px) {
  .bk-title { display: block; }
  .bk-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3xl); align-items: start; }
  .bk-panel {
    position: sticky;
    top: var(--space-lg);
    max-height: calc(100dvh - 2 * var(--space-lg));
    overflow-y: auto;
    padding: var(--space-xl);
    border: 2px solid var(--df-ink);
    border-radius: var(--radius-md);
    background: var(--df-panel);
  }
  .bk-panel:empty { display: none; }
}

/* Add sheet (A1, #2352): upload first, then five kind tiles. */
.bk-add-upload { width: 100%; min-height: var(--tap-min); justify-content: center; margin-bottom: var(--space-md); }
.bk-add-email { min-height: var(--tap-min); margin-bottom: var(--space-md); }
.bk-add-note { margin-bottom: var(--space-md); }
.bk-add-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.bk-add-tile { min-height: var(--tap-min); justify-content: flex-start; }

/* The opened booking (#2355, M5): proof first, then place, cost and who booked.
   Targets are 44px; nothing here relies on colour alone. */
.bk-opened { display: flex; flex-direction: column; gap: var(--space-lg); }
.bk-opened-sub { margin: 0; color: var(--df-ink-soft); }
.bk-ticket-badge {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  background: var(--df-brand);
  color: var(--df-brand-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.bk-ticket-ends { display: flex; align-items: flex-start; gap: var(--space-lg); }
.bk-ticket-end { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.bk-ticket-end-to { text-align: right; }
.bk-ticket-time { font-size: var(--fs-2xl, 1.75rem); font-weight: 800; line-height: 1; }
.bk-ticket-place { color: var(--df-ink-soft); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.bk-ticket-arrow { margin-top: var(--space-xs); }

.bk-proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 2px dashed var(--df-ink);
  border-radius: var(--df-radius-card);
}
.bk-proof-label { margin: 0; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-ink-soft); }
.bk-proof-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  padding: 0 var(--space-lg);
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  color: var(--df-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.bk-details { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.bk-facts { list-style: none; margin: 0; padding: 0; }
.bk-fact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--df-hair);
  background: none;
  color: var(--df-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.bk-fact-link { cursor: pointer; }
.bk-fact-icon { flex: none; color: var(--df-ink-soft); }
.bk-fact-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-fact-action { font-weight: 700; text-decoration: underline; }
.bk-fact-btn { min-height: var(--tap-min); border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

.bk-opened-actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.bk-opened-edit { flex: 1; min-height: var(--tap-min); }
.bk-opened-more { min-width: var(--tap-min); min-height: var(--tap-min); }
.bk-opened-menu {
  flex-basis: 100%;
  border: 2px solid var(--df-ink);
  border-radius: var(--df-radius-card);
  background: var(--df-panel);
  overflow: hidden;
}
.bk-opened-menu[hidden] { display: none; }
.bk-menu-item {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  background: none;
  color: var(--df-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bk-menu-item:hover { background: var(--df-hair); }
.bk-menu-item-danger { color: var(--vn-coral); }

/* D3 proof viewer (#2356): full screen on phones, a large dialog from 1024px. */
.bk-proof-modal .bk-proof-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
}
.bk-proof-stage { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; background: var(--df-panel); }
.bk-proof-file { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.bk-proof-actions { display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.bk-proof-actions .bk-proof-link { flex: 1; }
@media (min-width: 1024px) {
  .bk-proof-modal .bk-proof-viewer { height: 90vh; height: 90dvh; border-radius: var(--df-radius-card); }
}

/* M6 — Who has booked (#2364). Every photo is the same size; state is ring + tick + words. */
.bk-who-leg { padding: var(--space-md) 0; border-bottom: 1px solid var(--df-hair); }
.bk-who-meta { color: var(--df-ink-soft); margin-bottom: var(--space-sm); }
.bk-who-photos { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.bk-who-photo {
  position: relative;
  box-sizing: border-box;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border-radius: 50%;
  background: var(--df-panel);
  color: var(--df-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-who-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bk-who-photo.booked { border: 2px solid var(--df-ink); }
.bk-who-photo.pending { border: 2px dashed var(--df-ink-soft); opacity: 0.6; }
.bk-who-photo.sel { outline: 2px solid var(--df-ink); outline-offset: 2px; opacity: 1; }
.bk-who-tick {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--df-ink);
  color: var(--df-panel);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-who-line { margin: var(--space-sm) 0 0; }
.bk-who-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.bk-who-btn { min-height: var(--tap-min); }