/* Интерфейс рассчитан на человека за пятьдесят, который не айтишник.
   Отсюда: крупный шрифт, высокий контраст, большие кнопки, много воздуха,
   никаких иконок вместо слов и никаких всплывающих окон. */

:root {
  --tekst: #17202a;
  --tekst-tikhiy: #5b6b7c;
  --fon: #f4f6f8;
  --karta: #ffffff;
  --granica: #d3dae1;
  --sinii: #1a5fb4;
  --sinii-temnyy: #14488a;
  --zelenyy: #1d7a45;
  --krasnyy: #b3261e;
  --zheltyy: #fff6d6;
  --zheltyy-granica: #e0c060;
  --rozovyy: #fdeaea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--fon);
}

/* ------------------------------------------------------------- шапка */

header.verkh {
  background: var(--karta);
  border-bottom: 2px solid var(--granica);
  padding: 9px 24px;
}

header.verkh .imya {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

header.verkh nav { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1 1 auto; min-width: 0; }
nav a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tekst);
  font-weight: 600;
  border: 1px solid transparent;
}
nav a:hover { background: var(--fon); }
nav a.tekushchiy { background: var(--sinii); color: #fff; }

main { max-width: 1500px; margin: 0 auto; padding: 24px; }
/* Страница заказа: таблица щита широкая, ей нужна вся ширина окна */
main.shirokaya { max-width: none; }

h1 { font-size: 27px; margin: 0 0 6px; }
h2 { font-size: 21px; margin: 28px 0 10px; }
h3 { font-size: 18px; margin: 20px 0 8px; }
p.podskazka { color: var(--tekst-tikhiy); margin: 0 0 20px; max-width: 90ch; }

/* -------------------------------------------------------------- блоки */

.karta {
  background: var(--karta);
  border: 1px solid var(--granica);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.ryad { display: flex; gap: 20px; flex-wrap: wrap; }
.ryad > * { flex: 1 1 320px; }

.plitki { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.plitka {
  background: var(--karta);
  border: 1px solid var(--granica);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 150px;
}
.plitka .chislo { font-size: 28px; font-weight: 700; line-height: 1.1; }
.plitka .podpis { color: var(--tekst-tikhiy); font-size: 14px; }

/* ------------------------------------------------------------ кнопки */

.knopka, button, input[type=submit] {
  display: inline-block;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid var(--sinii);
  background: var(--sinii);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.knopka:hover, button:hover { background: var(--sinii-temnyy); }
.knopka.tikhaya, button.tikhaya {
  background: var(--karta); color: var(--tekst); border-color: var(--granica);
}
.knopka.tikhaya:hover, button.tikhaya:hover { background: var(--fon); }
.knopka.zelenaya, button.zelenaya { background: var(--zelenyy); border-color: var(--zelenyy); }
.knopka.opasnaya, button.opasnaya { background: var(--krasnyy); border-color: var(--krasnyy); }
.knopka.melkaya, button.melkaya { padding: 6px 12px; font-size: 15px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- формы */

label { display: block; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=password], input[type=number], input[type=file],
select, textarea {
  width: 100%;
  padding: 11px 13px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--granica);
  border-radius: 8px;
  background: #fff;
  color: var(--tekst);
}
select[multiple] { min-height: 190px; }
textarea { min-height: 90px; }
.pole-uzkoe { max-width: 320px; }

/* -------------------------------------------------------------- таблицы */

table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--granica); vertical-align: top; }
th { background: #eef1f4; font-weight: 700; position: sticky; top: 0; }
tr.podozritelnaya td { background: var(--rozovyy); }
tr.zagolovok-izdeliya td { background: #e8edf2; font-weight: 700; }
td.chislo, th.chislo { text-align: right; white-space: nowrap; }
.obertka-tablicy { overflow-x: auto; max-height: 74vh; }

/* --------------------------------------------------------------- метки */

.metka {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.metka.khorosho { background: #dff3e6; color: var(--zelenyy); }
.metka.plokho { background: #fbe3e2; color: var(--krasnyy); }
.metka.zhdet { background: var(--zheltyy); color: #7a5c00; }
.metka.tikhaya { background: #e9edf1; color: var(--tekst-tikhiy); }

.soobshchenie {
  padding: 14px 18px; border-radius: 9px; margin-bottom: 18px;
  border-left: 5px solid var(--sinii); background: #e8f0fb;
}
.soobshchenie.plokho { border-left-color: var(--krasnyy); background: var(--rozovyy); }
.soobshchenie.vnimanie { border-left-color: var(--zheltyy-granica); background: var(--zheltyy); }
.soobshchenie.khorosho { border-left-color: var(--zelenyy); background: #e5f4ea; }
.soobshchenie b { display: block; margin-bottom: 3px; }

.tikho { color: var(--tekst-tikhiy); font-size: 14px; }

/* ------------------------------------------------------------- прогресс */

.rabota {
  background: #eef3fa; border: 1px solid #b9cded; border-radius: 9px;
  padding: 14px 18px; margin-bottom: 18px;
}
.rabota .stroka { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

/* --------------------------------------------------------------- прочее */

details { margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pusto { padding: 40px; text-align: center; color: var(--tekst-tikhiy); }
form.vstroennaya { display: inline; }
hr { border: none; border-top: 1px solid var(--granica); margin: 22px 0; }
code { background: #eef1f4; padding: 1px 6px; border-radius: 4px; font-size: 14px; }

/* ------------------------------------------------------------ страница входа */

body.stranica-vkhoda {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
main.vkhod { max-width: 460px; width: 100%; padding: 24px; }
main.vkhod .karta { padding: 32px; }
main.vkhod button { width: 100%; padding: 14px; font-size: 18px; }

/* ------------------------------------------------------------ верхняя строка */
/* «Перечень», вкладки и «Выйти» в одну строку: шапка не съедает экран. */

header.verkh .ryad-verkha {
  display: flex; align-items: center; gap: 8px 20px;
}
header.verkh .sprava {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-left: auto; flex: none;
}
.soobshchenie.odna-stroka { padding: 9px 16px; }
header.verkh .sprava a, header.verkh .sprava button {
  font-size: 14px; padding: 7px 13px;
}

/* ------------------------------------------------------------ главная */
/* Сверху короткая загрузка: файл и кнопка в одну строку, всё необязательное
   свёрнуто. Сразу под ней список заказов, он нужен каждый день. */

.zagruzka { padding-top: 16px; padding-bottom: 12px; }
.ryad-zagruzki { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.ryad-zagruzki input[type=file] { flex: 1 1 260px; min-width: 0; }
.ryad-zagruzki button { flex: none; }
p.podskazka-zagruzki { margin: 8px 0 0; }
.zagruzka details { margin: 8px 0 0; }
.zagruzka details[open] > summary { margin-bottom: 4px; }
.zagruzka h3 { margin: 18px 0 0; }
.poisk-zakazov { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.poisk-zakazov input[type=text] { flex: 1 1 260px; max-width: 560px; }

/* ------------------------------------------------ возврат к своей строке */
/* После правки страница открывается на той строке или том щите, который
   правили. Отступ сверху, чтобы строку не закрывала шапка таблицы. Рамка
   вокруг всей строки, без мигания и анимации: движение отвлекает. Рамку
   рисуем тенью на ячейках, потому что обводку самой строки таблицы
   браузеры рисуют по-разному. */

tr[id], [id^="izd-"] { scroll-margin-top: 80px; }
tr:target td {
  box-shadow: inset 0 2px 0 var(--sinii), inset 0 -2px 0 var(--sinii);
}
tr:target td:first-child {
  box-shadow: inset 2px 0 0 var(--sinii), inset 0 2px 0 var(--sinii), inset 0 -2px 0 var(--sinii);
}
tr:target td:last-child {
  box-shadow: inset -2px 0 0 var(--sinii), inset 0 2px 0 var(--sinii), inset 0 -2px 0 var(--sinii);
}
details.shchit:target > summary h2 { color: var(--sinii); }

/* ------------------------------------------------ страница заказа: верх */
/* Главное наверху: заголовок, одна серая строка, плитки и одна строка
   действий. Всё, что меняют редко, свёрнуто внизу в «Настройках заказа». */

p.svodka-zakaza { margin: 0 0 16px; }
.deystviya-zakaza {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px;
}
.deystviya-zakaza form { margin: 0; }
.filtr-proverki {
  display: flex; align-items: center; gap: 9px; margin: 0 0 0 6px; font-weight: 600;
}
.filtr-proverki input { width: auto; margin: 0; }
#net-problemnykh { margin: 0 0 10px; }
p.stroka-pravil { margin: 0 0 4px; max-width: 110ch; }
p.stroka-chernovoy { margin: 0 0 18px; }

/* Три формы настроек заказа: у каждой своя кнопка, между ними черта */
.nastroyka-zakaza { margin: 14px 0 0; }
.nastroyka-zakaza + .nastroyka-zakaza {
  border-top: 1px solid var(--granica); margin-top: 22px; padding-top: 4px;
}
.nastroyka-zakaza h3 { margin: 14px 0 0; }
.nastroyka-zakaza .pravila { margin: 16px 0 14px; }
.ryad-poley { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.ryad-poley > div { flex: 1 1 210px; }
.ryad-poley > .knopka-v-ryadu { flex: 0 0 auto; }

/* ------------------------------------------ страница заказа: щиты и строки */
/* «Листы заказа» наверху: плотная таблица-оглавление с итогами по листам.
   Каждый щит сворачивается в одну строку с итогом. Таблица щита без своей
   вертикальной прокрутки: страница листается одна, а вбок таблица
   прокручивается внутри своей обёртки, если не помещается. */

table.plotnaya td, table.plotnaya th { padding: 6px 10px; }
table.plotnaya th { position: static; }
table.plotnaya tr.itogo td { font-weight: 700; background: #eef1f4; border-bottom: none; }
td.bez-perenosa { white-space: nowrap; }

.listy-zakaza {
  background: var(--karta); border: 1px solid var(--granica); border-radius: 10px;
  padding: 6px 16px 10px; margin: 0 0 8px;
}
.listy-zakaza > summary { font-size: 18px; }
.listy-zakaza .obertka-tablicy { max-height: none; }

details.shchit { margin: 22px 0 6px; }
details.shchit > summary { padding: 6px 0 8px; font-weight: 400; }
details.shchit > summary h2 { display: inline; font-size: 21px; margin: 0; }
details.shchit > summary .itog-shchita { font-size: 17px; }
details.shchit > summary .metka { margin-left: 6px; vertical-align: 2px; }
p.sobran-s-listov {
  margin: 0 0 10px; padding: 6px 12px; border-radius: 8px; display: inline-block;
  background: var(--zheltyy); border-left: 4px solid var(--zheltyy-granica);
}

.shchit .karta.tablica-shchita { padding: 0; margin-bottom: 6px; }
.shchit .obertka-tablicy { max-height: none; }
table.perechen { min-width: 780px; }
table.perechen th { position: static; }
table.perechen .kol-nomer { width: 40px; }
table.perechen .kol-kolvo { width: 120px; }
table.perechen .kol-cena { width: 130px; }
table.perechen .kol-summa { width: 120px; }
table.perechen .kol-deystviya { width: 165px; }
table.perechen td.chislo .tikho { white-space: normal; }
.prichiny { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.zamechanie-podbora {
  margin-top: 4px; padding: 3px 9px; border-radius: 8px; font-size: 14px;
  background: var(--zheltyy); color: #7a5c00;
}

/* «Выбрать другое» строкой, под ним «Править» и «Убрать» рядом: три кнопки
   столбиком делали каждую строку таблицы втрое выше её текста. */
td.deystviya { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
td.deystviya .knopka, td.deystviya button {
  display: block; width: 100%; margin: 0; text-align: center; padding: 5px 8px;
}
td.deystviya > .knopka { margin-bottom: 6px; }
td.deystviya .dve-knopki { display: flex; gap: 6px; }
td.deystviya .dve-knopki > * { flex: 1 1 0; }
td.deystviya form { margin: 0; }
td.deystviya button.ubrat { color: var(--krasnyy); }
/* «Проверено» у розовой строки: над «Выбрать другое», зелёным словом. */
td.deystviya form.provereno { margin-bottom: 6px; }
td.deystviya button.provereno { color: var(--zelenyy); }

/* Количество и своя цена прямо в клетке. «ОК» показывается, только когда
   в поле что-то поменяли, иначе в каждой строке висело бы по две кнопки. */
table.perechen input.bystroe { padding: 5px 7px; font-size: 16px; text-align: right; }
table.perechen input.bystroe-kol { width: 4.2em; }
td.kolvo-stroki .ed { margin-left: 3px; }
td.cena-stroki label.nds {
  display: flex; justify-content: flex-end; align-items: center; gap: 5px;
  margin: 4px 0 0; font-weight: 400; font-size: 14px; color: var(--tekst-tikhiy);
}
table.perechen button.ok:not([hidden]) { display: block; margin: 5px 0 0 auto; padding: 4px 14px; }
/* Общее правило button { display: inline-block } сильнее стандартного
   скрытия [hidden]: без этой строки «ОК» было видно в каждой строке. */
table.perechen button.ok[hidden] { display: none; }
p.podskazka-stroki { margin: 0 0 6px; }
label.s-nds { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0 0 12px; }

tr.pravka > td { background: #f7f9fb; padding: 10px 14px 12px; }
tr.podozritelnaya + tr.pravka > td { background: #fbf3f3; }
.polya-pravki { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.polya-pravki > div { flex: 1 1 220px; }
.polya-pravki > .pole-naimenovanie { flex: 3 1 380px; }
.polya-pravki > .pole-chislo { flex: 0 0 96px; }
.polya-pravki label { margin: 4px 0 4px; font-size: 15px; }
.polya-pravki input[type=text], tr.dobavit input[type=text] { padding: 8px 10px; font-size: 16px; }
p.knopki-pravki { margin: 10px 0 0; }

tr.dobavit > td { background: #fbfcfd; border-bottom: none; }
tr.dobavit label { margin: 0 0 4px; font-size: 14px; color: var(--tekst-tikhiy); }
tr.dobavit input.dobavit-ed { margin-top: 6px; }

.podval-shchita { display: flex; flex-wrap: wrap; gap: 0 26px; align-items: flex-start; }
.podval-shchita > details { margin: 0 0 6px; }
.podval-shchita > details[open] { flex: 1 1 100%; }
.podval-shchita .karta { margin: 6px 0 10px; }

/* ------------------------------------------------------------ телефон */

@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 14px; }
  header.verkh { padding: 10px 14px; }
  /* «Перечень» и «Выйти» строкой, вкладки переносятся под них */
  header.verkh .ryad-verkha { flex-wrap: wrap; }
  header.verkh nav { order: 3; flex-basis: 100%; }
  nav a { padding: 8px 12px; font-size: 15px; }
  .ryad > * { flex: 1 1 100%; }
  .plitka { min-width: 120px; flex: 1 1 40%; }
  .plitka .chislo { font-size: 22px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .karta { padding: 14px; }
  table { font-size: 14px; }
  th, td { padding: 7px 8px; }
  .knopka, button, input[type=submit] { padding: 11px 16px; font-size: 16px; }
}

/* ------------------------------------------------------ правила подбора */
/* Выбор крупными «таблетками»: по ним легче попасть, чем по кружку радио,
   и сразу видно, что выбрано. Сам input остаётся для клавиатуры и чтецов. */

.pravila {
  border: 1px solid var(--granica); border-radius: 10px;
  padding: 16px 18px 8px; margin: 18px 0; background: #fbfcfd;
}
.pravila-zagolovok { margin: 0 0 4px; font-size: 19px; }
.pravila-vvod { color: var(--tekst-tikhiy); margin: 0 0 6px; max-width: 90ch; }
.pravilo { border: none; border-top: 1px solid var(--granica); margin: 8px 0 0; padding: 12px 0 8px; min-width: 0; }
.pravilo legend { float: left; width: 100%; padding: 0; font-weight: 700; font-size: 17px; }
.pravilo legend + * { clear: both; }
.vopros { font-weight: 600; margin: 12px 0 6px; }
.pravilo legend + .vopros { margin-top: 4px; }
.poyasnenie { color: var(--tekst-tikhiy); font-size: 15px; margin: 6px 0 4px; max-width: 90ch; }
.vybor { display: flex; flex-wrap: wrap; gap: 8px; }
.vybor label { display: inline-block; position: relative; margin: 0; font-weight: 500; }
.vybor input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vybor span {
  display: inline-block; padding: 8px 15px; line-height: 1.3; cursor: pointer;
  border: 1px solid var(--granica); border-radius: 999px; background: #fff;
}
.vybor span:hover { border-color: var(--sinii); }
.vybor input:checked + span { background: var(--sinii); border-color: var(--sinii); color: #fff; }
.vybor input[type=checkbox]:checked + span::before { content: "✓ "; }
.vybor input:focus-visible + span { outline: 3px solid #9cc0f0; outline-offset: 2px; }
.postavshchiki {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px 18px; margin-top: 8px;
}
.postavshchiki label { margin: 0 0 4px; font-size: 15px; }
.postavshchiki select { padding: 8px 10px; font-size: 16px; }
.zapomnit {
  display: flex; align-items: flex-start; gap: 9px; font-weight: 500;
  margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--granica);
}
.zapomnit input { width: auto; margin-top: 5px; }
@media (max-width: 760px) {
  .pravila { padding: 12px 12px 6px; }
  .vybor span { padding: 8px 12px; }
}

/* Галочки «у кого брать»: несколько поставщиков на группу, по очереди */
.gruppa-postavshchikov { padding: 7px 0; border-bottom: 1px solid var(--granica); }
.gruppa-postavshchikov:last-child { border-bottom: 0; }
.podpis-gruppy { font-weight: 600; margin-bottom: 4px; }
.vybor-postavshchikov { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vybor-postavshchikov label { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; margin: 0; }
.vybor-postavshchikov input { width: auto; margin: 0; }

.galochka { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 6px 0; }
.galochka input { width: auto; margin: 0; }

/* «Программа заметила»: повторяющиеся правки человека и что с ними делать */
.nakhodki { border-left: 4px solid var(--sinii); }
.nakhodka { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--granica); }
.nakhodka span { flex: 1 1 320px; }