/* ==========================================================================
   ИСБ. Макеты экранных форм. Версия 0.2
   Оформление воспроизводит язык интерфейса замещаемой системы ХЭТ:
   светлая рабочая область, индиго-фиолетовая обвязка, шапка таблицы
   вывороткой, строка отбора под шапкой, постраничный вывод, цветовая
   индикация строк по результату проверки, тёмные плитки рабочего стола.
   Веб-интерфейс — целевая технология: логика остаётся в 1С, обмен через
   HTTP-сервисы расширения.
   Данные синтетические. Реальные адреса, учётные данные, персональные
   данные, идентификационные номера и счета не используются (NFR-07).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
:root{
  /* обвязка */
  --brand:#1f47cf; --brand-2:#2f5ae0; --brand-3:#15329e; --brand-ink:#fff;
  --brand-soft:#e9f0ff; --brand-line:#b4c6ef;
  /* рабочая область */
  --bg:#eef0f6; --paper:#fff; --ink:#1b1e2b; --ink-2:#454a5e; --ink-3:#7b8194;
  --line:#c9ccd8; --line-2:#e4e7ef; --head:#1f47cf; --head-ink:#fff;
  --sel:#dbe6ff;
  /* состояния */
  --ok:#1a7f43; --ok-bg:#e7f6ec; --err:#cf2a27; --err-bg:#fdecec;
  --warn:#8a5a00; --warn-bg:#fdf4e3; --info:#0b5c8a; --info-bg:#e7f2f9;
  --neg:#a01c15;
  /* тёмные плитки рабочего стола */
  --dark:#101c33; --dark-2:#16264170; --dark-line:#2b4a7a; --dark-ink:#e8f1fb;
  --cyan:#35b6e8;
  --f:"Segoe UI","Noto Sans",system-ui,-apple-system,Arial,sans-serif;
  --fm:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--ink);font:13px/1.45 var(--f);-webkit-font-smoothing:antialiased}

/* ---------- Каркас приложения ---------- */
/* minmax(0,1fr) не даёт неразрывным надписям шапки растянуть сетку
   и породить горизонтальную прокрутку всей страницы */
.app{display:grid;grid-template-columns:262px minmax(0,1fr);grid-template-rows:auto auto 1fr;
  height:100vh;max-width:100vw}

/* Строка 1 — светлая: организация и пользователь, как в ХЭТ */
.topbar{grid-column:1/3;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:5px 14px;min-height:46px;
  background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);font-size:12.5px}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:600}
.topbar .brand .mark{width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-2),var(--err));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px}
.topbar .sp{flex:1}
.topbar .chip{color:var(--ink-2);white-space:nowrap}
.topbar .chip b{font-weight:600;color:var(--ink)}
.topbar .chip.test{background:var(--warn-bg);color:var(--warn);border:1px solid #e6d3a6;
  border-radius:3px;padding:2px 9px;font-weight:600}

