/* Layout is decided in redux (session viewport → tabs | menu) and
   mirrored on <html data-layout>; CSS only styles each mode. */

:root {
  --menu-width: 16rem;
}

/* Ionic's display rules beat the UA's [hidden]. */
[hidden] { display: none !important; }

/* What only a design shows (design/): the sections' pages in the menu (Classic has the header segments),
   section glyphs, Rooms' day dashboard, the stay summary. A design's stylesheet brings them back. */
.ds-only, #nav .nav-pages { display: none; }

ion-split-pane {
  --side-width: var(--menu-width);
  --side-max-width: var(--menu-width);
}

/* Side menu: main signals only; their children are header segments. */
#nav { background: transparent; }
#nav ion-item {
  --background: transparent;
  --border-radius: 8px;
  margin: 2px 8px;
  cursor: pointer;
}
#nav ion-item.selected {
  --background: rgba(var(--ion-color-primary-rgb), 0.12);
  --color: var(--ion-color-primary);
}
#nav ion-item.selected ion-icon { color: var(--ion-color-primary); }

/* Header segments: the whole bar; they share its width, and scroll when they don't fit. */
#segments { width: 100%; }
#segments ion-segment-button {
  flex: 1 0 auto;
  min-width: auto;
  text-transform: none;
}

/* Overflow popover */
#more-list ion-item { cursor: pointer; }
#more-list ion-item.selected { --color: var(--ion-color-primary); }

/* Detail view */
.detail {
  max-width: 48rem;
  margin: 0 auto;
}
.detail h1 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 600;
}
.detail h1 ion-icon { color: var(--ion-color-primary); }
.detail .desc { margin: 0 0 1.5rem; color: var(--ion-color-medium); }
.detail .path {
  font: 0.78rem ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ion-color-medium);
  word-break: break-all;
}
.detail ion-list { border-radius: 12px; }
.detail ion-item { cursor: pointer; }
/* Room rack: one tile per room, edged in its rate's color. */
.detail:has(.rooms) { max-width: 72rem; }
.rack-summary { margin: -1rem 0 0.75rem; color: var(--ion-color-medium); font-size: 0.9rem; }
.rates { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.rate {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rate);
  font-size: 0.85rem;
}
.rate::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rate); }
.rate b { font-weight: 600; }
.floor h2 {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ion-color-medium);
}
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}
.room {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  border: 0;
  cursor: pointer;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border-left: 4px solid var(--rate);
  background: var(--ion-item-background, var(--ion-color-step-50, rgba(127, 127, 127, 0.08)));
  font-size: 0.82rem;
  line-height: 1.35;
}
.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.room-no { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.room-rate { color: var(--rate); font-weight: 600; font-size: 0.75rem; }
.room-beds { margin-top: 0.2rem; }
.room-meta { color: var(--ion-color-medium); }
.room-state { margin-top: auto; padding-top: 0.4rem; }
.room:hover { filter: brightness(1.12); }
.room:focus-visible { outline: 2px solid var(--ion-color-primary); outline-offset: 2px; }
.room.oos { opacity: 0.55; border-left-style: dashed; }
.oos-label { font-size: 0.72rem; font-weight: 600; color: var(--ion-color-medium); }
ion-badge.hk { font-weight: 600; letter-spacing: 0.02em; }
ion-badge.hk[data-action] { cursor: pointer; }

/* Room and rate management: list (master) beside the editor (detail). On a phone one
   shows at a time: the list, or the pod in focus with a back button. */
.detail.view-rooms, .detail.view-rates { max-width: 76rem; }
.manage {
  display: grid;
  grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.master-bar { display: flex; align-items: center; gap: 0.5rem; }
.master-bar ion-searchbar { padding: 0; flex: 1; }
.master-bar ion-button { margin: 0; text-transform: none; }
.filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.25rem; }
.filters ion-select {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35));
  border-radius: 999px;
  font-size: 0.85rem;
  --padding-start: 0;
}
.count { margin: 0.5rem 0; font-size: 0.82rem; color: var(--ion-color-medium); }
.pod-list { border-radius: 12px; padding: 0; }
.pod-list ion-item { --padding-start: 0.75rem; cursor: pointer; border-left: 4px solid var(--rate, transparent); }
.pod-list ion-item.selected { --background: rgba(var(--ion-color-primary-rgb), 0.12); }
.pod-list ion-item.oos { opacity: 0.6; }
.pod-list .room-no { min-width: 2.75rem; margin-inline-end: 0.75rem; font-size: 1.15rem; }
.pod-list h3 { font-size: 0.9rem; }
#rate-list .room-rate { font-size: inherit; }
#rate-count { margin: 0; flex: 1; }
.country { margin-inline-start: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--ion-color-medium); }

