/* ==========================================================================
   drivers.css — вкладка [Драйверы ФС ПБ] + окно единой загрузки.
   Переиспользует переменные и .tag/.title-row/.marker-line из index.html.
   Все правила скоупятся под #driversView / .dr- / .up- чтобы не влиять на
   вкладки аналитики.
   ========================================================================== */

/* баннер периода отчёта (виден на всех вкладках) */
.period-banner {
  padding: 8px 40px; background: var(--lightgray); border-bottom: .5px solid var(--midgray);
  font-size: 12px; color: var(--body);
}
.period-banner b { color: var(--black); font-weight: 700; }
.period-banner .pb-none { color: var(--gray); font-style: italic; }

/* ---- вкладка драйверов ---- */
#driversView { display: none; }
#driversView h2 { font-size: 21px; font-weight: 300; margin: 0; line-height: 1.25; }
.dr-report { padding: 20px 40px 70px; }
.dr-report-head { margin-bottom: 24px; }
.dr-period { margin: 12px 0 4px 17px; font-size: 14px; color: var(--body); }
.dr-period b { font-weight: 700; color: var(--black); }
.dr-sub { color: var(--gray); font-size: 12px; font-style: italic; margin: 6px 0 0 17px; max-width: 840px; line-height: 1.5; }
.dr-sec-head { margin: 42px 0 14px; }
.dr-sec-head .tag { margin-bottom: 10px; }
.dr-sec-head .dr-sub { margin-top: 8px; }

