/*
 * Layout fixes layered on top of the mirrored production CSS.
 * Injected by server.js into every HTML page; run with RAW=1 to serve the untouched build.
 */

/*
 * 1. Case cards: status badge + ⋮ menu covered the case-type icon at every width.
 *    The layer is rendered with dir="ltr", so `end-4` (inset-inline-end) resolved to the
 *    right edge, the same corner as the icon. Pin it to the RTL end (left), keep the menu
 *    in the outer corner, and cap its width so a long badge truncates instead of
 *    running into the icon (icon 2.5rem + card padding 1.25rem + gaps).
 */
[dir='rtl'] .group > .absolute.top-5.end-4[dir='ltr'] {
  right: auto;
  left: calc(var(--spacing) * 4);
  flex-direction: row-reverse;
  max-width: calc(100% - 2.5rem - 1.25rem - 2rem);
}
[dir='rtl'] .group > .absolute.top-5.end-4[dir='ltr'] > span {
  flex-shrink: 1;
  min-width: 0;
}

/*
 * 2. Dashboard header: the action buttons are shrink-0, so on narrow screens the
 *    "الدعاوى النشطة" title collapsed to a couple of pixels. Let the actions wrap
 *    onto their own line instead.
 */
div.flex.items-center.justify-between:has(> h1.items-baseline) {
  flex-wrap: wrap;
  row-gap: 0.75rem;
}

/*
 * 3. Case timeline rows: the date chip and chevron are shrink-0, which squeezed the
 *    event title to ~20px on phones. Give the title a sensible minimum and let the
 *    chip wrap below it when there isn't room.
 */
button.w-full.flex.items-start.gap-3 > p.flex-1.min-w-0 {
  min-width: min(100%, 8rem);
}
button.w-full.flex.items-start.gap-3:has(> p.flex-1.min-w-0) {
  flex-wrap: wrap;
}

/*
 * 4. Documents table (case steps 1–2): around 1024px the file-name column gets ~100px,
 *    and the chevron, file icon and "متعدد المستندات" badge are all shrink-0, so the
 *    file name collapsed to 0px and the badge spilled into the next column.
 *    Let the row wrap and keep the file name readable.
 */
td.max-w-0 > div.flex.items-center.gap-3 {
  flex-wrap: wrap;
  row-gap: 0.375rem;
}
td.max-w-0 > div.flex.items-center.gap-3 > button.min-w-0 {
  flex: 1 1 5rem;
  min-width: 5rem;
}