/* E04 · Documentos e arquivo (tickets#37; Components/Pages/Simple/Documentos.razor), from the prototype v3 and visual/E04.png:
   the search, the filters as pills, the table with its foot; on a phone each row is a card with its labels. Tokens from css/tokens.css;
   inside the new view (.sib-pf) the measures are the prototype's --pf-* tokens in profile-frame.css (E04 section), which override these. */

.sib-docs-search {
  width: 100%; box-sizing: border-box; padding: 14px 16px; font: inherit; font-size: 16px;
  border: 1px solid var(--sib-line-strong); border-radius: var(--sib-radius); background: var(--sib-surface-track); color: inherit;
}
.sib-docs-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.sib-docs-filters select {
  min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--sib-line-strong); border-radius: 999px; background: var(--sib-surface); color: inherit;
}
.sib-docs-table { border: 1px solid var(--sib-line); border-radius: var(--sib-radius); background: var(--sib-surface); overflow: hidden; }
.sib-docs-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sib-docs-table th { padding: 12px 16px; text-align: left; font-size: 15px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--sib-muted); background: none; border-bottom: 1px solid var(--sib-line); white-space: nowrap; }
.sib-docs-table td { padding: 10px 16px; border-bottom: 1px solid var(--sib-line); vertical-align: middle; }
.sib-docs-table th.sib-num, .sib-docs-table td.sib-num { text-align: right; white-space: nowrap; }
.sib-docs-table tbody tr[data-doc-row] { cursor: pointer; }
.sib-docs-table tbody tr[data-doc-row]:hover { background: var(--sib-surface-tint); }
.sib-docs-number { font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: break-word; }
.sib-docs-number:hover { text-decoration: underline; }
.sib-docs-table small { display: block; color: var(--sib-muted); }
.sib-docs-state {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap;
  border: 1px solid var(--sib-line); background: var(--sib-pill-neutral-bg);
}
.sib-docs-state.archived { background: var(--sib-success-bg); color: var(--sib-success); border-color: var(--sib-success-border); }
.sib-docs-state.duplicate { background: var(--sib-warning-bg); color: var(--sib-warning); border-color: var(--sib-warning-border); }
.sib-docs-state.unreadable { background: var(--sib-danger-bg); color: var(--sib-danger); border-color: var(--sib-danger-border); }
.sib-docs-state.needs, .sib-docs-state.accountant { background: var(--sib-brand-tint-bg); color: var(--sib-brand-dark); border-color: var(--sib-line-strong); }
.sib-docs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; }
.sib-docs-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--sib-brand-dark); font: inherit; font-weight: 600; cursor: pointer; }
.sib-docs-link:hover { text-decoration: underline; }
.sib-docs-muted, .sib-docs-note { color: var(--sib-muted); }
.sib-docs-note { margin: 0; font-size: 15px; }

@media (max-width: 860px) {
  .sib-docs-filters select { flex: 1 1 140px; min-width: 0; }
  .sib-docs-table thead { display: none; }
  .sib-docs-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--sib-line); }
  .sib-docs-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 16px; border: 0; text-align: right; }
  .sib-docs-table td::before { content: attr(data-l); color: var(--sib-muted); text-align: left; }
  .sib-docs-table td[colspan]::before { content: none; }
  .sib-docs-table td[colspan] { display: block; text-align: left; }
}
.sib-docs-note .sib-docs-link, .sib-docs-table td .sib-docs-link { margin-left: 6px; }