/*
 * CRM Guest 360 — the directory and table views, in the Ivory theme.
 *
 * Phase 2 of the Ivory cascade. Six views share this sheet: Guest Search,
 * Advanced Guest Search, Reservations In-House, Reservation Search, Guest
 * Feedback (In-House and Search) and POS Data. Every colour is consumed from
 * the shared ground and semantic tokens in crm-guest-360-ivory.css; nothing is
 * re-declared here, and the only raw values are the warm shadow alphas, which
 * have no token.
 *
 * Two areas that share these class names are deliberately left alone:
 *
 *   - Analytics renders as `.crm-analytics.crm-report-directory` and reuses
 *     `.crm-directory-panel` / `.crm-directory-heading` / `.crm-directory-empty`.
 *     It carries its own pinned Ivory (crm-guest-360-analytics.css).
 *   - The cases directory renders as `.crm-case-directory` and reuses
 *     `.crm-directory-form` / `-results` / `-table-wrap` / `-table` /
 *     `-pagination`. That is Phase 3.
 *
 * Both are excluded structurally rather than by `:not()`: every shared-class
 * rule below is scoped under `.crm-reservation-directory`, which is the root
 * of exactly the four table views and of neither of those two surfaces. The
 * Guest Search view has no such root — its hero panel and results grid own
 * their own class names (`.crm-search-panel`, `.crm-results`) — so those are
 * addressed directly.
 *
 * The links, chips and eyebrows keep the gold-ink `--ok`, which resolves to
 * within one step of `color-mix(in srgb, var(--brand-gold) 76%, ink)`
 * (#957731 against #947630); one of the two had to be picked and the token
 * already in the sheet is the one that costs nothing.
 *
 * Loaded after crm-guest-360-ivory.css and before the case-settings,
 * case-bulk, analytics and home sheets, so those keep winning their scoped
 * ties.
 */

/* ------------------------------------------------------------------- pane */

/* The ivory pane each table view sits on. Three of the four wrap their
   contents in `.crm-directory-panel` and one (Advanced Guest Search) does
   not, so the pane is the section itself and the panel — where there is one —
   gives its padding up rather than nesting a second box inside the first. */
