/*
 * CRM Guest 360 — Settings › Guest Identity, in the Ivory theme.
 *
 * The five tabs of crm-guest-360-identity.js: the links waiting to be
 * verified, the two WP-4 placeholders, the Filoxenia records whose Protel
 * profile no longer exists, and the decision ledger.
 *
 * The view reuses the Case Settings shell — .crm-case-settings, its tab
 * strip, its header and its summary tiles — because it IS the same kind of
 * surface, the way Mail Settings does. Everything this sheet adds is a
 * .crm-identity-* class of its own, plus the ivory re-tint the shared
 * directory table gets inside a settings pane.
 *
 * The signal chips are the one place colour is used semantically, and it is
 * never used alone: each chip spells out "same", "differs" or "not recorded"
 * beside its subject, so the table reads identically in monochrome.
 *
 * Every colour is consumed from the shared ground and semantic tokens in
 * crm-guest-360-ivory.css, declared on .crm-guest-360-view. Nothing is
 * re-declared here and there are no raw hex values.
 */

.crm-guest-360-view .crm-identity {
  display: grid;
  gap: 1rem;
}

/* The six counters. Wrapping rather than a fixed row: six tiles do not fit a
   narrow pane, and a tile that has slid off the edge is a counter nobody
   reads. */
.crm-guest-360-view .crm-identity-tiles {
  flex-wrap: wrap;
}

.crm-guest-360-view .crm-identity-tiles > div {
  min-width: 132px;
}

.crm-guest-360-view .crm-identity-tiles span {
  display: block;
  margin-top: 0.15rem;
  color: var(--crm-ivory-ink-faint);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
}

/* How much work is waiting, on the tab that holds it. */
.crm-guest-360-view .crm-identity-count {
  margin-left: 0.35rem;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--crm-sem-warn-soft);
  color: var(--crm-sem-warn);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 400;
}

/* The one-line outcome of the last decision. It sits above the panel rather
   than inside it, so a tab switch cannot carry it into a table it was not
   about. */
.crm-guest-360-view .crm-identity-notice {
  margin: 0;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
}

.crm-guest-360-view .crm-identity-placeholder {
  max-width: 720px;
}

/* --- the tables ---------------------------------------------------------- */

/* The ivory re-tint the reservation directory gets, applied inside this pane
   so the settings tables read as the same furniture. */
.crm-guest-360-view .crm-identity .crm-directory-table-wrap {
  border-color: var(--crm-ivory-hair);
  background-color: var(--crm-ivory-card);
}

.crm-guest-360-view .crm-identity-table {
  min-width: 940px;
  color: var(--crm-ivory-ink);
}

.crm-guest-360-view .crm-identity-table th,
.crm-guest-360-view .crm-identity-table td {
  border-bottom-color: var(--crm-ivory-hair-soft);
  vertical-align: top;
}

.crm-guest-360-view .crm-identity-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;
}

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

.crm-guest-360-view .crm-identity-name {
  display: block;
  color: var(--crm-ivory-ink);
  font-weight: 700;
}

.crm-guest-360-view .crm-identity-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
}

/* --- the signals --------------------------------------------------------- */

.crm-guest-360-view .crm-identity-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.crm-guest-360-view .crm-identity-signal {
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--crm-sem-neutral-soft);
  color: var(--crm-sem-neutral);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  white-space: nowrap;
}

.crm-guest-360-view .crm-identity-signal.is-equal {
  background: var(--crm-sem-good-soft);
  color: var(--crm-sem-good);
}

.crm-guest-360-view .crm-identity-signal.is-differs {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

/* --- the decisions ------------------------------------------------------- */

.crm-guest-360-view .crm-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.crm-guest-360-view .crm-identity-actions button {
  white-space: nowrap;
}

.crm-guest-360-view .crm-identity-decision {
  display: inline-block;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 999px;
  padding: 1px 9px;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  white-space: nowrap;
}

.crm-guest-360-view .crm-identity-decision.is-same {
  background: var(--crm-sem-good-soft);
  color: var(--crm-sem-good);
}

.crm-guest-360-view .crm-identity-decision.is-not-same {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

@media (max-width: 900px) {
  .crm-guest-360-view .crm-identity-tiles > div {
    min-width: 112px;
  }
}