.editor {
  position: sticky;
  top: 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-color-step-50, rgba(127, 127, 127, 0.08)));
}
.editor > .empty { border: 0; }
.editor .back { display: none; margin: -0.5rem 0 0.25rem -0.75rem; text-transform: none; }
.editor-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin-bottom: 1rem; }
.editor-title h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.state { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.25rem; margin-bottom: 1rem; }
.field-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ion-color-medium);
}
.state ion-segment-button { text-transform: none; min-width: auto; }
.form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: transparent;
}
.form ion-item {
  --background: var(--ion-background-color);
  --border-radius: 10px;
  --min-height: 56px;
}
.form ion-item.wide { grid-column: 1 / -1; }
.form ion-item.color label { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; }
.form ion-item.color input { width: 3rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.features { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; }
.features ion-chip { margin: 0; }
.editor ion-button { text-transform: none; }
.foot, .confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.foot .path { margin: 0; }
.blocked { font-size: 0.82rem; color: var(--ion-color-medium); }
.confirm {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(var(--ion-color-danger-rgb), 0.12);
}
.confirm span { flex: 1; font-size: 0.9rem; }

html[data-layout="tabs"] .manage { grid-template-columns: minmax(0, 1fr); }
html[data-layout="tabs"] .manage.has-focus .master,
html[data-layout="tabs"] .manage:not(.has-focus) .editor { display: none; }
html[data-layout="tabs"] .editor { position: static; padding: 0; background: none; }
html[data-layout="tabs"] .editor .back { display: inline-flex; }
html[data-layout="tabs"] .form ion-item { --background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08)); }

.empty {
  padding: 2rem 1rem;
  border: 1px dashed var(--ion-color-step-250, rgba(127, 127, 127, 0.35));
  border-radius: 12px;
  text-align: center;
  color: var(--ion-color-medium);
}

/* An empty detail pane: the vaganti mark, centered. logo-white.svg is a mask, so the mark
   takes --brand-mark: white on the dark palette, the logo's red on the light one. */
:root { --brand-mark: #871e1e; }
@media (prefers-color-scheme: dark) { :root { --brand-mark: #fff; } }
.empty.brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  min-height: min(60vh, 28rem);
  border: 0;
}
.brand-mark {
  width: min(55%, 14rem);
  aspect-ratio: 628 / 456; /* logo-white.svg viewBox */
  background: var(--brand-mark);
  opacity: 0.9;
  -webkit-mask: url(./logo-white.svg) center / contain no-repeat;
  mask: url(./logo-white.svg) center / contain no-repeat;
}
.empty.brand p { margin: 0; }
/* The same mark beside the tenant's name in the menu header, right-aligned. */
.tenant-mark { width: 3.5rem; margin-inline-end: 16px; opacity: 1; }

/* Reservations: the tape fills the content area; the stay in focus opens a panel beside it
   (over it, on a phone). vis-timeline is themed with Ionic's colors so dark mode follows. */
.detail.view-tape { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; }
.tape-view { display: flex; flex-direction: column; height: 100%; }
.tape-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.2));
}
.tape-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.82rem; }
.stat { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08)); color: var(--ion-color-medium); }
.stat b { color: var(--ion-text-color); }
.stat.warn { background: rgba(var(--ion-color-warning-rgb), 0.15); }
.stat.bad { background: rgba(var(--ion-color-danger-rgb), 0.18); }
.tape-tools { display: flex; align-items: center; gap: 0.15rem; }
.tape-tools ion-button { margin: 0; text-transform: none; }
.tape-hint { margin-inline-end: 0.5rem; font-size: 0.78rem; color: var(--ion-color-medium); }
html[data-layout="tabs"] .tape-hint { display: none; }
/* The panel's column is always there, so selecting a stay never resizes the tape under the pointer. */
.tape-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
#tape { min-height: 0; height: 100%; }
#tape > .empty { margin: 1rem; }

