/* The CRM case surfaces — the directory, the editor and the chips they share —
   in the Ivory theme.

   This began as the row-selection and bulk-action sheet for the case
   directory and is now the general case stylesheet: the Ivory cascade gave
   the case surfaces their pane, table, chip and editor rules and they belong
   with the selection rules they sit beside, not scattered. The file name is
   kept because the module manifest, the portal shell and the case tests all
   name it; renaming it is a separate, mechanical change.

   These rules live outside crm-guest-360.css because that file sits at its
   architecture-audit line ceiling; crm-guest-360-case-settings.css set the
   precedent for a small CRM-scoped stylesheet served through the module
   manifest. Loaded after crm-guest-360.css, so the selected-row tint wins
   over the equally specific hover rule instead of fighting it with
   !important — and so every re-ink below beats the shell rule it restates.

   Colours come from the shared ground and semantic tokens in
   crm-guest-360-ivory.css, which are declared on .crm-guest-360-view; the
   analytics and Home sheets are the style precedents.

   Everything is guarded under a case scope — .crm-case-directory,
   .crm-case-detail, or a .crm-case-* class that exists only on a case
   surface — so nothing leaks into the directories, record pages or empty
   states that later phases own. The one deliberate exception is the chip
   family in the "case chips" section: a severity dot must not mean one
   colour in the case directory and another in the Home list that renders the
   same chip, so those rules are keyed on the case-owned class alone. */

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

/* The ivory pane the directory sits on, floating on the near-white workspace
   ground exactly as the Home dashboard and the analytics panel do. */
.crm-case-directory {
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

/* The shell's toolbar 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 — scoped here, not fixed globally, because the
   toolbar is shared with the editor, whose heading carries a case title. */
.crm-case-directory .crm-case-toolbar 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. The
   eyebrow above is left alone: the CRM shell already sets it in tracked
   Tenor Sans in the gold ink, which is the Ivory caption voice. */
.crm-case-directory .crm-case-toolbar > div > 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;
}

/* ------------------------------------------------------------- tab strip */

/* One tab vocabulary. The shell paints this strip with a 3px --accent
   underline and the settings strip with a 2px gold one; the record tabs use
   the 2px gold rule as well, so the case directory joins them and the third
   variant disappears from the case surfaces. */
/* The bottom padding is what keeps the active tab's underline a rule under a
   word rather than a second line stacked on the strip's own border. */
.crm-case-directory .crm-directory-tabs {
  gap: 2px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 10px;
  padding: 0 12px 5px;
  background: var(--crm-ivory-card);
}

.crm-case-directory .crm-directory-tabs button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-bottom: 2px solid transparent;
  padding: 0 13px;
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-case-directory .crm-directory-tabs button:hover,
.crm-case-directory .crm-directory-tabs button:focus-visible {
  color: var(--crm-ivory-ink);
}

.crm-case-directory .crm-directory-tabs button.active {
  border-bottom-color: var(--brand-gold);
  color: var(--crm-ivory-ink);
}

/* ------------------------------------------------------------ search form */

/* The eleven-field search sits on a card in the pane, like Home's
   find-a-guest box. Only the ground, the hairline and the label voice are
   restated; the grid and the primary button stay with the shell.

   The root is named on every rule here even though .crm-case-search-form is
   already case-only: the form also carries .crm-directory-form, a family the
   other directories restyle in their own sheet, and a two-class selector
   wins over that family whichever sheet the shell links last. */
.crm-case-directory .crm-case-search-form {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

.crm-case-directory .crm-case-search-form .crm-directory-field > span {
  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-case-directory .crm-case-search-form .crm-directory-field input,
.crm-case-directory .crm-case-search-form .crm-directory-field select {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

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

/* ------------------------------------------------------------ case table */

.crm-case-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-case-directory .crm-directory-results > header > span {
  color: var(--crm-ivory-ink-soft);
}

/* The table is a card on the pane. The wrap's two opaque scroll covers are
   painted with the surface token, which is white — on ivory they would read
   as a cold band over the first and last column, so the whole four-layer
   background is restated against the card. */
.crm-case-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, 253, 249, 0)),
    linear-gradient(to left, var(--crm-ivory-card) 60%, rgba(255, 253, 249, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(34, 31, 24, 0.18), rgba(34, 31, 24, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(34, 31, 24, 0.18), rgba(34, 31, 24, 0));
}

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

.crm-case-directory .crm-case-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.12em;
  text-transform: uppercase;
}

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

/* The warm row hover the case directory has had since the first pass, only
   re-mixed against the card it now sits on rather than against white. */
.crm-case-directory .crm-case-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-gold) 7%, var(--crm-ivory-card));
}

