/* CRM case settings — the notification recipients and the case categories, in
   the Ivory theme.

   Colours come from the shared ground and semantic tokens in
   crm-guest-360-ivory.css; crm-guest-360-case-bulk.css carries the rest of
   the case surfaces and documents the split-sheet precedent this file set.

   Every rule is guarded by a settings-only class. The two cards here also
   carry .crm-profile-panel, which the record pages share and a later phase
   owns, so the panel rules are keyed on .crm-case-settings .crm-case-setting
   rather than on the shared family.

   The two-tab strip keeps its own type scale: it switches between the two
   settings pages rather than filtering one list, and only its inks needed to
   move onto the ivory ground. */

/* The ivory pane, the same one the case directory and the case editor sit
   on. Without it the near-white cards below would float on the white
   workspace ground with only their hairlines to separate them from it. */
.crm-case-settings {
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 14px;
  padding: 20px;
  background: var(--crm-ivory-ground);
}

.crm-case-setting {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.crm-case-settings-views {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--crm-ivory-hair);
}

.crm-case-settings-views button {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0.2rem;
  color: var(--crm-ivory-ink-soft);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.crm-case-settings-views button + button {
  margin-left: 1rem;
}

.crm-case-settings-views button:hover {
  color: var(--crm-ivory-ink);
}

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

.crm-case-settings-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.crm-case-settings-view {
  display: grid;
  gap: 1rem;
}

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

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

/* The page title in the house serif and the blurb under it in the italic the
   theme annotates with, matching the case directory's toolbar. */
.crm-case-settings-header 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;
}

