/*
 * Inline document preview (documents/_quickview) — a server-rendered thumbnail of the
 * file's first page, clicking opens the full file. Shared by the bill editor, the
 * document page, and the journal entry page (slice 95); the base rules moved here from
 * bills.css when the component stopped being bill-only. Bill-editor-specific sizing
 * stays in bills.css.
 */

@layer components {
  .doc-preview {
    position: relative;
    display: block;
    width: 100%;
    max-width: 24rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-slate-50);
    text-align: left;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
  }

  .doc-preview__img {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: cover;
    object-position: top center; /* invoices lead with the header/logo/total — show the top */
  }

  /* Fallback for a file we can't rasterise (not a PDF or image) — a plain download row. */
  .doc-preview--file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-body);
    font-size: var(--text-xs);
  }

  .doc-preview--file svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
  }

  .doc-preview__hint {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: oklch(0% 0 0 / 55%);
    color: var(--color-white);
    font-size: var(--text-xs);
  }

  .doc-preview__hint svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  /* Details beside the paper — the bill editor's two-column shape, generalised for the
     document and journal entry pages: details 3fr, the paper card 2fr, stacking on
     narrow screens. The grid stretches both cards to the taller one, and the image is
     taken out of flow so the DETAILS card drives the height. */
  .detail-with-document {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-4);
  }

  .detail-with-document__paper {
    display: flex;
    flex-direction: column;
  }

  .detail-with-document__paper .doc-preview {
    flex: 1;
    max-width: none;
    min-height: 12rem; /* a floor; the details card drives the real height */
  }

  .detail-with-document__paper .doc-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  @media (max-width: 60rem) {
    .detail-with-document {
      grid-template-columns: 1fr;
    }
  }
}