/* Тема одна — тёмная. Цвета TetraBox: brand/tetrabox/tokens.css */
:root {
  --fon: #16181C;
  --panel: #1E2126;
  --pole: #22262B;
  --linia: #343A42;
  --tekst: #E6E8EB;
  --tusk: #8A94A3;
  --akcent: #F97316;
  --oshibka: #F87171;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fon); color: var(--tekst);
  font: 14px/1.4 system-ui, "Segoe UI", sans-serif; display: flex; flex-direction: column; }

header { display: flex; gap: 8px; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--linia); background: var(--panel); flex-wrap: wrap; }
header b { margin-right: 12px; font-size: 15px; }
#status { margin-left: auto; color: var(--tusk); font-size: 12px; }

/* Ни панель, ни схема не прокручиваются: всё помещается в окно.
   Прокрутка панели оставлена только аварийной — на десяток шкафов. */
html, body { overflow: hidden; }
main { flex: 1; display: flex; min-height: 0; }
aside { width: 270px; flex: none; overflow-y: auto; padding: 12px 14px;
  border-right: 1px solid var(--linia); background: var(--panel); }
#itogi { width: 270px; flex: none; overflow-y: auto; padding: 12px 14px;
  border-left: 1px solid var(--linia); background: var(--panel); }
#itogi h3:first-child { margin-top: 0; }
.cena { font-size: 26px; font-weight: 700; color: var(--akcent); }
#shema { flex: 1; min-width: 0; overflow: hidden; padding: 16px; display: flex; }
#shema svg { flex: 1; width: 100%; height: 100%; }

h3 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tusk); font-weight: 600; }

input, select, button { font: inherit; color: var(--tekst); background: var(--pole);
  border: 1px solid var(--linia); border-radius: 6px; padding: 4px 7px; min-width: 0; }
input[type=number] { width: 100%; text-align: right; -moz-appearance: textfield; }
/* стрелки съедали узкое поле: в «ячеек в колонке» от 11 оставалось «1» */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus { outline: none; border-color: var(--akcent); }
input.imya { width: 100%; font-weight: 600; }
button { cursor: pointer; }
button:hover { border-color: var(--akcent); }
button.tihaya { color: var(--tusk); }
button.mal { padding: 2px 6px; font-size: 12px; }

/* по три: со стрелками в четверть панели не влезало «196,4» */
.setka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.setka label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--tusk); }
.setka input { width: 100%; }

/* шкаф в две строки: панель шириной с правую, 270 px */
.shkaf { border: 1px solid var(--linia); border-radius: 8px; padding: 6px; margin-bottom: 6px; }
.shkaf .verh { display: flex; gap: 2px; margin-bottom: 4px; }
.shkaf .verh input { flex: 1; margin-right: 4px; }
.shkaf .niz { display: flex; gap: 6px; }
.shkaf .niz label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--tusk); }
.shkaf .niz > label:nth-child(-n+2) input { width: 56px; }
/* «ячеек в колонках» — сколько осталось: две колонки встают в строку */
.shkaf .niz > label:last-child { flex: 1; min-width: 0; }
.kolonki { display: flex; gap: 3px; flex-wrap: wrap; }
/* ярусы шкафа (06.11.2026): заголовок «Ярус N  ✕», под ним строка полей */
.shkaf .yarus { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--linia); }
.shkaf .yarus-zag { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 2px; }
.shkaf .yarusy-niz { margin-top: 6px; }
.shkaf .niz.odna > label:last-child { flex: 0 0 auto; }
.kolonki input { width: 46px; }
.oshibki { grid-column: 1 / -1; font-size: 12px; }
.oshibki:empty { display: none; }
.itog { color: var(--tusk); font-size: 12px; margin-top: 4px; }
.itog:empty { display: none; }
.oshibka { color: var(--oshibka); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
td { padding: 3px 0; border-bottom: 1px solid var(--linia); }
td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; }
tr.vsego td { font-weight: 600; border-bottom: none; }

/* display: flex у #shema иначе перебивает атрибут hidden */
[hidden] { display: none !important; }

/* вкладки */
nav { display: flex; gap: 2px; margin-right: 12px; }
.vkl { border-radius: 6px; background: transparent; border-color: transparent; color: var(--tusk); }
.vkl.akt { background: var(--pole); border-color: var(--akcent); color: var(--tekst); }