.crm-case-settings-header > div > p:last-child {
  max-width: 720px;
  margin-top: 0.25rem;
  color: var(--crm-ivory-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}

.crm-case-settings-summary {
  display: flex;
  flex: 0 0 auto;
  gap: 0.45rem;
  margin: 0;
}

.crm-case-settings-summary > div {
  min-width: 92px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 7px;
  padding: 0.48rem 0.65rem;
  background: var(--crm-ivory-card);
}

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

.crm-case-settings-summary dd {
  margin: 0.12rem 0 0;
  color: var(--crm-ivory-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
}

.crm-case-settings-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* A card on the ivory ground, flat like the analytics and Home cards. Keyed
   on the settings root because the panel family is shared with the record
   pages, which a later phase restyles. */
.crm-case-settings .crm-case-setting {
  border-color: var(--crm-ivory-hair);
  background: var(--crm-ivory-card);
  box-shadow: none;
}

.crm-case-setting > header {
  padding: 0.62rem 0.8rem;
}

.crm-case-settings .crm-case-setting > header {
  border-bottom-color: var(--crm-ivory-hair);
}

.crm-case-settings .crm-case-setting > header h4 {
  margin: 0;
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.crm-case-setting-body {
  align-content: start;
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.8rem 0.7rem;
}

/* One bordered box holds the chips and the add field, so the whole thing reads
   as a single input rather than a list stacked above a text box. */
.crm-case-recipient-editor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.42rem;
  padding: 0.3rem 0.38rem;
  background: var(--crm-ivory-card);
}

.crm-case-recipient-editor:focus-within {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.crm-case-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-case-recipient {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: var(--crm-sem-neutral);
  background: var(--crm-sem-neutral-soft);
  font-size: 0.72rem;
}

.crm-case-recipient > span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reserved space, hidden until the chip is hovered or the button is tabbed to:
   revealing it must not reflow the row. */
.crm-case-recipient-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: var(--crm-ivory-ink-faint);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
}

.crm-case-recipient:hover .crm-case-recipient-remove,
.crm-case-recipient-remove:focus-visible {
  opacity: 1;
}

.crm-case-recipient-remove:hover,
.crm-case-recipient-remove:focus-visible {
  color: var(--error);
  outline: none;
}

.crm-case-recipient-remove:disabled {
  cursor: default;
}

.crm-case-recipient-editor input {
  flex: 1 1 8rem;
  min-width: 8rem;
  min-height: 24px;
  border: 0;
  padding: 0 0.15rem;
  color: var(--crm-ivory-ink);
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
}

.crm-case-recipient-editor input:focus {
  outline: none;
}

.crm-case-setting-empty {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.72rem;
}

.crm-case-setting-status {
  min-height: 0.85rem;
  color: var(--ok);
  font-size: 0.62rem;
  font-weight: 750;
}

.crm-case-setting-status.is-error {
  color: var(--error);
}

/* The Daily Cases Report card carries a send time and an issue format above
   its recipient box. The row keeps each label, field and status on one line so
   the card reads as its settings rather than as stacked forms. */
.crm-case-daily-report-schedule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  padding-bottom: 0.15rem;
}

.crm-case-daily-report-schedule label {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
}

.crm-case-daily-report-schedule input[type="time"],
.crm-case-daily-report-schedule select {
  min-height: 26px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.42rem;
  padding: 0 0.35rem;
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
  font: inherit;
  font-size: 0.74rem;
}

.crm-case-daily-report-schedule input[type="time"]:focus,
.crm-case-daily-report-schedule select:focus {
  border-color: var(--brand-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Read-only readers see the chosen time and format as plain text in the same
   slots. */
.crm-case-daily-report-time,
.crm-case-daily-report-format {
  color: var(--crm-ivory-ink);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

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

.crm-case-category-add input {
  flex: 0 1 18rem;
  min-width: 10rem;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.42rem;
  padding: 0.42rem 0.55rem;
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
  font: inherit;
  font-size: 0.76rem;
}

.crm-case-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.crm-case-category-header h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-case-category-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0.15rem;
}

.crm-case-category-action {
  border: 0;
  border-radius: 0.3rem;
  padding: 0.15rem 0.35rem;
  color: var(--crm-ivory-ink-soft);
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  cursor: pointer;
}

.crm-case-category-action:hover,
.crm-case-category-action:focus-visible {
  color: var(--brand-gold);
  background: var(--crm-ivory-ground);
  outline: none;
}

.crm-case-category-action.is-danger:hover,
.crm-case-category-action.is-danger:focus-visible {
  color: var(--error);
}

.crm-case-category-action:disabled {
  cursor: default;
}

.crm-case-subcategory-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-case-subcategory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.24rem 0;
  border-bottom: 1px solid var(--crm-ivory-hair-soft);
  color: var(--crm-ivory-ink);
  font-size: 0.74rem;
}

.crm-case-subcategory:last-child {
  border-bottom: 0;
}

.crm-case-subcategory > span:first-child {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row actions stay out of the way until the row is hovered or the button is
   tabbed to, mirroring the recipient chips above. */
.crm-case-subcategory .crm-case-category-action {
  opacity: 0;
}

.crm-case-subcategory:hover .crm-case-category-action,
.crm-case-subcategory .crm-case-category-action:focus-visible,
.crm-case-subcategory .crm-case-category-action:disabled {
  opacity: 1;
}

.crm-case-subcategory.is-editing {
  display: block;
}

.crm-case-category-rename {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.crm-case-category-rename input {
  flex: 1 1 8rem;
  min-width: 8rem;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.42rem;
  padding: 0.3rem 0.45rem;
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
  font: inherit;
  font-size: 0.76rem;
}

.crm-case-subcategory-add input {
  width: 100%;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 0.42rem;
  padding: 0.32rem 0.45rem;
  color: var(--crm-ivory-ink);
  background: var(--crm-ivory-card);
  font: inherit;
  font-size: 0.74rem;
}

.crm-case-category-add input:focus-visible,
.crm-case-category-rename input:focus-visible,
.crm-case-subcategory-add input:focus-visible {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

@media (hover: none) {
  .crm-case-recipient-remove {
    opacity: 1;
  }

  .crm-case-subcategory .crm-case-category-action {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .crm-case-settings-header {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-case-settings-summary {
    align-self: flex-start;
  }
}

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