.crm-guest-360-view {
  /* Full bleed, matching .portal-home-view: cancel the app-shell padding so
     the rail reaches the left and bottom edges of the viewport. The shared
     top bar and context nav are hidden on CRM routes (app.js), so the rail
     alone carries brand, session and the way back to the portal. */
  min-width: 0;
  max-width: none;
  margin: 0 -22px -40px;
  padding: 0;
}

/* Portal-owned case management */
.crm-case-directory,
.crm-case-detail,
.crm-case-settings {
  display: grid;
  gap: 1rem;
}

.crm-case-toolbar {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.crm-case-toolbar h3,
.crm-case-toolbar p { margin: 0; }

.crm-case-toolbar .eyebrow {
  margin-bottom: 0.25rem;
}

.crm-case-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.danger-button {
  background: #fff;
  border: 1px solid #b42318;
  border-radius: 0.45rem;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  padding: 0.62rem 0.9rem;
}

.crm-case-table tbody tr {
  cursor: pointer;
}

.crm-case-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-case-severity,
.crm-case-status {
  align-items: center;
  display: inline-flex;
  font-weight: 650;
  gap: 0.35rem;
  white-space: nowrap;
}

.crm-case-severity > span {
  background: #16a34a;
  border-radius: 999px;
  height: 0.65rem;
  width: 0.65rem;
}

.crm-case-severity.is-medium > span { background: #fbbf24; }
.crm-case-severity.is-high > span { background: #dc2626; }
.crm-case-severity.is-critical > span {
  background: #991b1b;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.crm-case-status {
  background: var(--ok-soft);
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand-gold) 55%, var(--crm-ivory-ink));
  padding: 0.22rem 0.55rem;
}

.crm-case-status.is-closed {
  background: var(--surface-soft);
  color: var(--muted);
}

/* Aging signals (audit F15): a due date in the past earns a pill, and a
   days-active count past the staleness threshold tints amber. Both apply to
   open cases only — mapCaseSummary and caseIsStale enforce that. */
.crm-case-overdue,
.crm-case-imported-chip {
  background: #fee2e2;
  border-radius: 999px;
  color: #991b1b;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}

.crm-case-days.is-stale {
  color: #92400e;
  font-weight: 750;
}

.crm-case-context {
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--line));
  border-radius: 0.65rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  padding: 0.9rem;
}

.crm-case-context > div {
  align-content: start;
  display: grid;
  gap: 0.18rem;
}

.crm-case-context span,
.crm-case-form label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.crm-case-context button {
  justify-self: start;
  text-align: left;
}

/* Linked reservations read as a list of stays, in the case header and in the
   reservation record alike, so one set of rules dresses both. */
.crm-linked-context {
  grid-column: 1 / -1;
}

.crm-linked-list {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-linked-list > li {
  display: grid;
  gap: 0.1rem;
}

.crm-linked-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.crm-linked-list small,
.crm-linked-quiet {
  color: var(--muted);
  font-size: 0.76rem;
}

/* Arriving from a directory's Linked cell, the entry says so once and then
   settles; nothing keeps state alive to undo it. */
.crm-linked-list.is-linked-highlight {
  animation: crm-linked-flash 1.8s ease-out 1;
  border-radius: 0.4rem;
}

@keyframes crm-linked-flash {
  from {
    background: color-mix(in srgb, var(--brand-gold) 26%, transparent);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--brand-gold) 18%, transparent);
  }

  to {
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-linked-list.is-linked-highlight {
    animation: none;
    background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
  }
}

.crm-case-context-feedback {
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 30%, var(--line));
  display: grid;
  gap: 0.65rem;
  grid-column: 1 / -1;
  padding-top: 0.8rem;
}

.crm-case-context-feedback > header,
.crm-case-context-feedback-item > header {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.crm-case-context-feedback > header > div,
.crm-case-context-feedback-item > header > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.crm-case-context-feedback > header strong {
  color: var(--strong);
}

.crm-case-context-feedback > header small,
.crm-case-context-feedback-item > header span,
.crm-case-context-feedback-item > header small,
.crm-case-field-help {
  color: var(--muted);
  font-size: 0.74rem;
}

.crm-case-reload-failure-body {
  display: grid;
  gap: 0.55rem;
  padding: 14px 16px;
}

.crm-case-context-feedback-list {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.crm-case-context-feedback-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
}

.crm-case-context-feedback-item > header > div {
  color: var(--muted);
  font-size: 0.74rem;
}

.crm-case-context-feedback-score {
  color: var(--ok);
}

.crm-case-context-feedback-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.crm-case-context-feedback-ratings > span {
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--surface));
  border-radius: 0.35rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.3rem 0.45rem;
}

.crm-case-context-feedback-ratings small {
  color: var(--muted);
  font-size: 0.66rem;
}

.crm-case-context-feedback-item p,
.crm-case-context-feedback-empty {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
}

.crm-case-form,
.crm-case-form fieldset {
  border: 0;
  display: grid;
  gap: 1rem;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.crm-case-form-grid,
.crm-case-text-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-case-form label {
  display: grid;
  gap: 0.35rem;
}

.crm-case-form input,
.crm-case-form select,
.crm-case-form textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.42rem;
  box-sizing: border-box;
  color: var(--strong);
  font: inherit;
  padding: 0.62rem 0.7rem;
  width: 100%;
}

.crm-case-form input:disabled,
.crm-case-form select:disabled,
.crm-case-form textarea:disabled {
  background: var(--surface-soft);
  color: var(--muted);
}

.crm-case-severity-select {
  font-weight: 700 !important;
}

