/* The Hotwire kit's additions to the console's design system. primitives.css, screens.css, field.css,
 * tokens.css and base.css are the Next app's, unchanged; this file holds only what the ERB twins
 * need that React did without (a panel that is always in the page and `hidden` instead of
 * unmounted, the form wrappers Rails adds). Loaded last by layouts/crm. */

/* `hidden` always hides. React leaves an element out of the page; the ERB twins render it with `hidden` and a
   Stimulus controller reveals it, but the browser's [hidden] rule loses to any class that sets display (ui-field,
   ui-button, ui-composer-input...), so hidden stage fields, Set stage/Cancel and the composer's Dave field in note
   mode showed anyway (2026-10-14). */
.crm-app [hidden] {
  display: none !important;
}

/* A React popover mounts its panel when open; the ERB one is in the page, hidden. */
.ui-popover-panel[hidden],
.screen-tickets-page[hidden],
.ui-dialog:not([open]) .ui-dialog-panel {
  display: none;
}

/* Rails wraps a button_to button in a form; keep it inline with its siblings. */
.screen-toast-form,
.ui-button-form {
  display: inline;
  margin: 0;
}

.ui-dialog-form {
  display: contents;
}

/* The copy button's confirmation: a moment of accent colour after a copy. */
.ui-icon-button[data-copied] {
  color: var(--c-success);
}

/* A badge slot a Turbo Stream replaces: layout-neutral, so the badge still positions against its glyph. */
.crm-badge-slot {
  display: contents;
}

/* An action form inside a queue row's slots takes no box of its own: its button sits among the row's buttons. */
.ui-action-item-actions > form,
.ui-action-item-leading > form {
  display: contents;
}

/* A filter chip's rows are links here (a pick is a navigation). */
a.ui-chip-item {
  text-decoration: none;
}

/* The search box is a GET form; it takes no space of its own. */
.screen-list-search-form {
  display: contents;
}

/* "More actions" behind a native <details>: the summary is an icon button, the rest sit beside it once open. */
.screen-question-more {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
}

.screen-question-more > summary {
  list-style: none;
  cursor: pointer;
}

.screen-question-more > summary::-webkit-details-marker {
  display: none;
}

/* Kit polish (W8, from the W7 screens): three places where the ERB twins squeezed what React laid out.
   1. A setting row's text never wraps inside a word ("Phon e"): it keeps a floor of its own width and the control drops to the next
      line when the two do not fit (the row already wraps), instead of the box taking the whole row and the label breaking mid-word. */
.ui-setting-text {
  flex: 1 1 10rem;
}

.ui-setting-label {
  overflow-wrap: normal;
  word-break: normal;
}

/* 2. A stat's value may wrap (its small detail drops under it) instead of ending in an ellipsis ("128 …"). */
.ui-statstrip-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.ui-statstrip-detail {
  white-space: nowrap;
}

/* A Turbo Frame that stands where Next rendered its child directly (the conversation view's contact side):
   no box of its own, so the child is the pane's flex item and scrolls inside it instead of growing the page. */
turbo-frame.crm-layout-frame {
  display: contents;
}