/* вкладка «Цены» */
#ceny { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }
#ceny .tolko-smotret { margin: 0 0 10px; color: var(--tusk); }
#ceny input:disabled { opacity: 1; color: var(--tusk); cursor: default; }
#ceny input:disabled + .strelki, #ceny .chislo:has(input:disabled) .strelki { display: none; }
.kartochki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.kolonka { display: flex; flex-direction: column; gap: 10px; }
.kartochka { background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 10px 12px; }
.kartochka.shire { grid-column: 1 / -1; }
.kartochka h3 { margin-top: 0; }
.ceny-polya { display: grid; grid-template-columns: 1fr 80px auto; gap: 4px 8px; align-items: center; }
.ceny-polya label, .korpusa label { display: flex; justify-content: space-between; gap: 6px; color: var(--tusk); white-space: nowrap; }
/* длинная подпись ставки переносится, а не выталкивает поле за карточку (02.11.2026) */
.ceny-polya label { white-space: normal; align-items: center; line-height: 1.25; }
.ceny-polya label small { white-space: nowrap; }
label small, .korpusa small { color: #5F6875; }
label.svoe { color: var(--akcent); }
.sbros { color: var(--akcent); white-space: nowrap; }
/* комплект терминала — таблица: позиция | цена | ✕, итог внизу */
table.terminal { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
table.terminal th { font-size: 11px; font-weight: normal; color: var(--tusk); text-align: left; padding: 0 4px 4px; }
table.terminal th:nth-child(2) { width: 96px; }
table.terminal th:nth-child(3) { width: 30px; }
table.terminal td { padding: 3px 4px; border-top: 1px solid var(--linia); vertical-align: middle; }
table.terminal td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.terminal .ch { text-align: right; font-variant-numeric: tabular-nums; }
table.terminal td input { width: 100%; }
table.terminal td.ch input { text-align: right; }
table.terminal tfoot td { font-weight: 600; border-top: 2px solid var(--linia); padding-top: 6px; }
.korpusa { display: grid; grid-template-columns: 1fr auto 90px; gap: 4px 8px; align-items: center; }
.korpusa label { overflow: hidden; text-overflow: ellipsis; }
.korpusa > span { font-size: 11px; color: var(--tusk); }
.korpusa .formula { color: var(--tekst); font-size: 13px; text-align: right; }
.pometka { color: var(--akcent); font-size: 12px; }

/* вкладка «КП»: поля слева шириной с панель, лист справа */
#kp { flex: 1; min-width: 0; display: flex; }
.kp-panel { width: 270px; flex: none; padding: 12px 14px; background: var(--panel);
  border-right: 1px solid var(--linia); display: flex; flex-direction: column; gap: 6px; }
.kp-panel h3 { margin: 6px 0 0; }
.kp-panel h3:first-child { margin-top: 0; }
.kp-panel label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--tusk); }
.kp-panel label.galka { flex-direction: row; align-items: center; gap: 8px; color: var(--tekst); font-size: 14px; }
.kp-panel input[type=date] { color-scheme: dark; }
#kp-list { flex: 1; border: 0; background: #d9dce1; }
#kp { position: relative; }
/* следующая версия КП раскладывается листами здесь, невидимо, поверх #kp-list */
.kp-zapas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; pointer-events: none; }
.kp-panel { overflow-y: auto; }
.kp-panel select { width: 100%; }
.kp-panel .dve { display: flex; gap: 6px; }
.kp-panel .dve label { flex: 1; min-width: 0; }
.kp-panel button[disabled] { opacity: .6; cursor: wait; }

/* карточка выбранной ячейки */
.karta { border: 1px solid var(--akcent); border-radius: 8px; padding: 8px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px; }
.karta .verh { display: flex; align-items: baseline; gap: 6px; }
.karta .verh .itog { flex: 1; margin: 0; }
.karta label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--tusk); }
.knopki-yach { display: flex; gap: 4px; flex-wrap: wrap; }
.knopki-yach button[disabled] { opacity: .4; cursor: default; }
.kolonki input.svoya { border-color: var(--akcent); }
.karta { gap: 4px; padding: 6px 8px; }
.karta .dve { display: flex; gap: 6px; }
.karta .dve label { flex: 1; min-width: 0; }
.karta .verh b { white-space: nowrap; }
/* карточка ячейки — окошком в левом нижнем углу схемы */
main { position: relative; }
#karta { position: absolute; left: 286px; bottom: 16px; width: 270px; z-index: 2; }
#karta .karta { margin: 0; background: var(--panel); box-shadow: 0 6px 24px rgba(0,0,0,.45); }
#karta.sprava { left: auto; right: 286px; }