.crm-case-severity-select.is-low { border-left: 0.42rem solid #16a34a; }
.crm-case-severity-select.is-medium { border-left: 0.42rem solid #fbbf24; }
.crm-case-severity-select.is-high { border-left: 0.42rem solid #dc2626; }
.crm-case-severity-select.is-critical { border-left: 0.42rem solid #991b1b; }

.crm-case-severity-select option[value="low"] { color: #15803d; }
.crm-case-severity-select option[value="medium"] { color: #a16207; }
.crm-case-severity-select option[value="high"],
.crm-case-severity-select option[value="critical"] { color: #b91c1c; }

.crm-case-classifications {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.65rem;
  padding-top: 1rem;
}

.crm-case-classifications header h4,
.crm-case-classifications header p {
  margin: 0;
}

.crm-case-classification-row {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-case-form-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
}

.crm-case-search-actions {
  align-items: end;
  display: flex;
  gap: 0.55rem;
}

.crm-case-reservation-matches {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.crm-case-reservation-matches button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  text-align: left;
}

.crm-case-log ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-case-log li {
  align-items: flex-start;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr;
  margin-left: 0.38rem;
  padding: 0 0 1rem 1rem;
}

.crm-case-log-changes {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  display: grid;
  gap: 0.15rem;
}

.crm-case-log-dot {
  background: var(--brand-gold);
  border: 3px solid var(--surface);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--brand-gold);
  height: 0.55rem;
  margin-left: -1.48rem;
  margin-top: 0.2rem;
  width: 0.55rem;
}

.crm-case-log p {
  color: var(--muted);
  margin: 0.15rem 0 0;
}

.crm-case-summary-list {
  display: grid;
  gap: 0.5rem;
}

.crm-case-summary-list > button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  padding: 0.68rem 0.75rem;
  text-align: left;
}

.crm-case-summary-list > button > span {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.crm-create-case-button,
.crm-table-action,
.crm-inline-create-case {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .crm-case-context,
  .crm-case-form-grid,
  .crm-case-text-grid,
  .crm-case-classification-row {
    grid-template-columns: 1fr;
  }

  .crm-case-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

}

.crm-workspace {
  --crm-navigation-width: 232px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--crm-navigation-width) minmax(0, 1fr);
  /* clip, not hidden: a hidden box is still a scroll container, so focusing
     content that overflows the grid drags the whole workspace sideways and
     parks the navigation rail off the viewport edge. clip cannot scroll —
     which also keeps it out of the sticky rail's containing scrollport. */
  overflow: clip;
  background: var(--surface);
  transition: grid-template-columns 160ms ease;
}

.crm-workspace.is-navigation-collapsed {
  --crm-navigation-width: 66px;
}

.crm-navigation {
  /* Portico rail: the lock screen's dark brand panel carried into the app
     shell. Ink and gold resolve from the appearance tokens so admin palette
     overrides keep working; the ivory constants match auth.css, which pairs
     the same ivory with the same ink ground. */
  --crm-rail-ivory: #f2efe9;
  --crm-rail-text: rgba(242, 239, 233, 0.72);
  --crm-rail-faint: rgba(242, 239, 233, 0.45);
  --crm-rail-line: rgba(242, 239, 233, 0.16);
  min-width: 0;
  /* Pinned to the viewport while the page scrolls: the workspace column
     stretches with the content, the rail itself stays put. The page (window)
     remains the only scroll container, so table scroll memory and the sticky
     horizontal scrollbar proxy keep their viewport anchoring. */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--heading-color) 88%, var(--surface));
  background: var(--heading-color);
  color: var(--crm-rail-text);
  scrollbar-color: rgba(242, 239, 233, 0.3) transparent;
}

.crm-navigation-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid var(--crm-rail-line);
}

.crm-navigation-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0;
  color: var(--crm-rail-ivory);
  background: transparent;
}

.crm-navigation-toggle:hover,
.crm-navigation-toggle:focus-visible {
  border-color: var(--crm-rail-line);
  background: rgba(242, 239, 233, 0.08);
}

.crm-navigation-toggle > span {
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.crm-navigation-brand {
  min-width: 0;
  display: grid;
  line-height: 1.15;
  white-space: nowrap;
}

.crm-navigation-brand strong {
  color: var(--brand-gold-light);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* A hotel-scoped session reads one house and the rail says which, stacked
   under the wordmark the way the portal rail steps ATRIUM over PORTAL. */
.crm-navigation-brand-scope {
  color: var(--crm-rail-text);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The way back to the portal replaces the hidden top bar's context nav. */
.crm-navigation-portal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 0;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--crm-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.crm-navigation-portal:hover,
.crm-navigation-portal:focus-visible {
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.crm-navigation-portal svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.crm-navigation-body {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.crm-navigation-home,
.crm-navigation-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 6px;
  padding: 0 11px;
  color: var(--crm-rail-text);
  background: transparent;
  font: inherit;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.crm-navigation-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  background: color-mix(in srgb, var(--brand-gold) 26%, transparent);
  color: var(--brand-gold-light);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-navigation-home:hover,
.crm-navigation-home:focus-visible,
.crm-navigation-item:hover,
.crm-navigation-item:focus-visible {
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
}

.crm-navigation-home.active,
.crm-navigation-item.active {
  position: relative;
  color: var(--brand-gold-light);
  background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.crm-navigation-home.active::before,
.crm-navigation-item.active::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

.crm-navigation-group {
  display: grid;
  gap: 2px;
}

.crm-navigation-group-toggle {
  justify-content: flex-start;
}

.crm-navigation-chevron {
  margin-inline-start: auto;
  color: var(--crm-rail-faint);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.crm-navigation-group-toggle[aria-expanded="false"] .crm-navigation-chevron {
  transform: rotate(-90deg);
}

.crm-navigation-subitems {
  display: grid;
  gap: 2px;
  padding-inline-start: 18px;
}

.crm-navigation-subitem {
  min-height: 38px;
  padding-inline-start: 15px;
  font-size: 0.73rem;
  font-weight: 400;
}

.crm-navigation-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.crm-navigation-section {
  margin-top: 19px;
}

.crm-navigation-section h3 {
  margin: 0 10px 7px;
  color: var(--crm-rail-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-workspace.is-navigation-collapsed .crm-navigation-brand,
.crm-workspace.is-navigation-collapsed .crm-navigation-section h3,
.crm-workspace.is-navigation-collapsed .crm-navigation-home > span,
.crm-workspace.is-navigation-collapsed .crm-navigation-item > span,
.crm-workspace.is-navigation-collapsed .crm-navigation-subitems,
.crm-workspace.is-navigation-collapsed .crm-navigation-portal,
.crm-workspace.is-navigation-collapsed .crm-navigation-foot {
  display: none;
}

.crm-workspace.is-navigation-collapsed .crm-navigation-header,
.crm-workspace.is-navigation-collapsed .crm-navigation-home,
.crm-workspace.is-navigation-collapsed .crm-navigation-item {
  justify-content: center;
}

.crm-workspace.is-navigation-collapsed .crm-navigation-home.active::before,
.crm-workspace.is-navigation-collapsed .crm-navigation-item.active::before {
  inset-inline-start: -8px;
}

/* The house line closes the rail the way it closes the lock screen's brand
   panel: a ticked hairline over the Cormorant flourish. Hidden while the rail
   is collapsed to its icon strip. */
.crm-navigation-foot {
  display: grid;
  gap: 10px;
  padding: 12px 16px 15px;
}

/* Session moved down from the hidden top bar, in the home rail's quiet
   text-button vocabulary (.portal-rail-session). */
.crm-navigation-session {
  display: grid;
  gap: 2px;
  margin-bottom: 2px;
}

.crm-navigation-session span {
  overflow: hidden;
  color: rgba(242, 239, 233, 0.9);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-navigation-session button {
  width: auto;
  min-height: 30px;
  justify-self: start;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: rgba(242, 239, 233, 0.55);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.crm-navigation-session button:hover,
.crm-navigation-session button:focus-visible {
  color: var(--brand-gold-light);
  background: transparent;
  text-decoration: underline;
}

.crm-navigation-foot-rule {
  position: relative;
  height: 1px;
  background: var(--crm-rail-line);
}

.crm-navigation-foot-rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--brand-gold);
}

.crm-navigation-foot p {
  margin: 0;
  color: var(--brand-gold-light);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-style: italic;
  white-space: nowrap;
}

/* Only the phone drawer (max-width: 767px block) ever shows the scrim. */
.crm-navigation-scrim {
  display: none;
}

.crm-workspace-main {
  min-width: 0;
  background: color-mix(in srgb, var(--surface-soft) 38%, var(--surface));
}

.crm-workspace-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 14px clamp(18px, 2.4vw, 30px);
  background: var(--surface);
}

.crm-workspace-header h2 {
  margin: 2px 0 3px;
  color: var(--heading-color);
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Portico eyebrows: the sign-in panel's letter-spaced Tenor Sans label in the
   gold-ink mix, scoped to CRM so other modules keep the portal default. */
.crm-workspace .eyebrow,
.crm-guest-360-view .eyebrow {
  color: var(--ok);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.crm-workspace-page {
  padding: clamp(14px, 2vw, 24px);
}

.crm-workspace:not([data-crm-area="accounts"]) .crm-search-panel {
  display: none;
}

.crm-workspace-empty {
  grid-template-columns: auto minmax(220px, 1fr) auto;
}

.crm-workspace-empty .eyebrow {
  margin-bottom: 5px;
}

.crm-feedback-layout {
  display: grid;
  gap: 1rem;
}

.crm-stay-access {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--crm-ivory-hair));
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--crm-ivory-card));
}

.crm-stay-access h4,
.crm-stay-access p {
  margin: 0;
}

.crm-stay-access-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-stay-access-codes code {
  padding: 0.45rem 0.65rem;
  border-radius: 0.45rem;
  background: var(--crm-ivory-card);
  border: 1px solid var(--crm-ivory-hair);
  font-size: 0.95rem;
  font-weight: 700;
}

.crm-exclusivi-emails {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.9rem;
  background: var(--crm-ivory-card);
}

.crm-exclusivi-emails h4,
.crm-exclusivi-emails p {
  margin: 0;
}

.crm-exclusivi-email-list {
  display: grid;
  gap: 0.55rem;
}

.crm-exclusivi-email {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--accent) 3%, var(--crm-ivory-card));
}

.crm-exclusivi-email > span,
.crm-exclusivi-email small {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.78rem;
}

.crm-exclusivi-email > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.crm-feedback-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.crm-feedback-summary > div,
.crm-feedback-card,
.crm-feedback-state {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 0.9rem;
  background: var(--surface);
}

.crm-feedback-summary > div {
  padding: 0.85rem 1rem;
}

.crm-feedback-summary span,
.crm-feedback-summary strong {
  display: block;
}

.crm-feedback-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.crm-feedback-summary strong {
  margin-top: 0.2rem;
  font-size: 1.35rem;
}

.crm-feedback-list {
  display: grid;
  gap: 0.9rem;
}

.crm-feedback-card {
  padding: 1rem 1.1rem;
}

.crm-feedback-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.crm-feedback-card h4,
.crm-feedback-card p {
  margin: 0;
}

.crm-feedback-score {
  color: var(--ok);
  font-size: 1.35rem;
  white-space: nowrap;
}

.crm-feedback-date,
.crm-feedback-coverage {
  color: var(--muted);
  font-size: 0.82rem;
}

.crm-feedback-card blockquote {
  margin: 0.9rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 8%, transparent);
  white-space: pre-wrap;
}

.crm-feedback-narrative,
.crm-feedback-ratings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.9rem 0 0;
}

.crm-feedback-narrative > div,
.crm-feedback-ratings > span {
  padding: 0.7rem 0.8rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--brand-gold) 11%, var(--surface));
}

.crm-feedback-narrative dt,
.crm-feedback-ratings small {
  color: var(--muted);
  font-size: 0.75rem;
}

.crm-feedback-narrative dd {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
}

.crm-feedback-ratings strong {
  display: block;
  margin-top: 0.2rem;
}

.crm-feedback-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.crm-feedback-card footer span {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  font-size: 0.75rem;
}

.crm-feedback-state {
  display: flex;
  gap: 0.8rem;
  padding: 1rem;
}

.crm-feedback-state.error {
  border-color: color-mix(in srgb, var(--error) 55%, var(--line));
}

.crm-feedback-state p {
  margin: 0.35rem 0 0;
}

.crm-feedback-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--brand-gold) 35%, var(--line));
  border-top-color: var(--ok);
  border-radius: 50%;
  animation: crm-feedback-spin 0.8s linear infinite;
}