/* --------------------------------------------------- selection and export */

.crm-case-table .crm-case-select-cell {
  width: 2.6rem;
  padding-right: 0.35rem;
  text-align: center;
}

.crm-case-table .crm-case-select {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--brand-gold, #b89136);
  cursor: pointer;
}

/* The selected tint is the same gold at the same strengths as before, mixed
   into the card so a ticked row reads as a lit row rather than as a pale
   rectangle laid over one. */
.crm-case-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--brand-gold) 12%, var(--crm-ivory-card));
}

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

/* The bar only renders while something is selected, so it reads as an answer
   to the tick rather than as permanently disabled chrome. */
.crm-case-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  background: var(--crm-ivory-card);
}

.crm-case-bulk-count {
  color: var(--crm-ivory-ink);
  font-size: 0.82rem;
  font-weight: 750;
}

/* The escalation reads as a link inside the sentence the count starts, not as
   a fourth button competing with the export actions on the right. */
.crm-case-bulk-escalate {
  margin-right: auto;
  border: 0;
  padding: 0;
  background: none;
  color: color-mix(in srgb, var(--brand-gold) 65%, var(--crm-ivory-ink));
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.crm-case-bulk-escalate:hover,
.crm-case-bulk-escalate:focus-visible {
  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.
   The analytics sheet makes the same override for the same reason. */
.crm-case-directory .secondary-button,
.crm-case-detail .secondary-button {
  border: 1px solid var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink-soft);
}

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

/* The way back out of the editor arrives in the same cool grey as the
   secondary button and, as a grid item, spans the pane — so on ivory it reads
   as a band rather than as a control. Only its ground, hairline and ink are
   restated; the width it has always had is left alone. */
.crm-case-detail .crm-reservation-back {
  border: 1px solid var(--crm-ivory-hair);
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-card);
}

.crm-case-detail .crm-reservation-back:hover,
.crm-case-detail .crm-reservation-back:focus-visible {
  color: var(--crm-ivory-ink);
  background: var(--accent-soft);
}

/* ------------------------------------------------------------- case chips */

/* The four severity inks and the two status pairs, keyed on the case-owned
   classes rather than on a view scope: the same chip is rendered by the case
   directory, the case editor, the reservation cases panel and the Home
   triage list, and a severity that changes colour between them would be a
   second vocabulary rather than one. Colour never carries the meaning on its
   own — the word in the chip does. */
.crm-case-severity > span {
  background: var(--crm-sem-good);
}

.crm-case-severity.is-medium > span {
  background: #b07b18;
}

.crm-case-severity.is-high > span {
  background: #b03a2e;
}

/* Critical keeps the triangle: shape, not only colour, separates it from the
   round high dot beside it in a list. */
.crm-case-severity.is-critical > span {
  border-radius: 0;
  background: #7c2d26;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Open keeps the gold identity. It is an activity state, not a health state:
   an active case is neither good nor bad news, and the gold is the same one
   the rest of the pane is keyed to.

   The ink is a darker mix of that same gold than --ok, which measured 3.72:1
   on --ok-soft and 4.17:1 on the card — under AA on both. Mixed 55% into the
   ivory ink it measures 5.47:1 on --ok-soft, 6.13:1 on the card and 5.66:1 on
   the pane, so the word reads whether the chip sits on its tint or bare. */
.crm-case-status {
  background: var(--ok-soft);
  color: color-mix(in srgb, var(--brand-gold) 55%, var(--crm-ivory-ink));
}

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

.crm-case-overdue {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-sem-bad);
}

.crm-case-days.is-stale {
  color: var(--crm-sem-warn);
}

/* Provenance, not health: a case that came from Dynamics 365 keeps its old
   number for as long as it exists, so the chip stays after the cutover clears
   the lock. It takes the overdue pill's shape from the shell sheet — same
   radius, size and padding, since it sits in the same rows — and changes only
   the ground and the ink to the informational pair, because "where this came
   from" must not compete with the severity and status chips beside it. In a
   list it names the system in one word and keeps the sentence in its title;
   the gap is its own, since the row template has no whitespace to give it. */
