/* ==========================================================================
   Портал ОГК — демонстрация (WebSummary). Стили разделов, добавленных к резюме.
   Основа — app.css (Bootstrap, синий #0d6efd). Сборочный чертёж — «бумага» и «тушь».
   ========================================================================== */
:root {
    --ink: #1f3a5f;          /* линии и текст чертежа */
    --ink-soft: #7d8ea5;     /* тонкие линии, второстепенный текст */
    --paper: #fbfcfd;        /* лист */
    --pick: #0d6efd;         /* выбранная позиция = основной цвет страницы */
    --ok: #1e7b34;
    --warn: #b54708;
    --bad: #b42318;
    --drawing-font: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
}

.demo-lead { max-width: 72ch; }
.demo-anchor { scroll-margin-top: 64px; }
.section-title[id] { scroll-margin-top: 64px; }
.as-sub { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin: 2rem 0 .75rem; }

/* ---------- Липкое меню разделов ---------- */
.demo-nav { position: sticky; top: 0; z-index: 1020; background: #fff; border-bottom: 1px solid #dee2e6; }
.demo-nav-inner { display: flex; gap: .25rem; overflow-x: auto; padding: .5rem 1.5rem; scrollbar-width: thin; }
.demo-nav a {
    flex: 0 0 auto; padding: .35rem .75rem; border-radius: 6px; font-size: .9rem;
    color: #495057; text-decoration: none; white-space: nowrap;
}
.demo-nav a:hover { background: #eef3fb; color: #0a58ca; }
.demo-nav a.is-active { background: var(--pick); color: #fff; }
.demo-nav a:focus-visible, [data-pos]:focus-visible, .pr-emp:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }

/* ---------- Сборочный чертёж ---------- */
.as-drawing-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.as-sheet { margin: 0; background: var(--paper); border: 1px solid #d5dce6; border-radius: 4px; }
.as-svg { display: block; width: 100%; height: auto; font-family: var(--drawing-font); }
.as-frame-thin { fill: none; stroke: var(--ink-soft); stroke-width: .6; }
.as-frame { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.as-body { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.as-hatch { stroke: var(--ink-soft); stroke-width: .7; }
.as-body-hatch { stroke: none; opacity: .5; }
.as-caption { font-size: 15px; fill: var(--ink); font-weight: 700; }
.as-module rect { fill: #fff; stroke: var(--ink); stroke-width: 1.1; }
.as-module text { font-size: 12px; fill: var(--ink); }
.as-pos { cursor: pointer; }
.as-leader { stroke: var(--ink); stroke-width: 1.1; }
.as-dot { fill: var(--ink); }
.as-balloon { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.as-num { font-size: 16px; font-weight: 700; fill: var(--ink); }
.as-label { font-size: 14px; fill: var(--ink); }
.as-plan .as-leader, .as-plan .as-balloon { stroke-dasharray: 5 3; }
.as-plan .as-label, .as-plan .as-num { fill: var(--ink-soft); }
.as-pos:hover .as-balloon { fill: #eef3fb; }
.as-pos.is-active .as-balloon { fill: var(--pick); stroke: var(--pick); }
.as-pos.is-active .as-num { fill: #fff; }
.as-pos.is-active .as-leader { stroke: var(--pick); stroke-width: 2; }
.as-pos.is-active .as-dot { fill: var(--pick); }
.as-pos.is-active .as-label { fill: var(--pick); font-weight: 700; }
.as-stamp rect, .as-stamp line { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.as-stamp text { font-size: 11px; fill: var(--ink); }
.as-stamp .as-stamp-title { font-weight: 700; font-size: 12px; }
.as-legend text { font-size: 11px; fill: var(--ink-soft); }
.as-leg-live { stroke: var(--ink); stroke-width: 1.2; }
.as-leg-plan { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 3; }

/* Спецификация */
.as-spec table { width: 100%; border-collapse: collapse; font-family: var(--drawing-font); font-size: 1rem; color: var(--ink); background: var(--paper); }
.as-spec caption { caption-side: top; color: var(--ink); font-weight: 700; font-size: 1.05rem; padding: 0 0 .35rem; }
.as-spec th, .as-spec td { border: 1px solid var(--ink); padding: .3rem .5rem; }
.as-spec th { font-weight: 700; text-align: center; }
.as-spec td:first-child { text-align: center; width: 3rem; font-weight: 700; }
.as-spec tbody tr { cursor: pointer; }
.as-spec tbody tr:hover { background: #eef3fb; }
.as-spec tbody tr.is-active { background: var(--pick); color: #fff; }
.as-spec tbody tr.is-active .as-state { background: #fff; }
.as-spec-note { font-size: .82rem; color: #6c757d; margin: .5rem 0 0; }
.as-state { display: inline-block; font-family: system-ui, 'Segoe UI', sans-serif; font-size: .74rem; padding: .1rem .45rem; border-radius: 4px; white-space: nowrap; }
.as-state-live { background: #e3f2e6; color: var(--ok); }
.as-state-partial { background: #fff1dc; color: var(--warn); }
.as-state-plan { background: #edf0f4; color: #4b5d73; border: 1px dashed #93a3b8; }

/* Сценарий отдела */
.as-panel { margin-top: 1.25rem; border: 1px solid #d5dce6; border-left: 4px solid var(--pick); border-radius: 6px; padding: 1.1rem 1.25rem; background: #fff; }
.as-panel-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.as-panel-head h4 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.as-panel-pos { width: 30px; height: 30px; border-radius: 50%; background: var(--pick); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--drawing-font); font-weight: 700; font-size: 1.05rem; }
.as-panel-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 1.5rem; }
.as-panel h5 { font-size: .92rem; font-weight: 700; margin: .9rem 0 .35rem; color: #1a1a2e; }
.as-panel h5:first-child { margin-top: 0; }
.as-now { color: #5a6472; margin: 0; }
.as-steps { padding-left: 1.2rem; margin: 0; }
.as-steps li { margin-bottom: .3rem; }
.as-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.as-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border: 1px solid #cfd8e3; border-radius: 4px; font-size: .82rem; background: #f8fafc; }
.as-effect { margin: .9rem 0 0; padding: .55rem .75rem; background: #eef7f0; border-radius: 6px; color: #1c4f2a; font-size: .92rem; }

/* Мини-экраны */
.mk { border: 1px solid #d5dce6; border-radius: 8px; background: #fff; font-size: .82rem; overflow: hidden; box-shadow: 0 6px 18px rgba(31, 58, 95, .08); }
.mk-phone { max-width: 280px; margin: 0 auto; border-radius: 18px; border-width: 6px; border-color: #26364c; }
.mk-bar { background: #26364c; color: #fff; padding: .45rem .75rem; font-weight: 600; }
.mk-foot { padding: .45rem .75rem; background: #f6f8fb; color: #4b5d73; border-top: 1px solid #e5e9ef; }
.mk-bars { padding: .6rem .75rem; display: grid; gap: .4rem; }
.mk-barrow { display: grid; grid-template-columns: 9.5rem 1fr 3rem; align-items: center; gap: .5rem; }
.mk-barrow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-barrow i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pick) var(--p), #e6ebf2 var(--p)); }
.mk-barrow b { text-align: right; font-weight: 600; }
.mk-funnel { padding: .6rem .75rem; display: grid; gap: .3rem; }
.mk-funnel div { width: var(--w); min-width: 9rem; background: #e7efff; border-left: 3px solid var(--pick); padding: .2rem .5rem; display: flex; justify-content: space-between; }
.mk-field, .mk-photo, .mk-answer { margin: .5rem .6rem; padding: .45rem .55rem; border-radius: 6px; }
.mk-field { background: #f3f5f8; }
.mk-photo { border: 1px dashed #b8c4d4; color: #6c757d; }
.mk-answer { background: #e3f2e6; }
.mk-dl { display: grid; grid-template-columns: 6.5rem 1fr; margin: 0; padding: .6rem .75rem; row-gap: .25rem; }
.mk-dl dt { color: #6c757d; font-weight: 400; }
.mk-dl dd { margin: 0; font-weight: 600; }
.mk-bad { color: var(--bad) !important; }
.mk-route { display: flex; gap: .25rem; padding: 0 .75rem .7rem; flex-wrap: wrap; }
.mk-route span { padding: .15rem .45rem; border-radius: 4px; background: #edf0f4; color: #4b5d73; }
.mk-route .ok { background: #e3f2e6; color: var(--ok); }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table td { padding: .35rem .75rem; border-bottom: 1px solid #eef1f5; }
.mk-table .ok { color: var(--ok); }
.mk-low td { background: #fff4e5; }
.mk-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e5e9ef; }
.mk-kpi div { background: #fff; padding: .7rem .75rem; }
.mk-kpi b { display: block; font-size: 1.5rem; color: var(--ink); }
.mk-kpi span { color: #6c757d; }

/* Матрица модулей и порядок подключения */
.as-matrix { width: 100%; border-collapse: collapse; font-size: .88rem; }
.as-matrix th, .as-matrix td { border-bottom: 1px solid #e5e9ef; padding: .45rem .5rem; }
.as-matrix thead th { font-weight: 600; text-align: center; color: #495057; white-space: nowrap; }
.as-matrix tbody th { font-weight: 500; white-space: nowrap; }
.as-matrix td { text-align: center; }
.as-dotmark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.as-dotmark, .as-dotmark-live, .as-dotmark-partial { background: var(--ink); }
.as-dotmark-plan { border: 2px dashed var(--ink-soft); }
.as-rollout { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.as-rollout li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: .5rem; }
.as-rollout li::before { content: counter(step); font-family: var(--drawing-font); font-weight: 700; font-size: 1.4rem; color: var(--ink); display: block; }
.as-rollout strong { display: block; margin-bottom: .2rem; }
.as-rollout span { font-size: .88rem; color: #5a6472; }

/* ---------- Реестр ТЗ и план ---------- */
.tr-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.tr-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.tr-filter { border: 1px solid #d5dce6; background: #fff; border-radius: 6px; padding: .25rem .6rem; font-size: .85rem; }
.tr-filter b { font-weight: 600; color: #6c757d; margin-left: .15rem; }
.tr-filter.is-active { background: var(--pick); border-color: var(--pick); color: #fff; }
.tr-filter.is-active b { color: #fff; }
.tr-search { max-width: 300px; }
.tr-table { font-size: .88rem; }
.tr-num { white-space: nowrap; font-weight: 600; }
.tr-cust { font-size: .78rem; color: #6c757d; }
.tr-lock { color: var(--warn); margin-left: .25rem; }
.tr-locked { background: #fffaf2; }
.tr-progress { width: 90px; height: 6px; background: #e6ebf2; border-radius: 3px; overflow: hidden; }
.tr-progress i { display: block; height: 100%; background: var(--pick); }
.tr-status { font-size: .76rem; padding: .15rem .5rem; border-radius: 4px; white-space: nowrap; }
.tr-status-new { background: #edf0f4; color: #4b5d73; }
.tr-status-work { background: #e7efff; color: #0a58ca; }
.tr-status-approval { background: #f1e8ff; color: #5b2bab; }
.tr-status-paused { background: #fff1dc; color: var(--warn); }
.tr-status-overdue { background: #fde8e7; color: var(--bad); }
.tr-status-done { background: #e3f2e6; color: var(--ok); }
.gt { position: relative; border: 1px solid #e5e9ef; border-radius: 6px; padding: .5rem .75rem 1.6rem; background: #fff; }
.gt-scale, .gt-row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; }
.gt-scale { height: 1.4rem; font-size: .76rem; color: #6c757d; }
.gt-row { height: 1.5rem; font-size: .8rem; }
.gt-name { font-weight: 600; white-space: nowrap; }
.gt-track { position: relative; height: 100%; }
.gt-month { position: absolute; top: 0; border-left: 1px solid #dee2e6; padding-left: 4px; }
.gt-bar { position: absolute; top: .3rem; height: .9rem; border-radius: 3px; background: #b9cff8; overflow: hidden; }
.gt-bar s { display: block; height: 100%; background: var(--pick); text-decoration: none; }
.gt-overdue { background: #f7c4c0; } .gt-overdue s { background: var(--bad); }
.gt-paused { background: #f6d9ad; } .gt-paused s { background: var(--warn); }
.gt-done { background: #bfe3c8; } .gt-done s { background: var(--ok); }
.gt-new { background: #dfe5ee; }
.gt-approval { background: #ddd0f5; } .gt-approval s { background: #6f42c1; }
.gt-today { position: absolute; top: .4rem; bottom: .3rem; left: calc(.75rem + 7.5rem + (100% - 1.5rem - 7.5rem) * var(--x) / 100); border-left: 2px solid var(--bad); }
.gt-today span { position: absolute; bottom: -.1rem; left: 4px; font-size: .72rem; color: var(--bad); white-space: nowrap; }
.gt-row.is-hidden { display: none; }

/* ---------- Расчёт стоимости ---------- */
.cc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 1.25rem; }
.cc-table { font-size: .88rem; }
.cc-table input { width: 6rem; }
.cc-row-h { text-align: right; font-weight: 600; }
.cc-params { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .85rem; }
.cc-params label { display: grid; gap: .2rem; }
.cc-params input { width: 8rem; }
.cc-result { border: 1px solid #d5dce6; border-radius: 8px; padding: 1rem 1.1rem; display: grid; gap: .8rem; align-content: start; background: #f8fafc; }
.cc-result span { display: block; font-size: .82rem; color: #6c757d; }
.cc-result b { font-size: 1.6rem; color: #1a1a2e; }
.cc-result small { margin-left: .35rem; color: #6c757d; }
.cc-main { border-top: 1px solid #d5dce6; padding-top: .8rem; }
.cc-main b { font-size: 2.2rem; color: var(--pick); }
.cc-note { font-size: .8rem; color: #6c757d; margin: 0; }

/* ---------- Отчёт по проекту ---------- */
.pr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.25rem; margin-bottom: 1rem; }
.pr-info { display: grid; grid-template-columns: 9rem 1fr; row-gap: .3rem; margin: 0; font-size: .9rem; }
.pr-info dt { font-weight: 400; color: #6c757d; }
.pr-info dd { margin: 0; font-weight: 600; }
.pr-sheets table, .pr-labor { font-size: .85rem; }
.pr-labor th { font-size: .78rem; vertical-align: bottom; }
.pr-labor td:not(:first-child), .pr-labor th:not(:first-child) { text-align: right; }
.pr-emp { cursor: pointer; background: #f2f4f7; font-weight: 600; }
.pr-emp .bi { transition: transform .15s; display: inline-block; }
.pr-emp[aria-expanded="true"] .bi { transform: rotate(90deg); }
.pr-mod td:first-child { padding-left: 1.6rem; color: #495057; }
.pr-total td { font-weight: 700; background: #e9ecef; }
.pr-ktu { display: inline-block; min-width: 4.2rem; padding: 0 .3rem; background: linear-gradient(90deg, #cfe0ff var(--p), transparent var(--p)); border-radius: 3px; }

/* ---------- Сводный отчёт за месяц ---------- */
.ms-table { font-size: .84rem; }
.ms-table th { text-align: center; background: #f2f4f7; }
.ms-table td:not(:first-child) { text-align: right; }
.ms-pos { background: #eef7f0; }
.ms-we { background: #fff7e0 !important; }
.ms-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: .75rem; }
.ms-bottom h5 { font-size: .95rem; font-weight: 700; }
.ms-bottom table { font-size: .84rem; }
.ms-check td:last-child { text-align: right; font-weight: 600; }
.ms-fail td { color: var(--bad); }
.ms-ok td { color: var(--ok); }
.ms-balance { list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .86rem; }
.ms-balance li { display: grid; grid-template-columns: 1fr 3.5rem 8rem; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed #e5e9ef; }
.ms-balance .neg { color: var(--bad); text-align: right; }
.ms-balance .pos { color: var(--ok); text-align: right; }
.ms-balance small { color: #6c757d; }

/* ---------- Краткий отчёт (окно) ---------- */
.sr-tables { font-size: .72rem; max-height: 65vh; overflow-y: auto; }
.sr-tables .monthly-left { flex-basis: 34%; overflow: visible; }
.sr-tables .monthly-right { overflow-y: visible; }
.sr-absence td { background: #e7f1ff; font-style: italic; }
.sr-total { font-weight: 700; background: #f8f9fa; white-space: nowrap; }

/* ---------- Конвертор материалов ---------- */
.mc-status { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .85rem; color: #4b5d73; margin-bottom: .6rem; }
.mc-status .bi { color: var(--ok); margin-right: .25rem; }
.mc-panes { display: grid; grid-template-columns: 17rem minmax(0, 1fr); border: 1px solid #d5dce6; border-radius: 8px; overflow: hidden; background: #fff; }
.mc-tree { background: #f6f8fb; border-right: 1px solid #d5dce6; padding: .6rem; font-size: .86rem; }
.mc-tree ul { list-style: none; margin: 0; padding: 0; }
.mc-tree ul ul { padding-left: 1.1rem; margin: .2rem 0 .5rem; }
.mc-group { font-weight: 600; display: flex; gap: .35rem; align-items: center; }
.mc-sort { border: 0; background: none; text-align: left; padding: .25rem .4rem; border-radius: 4px; width: 100%; color: #26364c; }
.mc-sort:hover { background: #e7efff; }
.mc-sort.is-active { background: var(--pick); color: #fff; }
.mc-right { padding: .75rem 1rem; }
.mc-right h5 { font-size: .95rem; font-weight: 700; }
.mc-right table { font-size: .85rem; }
.mc-yes { color: var(--ok); }
.mc-no { color: #6c757d; }
.mc-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mc-log { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .84rem; color: var(--ok); }

/* ---------- Согласование КД ---------- */
.ap { display: grid; gap: .75rem; }
.ap-doc { border: 1px solid #d5dce6; border-radius: 8px; padding: .75rem 1rem; background: #fff; }
.ap-head { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .5rem; }
.ap-head code { font-size: .9rem; color: var(--ink); font-weight: 700; }
.ap-route { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ap-route li { border-top: 3px solid #dfe5ee; padding-top: .35rem; font-size: .82rem; display: grid; }
.ap-step { font-weight: 600; }
.ap-who { color: #4b5d73; }
.ap-sign { color: #6c757d; min-height: 1.2em; }
.ap-done { border-top-color: var(--ok) !important; }
.ap-done .ap-sign { color: var(--ok); }
.ap-current { border-top-color: var(--pick) !important; }
.ap-current .ap-sign { color: var(--pick); }
.ap-foot { margin-top: .6rem; }
.ap-final { color: var(--ok); font-weight: 600; font-size: .88rem; }

/* ---------- Форма учёта времени (подсветка ошибок проверки) ---------- */
.worklog-table .is-invalid { border-color: var(--bad) !important; box-shadow: 0 0 0 .15rem rgba(180, 35, 24, .2); }
.wl-message { font-size: .85rem; margin-top: .5rem; }
.wl-message.err { color: var(--bad); }
.wl-message.ok { color: var(--ok); }

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
    .as-drawing-row, .as-panel-grid, .cc, .pr-top, .ms-bottom { grid-template-columns: minmax(0, 1fr); }
    .as-rollout { grid-template-columns: 1fr 1fr; }
    .mc-panes { grid-template-columns: 1fr; }
    .mc-tree { border-right: 0; border-bottom: 1px solid #d5dce6; }
}
@media (max-width: 576px) {
    .as-rollout, .ap-route { grid-template-columns: 1fr; }
    .gt-scale, .gt-row { grid-template-columns: 5.5rem 1fr; }
    .mk-barrow { grid-template-columns: 7rem 1fr 2.5rem; }
    .as-spec table { font-size: .9rem; }
    .as-spec .as-state { white-space: normal; }
    .as-spec th, .as-spec td { padding: .25rem .35rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* Форма учёта времени на телефоне: таблица прокручивается внутри вкладки, а не страница */
.worklog-card .tab-pane { overflow-x: auto; }
@media (max-width: 768px) {
    .worklog-card .worklog-table { min-width: 760px; }
    .worklog-card .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
}


/* Журнал проектов: вкладки СПДС / ЕСКД, описание и встроенная страница */
.pjr-tabs .nav-link { font-weight: 600; }
.pjr-body { border: 1px solid #dee2e6; border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }
.pjr-info { padding: 1rem 1.25rem .75rem; font-size: .92rem; }
.pjr-features { margin: 0 0 .75rem; padding-left: 1.1rem; color: #3b4556; }
.pjr-features li { margin-bottom: .2rem; }
.pjr-hint { display: inline-block; margin-left: .75rem; font-size: .8rem; color: #6c757d; }
.pjr-frame { border-top: 1px solid #dee2e6; background: #f4f6f9; }
.pjr-frame iframe { display: block; width: 100%; height: 760px; border: 0; }
@media (max-width: 768px) {
    .pjr-frame iframe { height: 560px; }
    .pjr-hint { display: block; margin: .5rem 0 0; }
}