/* CRM Home — the operational "today" dashboard, in the Ivory theme.
   Tiles and cards speak the analytics stat-tile language
   (crm-guest-360-analytics.css) so the two areas read as one surface; trends
   stay in Analytics and never appear here. Colours come from the shared
   ground and semantic tokens in crm-guest-360-ivory.css.

   Two things inside these rows are deliberately left alone: the case severity
   chip and the feedback rating pill both come from the main shell sheet and
   are shared with directories this phase does not touch. */

/* The ivory pane the dashboard sits on, floating on the near-white workspace
   ground the same way the analytics panel does. The H2 in the workspace
   header stays outside it: the pane wraps the search, the tiles and the
   cards, not the page title. */
.crm-home {
  display: grid;
  gap: 18px;
  align-content: start;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

.crm-home-search {
  max-width: 520px;
}

/* Home's own copy of the guest search. Only the field is re-grounded — the
   submit stays the portal primary button, which is already the gold the rest
   of the pane is keyed to. */
.crm-home .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-home .crm-search-control input {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

.crm-home .crm-search-control input:focus {
  border-color: var(--brand-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* min() caps both track floors at the container: a bare floor wider than the
   column a phone leaves next to the navigation rail forces the whole
   workspace into horizontal overflow (pre-rollout audit F2). */
.crm-home-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

/* A card floats on the ivory ground; the gold hairline along its top edge is
   the only ornament the tile carries. */
.crm-home-tile {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--crm-ivory-hair);
  border-top: 2px solid var(--brand-gold-light);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--crm-ivory-card);
}

/* Ready tiles are buttons into their directory views; loading and error
   states stay plain articles. */
button.crm-home-tile {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The hover tint is re-mixed against the card rather than white, and the top
   hairline goes to full gold so the edge reads as the same ornament, lit. */
button.crm-home-tile:hover,
button.crm-home-tile:focus-visible {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--crm-ivory-hair));
  border-top-color: var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 6%, var(--crm-ivory-card));
}

.crm-home-tile.is-error {
  border-color: color-mix(in srgb, var(--error) 35%, var(--crm-ivory-hair));
}

.crm-home-tile-label {
  margin: 0;
  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;
}

/* Proportional figures: tabular-nums makes a headline number look gappy. */
.crm-home-tile-value {
  margin: 0;
  color: var(--crm-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.05rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* The placeholder dash is drawn in a hairline colour, so a loading tile holds
   the figure's height without ever reading as a value. */
.crm-home-tile.is-loading .crm-home-tile-value {
  color: var(--crm-ivory-hair-strong);
}

.crm-home-tile-note {
  margin: 0;
  color: var(--crm-ivory-ink-faint);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* The per-hotel split is the tile's evidence, not a second headline: it stays
   at caption weight so the total keeps the eye. */
.crm-home-split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.74rem;
}

.crm-home-split > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--crm-ivory-ink-soft);
  font-weight: 700;
}

.crm-home-split small {
  color: var(--crm-ivory-ink-faint);
  font-weight: 650;
}

/* The people count rides behind the reservation count in the same entry,
   separated by a middot and stepped back a tone: the rooms figure leads
   because it is what the headline totals, and the pair stays readable as
   "5 · 11" without a label the tile has no width for. */
.crm-home-split i {
  color: var(--crm-ivory-ink-faint);
  font-style: normal;
  font-weight: 650;
}

/* The middot carries the same ink as the figures it joins: in the hairline
   tone it disappeared against the card and the pair read as two unrelated
   numbers, which is the one thing this separator exists to prevent. */
.crm-home-split i::before {
  content: "\00B7";
  margin-right: 4px;
  color: var(--crm-ivory-ink-faint);
}

.crm-home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  align-items: start;
}

.crm-home-card {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--crm-ivory-card);
}

.crm-home-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.crm-home-card h3 {
  margin: 0;
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-weight: 400;
}