@keyframes crm-feedback-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .crm-feedback-summary,
  .crm-feedback-narrative,
  .crm-feedback-ratings {
    grid-template-columns: 1fr;
  }
}

.crm-reservation-directory {
  display: grid;
  gap: 0;
}

.crm-directory-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.crm-directory-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 1rem 1.1rem 0.8rem;
}

.crm-directory-tabs button:hover,
.crm-directory-tabs button:focus-visible,
.crm-directory-tabs button.active {
  color: var(--accent);
}

.crm-directory-tabs button.active {
  border-bottom-color: var(--accent);
}

.crm-directory-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem;
}

.crm-directory-heading,
.crm-directory-results > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.crm-directory-heading h3,
.crm-directory-heading p,
.crm-directory-results h4,
.crm-directory-results p {
  margin: 0;
}

.crm-directory-heading h3 {
  color: var(--heading-color);
  font-size: 1.35rem;
  margin-top: 0.15rem;
}

.crm-directory-heading p:last-child,
.crm-directory-results p,
.crm-directory-results > header > span,
.crm-directory-header-tools > span,
.crm-directory-as-of {
  color: var(--muted);
  font-size: 0.82rem;
}

.crm-directory-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-directory-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.crm-directory-form.compact {
  grid-template-columns: minmax(210px, 320px) auto 1fr;
}

.crm-directory-form.compact.auto-filter {
  grid-template-columns: minmax(210px, 320px) 1fr;
}

.crm-directory-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.crm-directory-field > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.crm-directory-field input,
.crm-directory-field select,
.crm-directory-column-filters input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--heading-color);
  font: inherit;
  padding: 0.65rem 0.7rem;
}

.crm-directory-field input:focus,
.crm-directory-field select:focus,
.crm-directory-column-filters input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.crm-directory-form .primary-button {
  justify-self: start;
  white-space: nowrap;
}

.crm-directory-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  color: var(--heading-color);
  font-size: 0.82rem;
  font-weight: 650;
}

.crm-directory-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.crm-directory-as-of {
  align-self: center;
  margin: 0;
  text-align: right;
}

