/*
 * CP-03 Document list item — app/components/ui/document_item_component.rb
 *
 * Glass row, --radius-md: 40px filetype icon frame, filename (middle-
 * truncating), meta line, trailing preview/download icon buttons.
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 *
 * The row wraps rather than crushing its own text. Measured live on the
 * referrer's H5 at 375px, where FA-10 first put this component on a phone:
 * icon 40px + three action buttons 124px left the body 57px, so every
 * filename ellipsised to "site-ph..." and every meta line stacked four
 * deep. Below the body's flex-basis the actions take their own line
 * instead — which also relieves the B2 desktop card, whose meta line was
 * already wrapping at three actions.
 */

.ui-document-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.ui-document-item__icon-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
  color: var(--color-ink-muted);
}

.ui-document-item__body {
  /* Sized against both real containers, measured live rather than guessed:
     B2's card is ~222px wide at a 1280 viewport and H5's list ~279px at
     375px. At 9rem the icon and the text always share the first line
     (40 + 12 + 144 fits both), and the actions always wrap below it —
     including the TWO-action row, which is the business's document as the
     referrer sees it. An earlier 6rem let that two-action row squeeze onto
     one line and crushed the filename to "kitchen-quote…" with its meta
     over three lines, while the referrer's own three-action row rendered
     fine — the wrong way round, since the two-action row is the one option
     B exists for. */
  flex: 1 1 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-document-item__filename {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-document-item__meta {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

.ui-document-item__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  /* Keeps the actions right-aligned once they wrap onto their own line. */
  margin-inline-start: auto;
}

/* scan-failed — danger treatment */
.ui-document-item--scan-failed {
  background: var(--color-danger-subtle);
}

.ui-document-item--scan-failed .ui-document-item__icon-frame {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}