#tape .vis-timeline { border: 0; font-family: inherit; font-size: 0.82rem; }
#tape .vis-panel.vis-top, #tape .vis-panel.vis-left, #tape .vis-panel.vis-center,
#tape .vis-panel.vis-bottom, #tape .vis-labelset .vis-label { border-color: var(--ion-color-step-150, rgba(127, 127, 127, 0.2)); }
#tape .vis-labelset .vis-label, #tape .vis-time-axis .vis-text { color: var(--ion-text-color); }
#tape .vis-time-axis .vis-text.vis-minor { color: var(--ion-color-medium); }
#tape .vis-time-axis .vis-grid.vis-minor { border-color: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
#tape .vis-time-axis .vis-grid.vis-saturday, #tape .vis-time-axis .vis-grid.vis-sunday { background: rgba(127, 127, 127, 0.06); }
#tape .vis-time-axis .vis-grid.vis-today { background: rgba(var(--ion-color-primary-rgb), 0.08); }
#tape .vis-current-time { background: var(--ion-color-danger); width: 2px; }
#tape .vis-labelset .vis-label .vis-inner { padding: 4px 8px; }
#tape .vis-labelset .vis-label { background: transparent; }
#tape .vis-label.lane-floor { background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08)); cursor: pointer; }
#tape .vis-label.lane-floor:hover { background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
#tape .vis-label.lane-floor .vis-inner { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ion-color-medium); }
.lane-toggle { display: inline-block; width: 1rem; }
.lane-count { margin-inline-start: 0.35rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
#tape .vis-label.lane-unassigned { background: rgba(var(--ion-color-warning-rgb), 0.12); }
#tape .vis-label.lane-oos { opacity: 0.5; }
.lane-no { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ion-text-color, #000); }
.lane-rate { margin-inline-start: 0.4rem; font-size: 0.7rem; font-weight: 600; color: var(--rate); }

#tape .vis-item.bar {
  border-radius: 6px; border-width: 1px; padding: 0;
  color: var(--ion-text-color);
  background: rgba(var(--ion-color-primary-rgb), 0.22); border-color: rgba(var(--ion-color-primary-rgb), 0.6);
}
#tape .vis-item.bar .vis-item-overflow { container-type: inline-size; }
#tape .vis-item.bar .vis-item-content { display: flex; align-items: center; gap: 0.3rem; width: 100%; box-sizing: border-box; padding: 3px 12px; overflow: hidden; }
/* The bar's width picks the label: the name (cut short if need be), then initials. The group code goes first. */
.bar-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-name .short { display: none; }
@container (max-width: 130px) { .bar-tag, .bar-more { display: none; } }
@container (max-width: 64px) {
  .bar-name .full { display: none; }
  .bar-name .short { display: inline; }
  #tape .vis-item.bar .vis-item-content { padding: 3px 6px; justify-content: center; }
}
/* Bars move by their body and resize by their ends: show both. */
#tape .vis-item.bar.vis-editable { cursor: grab; }
#tape .vis-item.bar.vis-editable:active { cursor: grabbing; }
#tape .vis-item.bar .vis-drag-left, #tape .vis-item.bar .vis-drag-right { width: 12px; cursor: ew-resize; }
#tape .vis-item.bar .vis-drag-left { left: 0; }
#tape .vis-item.bar .vis-drag-right { right: 0; }
#tape .vis-item.bar .vis-drag-left::after, #tape .vis-item.bar .vis-drag-right::after {
  content: ''; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 4px;
  border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  opacity: 0.35; transition: opacity 0.12s;
}
#tape .vis-item.bar:hover .vis-drag-left::after, #tape .vis-item.bar:hover .vis-drag-right::after,
#tape .vis-item.bar.focused .vis-drag-left::after, #tape .vis-item.bar.focused .vis-drag-right::after { opacity: 0.9; }
#tape .vis-item.bar .vis-drag-left:hover, #tape .vis-item.bar .vis-drag-right:hover { background: rgba(127, 127, 127, 0.25); }
#tape .vis-item.bar.st-in_house { background: rgba(var(--ion-color-success-rgb), 0.28); border-color: rgba(var(--ion-color-success-rgb), 0.75); }
#tape .vis-item.bar.st-hold { background: rgba(127, 127, 127, 0.12); border-style: dashed; border-color: var(--ion-color-medium); }
#tape .vis-item.bar.st-checked_out { background: rgba(127, 127, 127, 0.1); border-color: rgba(127, 127, 127, 0.3); color: var(--ion-color-medium); }
#tape .vis-item.bar.in-group { border-left: 4px solid var(--ion-color-tertiary); }
#tape .vis-item.bar.shared { box-shadow: inset 0 0 0 2px rgba(var(--ion-color-tertiary-rgb), 0.5); }
#tape .vis-item.bar.conflict {
  border: 2px solid var(--ion-color-danger);
  background-image: repeating-linear-gradient(135deg, rgba(var(--ion-color-danger-rgb), 0.18) 0 6px, transparent 6px 12px);
}
#tape .vis-item.bar.focused { box-shadow: 0 0 0 2px var(--ion-color-primary); z-index: 2; }
#tape .vis-tooltip {
  padding: 0.35rem 0.6rem; border: 0; border-radius: 6px; font-family: inherit; font-size: 0.8rem;
  color: var(--ion-text-color, #000); background: var(--ion-color-step-100, #eee); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.bar-name { font-weight: 600; }
.bar-more { color: var(--ion-color-medium); }
.bar-tag { margin-inline-start: auto; padding: 0 0.35rem; border-radius: 4px; font-size: 0.68rem; font-weight: 600; background: rgba(var(--ion-color-tertiary-rgb), 0.2); }

.stay-panel { display: none; overflow-y: auto; padding: 0.75rem 1rem 1.5rem; border-left: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.2)); background: var(--ion-background-color, #fff); }
.stay-panel { display: block; }
.stay-panel > .empty { margin-top: 1rem; }
.stay-panel .panel-head { display: flex; align-items: flex-start; gap: 0.25rem; margin-left: -0.75rem; }
.stay-panel .panel-head .back { display: inline-flex; margin: 0; }
.stay-panel .code { font-size: 0.8rem; font-weight: 600; color: var(--ion-color-medium); }
.stay-panel h2 { margin: 0.1rem 0; font-size: 1.3rem; font-weight: 600; }
.stay-panel h3 { margin: 1.1rem 0 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ion-color-medium); }
.stay-panel p { margin: 0.25rem 0; }
.stay-panel .muted, .muted { color: var(--ion-color-medium); font-size: 0.85rem; }
.stay-panel a { color: var(--ion-color-primary); cursor: pointer; }
.stay-panel .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.5rem; }
.stay-panel .actions ion-button, .stay-panel ion-button { margin: 0; text-transform: none; }
.stay-panel .why { font-size: 0.78rem; color: var(--ion-color-medium); }
.stay-panel .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.15rem 0; }
.stay-panel .row .grow { flex: 1; min-width: 10rem; }
.stay-panel ion-select, .stay-panel ion-input, .stay-panel select, .stay-panel input {
  flex: 1; min-width: 7rem; min-height: 34px; padding: 0 0.6rem;
  border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: 0.88rem;
  --padding-start: 0;
}
.stay-panel .room-row { display: grid; grid-template-columns: 1fr 1fr auto auto; }
.stay-panel .room-row ion-select { grid-column: 1 / -1; }
.stay-panel .room-row input { min-width: 0; }
.stay-panel ion-textarea { border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); border-radius: 8px; padding: 0 0.6rem; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ledger td { padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger tr.credit .num { color: var(--ion-color-success); }
.ledger tr.total td { font-weight: 600; }
.stay-panel .post { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.stay-panel .post ion-button { justify-self: start; }
.stay-panel .panel-foot { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.stay-panel .panel-foot .path { margin: 0; }

html[data-layout="tabs"] .tape-body { grid-template-columns: minmax(0, 1fr); }
html[data-layout="tabs"] .tape-view:not(.has-focus) .stay-panel { display: none; }
html[data-layout="tabs"] .tape-view.has-focus .stay-panel { position: absolute; inset: 0; z-index: 5; border: 0; }

/* Staff: the HR lab's interface (lab/05-hr/ui.css) fills the content area, edge to edge. */
#root:has(.view-hr) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-hr { max-width: none; height: 100%; }
#hr-root { height: 100%; }
#root:has(.view-crm) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-crm { max-width: none; height: 100%; }
#crm-root { min-height: 100%; }
#root:has(.view-channels) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-channels { max-width: none; height: 100%; }
#channels-root { min-height: 100%; }
#root:has(.view-events) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-events { max-width: none; height: 100%; }
#events-root { min-height: 100%; }
#root:has(.view-fnb) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-fnb { max-width: none; height: 100%; }
#fnb-root { min-height: 100%; }
#root:has(.view-inventory) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-inventory { max-width: none; height: 100%; }
#inventory-root { min-height: 100%; }
#root:has(.view-accounting) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-accounting { max-width: none; height: 100%; }
#accounting-root { min-height: 100%; }
#root:has(.view-payroll) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-payroll { max-width: none; height: 100%; }
#payroll-root { min-height: 100%; }
#root:has(.view-gym) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-gym { max-width: none; height: 100%; }
#gym-root { min-height: 100%; }
#root:has(.view-spa) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-spa { max-width: none; height: 100%; }
#spa-root { min-height: 100%; }
#root:has(.view-store) { --padding-top: 0; --padding-bottom: 0; --padding-start: 0; --padding-end: 0; }
.detail.view-store { max-width: none; height: 100%; }
#store-root { min-height: 100%; }

/* The user: at the foot of the menu, as the last footer tab, and their Profile. */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover;
  background: rgba(var(--ion-color-primary-rgb), 0.15);
  color: var(--ion-color-primary);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
}
ion-item .avatar[slot="start"] { margin-inline-end: 0.75rem; }
#user-foot { border-top: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.2)); }
#user-nav { background: transparent; padding: 4px 0; }
#user-nav ion-item { --background: transparent; --border-radius: 8px; margin: 2px 8px; cursor: pointer; }
#user-nav ion-item.selected { --background: rgba(var(--ion-color-primary-rgb), 0.12); }
#user-nav h3 { margin: 0; font-size: 0.92rem; font-weight: 600; }
#user-nav p { margin: 0; font-size: 0.78rem; color: var(--ion-color-medium); overflow: hidden; text-overflow: ellipsis; }
.user-tab .avatar { width: 1.6rem; height: 1.6rem; font-size: 0.68rem; margin-bottom: 2px; }

.profile { max-width: 34rem; }
.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.profile-head .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.2rem; }
.profile-head h2 { margin: 0 0 0.15rem; font-size: 1.3rem; font-weight: 600; }
.profile-head p { margin: 0; display: flex; align-items: center; gap: 0.35rem; }
.profile > ion-segment { margin-bottom: 1rem; }
.profile ion-segment-button { text-transform: none; }
.profile .form ion-item { --background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08)); }
.profile .foot { margin-top: 1rem; }
.profile .foot p { flex: 1 1 14rem; margin: 0; }
.profile .foot ion-button { text-transform: none; }

