/*
 * Damsel — оформление сайта.
 *
 * Палитра перенесена из настольной программы один в один: люди работают
 * то в одном, то в другом, и расхождение в цветах читалось бы как «это
 * другая программа». Фирменные синий и оранжевый работают точечно — на
 * данных, а не на плоскостях.
 */

:root {
    --ground:      #efeff2;
    --surface:     #ffffff;
    --surface2:    #f7f7f9;
    --ink:         #121418;
    --ink-soft:    #6c727e;
    --ink-faint:   #9ea4b0;
    --rule:        #e0e0e6;
    --rule-soft:   #eeeef2;
    --accent:      #14161a;
    --accent-ink:  #ffffff;
    --brand:       #00376b;
    --warm:        #e87511;
    --ok:          #186a44;
    --ok-bg:       #e8f3ed;
    --crit:        #b02424;
    --crit-bg:     #fbebeb;
    --field:       #f6f6f9;
    --field-line:  #e0e0e6;
    --shadow:      0 1px 2px rgba(16, 18, 24, .06), 0 8px 24px rgba(16, 18, 24, .06);

    --radius:      14px;
    --radius-sm:   9px;
    --nav:         260px;

    color-scheme: light;
}

[data-тема="тёмная"] {
    --ground:      #0d0e11;
    --surface:     #17191d;
    --surface2:    #1e2126;
    --ink:         #e9ebef;
    --ink-soft:    #969ca8;
    --ink-faint:   #6e7480;
    --rule:        #2e3239;
    --rule-soft:   #24272d;
    --accent:      #f0f1f4;
    --accent-ink:  #121418;
    --brand:       #78ace0;
    --warm:        #f0963c;
    --ok:          #68c48e;
    --ok-bg:       #182e22;
    --crit:        #e87676;
    --crit-bg:     #381e1e;
    --field:       #1f2228;
    --field-line:  #343840;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--ground);
    color: var(--ink);
    font: 15px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Цифры в таблицах должны стоять в столбик: одинаковая ширина знака важнее
   красоты начертания, иначе колонка объёмов «пляшет». */
.цифры {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ── заставка ─────────────────────────────────────────────────────────── */
/*
 * Знак проявляется и чуть поднимается, следом — приветствие. Фон совпадает
 * с фоном самого изображения, поэтому границы картинки не видно.
 *
 * Заставка живёт около двух секунд и уходит. Дольше — и она превращается
 * в препятствие: люди открывают сайт по десять раз за смену.
 */
.заставка {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    /* Фон повторяет освещение самого снимка: светлее там, где на нём свет,
       темнее к краям. Один плоский цвет тут не подходит — у изображения
       не однородная подложка, а подсветка, и прямоугольник был бы виден. */
    background:
        radial-gradient(120% 95% at 50% 34%, #0a3f86 0%, #01275c 52%, #00142f 100%);
    cursor: pointer;
    animation: заставка-уход .45s ease 1.5s forwards;
}

.заставка__знак {
    width: min(560px, 78vw);
    max-height: 58dvh;
    object-fit: contain;
    opacity: 0;
    transform: translateY(18px) scale(.97);
    animation: знак-приход .75s cubic-bezier(.2, .7, .3, 1) forwards;

    /* Края растворяются в фоне, и границы картинки не видно. Семь процентов
       по каждой стороне — дальше начинается сам знак, его резать нельзя. */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
}

.заставка__привет {
    color: #e8eef8;
    font-size: clamp(19px, 3.4vw, 27px);
    font-weight: 600;
    letter-spacing: .06em;
    opacity: 0;
    animation: привет-приход .6s ease .45s forwards;
}

@keyframes знак-приход {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes привет-приход {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: .92; transform: translateY(0); }
}

@keyframes заставка-уход {
    to { opacity: 0; visibility: hidden; }
}

/* Убрана вручную — держим скрытой, чего бы ни просила разметка. */
.заставка.ушла {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

/* Кому движение мешает — тому просто показываем и убираем. */
@media (prefers-reduced-motion: reduce) {
    .заставка__знак, .заставка__привет {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .заставка { animation-duration: .01s; animation-delay: 1s; }
}

/* ── вход ─────────────────────────────────────────────────────────────── */

.вход__знак {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 22px;
    border-radius: var(--radius-sm);
}

.меню__знак {
    height: 42px;
    width: auto;
    border-radius: 6px;
}

.вход {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.вход__карточка {
    width: min(420px, 100%);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 32px 28px;
}

/* Мастер первичной настройки: полей больше, чем на входе, и в узкую
   карточку они встают лесенкой в один столбец. */
.вход__карточка--широкая { width: min(720px, 100%); }

/* Знак есть не у всякого экземпляра. Когда его нет, на месте картинки
   встаёт название организации — пустое место читалось бы как поломка. */
.заставка__имя {
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    text-align: center;
    padding: 0 24px;
    opacity: 0;
    animation: знак-приход .75s cubic-bezier(.2, .7, .3, 1) forwards;
}

.вход__марка {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.вход__полоса {
    width: 4px;
    height: 30px;
    border-radius: 2px;
    background: var(--brand);
}

.вход__имя {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.вход__объект {
    font-size: 12px;
    color: var(--ink-soft);
}

/* ── выбор управления и объекта ───────────────────────────────────────── */

.выбор-плитки {
    display: grid;
    gap: 10px;
    margin: 18px 0 4px;
}

.кнопка--крупная {
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border: 1px solid var(--rule);
    color: var(--ink);
    cursor: pointer;
}

.кнопка--крупная:hover { border-color: var(--brand); }

.кнопка--крупная__низ {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-soft);
}

/* «Сменить объект» в меню — тот же вид, что был у обычного текста, но
   кликабельный: пустая кнопка без рамки не должна выглядеть как элемент
   управления, пока на неё не навели курсор. */
.объект-меню {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface2);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 4px 11px;
    margin-top: 4px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.объект-меню:hover { border-color: var(--brand); color: var(--brand); }

.вход__привет {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 4px;
}

.вход__подпись {
    color: var(--ink-soft);
    font-size: 14px;
    margin-bottom: 20px;
}

/* ── поля ─────────────────────────────────────────────────────────────── */

.поле {
    display: block;
    margin-bottom: 14px;
}

.поле__метка {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.поле__ввод,
input[type="text"], input[type="password"], input[type="date"],
input[type="search"], input[type="number"], select {
    width: 100%;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.поле__ввод:focus,
input:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.ключ {
    letter-spacing: .16em;
    font-family: Consolas, "SF Mono", ui-monospace, monospace;
}

/* ── кнопки ───────────────────────────────────────────────────────────── */

.кнопка {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, transform .06s;
}

.кнопка:hover:not(:disabled) { border-color: var(--ink-faint); }
.кнопка:active:not(:disabled) { transform: translateY(1px); }

.кнопка:disabled {
    opacity: .5;
    cursor: default;
}

.кнопка--главная {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 600;
}

.кнопка--во-всю { width: 100%; }

.кнопка--тихая {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
    min-height: 32px;
    padding: 0 10px;
}

.кнопка--тихая:hover { color: var(--ink); background: var(--surface2); }

/* ── сообщения ────────────────────────────────────────────────────────── */

.весть {
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    font-size: 14px;
    margin-bottom: 14px;
}

.весть--беда { background: var(--crit-bg); color: var(--crit); }
.весть--добро { background: var(--ok-bg); color: var(--ok); }
.весть:empty { display: none; }

/* ── каркас кабинета ──────────────────────────────────────────────────── */

.кабинет {
    display: grid;
    grid-template-columns: var(--nav) 1fr;
    gap: 18px;
    padding: 18px;
    min-height: 100dvh;
    align-items: start;
}

.меню {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 16px;
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100dvh - 36px);
}

.меню__марка {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 18px;
}

.меню__кто {
    padding: 0 8px 14px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 12px;
}

.меню__фио { font-weight: 600; }
.меню__отдел { font-size: 12px; color: var(--ink-soft); }

.меню__пункт {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.меню__пункт:hover { background: var(--surface2); }

.меню__пункт[aria-current="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.меню__низ {
    margin-top: auto;
    padding-top: 14px;
    display: grid;
    gap: 8px;
}

/* ── страница ─────────────────────────────────────────────────────────── */

.страница {
    /* Без этого широкая таблица растягивает всю колонку сетки: у элемента
       сетки минимальная ширина по умолчанию равна ширине содержимого, и
       overflow на вложенном блоке не спасает. Итоги уезжали за край экрана. */
    min-width: 0;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 26px 20px;
    min-height: calc(100dvh - 36px);
}

.страница__шапка {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.страница__имя {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.страница__пояснение {
    color: var(--ink-soft);
    font-size: 13px;
}

.полоска-дел {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.строка-настроек {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 4px;
}

.строка-настроек .поле { margin-bottom: 0; }
.строка-настроек .поле--поиск { flex: 1 1 240px; max-width: 340px; }
.строка-настроек .поле--дата { width: 170px; }

.итоги {
    margin-left: auto;
    color: var(--ink-soft);
    font-size: 13px;
    padding-bottom: 6px;
}

/* ── таблица ──────────────────────────────────────────────────────────── */

.свиток {
    min-width: 0;
    overflow-x: auto;
    /* Своя полоса прокрутки — родная в Windows выдаёт возраст интерфейса. */
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}

.свиток::-webkit-scrollbar { height: 10px; width: 10px; }
.свиток::-webkit-scrollbar-track { background: transparent; }
.свиток::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 999px;
    border: 2px solid var(--surface);
}
.свиток::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

table.реестр {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.реестр thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    padding: 12px 8px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

/* Графы, которые заполняют руками, помечены фирменным оттенком — так же,
   как в программе: человек должен видеть, куда можно писать. */
.реестр th.правится {
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    color: var(--brand);
}

.реестр tbody td {
    /* Отступы поджаты: с появлением графы «Внёс» таблица переставала
       помещаться, и последняя графа обрезалась на середине фамилии. */
    padding: 8px 8px;
    border-bottom: 1px solid var(--rule-soft);
    white-space: nowrap;
}

.реестр tbody tr:hover td { background: var(--surface2); }

.реестр tbody tr.выбрана td {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

/* Ячейка срока: обычный текст, пока в неё не ткнули. Поле ввода в каждой
   из трёхсот строк — это шестьсот элементов и рябь в глазах. */
.срок {
    cursor: text;
    min-width: 104px;
}

.срок:hover { color: var(--brand); }

.вправо { text-align: right; }
.середина { text-align: center; }
.тихо { color: var(--ink-faint); }
.широко { white-space: normal; min-width: 172px; }

/* ── полоска выполнения ───────────────────────────────────────────────── */

.готовность {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 92px;
}

.готовность__путь {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink-faint) 22%, transparent);
    overflow: hidden;
}

.готовность__залив {
    height: 100%;
    border-radius: 999px;
    background: var(--warm);
    transition: width .18s;
}

.готовность__залив--всё { background: var(--ok); }

.готовность__число {
    font-size: 12px;
    font-weight: 600;
    min-width: 46px;
    text-align: right;
}

/* ── ячейка ввода ─────────────────────────────────────────────────────── */

/* Поле, куда пишут объём. Оно должно быть видно как поле: графа, в которую
   можно писать, отличается от соседних не только заголовком — иначе человек
   ищет, куда ткнуть. Заблокированное (отделу закрыта запись) становится
   обычным текстом, чтобы не приглашать туда, куда нельзя. */
.ввод-объёма {
    width: 100%;
    min-width: 92px;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 7px;
    padding: 5px 8px;
    text-align: right;
}

.ввод-объёма:hover:not(:disabled) { border-color: var(--ink-faint); }

.ввод-объёма:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--ink);
}

.ввод-объёма:focus {
    background: var(--field);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
    outline: none;
}

.ввод-объёма:disabled { cursor: default; }

/* ── метки состояния ──────────────────────────────────────────────────── */

.метка {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.метка--сохранено { background: var(--ok-bg); color: var(--ok); }
.метка--ждёт      { background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm); }
.метка--беда      { background: var(--crit-bg); color: var(--crit); }

.снимки {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: transparent;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.снимки:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }

.снимки--есть {
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
    font-weight: 600;
}

.снимки:disabled { opacity: .45; cursor: default; }

/* ── окно поверх ──────────────────────────────────────────────────────── */

dialog.окно {
    border: none;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    padding: 0;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
}

dialog.окно::backdrop { background: rgba(10, 12, 16, .45); }

.окно__шапка {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--rule-soft);
}

.окно__имя { font-size: 17px; font-weight: 600; }
.окно__тело { padding: 18px 22px; overflow: auto; max-height: 62dvh; }
.окно__низ {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--rule-soft);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.плитки {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.плитка {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface2);
    display: flex;
    flex-direction: column;
}

.плитка img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    background: var(--field);
    cursor: zoom-in;
}

.плитка__низ {
    padding: 7px 9px;
    font-size: 11.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.плитка__имя {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── расчёт участка ───────────────────────────────────────────────────── */

.раздел-расчёта {
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px 6px;
    margin-bottom: 12px;
}

.раздел-расчёта__имя {
    font-weight: 600;
    margin-bottom: 2px;
}

.раздел-расчёта__норма {
    font-size: 12px;
    color: var(--ink-faint);
    margin-bottom: 10px;
}

/* Проверка по нормативу — это ответ «да» или «нет», а не число. Такие
   строки отделены цветом: именно их ищет глаз, когда решают, можно ли
   вести работы. */
.проверка {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.проверка--да { background: var(--ok-bg); color: var(--ok); }
.проверка--нет { background: var(--crit-bg); color: var(--crit); }

/* ── исходные данные расчёта ──────────────────────────────────────────── */

.исходные {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.исходные__раздел {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 12px 14px 8px;
    background: var(--surface2);
}

.исходные__имя {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

.исходные__строка {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.исходные__подпись {
    flex: 1;
    font-size: 13px;
}

.исходные__поле {
    width: 108px;
    flex: none;
    text-align: right;
    padding: 5px 8px;
    border-radius: 7px;
}

/* Величина, которую тронули руками, помечена: по ней сразу видно, чем этот
   расчёт отличается от проектного. */
.исходные__поле.правлено {
    border-color: var(--warm);
    background: color-mix(in srgb, var(--warm) 10%, var(--field));
    font-weight: 600;
}

.внёс {
    font-size: 12.5px;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ── просмотр снимка ──────────────────────────────────────────────────── */
/*
 * Снимок открывается поверх страницы и занимает почти весь экран: на нём
 * смотрят состояние трубы, а не любуются миниатюрой. Стрелки листают
 * подшивку по работе, не закрывая окна.
 */
dialog.окно--просмотр {
    width: min(1180px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    background: var(--surface);
}

.просмотр {
    position: relative;
    display: grid;
    place-items: center;
    background: #0b0d10;
    min-height: min(72dvh, 640px);
}

.просмотр img {
    max-width: 100%;
    max-height: min(72dvh, 640px);
    display: block;
    object-fit: contain;
}

.просмотр__ход {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.просмотр__ход:hover { background: rgba(255, 255, 255, .3); }
.просмотр__ход[hidden] { display: none; }
.просмотр__ход--назад { left: 12px; }
.просмотр__ход--вперёд { right: 12px; }

.просмотр__низ {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
}

.просмотр__имя { font-weight: 600; }
.просмотр__кто { font-size: 12px; color: var(--ink-soft); }

.плитка img { cursor: zoom-in; }

.пусто {
    text-align: center;
    color: var(--ink-faint);
    padding: 40px 20px;
}

.скрыто { display: none !important; }

/* ── снабжение ────────────────────────────────────────────────────────── */

/* На странице снабжения две таблицы подряд — материалы и журнал. Без
   подписи они читаются как одна, разорванная посередине. */
.раздел-снабжения__имя {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 22px 0 8px;
}

/* Приход и расход различаются цветом, а не только словом: в журнале на
   полсотни строк глаз ищет «что привезли» и «что выдали» пятном, а не
   чтением каждой строки. */
.движение {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.движение--приход { background: var(--ok-bg); color: var(--ok); }
.движение--расход { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); }

/* ── механизация ─────────────────────────────────────────────────────────
   Состояние машины и срок ТО — то, ради чего механик открывает перечень.
   Отличать их цветом стоит только там, где нужно действие: «в работе» —
   это норма, и подсвечивать норму значит обесценить подсветку. */
.состоянье {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface2);
    color: var(--ink-faint);
}

.состоянье--в-работе { background: var(--ok-bg); color: var(--ok); }
.состоянье--в-ремонте {
    background: color-mix(in srgb, var(--warm) 16%, transparent);
    color: var(--warm);
}

/* Просроченное ТО — не оформление, а сигнал: машину пора ставить, и чем
   дольше её не ставят, тем дороже обойдётся ремонт вместо обслуживания. */
.то--просрочено { color: var(--crit); font-weight: 600; }
.то--скоро { color: var(--warm); font-weight: 600; }

/* Отрицательный остаток — выдали больше, чем привезли. Это не оформление,
   а сигнал: либо забыли записать приход, либо материал взяли не с того
   склада, и то и другое всплывёт при сверке с заказчиком. */
.минус { color: var(--crit); font-weight: 600; }

/* Строка журнала открывается на правку — по ней надо видеть, что она живая. */
.реестр tbody tr.правится-строка { cursor: pointer; }
.реестр tbody tr.правится-строка:hover td { background: var(--surface2); }

/* Число приложенных копий паспорта. Пусто — значит ни одной, и кнопка
   должна об этом говорить словом, а не пустотой. */
.паспорта {
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.паспорта--есть {
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    color: var(--brand);
    font-weight: 600;
}

.паспорта:disabled { opacity: .45; cursor: default; }

/* ── вкладки в окне ───────────────────────────────────────────────────── */
/*
 * Копии паспорта живут на отдельной вкладке: их прикладывают не всегда и
 * не сразу, а список файлов, развёрнутый под полями, удлинял бы окно вдвое
 * ради того, что чаще пусто.
 */
.вкладки {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid var(--rule-soft);
}

.вкладка {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 14px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.вкладка:hover:not(:disabled) { color: var(--ink); }

.вкладка--выбрана {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

.вкладка:disabled { opacity: .45; cursor: default; }

.вкладка__счёт {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--field);
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.вкладка__счёт:empty { display: none; }

/* ── поля записи снабжения ────────────────────────────────────────────── */

.поля-записи {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.поля-записи__во-всю { grid-column: 1 / -1; }

/* Поле только для чтения — единица измерения приходит из справочника
   материала. Оно должно выглядеть как подпись, а не как забытое пустым
   поле ввода: иначе в него пытаются писать. */
.поля-записи input[readonly] {
    background: transparent;
    border-color: transparent;
    color: var(--ink-soft);
    padding-left: 0;
}

.флажок {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    background: var(--field);
    cursor: pointer;
    font-size: 14px;
}

.флажок input { width: auto; margin-top: 2px; }

.флажок__пояснение {
    color: var(--ink-soft);
    font-size: 12.5px;
}

@media (max-width: 620px) {
    .поля-записи { grid-template-columns: 1fr; }
}

/* ── выпуск исполнительной документации ───────────────────────────────── */

/* Полоса над таблицей отчётности: собирал ли кто-то этот участок и дошёл ли
   комплект до подписи. Инженер должен увидеть это прежде, чем нажмёт
   «Исполнительная документация» и соберёт четвёртый экземпляр подряд. */
.состояние-ид {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 14px;
    margin: 14px 0 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--surface2);
    font-size: 13.5px;
    color: var(--ink-soft);
}

.состояние-ид__кто { color: var(--ink); }

/* Состояние комплекта — три ответа, и каждый читается пятном, а не чтением:
   не выпускали, выпущена, подписана. */
.состояние {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.состояние--нет {
    background: transparent;
    color: var(--ink-faint);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.состояние--выпущена {
    background: color-mix(in srgb, var(--warm) 16%, transparent);
    color: var(--warm);
}

.состояние--подписана { background: var(--ok-bg); color: var(--ok); }

/* ── заявки ───────────────────────────────────────────────────────────── */

/* Окно заявки шире прочих: в таблице позиций девять граф, и три из них
   заполняет снабженец. В обычные 760 пикселей это влезает только боком. */
dialog.окно--широкое { width: min(1140px, calc(100vw - 32px)); }

/* Состояние заявки — шесть ответов, и по цвету видно, чья сейчас очередь:
   синим то, что ждёт тебя, серым — что у соседа, зелёным и красным — решённое. */
.путь {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.путь--черновик    { background: var(--field); color: var(--ink-soft); }
.путь--снабжения   { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.путь--возвращена  { background: var(--crit-bg); color: var(--crit); }
.путь--директора   { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); }
.путь--согласована { background: var(--ok-bg); color: var(--ok); }
.путь--отклонена   { background: var(--crit-bg); color: var(--crit); }

/* Поля прямо в строке таблицы позиций. Узкие намеренно: девять граф иначе
   не помещаются, а цена и срок — числа в три-пять знаков. */
.позиция__поле {
    width: 100%;
    min-width: 70px;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 6px;
    padding: 5px 8px;
    font: inherit;
    font-size: 13.5px;
    color: inherit;
    outline: none;
}

.позиция__поле:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.позиция__поле:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--ink);
    padding-left: 0;
}

.позиция__поле--узко { min-width: 60px; text-align: right; }
.позиция__поле--материал { min-width: 200px; }

/* Крестик убирает строку. Виден только автору и только пока заявка его. */
.позиция__убрать {
    border: none;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}

.позиция__убрать:hover { color: var(--crit); background: var(--crit-bg); }

/* ── узкий экран: на трассе смотрят с телефона ────────────────────────── */

/* ── телефон: отчётность разворачивается в карточки ───────────────────── */
/*
 * Мастер вносит объёмы прямо на трассе. Таблица в десять граф на экране
 * шириной в ладонь означает, что до поля ввода надо доскроллить вбок,
 * потеряв из виду наименование работы. Поэтому строка становится карточкой:
 * работа сверху, поле ввода — во всю ширину.
 */
@media (max-width: 760px) {
    #раздел-отчётность .реестр,
    #раздел-отчётность .реестр tbody,
    #раздел-отчётность .реестр tr,
    #раздел-отчётность .реестр td { display: block; width: auto; }

    #раздел-отчётность .реестр thead { display: none; }

    #раздел-отчётность .реестр tbody tr {
        border: 1px solid var(--rule);
        border-radius: var(--radius-sm);
        padding: 12px 14px 10px;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        align-items: center;
    }

    #раздел-отчётность .реестр tbody tr:hover td { background: transparent; }

    #раздел-отчётность .реестр td {
        border: none;
        padding: 0;
        white-space: normal;
        text-align: left;
        font-size: 13.5px;
    }

    /* Номер и наименование — шапка карточки, во всю ширину. */
    #раздел-отчётность .реестр td:nth-child(1) {
        grid-column: 1 / -1;
        font-size: 11.5px;
        color: var(--ink-faint);
    }
    #раздел-отчётность .реестр td:nth-child(1)::after { content: ''; }

    #раздел-отчётность .реестр td:nth-child(2) {
        grid-column: 1 / -1;
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 4px;
    }

    /* Единица прячется: она уже стоит рядом с числами. */
    #раздел-отчётность .реестр td:nth-child(3) { display: none; }

    /* Поле ввода — во всю ширину карточки, под пальцем. */
    #раздел-отчётность .реестр td:nth-child(5) { grid-column: 1 / -1; }
    #раздел-отчётность .реестр td:nth-child(5) .ввод-объёма {
        min-height: 42px;
        font-size: 16px;   /* меньше 16 — и телефон приближает экран при вводе */
    }

    #раздел-отчётность .реестр td:nth-child(8) { grid-column: 1 / -1; }
    #раздел-отчётность .реестр td:nth-child(9),
    #раздел-отчётность .реестр td:nth-child(10) { text-align: left; }

    #раздел-отчётность .реестр td[data-графа]::before {
        content: attr(data-графа) ': ';
        color: var(--ink-faint);
        font-size: 11.5px;
    }

    #раздел-отчётность .реестр td:nth-child(5)::before {
        display: block;
        margin-bottom: 4px;
    }

    #раздел-отчётность .свиток { overflow-x: visible; }
}

@media (max-width: 900px) {
    .кабинет {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 10px;
    }

    .меню {
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px;
    }

    .меню__марка, .меню__кто { display: none; }
    .меню__пункт { width: auto; }
    .меню__низ { margin: 0 0 0 auto; padding: 0; display: flex; }

    .страница {
        padding: 16px 14px 14px;
        min-height: 0;
    }

    .страница__имя { font-size: 22px; }
    .итоги { margin-left: 0; width: 100%; }
    .реестр thead th { position: static; }
}