.crm-directory-query-duration {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

/* The directory refresh notice, in the caption voice of .crm-guest-status. */
.crm-directory-inline-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.crm-directory-results {
  display: grid;
  gap: 0.8rem;
}

.crm-directory-results h4 {
  color: var(--heading-color);
  font-size: 1rem;
}

/* Every directory table is wider than its pane, and the columns past the fold
   are invisible without a cue. The two opaque covers scroll with the content
   (background-attachment: local) and sit on top of the two fixed shadows, so a
   shadow only shows on the side that still has columns and a table that fits
   hides both. */
.crm-directory-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--surface, #fff);
  background-image:
    linear-gradient(to right, var(--surface, #fff) 60%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--surface, #fff) 60%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* The shared sticky scrollbar proxy paints over table rows while it floats, so
   it takes the workspace surface and border tokens rather than a colour of its
   own; the thumb is the heading ink at partial strength, which stays legible on
   the surface whichever palette the tokens resolve to. */
.crm-guest-360-view {
  --atrium-ui-hscroll-surface: var(--surface, #fff);
  --atrium-ui-hscroll-track: var(--line);
  --atrium-ui-hscroll-thumb: color-mix(in srgb, var(--heading-color, #171a20) 55%, var(--surface, #fff));
}

/* The proxy lands in the results grid as a row of its own, and the grid's gap
   would hold it 0.8rem below the table it scrolls — at rest it then reads as a
   detached strip rather than the table's own bar. The pulled-back margin lets
   it sit flush against the wrap's bottom edge; while the bar floats over the
   viewport bottom the margin has no effect, as its stuck position is pinned by
   the sticky bottom offset alone. */
.crm-directory-results > .atrium-ui-hscroll {
  margin-top: -0.8rem;
}

.crm-directory-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.crm-report-table {
  min-width: 1580px;
}

.crm-report-table .crm-report-comments {
  min-width: 260px;
  max-width: 440px;
  white-space: normal;
  line-height: 1.45;
}

.crm-feedback-rating {
  display: inline-flex;
  min-width: 2rem;
  justify-content: center;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-weight: 800;
}

.crm-feedback-rating.is-good {
  background: #dcfce7;
  color: #166534;
}

.crm-feedback-rating.is-warning {
  background: #fef3c7;
  color: #92400e;
}

.crm-feedback-rating.is-poor {
  background: #fee2e2;
  color: #991b1b;
}

.crm-status-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.crm-status-badge.is-checked-in {
  background: #dcfce7;
  color: #166534;
}

.crm-status-badge.is-checked-out {
  background: #fef3c7;
  color: #92400e;
}

.crm-status-badge.is-not-checked-in {
  background: #dbeafe;
  color: #1d4ed8;
}

.crm-status-badge.is-no-show {
  background: #fee2e2;
  color: #991b1b;
}

.crm-directory-table th,
.crm-directory-table td {
  padding: 0.72rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.crm-directory-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-directory-table thead th {
  position: relative;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.crm-directory-table thead th button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.crm-directory-column-heading-inner {
  display: flex;
  align-items: center;
}

.crm-directory-column-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  color: inherit !important;
  text-decoration: none !important;
}

.crm-directory-column-trigger:hover,
.crm-directory-column-trigger:focus-visible {
  color: var(--accent);
  outline: none;
}

.crm-directory-column-chevron {
  color: var(--muted);
  font-size: 1rem;
  line-height: 0.7;
  transform: translateY(-0.08rem);
}

.crm-directory-sort-indicator {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 900;
}

.crm-directory-filter-indicator {
  color: var(--accent);
  font-size: 0.55rem;
}

.crm-directory-column-menu,
.crm-directory-filter-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.25rem);
  left: 0.45rem;
  min-width: 12.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  color: var(--heading-color);
  text-align: left;
  white-space: normal;
}

.crm-directory-column-menu {
  padding: 0.35rem 0;
}

.crm-directory-column-menu > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  padding: 0.7rem 0.8rem;
  color: var(--heading-color) !important;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none !important;
}

.crm-directory-column-menu > button:hover,
.crm-directory-column-menu > button:focus-visible {
  background: var(--surface-soft);
  color: var(--accent) !important;
  outline: none;
}

.crm-directory-column-menu > button.is-active {
  color: var(--accent) !important;
}

.crm-directory-menu-icon,
.crm-directory-filter-icon {
  width: 1.1rem;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
  text-align: center;
}

.crm-directory-filter-icon {
  font-size: 1.3rem;
  line-height: 0.7;
  transform: rotate(180deg);
}

.crm-directory-menu-divider {
  height: 1px;
  margin: 0.3rem 0;
  background: var(--line);
}

.crm-directory-filter-menu-state {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-directory-filter-panel {
  width: min(19rem, calc(100vw - 3rem));
  min-width: 0;
  padding: 1rem;
}

.crm-directory-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  color: var(--heading-color);
  font-size: 1rem;
}

.crm-directory-filter-close {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.crm-directory-filter-close:hover,
.crm-directory-filter-close:focus-visible {
  color: var(--heading-color);
  background: var(--surface-soft);
  outline: none;
}

.crm-directory-filter-panel form,
.crm-directory-filter-field {
  display: grid;
  gap: 0.4rem;
}

.crm-directory-filter-panel form {
  gap: 0.75rem;
}

.crm-directory-filter-field > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.crm-directory-filter-field input,
.crm-directory-filter-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--muted);
  border-radius: 5px;
  padding: 0.62rem 0.7rem;
  color: var(--heading-color);
  background: var(--surface);
  font: inherit;
}

.crm-directory-filter-field input:focus,
.crm-directory-filter-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.crm-directory-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.crm-directory-filter-actions button {
  min-width: 4.5rem;
}

.crm-directory-filter-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.crm-directory-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.1rem 0;
}

.crm-directory-active-filters-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.crm-directory-filter-chip,
.crm-directory-clear-all {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--surface));
  border-radius: 999px;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
}

.crm-directory-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ok);
  background: var(--ok-soft);
}

.crm-directory-filter-chip:hover,
.crm-directory-filter-chip:focus-visible {
  background: color-mix(in srgb, var(--brand-gold) 20%, var(--surface));
  outline: none;
}

.crm-directory-clear-all {
  border-color: transparent;
  color: var(--accent);
  background: transparent;
  font-weight: 750;
}

.crm-directory-clear-all:hover,
.crm-directory-clear-all:focus-visible {
  text-decoration: underline;
  outline: none;
}

.crm-directory-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.crm-directory-pagination span {
  color: var(--muted);
  font-size: 0.76rem;
}

.crm-directory-pagination .crm-directory-pagination-error {
  color: var(--danger, #b42318);
  margin-right: auto;
}

.crm-directory-pagination .secondary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.crm-auto-pagination {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.crm-auto-pagination-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--brand-gold) 28%, var(--line));
  border-top-color: var(--brand-gold);
  border-radius: 50%;
  animation: crm-auto-pagination-spin 900ms linear infinite;
}

@keyframes crm-auto-pagination-spin {
  to {
    transform: rotate(360deg);
  }
}

.crm-directory-column-filters th {
  padding: 0.45rem;
}

.crm-directory-column-filters input {
  font-size: 0.72rem;
  padding: 0.42rem 0.5rem;
}

.crm-directory-open {
  border: 0;
  background: transparent;
  color: var(--ok);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crm-directory-no-filter-results {
  color: var(--muted);
  padding: 1.5rem !important;
  text-align: center !important;
}

.crm-directory-empty {
  margin-top: 0.35rem;
}

.crm-search-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(420px, 1.45fr);
  gap: 18px 28px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 8%, var(--surface)),
      var(--surface) 48%,
      color-mix(in srgb, var(--heading-color) 3%, var(--surface))
    );
  box-shadow: var(--shadow);
}

.crm-search-copy h3 {
  margin: 3px 0 5px;
  color: var(--heading-color);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
}

.crm-search-form {
  min-width: 0;
}

.crm-search-form > label {
  display: block;
  margin-bottom: 7px;
  color: var(--strong);
  font-size: 0.75rem;
  font-weight: 800;
}

.crm-search-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.crm-search-control input {
  width: 100%;
  min-height: 52px;
  border: 1px solid color-mix(in srgb, var(--heading-color) 20%, var(--line));
  border-radius: 4px;
  padding: 0 15px;
  color: var(--text);
  background: var(--surface);
  font-size: 0.96rem;
  box-shadow: 0 1px 3px rgba(23, 26, 32, 0.05);
}

.crm-search-control input:focus {
  border-color: var(--brand-gold);
  outline: 2px solid color-mix(in srgb, var(--brand-gold) 24%, transparent);
  outline-offset: 1px;
}

.crm-search-control button {
  min-height: 52px;
  padding-inline: 24px;
}

.crm-guest-status {
  grid-column: 2;
  margin-top: -10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.crm-guest-status.error {
  color: var(--error);
}

.crm-guest-content {
  margin-top: 16px;
  scroll-margin-top: 20px;
}

.crm-guest-content:empty {
  display: none;
}

.crm-guest-empty {
  min-height: 250px;
  display: grid;
  grid-template-columns: auto minmax(220px, 0.8fr) minmax(420px, 1.2fr);
  gap: 22px 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 8px;
  background: var(--crm-ivory-card);
}

.crm-guest-empty.compact {
  min-height: 190px;
  grid-template-columns: auto minmax(220px, 1fr) auto;
}

.crm-empty-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 42%, var(--crm-ivory-hair));
  border-radius: 50%;
  color: var(--brand-gold);
  background: var(--accent-soft);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.crm-empty-mark.error {
  border-color: color-mix(in srgb, var(--error) 35%, var(--line));
  color: var(--error);
  background: var(--error-soft);
}

.crm-guest-empty h3 {
  margin: 0 0 8px;
  color: var(--crm-ivory-ink);
  font-size: 1.15rem;
}

.crm-guest-empty p {
  max-width: 580px;
  margin: 0;
  color: var(--crm-ivory-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.crm-loading {
  min-height: 230px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 8px;
  background: var(--crm-ivory-card);
}

.crm-loading-bar {
  height: 46px;
  border-radius: 5px;
  background:
    linear-gradient(
      90deg,
      var(--crm-ivory-ground),
      color-mix(in srgb, var(--brand-gold) 12%, var(--crm-ivory-card)),
      var(--crm-ivory-ground)
    );
  background-size: 220% 100%;
  animation: crm-loading-shimmer 1.4s ease-in-out infinite;
}

.crm-loading-bar:nth-child(2) {
  width: 88%;
}

.crm-loading-bar:nth-child(3) {
  width: 72%;
}

@keyframes crm-loading-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -120% 0;
  }
}