.stay-panel .new-guest input:first-child { flex: 2; }

/* ------------------------------------------------------------ the master pane: its switch, and the rail */

/* Menu | Assistant: what the pane shows. */
#master-mode { display: flex; gap: 2px; margin: 0 12px 8px; padding: 2px; border-radius: 10px; background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
#master-mode button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px;
  border: 0; border-radius: 8px; background: none; color: var(--ion-color-medium); font: inherit; font-size: 0.85rem; cursor: pointer;
}
#master-mode button.on { background: var(--ion-background-color, #fff); color: var(--ion-text-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
#master-mode ion-icon { font-size: 16px; }
#assistant { height: 100%; }

/* The rail: the pane as a band of icons. Sections by their icon, the switch stacked, the user's avatar. */
ion-split-pane { --side-min-width: var(--menu-width); }
:root[data-rail="on"] { --menu-width: 4.5rem; } /* over any design's width */
html[data-rail="on"] #menu ion-title, html[data-rail="on"] #menu .tenant-mark,
html[data-rail="on"] #nav ion-label, html[data-rail="on"] #nav .nav-pages,
html[data-rail="on"] #master-mode span, html[data-rail="on"] #user-nav ion-label { display: none; }
html[data-rail="on"] #menu ion-toolbar { --padding-start: 0; --padding-end: 0; }
html[data-rail="on"] #menu ion-buttons { margin: 0 auto; }
html[data-rail="on"] #master-mode { flex-direction: column; margin: 0 10px 8px; }
html[data-rail="on"] #master-mode button { min-height: 36px; }
html[data-rail="on"] #nav ion-item, html[data-rail="on"] #user-nav ion-item { --padding-start: 0; --inner-padding-end: 0; margin: 2px 8px; }
html[data-rail="on"] #nav ion-item > ion-icon, html[data-rail="on"] #nav ion-item > .glyph,
html[data-rail="on"] #user-nav .avatar { margin: 0 auto !important; }
#rail-toggle { --padding-start: 6px; --padding-end: 6px; color: var(--ion-color-medium); }