/* Строка 2 — фиолетовая: меню, предприятие, период */
.ctxbar{grid-column:1/3;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:0 14px;min-height:38px;background:var(--brand);color:var(--brand-ink);font-size:12.5px}
.ctxbar label{color:#c5c7ea}
.ctxbar .pick{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  border-radius:3px;padding:2px 9px;display:inline-flex;align-items:center;gap:7px;color:#fff}
.ctxbar .pick b{font-weight:600}
.ctxbar .sp{flex:1}
.ctxbar .badge{border-color:transparent}
.ctxbar select.pick,.ctxbar button.pick{font:inherit;font-weight:600;height:26px;cursor:pointer}
.ctxbar select.pick option{color:var(--ink);background:var(--paper)}
/* Меню скрывается кнопкой «Меню»: рабочая область занимает всю ширину */
.app.nomenu{grid-template-columns:minmax(0,1fr)}
.app.nomenu .side{display:none}

/* Меню слева — панель в палитре ХЭТ */
.side{grid-row:3;background:var(--paper);border-right:1px solid var(--line);overflow:auto;
  padding:6px 0 40px}
.side .grp{padding:12px 14px 5px;font-size:10.5px;letter-spacing:.75px;text-transform:uppercase;
  color:var(--brand);font-weight:700}
.side a{display:block;padding:6px 14px 6px 20px;color:var(--ink-2);text-decoration:none;
  border-left:3px solid transparent;font-size:12.5px}
.side a:hover{background:var(--brand-soft);color:var(--brand-3)}
.side a.on{background:var(--brand-soft);border-left-color:var(--brand-2);color:var(--brand-3);font-weight:600}
.side .obj{display:block;font-size:10.5px;color:var(--ink-3);font-family:var(--fm)}

.main{grid-row:3;overflow:auto;padding:0 0 60px}
.screen{display:none}
.screen.on{display:block}

/* ---------- Заголовок экрана ---------- */
.crumbs{padding:10px 16px 0;color:var(--ink-3);font-size:12px}
.crumbs b{color:var(--brand-3);font-weight:600}
h1.ttl{margin:6px 16px 0;font-size:17px;font-weight:600;color:var(--ink)}
.sub{margin:3px 16px 0;color:var(--ink-3);font-size:12px}

/* ---------- Командная панель ---------- */
.cmdbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:11px 16px 0;padding:7px 8px;
  background:var(--paper);border:1px solid var(--line);border-radius:3px}
.btn{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:3px;
  padding:4px 12px;font:inherit;font-size:12.5px;color:var(--brand-3);cursor:default;white-space:nowrap}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand-2)}