.dr-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
.dr-card { padding: 18px 16px; border-top: 3px solid var(--red); }
.dr-c1 { background: var(--rose); } .dr-c2 { background: var(--sage); } .dr-c3 { background: var(--mist); }
.dr-c4 { background: var(--peach); } .dr-c5 { background: var(--sand); }
.dr-card-num { font-size: 32px; font-weight: 500; line-height: 1; color: #d40000; letter-spacing: -1px; }
.dr-card-lbl { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #2a2a2a; margin-top: 10px; }
.dr-card-sub { font-size: 11px; color: #444; margin-top: 4px; }

.dr-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.dr-table th { text-align: left; font-weight: 700; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--gray); padding: 8px 10px; border-bottom: 1.5px solid var(--midgray); white-space: nowrap; }
.dr-table td { padding: 9px 10px; border-bottom: .5px solid var(--lightgray); vertical-align: top; color: var(--body); }
.dr-table tbody tr:hover { background: #fafafa; }
.dr-name { font-weight: 400; color: var(--black); }
.dr-val { white-space: nowrap; text-align: right; }
.dr-base { font-size: 11px; color: var(--gray); }

.dr-goal { background: var(--good-bg); color: var(--good); }
.dr-ok { background: #eef4f0; color: var(--good); }
.dr-bad { background: var(--bad-bg); color: var(--bad); }
.dr-na { color: var(--gray); }
.dr-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dr-pill.dr-goal { background: var(--good); color: #fff; }
.dr-pill.dr-ok { background: var(--good-bg); color: var(--good); }
.dr-pill.dr-bad { background: var(--bad); color: #fff; }
.dr-pill.dr-na { background: var(--lightgray); color: var(--gray); }

.dr-chart-wrap { margin-top: 6px; overflow-x: auto; }
.dr-chart { width: 100%; max-width: 780px; height: auto; font-family: var(--font); }
.dr-grid { stroke: var(--lightgray); stroke-width: 1; }
.dr-norm { stroke: var(--gray); stroke-width: 1; stroke-dasharray: 4 3; }
.dr-axis { font-size: 10px; fill: var(--gray); }
.dr-empty { padding: 40px; text-align: center; color: var(--gray); font-style: italic; }

/* ---- окно единой загрузки ---- */
.up-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50;
  display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 30px 16px;
}
.up-overlay.open { display: flex; }
.up-modal {
  background: var(--white); color: var(--black); width: 100%; max-width: 940px;
  border-top: 4px solid var(--red); box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.up-head { padding: 22px 26px 0; }
.up-head .tag { margin-bottom: 8px; }
.up-head h2 { font-size: 22px; font-weight: 300; margin: 0 0 4px; }
.up-head .up-sub { color: var(--gray); font-size: 12px; font-style: italic; margin-bottom: 8px; }
.up-body { padding: 10px 26px 20px; }
.up-close { position: absolute; top: 16px; right: 22px; border: none; background: none; font-size: 22px; color: var(--gray); cursor: pointer; padding: 4px 8px; }
.up-close:hover { color: var(--red); background: none; }
.up-modal { position: relative; }

.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 12px 0; }
.up-file { border: 1px dashed var(--midgray); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.up-file.req { border-color: var(--red); }
.up-file label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray); }
.up-file .up-fn { font-size: 11px; color: var(--good); font-style: italic; min-height: 14px; }
.up-file input[type=file] { font-size: 11px; }
.up-period { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0; padding: 12px; background: var(--lightgray); }
.up-period .field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.up-period input { padding: 7px 9px; border: 1px solid var(--midgray); font-family: var(--font); font-size: 13px; background: #fff; color: var(--black); }
.up-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--midgray); }
.up-status { font-size: 12px; color: var(--gray); font-style: italic; }
.up-status.err { color: var(--bad); font-style: normal; }

/* редактируемые таблицы правок */
.up-edit { margin-top: 16px; }
.up-edit h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 6px; }
.up-edit .up-hint { font-size: 11px; color: var(--gray); font-style: italic; margin-bottom: 8px; }
.up-scroll { max-height: 260px; overflow-y: auto; border: 1px solid var(--midgray); }
.up-etable { width: 100%; border-collapse: collapse; font-size: 12px; }
.up-etable th { position: sticky; top: 0; background: var(--lightgray); text-align: left; padding: 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--gray); border-bottom: 1px solid var(--midgray); }
.up-etable td { padding: 5px 8px; border-bottom: .5px solid var(--lightgray); }
.up-etable input[type=text] { width: 60px; padding: 3px 5px; border: 1px solid var(--midgray); font-family: var(--font); background: #fff; color: var(--black); }
.up-etable select { padding: 3px 5px; border: 1px solid var(--midgray); font-family: var(--font); background: #fff; color: var(--black); }
.up-search { margin: 6px 0; padding: 6px 9px; border: 1px solid var(--midgray); font-family: var(--font); font-size: 12px; width: 100%; background: #fff; color: var(--black); }
.up-count { font-size: 11px; color: var(--gray); }

.up-refsec { padding: 14px 0; border-bottom: .5px solid var(--midgray); }
.up-refsec:last-child { border-bottom: none; }
.up-refsec h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.up-warn {
  margin: 12px 0; padding: 10px 12px; background: var(--warn-bg); border-left: 3px solid var(--red);
  font-size: 12px; color: var(--body); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.up-mini {
  padding: 5px 10px; font-size: 11px; letter-spacing: .3px; text-transform: none;
  border: 1px solid var(--red); background: var(--white); color: var(--red);
}
.up-mini:hover { background: var(--red); color: #fff; }

/* ---- переключатель режима внутри вкладки вертикали ---- */
.mode-switch { display: flex; gap: 0; margin: 12px 0 0; }
.mode-btn {
  padding: 7px 16px; border: 1px solid var(--midgray); background: var(--white); color: var(--gray);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
.mode-btn + .mode-btn { border-left: none; }
.mode-btn:hover { color: var(--black); border-color: var(--black); background: var(--white); }
.mode-btn.active { background: var(--black); border-color: var(--black); color: var(--white); }
.mode-btn.active:hover { background: var(--black); color: var(--white); }

/* ---- шапка: заголовок выровнен по строке кнопок, под кнопками — учётка ---- */
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 0; }
.head-row .tag-title { margin-bottom: 0; font-size: 26px; letter-spacing: 3px; line-height: 38px; }
.head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.head-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-height: 38px; }
/* вторая строка шапки: статус операций */
.head-secondline { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 2px; }
.head-status { font-size: 11px; color: var(--gray); font-style: italic; max-width: 70%; }
.head-status:empty { display: none; }
.icon-btn { padding: 8px 12px; font-size: 16px; line-height: 1; letter-spacing: 2px; border-color: var(--midgray); color: var(--gray); }
.icon-btn:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.head-more { position: relative; }
.head-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: none; min-width: 210px;
  background: var(--white); border: 1px solid var(--midgray); box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.head-menu.open { display: block; }
.head-menu button {
  display: block; width: 100%; text-align: left; border: none; background: var(--white); color: var(--black);
  padding: 11px 15px; font-size: 12px; letter-spacing: .3px; text-transform: none; font-weight: 400;
}
.head-menu button:hover { background: var(--red); color: #fff; }

/* ---- авторизация ---- */
/* Непрозрачный фон: дашборд под формой входа не просматривается. */
.login-overlay { align-items: center; background: var(--white); backdrop-filter: none; }
.login-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--rose) 0%, transparent 55%), linear-gradient(20deg, var(--mist) 0%, transparent 45%);
  opacity: .5; pointer-events: none;
}
.login-modal { max-width: 420px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.login-brand { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: 1px; }
/* два способа входа */
.login-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.btn-bitrix, .btn-agm { width: 100%; height: 46px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; }
/* Bitrix24 — фирменный синий */
.btn-bitrix {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #0b66c3; border: 1px solid #0b66c3; color: #fff; border-radius: 3px;
}
.btn-bitrix:hover { background: #0a5aad; border-color: #0a5aad; color: #fff; }
.bx-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 5px;
  background: #fff; color: #0b66c3; font-size: 10px; font-weight: 800; letter-spacing: 0; border-radius: 2px; }
/* AGM — фирменный чёрно-белый */
.btn-agm { background: var(--white); border: 1px solid var(--black); color: var(--black); border-radius: 0; }
.btn-agm:hover { background: var(--black); color: var(--white); }
.btn-agm.is-open { background: var(--black); color: var(--white); }
.login-pw { margin-top: 16px; padding-top: 16px; border-top: .5px solid var(--midgray); }
.login-hint { margin-top: 10px; font-size: 12px; color: var(--gray); }
.login-hint a { color: var(--red); text-decoration: none; border-bottom: 1px solid var(--red); }
.login-hint a:hover { color: var(--black); border-color: var(--black); }
.login-field { margin: 12px 0; }
.login-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; }
.login-field input, .login-field select { width: 100%; padding: 9px 11px; border: 1px solid var(--midgray); font-family: var(--font); font-size: 14px; background: #fff; color: var(--black); }
.auth-bar { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; }
.auth-user { color: var(--gray); font-style: italic; }
.auth-link { border: none; background: none; color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; padding: 2px 4px; }
.auth-link:hover { text-decoration: underline; background: none; color: var(--red); }
.auth-mini { padding: 3px 8px; font-size: 11px; letter-spacing: .3px; text-transform: none; border: 1px solid var(--midgray); background: #fff; color: var(--body); }
.auth-mini:hover { border-color: var(--red); color: var(--red); background: #fff; }
.auth-danger { border-color: #e0b4ae; color: var(--bad); }
.auth-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.auth-chk { font-size: 12px; color: var(--body); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#usersTable select { padding: 3px 6px; border: 1px solid var(--midgray); font-family: var(--font); background: #fff; color: var(--black); }

/* ==================== вкладка «Свод для КС» ==================== */
#ksView { padding-bottom: 40px; }
.ks-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ks-toolbar { position: sticky; top: 0; z-index: 5; }
.ks-table { min-width: 1180px; table-layout: fixed; }
.ks-table th:nth-child(1), .ks-table td:nth-child(1) { width: 15%; }
.ks-table th:nth-child(2), .ks-table td:nth-child(2) { width: 13%; }
.ks-table th:nth-child(3), .ks-table td:nth-child(3) { width: 10%; }
.ks-table th:nth-child(4), .ks-table td:nth-child(4),
.ks-table th:nth-child(5), .ks-table td:nth-child(5) { width: 9%; }
.ks-table th:nth-child(6), .ks-table td:nth-child(6) { width: 28%; }
.ks-table th:nth-child(7), .ks-table td:nth-child(7) { width: 3%; }
.ks-table th:nth-child(8), .ks-table td:nth-child(8) { width: 13%; }

/* иконка перехода в задачу */
.ks-link { text-align: center; }
.ext-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  color: var(--gray); border: 1px solid transparent; }
.ext-link:hover { color: var(--red); border-color: var(--midgray); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* панель фильтров: два ряда, вид таблицы — в правом верхнем углу */
.ks-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
.ks-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; width: 100%; }
.ks-row-main .ks-search { flex: 1 1 220px; }
.ks-row-main .ks-density-field { margin-left: auto; }
.ks-row-quick { align-items: center; gap: 8px 12px; padding-top: 10px; border-top: .5px solid var(--midgray); }
.ks-quick-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
.ks-row-quick #ksReset { margin-left: auto; }

/* карточки грейдов */
.ks-big { grid-column: 1; grid-row: 1; position: relative; }
.ks-legend { font-size: 11px; color: #444; }
.ks-legend b { color: #b3271c; }
.ks-gcard { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px 18px; }
.ks-gtitle { font-size: 13px; font-weight: 700; color: #2a2a2a; letter-spacing: .3px; }
.ks-gcount { font-size: 11px; color: #555; margin-top: 2px; }
.ks-gmetrics { display: flex; gap: 20px; margin-top: 14px; }
.ks-gmetric { flex: 1; }
.ks-gnum { font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.5px; color: #b3271c; }
.ks-gnum.ks-good { color: #1f6b45; }
.ks-gnum.ks-bad { color: #b3271c; }
.ks-gnum.ks-na { color: #888; }
.ks-glabel { font-size: 10px; color: #2a2a2a; font-weight: 700; margin-top: 5px; }
.ks-gbase { font-size: 10px; color: #666; font-style: italic; margin-top: 1px; }

/* иконка справки на большой карточке */
.ks-help {
  position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; line-height: 17px; text-align: center;
  border: 1px solid #b3271c; color: #b3271c; font-size: 11px; font-weight: 700; cursor: help; border-radius: 50%; background: rgba(255,255,255,.6);
}
.ks-help-tip {
  display: none; position: absolute; top: calc(100% + 6px); left: auto; right: 0; z-index: 40; width: 330px;
  background: var(--white); border: 1px solid var(--midgray); box-shadow: 0 10px 30px rgba(0,0,0,.16);
  padding: 12px 14px; text-align: left; cursor: default; font-weight: 400;
}
.ks-help:hover .ks-help-tip, .ks-help:focus .ks-help-tip { display: block; }
.ks-help-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray); margin-bottom: 8px; }
.ks-help-row { font-size: 12px; color: var(--body); line-height: 1.5; margin-bottom: 7px; }
.ks-help-row .ks-flag { margin: 0 6px 0 0; }
.ks-help-row b { color: var(--black); }
.ks-help-note { font-size: 11px; color: var(--gray); font-style: italic; line-height: 1.45; border-top: .5px solid var(--lightgray); padding-top: 7px; margin-top: 8px; }

/* комментарий специалиста — газетная цитата */
/* комментарий специалиста: текст, следующей строкой — автор и дата */
.ks-quote { margin: 0; padding: 0; display: block; }
.ks-quote-text { font-size: 12px; line-height: 1.45; color: var(--black); white-space: pre-wrap; margin: 0; }
.ks-quote-by { margin: 3px 0 0; font-size: 11px; color: var(--gray); line-height: 1.3; }

/* строка объекта (итог) */
.ks-grow > td { background: var(--lightgray); border-top: 1.5px solid var(--midgray); vertical-align: top; }
.ks-grow.ks-problem > td { background: var(--bad-bg); }
.ks-client { font-weight: 700; color: var(--black); }
.ks-object { color: var(--black); }
.ks-meta { font-size: 10px; color: var(--gray); font-weight: 400; font-style: italic; margin-top: 3px; }
.ks-meta a { color: var(--black); text-decoration: none; border-bottom: 1px solid var(--red); }
.ks-meta a:hover { color: var(--red); }
.ks-flag { display: inline-block; margin-left: 8px; padding: 2px 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--bad); color: #fff; cursor: help; }
.ks-flag-crit { background: #8b1a10; }
.ks-flag-risk { background: var(--bad); }
.ks-flag-under { background: #8a6d00; }
.ks-grow.ks-under > td { background: #faf3dd; }
.ks-total-label { font-weight: 700; color: var(--black); }
.ks-vcount { font-size: 11px; color: var(--gray); font-style: italic; }

/* строка направления */
.ks-vrow > td { border-bottom: .5px solid var(--lightgray); font-size: 12px; vertical-align: top; }
.ks-vname { color: var(--body); font-weight: 600; }
.ks-comment { word-break: break-word; }
.ks-action { }

/* форма комментария */
.ks-ask { padding: 4px 10px; font-size: 10px; letter-spacing: .3px; text-transform: none; border-color: var(--midgray); color: var(--gray); background: var(--white); white-space: nowrap; }
.ks-ask:hover { border-color: var(--red); color: var(--red); background: var(--white); }
.ks-form { margin-top: 8px; padding: 10px; background: var(--lightgray); border-left: 3px solid var(--red); }
.ks-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--midgray); font-family: var(--font); font-size: 12px; background: #fff; color: var(--black); resize: vertical; }
.ks-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ks-form-actions button { padding: 6px 12px; font-size: 10px; }
.ks-status { font-size: 11px; color: var(--good); font-style: italic; margin-top: 6px; }
.ks-status.err { color: var(--bad); font-style: normal; }
.ks-status.warn { color: #8a6d00; font-style: normal; }

/* --- режимы плотности --- */
.ks-comfy tbody td { padding: 12px 12px; }
.ks-dense tbody td { padding: 5px 8px; font-size: 11px; }
.ks-dense .ks-quote { padding-left: 8px; }
.ks-dense .ks-quote-text { max-height: 32px; overflow: hidden; font-size: 11px; line-height: 1.3; }
.ks-dense .ks-quote:hover .ks-quote-text { max-height: 260px; overflow: auto; }
.ks-dense .ks-quote-by { margin-top: 2px; font-size: 10px; }
.ks-dense .pct-val { font-size: 12px; }
.ks-dense .pct-sub { font-size: 9px; margin-top: 0; }
.ks-dense .ks-meta { margin-top: 1px; font-size: 9px; }
.ks-dense .ks-ask { padding: 2px 7px; font-size: 9px; }
.ks-dense .ks-grow > td { padding-top: 7px; padding-bottom: 7px; }
.ks-density { margin: 0; }
.ks-density .mode-btn { padding: 6px 12px; font-size: 10px; }

/* ==================== режим «Проекты по месяцам» ====================
   Содержимое рисует DRIVERS_UI.renderProjectHistory — та же таблица, что в
   отчёте драйверов. Там она лежит внутри .dr-report с его полями, здесь
   обёртки нет, поэтому поля страницы задаём самому контейнеру. */
#phistView { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 60px; }
#phistView .dr-sec-head { margin-top: 24px; }
#phistView .dr-sub { margin-left: 17px; }

/* ==================== вкладка «Гипотезы» ==================== */
#hypView { padding-bottom: 40px; }
.standard-box { margin: 16px 40px 8px; padding: 12px 16px; background: var(--lightgray); border-left: 3px solid var(--red); font-size: 12.5px; color: var(--body); line-height: 1.5; }
.standard-box b { color: var(--black); font-weight: 700; }
.tmpl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 24px; margin: 8px 0 10px; padding: 10px 14px; background: var(--white); border: .5px solid var(--midgray); font-size: 12px; line-height: 1.55; }
/* сетка «Гипотез»: большая карточка + 3 пары «показатель ↔ противоположность» */
.hyp-grid { padding-bottom: 14px; grid-template-columns: repeat(4, 1fr); }
.stat-sub { margin-top: 10px; font-size: 12px; color: #444; font-weight: 400; }
.hyp-standard { margin: 4px 40px 14px; }
.hyp-standard summary { cursor: pointer; font-size: 12.5px; color: var(--body); list-style: none; }
.hyp-standard summary::-webkit-details-marker { display: none; }
.hyp-standard summary::before { content: "▸ "; color: var(--red); font-weight: 700; }
.hyp-standard[open] summary::before { content: "▾ "; }
.hyp-standard summary:hover { color: var(--black); }
.risk-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 40px 18px; align-items: center; }
.rb-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }
.risk-chip { border: 1px solid var(--midgray); background: var(--white); padding: 6px 12px; font-size: 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; color: var(--body); }
.risk-chip .n { font-weight: 700; color: var(--red); }
.risk-chip:hover { border-color: var(--black); }
.risk-chip.active { background: var(--black); border-color: var(--black); color: var(--white); }
.risk-chip.active .n { color: var(--white); }
.risk-chip.attention { border-color: var(--red); }
.risk-chip.zero { opacity: .4; }
.hyp-toolbar { position: sticky; top: 0; z-index: 5; }
.hyp-table { min-width: 1100px; }
.flag { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.flag-red { background: var(--bad); } .flag-amber { background: #8a6d00; } .flag-none { background: var(--midgray); opacity: .5; }
.cat-badge { display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cat-1 { background: var(--good-bg); color: var(--good); border: 1px solid var(--good); }
.cat-2 { background: #f5edcf; color: #8a6d00; border: 1px solid #8a6d00; }
.cat-3 { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.cat-sub { display: block; margin-top: 5px; font-size: 10px; color: var(--gray); font-style: italic; }
.dots { margin-top: 7px; display: flex; gap: 3px; }
.dot { width: 15px; height: 15px; border: 1px solid var(--midgray); font-size: 9px; line-height: 13px; text-align: center; color: var(--midgray); font-weight: 700; }
.dot.on { background: var(--good); border-color: var(--good); color: #fff; }
.project-cell { font-weight: 400; color: var(--black); max-width: 200px; }
.comment-cell { max-width: 460px; }
.comment-box { white-space: pre-wrap; line-height: 1.45; max-height: 150px; overflow: auto; font-size: 12px; }
.metric-date { font-size: 10px; color: var(--gray); font-style: italic; }
.hyp-sys { font-size: 11px; color: var(--bad); max-width: 220px; }
.systemic { padding: 24px 40px 10px; }
.systemic h2 { font-size: 16px; font-weight: 300; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.systemic h2::before { content: ""; width: 3px; height: 20px; background: var(--red); display: inline-block; }
.systemic .sys-sub { color: var(--gray); font-size: 12px; font-style: italic; margin: 0 0 16px 13px; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sys-card { border: .5px solid var(--midgray); border-left: 3px solid var(--red); padding: 14px 16px; background: var(--white); }
.sys-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sys-name { font-weight: 700; color: var(--black); font-size: 13px; }
.sys-share { font-size: 22px; font-weight: 500; color: var(--red); line-height: 1; white-space: nowrap; }
.sys-count { font-size: 11px; color: var(--gray); font-weight: 400; }
.sys-bar { height: 6px; background: var(--lightgray); margin: 6px 0 10px; }
.sys-bar i { display: block; height: 6px; background: var(--red); }
.sys-projects { font-size: 12px; color: var(--body); line-height: 1.5; }
.sys-projects b { color: var(--black); font-weight: 600; }
.lp-group { border: .5px solid var(--midgray); border-left: 3px solid var(--red); margin-bottom: 14px; }
.lp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--lightgray); }
.lp-title { font-weight: 700; color: var(--black); font-size: 14px; }
.lp-meta { font-size: 12px; color: var(--gray); }
.lp-row { display: grid; grid-template-columns: 1.4fr .9fr 1.4fr 1.6fr; gap: 12px; padding: 9px 16px; border-top: .5px solid var(--midgray); font-size: 12px; align-items: start; }
.lp-proj { font-weight: 600; color: var(--black); }
.lp-lead.good { color: var(--good); font-weight: 700; } .lp-lead.bad { color: var(--bad); font-weight: 700; }
.lp-block { color: var(--bad); } .lp-act { color: var(--body); }
.lp-colh { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); border-top: none; }
button.ghost { border-color: var(--midgray); color: var(--gray); }
button.ghost:hover { background: var(--gray); border-color: var(--gray); color: var(--white); }

@media (max-width: 900px) {
  #driversView .dr-cards { grid-template-columns: repeat(2, 1fr); }
  .dr-report { padding: 16px 16px 60px; }
  .up-grid { grid-template-columns: 1fr; }
  .tmpl { grid-template-columns: 1fr; }
  .lp-row { grid-template-columns: 1fr; }
}

/* ---- дополнения: доли в таблицах, однострочный подзаголовок, недельная динамика ---- */
/* мелкая подпись под значением: «49/113», «+2.1 п.п.» */
#driversView .dr-frac {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--gray);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* источник данных — одной строкой */
#driversView .dr-sub-one {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  #driversView .dr-sub-one { white-space: normal; }
}
/* динамика внутри периода */
#driversView .dr-table-weekly td { vertical-align: top; }
#driversView .dr-table-weekly td:last-child,
#driversView .dr-table-weekly th:last-child { border-left: 1px solid var(--midgray); }

/* ---- панель отчёта: фильтр месяца (кнопки — в шапке страницы) ---- */
.dr-toolbar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px 40px 0;
}
.dr-tb-field { display: flex; flex-direction: column; gap: 4px; }
.dr-tb-field > span {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray);
}
.dr-tb-field select {
  min-width: 200px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--midgray); background: #fff; color: var(--black);
}
.dr-tb-status { font-size: 12px; color: var(--gray); padding-bottom: 8px; }
.dr-tb-status.err { color: var(--bad); }

/* ---- предварительные комментарии ---- */
#driversView .dr-comment {
  font-size: 11px; line-height: 1.5; color: #333;
  min-width: 260px; max-width: 460px; white-space: normal;
}
#driversView .dr-comment-note {
  font-size: 10px; line-height: 1.5; color: var(--gray);
  font-style: italic; margin: 8px 0 0;
}
@media (max-width: 900px) {
  .dr-toolbar { padding: 16px 20px 0; }
  #driversView .dr-comment { max-width: none; }
}

/* ---- динамика по вертикалям: сетка графиков ---- */
#driversView .dr-vdyn {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px;
  margin-bottom: 8px;
}
#driversView .dr-vdyn-item { min-width: 0; }
#driversView .dr-vdyn-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
#driversView .dr-vdyn-head b { font-size: 13px; font-weight: 700; color: var(--black); }
#driversView .dr-vdyn-delta { font-size: 10px; color: var(--gray); white-space: nowrap; }
#driversView .dr-vdyn .dr-chart-wrap { margin-top: 6px; }

/* ---- ТОП-10 по вертикалям: вкладки ---- */
#driversView .dr-vtabs, #phistView .dr-vtabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--midgray); margin-bottom: 2px;
}
#driversView .dr-vtab, #phistView .dr-vtab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--gray);
  padding: 8px 16px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: baseline; gap: 6px;
  transition: color .15s, border-color .15s;
}
#driversView .dr-vtab:hover, #phistView .dr-vtab:hover { color: var(--black); }
#driversView .dr-vtab.is-active, #phistView .dr-vtab.is-active {
  color: var(--black); font-weight: 700; border-bottom-color: var(--red);
}
#driversView .dr-vtab:focus-visible, #phistView .dr-vtab:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
#driversView .dr-vtab-n, #phistView .dr-vtab-n {
  font-size: 10px; font-weight: 400; color: var(--gray);
  background: var(--lightgray); padding: 1px 5px; border-radius: 8px;
}
#driversView .dr-vtab.is-active .dr-vtab-n, #phistView .dr-vtab.is-active .dr-vtab-n { background: var(--rose); color: var(--red); }
#driversView .dr-vtop-pane[hidden] { display: none; }
#driversView .dr-vtop-title { display: none; }   /* на экране роль заголовка — активная вкладка */

@media (max-width: 1100px) {
  #driversView .dr-vdyn { grid-template-columns: 1fr; }
}
@media print {
  #driversView .dr-vdyn { grid-template-columns: repeat(2, 1fr); }
  #driversView .dr-vdyn-item { page-break-inside: avoid; }
  /* в PDF показываем все вертикали, а не только открытую вкладку */
  #driversView .dr-vtabs, #phistView .dr-vtabs { display: none; }
  #driversView .dr-vtop-pane[hidden] { display: block !important; }
  #driversView .dr-vtop-pane { margin-bottom: 22px; page-break-inside: avoid; }
  #driversView .dr-vtop-title {
    display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--black);
  }
}

/* ---- разделитель крупных частей отчёта ---- */
#driversView .dr-part {
  display: flex; align-items: flex-start; gap: 18px;
  margin: 54px 0 26px; padding-top: 22px;
  border-top: 2px solid var(--black);
}
#driversView .dr-part:first-of-type { margin-top: 38px; }
#driversView .dr-part-num {
  font-size: 40px; line-height: .9; font-weight: 300;
  color: var(--red); flex: none; letter-spacing: -.02em;
}
#driversView .dr-part-body { min-width: 0; padding-top: 2px; }
#driversView .dr-part h2 {
  margin: 0 0 6px; font-size: 24px; font-weight: 400;
  line-height: 1.15; color: var(--black);
}
#driversView .dr-part-sub {
  font-size: 12px; line-height: 1.5; color: var(--gray); max-width: 78ch;
}
/* первый заголовок внутри части не должен добавлять лишний отступ */
#driversView .dr-part + .dr-sec-head { margin-top: 0; }

@media (max-width: 700px) {
  #driversView .dr-part { gap: 12px; margin: 38px 0 20px; }
  #driversView .dr-part-num { font-size: 30px; }
  #driversView .dr-part h2 { font-size: 19px; }
}
@media print {
  /* часть начинается с новой страницы, заголовок не отрывается от блока */
  #driversView .dr-part { page-break-before: always; page-break-after: avoid; margin-top: 0; }
  #driversView .dr-part:first-of-type { page-break-before: auto; }
}

/* ---- часть 03: показатели проектов из месяца в месяц ---- */
#driversView .dr-phtop, #phistView .dr-phtop { margin-top: 4px; }

/* панель фильтров */
#driversView .dr-ph-filters, #phistView .dr-ph-filters {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
  margin: 12px 0 14px;
}
#driversView .dr-ph-f, #phistView .dr-ph-f { display: flex; flex-direction: column; gap: 3px; }
#driversView .dr-ph-f > span, #phistView .dr-ph-f > span {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray);
}
#driversView .dr-ph-f select, #phistView .dr-ph-f select ,
#driversView .dr-ph-f input[type="search"], #phistView .dr-ph-f input[type="search"] {
  height: 30px; padding: 0 9px; border: 1px solid var(--midgray); background: #fff;
  font-family: var(--font); font-size: 13px; color: var(--black); min-width: 190px;
}
#driversView .dr-ph-f select:hover, #phistView .dr-ph-f select:hover { border-color: var(--black); }
#driversView .dr-ph-f input[type="search"]:focus, #phistView .dr-ph-f input[type="search"]:focus ,
#driversView .dr-ph-f select:focus, #phistView .dr-ph-f select:focus { outline: none; border-color: var(--black); }
#driversView .dr-ph-f-chk, #phistView .dr-ph-f-chk {
  flex-direction: row; align-items: center; gap: 7px; height: 30px;
}
#driversView .dr-ph-f-chk span, #phistView .dr-ph-f-chk span {
  font-size: 12px; color: var(--black); text-transform: none; letter-spacing: 0; font-weight: 400;
}
#driversView .dr-ph-shown, #phistView .dr-ph-shown {
  margin-left: auto; align-self: flex-end; padding-bottom: 7px;
  font-size: 11px; color: var(--gray); font-style: italic;
}