/* The detail panel, collapsed to a strip: the tape takes the room. */
.panel-toggle { --color: var(--ion-color-medium); }
html[data-panel="collapsed"] .tape-body { grid-template-columns: minmax(0, 1fr) 0; }
html[data-panel="collapsed"] .stay-panel { display: none; }
html[data-layout="tabs"] .panel-toggle { display: none; }

/* ------------------------------------------------------------ new reservation */

.rz h3 { display: flex; align-items: baseline; gap: 0.5rem; }
.rz-count { font-weight: 500; letter-spacing: 0; text-transform: none; }
.rz-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rz-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--ion-color-medium); }
.rz-dates input { width: 100%; min-width: 0; box-sizing: border-box; }
.rz-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.rz-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); font-size: 0.85rem; }
.rz-step span { padding: 0 6px; white-space: nowrap; }
.rz-step button {
  display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); color: inherit; font: inherit;
}
.rz-step button:disabled { opacity: 0.35; cursor: default; }
.rz-rooms { display: flex; flex-direction: column; gap: 6px; }
.rz-later { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.rz-rate { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.8rem; }
.rz-rate b { color: var(--rate); }
.rz-rate span { color: var(--ion-color-medium); }
.rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 6px; }
.rz-room, .rz-later {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); border-top: 3px solid var(--rate, var(--ion-color-step-250)); background: none; color: inherit; font: inherit;
}
.rz-later { flex-direction: row; border-top-width: 1px; font-size: 0.85rem; }
.rz-room b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.rz-room small { font-size: 0.68rem; color: var(--ion-color-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rz-room.on, .rz-later.on { background: rgba(var(--ion-color-primary-rgb), 0.16); border-color: var(--ion-color-primary); }
.rz-search { width: 100%; box-sizing: border-box; }
.rz-matches { display: flex; flex-direction: column; margin-top: 4px; }
.rz-matches button, .rz-guest {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rz-matches button:hover { background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
.rz-matches b, .rz-guest b { display: block; font-size: 0.9rem; }
.rz-matches small, .rz-guest small { display: block; font-size: 0.75rem; color: var(--ion-color-medium); }
.rz-guest { cursor: default; padding: 8px; background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08)); }
.rz-guest > div { flex: 1; min-width: 0; }
.rz-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding: 8px; border-radius: 10px; border: 1px dashed var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); font-size: 0.88rem; }
.rz-new input { flex: 1 1 100%; box-sizing: border-box; }
.rz textarea { width: 100%; box-sizing: border-box; min-height: 3.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--ion-color-step-250, rgba(127, 127, 127, 0.35)); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 0.88rem; resize: vertical; }
/* The total and the two ways out stay in view at the panel's foot. */
.rz-foot {
  position: sticky; bottom: -1.5rem; z-index: 2; display: flex; align-items: center; gap: 0.4rem;
  margin: 1.25rem -1rem -1.5rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.2)); background: var(--ion-background-color, #fff);
}
.rz-total { flex: 1; min-width: 0; }
.rz-total b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rz-total small { display: block; font-size: 0.75rem; color: var(--ion-color-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-foot ion-button { margin: 0; text-transform: none; }
.stay-panel .empty p { margin: 0.75rem 0 0; }
html[data-layout="tabs"] .tape-view.reserving .stay-panel { display: block; position: absolute; inset: 0; z-index: 5; border: 0; }
/* With the form in it, the panel ends at the form's foot. */
.tape-view.reserving .stay-panel { padding-bottom: 0 !important; }
.tape-view.reserving .rz-foot { bottom: 0; margin-bottom: 0; }

/* ------------------------------------------------------------ fields, segments, discounts */

/* Ionic inputs in the panel: room inside the box, no underline. */
.stay-panel ion-input { padding: 0 !important; --padding-start: 0.7rem; --padding-end: 0.7rem; --highlight-height: 0; --highlight-color-focused: transparent; }
.stay-panel ion-select { padding: 0 0.7rem; }

/* The tape's days: a segment. */
.seg-days { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
.seg-days button { padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: var(--ion-color-medium); font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.seg-days button.on { background: var(--ion-background-color, #fff); color: var(--ion-text-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

/* New reservation: nights as a segment, the selects in a row. */
.rz .panel-head h2, .stay-panel .panel-head > h2 { align-self: center; margin: 0; }
.rz-nights { display: flex; align-items: center; gap: 2px; margin-top: 0.6rem; padding: 2px; border-radius: 10px; background: var(--ion-color-step-100, rgba(127, 127, 127, 0.14)); }
.rz-nights button { flex: 1; min-width: 0; padding: 6px 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.rz-nights button.on { background: var(--ion-background-color, #fff); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.rz-nights span { padding: 0 8px 0 4px; font-size: 0.75rem; color: var(--ion-color-medium); }
.rz-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.rz-selects label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--ion-color-medium); }
.rz-selects select { width: 100%; min-width: 0; }
.rz-total s, .rz-rate s { opacity: 0.55; font-weight: 400; margin-right: 2px; }
.rz-new span { display: inline-flex; align-items: center; gap: 6px; }

/* Discounts: a tag, the percent in a list, a line in the panel. */
.disc { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  color: var(--ion-color-success); background: rgba(var(--ion-color-success-rgb), 0.14); }
.disc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.pod-list .disc-tags { display: flex; margin: 4px 0 0; }
.disc-pct { min-width: 3.2rem; margin-inline-end: 0.75rem; font-size: 1.05rem; font-weight: 700; color: var(--ion-color-success); font-variant-numeric: tabular-nums; }
.stay-panel .discounts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.manage-note { margin: -0.75rem 0 1rem; font-size: 0.85rem; color: var(--ion-color-medium); }
.field-label .hint { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.detail.view-discounts { max-width: 76rem; }

/* A detail's head: the name keeps its room. Tags beside it wrap within a capped column instead of taking the
   width they want, and go under the name when the pane is narrow (the pane is the container, not the window). */
.hr .detail-pane { container-type: inline-size; }
.hr .hero { grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content); }
.hr .hero h1 { overflow-wrap: break-word; }
.hr .hero-tags { max-width: 300px; }
@container (max-width: 720px) {
  .hr .hero { grid-template-columns: auto minmax(0, 1fr); }
  .hr .hero > :nth-child(3) { grid-column: 1 / -1; justify-self: start; }
  .hr .hero-tags { max-width: none; justify-content: flex-start; }
}