.btn[disabled],.btn.off{color:var(--ink-3);background:#f2f3f6;border-color:var(--line-2)}
.cmdbar .sep{width:1px;height:20px;background:var(--line-2);margin:0 3px}
.cmdbar .sp{flex:1}

/* ---------- Панели и поля ---------- */
.wrap{margin:11px 16px 0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:3px;margin:11px 16px 0}
.panel-head{padding:7px 11px;background:var(--brand-soft);border-bottom:1px solid var(--brand-line);
  font-weight:600;font-size:12.5px;color:var(--brand-3);display:flex;align-items:center;gap:9px}
.panel-head .sp{flex:1}
.panel-head .obj{font-family:var(--fm);font-size:10.5px;color:var(--ink-3);font-weight:400}
.panel-body{padding:11px}
.panel.flat{border:0;background:transparent;margin:11px 16px 0}
.panel.flat>.panel-body{padding:0}

.grid1{display:grid;grid-template-columns:1fr;gap:5px 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:5px 22px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px 22px}
@media (max-width:1080px){.grid2,.grid3{grid-template-columns:1fr}}

.field{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:10px;padding:2px 0}
.field>label{color:var(--ink-2);text-align:right;font-size:12.5px}
.field>.v{background:#fdfdff;border:1px solid var(--line);border-radius:2px;padding:3.5px 8px;
  min-height:26px;font-size:12.5px}
.field>.v.ro{background:#f1f2f6;color:var(--ink-2)}
.field.req>label::after{content:" *";color:var(--err);font-weight:700}
.field .hint{display:block;color:var(--ink-3);font-size:11px;margin-top:2px}
.field.wide{grid-template-columns:190px 1fr}
.field .v.pick::after{content:"×  ▾";float:right;color:var(--brand-2);font-size:11px}
.chk{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:12.5px;color:var(--ink-2)}
.chk .bx{width:14px;height:14px;border:1px solid var(--brand-line);border-radius:2px;background:#fdfdff;
  display:inline-grid;place-items:center;font-size:11px;line-height:1;color:var(--brand)}
.chk.on .bx{background:var(--brand);border-color:var(--brand);color:#fff}
.chk.on .bx::after{content:"✓";font-weight:700}
.chk.on{color:var(--ink)}

/* ---------- Закладки: как в ХЭТ, подчёркиванием ---------- */
.tabs{display:flex;gap:2px;margin:11px 16px 0;border-bottom:2px solid var(--brand-line);flex-wrap:wrap}
.tab{padding:6px 14px;border:0;background:transparent;color:var(--ink-2);font-size:12.5px;
  border-bottom:2px solid transparent;position:relative;top:2px}
.tab.active{color:var(--brand-3);font-weight:600;border-bottom-color:var(--brand)}

/* ---------- Таблицы: шапка вывороткой, строка отбора, как в ХЭТ ---------- */
.tblwrap{margin:11px 16px 0;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:auto}
table.dt{border-collapse:collapse;width:100%;font-size:12px}
table.dt th,table.dt td{border:1px solid var(--line-2);padding:4px 7px;text-align:left;
  vertical-align:top;white-space:nowrap}
table.dt thead th{background:var(--head);color:var(--head-ink);font-weight:600;position:sticky;top:0;
  border-color:#3a37946b;font-size:11.5px;line-height:1.25;white-space:normal}
/* Строка отбора в ХЭТ лежит на той же синей полосе, что и шапка, а поля в ней
   белые. Поля здесь настоящие, а не нарисованные: отбор уходит в учётную систему. */
table.dt tr.filters td{background:var(--head);padding:3px 4px;border-color:#ffffff2e}
table.dt tr.filters input,table.dt tr.filters select{width:100%;min-width:64px;height:21px;
  border:1px solid #fff;border-radius:2px;background:#fff;color:var(--ink);
  font:inherit;font-size:11.5px;padding:1px 5px}
/* В макетах строка отбора нарисована пустыми ячейками — им поле рисуется
   псевдоэлементом. В приложении ячейка занята настоящим полем, и :empty
   не даёт нарисовать второе поверх. */
table.dt tr.filters td:empty::after{content:"";display:block;height:21px;border:1px solid #fff;
  border-radius:2px;background:#fff}
table.dt tr.filters input:focus,table.dt tr.filters select:focus{outline:2px solid #ffd76a;
  outline-offset:-1px}
table.dt td.num,table.dt th.num{text-align:right;font-variant-numeric:tabular-nums}
table.dt td.mono{font-family:var(--fm);font-size:11px}
table.dt tbody tr:nth-child(even){background:#f8f9fc}
table.dt tbody tr.sel{background:var(--sel)}
table.dt tbody tr.open{cursor:pointer}
table.dt tbody tr.open:hover{background:var(--sel)}
table.dt tr.row-ok td{color:var(--ok)}
table.dt tr.row-err td{color:var(--err)}
table.dt tr.row-warn td{color:var(--warn)}
table.dt tr.grp td{background:var(--brand-soft);color:var(--brand-3);font-weight:600}
table.dt tr.sum td{background:#eff1f7;font-weight:600}
table.dt tr.tot td{background:#e2e5f2;font-weight:700;border-top:2px solid var(--brand-line)}
table.dt td.neg,table.dt tr.neg td{color:var(--neg)}
table.dt caption{caption-side:top;text-align:left;padding:7px 9px;color:var(--ink-3);font-size:11.5px}
.tblfoot{display:flex;align-items:center;gap:12px;padding:6px 9px;border-top:1px solid var(--line);
  background:var(--brand-soft);color:var(--brand-3);font-size:11.5px}
.tblfoot .sp{flex:1}

/* Пагинатор ХЭТ стоит НАД таблицей и читается «Всего … Показать … Страница … из …» */
.tbltop{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:5px 9px;
  margin:11px 16px 0;border:1px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0;
  background:var(--paper);color:var(--ink-2);font-size:11.5px}
.tbltop + .tblwrap{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.tbltop .cap{color:var(--ink-3)}
.tbltop input{width:52px;height:22px;border:1px solid var(--line);border-radius:2px;
  background:#fdfdff;font:inherit;font-size:11.5px;text-align:center;color:var(--ink)}
.tbltop .nav,.tbltop .tools{display:flex;gap:2px}
.tbltop button{min-width:24px;height:22px;border:1px solid var(--brand);background:var(--brand);
  color:#fff;border-radius:2px;font-size:11px;line-height:1;cursor:pointer;padding:0 5px}
.tbltop button[disabled]{background:#a9b5d8;border-color:#a9b5d8;cursor:default}
.tbltop .tools{margin-left:5px}

/* ---------- Значки состояния ---------- */
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;
  border:1px solid transparent;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#b3ddc2}
.badge.err{background:var(--err-bg);color:var(--err);border-color:#f0c2c1}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#e6d3a6}
.badge.info{background:var(--info-bg);color:var(--info);border-color:#b5d4e5}
.badge.mute{background:#eceef4;color:var(--ink-3);border-color:var(--line)}

/* ---------- Показатели: на рабочих экранах светлая сводка ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.kpi{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brand-2);
  border-radius:3px;padding:9px 12px}
.kpi .cap{color:var(--ink-3);font-size:11.5px;line-height:1.3}
.kpi .val{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums;
  color:var(--brand-3)}
.kpi .val.err{color:var(--err)} .kpi .val.ok{color:var(--ok)} .kpi .val.warn{color:var(--warn)}
.kpi .foot{color:var(--ink-3);font-size:11px;margin-top:2px}
.bar{height:6px;border-radius:3px;background:#e3e6ef;overflow:hidden;margin-top:8px;
  border:1px solid var(--line-2)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--cyan))}

/* Рабочее место — тёмные плитки, как дашборд ХЭТ */
#s-rabochee-mesto .kpis{padding:11px;background:var(--dark);border-radius:4px}
#s-rabochee-mesto .kpi{background:linear-gradient(160deg,#16294a,#101d34);
  border:1px solid var(--dark-line);border-top:1px solid var(--dark-line);color:var(--dark-ink)}
#s-rabochee-mesto .kpi .cap{color:#9fc0e2}
#s-rabochee-mesto .kpi .val{color:#fff}
#s-rabochee-mesto .kpi .val.err{color:#ff8a85}
#s-rabochee-mesto .kpi .val.ok{color:#6ee7a0}
#s-rabochee-mesto .kpi .val.warn{color:#ffcf7a}
#s-rabochee-mesto .kpi .foot{color:#8fa8c6}
#s-rabochee-mesto .bar{background:#0b1526;border-color:var(--dark-line)}
#s-rabochee-mesto .bar>i{background:linear-gradient(90deg,var(--cyan),#6ee7a0)}

/* ---------- Пояснение макета и прослеживаемость ---------- */
.note{margin:11px 16px 0;padding:9px 11px;background:var(--paper);border:1px solid var(--line-2);
  border-left:3px solid var(--brand-2);border-radius:0 3px 3px 0;font-size:12px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note ul{margin:5px 0 0;padding-left:20px} .note li{margin:2px 0}
.reqs{margin:7px 0 0;display:flex;gap:5px;flex-wrap:wrap}
.req{display:inline-block;font-family:var(--fm);font-size:10.5px;background:var(--brand-soft);
  color:var(--brand-3);border:1px solid var(--brand-line);border-radius:3px;padding:1px 6px}
.req.blk{background:var(--err-bg);color:var(--err);border-color:#f0c2c1}
.req.chk{background:var(--warn-bg);color:var(--warn);border-color:#e6d3a6}
.legend{margin:11px 16px 0;font-size:11.5px;color:var(--ink-3)}
.legend .req{margin-right:5px}

.msg{margin:11px 16px 0;padding:8px 11px;border-radius:3px;font-size:12.5px;border:1px solid}
.msg.err{background:var(--err-bg);border-color:#f0c2c1;color:var(--err)}
.msg.warn{background:var(--warn-bg);border-color:#e6d3a6;color:var(--warn)}
.msg.ok{background:var(--ok-bg);border-color:#b3ddc2;color:var(--ok)}
.msg.info{background:var(--info-bg);border-color:#b5d4e5;color:var(--info)}

.formula{font-family:var(--fm);font-size:11px;color:var(--ink-3)}
.spacer{height:16px}
.hr{height:1px;background:var(--line-2);margin:11px 0}

/* ==========================================================================
   Личный кабинет потребителя: тот же веб-контур, отдельная область
   публикации и более спокойное оформление — внешний пользователь.
   ========================================================================== */
.screen[data-mode="lk"]{background:#f2f5f9;min-height:100%}
.lk{--lk-accent:#1d5c46;--lk-accent-2:#2b7d5f;max-width:1060px;margin:0 auto;padding:0 16px 30px}
.lk .lkbar{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:11px 14px;background:#fff;
  border:1px solid var(--line);border-radius:5px;border-top:3px solid var(--lk-accent)}
.lk .lkbar .mark{width:26px;height:26px;border-radius:5px;background:var(--lk-accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px}
.lk .lkbar .who{margin-left:auto;color:var(--ink-3);font-size:12px;text-align:right}
.lk h2{font-size:19px;font-weight:600;margin:18px 0 4px}
.lk .lead{color:var(--ink-3);font-size:12.5px;margin:0 0 10px}
.lk .card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:14px;margin:11px 0}
.lk .card h3{margin:0 0 9px;font-size:14px;font-weight:600;color:var(--lk-accent)}
.lk .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.lk .big{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.lk .btn{background:#eaf3ef;border-color:#bcd8cb;color:#17513d}
.lk .btn.primary{background:var(--lk-accent);border-color:var(--lk-accent);color:#fff}
.lk .btn.ghost{background:transparent;border-color:transparent;color:var(--lk-accent-2)}
.lk .btn.off,.lk .btn.primary.off,.lk .btn.ghost.off{color:var(--ink-3);background:#f2f3f6;border-color:var(--line-2);cursor:not-allowed}
.lk .steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 11px}
.lk .step{padding:4px 11px;border-radius:14px;background:#e7edf1;color:var(--ink-3);font-size:11.5px}
.lk .step.on{background:var(--lk-accent);color:#fff;font-weight:600}
.lk table.dt thead th{background:var(--lk-accent);border-color:#1a4f3b}
.lk table.dt tr.grp td{background:#e9f2ee;color:#17513d}
.lk .fld{display:grid;grid-template-columns:1fr;gap:4px;margin:0 0 11px}
.lk .fld label{font-size:12px;color:var(--ink-2)}
.lk .fld .v{border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:#fcfdfe;font-size:13px}
.lk .login{max-width:400px;margin:52px auto 0}
.lk .login .card{padding:22px}
.lk .tblwrap{margin:11px 0 0}
.lk .note,.lk .msg{margin:11px 0 0}
/* Поля ввода кабинета и ячейки ввода показаний: настоящие input, а не div */
.lk .fld input{border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:#fff;font:inherit;font-size:13px}
.lk .fld input:focus{outline:2px solid #bcd8cb;border-color:var(--lk-accent-2)}
table.dt td input.cell{width:100%;min-width:96px;height:24px;border:1px solid var(--line);border-radius:3px;padding:2px 6px;
  text-align:right;font:inherit;font-variant-numeric:tabular-nums;background:#fff}
table.dt td input.cell:focus{outline:2px solid #ffd76a;outline-offset:-1px}
table.dt td input.cell[readonly]{background:transparent;border-color:transparent}
table.dt tr.row-err td input.cell{border-color:var(--err);background:var(--err-bg);color:var(--err)}
table.dt tr.row-err td.rowerr{color:var(--err);font-size:11.5px;white-space:normal}
/* Карточка учётных данных кабинета: пароль показан один раз и печатается */
.slip{border:2px dashed var(--line-2);border-radius:5px;padding:14px 16px;margin:10px 0;background:#fff;max-width:520px}
.slip h3{margin:0 0 8px;font-size:14px}
.slip .pair{display:grid;grid-template-columns:150px 1fr;gap:6px 10px;font-size:13px}
.slip .pair b{font-family:var(--fm);font-size:15px;letter-spacing:.5px}
@media print{body *{visibility:hidden}.slip,.slip *{visibility:visible}.slip{position:absolute;left:0;top:0;border:1px solid #000}}

.foot{margin:26px 16px 0;padding:12px 0 0;border-top:1px solid var(--line);color:var(--ink-3);font-size:11.5px}