* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #1f2933;
    background: #f4f6f8;
    font-size: 14px;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 18px 0 12px; }
h2 { font-size: 16px; margin: 22px 0 10px; color: #334155; }

.topbar {
    background: #0f172a; color: #fff; padding: 12px 0;
}
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 24px;
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: #cbd5e1; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.btn-add { background: #2563eb; color: #fff !important; padding: 6px 12px; border-radius: 6px; }
.btn-add:hover { background: #1d4ed8; }

main { max-width: 1200px; margin: 0 auto; padding: 18px 24px 60px; }
main.wide { max-width: 1700px; }
main.mapfull { max-width: 100%; padding-bottom: 14px; }

/* Карточки сводки */
.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 18px; min-width: 140px; flex: 1;
    border-left: 4px solid #94a3b8;
}
.card-num { font-size: 28px; font-weight: 700; }
.card-lbl { color: #64748b; font-size: 13px; margin-top: 2px; }
/* карточка-ссылка: ведёт в отфильтрованный список */
a.card { display: block; color: inherit; text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease; }
a.card:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(15, 23, 42, .10); transform: translateY(-2px); }
.card.onair { border-left-color: #16a34a; }
.card.inwork { border-left-color: #2563eb; }
.card.notstarted { border-left-color: #94a3b8; }
.card.delayed { border-left-color: #dc2626; }

/* Таблицы */
table.grid { width: 100%; border-collapse: collapse; background: #fff;
    /* clip вместо hidden: углы так же скруглены, но таблица не становится
       scroll-контейнером — иначе sticky-шапка прилипала бы к ней, а не к экрану */
    border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; overflow: clip; }
.grid th, .grid td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #eef2f6; }
.grid th { background: #f8fafc; font-size: 12px; text-transform: uppercase;
    letter-spacing: .4px; color: #64748b; }
.grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.grid th.sortable:hover { color: #2563eb; }
.grid th .sort-ind { color: #2563eb; font-size: 11px; }
.grid .colcheck { text-align: center; }
.grid .chk-yes { color: #16a34a; font-weight: 700; }
.grid .chk-no { color: #cbd5e1; }
.grid .chk-wait { color: #eab308; font-weight: 700; }
.grid tbody tr:hover { background: #f1f5f9; }
/* Шапка прилипает при прокрутке длинных таблиц */
.grid thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 #e2e8f0; }
.grid .wide { width: 220px; }
.muted { color: #94a3b8; }
.mono { font-family: "Consolas", monospace; font-size: 13px; white-space: nowrap; }
.addr { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num-onair { color: #16a34a; font-weight: 600; }
.num-delayed { color: #dc2626; font-weight: 600; }

.rowlink { cursor: pointer; }
tr.is-delayed { background: #fef2f2; }
tr.is-delayed:hover { background: #fee2e2; }

/* Прогресс-бар */
.bar { background: #e5e7eb; border-radius: 6px; height: 9px; width: 140px;
    display: inline-block; vertical-align: middle; overflow: hidden; }
.bar.small { width: 90px; }
.bar-fill { background: #16a34a; height: 100%; }
.bar-lbl { font-size: 12px; color: #64748b; margin-left: 8px; }
.chip { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 13px;
    color: #475569; text-decoration: none; }
.chip:hover { border-color: #2563eb; color: #2563eb; text-decoration: none; }
.chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
td.rank { font-weight: 700; color: #94a3b8; width: 36px; }
td.rank.top { color: #b45309; }

/* Бейджи статусов */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; }
.badge.onair { background: #dcfce7; color: #15803d; }
.badge.inwork { background: #dbeafe; color: #1d4ed8; }
.badge.notstarted { background: #e5e7eb; color: #475569; }
.badge.delayed { background: #fee2e2; color: #b91c1c; }

/* Фильтры */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.filters select, .filters input { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.filters input[name="q"] { flex: 1; min-width: 200px; }
.filter-break { flex-basis: 100%; height: 0; }  /* перенос: приоритет и поиск на вторую строку */
/* Активный фильтр визуально отличим от неактивного (главная рекомендация Baymard) */
.filters .f-on { border-color: #2563eb; background: #eff6ff; font-weight: 600; color: #1d4ed8; }
.count { color: #64748b; margin: 12px 2px; }
.count-row { display: flex; align-items: center; justify-content: space-between; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 16px 0; }
.pager a { padding: 7px 14px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.pager-info { color: #64748b; font-size: 13px; }
.btn-export { background: #15803d; color: #fff !important; padding: 7px 14px; border-radius: 6px; font-size: 13px; }
.btn-export:hover { background: #166534; text-decoration: none; }
button { cursor: pointer; padding: 7px 14px; border: none; border-radius: 6px;
    background: #2563eb; color: #fff; font-size: 14px; }
button:hover { background: #1d4ed8; }
.reset { color: #64748b; }

/* Форма карточки */
.back { margin: 6px 0; }
.site-head { display: flex; align-items: center; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.form-grid label { display: flex; flex-direction: column; font-size: 13px; color: #475569; gap: 4px; }
.form-grid label.wide { grid-column: span 2; }
.form-grid .coord-pair { display: flex; gap: 12px; }
.form-grid .coord-pair label { flex: 1; }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; color: #1f2933; }
.weird { background: #fef9c3; }
.req { color: #dc2626; font-weight: 700; }
.form-grid input:required:invalid { border-color: #f0a8a8; background: #fef6f6; }

table.stages { width: 100%; border-collapse: collapse;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; overflow: clip; }
.stages th, .stages td { padding: 8px 12px; border-bottom: 1px solid #eef2f6; text-align: left; }
.stages th { background: #f8fafc; font-size: 12px; text-transform: uppercase; color: #64748b; }
.stage-name { font-weight: 600; color: #334155; white-space: nowrap; }
.stages input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.stage-flag { white-space: nowrap; }
.flag { white-space: nowrap; }

/* Подсветка состояния этапа — мягкие тона, только для проблемных */
/* Просрочка (план прошёл, факта нет) */
tr.st-overdue .cell-plan input { background: #fdeaea; border-color: #e7a3a3; }
/* Нет плановой даты */
tr.st-noplan .cell-plan input { background: #fbf6da; border-color: #ddc77a; }
/* Выполнено с опозданием (по факту) */
tr.st-late .cell-fact input { background: #fbf0e2; border-color: #e6c08f; }

.flag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.flag.overdue { background: #fee2e2; color: #b91c1c; }
.flag.noplan { background: #fef9c3; color: #92722a; }
.flag.late { background: #ffedd5; color: #b45309; }
.flag.done { background: #dcfce7; color: #15803d; }

/* Страница обзора города */
.city-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-list { background: #2563eb; color: #fff !important; padding: 8px 14px; border-radius: 6px; font-size: 14px; }
.btn-list:hover { background: #1d4ed8; text-decoration: none; }
.small { font-size: 12px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; margin-top: 16px; }
.panel h2 { margin-top: 0; }

/* Кольцевая диаграмма */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 150px; height: 150px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut-hole { position: absolute; inset: 28px; background: #fff; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-num { font-size: 24px; font-weight: 700; }
.donut-sub { font-size: 12px; color: #64748b; }
.legend { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #475569; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend .dash { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }

/* Линейный график (SVG) */
.linechart { width: 100%; height: auto; }
.linechart .grid { stroke: #eef2f6; stroke-width: 1; }
.linechart .ytick, .linechart .xtick { fill: #94a3b8; font-size: 11px; }
.linechart .xtick { text-anchor: middle; }
.linechart .ytick { text-anchor: end; }
.linechart .line-plan { fill: none; stroke: #2563eb; stroke-width: 2; stroke-dasharray: 5 4; }
.linechart .line-fact { fill: none; stroke: #16a34a; stroke-width: 2.5; }
.linechart .dot-fact { fill: #16a34a; }
.linechart .today-line { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 3 3; }
.linechart .today-lbl { fill: #f59e0b; font-size: 10px; text-anchor: middle; }
.linechart .mark-plan { fill: #2563eb; stroke: #fff; stroke-width: 1.5; }
.linechart .mark-fact { fill: #16a34a; stroke: #fff; stroke-width: 1.5; }
.charts-title { margin: 28px 0 0; }
.charts-sub { margin: 4px 0 2px; }

/* Целостность данных (мини-график на дашборде) */
.dbh { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px 10px; margin-top: 22px; }
.dbh.bad { border-color: #fca5a5; background: #fef7f7; }
.dbh-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dbh-title { font-weight: 700; font-size: 14px; }
.dbh-badge { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.dbh-badge.ok { background: #dcfce7; color: #15803d; }
.dbh-badge.bad { background: #fee2e2; color: #b91c1c; }
.dbh-sub { font-size: 12.5px; color: #64748b; margin-left: auto; }
.dbh-chart { width: 100%; height: 64px; display: block; }
.dbh-line { fill: none; stroke: #16a34a; stroke-width: 2; }
.dbh.bad .dbh-line { stroke: #dc2626; }
.dbh-dot { fill: #16a34a; }
.dbh.bad .dbh-dot { fill: #dc2626; }
.dbh-labels { position: relative; height: 14px; font-size: 10px; color: #94a3b8; }
.dbh-labels span { position: absolute; transform: translateX(-50%); }
.dbh-note { margin: 8px 0 0; font-size: 11.5px; color: #94a3b8; }
/* Интерактив графика целостности: курсор + подсветка точки + подсказка */
.dbh-chart-wrap { position: relative; cursor: crosshair; }
.dbh-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: #94a3b8;
    pointer-events: none; display: none; }
.dbh-hl { position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: #16a34a; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #16a34a;
    transform: translate(-50%, -50%); pointer-events: none; display: none; }
.dbh.bad .dbh-hl { background: #dc2626; box-shadow: 0 0 0 1.5px #dc2626; }
.dbh-tip { position: absolute; z-index: 10; display: none; pointer-events: none;
    background: #0f172a; color: #fff; font-size: 12px; line-height: 1.35;
    padding: 6px 9px; border-radius: 7px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .25); }
.dbh-tip b { font-weight: 700; }
.dbh-tip-d.up { color: #4ade80; }
.dbh-tip-d.down { color: #fca5a5; }
.dbh-tip-d.flat { color: #cbd5e1; }

/* Спарклайн активности города (как contribution-график на GitHub) */
.spark-cell { min-width: 150px; }
.spark { width: 140px; height: 26px; display: block; }
.spark-line { fill: none; stroke: #2da44e; stroke-width: 1.6; stroke-linejoin: round; }
.spark-area { fill: rgba(45, 164, 78, .14); stroke: none; }
.spark-empty { font-size: 11.5px; }

/* Должность и город работы в списке пользователей */
.added-cell { font-size: 12px; white-space: nowrap; }
.lastact-cell { font-size: 12px; white-space: nowrap; }
/* Застой: нет активности больше 10 дней — вся строка красная */
.users-table tr.stale-user td { background: #fef2f2; }
.users-table tr.stale-user td:first-child { border-left: 3px solid #dc2626; }
.stale-mark { display: block; color: #b91c1c; font-weight: 700; font-size: 11px; margin-top: 2px; }
.user-row .pos-input { width: 150px; }
.user-row .wcity-select { max-width: 150px; }
.user-row .pos-input:invalid, .user-row .wcity-select:invalid { border-color: #fca5a5; background: #fef7f7; }
/* Подсветка «на сегодня»: план к дате vs факт + отставание */
.chart-today { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 0; font-size: 15px; }
.chart-today .dash { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.chart-today .ct-plan b { color: #2563eb; font-size: 17px; }
.chart-today .ct-fact b { color: #16a34a; font-size: 17px; }
.chart-today .ct-gap { font-weight: 700; padding: 2px 9px; border-radius: 7px; font-size: 13px; }
.chart-today .ct-gap.behind { background: #fee2e2; color: #b91c1c; }
.chart-today .ct-gap.ahead { background: #dcfce7; color: #15803d; }
.chart-today .ct-gap.ontrack { background: #e0f2fe; color: #0369a1; }
.chart-total { margin: 6px 0 0; }
/* Прогноз по темпу факта */
.linechart .line-forecast { fill: none; stroke: #9333ea; stroke-width: 2; stroke-dasharray: 2 4; }
.chart-forecast { margin: 8px 0 0; font-size: 13px; color: #475569; }
.chart-forecast .dash-fc { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; background: #9333ea; }
.fc-badge { font-weight: 700; padding: 1px 8px; border-radius: 7px; font-size: 12px; margin-left: 6px; }
.fc-badge.late { background: #fee2e2; color: #b91c1c; }
.fc-badge.early { background: #dcfce7; color: #15803d; }
.fc-badge.ontime { background: #e0f2fe; color: #0369a1; }

/* Воронка по этапам */
.funnel { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.funnel-row { display: grid; grid-template-columns: 200px 1fr 64px; align-items: center; gap: 12px; }
.funnel-label { font-size: 13px; color: #334155; }
.funnel-bar { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: #f1f5f9; }
.funnel-bar .seg.done { background: #16a34a; }
.funnel-bar .seg.overdue { background: #dc2626; }
.funnel-bar .seg.pending { background: #e2e8f0; }
.funnel-num { font-size: 12px; color: #64748b; text-align: right; }

/* Скорость прохождения */
.cycle-head { font-size: 15px; }
.cycle-big { font-size: 26px; font-weight: 700; color: #2563eb; vertical-align: -2px; margin: 0 2px; }
.cycle { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cycle-row { display: grid; grid-template-columns: 280px 1fr 60px; align-items: center; gap: 12px; }
.cycle-label { font-size: 12px; color: #334155; }
.cycle-bar { background: #f1f5f9; border-radius: 5px; height: 16px; overflow: hidden; }
.cycle-fill { background: #60a5fa; height: 100%; }
.cycle-fill.max { background: #dc2626; }
.cycle-num { font-size: 12px; color: #64748b; text-align: right; }
.cycle-num.max { color: #dc2626; font-weight: 700; }

/* Разрезы по типам */
.breakdowns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.breakdowns .bd h3 { font-size: 13px; color: #64748b; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.breakdowns .grid th, .breakdowns .grid td { padding: 6px 9px; }

.actions { margin: 22px 0; display: flex; gap: 12px; }
button.primary { background: #16a34a; }
button.primary:hover { background: #15803d; }
button.danger { background: #dc2626; }
button.danger:hover { background: #b91c1c; }
button.ghost { background: #fff; color: #2563eb; border: 1px solid #cbd5e1; }
button.ghost:hover { background: #f1f5f9; }

/* Имя пользователя в шапке */
.whoami { margin-left: auto; color: #cbd5e1; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.whoami input { padding: 4px 8px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #fff; width: 110px; }

/* RAG-здоровье */
.badge.rag-green { background: #dcfce7; color: #15803d; }
.badge.rag-amber { background: #fef3c7; color: #b45309; }
.badge.rag-red { background: #fee2e2; color: #b91c1c; }
.rag-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.rag-dot.rag-green { background: #16a34a; }
.rag-dot.rag-amber { background: #f59e0b; }
.rag-dot.rag-red { background: #dc2626; }
.rag-cell { white-space: nowrap; font-size: 12px; color: #64748b; }
.rag-cell .rag-dot { margin: 0 3px 0 8px; }
.rag-strip { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 13px; color: #475569; }
.rag-strip .rag-dot { margin: 0 4px 0 12px; }

/* Слип/гейн в карточке */
.cell-base { font-size: 12px; color: #94a3b8; font-family: Consolas, monospace; }
.cell-delta { font-weight: 600; font-size: 13px; }
.cell-delta .slip { color: #dc2626; }
.cell-delta .gain { color: #16a34a; }

/* Gantt-таймлайн */
.gantt-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.gantt { display: block; width: 100%; max-width: 1040px; height: auto; }
.gantt .g-grid { stroke: #eef2f6; }
.gantt .g-today { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 3 3; }
.gantt .g-tick { fill: #94a3b8; font-size: 11px; text-anchor: middle; }
.gantt .g-label { fill: #334155; font-size: 13px; }
.gantt .g-seg { stroke-width: 5; stroke-linecap: round; }
.gantt .g-seg.ontime { stroke: #bbf7d0; }
.gantt .g-seg.late { stroke: #fecaca; }
.gantt .g-base { fill: #94a3b8; }
.gantt .g-plan { stroke: #2563eb; stroke-width: 2; }
.gantt .g-fact { fill: #16a34a; }
.gantt-legend { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.gantt-legend .g-l { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.gantt-legend .g-l.base { background: #94a3b8; }
.gantt-legend .g-l.plan { background: #2563eb; width: 3px; height: 12px; }
.gantt-legend .g-l.fact { background: #16a34a; border-radius: 50%; }
.gantt-legend .g-l.today { background: #f59e0b; width: 3px; }
.gantt-legend .g-l.seg-late { background: #fecaca; }

/* История изменений */
.history th, .history td { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* Столбец комментариев в этапах */
.cmt-col { width: 260px; }
.cell-cmt { cursor: pointer; max-width: 280px; }
.cell-cmt:hover { background: #f1f5f9; }
.cmt-last { font-size: 13px; color: #334155; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 260px; }
.cmt-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.cmt-empty { font-size: 12px; color: #94a3b8; }
.cell-cmt:hover .cmt-empty { color: #2563eb; }

/* Столбец документов (скрепка) в этапах */
.doc-col { width: 84px; text-align: center; }
.cell-doc { text-align: center; white-space: nowrap; }
.doc-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
    background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.doc-chip:hover { background: #e2e8f0; color: #334155; }
.doc-chip.has { background: #dcfce7; color: #15803d; border-color: #bbf7d0; font-weight: 600; }
.doc-chip.has:hover { background: #bbf7d0; }

/* Модальное окно документов */
.doc-current { padding: 16px 18px 6px; }
.doc-file { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
    font-weight: 600; color: #15803d; text-decoration: none; word-break: break-all; }
.doc-file:hover { text-decoration: underline; }
.doc-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.doc-actions { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.doc-act { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600;
    color: #2563eb; cursor: pointer; text-decoration: none; }
.doc-act:hover { background: none; text-decoration: underline; }
.doc-act.danger-link { color: #dc2626; }
.doc-del { margin: 0; display: inline; }
.doc-empty { padding: 16px 18px; color: #94a3b8; }
.doc-upload { padding: 14px 18px; border-top: 1px solid #e2e8f0; display: flex;
    flex-wrap: wrap; align-items: center; gap: 10px; }
.doc-upload input[type=file] { flex: 1; min-width: 160px; font-size: 13px; }
.doc-hint { flex-basis: 100%; margin: 2px 0 0; }

/* Просмотр документа (PDF/картинки) в большом модале с iframe */
.pmodal-bg { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.6);
    z-index: 200; align-items: center; justify-content: center; }
.pmodal { background: #fff; border-radius: 12px; width: 92vw; height: 92vh; max-width: 1100px;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.4); }
.pmodal .modal-head { flex: 0 0 auto; }
.pmodal .modal-head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmodal-tools { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.pmodal iframe { flex: 1; width: 100%; border: 0; background: #525659; }

/* Модальное окно комментариев */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45);
    z-index: 100; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 12px; width: 520px; max-width: 92vw;
    max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-x { background: none; color: #64748b; font-size: 16px; padding: 4px 8px; }
.modal-x:hover { background: #f1f5f9; color: #1f2933; }
.cmt-history { padding: 14px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cmt-item { border-left: 3px solid #cbd5e1; padding: 4px 0 4px 10px; }
.cmt-item-meta { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.cmt-item-text { font-size: 14px; color: #1f2933; white-space: pre-wrap; word-break: break-word; }
.cmt-add { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid #e2e8f0; }
.cmt-add textarea { flex: 1; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 14px; font-family: inherit; resize: vertical; }

/* Авторизация и роли */
.whoami { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.whoami .me { color: #fff; font-weight: 600; }
.whoami .logout { color: #cbd5e1; }
.whoami .logout:hover { color: #fff; }
.role-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.role-admin { background: #fde68a; color: #92400e; }
.role-editor { background: #bfdbfe; color: #1e40af; }
.role-viewer { background: #e2e8f0; color: #475569; }

fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.readonly-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.flash { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    padding: 11px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #0f172a; }
.login-card { background: #fff; border-radius: 12px; padding: 28px 30px; width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-brand { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 18px; color: #0f172a; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #475569; }
.login-card input { padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.login-card button { padding: 10px; font-size: 15px; }
.login-error { background: #fee2e2; color: #b91c1c; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
/* Страница дозаполнения профиля (должность + город работы) */
.login-card select { padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; background: #fff; }
.profile-hello { margin: 0 0 6px; font-size: 15px; }
.profile-note { margin: 0 0 14px; font-size: 13px; color: #64748b; line-height: 1.45; }
.profile-exit { text-align: center; margin: 14px 0 0; font-size: 12.5px; }

/* Управление пользователями — компактная таблица */
.users-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.users-head h1 { margin: 0; }
.users-table { width: 100%; }
.users-table th, .users-table td { padding: 9px 12px; vertical-align: middle; }
.users-table .me-cell { font-weight: 600; white-space: nowrap; }
.users-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.users-table th.sortable:hover { color: #2563eb; }
.users-table th .sort-ind { color: #2563eb; font-size: 11px; }
.users-table tr.urow { cursor: pointer; transition: background .12s; }
.users-table tr.urow:hover td { background: #f8fafc; }
.users-table tr.stale-user.urow:hover td { background: #fde8e8; }
.users-table .lastact-cell { font-size: 12px; }
.users-table .row-open { text-align: right; }
.open-link { color: #2563eb; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-pill.on { background: #dcfce7; color: #15803d; }
.status-pill.off { background: #e5e7eb; color: #64748b; }

/* Карточка пользователя (модалка) */
.modal.wide { width: 640px; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.u-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 12px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: #1f2933; }
.u-meta-cap { display: block; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px; }
.u-form { display: flex; flex-direction: column; gap: 14px; }
.u-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.u-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #475569; }
.u-form input, .u-form select { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.u-form .field-cap { font-size: 13px; color: #475569; margin-bottom: 6px; display: block; }
.u-row2 { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.u-form .chk { flex-direction: row; align-items: center; gap: 6px; color: #475569; }
.u-form .chk input { width: auto; }
.pw-field { flex: 1; min-width: 220px; }
.u-actions { display: flex; gap: 10px; padding-top: 6px; border-top: 1px solid #e2e8f0; }
.u-actions .ghost { margin-left: auto; }

/* API-ключи и документация */
.ghost-link { color: #2563eb; font-size: 14px; font-weight: 600; }
.key-new { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.key-new label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #475569; flex: 1; min-width: 280px; }
.key-new input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; }
.keys-table .key-prefix { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; }
.keys-table tr.key-revoked td { opacity: .55; }
.small-btn { padding: 4px 12px; font-size: 12px; }
.api-key-new { border: 1px solid #bbf7d0; background: #f0fdf4; }
.api-key-new h2 { color: #15803d; }
.api-key-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 600;
    background: #0f172a; color: #4ade80; padding: 12px 14px; border-radius: 8px; margin: 8px 0;
    word-break: break-all; user-select: all; }
.api-doc h2 { font-size: 17px; }
.api-doc pre { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 8px;
    overflow-x: auto; font-size: 13px; line-height: 1.5; }
.api-doc pre code { font-family: ui-monospace, Menlo, Consolas, monospace; color: inherit; background: none; padding: 0; }
.api-doc code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
    background: #f1f5f9; color: #be185d; padding: 1px 6px; border-radius: 5px; }
.api-doc table code { background: #f1f5f9; }
.http-get { display: inline-block; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700;
    padding: 2px 9px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }

/* Итоги недели */
.week-toggle { display: flex; gap: 4px; }
.week-toggle a { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #475569; background: #fff; }
.week-toggle a.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.delta { font-size: 12px; }
.delta.up { color: #16a34a; }
.delta.down { color: #dc2626; }
.week-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 14px; color: #1e3a5f; font-size: 14px; }
.week-strip:hover { background: #dbeafe; text-decoration: none; }
.week-strip-lbl { color: #475569; }
.week-strip-go { margin-left: auto; color: #2563eb; font-weight: 600; }

/* Раскрытие города в строку-деталь (Итоги недели и Сравнение городов) */
.wc-caret-h { width: 24px; }
.wc-row { cursor: pointer; }
.wc-row:hover { background: #f1f5f9; }
.wc-caret { width: 24px; text-align: center; color: #94a3b8; }
.wc-caret span { display: inline-block; transition: transform .15s ease; }
.wc-row.wc-open .wc-caret { color: #2563eb; }
.wc-row.wc-open .wc-caret span { transform: rotate(90deg); }
.wc-detail > td { background: #f8fafc; padding-top: 10px; padding-bottom: 12px; }
.wc-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wc-stage { display: inline-flex; align-items: center; gap: 6px; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 11px; font-size: 13px; color: #334155; }
.wc-stage b { color: #16a34a; font-weight: 700; }
.wc-link { font-size: 13px; }

/* Выбор городов галочками */
.city-checks { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 18px;
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #fafcff; }
.city-checks.compact { grid-template-columns: repeat(4, max-content); gap: 3px 16px; padding: 8px 10px; }
.city-checks label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; font-weight: 400; cursor: pointer; }
.city-checks input { width: auto; }

/* ============================================================
   Адаптив. Планшет (узкие двухколоночные блоки разъезжаются),
   затем телефон (≤640px) — основной режим: ребята правят с телефона.
   ============================================================ */

/* Планшет / узкое окно: двухколоночные сетки складываем в столбец.
   minmax(0, 1fr), а не 1fr: иначе минимум колонки = auto и широкое содержимое
   (графики с min-width, таблицы) распирает колонку шире экрана — страница едет вбок
   и внутренний overflow-scroll не включается. */
@media (max-width: 960px) {
    main.wide { max-width: 100%; }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .breakdowns { grid-template-columns: minmax(0, 1fr); }
}

/* ====================== Телефон ====================== */
@media (max-width: 640px) {
    body { font-size: 15px; }
    main, main.wide, main.mapfull { padding: 12px 12px 48px; }
    h1 { font-size: 20px; margin: 12px 0 10px; }
    h2 { font-size: 15px; margin: 18px 0 8px; }

    /* Шапка: бренд и «кто я» в первой строке, навигация —
       прокручиваемая горизонтальная лента во второй. */
    .topbar { padding: 10px 0; }
    .topbar-inner { flex-wrap: wrap; gap: 8px 12px; padding: 0 14px; }
    .topbar-inner .brand { order: 1; }
    .topbar-inner .whoami { order: 2; margin-left: auto; font-size: 12px; gap: 8px; }
    .topbar nav {
        order: 3; flex-basis: 100%; gap: 4px;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .topbar nav a { white-space: nowrap; padding: 8px 8px; }
    .topbar nav a.btn-add { padding: 8px 12px; }

    /* Все поля ввода ровно 16px — иначе iOS зумит страницу при фокусе.
       Перечисляем и «адресные» селекторы (.filters, .form-grid, .login-card,
       .user-*): у них специфичность выше, простой select{} их не перебьёт. */
    input, select, textarea,
    .filters select, .filters input,
    .form-grid input, .form-grid select, .form-grid textarea,
    .login-card input, .login-card select,
    .user-new input, .user-new select, .user-row input, .user-row select {
        font-size: 16px;
    }

    /* Карточки-сводки: по две в ряд */
    .cards { gap: 10px; }
    .card { min-width: 0; flex: 1 1 calc(50% - 5px); padding: 12px 14px; }
    .card-num { font-size: 24px; }

    /* Фильтры: селекты по два в ряд, поиск/приоритет/кнопка на всю ширину */
    .filters { padding: 10px; gap: 8px; }
    .filters select { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 9px; }
    .filters input[name="q"], .filters input[name="priority"] { flex: 1 1 100%; }
    .filters button { flex: 1 1 100%; padding: 11px; }
    .count-row { flex-wrap: wrap; gap: 8px; }
    .city-head, .map-head, .dbh-head { flex-wrap: wrap; }

    /* Прочие таблицы — аккуратный горизонтальный скролл (без расползания
       страницы). Списки объектов и этапов переверстаны в карточки — их не трогаем. */
    .grid:not(.sites):not(.week-cities) {
        display: block; width: max-content; max-width: 100%;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .grid:not(.sites) th, .grid:not(.sites) td { padding: 10px 11px; }

    /* Паспорт объекта и прочие формы — один столбец.
       minmax(0,1fr) + width:100%, иначе собственная ширина полей распирает колонку. */
    .form-grid { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }
    .form-grid label.wide { grid-column: auto; }
    .form-grid input, .form-grid select, .form-grid textarea { padding: 10px; width: 100%; min-width: 0; }
    .form-grid .coord-pair label { min-width: 0; }

    .site-head { flex-wrap: wrap; gap: 8px; }
    .actions { flex-direction: column; gap: 10px; }
    .actions button { width: 100%; padding: 13px; }

    /* Воронка и скорость: подпись на отдельной строке, бар — на всю ширину */
    .funnel-row, .cycle-row { grid-template-columns: 1fr auto; }
    .funnel-label, .cycle-label { grid-column: 1 / -1; }
    .donut-wrap { flex-wrap: wrap; gap: 16px; }

    /* Тач-зоны: чипы, пагинация, переключатели — не меньше 44px */
    .chip, .pager a, .week-toggle a { min-height: 44px; display: inline-flex; align-items: center; }
    button { padding: 11px 16px; }

    /* -------- Список объектов: строка таблицы → карточка -------- */
    table.sites, table.sites tbody { display: block; }
    table.sites thead { display: none; }
    table.sites tr {
        display: block; background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 10px 12px; margin-bottom: 10px;
    }
    table.sites tr.is-delayed { border-left: 3px solid #dc2626; }
    table.sites td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 12px; padding: 4px 0; border: none; max-width: none; white-space: normal;
    }
    table.sites td::before {
        content: attr(data-label); color: #64748b; font-size: 12px; flex: 0 0 auto;
    }
    table.sites td.mono { font-size: 16px; font-weight: 600; }   /* SiteID — «заголовок» карточки */
    table.sites td.addr { display: block; }                       /* адрес: подпись сверху, текст ниже */
    table.sites td.addr::before { display: block; margin-bottom: 2px; }
    /* Этапы — компактные пилюли в конце карточки */
    table.sites td.colcheck {
        display: inline-flex; width: auto; justify-content: flex-start;
        gap: 5px; padding: 4px 9px; margin: 6px 6px 0 0;
        border: 1px solid #e8edf3; border-radius: 999px; font-size: 12px;
    }

    /* -------- Карточка объекта: таблица этапов → блоки -------- */
    table.stages, table.stages tbody { display: block; }
    table.stages thead { display: none; }
    table.stages tr {
        display: block; background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 10px 12px; margin-bottom: 10px;
    }
    table.stages td { display: block; border: none; padding: 3px 0; }
    table.stages td.stage-name {
        font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px; white-space: normal;
    }
    /* пустые ячейки (нет базы / нет Δ / нет флага / нет документа) не показываем */
    table.stages td.cell-base:empty, table.stages td.cell-delta:empty,
    table.stages td.stage-flag:empty, table.stages td.cell-doc:empty { display: none; }
    table.stages td.cell-doc::before {
        content: "Документ"; display: block; font-size: 12px; color: #64748b; margin-bottom: 2px;
    }
    table.stages td.cell-base::before, table.stages td.cell-plan::before,
    table.stages td.cell-fact::before, table.stages td.cell-delta::before,
    table.stages td.cell-cmt::before {
        content: attr(data-label); display: block;
        font-size: 12px; color: #64748b; margin-bottom: 2px;
    }
    table.stages td.cell-cmt::before { content: "Комментарий"; }
    table.stages input { width: 100%; padding: 10px; font-size: 16px; }
    table.stages td.cell-cmt { max-width: none; }
    table.stages .cmt-last, table.stages .cmt-empty { max-width: none; }

    /* -------- Графики и таймлайн на узком экране -------- */
    /* SVG масштабируется вместе с viewBox: на телефоне подписи осей ужимаются
       до ~5px. Главные числа продублированы в строке под графиком (.chart-today),
       а сам график даём листать вбок в читаемом размере. */
    .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
    .chart-scroll svg.linechart { min-width: 600px; }
    /* Гант-таймлайн широкий и детальный — тоже прокручиваем вбок */
    .gantt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gantt { min-width: 680px; }

    /* -------- Карта -------- */
    .map-head .map-filter { margin-left: 0; width: 100%; }

    /* -------- Модалка комментариев: поле и кнопка в столбик -------- */
    .cmt-add { flex-direction: column; }
    .cmt-add button { width: 100%; }

    /* Отклик на тап по кликабельным карточкам и строкам */
    table.sites tr:active, .rowlink:active, .cell-cmt:active { background: #eef2f7; }
}


/* --- Качество данных --- */
.dq-scorebar { display: flex; align-items: center; gap: 18px; }
.dq-score-num { font-size: 40px; font-weight: 700; color: #16a34a; line-height: 1; }
.dq-score-lbl { color: #475569; font-size: 14px; }
.sev { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.sev-high { background: #dc2626; }
.sev-mid  { background: #f59e0b; }
.sev-low  { background: #cbd5e1; }
.dq-count { font-weight: 600; color: #dc2626; text-decoration: none; }
.dq-count:hover { text-decoration: underline; }
.dq-banner { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; font-size: 14px; }
.dq-banner a { color: #2563eb; margin-left: 6px; }


/* --- Дашборд: доли на карточках, статус-микс, полировка таблицы --- */
.card-share { font-size: 13px; font-weight: 600; margin-top: 6px; }
.num-inwork { color: #2563eb; font-weight: 600; }
.card.delayed { background: #fef2f2; }
.mix-cell { min-width: 200px; }
.mix { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #f1f5f9; }
.mix i { display: block; height: 100%; }
.dash-cities td.n, .dash-cities th.n { text-align: right; }
.dash-cities th.srt { cursor: pointer; user-select: none; white-space: nowrap; }
.dash-cities th.srt:hover { color: #2563eb; }
.dash-cities th.srt-asc::after { content: " \2191"; color: #2563eb; }
.dash-cities th.srt-desc::after { content: " \2193"; color: #2563eb; }
.dash-cities tr.rowlink { cursor: pointer; }
.dash-cities tr.rowlink:hover { background: #f8fafc; }

/* --- Статистика API-ключей --- */
.api-usage-sum { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.ak-stat { display: flex; flex-direction: column; }
.ak-n { font-size: 22px; font-weight: 600; line-height: 1.1; }
.ak-l { font-size: 12px; color: #64748b; margin-top: 2px; }