.crm-results {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.crm-results-heading {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.crm-results-heading h3 {
  margin: 2px 0 2px;
  color: var(--heading-color);
  font-size: 1.15rem;
}

.crm-results-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
}

.crm-result-count {
  min-width: 36px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--heading-color));
  background: var(--accent-soft);
  font-size: 0.76rem;
  font-weight: 850;
}

.crm-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.crm-result-table-head {
  min-height: 40px;
  display: grid;
  grid-template-columns:
    minmax(230px, 1.35fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(145px, 0.7fr)
    22px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-result-list {
  display: grid;
}

.crm-result-list > [role="listitem"] + [role="listitem"] {
  border-top: 1px solid var(--line);
}

.crm-result-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns:
    minmax(230px, 1.35fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(145px, 0.7fr)
    auto;
  gap: 16px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 11px 18px;
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
  text-align: left;
}

.crm-result-card:hover,
.crm-result-card:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-result-card:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
}

.crm-profile-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 48%, var(--line));
  border-radius: 50%;
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--heading-color));
  background: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.crm-profile-avatar.large {
  width: 70px;
  height: 70px;
  font-size: 1.1rem;
}

.crm-result-identity,
.crm-result-contact,
.crm-result-stay,
.crm-result-history {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-result-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.crm-result-identity > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-result-identity strong {
  color: var(--strong);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.crm-result-identity small {
  color: var(--muted);
  font-size: 0.7rem;
}

.crm-result-contact small,
.crm-result-stay small,
.crm-result-history small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-result-contact > span,
.crm-result-stay > span,
.crm-result-history > span {
  color: var(--text);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.crm-result-history strong {
  color: var(--strong);
  font-size: 1rem;
}

.crm-result-open {
  color: var(--brand-gold);
  font-size: 1.25rem;
  transition: transform 160ms ease;
}

.crm-result-card:hover .crm-result-open,
.crm-result-card:focus-visible .crm-result-open {
  transform: translateX(3px);
}

.crm-results-footer {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.crm-results-footer button {
  min-width: 190px;
}

@media (prefers-reduced-motion: reduce) {
  .crm-auto-pagination-spinner {
    animation: none;
  }

  .crm-navigation {
    animation: none;
  }
}

.crm-profile-open .crm-search-panel {
  display: none;
}

.crm-profile-open .crm-guest-content {
  margin-top: 0;
}

.crm-profile {
  outline: none;
}

.crm-profile-back {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 13px;
  color: var(--strong);
  background: var(--action-secondary);
}

.crm-profile-back:hover,
.crm-profile-back:focus-visible {
  background: var(--action-secondary-hover);
}

.crm-profile-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 10%, var(--surface)),
      var(--surface) 58%
    );
}

.crm-profile-heading h3 {
  margin: 2px 0 9px;
  color: var(--heading-color);
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.crm-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.crm-profile-tags span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 0.66rem;
  font-weight: 750;
}

.crm-record-tabs {
  min-height: 48px;
  display: flex;
  align-items: end;
  gap: 2px;
  border: 1px solid var(--line);
  border-top: 0;
  padding: 0 12px;
  background: var(--surface);
}

.crm-record-tabs button {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0 13px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 800;
}

.crm-record-tabs button:hover,
.crm-record-tabs button:focus-visible {
  color: var(--strong);
  background: var(--surface-soft);
}

.crm-record-tabs button.active {
  border-bottom-color: var(--brand-gold);
  color: var(--strong);
}

.crm-record-tabs button small {
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.54rem;
  font-weight: 750;
}

.crm-record-tab-panel {
  outline: none;
}

.crm-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
}

.crm-profile-metrics > div {
  min-width: 0;
  padding: 17px 20px;
}

.crm-profile-metrics > div + div {
  border-left: 1px solid var(--line);
}