/* таблица */
#driversView .dr-ph-table, #phistView .dr-ph-table { font-variant-numeric: tabular-nums; }
#driversView .dr-ph-table td, #phistView .dr-ph-table td { white-space: nowrap; vertical-align: top; }
#driversView .dr-ph-table th:nth-child(n+3), #phistView .dr-ph-table th:nth-child(n+3) ,
#driversView .dr-ph-table td:nth-child(n+3), #phistView .dr-ph-table td:nth-child(n+3) { text-align: right; }
#driversView .dr-ph-table thead th, #phistView .dr-ph-table thead th { position: sticky; top: 0; z-index: 2; background: var(--black); }

/* строка-заголовок застройщика */
#driversView tr.dr-ph-group td, #phistView tr.dr-ph-group td {
  background: var(--lightgray); border-bottom: 1px solid var(--midgray);
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--black); padding-top: 9px; padding-bottom: 9px;
}
#driversView .dr-ph-count, #phistView .dr-ph-count {
  margin-left: 8px; padding: 1px 6px; background: #fff; color: var(--gray);
  font-size: 10px; font-weight: 700;
}
/* проект внутри группы — с отступом */
#driversView .dr-ph-proj, #phistView .dr-ph-proj { padding-left: 22px !important; white-space: normal; min-width: 200px; }

