/* Панель CNC · Запасы (этап 4, живые данные). Стиль — плотная B2B-панель с каркаса 15.10: светлая, синий основной,
   статусы светофора — цвет + подпись (не только цвет), цифры — табличные. CSP 'self': ни одного style="…" в разметке —
   ширины и цвета только классами и через JS (element.style), см. app.js → applyStyles(). */
:root{
  --bg:#F6F8FB; --surface:#FFFFFF; --ink:#0F172A; --ink2:#334155; --mute:#5B6B82; --line:#E2E8F0; --line2:#CBD5E1;
  --primary:#1E40AF; --primary-h:#1E3A8A; --primary-50:#EFF4FF; --primary-100:#DBE6FE; --accent:#B45309; --accent-50:#FFF7ED;
  --danger:#B91C1C; --danger-50:#FEF2F2; --ok:#15803D; --ok-50:#F0FDF4; --focus:#2563EB;
  --r:10px; --r-s:6px; --sh:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.06); --sh-lg:0 10px 30px rgba(15,23,42,.18);
  --s-black:#111827; --s-black-bg:#E5E7EB; --s-black-ink:#111827;
  --s-red:#DC2626; --s-red-bg:#FEE2E2; --s-red-ink:#991B1B;
  --s-orange:#EA580C; --s-orange-bg:#FFEDD5; --s-orange-ink:#9A3412;
  --s-yellow:#CA8A04; --s-yellow-bg:#FEF9C3; --s-yellow-ink:#854D0E;
  --s-grey:#6B7280; --s-grey-bg:#F1F5F9; --s-grey-ink:#374151;
  --s-blue:#2563EB; --s-blue-bg:#DBEAFE; --s-blue-ink:#1E40AF;
  --s-green:#16A34A; --s-green-bg:#DCFCE7; --s-green-ink:#166534;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --z-top:20; --z-bottom:30; --z-toast:60;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:6px;z-index:100}