.crm-reservation-directory {
  gap: 18px;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

.crm-reservation-directory > .crm-directory-panel {
  gap: 18px;
  padding: 0;
}

/* --------------------------------------------------------------- headings */

/* The shell's panel heading asks for a colour the Portal never defines, so it
   arrives as body grey in the interface sans; inside the pane it is restated
   in the house serif, exactly as the analytics pane restates it. */
.crm-reservation-directory .crm-directory-heading h3 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The blurb under it speaks in the italic the theme annotates with. */
.crm-reservation-directory .crm-directory-heading p:last-child {
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
}

.crm-reservation-directory .crm-directory-results h4 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.crm-reservation-directory .crm-directory-results p,
.crm-reservation-directory .crm-directory-results > header > span,
.crm-reservation-directory .crm-directory-header-tools > span,
.crm-reservation-directory .crm-directory-as-of,
.crm-reservation-directory .crm-directory-query-duration,
.crm-reservation-directory .crm-directory-inline-status {
  color: var(--crm-ivory-ink-soft);
}

/* ------------------------------------------------------------------ forms */

.crm-reservation-directory .crm-directory-form {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

/* The field label takes the caption voice Home's find-a-guest and the
   analytics stat tiles already speak in. */
.crm-reservation-directory .crm-directory-field > span {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* `small` inside a label is the "(optional)" aside; it stays lower case so it
   reads as an aside rather than as part of the tracked label. */
.crm-reservation-directory .crm-directory-field > span small {
  letter-spacing: 0.04em;
  text-transform: none;
}

.crm-reservation-directory .crm-directory-field input,
.crm-reservation-directory .crm-directory-field select,
.crm-reservation-directory .crm-directory-column-filters input {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
}

.crm-reservation-directory .crm-directory-check {
  color: var(--crm-ivory-ink);
}

/* The shared secondary button is the one control that still arrives as a
   visitor: a cool grey slab with no border of its own. Only its surface,
   border and ink are restated — the size and radius stay with the Portal
   rule, which declares `border: 0`, so the hairline is named explicitly.
   Same treatment, same reasoning, as the analytics sheet. */
.crm-reservation-directory .secondary-button {
  border: 1px solid var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-directory .secondary-button:hover,
.crm-reservation-directory .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--crm-ivory-ink);
}

/* ---------------------------------------------------------- table chrome */

/* The four-layer scroll cue is kept exactly as the shell built it — two
   opaque covers that scroll with the content over two fixed shadows — with
   the covers re-grounded onto the card and the shadows re-tinted from slate
   to the warm ink at the same alphas. */
.crm-reservation-directory .crm-directory-table-wrap {
  border-color: var(--crm-ivory-hair);
  background-color: var(--crm-ivory-card);
  background-image:
    linear-gradient(to right, var(--crm-ivory-card) 60%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--crm-ivory-card) 60%, rgba(255, 255, 255, 0)),
    radial-gradient(
      farthest-side at 0 50%,
      color-mix(in srgb, var(--crm-ivory-ink) 22%, transparent),
      color-mix(in srgb, var(--crm-ivory-ink) 0%, transparent)
    ),
    radial-gradient(
      farthest-side at 100% 50%,
      color-mix(in srgb, var(--crm-ivory-ink) 22%, transparent),
      color-mix(in srgb, var(--crm-ivory-ink) 0%, transparent)
    );
}

/* The sticky scrollbar proxy floats over the table it scrolls, so it takes
   the card it paints on rather than the workspace surface. Scoped to these
   views: the cases directory keeps the shell's cool proxy until Phase 3. */
.crm-reservation-directory .atrium-ui-hscroll {
  --atrium-ui-hscroll-surface: var(--crm-ivory-card);
  --atrium-ui-hscroll-track: var(--crm-ivory-hair);
  --atrium-ui-hscroll-thumb: color-mix(in srgb, var(--crm-ivory-ink) 55%, var(--crm-ivory-card));
}

.crm-reservation-directory .crm-directory-table {
  color: var(--crm-ivory-ink);
}

.crm-reservation-directory .crm-directory-table th,
.crm-reservation-directory .crm-directory-table td {
  border-bottom-color: var(--crm-ivory-hair-soft);
}

/* The Phase-0 warm hover, re-mixed against the card the rows now sit on. */
.crm-reservation-directory .crm-directory-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--crm-ivory-card));
}

