/* People · Documentos — biblioteca de legislação e minutas. Reutiliza
   .panel / .table / .escalas-mode-toggle já definidos em people.css; aqui só
   o que é específico: layout da página, ações da tabela e editor de minutas. */

[data-view] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 0 auto;
  min-height: 0;
}

[data-tab-panel] { flex-shrink: 0; }

.docs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.docs-file-cell { color: var(--text-muted); }
.docs-file-size { margin-left: var(--sp-1); font-size: var(--fs-xs); opacity: 0.8; }

.modal__dialog--xl { width: min(980px, 100%); }

.docs-editor-meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.docs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--grey-050, #f6f7f9);
}

.docs-toolbar__btn {
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.docs-toolbar__btn:hover { background: var(--grey-100); }

.docs-toolbar__btn.is-active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}
.docs-toolbar__btn.is-active:hover { background: var(--navy-800); }

.docs-toolbar__sep {
  width: 1px;
  height: 20px;
  margin: 0 var(--sp-1);
  background: var(--border);
}

.docs-toolbar__select {
  width: 220px;
  height: 30px;
  font-size: var(--fs-sm);
}

.docs-editor {
  min-height: 340px;
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--white, #fff);
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}

.docs-editor:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(43, 84, 144, 0.12); }
.docs-editor h2 { font-size: 1.25rem; margin: 0.8em 0 0.4em; }
.docs-editor p { margin: 0 0 0.8em; }

.docs-editor--preview { border-radius: var(--r-md); min-height: 320px; }

.docs-hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.docs-hint code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--grey-100);
  font-size: 0.95em;
}

.docs-generate-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.docs-custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.docs-custom-fields:empty { display: none; }

@media (max-width: 720px) {
  .docs-editor-meta { grid-template-columns: minmax(0, 1fr); }
}

/* Zona de largar ficheiros */
.docs-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 132px;
  padding: var(--sp-5) var(--sp-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--grey-050, #f6f7f9);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.docs-dropzone:hover,
.docs-dropzone.is-dragover {
  border-color: var(--navy-500);
  background: rgba(43, 84, 144, 0.06);
}

.docs-dropzone.has-file { border-style: solid; border-color: var(--state-done); background: var(--state-done-bg); }

.docs-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.docs-dropzone__icon { width: 30px; height: 30px; margin-bottom: var(--sp-1); color: var(--navy-500); }
.docs-dropzone__title { font-weight: 700; color: var(--text); }
.docs-dropzone__hint { font-size: var(--fs-sm); color: var(--text-muted); }

.docs-dropzone__file {
  max-width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--white, #fff);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--state-done);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-dropzone.has-file .docs-dropzone__title,
.docs-dropzone.has-file .docs-dropzone__hint { display: none; }

/* Pré-visualização de documentos */
.docs-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--grey-050, #f6f7f9);
  overflow: auto;
}

.docs-preview__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.docs-preview__image { max-width: 100%; max-height: 100%; object-fit: contain; }
.docs-preview__message { max-width: 44ch; padding: var(--sp-5); text-align: center; color: var(--text-muted); }

.docs-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.docs-import__hint { font-size: var(--fs-sm); color: var(--text-muted); }

.docs-editor table { border-collapse: collapse; margin: 0 0 0.8em; }
.docs-editor td, .docs-editor th { border: 1px solid var(--border-strong); padding: 4px 8px; }

/* Escolha inicial ao criar uma minuta */
.docs-start__question {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.docs-start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.docs-start__option {
  --option-color: #0a84ff;
  --option-bg: rgba(10, 132, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 28px -18px rgba(20, 30, 60, 0.35);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.docs-start__option + .docs-start__option {
  --option-color: #30b0c7;
  --option-bg: rgba(48, 176, 199, 0.14);
}

.docs-start__option:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--option-color);
  box-shadow: 0 18px 36px -18px rgba(20, 30, 60, 0.4);
}

.docs-start__option:focus-visible {
  outline: none;
  border-color: var(--option-color);
  box-shadow: 0 0 0 3px var(--option-bg);
}

.docs-start__option:disabled { opacity: 0.6; cursor: wait; }

.docs-start__icon {
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 16px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-full);
  background: var(--option-bg);
  color: var(--option-color);
}

.docs-start__title { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.docs-start__hint { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted); }

@media (max-width: 520px) { .docs-start { grid-template-columns: minmax(0, 1fr); } }

.modal__dialog--start { width: min(560px, 100%); }

/* Estados vazios: texto em poucas linhas, sem ficar espremido numa coluna estreita */
[data-tab-panel] .empty__text { max-width: 72ch; }

/* Visualizador de PDF próprio: página + seletor "10 / 210" */
.docs-preview:has(.docs-pdf) { padding: 0; align-items: stretch; overflow: hidden; }

.docs-pdf { display: flex; flex-direction: column; width: 100%; height: 100%; }

.docs-pdf__stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4);
  background: var(--grey-100);
}

