/* ═══════════════════════════════════════════════════════════════
   Documents — вкладка документов, layout, формы
   Извлечено из checklist_operational.css строки 8316–8594
   ═══════════════════════════════════════════════════════════════ */

/* ── Документы ────────────────────────────────────────────────────────────── */
.docs-layout {
    display: grid;
    grid-template-columns: 160px minmax(380px, 1fr) minmax(440px, 1.1fr);
    gap: var(--space-0);
    height: 100%;
    /* На экранах высотой < 800px (ноутбук, планшет) панель предпросмотра
       обрезается снизу. Жёстко ограничиваем высоту относительно viewport-а
       и разрешаем вертикальный скролл внутри колонок. */
    max-height: calc(100vh - 120px);
    overflow: hidden;
}
.docs-panel {
    border-right: 1px solid var(--color-border, #e5e7eb);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}
.docs-panel:last-child { border-right: none; }
.docs-preview-panel { background: #d0d0d0; padding: 0 !important; display: flex; flex-direction: column; }
.docs-panel-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
}
.doc-template-list { display: flex; flex-direction: column; gap: var(--space-1); }
.doc-tpl-btn {
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--color-text, #111827);
    transition: background .15s;
}
.doc-tpl-btn:hover { background: var(--color-hover, #f3f4f6); }
.doc-tpl-btn.active { background: var(--color-primary-light, #eff6ff); border-color: var(--color-primary, #3b82f6); color: var(--color-primary, #3b82f6); font-weight: 600; }
.docs-hint { font-size: var(--text-sm); color: var(--color-text-secondary, #9ca3af); padding: 8px 0; }
.doc-form { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-1, 4px); }
.doc-fleet-select { background: var(--color-primary-50, #eff6ff); font-weight: 600; color: var(--color-primary, #2563eb); cursor: pointer; }
.doc-field-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-field-label { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-secondary, #6b7280); }
.doc-req { color: var(--color-danger, #ef4444); }
.doc-field-input-wrap { display: flex; gap: var(--space-2); align-items: center; }
.doc-field-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-sm);
    color: var(--color-text, #111827);
    background: var(--color-bg, #fff);
    outline: none;
    transition: border-color .15s;
}
.doc-field-input:focus { border-color: var(--color-primary, #3b82f6); }
.doc-auto-words {
    white-space: nowrap;
    font-size: var(--text-xs);
    padding: var(--space-2);
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-sm);
    background: var(--color-hover, #f9fafb);
    cursor: pointer;
    color: var(--color-text, #374151);
}
.doc-auto-words:hover { background: var(--color-hover, #f3f4f6); }
.doc-form-actions { margin-top: 8px; }
.btn-doc-save {
    padding: 8px 20px;
    background: var(--color-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.btn-doc-save:hover { opacity: .9; }
.doc-preview-scroll {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2, 8px);
    box-sizing: border-box;
}
.doc-preview-wrap {
    /* А4: 210mm × 297mm, поля: лево 3см, право 1.5см, верх/низ 2см */
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    padding: 20mm 15mm 20mm 30mm;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.0;
    color: #000;
    flex-shrink: 0;
    overflow: hidden;
    transform-origin: center center;
}
.doc-preview-wrap .doc-header-right p,
.doc-preview-wrap .doc-body,
.doc-preview-wrap .doc-signature p { line-height: 1.5; }
.docs-preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--color-bg, #fff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    flex-shrink: 0;
}
.docs-preview-actions { display: flex; gap: var(--space-2); }
.btn-doc-print {
    padding: 8px 20px;
    background: var(--color-success, #10b981);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.btn-doc-print:hover { opacity: .9; }
.doc-page { font-family: "Times New Roman", serif; font-size: 11pt; }
.doc-header-right { text-align: right; margin-bottom: var(--space-3, 12px); }
.doc-header-right p { margin: 3px 0; font-size: 11pt; }
.doc-title { text-align: center; font-weight: bold; font-size: 12pt; margin: 16px 0 8px; }
.doc-city-date { margin-bottom: 14px; }
.doc-body { text-align: justify; margin-bottom: var(--space-3, 12px); }
.doc-signature { margin-top: var(--space-4, 16px); line-height: 1.6; }

.doc-letterhead { margin-bottom: 12px; }
.doc-lh-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: #007982;
    color: #fff;
    padding: 8px 16px;
    border-radius: 2px 2px 0 0;
}
.doc-lh-logo-wrap { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.doc-lh-logo-img { width: 52px; height: 52px; object-fit: contain; }
.doc-lh-icon { width: 14px; height: 14px; vertical-align: middle; margin-right: 3px; }
.doc-lh-abbr { font-size: 15pt; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.doc-lh-name { flex: 1; font-size: 11pt; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.doc-lh-contacts { display: flex; flex-direction: column; gap: var(--space-1); font-size: 9pt; white-space: nowrap; text-align: right; }
.doc-lh-addr-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 16px 16px;
    border: 1px solid #ccc;
    border-top: none;
    margin-bottom: 16px;
}
.doc-lh-addr-box {
    border: 1px dashed #999;
    padding: 8px 12px;
    font-size: 10pt;
    line-height: 1.5;
    min-width: 180px;
}
.doc-lh-recipient { font-size: 10pt; text-align: right; padding-top: 4px; }
.doc-table-wrap { overflow-x: auto; }
.doc-editable-table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); margin-bottom: 6px; }
.doc-editable-table th { background: var(--color-hover, #f3f4f6); font-size: var(--text-xs); font-weight: 600; padding: 4px 8px; border: 1px solid var(--color-border, #d1d5db); white-space: nowrap; }
.doc-editable-table td { border: 1px solid var(--color-border, #e5e7eb); padding: 2px; }
.doc-table-input { width: 100%; border: none; outline: none; padding: var(--space-1); font-size: var(--text-xs); background: transparent; min-width: 60px; }
.doc-table-input:focus { background: var(--color-primary-light, #eff6ff); }
.doc-del-row { background: none; border: none; color: var(--color-danger, #ef4444); cursor: pointer; padding: 2px 8px; font-size: var(--text-sm); line-height: 1; }
.doc-del-row:hover { background: #fee2e2; border-radius: var(--radius-xs); }
.doc-add-row { font-size: var(--text-xs); padding: 4px 12px; border: 1px dashed var(--color-border, #d1d5db); border-radius: var(--radius-sm); background: none; cursor: pointer; color: var(--color-primary, #3b82f6); margin-top: 4px; }
.doc-add-row:hover { background: var(--color-primary-light, #eff6ff); }
.doc-table { border-collapse: collapse; width: 100%; font-size: 11pt; margin: 8px 0; }
.doc-table th, .doc-table td { border: 1px solid #000; padding: 3px 8px; text-align: left; }
.doc-table th { font-weight: bold; }
.doc-table tfoot td { font-weight: bold; }
.doc-table-small { font-size: 9pt; }
.doc-title-sub { text-align: center; font-size: 11pt; margin: 0 0 8px; }

/* Вкладка «Документы» занимает весь экран без внешнего скролла.
   Паттерн совпадает с #tab-mindmap: убираем padding у tab-content,
   назначаем calc(100vh - 70px) на обёртку, flex-цепочка тянет
   .docs-layout до 100% высоты, и каждая панель скроллит независимо. */
#tab-docs.tab-content {
    padding: var(--space-0);
    overflow: hidden;
}
#tab-docs .files-v2-wrap {
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-0);
    box-sizing: border-box;
}
#tab-docs .files-v2-toolbar {
    padding: 12px 20px 8px;
    margin-bottom: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
#tab-docs #docsContainer {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .docs-layout { grid-template-columns: 160px 280px 1fr; }
}
@media (max-width: 800px) {
    .docs-layout { grid-template-columns: 140px 1fr; }
    .docs-preview-panel { display: none; }
}

@media print {
    @page {
        size: A4;
        margin: 2cm 1.5cm 2cm 3cm;
    }

    body.doc-printing > *:not(#doc-print-container) { display: none !important; }

    #doc-print-container {
        display: block;
        font-family: "Times New Roman", serif;
        font-size: 12pt;
        line-height: 1.0;
        color: #000;
        background: #fff;
        margin: var(--space-0);
        padding: var(--space-0);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #doc-print-container .doc-page { width: 100%; }
    #doc-print-container .doc-header-right p,
    #doc-print-container .doc-body,
    #doc-print-container .doc-signature p { line-height: 1.5; }
    #doc-print-container .doc-letterhead { margin-bottom: 12pt; }
    #doc-print-container .doc-lh-bar { display: flex; align-items: center; gap: 12pt; background: #007982 !important; color: #fff !important; padding: 8pt 14pt; }
    #doc-print-container .doc-lh-logo-img { width: 44pt; height: 44pt; object-fit: contain; }
    #doc-print-container .doc-lh-icon { width: 12pt; height: 12pt; vertical-align: middle; }
    #doc-print-container .doc-lh-abbr { font-size: 14pt; font-weight: 700; color: #fff !important; }
    #doc-print-container .doc-lh-name { flex: 1; font-size: 10pt; font-weight: 700; text-transform: uppercase; color: #fff !important; }
    #doc-print-container .doc-lh-contacts { font-size: 8pt; color: #fff !important; text-align: right; }
    #doc-print-container .doc-lh-addr-row { display: flex; justify-content: space-between; padding: 8pt 14pt 14pt; border: 1px solid #ccc; border-top: none; margin-bottom: 14pt; }
    #doc-print-container .doc-lh-addr-box { border: 1px dashed #999; padding: 6pt 10pt; font-size: 9pt; }
    #doc-print-container .doc-lh-recipient { font-size: 9pt; text-align: right; }
    #doc-print-container .doc-header-right { text-align: right; margin-bottom: 20pt; }
    #doc-print-container .doc-header-right p { margin: 2pt 0; font-size: 11pt; }
    #doc-print-container .doc-title { text-align: center; font-weight: bold; font-size: 13pt; margin: 18pt 0 8pt; }
    #doc-print-container .doc-title-sub { text-align: center; font-size: 11pt; margin: 0 0 12pt; }
    #doc-print-container .doc-city-date { margin-bottom: 14pt; }
    #doc-print-container .doc-body { text-align: justify; text-indent: 1.25cm; margin-bottom: 24pt; line-height: 1.5; }
    #doc-print-container .doc-signature { margin-top: 36pt; line-height: 2; }
    #doc-print-container .doc-table { border-collapse: collapse; width: 100%; font-size: 10pt; margin: 10pt 0; }
    #doc-print-container .doc-table th,
    #doc-print-container .doc-table td { border: 1px solid #000; padding: 3pt 5pt; text-align: left; }
    #doc-print-container .doc-table th { font-weight: bold; }
    #doc-print-container .doc-table tfoot td { font-weight: bold; }
    #doc-print-container .doc-table-small { font-size: 9pt; }
}



/* ═══════════════════════════════════════════════════════════════
   Documents v2 — редизайн вкладки под Stitch «Формирование документа».
   Верхний бар действий + дропдаун шаблона + карточки формы + sticky-превью.
   Всё на токенах темы (свет/тёмная). Старый .docs-layout не используется.
   ═══════════════════════════════════════════════════════════════ */
#tab-docs .docs-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 120px);
    min-height: 0;
}
/* main-area — flex-колонка; у .tab-content стоит `margin:0 auto`, авто-поля
   съедают свободное место по горизонтали и глушат растяжение. Раньше ширину
   держала сетка редактора (minmax(420px,520px) у превью); галерея-плитки
   этого не делают и колонка схлопывалась до ~350px. Явная ширина (с учётом
   max-width:1600px у .tab-content) возвращает полную ширину. */
#tab-docs.tab-content { width: 100%; }
#tab-docs .docs-v2 { width: 100%; }

#tab-docs .docs-v2-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 4px 4px 14px;
    flex-shrink: 0;
}
#tab-docs .docs-v2-title {
    font-size: var(--text-xl, 20px); font-weight: 700;
    color: var(--ink, var(--color-text, #181b26)); letter-spacing: -0.01em;
}
#tab-docs .docs-v2-sub {
    font-size: var(--text-sm, 13px);
    color: var(--ink-muted, var(--color-text-secondary, #6b7280)); margin-top: 2px;
}
#tab-docs .docs-v2-actions { display: flex; gap: 8px; flex-shrink: 0; }
#tab-docs .docs-v2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--hairline, var(--color-border, #e2e5ec));
    background: var(--bg-surface, #fff);
    color: var(--ink, var(--color-text, #181b26));
    font-size: var(--text-sm, 13px); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background var(--t-fast, .15s) var(--ease, ease), border-color .15s, opacity .15s;
}
#tab-docs .docs-v2-btn:hover { background: var(--paper-fill, #f3f4f6); }
#tab-docs .docs-v2-btn:active { transform: translateY(1px); }
#tab-docs .docs-v2-btn:disabled { opacity: .55; cursor: not-allowed; }
#tab-docs .docs-v2-btn--primary {
    background: var(--accent, #4E5180); border-color: var(--accent, #4E5180);
    color: #fff;   /* белый текст на акцентном фоне (не --accent-text: он тёмный) */
}
#tab-docs .docs-v2-btn--primary:hover { background: var(--accent-strong, #3f4168); opacity: .96; }
/* Ghost: без рамки/фона, для вспомогательного «← К шаблонам». */
#tab-docs .docs-v2-btn--ghost {
    background: transparent; border-color: transparent;
    color: var(--ink-muted, var(--color-text-secondary, #6b7280));
}
#tab-docs .docs-v2-btn--ghost:hover {
    background: var(--paper-fill, #f3f4f6); color: var(--ink, var(--color-text, #181b26));
}
/* Small: компактная кнопка в строках списка. */
#tab-docs .docs-v2-btn--sm { min-height: 32px; padding: 0 12px; font-size: var(--text-xs, 12px); }

#tab-docs .docs-v2-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    gap: 18px; flex: 1; min-height: 0;
}
#tab-docs .docs-v2-form-col {
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto; min-height: 0; padding: 2px 4px 16px;
}
#tab-docs .docs-v2-tpl-field { display: flex; flex-direction: column; gap: 6px; }
#tab-docs .docs-v2-tpl-label {
    font-size: var(--text-xs, 11px); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-muted, var(--color-text-secondary, #6b7280));
}
/* Кастомный селект «в стиле системы» (как .task-drawer-status): убираем
   дефолтную браузерную стрелку, рисуем свою SVG-шеврон, фон по теме. */
#tab-docs .docs-v2-tpl-select {
    width: 100%; max-width: 360px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding: 9px 36px 9px 12px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--hairline, var(--color-border, #d1d5db));
    background-color: var(--bg-surface, #fff); color: var(--ink, var(--color-text, #181b26));
    font-size: var(--text-sm, 14px); font-weight: 600; cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239AA1AE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
#tab-docs .docs-v2-tpl-select:focus {
    border-color: var(--accent, #4E5180);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(78,81,128,.16));
}
#tab-docs .docs-v2-tpl-select option {
    background: var(--bg-surface, #fff); color: var(--ink, var(--color-text, #181b26));
}
[data-theme="dark"] #tab-docs .docs-v2-tpl-select {
    background-color: var(--bg-surface, #20232e); color: var(--ink, #e2e8f4);
    border-color: var(--hairline, rgba(226,232,244,.10));
}

#tab-docs .docs-v2-card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--hairline, var(--color-border, #e8eaf0));
    border-radius: var(--radius-lg, 14px);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,18,26,.05));
}
#tab-docs .docs-v2-card-title {
    font-size: var(--text-sm, 13px); font-weight: 700;
    color: var(--ink, var(--color-text, #181b26)); margin-bottom: 14px;
}
#tab-docs .docs-v2-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
#tab-docs .docs-v2-grid .doc-field-row { gap: 5px; }
/* Единый радиус для ВСЕХ полей карточек. !important — перебиваем глобальное
   input[type=text]{border-radius:999px!important}, из-за которого текстовые
   поля были «пилюлями», а date/select — прямоугольными. */
#tab-docs .docs-v2 .doc-field-input,
#tab-docs .docs-v2 .docs-v2-tpl-select,
#tab-docs .docs-v2 .doc-table-input {
    border-radius: var(--radius-md, 8px) !important;
}
#tab-docs .docs-v2-card .doc-field-input { padding: 8px 10px; }

/* Колонка превью — залипает у верха, НЕ растягивается на всю высоту формы.
   Иначе A4 масштабируется по ширине и тонет в пустом пространстве. Кап по
   высоте + align-self:start → бланк заполняет панель, пустоты почти нет. */
#tab-docs .docs-v2-preview-col {
    display: flex; flex-direction: column; min-height: 0;
    align-self: start;
    max-height: calc(100vh - 150px);
    background: var(--paper-bg, #eef0f4);
    border: 1px solid var(--hairline, var(--color-border, #e8eaf0));
    border-radius: var(--radius-lg, 14px);
    overflow: hidden; position: sticky; top: 8px;
}
#tab-docs .docs-v2-preview-head {
    padding: 10px 16px; flex-shrink: 0;
    font-size: var(--text-xs, 11px); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-muted, var(--color-text-secondary, #6b7280));
    background: var(--bg-surface, #fff);
    border-bottom: 1px solid var(--hairline, var(--color-border, #e8eaf0));
}
#tab-docs .docs-v2-preview-col .doc-preview-scroll { flex: 1; min-height: 0; }

/* Адаптив: на узких — одна колонка, превью прячем (есть кнопка Экспорт PDF) */
@media (max-width: 1100px) {
    #tab-docs .docs-v2-body { grid-template-columns: 1fr; }
    #tab-docs .docs-v2-preview-col { display: none; }
    #tab-docs .docs-v2-grid { grid-template-columns: 1fr; }
}

/* Тёмная тема */
[data-theme="dark"] #tab-docs .docs-v2-btn,
[data-theme="dark"] #tab-docs .docs-v2-tpl-select,
[data-theme="dark"] #tab-docs .docs-v2-card,
[data-theme="dark"] #tab-docs .docs-v2-preview-head {
    background: var(--bg-surface, #20232e);
    border-color: var(--hairline, rgba(226,232,244,.10));
    color: var(--ink, #e2e8f4);
}
[data-theme="dark"] #tab-docs .docs-v2-btn--primary {
    background: var(--accent, #8589C7); border-color: var(--accent, #8589C7);
    color: #161823;   /* тёмный текст на светлом лавандовом акценте тёмной темы */
}
[data-theme="dark"] #tab-docs .docs-v2-preview-col {
    background: #14161d; border-color: var(--hairline, rgba(226,232,244,.10));
}

/* ─── Галерея шаблонов по категориям + список сохранённых ──────────────────── */
#tab-docs .docs-v2-gallery {
    display: flex; flex-direction: column; gap: 16px;
    flex: 1; min-height: 0; overflow-y: auto; padding: 16px 4px 16px;
}
/* Верхняя строка галереи: табы слева, поиск справа — на одном уровне. */
#tab-docs .docs-v2-galtop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
/* Под-вкладки: Шаблоны / Мои документы */
#tab-docs .docs-v2-galtabs {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--paper-fill, #f1f2f6); border-radius: var(--radius-md, 10px);
    align-self: flex-start;
}
#tab-docs .docs-v2-galtab {
    border: none; background: transparent; cursor: pointer;
    padding: 7px 16px; border-radius: var(--radius-sm, 7px);
    font-size: var(--text-sm, 13px); font-weight: 600;
    color: var(--ink-muted, var(--color-text-secondary, #6b7280));
    transition: background .15s, color .15s;
}
#tab-docs .docs-v2-galtab.active {
    background: var(--bg-surface, #fff); color: var(--ink, var(--color-text, #181b26));
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,18,26,.08));
}
/* Поиск */
#tab-docs .docs-v2-search { display: flex; justify-content: flex-end; flex: 1; min-width: 220px; }
#tab-docs .docs-v2-search-input {
    width: 100%; max-width: 360px; padding: 10px 14px;
    border: 1px solid var(--hairline, var(--color-border, #e2e5ec));
    border-radius: var(--radius-md, 10px) !important;
    background: var(--bg-surface, #fff); color: var(--ink, var(--color-text, #181b26));
    font-size: var(--text-sm, 14px); outline: none;
}
#tab-docs .docs-v2-search-input:focus {
    border-color: var(--accent, #4E5180);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(78,81,128,.16));
}
/* Категория + сетка плиток */
#tab-docs .docs-v2-cat { margin-bottom: 18px; }
#tab-docs .docs-v2-cat-title {
    font-size: var(--text-xs, 11px); font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-muted, var(--color-text-secondary, #6b7280));
    margin: 0 2px 10px; display: flex; align-items: center; gap: 8px;
}
#tab-docs .docs-v2-cat-count {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: var(--paper-fill, #eceef3); color: var(--ink-muted, #6b7280);
    letter-spacing: 0;
}
#tab-docs .docs-v2-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
#tab-docs .docs-v2-tile {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    height: 92px; box-sizing: border-box;   /* все плитки одинаковой высоты */
    text-align: left; padding: 16px; cursor: pointer;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--hairline, var(--color-border, #e8eaf0));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,18,26,.05));
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
#tab-docs .docs-v2-tile:hover {
    border-color: var(--accent, #4E5180);
    box-shadow: 0 4px 14px rgba(78,81,128,.14); transform: translateY(-2px);
}
#tab-docs .docs-v2-tile-ico {
    line-height: 1; width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md, 10px);
    background: var(--accent-soft, rgba(78,81,128,.10));
    color: var(--accent, #4E5180);
}
#tab-docs .docs-v2-tile-ico svg { width: 20px; height: 20px; }
/* Текстовый блок плитки: название + описание в столбик справа от иконки. */
#tab-docs .docs-v2-tile-body {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
#tab-docs .docs-v2-tile-name {
    font-size: var(--text-sm, 14px); font-weight: 700;
    color: var(--ink, var(--color-text, #181b26)); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
#tab-docs .docs-v2-tile-desc {
    font-size: var(--text-xs, 12px); line-height: 1.35;
    color: var(--ink-muted, var(--color-text-secondary, #6b7280));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Список сохранённых документов */
#tab-docs .docs-v2-saved { display: flex; flex-direction: column; gap: 8px; }
#tab-docs .docs-v2-saved-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--hairline, var(--color-border, #e8eaf0));
    border-radius: var(--radius-md, 12px);
}
#tab-docs .docs-v2-saved-ico {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md, 9px); background: var(--accent-soft, rgba(78,81,128,.10));
    color: var(--accent, #4E5180);
}
#tab-docs .docs-v2-saved-ico svg { width: 17px; height: 17px; }
#tab-docs .docs-v2-saved-main { flex: 1; min-width: 0; }
#tab-docs .docs-v2-saved-title {
    font-size: var(--text-sm, 14px); font-weight: 600;
    color: var(--ink, var(--color-text, #181b26));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-docs .docs-v2-saved-id { color: var(--ink-muted, #9aa1ae); font-weight: 500; }
#tab-docs .docs-v2-saved-meta {
    font-size: var(--text-xs, 12px); color: var(--ink-muted, var(--color-text-secondary, #6b7280)); margin-top: 2px;
}
/* Статус-селект: цвет по статусу */
#tab-docs .docs-v2-status {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding: 6px 28px 6px 12px; border-radius: 999px; cursor: pointer; outline: none;
    font-size: var(--text-xs, 12px); font-weight: 700; border: 1px solid transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%239AA1AE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 10px;
}
#tab-docs .docs-v2-status--draft { background-color: var(--paper-fill, #eceef3); color: #6b7280; }
#tab-docs .docs-v2-status--final { background-color: rgba(46,125,87,.14); color: #2e7d57; }
#tab-docs .docs-v2-status--sent  { background-color: var(--accent-soft, rgba(78,81,128,.16)); color: var(--accent, #4E5180); }

@media (max-width: 1100px) {
    #tab-docs .docs-v2-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 640px) {
    #tab-docs .docs-v2-tiles { grid-template-columns: 1fr; }
    #tab-docs .docs-v2-saved-row { flex-wrap: wrap; }
}

/* Тёмная тема: галерея/плитки/список */
[data-theme="dark"] #tab-docs .docs-v2-galtabs { background: #181b24; }
[data-theme="dark"] #tab-docs .docs-v2-galtab.active { background: var(--bg-surface, #20232e); color: #e2e8f4; }
[data-theme="dark"] #tab-docs .docs-v2-search-input,
[data-theme="dark"] #tab-docs .docs-v2-tile,
[data-theme="dark"] #tab-docs .docs-v2-saved-row {
    background: var(--bg-surface, #20232e); color: #e2e8f4;
    border-color: var(--hairline, rgba(226,232,244,.10));
}
[data-theme="dark"] #tab-docs .docs-v2-cat-count { background: #181b24; color: #9aa1ae; }
[data-theme="dark"] #tab-docs .docs-v2-status--draft { background-color: #2a2e3a; color: #9aa1ae; }

/* ═══════════════════════════════════════════════════════════════
   Блок «Документы» в панели задачи (связь document_task) + оверлей просмотра.
   ═══════════════════════════════════════════════════════════════ */
.td-docs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.td-docs-empty {
    font-size: var(--text-sm, 13px);
    color: var(--ink-muted, var(--color-text-secondary, #9aa1ae));
    padding: 6px 0;
}
.td-doc-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--hairline, var(--color-border, #e8eaf0));
    background: var(--bg-surface, #fff);
}
.td-doc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-doc-title {
    font-size: var(--text-sm, 13px); font-weight: 600;
    color: var(--ink, var(--color-text, #181b26));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-doc-meta { font-size: var(--text-xs, 11px); color: var(--ink-muted, var(--color-text-secondary, #9aa1ae)); }
.td-doc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.td-doc-btn {
    padding: 4px 10px; border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--hairline, var(--color-border, #e2e5ec));
    background: var(--bg-surface, #fff); color: var(--ink, var(--color-text, #181b26));
    font-size: var(--text-xs, 12px); font-weight: 600; cursor: pointer;
}
.td-doc-btn:hover { background: var(--paper-fill, #f3f4f6); }
.td-doc-btn--danger { color: var(--status-overdue, #9a3324); }
.td-docs-attach { display: flex; gap: 8px; align-items: center; }
.td-docs-pick { flex: 1; min-width: 0; }
.td-docs-attach-btn {
    padding: 8px 14px; border-radius: var(--radius-md, 8px); border: none;
    background: var(--accent, #4E5180); color: var(--accent-text, #fff);
    font-size: var(--text-sm, 13px); font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.td-docs-attach-btn:hover { opacity: .95; }

/* Оверлей просмотра прикреплённого документа */
.td-doc-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(8, 10, 18, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 32px 16px; overflow: auto;
}
.td-doc-overlay-inner { position: relative; }
.td-doc-overlay-close {
    position: absolute; top: -28px; right: 0;
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--bg-surface, #fff); color: var(--ink, #181b26);
    font-size: 15px; cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.2));
}
.td-doc-overlay .doc-preview-wrap {
    transform: none !important;
    box-shadow: 0 12px 48px rgba(8,10,18,.4);
}
[data-theme="dark"] .td-doc-item,
[data-theme="dark"] .td-doc-btn {
    background: var(--bg-surface, #20232e);
    border-color: var(--hairline, rgba(226,232,244,.10));
    color: var(--ink, #e2e8f4);
}

/* Все <select> внутри формы документа — в стиле системы (как селект шаблона
   и .task-drawer-status): убрать дефолтную стрелку браузера, своя SVG-шеврон.
   Перебивает .doc-fleet-select (синий хайлайт) для единого вида. */
#tab-docs .docs-v2 select.doc-field-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 32px !important;
    background-color: var(--bg-surface, #fff) !important;
    color: var(--ink, var(--color-text, #181b26)) !important;
    border: 1px solid var(--hairline, var(--color-border, #d1d5db)) !important;
    border-radius: var(--radius-md, 8px) !important;
    font-weight: 500 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239AA1AE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 12px !important;
}
#tab-docs .docs-v2 select.doc-field-input:focus {
    border-color: var(--accent, #4E5180) !important;
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(78,81,128,.16)) !important;
}
[data-theme="dark"] #tab-docs .docs-v2 select.doc-field-input {
    background-color: var(--bg-surface, #20232e) !important;
    color: var(--ink, #e2e8f4) !important;
    border-color: var(--hairline, rgba(226,232,244,.10)) !important;
}

/* ============================================================================
 * Stitch-редизайн «Документы»: галерея (заголовок в теле, полоса «Мои
 * документы», карточки-плитки с подзаголовком/бейджем) + редактор (чип шаблона,
 * uppercase-заголовки секций). Только токены. Скоуп #tab-docs.
 * ==========================================================================*/
#tab-docs .docs-page { max-width: 1180px; margin: 0 auto; width: 100%; padding: 8px 4px 0; box-sizing: border-box; }

/* Заголовок страницы + действия */
#tab-docs .docs-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
#tab-docs .docs-page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; line-height: 1.1; }
#tab-docs .docs-page-sub { font-size: 14px; color: var(--text-muted); margin: 4px 0 0; }
#tab-docs .docs-pagehead-actions { display: flex; gap: 8px; }

#tab-docs .docs-page-search { margin-bottom: 18px; }
#tab-docs .docs-page-search .docs-v2-search-input { width: 100%; max-width: 340px; }

/* Полоса «Мои документы» */
#tab-docs .docs-mydocs { margin-bottom: 22px; }
#tab-docs .docs-mydocs:empty { display: none; }
#tab-docs .docs-mydocs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#tab-docs .docs-mydocs-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
#tab-docs .docs-mydocs-all { font: inherit; font-size: 13px; cursor: pointer; background: none; border: none; color: var(--accent); padding: 4px 6px; border-radius: 6px; }
#tab-docs .docs-mydocs-all:hover { text-decoration: underline; }
/* padding + компенсирующий отрицательный margin: overflow-x:auto иначе режет
   тень/рамку карточек (hover/active) сверху и слева. */
/* 5 карточек по ширине строки — без горизонтального скролла (grid 5×1fr).
   Лёгкий вертикальный padding оставляет место рамке/тени при hover/active. */
#tab-docs .docs-mydocs-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 12px; padding: 6px 2px 14px; }
/* flex-колонка + дата (meta) с margin-top:auto → карточки одной высоты (grid
   stretch), а дата прижата к низу, поэтому все даты на одном уровне даже при
   заголовках в 1 или 2 строки. */
#tab-docs .docs-mydocs-card { display: flex; flex-direction: column; height: 100%; min-width: 0; text-align: left; font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color .12s, box-shadow .12s, transform .08s; }
#tab-docs .docs-mydocs-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); }
#tab-docs .docs-mydocs-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
#tab-docs .docs-mydocs-card-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent-deep); }
#tab-docs .docs-mydocs-card-ico svg { width: 19px; height: 19px; }
#tab-docs .docs-mydocs-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
#tab-docs .docs-mydocs-card-id { color: var(--text-muted); font-weight: 500; font-size: 12px; }
#tab-docs .docs-mydocs-card-meta { font-size: 12px; color: var(--text-muted); margin-top: auto; padding-top: 8px; }

/* Заголовок категории с акцентной полосой */
#tab-docs .docs-v2-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#tab-docs .docs-v2-cat-bar { width: 4px; height: 22px; border-radius: 999px; background: var(--accent); }
/* margin:0 + display:inline-flex перебивают старое правило (.docs-v2-cat-title
   было flex-контейнером с margin-bottom:10px → счётчик/полоса стояли неровно). */
#tab-docs .docs-v2-cat-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; display: inline-flex; align-items: center; line-height: 1.1; text-transform: none; letter-spacing: normal; }
#tab-docs .docs-v2-cat-count { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--fill); border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; line-height: 1; }

/* Плитка-шаблон (колоночная, как в Stitch) */
/* height:auto перебивает фикс. height:92px из старого правила — иначе колоночный
   layout (иконка+название+описание+бейдж) не влезает и BESTSELLER вылезает за низ.
   min-height + grid stretch держат плитки в ряду одной высоты. */
/* height:auto перебивает фикс. height:92px из старого правила. Без min-height
   плитка = по содержимому, а grid align-items:stretch выравнивает плитки в ряду
   по самой высокой — стрелка/бейдж прижаты к контенту, без лишнего зазора снизу. */
#tab-docs .docs-v2-tile { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; text-align: left; padding: 16px; border-radius: 14px; height: auto; min-height: 128px; }
#tab-docs .docs-v2-tile-head { display: flex; align-items: center; gap: 12px; }
#tab-docs .docs-v2-tile-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--accent); transition: background .12s, color .12s; }
#tab-docs .docs-v2-tile:hover .docs-v2-tile-ico { background: var(--accent); color: #fff; }
[data-theme="dark"] #tab-docs .docs-v2-tile:hover .docs-v2-tile-ico { color: var(--on-accent); }
#tab-docs .docs-v2-tile-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#tab-docs .docs-v2-tile-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: normal; }
#tab-docs .docs-v2-tile-sub { font-size: 12px; color: var(--text-muted); }
#tab-docs .docs-v2-tile-desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#tab-docs .docs-v2-tile-foot { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
#tab-docs .docs-v2-tile-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); background: var(--accent-tint); border-radius: 4px; padding: 2px 7px; }
#tab-docs .docs-v2-tile-arrow { margin-left: auto; color: var(--text-muted); opacity: 0; transition: opacity .12s; font-size: 15px; }
#tab-docs .docs-v2-tile:hover .docs-v2-tile-arrow { opacity: 1; }

/* «Мои документы» — полный список (через «Смотреть все») */
#tab-docs .docs-saved-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#tab-docs .docs-saved-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }

/* Футер */
#tab-docs .docs-foot { margin-top: 28px; padding: 18px 0 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }

/* Редактор: левая часть бара с названием + чип шаблона */
#tab-docs .docs-v2-bar { justify-content: space-between; }
#tab-docs .docs-v2-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#tab-docs .docs-v2-doc-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
#tab-docs .docs-v2-tpl-chip { font-size: 12px; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-tint); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }

/* Редактор: uppercase-заголовки секций формы (как в Stitch) */
#tab-docs .docs-v2-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }

@media (max-width: 768px) {
  #tab-docs .docs-page { padding: 6px 8px 0; }
  #tab-docs .docs-page-title { font-size: 24px; }
  #tab-docs .docs-pagehead-actions { width: 100%; }
  #tab-docs .docs-pagehead-actions .docs-v2-btn { flex: 1 1 auto; }
  #tab-docs .docs-v2-bar { flex-wrap: wrap; gap: 8px; }
  #tab-docs .docs-v2-bar-left { width: 100%; }
}

/* Статус-пилюля в полосе «Мои документы» (read-only, без каретки select) */
#tab-docs .docs-mydocs-pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
#tab-docs .docs-mydocs-pill--draft { background: var(--fill); color: var(--text-muted); }
#tab-docs .docs-mydocs-pill--final { background: var(--accent-tint); color: var(--accent-deep); }
#tab-docs .docs-mydocs-pill--sent { background: var(--accent-tint); color: var(--accent-deep); }

/* Полоса «Мои документы» на узких экранах — 2 колонки (5 было бы тесно) */
@media (max-width: 768px) {
  #tab-docs .docs-mydocs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Плитки шаблонов: каждая по своему содержимому (без stretch) — короткие
   карточки не растягиваются и не оставляют пустого низа. BESTSELLER и стрелка
   убраны из разметки. */
#tab-docs .docs-v2-tiles { align-items: stretch; }

/* ── Hover-превью документа (поповер через портал, живой мини-рендер бланка) ──*/
.doc-hovpop {
    position: fixed; z-index: 10000; display: none; width: 332px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 12px;
    opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s;
}
.doc-hovpop.is-on { opacity: 1; transform: none; }
.doc-hovpop-pagewrap { overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.doc-hovpop-doc { transform-origin: top left !important; box-shadow: none !important; }
.doc-hovpop-meta { padding-top: 10px; }
.doc-hovpop-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; }
.doc-hovpop-sub { font-size: 12px; color: var(--accent-deep); margin-top: 3px; }
.doc-hovpop-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Мобильная шторка снизу (long-press) */
.doc-hovpop--sheet { left: 50% !important; top: auto !important; bottom: 12px;
    width: auto; max-width: calc(100vw - 24px); transform: translateX(-50%) translateY(8px); }
.doc-hovpop--sheet.is-on { transform: translateX(-50%); }

/* Пилюля статуса в полосе «Мои документы» — кликабельная (переключение статуса) */
#tab-docs button.docs-mydocs-pill { cursor: pointer; border: 1px solid transparent; font: inherit; transition: filter .12s, box-shadow .12s; }
#tab-docs button.docs-mydocs-pill:hover { filter: brightness(.96); box-shadow: 0 0 0 2px var(--accent-tint); }
#tab-docs button.docs-mydocs-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Действия в карточке «Мои документы» (переименовать + статус) */
#tab-docs .docs-mydocs-card-actions { display: inline-flex; align-items: center; gap: 6px; }
#tab-docs .docs-mydocs-rename {
    cursor: pointer; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); border-radius: 7px; padding: 2px 7px; font-size: 12px; line-height: 1;
    transition: background .12s, color .12s, border-color .12s;
}
#tab-docs .docs-mydocs-rename:hover { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-tint); }