/* O-15, the owner's month calendar (S12): the design system's OwnerCalendarCell and SelectionBar, copied from its
   bundle.css as they are, and the panel on its BottomSheet (app.css). The month buttons and the legend are the guest
   picker's (picker.css). S20 adds the booking bars (bh-oweek-bars) over each week's 44 px lanes. */

.bh-ocal-month { display: grid; gap: var(--space-3); min-width: 0; }
/* "Calendar" heads the page from 1024 px, as the desktop board draws it; on phones only screen readers get it. */
.bh-ocal-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1024px) {
  .bh-ocal-page-title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
}
.bh-ocal-heading { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; text-align: center; }
.bh-ocal-title { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: var(--weight-bold); }
/* The status row: a past day's notice (O15_Past) and the SaveStatus, with Today at the right */
.bh-ocal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bh-ocal-today { margin-left: auto; }
.bh-ocal-notice { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-ocal-empty-action { justify-self: start; }

/* The month: seven columns from Monday, one week per row */
.bh-ocal { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.bh-ocal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: var(--space-1) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); text-align: center; }
.bh-oweek { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bh-oweek + .bh-oweek { border-top: 1px solid var(--line); }
.bh-ocell {
  -webkit-appearance: none; appearance: none;
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-width: 0; min-height: 64px; margin: 0; padding: var(--space-1) var(--space-1) 28px;
  border: 0; border-right: 1px solid var(--line);
  background-color: var(--card); color: var(--ink-1);
  font-family: inherit; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer;
}
.bh-ocell:last-child { border-right: 0; }
.bh-ocell-top { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-height: var(--leading-cal); }
.bh-ocell-day { width: fit-content; font-size: var(--text-cal); line-height: var(--leading-cal); color: var(--ink-2); }
.bh-ocell-min { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 4px; border: 1px solid var(--ink-2); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-1); font-size: var(--text-cal); line-height: 14px; }
.bh-ocell-price { font-size: var(--text-small); line-height: var(--leading-cal); font-weight: var(--weight-bold); }
/* Custom price: every price is bold, so a night with a custom price adds a 4 px primary dot under the price. It takes
   no height, so cell sizes don't change; the cell's name adds ", custom price". */
.bh-ocell.is-custom .bh-ocell-price { position: relative; align-self: flex-start; }
.bh-ocell.is-custom .bh-ocell-price::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-pill); background: var(--primary); }
.bh-ocell-dot { display: inline-block; flex: none; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--primary); }
.bh-ocell:hover { background-color: var(--sunken); }
.bh-ocell.is-today .bh-ocell-day { color: var(--ink-1); font-weight: var(--weight-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bh-ocell.is-closed { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-input) 6px 7px); }
.bh-ocell.is-closed .bh-ocell-day { padding: 0 2px; border-radius: var(--radius-control); background: var(--card); }
.bh-ocell.is-closed .bh-ocell-price { visibility: hidden; }
.bh-ocell.is-selected { background-color: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.bh-ocell.is-past { background-color: var(--sunken); cursor: default; }
.bh-ocell.is-past .bh-ocell-day, .bh-ocell.is-past .bh-ocell-price { color: var(--ink-3); font-weight: var(--weight-regular); }
/* The first and last selected days: their number filled, as PickerDay's start and end. */
.bh-ocell.is-first .bh-ocell-day, .bh-ocell.is-last .bh-ocell-day { padding: 0 4px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: var(--weight-bold); text-decoration: none; }
/* Inset focus ring (2 px gap, 2 px primary): the grid clips to its rounded corners. */
.bh-ocell:focus-visible { z-index: 2; box-shadow: none; outline: 2px solid var(--primary); outline-offset: -4px; }
.bh-ocell.is-selected:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); outline-offset: -6px; }
.bh-ocell--blank, .bh-ocell--blank:hover { background-color: var(--page); cursor: default; }
/* Phone and touch: an 88 px cell, a 44 px date area above a 44 px lane for S20's booking bars. */
@media (max-width: 1023.98px), (pointer: coarse) {
  .bh-ocell { min-height: 88px; padding-bottom: var(--target-min); }
}

/* The legend's samples */
.bh-ocal-key { flex: none; display: inline-grid; place-items: center; width: 34px; height: 20px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.bh-ocal-key--price { font-size: var(--text-small); font-weight: var(--weight-bold); }
.bh-ocal-key--today { font-size: var(--text-cal); font-weight: var(--weight-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bh-ocal-key--closed, .bh-ocal-key--past { border: 1px solid var(--line); background-color: var(--sunken); }
.bh-ocal-key--closed { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-input) 6px 7px); }

/* SelectionBar: sticky above the tab bar, and at the bottom from 1024 px; focused cells never hide under it */
.bh-selbar {
  position: sticky; bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 calc(var(--page-pad) * -1); padding: var(--space-3) var(--page-pad);
  background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-overlay);
}
.bh-selbar-text { flex: 1 1 150px; min-width: 0; display: grid; }
.bh-selbar-dates { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.bh-selbar-meta { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-selbar-actions { display: flex; gap: var(--space-2); }
html:has(.bh-selbar) { scroll-padding-bottom: calc(var(--shell-tabbar-h) + 96px); }
@media (min-width: 1024px) {
  .bh-selbar { bottom: 0; margin: 0; padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  html:has(.bh-selbar) { scroll-padding-bottom: 96px; }
}

/* The panel (BottomSheet): its form fills the sheet, so the body scrolls between the head and the foot */
.bh-ocal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bh-ocal-fields { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.bh-ocal-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-ocal-reset { display: grid; gap: var(--space-1); justify-items: start; }
/* S-08: while the dashboard is offline, js/reconnect.js turns Save off and this line says why. */
.bh-ocal-offline { display: none; flex: 1 1 100%; align-items: center; gap: var(--space-2); color: var(--warning-ink); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-bold); }
.bh-offline .bh-ocal-offline { display: flex; }