.crm-case-imported-chip {
  background: var(--crm-sem-info-soft);
  color: var(--crm-sem-info);
  margin-left: 0.4rem;
}

/* On the case itself the chip carries the whole sentence and follows the
   eyebrow paragraph, so it takes the line under the case number rather than
   trailing it, and drops the list weight a phrase does not need. */
.crm-case-toolbar .crm-case-imported-chip {
  font-weight: 650;
  margin: 0.3rem 0 0;
  white-space: normal;
}

/* The severity select carries the same four inks as the dots: on the left
   edge of the control, and on the options inside it.

   Both surfaces the control appears on are named on every rule, and the two
   selectors are deliberately four classes deep: the field re-inks below set
   `border-color` through a selector carrying an element name, which would
   otherwise repaint this edge in the hairline and erase the tint the shell
   sizes at 0.42rem. */
.crm-case-directory .crm-case-search-form .crm-case-severity-select.is-low,
.crm-case-detail .crm-case-form .crm-case-severity-select.is-low {
  border-left-color: var(--crm-sem-good);
}

.crm-case-directory .crm-case-search-form .crm-case-severity-select.is-medium,
.crm-case-detail .crm-case-form .crm-case-severity-select.is-medium {
  border-left-color: #b07b18;
}

.crm-case-directory .crm-case-search-form .crm-case-severity-select.is-high,
.crm-case-detail .crm-case-form .crm-case-severity-select.is-high {
  border-left-color: #b03a2e;
}

.crm-case-directory .crm-case-search-form .crm-case-severity-select.is-critical,
.crm-case-detail .crm-case-form .crm-case-severity-select.is-critical {
  border-left-color: #7c2d26;
}

.crm-case-severity-select option[value="low"] {
  color: var(--crm-sem-good);
}

.crm-case-severity-select option[value="medium"] {
  color: #b07b18;
}

.crm-case-severity-select option[value="high"] {
  color: #b03a2e;
}

.crm-case-severity-select option[value="critical"] {
  color: #7c2d26;
}

/* ---------------------------------------------------------- case editor */

/* The read-only notice on an imported, still-locked case. It is a statement
   of fact rather than a failure, so it takes the informational ink and not the
   error red the inline save failures use — and it sits above the reservation
   card and the form, where a reader meets it before reaching for a field that
   will not accept them. */
.crm-case-detail .crm-case-sync-notice {
  border: 1px solid color-mix(in srgb, var(--crm-sem-info) 35%, var(--crm-ivory-hair));
  border-radius: 12px;
  background: var(--crm-sem-info-soft);
  color: var(--crm-ivory-ink);
  margin: 0 0 16px;
  padding: 12px 14px;
}

.crm-case-detail .crm-case-sync-notice strong {
  color: var(--crm-sem-info);
}

/* The editor takes the same ivory pane as the directory. Without it the
   near-white cards below would float on the white workspace ground and their
   hairlines would be the only thing separating them from it. */
.crm-case-detail {
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

.crm-case-detail .crm-case-toolbar 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 status · severity · days line under the title is the re-inked chips
   with plain ink between them. */
.crm-case-detail .crm-case-toolbar > div > p:last-child {
  color: var(--crm-ivory-ink-soft);
}

/* The reservation the case is about: still the gold card it always was, only
   mixed into the ivory card rather than into white. */
.crm-case-detail .crm-case-context {
  border-color: color-mix(in srgb, var(--brand-gold) 30%, var(--crm-ivory-hair));
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--crm-ivory-card));
}

/* :first-child, not every span: the current-room cell carries the room-range
   and room-move annotations as sibling spans, and they are sentences rather
   than labels. */
