/* Documents (js/modules/documents.js): previews, the PDF viewer sheet and
   the New Document sheet. Loaded with ui.stylesheet; everything else comes
   from app.css. */

/* Detail: picture preview (the app: max height 400, corner radius 8). */
.doc-preview { display: flex; justify-content: center; padding: 14px 16px; }
.doc-preview-img {
  max-width: 100%; max-height: 400px; width: auto; height: auto;
  border-radius: 8px; object-fit: contain;
}

/* Detail: the PDF row with Preview / Open in New Tab. */
.doc-file-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.doc-file-card > .icon { color: var(--ink); }
.doc-file-meta { flex: 1 1 180px; min-width: 0; }
.doc-file-name { overflow-wrap: anywhere; }
.doc-file-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* A grey line with an icon (restricted note, file on another device). */
.doc-muted-line { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; color: var(--text-dim); }
.doc-muted-line .icon { color: var(--ink); margin-top: 2px; }

/* PDF viewer sheet. */
.doc-pdf-frame {
  display: block; width: 100%; height: 72vh; min-height: 320px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}

/* New Document sheet: file buttons and the attachment status line. */
.doc-file-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-file-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.doc-file-status .grow { flex: 1 1 auto; min-width: 0; }
.doc-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.doc-ok .icon { color: var(--ink); }
.doc-error { display: flex; align-items: flex-start; gap: 6px; color: var(--red); font-size: 0.9rem; }
.doc-error .icon { margin-top: 2px; }
.spinner.doc-spinner { width: 18px; height: 18px; border-width: 2px; flex-shrink: 0; }
.doc-editor .segmented { align-self: flex-start; }

@media (max-width: 760px) {
  .doc-pdf-frame { height: 62vh; }
  .doc-file-actions { width: 100%; }
  .doc-file-actions .btn { flex: 1; }
  .doc-editor .segmented { align-self: stretch; }
  .doc-editor .segmented .seg { flex: 1; }
}