/* R77Q9M — Outcome Measures Library v2 sidebar legibility fix.
 *
 * Problem: the compiled bundle sets the measure-list sidebar to a hard
 * 192px width with each button using `truncate` (single-line ellipsis)
 * + `text-sm` (~14px). Longer measure names such as "Clinical Risk
 * Formulation", "Goal Attainment Scale", "Berg Balance Scale",
 * "Oswestry Disability Index", "Functional Communication Measure" all
 * get cut mid-word ("Clinical Risk For…", "Goal Attainment Scal…",
 * "Berg Balance Sc…", "Oswestry Disability I…", "Functional Communi…").
 *
 * Fix without touching the bundle:
 *   1. Widen the measure-list sidebar from 192 → 216 px on ≥md screens.
 *   2. Drop the `truncate` behaviour on the measure name span so it
 *      wraps to a second line when needed, still balanced with the
 *      trailing count badge.
 *   3. Nudge the row font from 14 → 13 px + a slightly tighter line
 *      height so a 2-line wrap sits comfortably.
 *
 * The right-hand measure panel already uses `flex-1 min-w-0` so it
 * absorbs the extra 24 px without breaking the horizontal question rows.
 * Scoping: any button that is a direct child of a `.p-2` inside a
 * `.bg-gray-50` sidebar with inline width 192 — expressed via the
 * inline-style attribute selector `[style*="minWidth:192"]` and
 * `[style*="min-width: 192"]` to stay stable across React style syntax.
 */

/* 1. Widen the sidebar column on tablet+ */
@media (min-width: 768px) {
  div[style*="min-width: 192px"],
  div[style*="minWidth:192px"],
  div[style*="min-width:192"],
  div[style*="maxWidth:192"],
  div[style*="max-width: 192px"] {
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
  }
}

/* 2 & 3. Row + label: allow 2-line wrap, tighter font.
 *
 * Selector chain: the sidebar wrapper carries `bg-gray-50` and a
 * background:#F9FAFB inline; inside is `.p-2` and inside that any
 * `<button>` is a measure row. We match on the outer inline styles
 * so we don't accidentally hit other gray sidebars. */
div[style*="background: rgb(249, 250, 251)"] .p-2 > button,
div[style*="background:#F9FAFB"] .p-2 > button,
div[style*="background: #F9FAFB"] .p-2 > button {
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  min-height: 34px !important;
  align-items: center !important;
}

div[style*="background: rgb(249, 250, 251)"] .p-2 > button > span.truncate,
div[style*="background:#F9FAFB"]            .p-2 > button > span.truncate,
div[style*="background: #F9FAFB"]           .p-2 > button > span.truncate {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  hyphens: auto !important;
  line-height: 1.25 !important;
  display: block !important;
}