/* Стили AlIright: шапка в стиле aliworks, плотные таблицы, чипы состояний,
   лозенджи и карточки канбана в стилистике Jira-трекера.
   Перенесены из макетов, утверждённых заказчиком 01.08.2026 (папка prototype/):
   вёрстка меняется только вместе с макетом. */

* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #222;
       margin: 0; padding: 0 0 90px; background: #eef1f4; }
.app { width: min(1600px, 100% - 32px); margin: 18px auto 0; border: 1px solid #ccc; border-radius: 10px;
       overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(20,30,45,.06); }

/* ===== Полоса 1 — брендовая (1:1 как в AlIworks) ===== */
.brandbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
            gap: 18px; padding: 12px 22px; background: #fff; }
.brand-left { display: flex; align-items: center; gap: 13px; justify-self: start; }
.brand-left .orglogo { height: 50px; display: block; }
.company { font-family: Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
           font-size: 31px; color: #003F9E; letter-spacing: .6px; line-height: 1;
           text-transform: uppercase; }
.brand-mid { justify-self: center; text-align: center; max-width: 460px; }
.brand-mid .tl2 { font-size: 17px; font-weight: 600; color: #22303f; letter-spacing: .3px; }
.brand-right { justify-self: end; display: flex; align-items: flex-end; }
.brand-right .prodlogo { height: 50px; display: block; }
.ver { font-size: 10px; color: #9aa2ab; letter-spacing: .3px; margin-left: 1ch; padding-bottom: 1px; }
.accent { height: 3px; background: #2438C8; }

/* ===== Полоса 2 — контекст ===== */
.ctxbar { display: flex; align-items: center; gap: 16px; padding: 8px 22px;
          background: #f7f9fb; border-bottom: 1px solid #e5e8eb; flex-wrap: wrap; }
.crumb { font-size: 13px; color: #566; }
.crumb a { color: #2438C8; text-decoration: none; font-weight: 600; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.userbox .lbl { font-size: 11px; color: #9aa2ab; }
.userbox .fio { font-weight: 700; color: #22303f; font-size: 14px; }
.userbox .role { border-radius: 11px; padding: 2px 11px; font-size: 11.5px; font-weight: 700; color: #fff; }
.r-dir { background: #2c6fbb; }
.r-law { background: #6b4fa3; }
.userbox .out { font-size: 12px; color: #2438C8; border: 1px solid #cdd3ec;
                border-radius: 6px; padding: 3px 9px; text-decoration: none; }

/* ===== Вкладки ===== */
.tabs { display: flex; gap: 4px; padding: 8px 16px 0; background: #f4f6f8; font-size: 13px; flex-wrap: wrap; }
.tabs .tb { padding: 6px 15px; border: 1px solid #ccd; border-bottom: none;
            border-radius: 6px 6px 0 0; background: #e8ecef; color: #666; text-decoration: none; }
.tabs .tb.on { background: #fff; color: #22303f; font-weight: 700; border-color: #bcc6cf; }

.screen { padding: 14px 18px 30px; border-top: 1px solid #d7dde3; }
.note { font-size: 11.5px; color: #8a929b; margin: 0 0 12px; }
h2.sec { font-size: 14px; margin: 18px 0 8px; color: #22303f; }
h2.sec:first-child { margin-top: 0; }
h2.sec .cnt { font-weight: 400; color: #8a929b; font-size: 12px; }
.muted { color: #8a929b; }

/* ===== Плотные таблицы (как в AlIworks) ===== */
.btab { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-bottom: 14px; }
.btab th, .btab td { border: 1px solid #d7dde3; padding: 5px 7px; text-align: right; overflow-wrap: anywhere; }
.btab th { background: #f2f5f8; color: #3a4149; font-weight: 700; text-align: center; font-size: 11.5px; }
.btab td.l, .btab th.l { text-align: left; }
.btab td.c { text-align: center; }
.btab tr.bad  td { background: #fdf1f0; }
.btab tr.warn td { background: #fff8e6; }
.btab tr.hidden-row { display: none; }
.btab a { color: #2438C8; text-decoration: none; font-weight: 600; }
.btab td.calc { color: #566; background: #fbfcfd; }

/* Бейджи и чипы */
.chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 11px; font-weight: 700; }
.ch-red    { background: #c0392b; color: #fff; }
.ch-amber  { background: #c8860a; color: #fff; }
.ch-green  { background: #2f9e52; color: #fff; }
.ch-grey   { background: #e8ecef; color: #566; }
.ch-blue   { background: #2c6fbb; color: #fff; }
.ch-violet { background: #6b4fa3; color: #fff; }
.ch-line   { background: #fff; color: #566; border: 1px solid #c4ccd4; font-weight: 600; }
.stage-chip { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 11px;
              font-weight: 700; background: #eaf3ff; color: #1a4d80; border: 1px solid #b9d4ee; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.dot.red { background: #c0392b; } .dot.amber { background: #c8860a; } .dot.green { background: #2f9e52; }

/* Флажки справочников */
.flag { display: inline-block; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.flag.ok  { background: #eafaf1; color: #1e5631; border: 1px solid #bfe8cf; }
.flag.no  { background: #fff8e6; color: #7a5a10; border: 1px solid #ecd9a0; }

/* Лозенджи (стилистика Jira-трекера) */
.k-loz { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
         border-radius: 4px; padding: 2px 6px; line-height: 1.3; }
.k-loz.green  { background: #EFFFD6; color: #4C6B1F; }
.k-loz.red    { background: #FFECEB; color: #AE2E24; }
.k-loz.yellow { background: #FFF5DB; color: #9E4C00; }
.k-loz.blue   { background: #E9F2FE; color: #1558BC; }
.k-loz.gray   { background: #0515240F; color: #505258; }
.k-loz.epic   { background: #F3F0FF; color: #5E4DB2; text-transform: none; }

/* KPI */
.kpirow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi { flex: 1 1 160px; border: 1px solid #d7dde3; border-radius: 8px; padding: 10px 12px; background: #fff; }
.kpi .v { font-size: 22px; font-weight: 700; color: #22303f; }
.kpi .v small { font-size: 12px; color: #8a929b; font-weight: 400; }
.kpi .k { font-size: 11px; color: #8a929b; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.kpi.neg .v { color: #c0392b; }
.kpi.pos .v { color: #2f9e52; }

/* ===== Панель фильтров ===== */
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px;
           background: #f7f9fb; border: 1px solid #e5e8eb; border-radius: 8px; padding: 10px 12px; }
.filters .fld { display: flex; flex-direction: column; gap: 3px; }
.filters .fld .k { font-size: 10px; color: #9aa2ab; text-transform: uppercase; letter-spacing: .4px; }
.filters select, .filters input { font: inherit; font-size: 13px; padding: 5px 8px;
                                  border: 1px solid #c4ccd4; border-radius: 6px; background: #fff; }
.filters .spacer { margin-left: auto; }

/* Кнопки */
.btn { display: inline-block; font: inherit; font-size: 13px; padding: 6px 14px; border: 1px solid #c4ccd4;
       border-radius: 6px; background: #fff; color: #22303f; font-weight: 600; cursor: pointer;
       text-decoration: none; }
.btn:hover { background: #f0f3f6; }
.btn.primary { background: #2438C8; border-color: #2438C8; color: #fff; }
.btn.primary:hover { background: #1c2da3; }
.btn.sm { font-size: 12px; padding: 4px 10px; }

/* ===== Карточка дела ===== */
.casehead { padding: 2px 0 10px; }
.casehead h3 { margin: 0 0 4px; font-size: 17px; color: #22303f; }
.casehead .sub { font-size: 12.5px; color: #566; }
.casehead .sub b { color: #22303f; }
.headrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.headrow .grow { margin-left: auto; display: flex; gap: 8px; }

/* Маршрут со стадиями (стрелки) */
.routebox { border: 1px solid #d7dde3; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; background: #fbfcfd; }
.routebox .rname { font-size: 11px; color: #8a929b; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.routebox .rname b { color: #22303f; }
.route { display: flex; gap: 0; flex-wrap: wrap; }
.step { font-size: 11.5px; padding: 4px 12px 4px 18px; background: #eef1f4; color: #8a929b; margin-bottom: 4px;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.step.done { background: #d5f5e3; color: #1e5631; font-weight: 600; }
.step.now  { background: #2c6fbb; color: #fff; font-weight: 700; }
.fork { font-size: 11.5px; color: #7a5a10; background: #fff8e6; border: 1px dashed #ecd9a0;
        border-radius: 6px; padding: 3px 10px; margin: 4px 8px 4px 0; display: inline-block; }

/* Суммы: таблица разбивки */
.sums { display: flex; gap: 18px; padding: 8px 0 4px; flex-wrap: wrap; }
.sums div { font-size: 12px; color: #8a929b; }
.sums b { display: block; font-size: 16px; color: #22303f; }
.sums .neg b { color: #c0392b; }

.casecols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }

/* Лента событий */
.tl h4, .side h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #8a929b; }
.tl ul { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 12px 18px; font-size: 12.5px; }
.tl li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px;
                 border-radius: 50%; background: #2c6fbb; }
.tl li.evt-fork::before { background: #c8860a; }
.tl li.evt-money::before { background: #2f9e52; }
.tl li::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: -2px; width: 1px; background: #d7dde3; }
.tl li:last-child::after { display: none; }
.tl .dt { color: #9aa2ab; font-size: 11px; display: block; }
.tl .tag { font-size: 10.5px; color: #8a929b; }

.side .task { border: 1px solid #d7dde3; border-radius: 7px; padding: 7px 10px; margin-bottom: 7px; font-size: 12px; background: #fff; }
.side .task.late { border-color: #e4b1ab; background: #fffafa; }
.pass { border: 1px dashed #c4ccd4; border-radius: 7px; padding: 8px 12px;
        font-size: 11.5px; color: #566; background: #fbfcfd; }
.pass b { color: #22303f; }

/* ===== Модалки ===== */
.overlay { position: fixed; inset: 0; background: rgba(9,30,66,.54); z-index: 98;
           display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.overlay.open { display: flex; }
.modal { background: #fff; border-radius: 8px; width: min(640px, 94vw); max-height: 84vh;
         overflow: auto; box-shadow: 0 8px 28px rgba(9,30,66,.35); }
.m-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #e5e8eb;
       position: sticky; top: 0; background: #fff; z-index: 2; }
.m-h b { font-size: 15px; }
.m-h .sub { font-size: 12px; color: #8a929b; }
.m-x { margin-left: auto; border: none; background: none; font-size: 18px; color: #505258;
       cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.m-x:hover { background: #F0F1F2; }
.m-b { padding: 14px 18px; }
.m-f { padding: 12px 18px; border-top: 1px solid #e5e8eb; display: flex; gap: 8px; justify-content: flex-end;
       position: sticky; bottom: 0; background: #fff; }
.frow { margin-bottom: 10px; }
.frow label { display: block; font-size: 11.5px; color: #667; margin-bottom: 3px; }
.frow label .req { color: #c0392b; }
.frow input, .frow select, .frow textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px;
       border: 1px solid #c4ccd4; border-radius: 6px; background: #fff; }
.frow textarea { min-height: 56px; resize: vertical; }
.frow .hint { font-size: 11px; color: #8a929b; margin-top: 3px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mnote { font-size: 11.5px; color: #7a5a10; background: #fff8e6; border: 1px solid #ecd9a0;
         border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; }

@media (max-width: 1100px) {
  .casecols { grid-template-columns: 1fr; }
  .frow4 { grid-template-columns: 1fr 1fr; }
}

/* ===== Юрист A: канбан в стилистике Jira-трекера (00 рабочие агенты/Jira) ===== */
.jira { --t: #292A2E; --t-subtle: #505258; --t-subtlest: #6B6E76;
        --surface: #FFFFFF; --sunken: #F8F8F8; --brd: #0B120E24;
        --shadow: 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214F;
        font-family: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
        color: var(--t); }
.jira .k-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jira .k-title2 { font-size: 20px; font-weight: 653; }
.jira .k-btn { border: 1px solid var(--brd); border-radius: 6px; padding: 6px 12px; font-size: 13px;
               color: var(--t-subtle); background: var(--sunken); font-weight: 600; cursor: pointer; user-select: none; }
.jira .k-btn:hover { background: #EFEFEF; }
.jira .k-btn.primary { background: #1868DB; border-color: #1868DB; color: #fff; }
.jira .k-btn.primary:hover { background: #1558BC; }
.jira .k-board { display: flex; gap: 8px; align-items: flex-start; }
.jira .k-col { flex: 1; background: var(--sunken); border-radius: 8px; padding: 8px; min-width: 160px; }
.jira .k-col h5 { margin: 0 0 8px; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--t-subtlest); }
.jira .k-col h5 .cnt { font-weight: 400; }
.jira .k-card { display: block; text-decoration: none; color: inherit;
                background: var(--surface); border: 1px solid var(--brd); border-radius: 6px;
                box-shadow: var(--shadow); padding: 10px 10px 8px; margin-bottom: 8px; cursor: pointer; }
.jira .k-card:hover { border-color: #1868DB; }
.jira .k-sum { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
               font-size: 14px; line-height: 1.4; color: var(--t); margin-bottom: 6px; }
.jira .k-due { margin-bottom: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.jira .k-loz { display: inline-block; font-size: 11px; font-weight: 653; text-transform: uppercase;
               border-radius: 4px; padding: 2px 6px; line-height: 1.3; }
.jira .k-loz.green  { background: #EFFFD6; color: #4C6B1F; }
.jira .k-loz.red    { background: #FFECEB; color: #AE2E24; }
.jira .k-loz.yellow { background: #FFF5DB; color: #9E4C00; }
.jira .k-loz.blue   { background: #E9F2FE; color: #1558BC; }
.jira .k-loz.gray   { background: #0515240F; color: #505258; }
.jira .k-loz.epic   { background: #F3F0FF; color: #5E4DB2; text-transform: none; }
.jira .k-av { width: 24px; height: 24px; border-radius: 50%; background: #6554C0; color: #fff;
              font-size: 10px; font-weight: 600; line-height: 24px; text-align: center; flex: none; margin-left: auto; }
@media (max-width: 1100px) { .jira .k-board { flex-wrap: wrap; } .jira .k-col { min-width: 46%; } }
.jira .k-empty { font-size: 12px; color: var(--t-subtlest); padding: 4px; margin: 0; }
.jira .k-sum .k-key { font-size: 11.5px; color: var(--t-subtlest); }
.jira .k-sum .k-money { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* Эпики доски — «Наши требования» / «Требования к нам» (по стороне дела) */
.jira .k-lane { border: 1px solid var(--brd); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.jira .k-lane-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--sunken);
                  font-size: 13px; color: var(--t); cursor: pointer; user-select: none; }
.jira .k-lane-h .cnt { font-weight: 400; color: var(--t-subtlest); }
.jira .k-chev { color: var(--t-subtlest); font-size: 11px; width: 12px; flex: none; }
.jira .k-epic-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.jira .k-epic-dot.blue { background: #1558BC; }
.jira .k-epic-dot.red  { background: #AE2E24; }
.jira .k-lane .k-board { padding: 10px; }

/* Перенос задачи и отметка «Готово» — реальное управление работой; в макете
   канбан был статическим превью без этих элементов. Витрин у задач две, и
   вторая живёт вне доски: блок задач на карточке дела (app/templates/
   _task_controls.html) — поэтому у правил два адреса, а не две копии. */
.jira .k-actions,
.side .task .k-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px;
                    padding-top: 8px; border-top: 1px solid var(--brd); }
.jira .k-actions select,
.side .task .k-actions select { flex: 1; font: inherit; font-size: 11.5px; padding: 3px 6px;
                           border: 1px solid var(--brd); border-radius: 4px;
                           background: #fff; color: var(--t-subtle); }
.jira .k-actions .k-done,
.side .task .k-actions .k-done { border: 1px solid var(--brd); border-radius: 4px; padding: 3px 8px;
                            font-size: 11.5px; font-weight: 653; color: #1868DB;
                            background: #fff; cursor: pointer; }
.jira .k-actions .k-done:hover,
.side .task .k-actions .k-done:hover { background: #E9F2FE; }

/* Всплывающий «План на неделю» */
.wk-overlay { position: fixed; inset: 0; background: rgba(9,30,66,.54); z-index: 98;
              display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.wk-overlay.open { display: flex; }
.wk-modal { background: #fff; border-radius: 8px; width: min(760px, 94vw); max-height: 82vh;
            overflow: auto; box-shadow: 0 8px 28px rgba(9,30,66,.35);
            font-family: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; color: #292A2E; }
.wk-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #0B120E24;
        position: sticky; top: 0; background: #fff; }
.wk-h b { font-size: 16px; font-weight: 653; }
.wk-h .sub { font-size: 12px; color: #6B6E76; }
.wk-x { margin-left: auto; border: none; background: none; font-size: 18px; color: #505258;
        cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.wk-x:hover { background: #F0F1F2; }
.wk-gh { padding: 10px 18px 4px; font-size: 12px; font-weight: 653; text-transform: uppercase;
         letter-spacing: .03em; }
.wk-gh.red { color: #AE2E24; } .wk-gh.yellow { color: #9E4C00; } .wk-gh.gray { color: #6B6E76; }
.wk-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 18px; font-size: 13px;
          border-top: 1px solid #F0F1F2; flex-wrap: wrap; }
.wk-row .k-loz { flex: none; }
.wk-row .tt { font-weight: 600; }
.wk-row .ref { color: #6B6E76; font-size: 12px; }
.wk-row .go { margin-left: auto; color: #1558BC; font-size: 12px; text-decoration: none; white-space: nowrap; }

/* Окно события открывается поверх окна плана: план — .wk-overlay, модалки —
   .overlay. Правило стоит здесь, а не рядом с базовыми .overlay/.wk-overlay
   в начале файла («Модалки»), — иначе более поздние там же z-index:98 его
   переопределили бы обратно (каскад CSS решает по порядку в файле). */
.overlay{z-index:60}
.wk-overlay{z-index:50}

/* ===== Экран справочников: подвкладки, блок-схема пути дела, флаги ===== */
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.subtabs .st { font-size: 12.5px; padding: 5px 14px; border: 1px solid #c4ccd4; border-radius: 16px;
               background: #fff; color: #566; font-weight: 600; cursor: pointer; }
.subtabs .st.on { background: #2438C8; border-color: #2438C8; color: #fff; }
.dictblock { display: none; } .dictblock.on { display: block; }
h3.route-h { font-size: 13px; margin: 16px 0 6px; color: #22303f; }
h3.route-h .muted { font-weight: 400; font-size: 12px; }

/* Блок-схема пути дела, разрезанная поперёк на столбцы доски.
   Полоса = столбец: слева её название, справа два пути рядом. Сетка одна на
   все полосы и на шапку — 2fr к 1fr, — иначе А, Б и защита выйдут разной
   ширины, а колонки путей разъедутся между полосами. */
.bnd, .bnd-heads, .bnd-gap { display: grid; grid-template-columns: 104px 2fr 1fr; gap: 14px; }
.bnd-heads { padding: 0 12px 6px; align-items: end; }
.bnd-h { font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center;
         color: #22303f; }
.bnd { background: var(--zbg); border: 1px solid var(--zbd); border-left: 5px solid var(--zc);
       border-radius: 9px; padding: 12px; align-items: start; }
.bnd-gap { padding: 2px 12px; }
.bnd-rail { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.bnd-n { display: inline-flex; align-items: center; justify-content: center; width: 19px;
         height: 19px; border-radius: 5px; background: var(--zc); color: #fff;
         font-size: 11px; font-weight: 700; }
.bnd-name { font-size: 12px; font-weight: 700; color: var(--zc); line-height: 1.25; }
.bnd-sub { font-size: 10px; color: #8a929b; line-height: 1.3; }
/* Цвет полосы — язык экрана: он же метит стадии урегулирования в строке Г */
/* Полоса в один столбец — вкладка типов событий: путей там нет, есть таблица */
.bnd-solo { grid-template-columns: 104px 1fr; margin-bottom: 10px; }
.bnd-solo .btab { margin-bottom: 0; }
/* Справочник типов событий: пять табличек одной сетки. Своим классом, а не
   правкой .btab: .btab — общая таблица проекта (суммы дела, нормативные сроки,
   реестры), и фиксированная сетка сломала бы их колонки. */
.et-tab { table-layout: fixed; max-width: 900px; }
.zn-SIG { --zc: #7C8798; --zbg: #f3f5f8; --zbd: #dfe4ea; }
.zn-PRE { --zc: #B8830F; --zbg: #fdf7e9; --zbd: #efdfb8; }
.zn-SUD { --zc: #3E72B0; --zbg: #eef5fd; --zbd: #cfe0f2; }
.zn-EXE { --zc: #3F8F63; --zbg: #edf9f2; --zbd: #c7e6d5; }
.zn-FIN { --zc: #5B6674; --zbg: #e9edf1; --zbd: #d5dce3; }
/* «Общие — вне блоков»: столбца у них нет, поэтому и цвета столбца нет */
.zn-none { --zc: #8a929b; --zbg: #fafbfc; --zbd: #e3e8ed; }
.bs-noblock { border: 1.5px dashed #e0a6a0; background: #fdf3f2; color: #8a3b33;
              border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 16px; }
.bs-noblock b { color: #7a2f28; }
.bs-box { border: 1.5px solid #9db8d2; background: #eaf3ff; color: #1a3d66; border-radius: 7px;
          padding: 7px 10px; font-size: 12.5px; font-weight: 600; text-align: center; }
.bs-box small { display: block; font-weight: 400; color: #56708c; font-size: 10.5px; margin-top: 1px; }
.bs-box.pre   { background: #f4f6f8; border-color: #b9c2cb; color: #3a4149; }
.bs-box.pre small { color: #8a929b; }
.bs-box.money { background: #eafaf1; border-color: #7fc99a; color: #1e5631; }
.bs-box.done  { background: #e8ecef; border-color: #b9c2cb; color: #566; }
.bs-arr { text-align: center; color: #8a929b; font-size: 13px; line-height: 1.3; padding: 1px 0; }
.bs-arr i { font-style: normal; font-size: 10.5px; color: #9aa2ab; margin-left: 6px; }
.bs-fork { background: #fff8e6; border: 1.5px dashed #d9b64a; color: #7a5a10; border-radius: 7px;
           padding: 7px 10px; text-align: center; font-weight: 700; font-size: 12.5px; }
.bs-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.bs-blabel { text-align: center; font-size: 10.5px; color: #7a5a10; margin-bottom: 6px; line-height: 1.35; }
.bs-blabel b { display: block; color: #22303f; font-size: 12px; letter-spacing: .3px; }
.bs-opt { border: 1.5px dashed #c4ccd4; background: #fbfcfd; color: #566; border-radius: 7px;
          padding: 5px 8px; font-size: 11px; text-align: center; }
.bs-g { border: 1.5px dashed #b9a7d9; background: #f7f4fd; color: #4a3f66; border-radius: 8px;
        padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.6; }
.bs-g b { color: #3a2f56; }
.bs-g .bx { display: inline-block; border: 1px solid #b9a7d9; background: #fff; border-radius: 5px;
            padding: 1px 8px; font-size: 11.5px; font-weight: 600; margin: 0 2px; }
/* Стадии урегулирования лежат в разных столбцах доски, поэтому метятся
   поштучно тем же цветом, что полоса: переговоры досудебные, мировое — суд. */
.bs-g .bx.zb { border-color: var(--zc); background: var(--zbg); color: #3a3f4a; }
/* Узкий экран: полоса разворачивается сверху вниз — название, потом оба пути */
@media (max-width: 1000px) {
  .bnd, .bnd-heads, .bnd-gap { grid-template-columns: 1fr; }
  .bnd-rail { flex-direction: row; align-items: center; gap: 7px; }
}

/* Флаг-кнопка подтверждения срока — сервер меняет состояние, поэтому это <button>
   внутри формы, а не кликабельный <span>, как в прототипе; сбрасываем вид кнопки. */
.flag-btn { font: inherit; border: none; }

/* Карточка договора: кнопка-заглушка «План/факт по графику» и её пояснение
   (перенесено из инлайнового <style> прототипа screen-contract.html). */
.stub-note { display: none; font-size: 12px; color: #7a5a10; background: #fff8e6;
             border: 1px solid #ecd9a0; border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.stub-note.show { display: block; }
.btn.stub { border-style: dashed; color: #8a929b; }

/* ===== Экран директора (вариант D): полосы состояния и две стороны =====
   Перенесено из prototype/prototype-ui.html (блоки #dir-A и #dir-D). */
.band { border: 1px solid #d7dde3; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.band .bh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-weight: 700; font-size: 13px; }
.band .bh .n { margin-left: auto; font-size: 18px; }
.band.red  .bh { background: #fdf1f0; color: #8c2f27; }
.band.amber .bh { background: #fff8e6; color: #7a5a10; }
.band.green .bh { background: #eafaf1; color: #1e5631; }
.band ul { list-style: none; margin: 0; padding: 0; }
.band li { display: flex; gap: 10px; align-items: baseline; padding: 7px 12px; border-top: 1px solid #eef1f4; font-size: 12.5px; flex-wrap: wrap; }
.band li .who { font-weight: 700; min-width: 210px; }
.band li .sum { color: #8c2f27; font-weight: 700; }
.band li .why { color: #566; }
.band li .act { margin-left: auto; color: #2438C8; font-size: 12px; text-decoration: none; white-space: nowrap; }
/* Полосы одного цвета выстроены в общую строку грида, поэтому левая и правая
   полоса «критично»/«внимание»/«в норме» всегда одной высоты — по той стороне,
   где дел больше; равенство резиновое, а не по счётчику строк. */
.split2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
          grid-auto-flow: column; column-gap: 14px; row-gap: 0; align-items: stretch; }
.sidehead { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700;
            color: #22303f; padding: 2px 2px 8px; }
.sidehead .tot { margin-left: auto; font-size: 12px; color: #8a929b; font-weight: 400; }
.split2 .band li .who { min-width: 0; }
@media (max-width: 1100px) {
  .split2 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* Сверх макета: в прототипе кнопок на экране директора нет вовсе, а поручение
   давать откуда-то нужно — панель с кнопкой «+ Дать поручение». */
.dirtools { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* ===== Журнал изменений: «было → стало» =====
   Перенесено из блока <style> в prototype/screen-journal.html. */
.was { color: #8c2f27; text-decoration: line-through; }
.now2 { color: #1e5631; font-weight: 700; }

/* Схема пути: строка данных в коробке. Срок, основание и метка подтверждения
   приходят из справочника (app/dicts.py: stages_by_code), а не написаны в
   разметке — иначе подпись расходится с базой молча. */
.bs-box .s-term { display: block; font-weight: 400; font-size: 10.5px; color: #56708c; margin-top: 2px; }
.bs-box .s-term.none { color: #9aa2ab; }
.bs-box .s-term .no { color: #9E4C00; font-weight: 700; }
.bs-box .s-term .ok { color: #1e5631; font-weight: 700; }
.bs-box .s-note { display: block; font-weight: 400; font-size: 10.5px; color: #8a929b; margin-top: 1px; }
.bs-box .s-moved { display: block; font-weight: 700; font-size: 10px; color: #9E4C00; margin-top: 2px; }
.bs-box .fork-mark { float: right; color: #B8830F; }
/* Кликабельны не только коробки схемы, но и узкие плашки строки «Г» (макрос
   gbox) и имена в строке «На схеме нет» — у них класса .bs-box нет вовсе,
   поэтому курсор-рука ставится и голым классом, без .bs-box. Подсветка при
   наведении остаётся только у коробки — ниже, составным селектором. */
.st-edit { cursor: pointer; }
.bs-box.st-edit:hover { box-shadow: 0 0 0 2px rgba(36, 56, 200, .18); }
.bs-box.off { opacity: .55; }
.bs-box.gone { background: #fdf1f0; border-color: #e8b4b0; color: #AE2E24; }
/* Плашка строки «Г» (макрос gbox): то же приглушение скрытой записи, что и у
   коробки схемы, но у плашки нет класса .bs-box — у неё «bx zb zn-<блок>». */
.bx.off { opacity: .55; }
/* Пометка «нет в справочнике» — тот же класс, что у sbox, но плашка узкая:
   вместо отдельной блочной строки метка остаётся в общей строке текста. */
.bx .s-term.none { display: inline; font-size: 10px; color: #9aa2ab; margin-left: 3px; }