.crm-case-detail .crm-case-context > div > span:first-child,
.crm-case-detail .crm-case-form label > span {
  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-case-detail .crm-case-context > div > strong {
  color: var(--crm-ivory-ink);
}

.crm-case-detail .crm-case-context-feedback {
  border-top-color: color-mix(in srgb, var(--brand-gold) 30%, var(--crm-ivory-hair));
}

.crm-case-detail .crm-case-context-feedback-item {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
}

.crm-case-detail .crm-case-context-feedback-ratings > span {
  background: color-mix(in srgb, var(--brand-gold) 8%, var(--crm-ivory-card));
}

.crm-case-detail .crm-case-context-feedback-item p,
.crm-case-detail .crm-case-context-feedback-empty,
.crm-case-detail .crm-case-field-help {
  color: var(--crm-ivory-ink-soft);
}

/* The form is a card on the pane. The fieldset is the card, not the form:
   the actions footer sits outside it, so the buttons stay on the ground the
   way the pane's other controls do. */
.crm-case-detail .crm-case-form fieldset {
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 12px;
  padding: 16px;
  background: var(--crm-ivory-card);
}

.crm-case-detail .crm-case-form input,
.crm-case-detail .crm-case-form select,
.crm-case-detail .crm-case-form textarea {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

/* A text field grows downward only. The browser default hands the corner
   handle both axes, and a dragged width is written inline in pixels, where it
   outranks the 100% the shell sets and carries the field across the gutter
   into the neighbouring column — the description over People involved. The
   height is the reader's to set for a long narrative; the width belongs to
   the two-column grid. min-height keeps the handle from collapsing the field.

   The label's own column is pinned to its cell as well: the shell leaves it
   an auto track, which widens to whatever the control asks for, so a
   percentage max-width on the control would resolve against the very width
   it is meant to cap. With the track pinned, max-width is a real backstop
   for a width that reaches the control inline or through a long option. */
.crm-case-detail .crm-case-form label {
  grid-template-columns: minmax(0, 1fr);
}

.crm-case-detail .crm-case-form textarea {
  max-width: 100%;
  min-height: 5rem;
  resize: vertical;
}

.crm-case-detail .crm-case-form input:focus,
.crm-case-detail .crm-case-form select:focus,
.crm-case-detail .crm-case-form textarea:focus {
  border-color: var(--brand-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* A disabled field is a reading, not an entry: it drops to the pane ground so
   it reads as part of the card rather than as a box waiting for a value. */
.crm-case-detail .crm-case-form input:disabled,
.crm-case-detail .crm-case-form select:disabled,
.crm-case-detail .crm-case-form textarea:disabled {
  color: var(--crm-ivory-ink-soft);
  background: var(--crm-ivory-ground);
}

/* The classification block has no legend element, so its header heading is
   the legend: the same tracked Tenor caption the panels above it use. */
.crm-case-detail .crm-case-classifications {
  border-top-color: var(--crm-ivory-hair);
}

.crm-case-detail .crm-case-classifications header h4 {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-case-detail .crm-case-classifications header p {
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
}

/* --------------------------------------- reservation lookup and its panels */

.crm-case-detail .crm-profile-panel {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  box-shadow: none;
}

.crm-case-detail .crm-profile-panel > header {
  border-bottom-color: var(--crm-ivory-hair);
}

.crm-case-detail .crm-case-log h4,
.crm-case-detail .crm-case-lookup h4,
.crm-case-detail .crm-case-reload-failure h4 {
  color: var(--crm-ivory-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crm-case-detail .crm-directory-form {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-ground);
}

.crm-case-detail .crm-directory-field > span {
  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-case-detail .crm-directory-field input,
.crm-case-detail .crm-directory-field select {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

.crm-case-detail .crm-case-reservation-matches button {
  border-color: var(--crm-ivory-hair);
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
}

.crm-case-detail .crm-case-reservation-matches button:hover,
.crm-case-detail .crm-case-reservation-matches button:focus-visible {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--crm-ivory-hair));
  background: color-mix(in srgb, var(--brand-gold) 6%, var(--crm-ivory-card));
}

.crm-case-detail .crm-case-reservation-matches button span {
  color: var(--crm-ivory-ink-soft);
}

/* ------------------------------------------------------------ activity log */

.crm-case-detail .crm-case-log li {
  border-left-color: var(--crm-ivory-hair);
}

/* The dot's ring is the card it is drawn on, so the gold reads as a bead on
   the thread rather than as a disc with a white halo. */
.crm-case-detail .crm-case-log-dot {
  border-color: var(--crm-ivory-card);
}

.crm-case-detail .crm-case-log li strong {
  color: var(--crm-ivory-ink);
}

.crm-case-detail .crm-case-log-changes {
  color: var(--crm-ivory-ink-soft);
}

/* Actor and timestamp are the entry's margin note, at the faintest weight the
   ground carries. */
.crm-case-detail .crm-case-log p {
  color: var(--crm-ivory-ink-faint);
}

@media (max-width: 767px) {
  .crm-case-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-case-bulk-escalate {
    margin-right: 0;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .crm-case-directory,
  .crm-case-detail {
    padding: 14px;
  }

  .crm-case-directory .crm-directory-tabs {
    padding: 0 6px 5px;
  }
}