.crm-reservation-directory .crm-directory-table thead th {
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The header cell is a button in the sortable tables and bare text in the
   rest; both have to arrive at the same voice. */
.crm-reservation-directory .crm-directory-table thead th button {
  font-weight: 400;
}

.crm-reservation-directory .crm-directory-column-trigger:hover,
.crm-reservation-directory .crm-directory-column-trigger:focus-visible {
  color: var(--ok);
}

/* Sorted or filtered is said by the glyph, not by a colour: both indicators
   sit at the caption weight the rest of the header row speaks in. */
.crm-reservation-directory .crm-directory-sort-indicator,
.crm-reservation-directory .crm-directory-column-chevron,
.crm-reservation-directory .crm-directory-menu-icon,
.crm-reservation-directory .crm-directory-filter-icon {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-directory .crm-directory-filter-indicator {
  color: var(--ok);
}

.crm-reservation-directory .crm-directory-open {
  color: var(--ok);
}

.crm-reservation-directory .crm-directory-no-filter-results {
  color: var(--crm-ivory-ink-soft);
}

/* --------------------------------------------------------------- popovers */

.crm-reservation-directory .crm-directory-column-menu,
.crm-reservation-directory .crm-directory-filter-panel {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  box-shadow: 0 12px 28px rgba(34, 31, 24, 0.16);
  color: var(--crm-ivory-ink);
}

/* The shell wins this one with `!important`, so the restatement carries it
   too; the extra scope class is what decides the tie. */
.crm-reservation-directory .crm-directory-column-menu > button {
  color: var(--crm-ivory-ink) !important;
}

.crm-reservation-directory .crm-directory-column-menu > button:hover,
.crm-reservation-directory .crm-directory-column-menu > button:focus-visible {
  background: var(--crm-ivory-ground);
  color: var(--ok) !important;
}

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

.crm-reservation-directory .crm-directory-menu-divider {
  background: var(--crm-ivory-hair);
}

.crm-reservation-directory .crm-directory-filter-menu-state,
.crm-reservation-directory .crm-directory-filter-field > span {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-directory .crm-directory-filter-panel-header {
  color: var(--crm-ivory-ink);
}

.crm-reservation-directory .crm-directory-filter-field input,
.crm-reservation-directory .crm-directory-filter-field select {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
}

.crm-reservation-directory .crm-directory-filter-close {
  color: var(--crm-ivory-ink-soft);
}

.crm-reservation-directory .crm-directory-filter-close:hover,
.crm-reservation-directory .crm-directory-filter-close:focus-visible {
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink);
}

/* -------------------------------------------- pagination and filter strip */

/* A footer sitting on the pane takes the card, the same way the table above
   it does; a footer inside a card takes the ground. */
.crm-reservation-directory .crm-directory-pagination {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

.crm-reservation-directory .crm-directory-pagination span,
.crm-reservation-directory .crm-auto-pagination {
  color: var(--crm-ivory-ink-soft);
}

/* The spinner keeps its gold: it is the one moving thing on the page and the
   only ring that reads at 14px is a coloured one. */
.crm-reservation-directory .crm-auto-pagination-spinner {
  border-color: color-mix(in srgb, var(--brand-gold) 28%, var(--crm-ivory-hair));
  border-top-color: var(--brand-gold);
}

.crm-reservation-directory .crm-directory-active-filters-label {
  color: var(--crm-ivory-ink-soft);
}

/* The active-filter chip keeps its gold identity; only the surface it is
   mixed against moves from white to the card. */
.crm-reservation-directory .crm-directory-filter-chip {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--crm-ivory-card));
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--crm-ivory-card));
  color: var(--ok);
}

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

.crm-reservation-directory .crm-directory-clear-all {
  color: var(--ok);
}

/* ------------------------------------------------------ guest search view */

/* The hero keeps its gold gradient — it is the identity of the landing view —
   with both endpoints re-mixed against the ivory card instead of white. */
.crm-search-panel {
  border-color: var(--crm-ivory-hair-strong);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-gold) 10%, var(--crm-ivory-card)),
      var(--crm-ivory-card) 48%,
      color-mix(in srgb, var(--crm-ivory-ink) 3%, var(--crm-ivory-card))
    );
}