.crm-profile-metrics span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.crm-profile-metrics strong {
  display: block;
  color: var(--strong);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.crm-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.crm-profile-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  /* clip, not hidden, for the same reason as .crm-workspace: a hidden box is
     still a scroll container, and the sticky proxy scrollbar inside a panel's
     table would pin itself to that never-scrolling box instead of the
     viewport. clip crops the rounded corners identically and cannot scroll. */
  overflow: clip;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.crm-profile-panel > header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-profile-panel h4 {
  margin: 2px 0 0;
  color: var(--heading-color);
  font-size: 1rem;
}

.crm-profile-details,
.crm-stay-details {
  margin: 0;
}

.crm-profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-profile-details > div {
  min-width: 0;
  min-height: 102px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-profile-details > div:nth-child(2n) {
  border-left: 1px solid var(--line);
}

.crm-profile-details dt,
.crm-stay-details dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.crm-profile-details dd,
.crm-stay-details dd {
  margin: 0;
  color: var(--strong);
  font-size: 0.83rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.crm-value-origin {
  width: max-content;
  display: block;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.6rem;
  font-weight: 750;
}

.crm-value-origin.crm {
  color: color-mix(in srgb, var(--brand-gold) 74%, var(--heading-color));
  background: var(--accent-soft);
}

.crm-stay-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-stay-details > div {
  min-width: 0;
  min-height: 82px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-stay-details > div:not(.featured):nth-child(2n + 1) {
  border-left: 1px solid var(--line);
}

.crm-stay-details .featured {
  grid-column: 1 / -1;
}

.crm-profile-no-stay {
  min-height: 226px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.crm-profile-no-stay strong {
  color: var(--strong);
}

.crm-profile-no-stay span {
  max-width: 460px;
  font-size: 0.75rem;
}

.crm-reservation-history {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  outline: none;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.crm-reservation-history:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.crm-reservation-history-heading {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.crm-reservation-history-heading h4 {
  margin: 2px 0 3px;
  color: var(--heading-color);
  font-size: 1rem;
}

.crm-reservation-history-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.crm-reservation-history-heading > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--brand-gold) 72%, var(--heading-color));
  background: var(--accent-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.crm-reservation-loading {
  min-height: 240px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
}

.crm-reservation-loading span {
  height: 54px;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--surface-soft),
      color-mix(in srgb, var(--brand-gold) 12%, var(--surface)),
      var(--surface-soft)
    );
  background-size: 220% 100%;
  animation: crm-loading-shimmer 1.4s ease-in-out infinite;
}

.crm-reservation-loading span:nth-child(2) {
  width: 91%;
}

.crm-reservation-loading span:nth-child(3) {
  width: 78%;
}

.crm-reservation-state {
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.crm-reservation-state strong {
  color: var(--strong);
}

.crm-reservation-state span {
  max-width: 540px;
  font-size: 0.75rem;
}

.crm-reservation-state.error strong,
.crm-reservation-inline-error {
  color: var(--error);
}

.crm-reservation-state button {
  margin-top: 7px;
}

.crm-reservation-list {
  display: grid;
}

.crm-reservation-table-head {
  min-height: 38px;
  display: grid;
  grid-template-columns:
    minmax(135px, 0.7fr)
    minmax(190px, 1.2fr)
    minmax(160px, 0.85fr)
    minmax(145px, 0.8fr)
    minmax(150px, 0.8fr)
    22px;
  gap: 15px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-reservation-list > [role="listitem"] + [role="listitem"] {
  border-top: 1px solid var(--line);
}

.crm-reservation-card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns:
    minmax(135px, 0.7fr)
    minmax(190px, 1.2fr)
    minmax(160px, 0.85fr)
    minmax(145px, 0.8fr)
    minmax(150px, 0.8fr)
    auto;
  gap: 15px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 10px 18px;
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
  text-align: left;
}

.crm-reservation-card:hover,
.crm-reservation-card:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-reservation-card:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
}

.crm-reservation-date,
.crm-reservation-hotel,
.crm-reservation-room,
.crm-reservation-role,
.crm-reservation-status {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-reservation-date strong {
  color: var(--brand-gold);
  font-size: 0.95rem;
}

.crm-reservation-date span,
.crm-reservation-hotel span,
.crm-reservation-room span,
.crm-reservation-role span,
.crm-reservation-status span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.crm-reservation-hotel small,
.crm-reservation-room small,
.crm-reservation-role small,
.crm-reservation-status small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-reservation-hotel strong,
.crm-reservation-room strong,
.crm-reservation-role strong,
.crm-reservation-status strong {
  color: var(--strong);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.crm-reservation-footer {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.crm-reservation-footer button {
  min-width: 180px;
}

.crm-reservation-inline-error {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--error-soft);
  font-size: 0.72rem;
  font-weight: 750;
}

.crm-reservation-detail {
  outline: none;
}

.crm-reservation-back {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 13px;
  color: var(--strong);
  background: var(--action-secondary);
}

.crm-reservation-back:hover,
.crm-reservation-back:focus-visible {
  background: var(--action-secondary-hover);
}

.crm-reservation-detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 10%, var(--surface)),
      var(--surface) 58%
    );
}

.crm-reservation-detail-heading h3 {
  margin: 2px 0 8px;
  color: var(--heading-color);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.crm-reservation-detail-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.crm-reservation-general-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.12fr) repeat(2, minmax(250px, 0.9fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.crm-general-column {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.crm-reservation-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.crm-reservation-detail-list > div {
  min-width: 0;
  min-height: 92px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-reservation-detail-list > div:nth-child(2n) {
  border-left: 1px solid var(--line);
}

.crm-reservation-detail-list dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.crm-reservation-detail-list dd {
  margin: 0;
  color: var(--strong);
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.crm-reservation-relationship {
  min-height: 184px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.crm-reservation-relationship strong {
  color: var(--strong);
  font-size: 1rem;
}

.crm-reservation-relationship p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.crm-context-state {
  min-height: 310px;
  display: grid;
  grid-template-columns: auto minmax(0, 560px);
  place-content: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-top: 0;
  padding: 28px;
  color: var(--muted);
  background: var(--surface);
  text-align: left;
}

.crm-context-state.compact {
  min-height: 176px;
  border: 0;
}

.crm-context-state > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--brand-gold) 78%, var(--heading-color));
  background: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 850;
}

.crm-context-state strong {
  display: block;
  margin-bottom: 5px;
  color: var(--strong);
  font-size: 0.86rem;
}

.crm-context-state p {
  max-width: 560px;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
}

.crm-financial-panel,
.crm-financial-lines {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.crm-financial-panel > header,
.crm-financial-lines > header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-financial-panel > header h4,
.crm-financial-lines > header h4 {
  margin: 2px 0 0;
  color: var(--heading-color);
  font-size: 1rem;
}

.crm-financial-panel > header > span,
.crm-financial-lines > header > span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
}

.crm-financial-loading {
  min-height: 270px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 20px;
}

.crm-financial-loading span {
  height: 52px;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--surface-soft),
      color-mix(in srgb, var(--brand-gold) 12%, var(--surface)),
      var(--surface-soft)
    );
  background-size: 220% 100%;
  animation: crm-loading-shimmer 1.4s ease-in-out infinite;
}

.crm-financial-loading span:nth-child(2) {
  width: 88%;
}

.crm-financial-loading span:nth-child(3) {
  width: 72%;
}

.crm-financial-state {
  min-height: 230px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.crm-financial-state.large {
  min-height: 330px;
  border: 1px solid var(--line);
  border-top: 0;
}

.crm-financial-state strong {
  color: var(--strong);
}

.crm-financial-state span {
  max-width: 520px;
  font-size: 0.74rem;
  line-height: 1.5;
}

.crm-financial-state.error strong,
.crm-financial-inline-error {
  color: var(--error);
}

.crm-financial-state button {
  margin-top: 7px;
}

.crm-financial-total {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 8%, var(--surface)),
      var(--surface)
    );
}

.crm-financial-total > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.crm-financial-total > div > span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.crm-financial-total strong {
  color: var(--heading-color);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.crm-coverage-badge {
  width: max-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.59rem;
  font-weight: 850;
  white-space: nowrap;
}

.crm-coverage-badge.complete {
  border-color: color-mix(in srgb, var(--ok) 32%, var(--line));
  color: var(--ok);
  background: var(--ok-soft);
}

.crm-coverage-badge.partial,
.crm-coverage-badge.stale {
  border-color: color-mix(in srgb, var(--brand-gold) 38%, var(--line));
  color: color-mix(in srgb, var(--brand-gold) 76%, var(--heading-color));
  background: var(--accent-soft);
}

.crm-coverage-badge.unavailable {
  border-color: color-mix(in srgb, var(--error) 28%, var(--line));
  color: var(--error);
  background: var(--error-soft);
}

.crm-financial-category-list {
  display: grid;
}

.crm-financial-category {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
}

.crm-financial-category + .crm-financial-category {
  border-top: 1px solid var(--line);
}

.crm-financial-category > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.crm-financial-category > div:last-child {
  justify-items: end;
}

.crm-financial-category span {
  color: var(--strong);
  font-size: 0.75rem;
  font-weight: 760;
}

.crm-financial-category small {
  color: var(--muted);
  font-size: 0.62rem;
}

.crm-financial-category strong {
  color: var(--strong);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.crm-financial-category {
  align-items: stretch;
  flex-direction: column;
}

.crm-financial-category > .crm-financial-category-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.crm-financial-category-main > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.crm-financial-category-main > div:last-child {
  justify-items: end;
}

.crm-financial-category > .crm-financial-departments {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  justify-items: stretch;
}

.crm-financial-departments > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 6px 0;
}

.crm-financial-departments > div + div {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.crm-financial-departments small {
  grid-column: 1;
}

.crm-financial-departments strong {
  grid-column: 2;
  grid-row: 1 / 3;
}

.crm-reservation-wide-panel {
  grid-column: 1 / -1;
}

.crm-table-panel {
  margin-top: 14px;
  /* clip, not hidden: see .crm-profile-panel — this wrapper sits on the same
     ancestor path between a table's sticky proxy scrollbar and the viewport. */
  overflow: clip;
}

.crm-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.crm-data-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 0.71rem;
  white-space: nowrap;
}

.crm-stay-day-table {
  min-width: 1580px;
}

.crm-pos-receipt-table {
  min-width: 1320px;
}

.crm-data-table th,
.crm-data-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.crm-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-data-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
}

.crm-data-table td strong {
  color: var(--strong);
}

.crm-table-link {
  border: 0;
  padding: 0;
  color: var(--link-color, var(--strong));
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crm-table-link:hover,
.crm-table-link:focus-visible {
  color: var(--brand-gold);
  background: transparent;
}

.crm-reservation-wide-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.crm-reservation-wide-panel > header > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.crm-guest-roster {
  display: grid;
}

.crm-guest-roster-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(180px, 1fr);
  gap: 14px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 12px 16px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}

button.crm-guest-roster-row {
  cursor: pointer;
}

button.crm-guest-roster-row:hover,
button.crm-guest-roster-row:focus-visible {
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--surface));
}

button.crm-guest-roster-row:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: -2px;
}

.crm-guest-roster > [role="listitem"] + [role="listitem"] .crm-guest-roster-row,
.crm-stay-day-row + .crm-stay-day-row {
  border-top: 1px solid var(--line);
}

.crm-guest-roster-row > span:not(.crm-profile-avatar),
.crm-stay-day-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-guest-roster-row strong,
.crm-stay-day-row strong {
  color: var(--strong);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.crm-guest-roster-row small,
.crm-stay-day-row small {
  color: var(--muted);
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.crm-stay-day-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 1fr) repeat(3, minmax(125px, 0.8fr));
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
}