.crm-home-card-total {
  color: var(--crm-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.crm-home-card > footer {
  display: flex;
  justify-content: flex-end;
}

.crm-home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

/* The count chips take the shared semantic pairs: every one of them clears
   4.5:1 on its own tint and on the card behind it, and the severity word
   inside the chip carries the meaning so colour never has to. */
.crm-home-chip {
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  background: var(--crm-sem-warn-soft);
  color: var(--crm-sem-warn);
  font-size: 0.72rem;
  font-weight: 800;
}

.crm-home-chip.is-critical {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

/* A ruled list rather than floating pills: the rows sit flush and a hairline
   separates them, which is how the rest of the theme stacks records. */
.crm-home-rows {
  display: grid;
  gap: 0;
}

.crm-home-row + .crm-home-row {
  border-top: 1px solid var(--crm-ivory-hair-soft);
}

.crm-home-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* A rating survey is read as a set, not as six separate readings, so the six
   answers take a line of their own under the hotel and the hour rather than
   competing with them for the same row. The stacked row keeps the two-column
   header and spans the answers across both. */
.crm-home-row.is-stacked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: 6px;
  padding-bottom: 10px;
}

.crm-home-ratings {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 4px 14px;
}

/* The figure carries the reading and the silhouette says which question it
   answers; neither is a chip, because six filled pills in one row would
   out-shout the case list beside them. Tone rides on the text alone and every
   pair clears 4.5:1 on the card behind it. */
.crm-home-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--crm-ivory-ink-soft);
}

.crm-home-rating-value {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.crm-home-rating.is-good .crm-home-rating-value {
  color: var(--crm-sem-good);
}

.crm-home-rating.is-warning .crm-home-rating-value {
  color: var(--crm-sem-warn);
}

.crm-home-rating.is-poor .crm-home-rating-value {
  color: var(--crm-sem-bad);
}

.crm-home-row:not(.is-static) {
  cursor: pointer;
}

.crm-home-row:not(.is-static):hover,
.crm-home-row:not(.is-static):focus-visible {
  background: color-mix(in srgb, var(--brand-gold) 5%, var(--crm-ivory-card));
}

.crm-home-row-title {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--crm-ivory-ink);
  font-size: 0.82rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-home-row-title small {
  color: var(--crm-ivory-ink-faint);
  font-weight: 600;
}

.crm-home-row-meta {
  color: var(--crm-ivory-ink-faint);
  font-size: 0.71rem;
  white-space: nowrap;
}

.crm-home-row .crm-case-severity small {
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 700;
}

.crm-home-empty {
  margin: 0;
  color: var(--crm-ivory-ink-soft);
  font-size: 0.78rem;
}

/* A failure keeps the portal's error family — it is the one thing on the page
   that should not look like part of the theme. */
.crm-home-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--crm-ivory-hair));
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--error-soft);
  color: var(--error);
  font-size: 0.76rem;
}

/* The provenance line closes the pane in the italic the theme annotates with,
   under a rule rather than in a box of its own. */
.crm-home-freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--crm-ivory-hair-strong);
  padding-top: 11px;
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
}

/* Stale is a caution, not a failure: the page still shows real reservation
   counts, only the live occupancy reading is missing. */
.crm-home-freshness.is-stale {
  border-top-color: color-mix(in srgb, var(--crm-sem-warn) 35%, var(--crm-ivory-hair-strong));
  color: var(--crm-sem-warn);
}

.crm-home-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--action);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.crm-home-link:hover,
.crm-home-link:focus-visible {
  color: var(--action-hover);
}

/* The link stays inside the footer's italic line, at the single weight the
   Cormorant face ships, so nothing is synthesised into a faux bold. */
.crm-home-freshness .crm-home-link {
  font-weight: 400;
}

@media (max-width: 700px) {
  .crm-home-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* nowrap timestamps are wider than the column the severity chip leaves on
     a phone; wrapping keeps the row inside the workspace instead of adding
     sideways overflow. */
  .crm-home-row-meta {
    grid-column: 2;
    white-space: normal;
  }

  /* A survey row has no leading chip to borrow width from, so the hotel and
     the hour sharing a line clipped the name to "Atrium Plati". Each of the
     three parts takes a line of its own instead. */
  .crm-home-row.is-stacked {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
  }

  .crm-home-row.is-stacked .crm-home-row-title {
    white-space: normal;
  }

  .crm-home-row.is-stacked .crm-home-row-meta {
    grid-column: 1;
  }
}