.crm-search-copy h3 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.crm-search-panel .crm-search-form > label {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-search-panel .crm-search-control input {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
}

.crm-guest-status {
  color: var(--crm-ivory-ink-soft);
}

/* The results grid is the one table on these views that is not a `table`: a
   fake header row over a list of cards. It is given the same card, the same
   hairlines and the same header voice as the real ones. */
.crm-results {
  border-color: var(--crm-ivory-hair);
  border-radius: 10px;
  background: var(--crm-ivory-card);
}

.crm-results-heading {
  border-bottom-color: var(--crm-ivory-hair);
}

.crm-results-heading h3 {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.crm-results-heading p:last-child {
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 400;
}

.crm-result-table-head {
  border-bottom-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.crm-result-list > [role="listitem"] + [role="listitem"] {
  border-top-color: var(--crm-ivory-hair-soft);
}

.crm-result-card {
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
}

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

.crm-result-identity strong,
.crm-result-history strong {
  color: var(--crm-ivory-ink);
}

.crm-result-identity small,
.crm-result-contact small,
.crm-result-stay small,
.crm-result-history small {
  color: var(--crm-ivory-ink-soft);
}

.crm-result-contact > span,
.crm-result-stay > span,
.crm-result-history > span {
  color: var(--crm-ivory-ink);
}

/* The arrow joins the gold-ink the row's other affordances speak in. */
.crm-results .crm-result-open {
  color: var(--ok);
}

.crm-results-footer {
  border-top-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
}

/* ------------------------------------------------------- the shared pills */

/* One scale everywhere, unguarded: these two pills are shared by the
   directories, the Home rows and the record pages, and a status that changed
   colour on the way from a list to a record would be a different status. The
   five semantic pairs are the contrast-verified set from the ivory sheet. */
.crm-status-badge {
  background: var(--crm-sem-neutral-soft);
  color: var(--crm-sem-neutral);
}

.crm-status-badge.is-checked-in {
  background: var(--crm-sem-good-soft);
  color: var(--crm-sem-good);
}

.crm-status-badge.is-checked-out {
  background: var(--crm-sem-warn-soft);
  color: var(--crm-sem-warn);
}

.crm-status-badge.is-not-checked-in {
  background: var(--crm-sem-info-soft);
  color: var(--crm-sem-info);
}

.crm-status-badge.is-no-show {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

.crm-feedback-rating.is-good {
  background: var(--crm-sem-good-soft);
  color: var(--crm-sem-good);
}

.crm-feedback-rating.is-warning {
  background: var(--crm-sem-warn-soft);
  color: var(--crm-sem-warn);
}

.crm-feedback-rating.is-poor {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

/* ------------------------------------------- the record-page table family */

/* `.crm-data-table` and the `.crm-pos-*` variants belong to the reservation
   record rather than to a directory, and the record page is Phase 4. They are
   restyled here anyway, deliberately: they are the same tables, read by the
   same operator, one click away from the POS directory, and the feedback
   pills above already crossed that line. */
.crm-data-table {
  color: var(--crm-ivory-ink);
}

.crm-data-table-wrap {
  border-top-color: var(--crm-ivory-hair);
}

.crm-data-table th,
.crm-data-table td {
  border-bottom-color: var(--crm-ivory-hair-soft);
}

.crm-data-table th {
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

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

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

.crm-table-link {
  color: var(--ok);
}

.crm-table-link:hover,
.crm-table-link:focus-visible {
  color: var(--crm-ivory-ink);
}

/* The feedback tab's summary boxes, cards and state panels are the same
   family of card-on-a-surface, and the rating pills inside them have already
   moved; the radius normalises to the 10px the theme uses for a card. The
   stay-access and Exclusivi email blocks keep their accent tints — they are
   not tables and are left to Phase 4. */
.crm-feedback-summary > div,
.crm-feedback-card,
.crm-feedback-state {
  border-color: var(--crm-ivory-hair);
  border-radius: 10px;
  background: var(--crm-ivory-card);
}

/* ------------------------------------------------------------ access card */

/* The access card is a link dressed as the secondary button, so its PDF opens
   in a tab of its own; an anchor needs the box that buttons get from the
   shared button rule. Used in the reservation header and the Access code
   cell of both reservation directory views. */
.crm-access-card-link {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-weight: 650;
  text-decoration: none;
}

/* Two actions now sit beside the code - the store card and the web-app link
   card - so the cell wraps rather than widening the column, and the code keeps
   the whole first line to itself when it does. */
.crm-access-code-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

/* General's Atrium App Link row: one line per code, and the printable card
   under them. The link is a long unbroken string, so it is the one thing on
   the page allowed to break anywhere. */
.crm-app-link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.crm-app-link-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-app-link-url {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ------------------------------------------------------------ narrow-width */

@media (max-width: 760px) {
  /* The pane owns the padding now, so it owns the climbdown the shared panel
     rule used to make. */
  .crm-reservation-directory {
    padding: 1rem;
  }
}