/* TKT-148 E05 «Detalhe do documento» (tickets#37): Components/Pages/Simple/Documento.razor, from the prototype v3 (grid2-6040). The original
   beside what was read, on a desk without scrolling the page: the original keeps its place while the side column scrolls; one column on
   a phone, the original first. Tokens from css/tokens.css; the tags and messages are tasks.css's. */

.sib-doc { max-width: 1320px; margin: 0 auto; padding: 8px 16px 32px; box-sizing: border-box; }
.sib-doc-back { display: inline-block; margin: 4px 0 8px; color: var(--sib-text-body); text-decoration: none; }
.sib-doc-back:hover { text-decoration: underline; }
.sib-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sib-doc-head h1 { margin: 0; font-size: 24px; line-height: var(--sib-lh-tight); color: var(--sib-ink); overflow-wrap: anywhere; }
.sib-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sib-doc-banner { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--sib-warning-border); border-radius: 8px; background: var(--sib-warning-bg); color: var(--sib-warning); }
.sib-doc-muted { color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-doc-link { display: inline-block; margin-top: 8px; font-size: var(--sib-fs-sm); }

.sib-doc-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.sib-doc-original { position: sticky; top: 8px; min-height: 240px; padding: 8px; border: 1px solid var(--sib-line); border-radius: 12px; background: var(--sib-surface-tint); box-sizing: border-box; }
.sib-doc-original .intake-file-preview { height: calc(100vh - 150px); min-height: 360px; }
.sib-doc-original .intake-image-preview { max-height: calc(100vh - 150px); }
.sib-doc-side { display: grid; gap: 16px; min-width: 0; }

.sib-doc-card { padding: 16px; border: 1px solid var(--sib-line); border-radius: 12px; background: var(--sib-surface); min-width: 0; }
.sib-doc-card h1, .sib-doc-card h2 { margin: 0 0 10px; font-size: 16px; color: var(--sib-ink); }

.sib-doc-printed-name { margin-bottom: 12px; overflow-wrap: anywhere; }
.sib-doc-printed-name p { margin: 0 0 8px; }

.sib-doc-facts { display: grid; gap: 8px; margin: 0; }
.sib-doc-facts > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.sib-doc-facts dt { color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-doc-facts dd { margin: 0; font-weight: 600; color: var(--sib-ink); text-align: right; overflow-wrap: anywhere; }
.sib-doc-facts dd input, .sib-doc-facts dd select { font: inherit; max-width: 240px; }
.sib-doc-facts .sib-doc-sep { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--sib-line); }
.sib-doc-facts .sib-doc-total { padding-top: 8px; border-top: 1px solid var(--sib-line); font-size: 16px; }
.sib-doc-reason { display: grid; gap: 4px; margin-top: 12px; font-size: var(--sib-fs-sm); color: var(--sib-muted); }
.sib-doc-reason input { font: inherit; }

.sib-doc-lines th { letter-spacing: 0; text-transform: none; }
.sib-doc-lines th, .sib-doc-lines td { padding-inline: 8px; }

.sib-doc-edit-lines { display: grid; gap: 10px; margin-top: 8px; }
.sib-doc-edit-lines fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--sib-line); border-radius: 8px; }
.sib-doc-edit-lines legend { padding: 0 4px; font-size: var(--sib-fs-sm); color: var(--sib-muted); }
.sib-doc-edit-lines label { display: grid; gap: 2px; font-size: var(--sib-fs-sm); color: var(--sib-muted); min-width: 0; }
.sib-doc-edit-lines input, .sib-doc-edit-lines select { font: inherit; width: 100%; box-sizing: border-box; }

.sib-doc-integrations { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sib-doc-integrations li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }

.sib-doc-history { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sib-doc-history > li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--sib-line); }
.sib-doc-step { font-weight: 600; color: var(--sib-ink); }
.sib-doc-when { color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-doc-changes { margin: 4px 0 0; padding-left: 16px; font-size: var(--sib-fs-sm); color: var(--sib-text-body); overflow-wrap: anywhere; }

.sib-doc-exit { text-align: left; }
.sib-doc-json { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--sib-fs-sm); }

@media (max-width: 860px) {
  .sib-doc-grid { grid-template-columns: minmax(0, 1fr); }
  .sib-doc-original { position: static; }
  .sib-doc-original .intake-file-preview { height: 60vh; }
}