/* Telas de governança: Documentos e Sistemas, Histórico, Relatórios, Administração. */

/* Notas e avisos ------------------------------------------------------------ */
.note { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); background: var(--paper-2); padding: 10px 14px; font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.note.warn { border-left-color: var(--amber); }
.note.danger { border-left-color: var(--red); }
.note b { color: var(--ink); }

/* Filtros com rótulo embutido -------------------------------------------------- */
.filters label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); padding: 4px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.filters label.chk input { margin: 0; }
.filters input[type="date"] { min-width: 150px; }

/* Células especiais ----------------------------------------------------------------- */
.tbl td:has(> .conflict-cell) { background: var(--red-soft); color: var(--red); font-weight: 500; }
.tbl td .trunc { display: block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl td .trunc-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 360px; }
.tbl td .chips .badge { font-size: 11px; padding: 1px 7px; }
.tbl tr.inactive td { color: var(--ink-3); }
.tbl tr.inactive td .title { text-decoration: line-through; }

/* Checkboxes em linha (dias úteis, empresas) ----------------------------------------- */
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.checks label:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.checks input { margin: 0; }

/* Histórico: linha do tempo por dia ----------------------------------------------------- */
.tl-day { margin: 18px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.tl-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tl-day .n { font-weight: 400; color: var(--ink-3); }
.timeline li .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.timeline li .when { font-family: var(--mono); font-size: 12px; min-width: 42px; }
.timeline li .actor { color: var(--ink-2); font-size: 12.5px; }
.timeline li .summary { margin-top: 2px; }
.timeline li .summary .code { cursor: pointer; }
.timeline li .summary .code:hover { color: var(--blue); text-decoration: underline; }
.timeline li .toggle { border: 0; background: none; color: var(--blue); cursor: pointer; font-size: 12px; padding: 0; }
.timeline li .toggle:hover { text-decoration: underline; }
.diff { margin: 6px 0 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); font-size: 12.5px; overflow-x: auto; }
.diff table { border-collapse: collapse; width: 100%; }
.diff th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11px; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.diff td { padding: 4px 10px; vertical-align: top; border-bottom: 1px solid var(--line); word-break: break-word; }
.diff tr:last-child td { border-bottom: 0; }
.diff td.k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.diff td.before { color: var(--red); }
.diff td.after { color: var(--green); }
.diff td.before:empty::before, .diff td.after:empty::before { content: "—"; color: var(--ink-3); }
.diff pre { margin: 0; font: inherit; white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* Relatórios: catálogo e pré-visualização ------------------------------------------------ */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.report-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s, box-shadow .2s; }
.report-card h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.report-card p { color: var(--ink-3); font-size: 12.5px; margin: 0; flex: 1; }
.report-card .fmts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.report-card.highlight { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.preview { margin-bottom: 22px; }
.preview .preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.preview .preview-head .meta { color: var(--ink-3); font-size: 12.5px; }
.preview .panel { margin-bottom: 14px; }
.preview .more { padding: 8px 14px; color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--line); }
.hz { margin-bottom: 18px; }
.hz > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hz > header h2 { font-size: 16px; }
.hz > header .crit { font-size: 12.5px; color: var(--ink-3); }
.hz .n { font-size: 12px; color: var(--ink-3); }

/* Administração ------------------------------------------------------------------------------ */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.setting-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .lbl { min-width: 200px; font-size: 13px; color: var(--ink-2); }
.setting-row select, .setting-row input[type="number"], .setting-row input[type="date"], .setting-row input[type="text"] { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); font-size: 13px; }
.setting-row input[type="number"] { width: 90px; }
.import-area { width: 100%; min-height: 200px; font-family: var(--mono); font-size: 12px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); resize: vertical; }
.import-result { margin-top: 14px; }
.import-result .counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.import-result .counts b { font-size: 18px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.import-result .counts .err b { color: var(--red); }
.class-list { list-style: none; margin: 0; padding: 0; }
.class-list li { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; }
.class-list li:last-child { border-bottom: 0; }
.class-list li .d { color: var(--ink-3); }
.color-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; vertical-align: middle; border: 1px solid var(--line-2); }
.user-self { font-size: 11px; color: var(--ink-3); margin-left: 6px; }
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sub-tabs button { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.sub-tabs button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Responsivo ------------------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .tbl td .trunc, .tbl td .trunc-2 { max-width: 220px; }
  .setting-row .lbl { min-width: 0; width: 100%; }
  .class-list li { grid-template-columns: 1fr; gap: 2px; }
  .admin-grid { grid-template-columns: 1fr; }
  .timeline li .when { min-width: 0; }
}