/* 文件審閱：員工產出的文件清單（治理工作區語彙：深藍分層、白細線、暖金選取）。 */
.office-page.docs-page { max-width: 1100px; }
.docs-panel { max-width: none; }
.docs { display: grid; gap: 16px; min-width: 0; --docs-gold: rgba(245, 185, 113, 0.45); }
.docs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--office-card-border); flex-wrap: wrap; }
.docs .docs-tab { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 16px; margin-bottom: -1px; background: none; border: 0; border-radius: 0;
    border-bottom: 2px solid transparent; color: var(--office-text-dim); cursor: pointer; }
.docs .docs-tab:hover { color: var(--office-text); }
.docs .docs-tab.is-on { color: var(--office-warm); border-bottom-color: var(--office-warm); font-weight: 650; }
.docs-focus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--docs-gold); color: var(--office-text); font-size: 14px; }
.docs-focus[hidden] { display: none; }
.docs-list { display: grid; gap: 10px; }
.docs-empty { color: var(--office-text-dim); margin: 14px 0; }
.docs-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--office-card-border); border-radius: 12px; background: var(--office-bg-2); }
.docs-card.is-pending { border-color: var(--docs-gold); }
.docs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.docs-head h3 { margin: 0; font-size: 16.5px; overflow-wrap: anywhere; }
.docs-state { padding: 1px 9px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--office-card-border); color: var(--office-text-dim); white-space: nowrap; }
.docs-state.is-pending { color: var(--office-warm); border-color: var(--docs-gold); }
.docs-state.is-approved { color: #6ee7a0; border-color: rgba(110, 231, 160, 0.45); }
.docs-state.is-rejected { color: #ffb4a8; border-color: rgba(228, 106, 90, 0.5); }
.docs-version { font-size: 12.5px; color: var(--office-text-dim); font-variant-numeric: tabular-nums; }
.docs-meta { margin: 0; font-size: 13px; color: var(--office-text-dim); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.docs-reason { margin: 0; font-size: 13.5px; color: #ffb4a8; }
.docs-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.docs .doc-btn { display: inline-flex; align-items: center; font: inherit; font-size: 14px; min-height: 40px; padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--office-card-border); background: var(--office-bg-1); color: var(--office-text); cursor: pointer; text-decoration: none; }
.docs .doc-btn:hover { border-color: var(--docs-gold); }
.docs .doc-btn:disabled { opacity: .5; cursor: not-allowed; }
.docs .doc-btn.primary { background: var(--office-warm); border-color: var(--office-warm); color: #30200e; font-weight: 650; }
.docs .doc-btn.danger { background: transparent; color: #ffb4a8; border-color: rgba(228, 106, 90, 0.5); }
.docs .doc-btn.ghost { background: transparent; }
.docs :is(a, button, input):focus-visible { outline: 2px solid var(--office-warm); outline-offset: 2px; }
.docs-hint { font-size: 12.5px; color: var(--office-text-dim); }
.docs-form { display: grid; gap: 8px; }
.docs-form input { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--office-card-border);
    background: var(--office-bg-1); color: var(--office-text); font: inherit; font-size: 14px; }
.docs-versions { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; }
.docs-versions a { color: var(--office-warm); }
/* 類型篩選與紀錄標籤（階段 6 第二批） */
.docs-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.docs .docs-kind { font: inherit; font-size: 13px; min-height: 32px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--office-card-border); background: none; color: var(--office-text-dim); cursor: pointer; }
.docs .docs-kind[aria-pressed="true"] { color: var(--office-warm); border-color: var(--docs-gold); background: rgba(245, 185, 113, 0.1); font-weight: 650; }
.docs-kind-tag { padding: 1px 9px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--docs-gold); color: var(--office-warm); white-space: nowrap; }
.docs-card.is-record .docs-note { margin: 0; font-size: 13px; color: var(--office-text-dim); }

/* 線上預覽（階段 6 第一批）：文件放在卡片裡的紙面上；PDF 框沿用 Chrome 檢視器的深灰底 */
.docs-preview { display: grid; gap: 8px; margin-top: 2px; }
.docs-preview { min-width: 0; }
.docs-page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.docs-page-number { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.docs-page-paper { max-height: 75vh; overflow: auto; min-width: 0; background: #e7e7e4; border: 1px solid var(--office-card-border); border-radius: 8px; }
.docs-page-image { display: block; width: 100%; height: auto; background: white; }
.docs-page-paper.is-zoomed .docs-page-image { width: 200%; max-width: none; }
.docs-page-controls .doc-btn { min-height: 44px; }
.docs-frame { display: block; width: 100%; height: min(72vh, 760px); border: 1px solid var(--office-card-border); border-radius: 10px; background: #fafaf7; }
.docs-frame.is-pdf { background: #525659; }
.docs-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--office-card-border); border-radius: 10px; background: #fafaf7; }
.docs-text { margin: 0; max-height: 60vh; overflow: auto; padding: 16px 18px; border: 1px solid var(--office-card-border); border-radius: 10px; background: #fafaf7; color: #202c40; font: 14px/1.7 ui-monospace, Consolas, "Noto Sans Mono CJK TC", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.docs-note { margin: 0; font-size: 12.5px; color: var(--office-text-dim); }
@media (max-width: 760px) { .docs-frame { height: 70vh; } .docs-text { max-height: 50vh; } }
@media (prefers-reduced-motion: reduce) { .docs .doc-btn { transition: none; } }