.crm-stay-day-row.header {
  min-height: 38px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-financial-document-list {
  display: grid;
}

.crm-financial-document-list > [role="listitem"]
  + [role="listitem"] {
  border-top: 1px solid var(--line);
}

.crm-financial-document-card {
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns:
    minmax(105px, 0.6fr)
    minmax(180px, 1.25fr)
    minmax(80px, 0.5fr)
    minmax(100px, 0.65fr)
    auto;
  gap: 13px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 13px 16px;
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
  text-align: left;
}

.crm-financial-document-card:hover,
.crm-financial-document-card:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-financial-document-card:focus-visible {
  position: relative;
  z-index: 1;
  outline-offset: -3px;
}

.crm-financial-document-date,
.crm-financial-document-source,
.crm-financial-document-lines,
.crm-financial-document-amount {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.crm-financial-document-date strong {
  color: var(--brand-gold);
  font-size: 0.82rem;
}

.crm-financial-document-card small {
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-financial-document-date span,
.crm-financial-document-source span {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.crm-financial-document-source strong,
.crm-financial-document-lines strong,
.crm-financial-document-amount strong {
  color: var(--strong);
  font-size: 0.73rem;
  overflow-wrap: anywhere;
}

.crm-financial-documents-footer {
  display: flex;
  justify-content: center;
  padding: 13px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.crm-financial-inline-error,
.crm-financial-limit-note {
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--error-soft);
  font-size: 0.68rem;
  font-weight: 750;
}

.crm-financial-document-detail {
  outline: none;
}

.crm-financial-document-back {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 13px;
  color: var(--strong);
  background: var(--action-secondary);
}

.crm-financial-document-back:hover,
.crm-financial-document-back:focus-visible {
  background: var(--action-secondary-hover);
}

.crm-financial-document-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 10%, var(--surface)),
      var(--surface) 58%
    );
}

.crm-financial-document-heading h3 {
  margin: 2px 0 8px;
  color: var(--heading-color);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.crm-financial-document-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.crm-financial-document-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
}

.crm-financial-document-metrics > div {
  min-width: 0;
  padding: 17px 20px;
}

.crm-financial-document-metrics > div + div {
  border-left: 1px solid var(--line);
}

.crm-financial-document-metrics span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 750;
}