.docs-pdf__pages { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }

.docs-pdf__page {
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(20, 30, 60, 0.4);
}

.docs-pdf__page canvas { display: block; }

.docs-pdf__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.docs-pdf__page-input {
  width: 72px;
  height: 36px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.docs-pdf__page-input::-webkit-outer-spin-button,
.docs-pdf__page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.docs-pdf__page-input { -moz-appearance: textfield; }

.docs-pdf__total { min-width: 56px; font-weight: 600; color: var(--text-muted); }

/* O <form> que envolve corpo + rodapé tem de fazer parte da coluna flex do popup;
   sem isto o popup crescia acima de 90vh e o rodapé (botões) ficava cortado. */
.modal__dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal__dialog > form > .modal__body { flex: 1 1 auto; min-height: 0; }
.docs-editor { max-height: max(220px, calc(90vh - 400px)); }

.docs-editor h1, .docs-editor h2, .docs-editor h3, .docs-editor table { font-family: inherit; }

[data-editor-edit-pane][hidden],
[data-editor-preview-pane][hidden] { display: none; }

.docs-preview-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.docs-preview-controls .field { width: 320px; margin: 0; }
.docs-preview-controls .docs-hint { margin: 0 0 var(--sp-2); }

/* Folhas A4 (794 x 1123 px a 96 dpi) com margens de 2,5 cm — o que sairá no PDF. */
.docs-sheets-scroll {
  max-height: max(260px, calc(90vh - 380px));
  overflow: auto;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--grey-100);
}

.docs-sheet {
  position: relative;
  width: 794px;
  height: 1123px;
  margin: 0 auto var(--sp-4);
  padding: 94px;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(20, 30, 60, 0.4);
  zoom: var(--sheet-zoom, 1);
}

.docs-sheet__content {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.5;
  color: #000;
}

.docs-sheet__content h1,
.docs-sheet__content h2,
.docs-sheet__content h3 { margin: 1em 0 0.5em; }
.docs-sheet__content p { margin: 0 0 0.8em; }

.docs-sheet__content--measure { position: absolute; visibility: hidden; pointer-events: none; }

.docs-sheet__number {
  position: absolute;
  bottom: 40px;
  right: 94px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #8e8e93;
}

.docs-field-chip {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(10, 132, 255, 0.14);
  color: #0a5fc4;
}

.docs-toolbar__select--size { width: 110px; }

/* Texto sempre preto no editor, nas folhas e na pré-visualização. */
.docs-editor,
.docs-editor *,
.docs-sheet__content,
.docs-sheet__content * { color: #000 !important; }

/* Rodapé e papel timbrado de cada minuta */
.docs-page-extras { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }

.docs-letterhead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }

.docs-letterhead__thumb {
  width: 44px;
  height: 62px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

.docs-letterhead__thumb[hidden] { display: none; }
.docs-letterhead__name { flex: 1; min-width: 120px; font-size: var(--fs-sm); color: var(--text-muted); }

/* Folha A4: margem inferior de 3 cm (como o PDF), imagem de fundo e rodapé. */
.docs-sheet { padding: 94px 94px 113px; }

/* Papel timbrado: imagem pequena ao centro, quase impercetível. */
.docs-sheet[data-letterhead]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--letterhead) center / 55% auto no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.docs-sheet__content { position: relative; z-index: 1; }

.docs-sheet__footer {
  position: absolute;
  left: 94px;
  right: 94px;
  bottom: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  color: #000;
}

/* Descritivo de funções: texto escrito na app, mostrado tal como foi guardado. */
.docs-jobdesc-view {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
}