/* ----------------------------------------------------------------------- */
/* Misc utilities                                                           */
/* ----------------------------------------------------------------------- */

/* Preserve newlines + collapse runs of whitespace. Used on rendered
   text columns (free-form deployment-profile notes, etc.) where the
   author may have typed multi-line input we want to render as
   multi-line on the page. CSS rule instead of inline style="" so the
   suite's CSP style-src directive doesn't strip it. */
.prewrap { white-space: pre-wrap; }

/* Screen-reader-only — visible to assistive tech, painted at zero
   pixels for sighted users. Used as the accessible label on icon-only
   buttons (e.g. the .info tooltip trigger in form.css). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted        { color: var(--ink-muted); }
.muted-strong { color: var(--ink-soft); }
.tiny         { font-size: 0.78rem; }
.small        { font-size: 0.88rem; }
.center       { text-align: center; }
.right        { text-align: right; }
.left         { text-align: left; }
.nowrap       { white-space: nowrap; }
.italic       { font-style: italic; }
.pre-wrap     { white-space: pre-wrap; }
.break-all    { word-break: break-all; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.serif        { font-family: var(--serif); }
.spread       { display: flex; justify-content: space-between; gap: var(--gap-3); align-items: baseline; flex-wrap: wrap; }

/* Color helpers */
.danger-text   { color: var(--err); }
.danger-strike { color: var(--err); text-decoration: line-through; }

/* Probe / status text. Used by the Entra "Test connection" output and
   any future inline live-check UIs. Names mirror Stimulus controller
   value semantics ("ok"/"err"/"warn"/"muted") so the JS doesn't have
   to compose class names. */
.ok   { color: var(--ok); }
.err  { color: var(--err); }
.warn { color: var(--ink); }

/* Spacing scale (use sparingly — prefer .stack / .cluster for layout) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--gap-1); }
.mt-2 { margin-top: var(--gap-2); }
.mt-3 { margin-top: var(--gap-3); }
.mt-4 { margin-top: var(--gap-4); }
.mt-5 { margin-top: var(--gap-5); }
.mt-6 { margin-top: var(--gap-6); }
.mt-7 { margin-top: var(--gap-7); }
.mt-8 { margin-top: var(--gap-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--gap-1); }
.mb-2 { margin-bottom: var(--gap-2); }
.mb-3 { margin-bottom: var(--gap-3); }
.mb-4 { margin-bottom: var(--gap-4); }
.mb-5 { margin-bottom: var(--gap-5); }
.mb-6 { margin-bottom: var(--gap-6); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Flex helpers */
.grow      { flex: 1 1 auto; }
.shrink-0  { flex-shrink: 0; }
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.gap-1     { gap: var(--gap-1); }
.gap-2     { gap: var(--gap-2); }
.gap-3     { gap: var(--gap-3); }
.gap-4     { gap: var(--gap-4); }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Visual */
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-85 { opacity: 0.85; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.05em; }

/* Layout helpers */
.list-bare { list-style: none; padding: 0; margin: 0; }
.list-bare > li { margin: 0; }
.contents { display: contents; }

.divider-top {
  border-top: 1px solid var(--rule);
  padding-top: var(--gap-4);
}
.divider-top--gap {
  margin-top: var(--gap-4);
}

.row-divider {
  padding: var(--gap-2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.row-divider:last-child { border-bottom: 0; }

/* Disabled-looking field row */
.field--disabled { opacity: 0.6; }

/* Bare fieldset (used for the form preview where we want no border/padding) */
.fieldset--bare { border: 0; padding: 0; margin: 0; }

/* Bare summary — drops native marker + padding for use as compact toggle */
.summary-bare {
  cursor: pointer;
  padding: 0;
  list-style: none;
}
.summary-bare::-webkit-details-marker { display: none; }

/* Inline check with multi-line content — top-align so the box sits beside the first line */
.inline-check--top { align-items: flex-start; }
.inline-check--top input[type="checkbox"] { margin-top: 0.2rem; }

/* Narrow select (e.g., status dropdown) */
.select-narrow { max-width: 18rem; }

/* Narrow number/text input (e.g., SLA day count). Mirrors
   .select-narrow; named separately because the visual target differs.
   Used instead of inline style="max-width: 8rem" so CSP style-src
   without 'unsafe-inline' doesn't strip the constraint. */
.input-narrow { max-width: 8rem; }


/* Position helpers */
.relative { position: relative; }
.block { display: block; }
.hidden { display: none; }

/* Flex sizing within editor rows / toolbar fields */
.flex-1 { flex: 1 1 0; min-width: 0; }
.flex-2 { flex: 2 1 0; min-width: 0; }
.flex-3 { flex: 3 1 0; min-width: 0; }
.flex-4 { flex: 4 1 0; min-width: 0; }
.flex-5 { flex: 5 1 0; min-width: 0; }
.flex-8 { flex: 8 1 0; min-width: 0; }
.flex-end-self { align-self: flex-end; padding-bottom: 0.4rem; }

/* Row that pushes its contents to the right */
.row-end { display: flex; justify-content: flex-end; }
/* Max-width helpers (used on standalone pages, panels) */
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 32rem; }
.max-w-lg { max-width: 44rem; }

.ref-eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}