#driversView .dr-ph-none, #phistView .dr-ph-none { color: var(--midgray); }
/* изменение к предыдущему месяцу */
#driversView .dr-ph-d, #phistView .dr-ph-d {
  display: block; margin-top: 1px; font-size: 9px; font-weight: 400; line-height: 1.1;
}
#driversView .dr-ph-d.up, #phistView .dr-ph-d.up { color: var(--good); }
#driversView .dr-ph-d.down, #phistView .dr-ph-d.down { color: var(--bad); }

#driversView .dr-ph-new, #phistView .dr-ph-new ,
#driversView .dr-ph-dyn, #phistView .dr-ph-dyn ,
#driversView .dr-ph-warn, #phistView .dr-ph-warn {
  display: inline-block; margin-left: 5px; padding: 1px 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; background: var(--lightgray); color: var(--gray);
}
#driversView .dr-ph-dyn, #phistView .dr-ph-dyn { background: var(--mist); color: #3a6ea5; }
#driversView .dr-ph-warn, #phistView .dr-ph-warn { background: var(--bad-bg); color: var(--bad); }

@media print {
  #driversView .dr-ph-filters, #phistView .dr-ph-filters { display: none; }
  #driversView .dr-ph-table thead th, #phistView .dr-ph-table thead th { position: static; }
  #driversView .dr-ph-pane[hidden], #phistView .dr-ph-pane[hidden] { display: block !important; }
}

/* пояснение под компактным видом промежуточного среза */
#driversView .dr-slice-note {
  margin: 14px 40px 40px; padding: 12px 14px;
  background: var(--lightgray); border-left: 3px solid var(--midgray);
  font-size: 12px; line-height: 1.5; color: #555;
}
@media (max-width: 900px) { #driversView .dr-slice-note { margin: 14px 20px 30px; } }