.skip:focus{left:8px}
.sm{font-size:13px} .sm2{font-size:12.5px} .xs{font-size:12px}
.w36{width:36px}
.nowrap{white-space:nowrap}
/* ── каркас ── */
.top{position:sticky;top:0;z-index:var(--z-top);display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.sync{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sync b{color:var(--ink2);font-weight:600}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.who{font-size:13px;color:var(--ink2);white-space:nowrap}
.who .role{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--primary-50);color:var(--primary);font-weight:600;font-size:12px}
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--danger-50);color:#7F1D1D;border-bottom:1px solid #FECACA;font-size:14px;padding:8px 20px}
.banner span{flex:1 1 280px}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100dvh - 57px)}
.side{border-right:1px solid var(--line);background:var(--surface);padding:12px 10px;position:sticky;top:57px;height:calc(100dvh - 57px);overflow:auto}
.side a,.bottom a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink2);font-weight:500;min-height:44px}
.side a:hover,.bottom a:hover{background:var(--primary-50);text-decoration:none}
.side a[aria-current=page]{background:var(--primary-50);color:var(--primary);font-weight:650}
.side .cnt{margin-left:auto;font-size:12px;color:var(--mute)}
.side hr{border:0;border-top:1px solid var(--line);margin:8px 4px}
.ico{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{padding:20px 24px 40px;min-width:0}
main:focus{outline:none}
.bottom{display:none}
h1{font-size:22px;line-height:1.3;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px}
.sub{color:var(--mute);margin:0 0 18px;font-size:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi .lbl{font-size:13px;color:var(--mute)} .kpi .val{font-size:26px;font-weight:700;letter-spacing:-.3px;margin-top:2px}
.kpi .hint{font-size:13px;color:var(--ink2);margin-top:4px}
.kpi a.more{font-size:13px}
.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
/* статусы */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:20px}
.badge i,.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.st-black{background:var(--s-black-bg);color:var(--s-black-ink)} .st-black i,.dot-black,.sb-black{background:var(--s-black)}
.st-red{background:var(--s-red-bg);color:var(--s-red-ink)} .st-red i,.dot-red,.sb-red{background:var(--s-red)}
.st-orange{background:var(--s-orange-bg);color:var(--s-orange-ink)} .st-orange i,.dot-orange,.sb-orange{background:var(--s-orange)}
.st-yellow{background:var(--s-yellow-bg);color:var(--s-yellow-ink)} .st-yellow i,.dot-yellow,.sb-yellow{background:var(--s-yellow)}
.st-grey{background:var(--s-grey-bg);color:var(--s-grey-ink)} .st-grey i,.dot-grey,.sb-grey{background:var(--s-grey)}
.st-blue{background:var(--s-blue-bg);color:var(--s-blue-ink)} .st-blue i,.dot-blue,.sb-blue{background:var(--s-blue)}
.st-green{background:var(--s-green-bg);color:var(--s-green-ink)} .st-green i,.dot-green,.sb-green{background:var(--s-green)}
.stbar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line);margin:4px 0 14px}
.stbar span{display:block;height:100%}
.strows{width:100%;border-collapse:collapse;font-size:14px}
.strows td{padding:7px 4px;border-top:1px solid var(--line)} .strows tr:first-child td{border-top:0}
.strows td.n{text-align:right;white-space:nowrap} .strows a{display:block;color:inherit}
.strows tr[data-href]:hover td{background:#F8FAFC;cursor:pointer}
/* таблицы */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:4px 12px 4px 9px;min-height:36px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.chip[aria-pressed=true]{border-color:var(--primary);background:var(--primary-50);color:var(--primary);font-weight:600;box-shadow:inset 0 0 0 1px var(--primary)}
.chip .c{color:var(--mute);font-weight:500}
.inp{border:1px solid var(--line2);border-radius:8px;padding:7px 10px;min-height:40px;background:#fff;min-width:0}
.inp:focus{border-color:var(--focus)}
.inp[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
textarea.inp{width:100%;min-height:80px;resize:vertical;line-height:1.45}
.inp.search{flex:1 1 260px;max-width:420px}
select.inp{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6B82' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center}
select.inp:disabled{cursor:not-allowed;opacity:.6}
.btn{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:7px 12px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--ink2);white-space:nowrap;text-decoration:none}
.btn:hover{background:#F8FAFC;text-decoration:none}
.btn:active{background:#EEF2F7}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn.primary:hover{background:var(--primary-h)}
.btn.danger{color:var(--danger);border-color:#FCA5A5} .btn.danger:hover{background:var(--danger-50)}
.btn.ghost{border-color:transparent;background:transparent}
.btn[disabled],.btn[aria-busy=true]{opacity:.55;cursor:not-allowed}
.btn.sm{min-height:32px;padding:3px 10px;font-size:13px}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh);max-height:calc(100dvh - 260px)}
table.t{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
.t th{position:sticky;top:0;background:#F8FAFC;z-index:2;text-align:left;font-weight:600;color:var(--ink2);padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.t th.n,.t td.n{text-align:right} .t td.n{white-space:nowrap;overflow-wrap:normal}
.t th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.t th button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.t th[aria-sort] button::after{content:"↕";color:var(--line2);font-size:11px}
.t th[aria-sort=ascending] button::after{content:"↑";color:var(--primary)} .t th[aria-sort=descending] button::after{content:"↓";color:var(--primary)}
.t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.t tbody tr[data-href]{cursor:pointer} .t tbody tr[data-href]:hover td{background:#F8FAFC}
.t .nm{min-width:260px;max-width:420px} .t .nm b{font-weight:600;color:var(--ink)} .t .nm small{display:block;color:var(--mute);font-size:12px}
.code{font-family:var(--mono);font-size:12.5px;color:var(--ink2);white-space:nowrap}
.muted{color:var(--mute)} .warn{color:var(--danger);font-weight:600} .okc{color:var(--ok);font-weight:600}
.more-row{display:flex;justify-content:center;padding:12px}
.t td.acts{white-space:nowrap} .t td.acts .btn{margin:0 4px 4px 0}
.mark{display:block;font-size:12.5px;line-height:1.35;margin-bottom:4px}
.mark.ordered{color:var(--ok)} .mark.skip{color:var(--accent)}
.empty{padding:28px;text-align:center;color:var(--mute)}
.err-card{border-color:#FECACA;background:var(--danger-50);color:#7F1D1D}
/* карточки строк на телефоне */
.rows-m{display:none}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;box-shadow:var(--sh);display:block;color:inherit}
a.rc{cursor:pointer} a.rc:hover{text-decoration:none;border-color:var(--line2)}
.rc .h{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.rc .t1{font-weight:600;line-height:1.35}
.rc .kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;margin-top:8px;font-size:13px}
.rc .kv div span{display:block;color:var(--mute);font-size:12px}
.rc .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* к заказу */
details.sup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;box-shadow:var(--sh)}
details.sup>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;min-height:52px}
details.sup>summary::-webkit-details-marker{display:none}
details.sup>summary::before{content:"›";font-size:20px;color:var(--mute);transition:transform .15s ease-out;display:inline-block;width:12px}
details.sup[open]>summary::before{transform:rotate(90deg)}
.sup .sn{font-weight:650;flex:1 1 240px} .sup .sn .muted{font-weight:400} .sup .ss{display:flex;gap:6px;flex-wrap:wrap} .sup .sum{font-weight:700;min-width:110px;text-align:right}
.sup .inner{padding:0 12px 12px;overflow:auto}
/* карточка товара */
.crumbs{font-size:13px;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.crumbs .btn{min-height:32px;padding:3px 10px}
.ihead{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:6px}
.ihead h1{margin:0;flex:1 1 360px}
.reason{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:var(--r-s);padding:10px 14px;margin:10px 0 16px;font-size:14px}
.reason.r-black{border-left-color:var(--s-black)} .reason.r-red{border-left-color:var(--s-red)} .reason.r-orange{border-left-color:var(--s-orange)}
.reason.r-yellow{border-left-color:var(--s-yellow)} .reason.r-grey{border-left-color:var(--s-grey)} .reason.r-blue{border-left-color:var(--s-blue)} .reason.r-green{border-left-color:var(--s-green)}
.ind{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ind .card{padding:12px 14px}
.ind .l{font-size:12.5px;color:var(--mute)} .ind .v{font-size:19px;font-weight:700;margin:2px 0} .ind .f{font-size:12px;color:var(--ink2);line-height:1.4}
.hist{display:flex;flex-wrap:wrap;gap:6px}
.chart{width:100%;height:auto;display:block}
.chart text{font:11px var(--font);fill:var(--mute)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.legend i.lg-bar{background:#93B4F5} .legend i.lg-line{height:3px;border-radius:2px;vertical-align:3px;background:#B45309}
.legend i.lg-bar.part{background:#DCE6FC;outline:1px dashed #93B4F5;outline-offset:-1px}
.sup .sum .np{display:block;font-weight:400;font-size:12px;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt{margin-top:14px} .mt18{margin-top:18px}
.skel{background:linear-gradient(90deg,#EEF2F7 25%,#F6F8FB 50%,#EEF2F7 75%);background-size:200% 100%;animation:sh 1.2s ease-in-out infinite;border-radius:8px;height:18px;margin:8px 0}
.skel.h1{height:28px;width:60%} .skel.box{height:220px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* комментарии и правки */
.cmts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.cmts li{border-left:3px solid var(--primary-100);padding:2px 0 2px 10px}
.cmts .meta{font-size:12px;color:var(--mute)}
.cmts .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.form{display:grid;gap:6px}
.form label{font-size:13px;font-weight:600;color:var(--ink2);margin-top:6px}
.form .help{font-size:12.5px;color:var(--mute);margin:0}
.form .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field-err{color:var(--danger);font-size:13px;margin:4px 0 0;min-height:0}
.field-err:empty{display:none}
.acts-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
/* доступы */
.acc .t td{vertical-align:middle}
.acc .who-cell b{display:block} .acc .who-cell small{color:var(--mute)}
.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:40px}
.sw input{width:20px;height:20px;accent-color:var(--primary);cursor:pointer}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600}
.tag.on{background:var(--ok-50);color:var(--ok)} .tag.off{background:var(--s-grey-bg);color:var(--s-grey-ink)}
.addform{display:grid;grid-template-columns:minmax(140px,180px) minmax(160px,1fr) minmax(130px,160px) auto;gap:8px 10px;align-items:end}
.addform .f{display:grid;gap:4px} .addform label{font-size:13px;font-weight:600;color:var(--ink2)}
/* вход */
.login{min-height:100dvh;display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:24px 24px 20px}
.login-card h1{margin:16px 0 6px}
.login-msg{margin:0 0 10px;font-size:14px;color:var(--ink2)}
.login-msg.bad{color:var(--danger);font-weight:600} .login-msg.busy{color:var(--primary)}
.login-steps{margin:0 0 10px;padding-left:20px;line-height:1.6}
.login-steps code{background:var(--primary-50);color:var(--primary);padding:1px 6px;border-radius:5px;font-size:13px}
details.bg{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
details.bg summary{cursor:pointer;color:var(--mute);font-size:13px;min-height:32px;display:flex;align-items:center}
.pass{display:flex;gap:8px} .pass .inp{flex:1}
details.bg .btn.primary{margin-top:8px}
/* диалог и тост */
dialog{border:0;border-radius:14px;padding:0;box-shadow:var(--sh-lg);width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);color:var(--ink)}
dialog::backdrop{background:rgba(15,23,42,.5)}
dialog form{padding:20px 20px 16px}
dialog h2{margin:0 0 6px;font-size:18px}
dialog .dlg-item{font-size:13.5px;color:var(--mute);margin:0 0 8px}
#dlg-body{display:grid;gap:6px}
#dlg-body label{margin-top:4px} #dlg-body .help{margin:0}
.dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--z-toast);background:#0F172A;color:#fff;border-radius:10px;padding:10px 16px;font-size:14px;box-shadow:var(--sh-lg);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--danger)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.addform{grid-template-columns:1fr 1fr}}
@media (max-width:1023px){
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottom);background:var(--surface);border-top:1px solid var(--line);
          padding:4px 4px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}
  .bottom a{flex-direction:column;gap:2px;font-size:11px;padding:6px 4px;min-width:60px;min-height:52px;justify-content:center;text-align:center;border-radius:8px}
  .bottom a[aria-current=page]{color:var(--primary);background:var(--primary-50);font-weight:650}
  main{padding:16px 16px 96px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:760px){
  .top{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .sync{order:3;width:100%;font-size:12px}
  .who{display:none}
  .banner{padding:8px 12px;font-size:13px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px} .kpi .val{font-size:21px}
  .card{padding:12px 14px}
  .tbl-wrap.desk,table.t.desk{display:none} .rows-m{display:block}
  .sup .inner{overflow:visible} details.sup>summary{padding:10px 12px} .sup .sum{min-width:0}
  .inp.search{max-width:none;flex-basis:100%}
  .toolbar select.inp{flex:1 1 45%}
  .ihead h1{font-size:19px}
  .strows .desc{display:none}
  h1{font-size:20px}
  .inp,textarea.inp{font-size:16px}
  .addform{grid-template-columns:1fr}
  .login-card{padding:20px 18px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}