/* вход */
body.vhod { display: flex; align-items: center; justify-content: center; padding: 16px; }
#vhod { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
#vhod h1 { margin: 0; font-size: 20px; }
#vhod label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tusk); }
#vhod button { background: var(--akcent); border-color: var(--akcent); color: #16181C; font-weight: 600; padding: 7px; }

/* шапка: кто вошёл */
#kto { color: var(--tusk); font-size: 12px; margin-left: 12px; }

/* вкладка «Менеджеры» */
#lyudi, #sborka { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }
.kartochki.dve-kol { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
table.lyudi th { text-align: left; font-size: 11px; color: var(--tusk); font-weight: 600; padding: 4px 6px 4px 0; }
table.lyudi td { padding: 3px 6px 3px 0; }
table.lyudi td:last-child { text-align: left; }
table.lyudi input:not([type=checkbox]), table.lyudi select { width: 100%; }
.kp-panel.plain { width: auto; padding: 0; border: 0; background: none; }

/* ── калькулятор на сайте (klient.html, tetrabox.ru/kalkulyator/) ── */
.logotip { text-decoration: none; margin-right: 6px; }
.logotip b { color: var(--tekst); letter-spacing: .04em; font-size: 15px; }
.logotip span { color: var(--akcent); }
.na-sait { color: var(--tusk); text-decoration: none; font-size: 13px; margin-left: 12px; }
.na-sait:hover { color: var(--akcent); }
#itogi.klient { display: flex; flex-direction: column; }
.otpravit { margin-top: auto; width: 100%; padding: 14px; font-size: 17px; font-weight: 700;
  background: var(--akcent); border-color: var(--akcent); color: #16181C; border-radius: 10px; }
.otpravit:hover { background: #ff8c26; border-color: #ff8c26; }
#itogi.klient > h3:first-child + .cena { margin-bottom: 2px; }

dialog#forma { width: min(440px, calc(100vw - 32px)); background: var(--panel); color: var(--tekst);
  border: 1px solid var(--linia); border-radius: 12px; padding: 20px; }
dialog#forma::backdrop { background: rgba(0, 0, 0, .6); }
#forma-zayavki { display: flex; flex-direction: column; gap: 10px; }
#forma-zayavki h2 { margin: 0; font-size: 20px; }
#forma-zayavki label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tusk); }
#forma-zayavki textarea, .kp-panel textarea { font: inherit; color: var(--tekst); background: var(--pole); border: 1px solid var(--linia);
  border-radius: 6px; padding: 6px 8px; resize: vertical; }
#forma-zayavki textarea:focus, .kp-panel textarea:focus { outline: none; border-color: var(--akcent); }
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knopki-formy { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
button.glavnaya { background: var(--akcent); border-color: var(--akcent); color: #16181C; font-weight: 700; padding: 8px 18px; }
button.glavnaya[disabled] { opacity: .6; cursor: wait; }

/* Узкий экран: колонки друг под другом, прокрутка разрешена — на телефоне
   три колонки рядом не помещаются ни при каком масштабе */
@media (max-width: 1000px) {
  body[data-rezhim="klient"] { height: auto; overflow: visible; }
  html:has(body[data-rezhim="klient"]) { overflow: visible; height: auto; }
  body[data-rezhim="klient"] main { flex-direction: column; }
  body[data-rezhim="klient"] aside, body[data-rezhim="klient"] #itogi { width: auto; border: 0; border-bottom: 1px solid var(--linia); overflow: visible; }
  body[data-rezhim="klient"] #shema { min-height: 70vh; }
  body[data-rezhim="klient"] #karta { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }
  body[data-rezhim="klient"] .otpravit { margin-top: 16px; }
}

/* ── числовые поля: стрелки и пределы (17.10.2026) ── */
.chislo { position: relative; display: block; min-width: 0; }
.kolonki .chislo { display: inline-block; }
.chislo input[type=number] { padding-right: 17px; }
.strelki { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 14px;
  display: flex; flex-direction: column; border-left: 1px solid var(--linia); border-radius: 0 5px 5px 0; overflow: hidden; }
.strelki button { flex: 1; padding: 0; border: 0; border-radius: 0; background: var(--pole); color: var(--tusk);
  font-size: 7px; line-height: 1; cursor: pointer; min-height: 0; }
.strelki button + button { border-top: 1px solid var(--linia); }
.strelki button:hover { color: #16181C; background: var(--akcent); }
input.neverno, input.neverno:focus { border-color: var(--oshibka); background: rgba(248, 113, 113, .12); }
/* галочка «Сервисная ячейка» — в строку, а не столбиком, как поля карточки */
.karta label.galka { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); cursor: pointer; }
.karta label.galka input { margin: 0; accent-color: var(--akcent); }
/* цвет корпуса в КП — образцами (21.10.2026) */
.cveta-blok { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tusk); }
.cveta { display: flex; flex-wrap: wrap; gap: 6px; }
.cveta .cvet { width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--linia); cursor: pointer; }
.cveta .cvet:hover { border-color: var(--tusk); }
.cveta .cvet.vybran { outline: 2px solid var(--akcent); outline-offset: 2px; }
.cvet-imya { color: var(--tekst); font-size: 13px; }
.kp-panel .gotov { color: var(--akcent); font-size: 12px; margin: 4px 0 6px; }
.kp-panel input[readonly] { color: var(--tusk); cursor: default; }
/* постоянные расчёта — свёрнуто внизу панели, чтобы не мешали (22.10.2026) */
.postoyannye { margin-top: 10px; font-size: 11px; color: var(--tusk); }
.postoyannye summary { cursor: pointer; user-select: none; }
.postoyannye summary:hover { color: var(--tekst); }
.postoyannye table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.postoyannye td { padding: 1px 0; font-size: 11px; border: 0; color: var(--tusk); }
.postoyannye td:last-child { text-align: right; color: var(--tekst); white-space: nowrap; }
/* вкладка «Сборка» */
table.terminal.sborka th:nth-child(2) { width: 160px; }
table.terminal.sborka th.ch { width: 96px; }
table.terminal.sborka th.ch.kol { width: 80px; }
table.terminal.sborka th.dey { width: 64px; }
table.terminal.sborka td { padding: 6px 4px; }
table.terminal.sborka td.kto { color: var(--tusk); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.terminal.sborka td.dey { white-space: nowrap; text-align: right; }
dialog#okno .polya-okna { display: flex; flex-wrap: wrap; gap: 12px; }
dialog#okno .pole-okna { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tusk); }
dialog#okno .pole-okna.uzkoe { flex: 1 1 40%; }
dialog#okno .pole-okna input, dialog#okno .pole-okna select { font-size: 15px; width: 100%; }
#sborka table.terminal .pusto { color: var(--tusk); text-align: center; padding: 10px; }
.sb-prodazha { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--tusk); margin-bottom: 10px; max-width: 220px; }
.sb-prodazha input { text-align: right; }
table.sb-itog td:last-child { text-align: right; color: var(--tekst); font-variant-numeric: tabular-nums; }
table.sb-itog td small { color: var(--tusk); font-size: 11px; }
table.sb-itog tr.vsego td { font-weight: 600; font-size: 15px; border-top: 2px solid var(--linia); border-bottom: 0; padding-top: 6px; }
table.sb-itog td.oshibka { color: var(--oshibka); }
#panel .zayavka { margin: 6px 0 0; font-size: 12px; color: var(--akcent); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#panel .vedet { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--tusk); white-space: nowrap; }
#panel .vedet b { color: var(--tekst); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#panel .vedet button { margin-left: auto; flex: none; }
.knopki-postamata { display: flex; gap: 6px; margin-top: 6px; }
.knopki-postamata [data-d=udalit] { margin-left: auto; }
.knopki-paneli {display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* окно подтверждения — своё вместо confirm/alert браузера */
dialog#okno { width: min(420px, calc(100vw - 32px)); background: var(--panel); color: var(--tekst);
  border: 1px solid var(--linia); border-radius: 12px; padding: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
dialog#okno::backdrop { background: rgba(0, 0, 0, .6); }
dialog#okno form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
dialog#okno h2 { margin: 0; font-size: 18px; }
dialog#okno p { margin: 0; font-size: 14px; line-height: 1.5; }
button.opasnaya { background: var(--oshibka); border-color: var(--oshibka); color: #16181C; font-weight: 700; padding: 8px 18px; }
button.opasnaya:hover { filter: brightness(1.1); }
/* «Отправить копию расчёта себе» — в строку, а не столбиком, как поля формы */
#forma-zayavki label.galka { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst); cursor: pointer; }
#forma-zayavki label.galka input { margin: 0; accent-color: var(--akcent); }
/* оборудование постамата — узкая карточка: название забирает остаток ширины */
table.terminal.oborud th.kol { width: 70px; }
table.terminal.oborud th.ch { width: 96px; }
table.terminal.oborud th.dey { width: 64px; }
table.terminal.oborud td { padding: 6px 4px; }
table.terminal.oborud td:first-child { white-space: normal; line-height: 1.25; }
table.terminal.oborud td.dey { white-space: nowrap; text-align: right; }
.kolonka.shire2 { grid-column: span 2; }
table.terminal.oborud th.galka { width: 30px; }
table.terminal.oborud td.galka { text-align: center; }
table.terminal.oborud td.galka input { width: auto; accent-color: var(--akcent); cursor: pointer; }
table.terminal.oborud tr.snyato td:not(.galka):not(.dey) { color: var(--tusk); text-decoration: line-through; }
table.terminal.oborud td.ch small { display: block; font-size: 10px; color: var(--tusk); white-space: nowrap; }
/* «Войти как»: администратор смотрит глазами менеджера — шапка оранжевой полосой */
body.kak-rezhim header { box-shadow: inset 0 -3px 0 var(--akcent); }
#kto .kak { color: var(--akcent); }
#kto .kak b { color: var(--akcent); }
#kto .kak-nazad { margin-left: 8px; border-color: var(--akcent); color: var(--akcent); }
/* каталог (комплект по умолчанию): «В постамат» и «✓ в постамате» в строке */
table.terminal.oborud td.dey .v-nabore { font-size: 11px; color: var(--tusk); margin-right: 6px; }
table.terminal.oborud td.dey [data-d=kt-v-postamat] { margin-right: 6px; }
table.terminal.oborud.kt th.dey { width: 170px; }
table.terminal.oborud.kt tr.snyato td:not(.galka):not(.dey) { text-decoration: none; }
table.terminal.oborud td small.ekran { display: block; font-size: 10px; color: var(--tusk); }

/* позиция: фото, ссылка на товар, выше/ниже (03.11.2026) */
.kolonka.shire3 { grid-column: 1 / -1; }
table.terminal.oborud .poz { display: flex; align-items: center; gap: 8px; }
table.terminal.oborud img.foto { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 4px; display: block; flex: none; }
table.terminal.oborud a.ssylka { color: var(--akcent); text-decoration: none; font-weight: 600; }
table.terminal.oborud.ob th.dey { width: 120px; }
table.terminal.oborud.kt th.dey { width: 230px; }
table.terminal.oborud td.dey button[disabled] { opacity: .25; cursor: default; }

/* перестановка позиций за ⋮ (03.11.2026) */
table.terminal.oborud th.tyanut { width: 18px; }
table.terminal.oborud td.tyanut { cursor: grab; color: var(--tusk); text-align: center; font-size: 16px; user-select: none; padding: 0; }
table.terminal.oborud td.tyanut:hover { color: var(--tekst); }
table.terminal.oborud tr.tyanem { opacity: .4; }
table.terminal.oborud tr.syuda-verh td { box-shadow: inset 0 2px 0 var(--akcent); }
table.terminal.oborud tr.syuda-niz td { box-shadow: inset 0 -2px 0 var(--akcent); }
table.terminal.oborud.ob th.dey { width: 64px; }
table.terminal.oborud.kt th.dey { width: 170px; }
table.terminal.oborud th:not([class]) { width: auto; }   /* название — вся остальная ширина */