/* == Учёт печати — стили ================================================= */
:root{
  --bg:#eef1f4;
  --panel:#ffffff;
  --ink:#16202b;
  --muted:#5c6b7a;
  --line:#dde3e9;
  --accent:#f0641e;
  --accent-dark:#c94f12;
  --ok:#2e9e5b;
  --ok-bg:#e3f4ea;
  --warn:#b97a17;
  --warn-bg:#fdf0da;
  --bad:#d0454c;
  --bad-bg:#fbe7e8;
  --info-bg:#e7eef7;
  --head:#1b2733;
  --radius:10px;
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 4px 14px rgba(22,32,43,.05);
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45;
}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.45rem;margin:.2rem 0 1rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:0 0 .7rem;font-weight:700}
small,.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---- шапка ---- */
.topbar{
  background:var(--head); color:#e9eef3;
  display:flex; align-items:center; gap:1rem;
  padding:.55rem 1rem; flex-wrap:wrap;
}
.brand{font-weight:800; letter-spacing:.02em; display:flex; align-items:center; gap:.5rem; white-space:nowrap}
.brand .dot{width:.72rem;height:.72rem;background:var(--accent);border-radius:3px;display:inline-block}
.topbar nav{display:flex; gap:.15rem; flex-wrap:wrap; flex:1; min-width:0}
.topbar nav a{
  color:#c2ccd6; padding:.4rem .65rem; border-radius:8px;
  font-size:.92rem; white-space:nowrap; text-decoration:none;
}
.topbar nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.topbar nav a.on{background:rgba(240,100,30,.18); color:#ffb287; font-weight:600}
.pill{
  display:inline-block; min-width:1.25em; padding:.05em .4em; margin-left:.35em;
  background:#33465a; color:#fff; border-radius:99px;
  font-size:.72rem; text-align:center; font-weight:700; vertical-align:1px;
}
.pill.red{background:var(--bad)}
.pill.orange{background:var(--accent)}
.who{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.who .me{color:#e9eef3;text-decoration:none;line-height:1.15;text-align:right}
.who .me small{display:block;color:#8fa0b0;font-size:.72rem}
.who .logout{color:#8fa0b0;font-size:.85rem}
.who .logout:hover{color:#fff}

/* ---- каркас ---- */
.wrap{max-width:1120px;margin:0 auto;padding:1.1rem 1rem 3rem}
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.cols-2,.cols-3{grid-template-columns:1fr}}
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem 1.1rem; margin-bottom:1rem;
}
.card>h2:first-child{margin-top:.05rem}
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35rem;
}
.stat{display:flex;flex-direction:column;gap:.1rem}
.stat b{font-size:1.6rem;font-weight:800;line-height:1.1}
.split{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}

/* ---- флеши ---- */
.flash{padding:.65rem .9rem;border-radius:9px;margin-bottom:.9rem;border:1px solid;font-size:.95rem}
.flash.success{background:var(--ok-bg);border-color:#bfe4cd;color:#1d6b3d}
.flash.error{background:var(--bad-bg);border-color:#f2c4c6;color:#8f2b30}
.flash.warning{background:var(--warn-bg);border-color:#efd7a8;color:#7c5410}

/* ---- таблицы ---- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th{
  text-align:left; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:.45rem .6rem;
  border-bottom:2px solid var(--line); white-space:nowrap;
}
.tbl td{padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#f7f9fb}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .dim td{opacity:.55}

/* ---- бейджи ---- */
.badge{
  display:inline-block; padding:.14em .55em; border-radius:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
}
.b-urgent{background:var(--bad-bg);color:var(--bad)}
.b-high{background:var(--warn-bg);color:var(--warn)}
.b-normal{background:#e8edf2;color:var(--muted)}
.b-ok{background:var(--ok-bg);color:#1d6b3d}
.b-off{background:#e8edf2;color:var(--muted)}
.b-print{background:var(--info-bg);color:#2b5688}
.role{
  display:inline-block;padding:.1em .5em;border-radius:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
}
.role-admin{background:#efe6f7;color:#6c3fa0}
.role-printer{background:#fdeadf;color:var(--accent-dark)}
.role-assembler{background:#e2f0fb;color:#2b5688}
.chip{
  display:inline-block;background:#eef2f6;border:1px solid var(--line);
  border-radius:99px;padding:.05em .6em;font-size:.78rem;color:var(--ink);
}
a.chip:hover{text-decoration:none;border-color:var(--accent);color:var(--accent-dark)}

/* ---- прогресс ---- */
.bar{background:#e4e9ee;border-radius:99px;height:.6rem;overflow:hidden;min-width:90px}
.bar .fill{height:100%;background:var(--accent);border-radius:99px}
.bar .fill.full{background:var(--ok)}
.bar-line{display:flex;align-items:center;gap:.55rem}
.bar-line .num{font-size:.85rem;white-space:nowrap}

/* ---- кнопки и формы ---- */
.btn{
  display:inline-block; border:none; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:700;
  padding:.5rem .95rem; border-radius:8px; font-size:.93rem;
  font-family:inherit; text-decoration:none; line-height:1.2;
}
.btn:hover{background:var(--accent-dark);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--muted);background:#f4f6f8}
.btn.danger{background:var(--bad)}
.btn.danger:hover{background:#b23238}
.btn.sm{padding:.32rem .6rem;font-size:.83rem}
.btn:disabled{opacity:.5;cursor:default}

form.stack label{display:block;margin-bottom:.7rem;font-size:.9rem;font-weight:600}
form.stack label span{display:block;margin-bottom:.25rem}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px;
  font:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus,.btn:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{resize:vertical;min-height:4.2em}
form.inline{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
form.inline input[type=number]{width:5.2rem}
form.inline input[type=text]{width:10rem}
.field-row{display:flex;gap:.8rem;flex-wrap:wrap}
.field-row>label{flex:1;min-width:130px}
.hint{font-size:.8rem;color:var(--muted);font-weight:400}

/* ---- чат ---- */
.msg{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:none}
.ava{
  flex:0 0 2.3rem;height:2.3rem;border-radius:50%;
  background:var(--head);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.msg .body{flex:1;min-width:0}
.msg .head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.msg .head b{font-size:.93rem}
.msg .text{white-space:pre-wrap;word-wrap:break-word;font-size:.95rem}
.msg.sys .ava{background:var(--warn)}

/* ---- фотографии ---- */
.thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block;background:#fff}
.thumb.ph{background:#e8edf2}
.thumbcell{width:54px}
.gallery{display:flex;flex-wrap:wrap;gap:.6rem}
.gallery figure{margin:0;position:relative}
.gallery img{width:152px;height:114px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block;background:#fff}
.gallery a:focus img{outline:2px solid var(--accent);outline-offset:1px}
.gallery .imgdel{
  position:absolute;top:5px;right:5px;width:1.55rem;height:1.55rem;
  background:rgba(22,32,43,.62);color:#fff;border:none;border-radius:6px;
  cursor:pointer;font-size:.8rem;line-height:1;
}
.gallery .imgdel:hover{background:var(--bad)}
input[type=file]{font:inherit;font-size:.88rem}
.code{display:inline-block;font-size:1.9rem;font-weight:800;letter-spacing:.22em;
  color:var(--accent-dark);font-variant-numeric:tabular-nums}
.plan-group{margin-bottom:.7rem}
.plan-group>summary{cursor:pointer;display:flex;align-items:center;gap:.45rem;
  flex-wrap:wrap;list-style:none;padding:.15rem 0}
.plan-group>summary::-webkit-details-marker{display:none}
.plan-group>summary::before{content:'▸';color:var(--muted);font-size:.9rem}
.plan-group[open]>summary::before{content:'▾'}
.plan-group>summary b{font-size:1.05rem}
.plan-group>summary:hover b{color:var(--accent-dark)}
label.check,form.stack label.check{display:flex;align-items:center;gap:.5rem;
  font-size:.94rem;font-weight:500;margin-bottom:.45rem}
label.check input,form.stack label.check input{width:auto;margin:0;flex:none}
form.stack label.check span{display:inline;margin:0;font-weight:500}
.sets{display:flex;flex-direction:column;gap:.45rem}
.sets .row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  border-bottom:1px solid var(--line);padding-bottom:.4rem}
.sets .row:last-child{border-bottom:none;padding-bottom:0}
.sets .n{font-size:1.35rem;font-weight:800;line-height:1}
.cimg{max-width:260px;max-height:200px;border-radius:8px;border:1px solid var(--line);
  display:block;margin-top:.35rem;background:#fff}
@media(max-width:640px){.gallery img{width:30.5vw;height:23vw}.cimg{max-width:70vw}}

/* ---- вход / настройка ---- */
.auth{max-width:400px;margin:8vh auto 0}
.auth .brand{color:var(--ink);justify-content:center;font-size:1.25rem;margin-bottom:1rem}
.auth .card{padding:1.4rem}

/* ---- разное ---- */
.empty{color:var(--muted);padding:.6rem 0;font-size:.93rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
details.box{border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;margin-top:.6rem;background:#fafbfc}
details.box summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted)}
details.box[open] summary{margin-bottom:.6rem}
.danger-text{color:var(--bad);font-weight:600}
.ok-text{color:var(--ok);font-weight:600}
hr.sep{border:none;border-top:1px solid var(--line);margin:1rem 0}
@media(max-width:760px){
  .topbar{padding:.5rem .6rem .35rem}
  .brand{order:0}
  .who{order:1;margin-left:auto}
  .topbar nav{
    order:2; flex-basis:100%; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{font-size:.88rem;padding:.35rem .55rem}
}
@media(max-width:640px){
  .wrap{padding:0.8rem .6rem 3rem}
  .card{padding:.85rem .8rem}
  h1{font-size:1.25rem}
  .who .me small{display:none}
}
@media (prefers-reduced-motion: no-preference){
  .bar .fill{transition:width .4s ease}
}

/* ---- готовые изделия ---- */
.ucode{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap}
.tabs .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tabs a.chip.on:hover{color:#fff}
input[type=checkbox]{width:1.05rem;height:1.05rem}

/* ---- сортировка таблиц ---- */
.sortlink{color:inherit;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap}
.sortlink:hover{color:var(--accent-dark);text-decoration:none}
.sortlink .arr{font-size:.62em;opacity:0}
.sortlink:hover .arr{opacity:.45}
.sortlink.on{color:var(--accent-dark)}
.sortlink.on .arr{opacity:1}
a.plain{color:inherit}
a.plain:hover{color:var(--accent-dark)}
code{background:#eef1f5;padding:.05rem .3rem;border-radius:4px;font-size:.92em}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.1rem .8rem}
@media(max-width:640px){.permgrid{grid-template-columns:1fr}}
.presets{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.2rem 0 .1rem}
label.check.dim{opacity:.45}
.projsw{margin:0 .6rem 0 0}
.projsw select{background:#26374a;color:#fff;border:1px solid #3a4f66;border-radius:7px;
  padding:.25rem .5rem;font:inherit;font-size:.85rem;max-width:12rem}

/* ---- чат: темы и события ---- */
.topics{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
.topic{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink,#16202b);font-weight:600;font-size:.92rem}
.topic small{color:var(--muted);font-weight:500}
.topic:hover{text-decoration:none;border-color:var(--accent)}
.topic.on{background:var(--accent);border-color:var(--accent);color:#fff}
.topic.on small{color:#ffe3d3}
.topic.add{border-style:dashed;color:var(--muted)}
.msg.evt .ava{background:#8a96a3}
.msg.evt .text{color:#3a4a5a}
.fillbar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;background:#f6f8fa;
  border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}
.fillbar input[type=number]{margin:0}
form.stack .fillbar label.check{display:inline-flex;width:auto;margin:0 .3rem}

.projsw.one{display:inline-block;color:#dfe7ef;font-size:.85rem;border:1px solid #3a4f66;
  border-radius:7px;padding:.25rem .55rem;background:#26374a}

/* ==== тёмная тема ==========================================================
   Включается атрибутом data-theme="dark" на <html>: скрипт в шапке ставит его
   по выбору пользователя или, в режиме «авто», по настройке устройства. */
html[data-theme="dark"]{
  --bg:#10151b; --panel:#19212a; --ink:#e2e8ee; --muted:#95a3b2; --line:#2b3643;
  --accent:#f0641e; --accent-dark:#ff8b4d;
  --ok:#43c07a; --ok-bg:#15301f; --warn:#e2a93a; --warn-bg:#342910;
  --bad:#f0626a; --bad-bg:#3b191c; --info-bg:#182a3c; --head:#0a0e13;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
html[data-theme="dark"] .flash.success{border-color:#23553a;color:#8fe0b1}
html[data-theme="dark"] .flash.error{border-color:#6b2a2f;color:#ffb3b8}
html[data-theme="dark"] .flash.warning{border-color:#5c4718;color:#f3cf85}
html[data-theme="dark"] .tbl tr:hover td{background:#1f2933}
html[data-theme="dark"] .b-normal,html[data-theme="dark"] .b-off{background:#26313d}
html[data-theme="dark"] .b-ok{color:#8fe0b1}
html[data-theme="dark"] .b-print{color:#9cc4f0}
html[data-theme="dark"] .role-admin{background:#2d2340;color:#cfb2f2}
html[data-theme="dark"] .role-printer{background:#3a2517}
html[data-theme="dark"] .role-assembler{background:#1b2c3e;color:#9cc4f0}
html[data-theme="dark"] .chip{background:#212c37}
html[data-theme="dark"] .bar{background:#2a3541}
html[data-theme="dark"] .btn.ghost:hover{background:#222c36}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],html[data-theme="dark"] input[type=date],
html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#11181f;border-color:#324050}
html[data-theme="dark"] .thumb.ph{background:#26313d}
html[data-theme="dark"] details.box{background:#151c24}
html[data-theme="dark"] code{background:#232e39}
html[data-theme="dark"] .topic{background:var(--panel)}
html[data-theme="dark"] .msg.evt .text{color:#b4c1cd}
html[data-theme="dark"] .fillbar{background:#151c24}
html[data-theme="dark"] .thumb,html[data-theme="dark"] .gallery img{border-color:#324050}

/* переключатель темы в шапке */
.themesw{background:transparent;border:1px solid #3a4f66;color:#dfe7ef;border-radius:7px;
  padding:.2rem .45rem;cursor:pointer;font-size:.95rem;margin-right:.5rem;line-height:1}
.themesw:hover{border-color:var(--accent)}

/* ---- печать: задания со столами ---- */
.job{border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem;margin-bottom:.7rem}
.job .tbl{margin-top:.4rem}
.tbl.tables td{padding:.4rem .5rem}

/* ---- ящики и коробки ---- */
.crate-head .big{font-size:1.35rem;font-weight:800;margin-bottom:.15rem}
.crate-nums{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.crate-nums div{background:var(--bg);border-radius:10px;padding:.45rem .8rem;min-width:6.5rem}
.crate-nums span{display:block;font-size:.78rem;color:var(--muted)}
.crate-nums b{font-size:1.5rem}
.counter{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin:.5rem 0 .8rem}
.counter .lbl{grid-column:1/-1;font-weight:700}
.counter form{margin:0}
.btn.cbtn{width:100%;font-size:1.2rem;padding:.8rem .2rem}
@media(min-width:720px){.counter{grid-template-columns:9rem repeat(4,1fr);align-items:center}
  .counter .lbl{grid-column:auto}}
.btn.wide{width:100%;padding:.85rem;font-size:1.05rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.boxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem}
.boxcell{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;color:var(--ink);background:var(--panel)}
.boxcell:hover{border-color:var(--accent);text-decoration:none}
.boxcell.empty{opacity:.6;border-style:dashed}

/* ---- головной офис: полоса доступа через шлюз ---- */
.hqbar{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;
  background:#2b5688;color:#fff;padding:.45rem 1rem;font-size:.88rem;line-height:1.3}
.hqbar b{font-weight:800;letter-spacing:.01em}
.hqbar-who{color:#d6e4f4}
.hqbar-out{color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:7px;padding:.2rem .6rem;
  white-space:nowrap;font-weight:600}
.hqbar-out:hover{background:rgba(255,255,255,.14);text-decoration:none}
html[data-theme="dark"] .hqbar{background:#1b3a5e}
@media(max-width:640px){.hqbar{padding:.4rem .6rem}.hqbar-who{display:none}}
.tbl.kv th{width:15rem;text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:600;
  border-bottom:1px solid var(--line);vertical-align:top;white-space:normal}
@media(max-width:640px){.tbl.kv th{width:auto}}