.crm-financial-document-metrics strong {
  display: block;
  color: var(--strong);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.crm-financial-lines {
  margin-top: 14px;
}

.crm-financial-lines-table {
  overflow-x: auto;
}

.crm-financial-line {
  min-width: 900px;
  display: grid;
  grid-template-columns:
    minmax(230px, 1.4fr)
    minmax(170px, 1fr)
    minmax(90px, 0.5fr)
    minmax(100px, 0.55fr)
    minmax(100px, 0.55fr)
    minmax(110px, 0.6fr);
  gap: 14px;
  align-items: center;
  min-height: 60px;
  padding: 11px 16px;
}

.crm-financial-line + .crm-financial-line {
  border-top: 1px solid var(--line);
}

.crm-financial-line.header {
  min-height: 38px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-financial-line-coverage {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  white-space: normal;
}

.crm-financial-line-coverage-complete,
.crm-financial-line-coverage-published {
  color: var(--success, #2f7d4a);
}

.crm-financial-line-coverage-partial {
  color: var(--warning, #9a6813);
}

.crm-financial-line-coverage-unavailable {
  color: var(--danger, #ad3c35);
}

.crm-financial-line-coverage-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
}

.crm-financial-line-coverage-note strong {
  color: var(--strong);
}

.crm-financial-line-coverage-note.crm-financial-line-coverage-complete,
.crm-financial-line-coverage-note.crm-financial-line-coverage-published {
  background: color-mix(in srgb, #2f7d4a 8%, var(--surface-soft));
}

.crm-financial-line-coverage-note.crm-financial-line-coverage-partial {
  background: color-mix(in srgb, #9a6813 8%, var(--surface-soft));
}

.crm-financial-line-coverage-note.crm-financial-line-coverage-unavailable {
  background: color-mix(in srgb, #ad3c35 8%, var(--surface-soft));
}

.crm-financial-line:not(.header) span {
  color: var(--text);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.crm-financial-line:not(.header) strong {
  color: var(--strong);
}

.crm-financial-limit-note {
  color: var(--muted);
  background: var(--surface-soft);
}

.crm-source-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  padding: 15px 17px;
  border-left: 3px solid var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--surface));
}

.crm-source-notice > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--surface);
  background: var(--brand-gold);
  font-size: 0.7rem;
  font-weight: 850;
}

.crm-source-notice strong {
  display: block;
  margin-bottom: 3px;
  color: var(--strong);
  font-size: 0.78rem;
}

.crm-source-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .crm-workspace {
    --crm-navigation-width: 205px;
  }

  .crm-workspace.is-navigation-collapsed {
    --crm-navigation-width: 62px;
  }

  .crm-search-panel {
    grid-template-columns: 1fr;
  }

  .crm-guest-status {
    grid-column: 1;
    margin-top: -7px;
  }

  .crm-guest-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-result-table-head,
  .crm-reservation-table-head {
    display: none;
  }

  .crm-result-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
  }

  .crm-result-identity {
    grid-column: 1;
  }

  .crm-result-contact,
  .crm-result-stay,
  .crm-result-history {
    grid-column: 1 / 3;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: baseline;
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }

  .crm-result-contact > span + span {
    grid-column: 2;
  }

  .crm-result-history strong {
    grid-column: 2;
  }

  .crm-result-history > span {
    grid-column: 2;
  }

  .crm-result-open {
    grid-column: 2;
    grid-row: 1;
  }

  .crm-reservation-card {
    grid-template-columns: minmax(130px, 0.6fr) minmax(0, 1.4fr) auto;
    gap: 10px 14px;
  }

  .crm-reservation-date {
    grid-row: 1 / 3;
  }

  .crm-reservation-hotel {
    grid-column: 2;
  }

  .crm-reservation-room,
  .crm-reservation-role,
  .crm-reservation-status {
    grid-column: 2 / 4;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: baseline;
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }

  .crm-reservation-room > span,
  .crm-reservation-role > span,
  .crm-reservation-status > span {
    grid-column: 2;
  }

  .crm-reservation-card > .crm-result-open {
    grid-column: 3;
    grid-row: 1;
  }

  .crm-reservation-general-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-general-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .crm-directory-tabs {
    overflow-x: auto;
  }

  .crm-directory-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .crm-directory-panel {
    padding: 1rem;
  }

  .crm-directory-heading,
  .crm-directory-results > header,
  .crm-directory-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-directory-form,
  .crm-directory-form.compact {
    grid-template-columns: 1fr;
  }

  .crm-directory-as-of {
    text-align: left;
  }

  .crm-workspace {
    border-radius: 8px;
  }

  .crm-workspace-header {
    min-height: 0;
    align-items: start;
    flex-direction: column;
    padding: 14px;
  }

  .crm-workspace-page {
    padding: 12px;
  }

  .crm-search-panel,
  .crm-guest-empty {
    padding: 20px;
  }

  .crm-search-control {
    grid-template-columns: 1fr;
  }

  .crm-record-tabs {
    overflow-x: auto;
    align-items: stretch;
  }

  .crm-record-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .crm-guest-empty,
  .crm-guest-empty.compact {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .crm-profile-metrics,
  .crm-profile-grid {
    grid-template-columns: 1fr;
  }

  .crm-profile-metrics > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .crm-profile-details {
    grid-template-columns: 1fr;
  }

  .crm-profile-details > div:nth-child(2n) {
    border-left: 0;
  }

  .crm-reservation-history-heading,
  .crm-reservation-detail-heading,
  .crm-financial-document-heading {
    align-items: start;
    flex-direction: column;
  }

  .crm-reservation-general-grid {
    grid-template-columns: 1fr;
  }

  .crm-general-primary {
    grid-column: auto;
  }

  .crm-financial-document-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-financial-document-metrics > div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .crm-financial-document-metrics > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .crm-financial-document-metrics > div:nth-child(5) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .crm-financial-document-card {
    grid-template-columns: minmax(105px, 0.6fr) minmax(0, 1fr) auto;
  }

  .crm-financial-document-lines,
  .crm-financial-document-amount {
    grid-column: 2 / 4;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: baseline;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .crm-financial-document-card > .crm-result-open {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Below 768px the navigation never shares the row with content (pre-rollout
   audit F2): the workspace grid keeps the collapsed rail geometry in both
   states, and expanding overlays the navigation as a fixed drawer above a
   scrim, so opening it never squeezes or reflows the pane behind it. */
@media (max-width: 767px) {
  .crm-workspace,
  .crm-workspace.is-navigation-collapsed {
    --crm-navigation-width: 58px;
  }

  /* The expanded navigation leaves the flow, so the main pane pins itself to
     the content column instead of sliding into the vacated rail track. */
  .crm-workspace-main {
    grid-column: 2;
  }

  .crm-navigation-header {
    padding-inline: 9px;
  }

  .crm-navigation-body {
    padding-inline: 6px;
  }

  .crm-navigation-home,
  .crm-navigation-item {
    padding-inline: 9px;
  }

  .crm-workspace:not(.is-navigation-collapsed) .crm-navigation {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 61;
    width: min(304px, 86vw);
    border-right: 1px solid var(--crm-rail-line);
    box-shadow: 0 18px 48px rgba(31, 28, 22, 0.38);
    animation: crm-navigation-drawer-in 180ms ease;
  }

  .crm-workspace:not(.is-navigation-collapsed) .crm-navigation-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(31, 28, 22, 0.44);
  }
}

@keyframes crm-navigation-drawer-in {
  from {
    transform: translateX(-100%);
  }
}

@media (max-width: 520px) {
  .crm-result-card {
    padding: 14px;
  }

  .crm-profile-avatar {
    width: 38px;
    height: 38px;
  }

  .crm-result-contact,
  .crm-result-stay,
  .crm-result-history {
    grid-column: 1 / 3;
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .crm-profile-heading {
    grid-template-columns: 1fr;
  }

  .crm-profile-avatar.large {
    width: 58px;
    height: 58px;
  }

  .crm-stay-details {
    grid-template-columns: 1fr;
  }

  .crm-stay-details > div:not(.featured):nth-child(2n + 1) {
    border-left: 0;
  }

  .crm-reservation-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .crm-reservation-date,
  .crm-reservation-hotel,
  .crm-reservation-room,
  .crm-reservation-role,
  .crm-reservation-status {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .crm-reservation-date {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: baseline;
  }

  .crm-reservation-card > .crm-result-open {
    grid-column: 2;
    grid-row: 1;
  }

  .crm-reservation-detail-list {
    grid-template-columns: 1fr;
  }

  .crm-reservation-detail-list > div:nth-child(2n) {
    border-left: 0;
  }

  .crm-financial-total,
  .crm-financial-category {
    align-items: start;
    flex-direction: column;
  }

  .crm-financial-category > div:last-child {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
  }

  .crm-financial-document-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
  }

  .crm-financial-document-date,
  .crm-financial-document-source,
  .crm-financial-document-lines,
  .crm-financial-document-amount {
    grid-column: 1 / 3;
  }

  .crm-financial-document-card > .crm-result-open {
    grid-column: 2;
    grid-row: 1;
  }

  .crm-financial-document-metrics {
    grid-template-columns: 1fr;
  }

  .crm-financial-document-metrics > div + div,
  .crm-financial-document-metrics > div:nth-child(4) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .crm-guest-roster-row,
  .crm-stay-day-row,
  .crm-stay-day-row.header {
    grid-template-columns: 1fr;
  }

  .crm-stay-day-row.header {
    display: none;
  }

  .crm-guest-roster-row > .crm-profile-avatar {
    display: none;
  }

  .crm-financial-category > .crm-financial-category-main,
  .crm-reservation-wide-panel > header {
    align-items: start;
    flex-direction: column;
  }

  .crm-financial-category-main > div:last-child {
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-loading-bar,
  .crm-reservation-loading span,
  .crm-financial-loading span {
    animation: none;
  }

  .crm-result-open {
    transition: none;
  }
}

.crm-missing-details {
  border-top: 1px solid var(--line, #e6e6e6);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}

.crm-missing-details summary {
  color: var(--muted, #6e7076);
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  user-select: none;
}

.crm-missing-details summary:focus-visible {
  outline: 2px solid var(--accent, #b89136);
  outline-offset: 2px;
}

.crm-missing-details[open] summary {
  margin-bottom: 0.5rem;
}

.crm-missing-details .crm-reservation-detail-list dd,
.crm-missing-details .crm-reservation-detail-list dt {
  color: var(--muted, #6e7076);
}

.crm-breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.crm-breadcrumbs .crm-profile-back,
.crm-breadcrumbs .crm-reservation-back,
.crm-breadcrumbs .crm-financial-document-back {
  margin-bottom: 0;
}

.crm-breadcrumb-separator {
  color: var(--muted, #6e7076);
  font-size: 0.95rem;
}

.crm-breadcrumb-current {
  color: var(--muted, #6e7076);
  font-size: 0.9rem;
  font-weight: 600;
}

.crm-contact-link {
  color: inherit;
  text-decoration-color: var(--brand-gold, #b89136);
  text-underline-offset: 2px;
}

.crm-contact-link:hover,
.crm-contact-link:focus-visible {
  color: var(--brand-gold, #96751f);
}

.crm-access-code {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.crm-copy-button {
  background: none;
  border: 1px solid var(--crm-ivory-hair, #e6e6e6);
  border-radius: 6px;
  color: var(--crm-ivory-ink-soft, #6e7076);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
}

.crm-copy-button:hover,
.crm-copy-button:focus-visible {
  border-color: var(--brand-gold, #b89136);
  color: var(--brand-gold, #96751f);
}

.crm-match-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.crm-match-reason {
  background: var(--surface, #f6f4ef);
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 999px;
  color: var(--muted, #6e7076);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.5rem;
  text-transform: uppercase;
}

.crm-financial-document-row {
  cursor: pointer;
}

.crm-room-timeline-ranges {
  display: grid;
  gap: 1px;
}

.crm-room-timeline-ranges em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.crm-room-change-events {
  display: grid;
  gap: 1px;
}

.crm-room-change-events em {
  color: color-mix(in srgb, var(--brand-gold) 76%, var(--heading-color));
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.crm-room-change-strip {
  align-items: center;
  background: var(--accent-soft);
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
}

.crm-room-change-strip strong {
  color: var(--strong);
}

.crm-room-change-strip i {
  color: var(--brand-gold);
  font-style: normal;
}

/* The nightly strip states which room held which date; the observed strip
   states when the change was seen, so it reads as the quieter of the two. */
.crm-room-change-observed {
  background: none;
  border-top: 0;
  padding-top: 0;
}

.crm-room-change-observed span {
  color: color-mix(in srgb, var(--brand-gold) 76%, var(--heading-color));
  font-weight: 600;
}

.crm-data-table tbody tr.crm-room-change-row td {
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 55%, var(--line));
}

.crm-data-table tbody tr.crm-room-change-row td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-gold);
}

.crm-data-table tbody tr.crm-room-change-row:hover td {
  background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
}

.crm-room-change-chip {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 38%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand-gold) 76%, var(--heading-color));
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  text-transform: uppercase;
  white-space: nowrap;
}