/* Электропанель · шаг 0 · v2 — дизайн-система макетов
   Светлая спокойная тема: белые поверхности, графит, янтарь только для выделения, цвет — только у статусов. */

@font-face{font-family:Golos;src:url(/erp/fonts/golos-cyrillic.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;src:url(/erp/fonts/golos-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* поверхности: светлая спокойная тема */
  --bg:#f3f4f6; --s1:#ffffff; --s2:#f6f7f8; --s3:#eceef1; --s4:#dfe3e8;
  --line:rgba(17,20,24,.07); --line2:rgba(17,20,24,.13);
  /* текст */
  --ink:#111418; --ink2:#5b636d; --ink3:#656d76;
  /* основное действие — графит; выделение — янтарь из DESIGN.md */
  --volt:#111418; --volt-ink:#ffffff; --volt-soft:rgba(17,20,24,.06);
  --amber:#d47c00; --amber-soft:rgba(232,147,12,.16);
  /* статусы */
  --ok:#17753f; --ok-soft:rgba(30,142,78,.11);
  --sub:#2a62cc; --sub-soft:rgba(47,111,228,.11);
  --bad:#c22f25; --bad-soft:rgba(217,58,47,.1);
  --warn:#8f5300; --warn-soft:rgba(232,147,12,.13);
  --off:#b9c0c7;
  /* форма */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --r5:28px;
  --sh-sheet:0 -12px 40px -12px rgba(17,20,24,.18);
  --sh-pop:0 18px 50px -16px rgba(17,20,24,.28),0 0 0 1px var(--line);
  --ease:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.5,0,.75,0);
  --t-fast:160ms; --t:260ms; --t-slow:420ms;
  --font:Golos,-apple-system,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}
.num,.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:16px;height:16px}
svg.i.l{width:24px;height:24px}

/* ── Кнопки ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r2);font-weight:600;white-space:nowrap;transition:transform var(--t-fast) var(--ease),background var(--t-fast),opacity var(--t-fast);user-select:none}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn-volt{background:var(--volt);color:var(--volt-ink)}
.btn-volt:hover{background:#2a2f36}
.btn-ghost{background:var(--s3);color:var(--ink)}
.btn-ghost:hover{background:var(--s4)}
.btn-bad{background:var(--bad-soft);color:var(--bad)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--s3);color:var(--ink2);transition:background var(--t-fast)}
.icon-btn:hover{background:var(--s4);color:var(--ink)}

/* ── Чипы, сегменты ─────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:99px;background:var(--s3);color:var(--ink2);font-size:14px;font-weight:500;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed=true],.chip.on{background:var(--ink);color:#fff}
.chip.req{}
.chip .cnt{font-size:12px;opacity:.7}

.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--s3);position:relative}
.seg button{position:relative;z-index:1;min-height:34px;padding:0 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;gap:7px;transition:color var(--t-fast)}
.seg button[aria-pressed=true]{color:var(--ink)}
.seg .thumb{position:absolute;z-index:0;top:3px;bottom:3px;border-radius:9px;background:var(--s1);box-shadow:0 1px 3px rgba(17,20,24,.12);transition:left var(--t) var(--ease),width var(--t) var(--ease)}
.seg .dot{width:8px;height:8px;border-radius:50%}

/* ── Статусы ─────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.sub{background:var(--sub-soft);color:var(--sub)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.volt{background:var(--volt-soft);color:var(--volt)}
.tag.mute{background:var(--s3);color:var(--ink2)}

/* ── Переключатель ──────────────────────── */
.switch{position:relative;width:52px;height:32px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--s4);transition:background var(--t) var(--ease)}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform var(--t) var(--ease)}
.switch input:checked+span{background:var(--volt)}
.switch input:checked+span::after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}

/* ── Ползунок количества ────────────────── */
.qty{display:flex;flex-direction:column;gap:14px}
.qty-read{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qty-num{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.qty-num b{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em;transition:color var(--t-fast)}
.qty-num span{font-size:17px;color:var(--ink2)}
.qty-in{font:inherit;font-variant-numeric:tabular-nums;color:inherit;background:transparent;border:0;border-bottom:2px solid var(--s4);border-radius:0;padding:0 2px;margin:0;text-align:left;-webkit-appearance:none;appearance:none;min-width:0}
.qty-in:focus{outline:0;border-bottom-color:var(--amber)}
.qty-in.bad{color:var(--bad);border-bottom-color:var(--bad)}
.qty-num .qty-in{width:5.4ch;font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-.03em}
.stepper{display:flex;gap:8px}
.stepper button{width:48px;height:48px;border-radius:14px;background:var(--s3);display:grid;place-items:center;color:var(--ink);transition:background var(--t-fast),transform var(--t-fast)}
.stepper button:active{transform:scale(.92);background:var(--s4)}
.range{--p:50%;--fill:var(--volt);-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;touch-action:pan-y}
.range::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(to right,var(--fill) 0 var(--p),var(--s4) var(--p) 100%)}
.range::-moz-range-track{height:10px;border-radius:99px;background:linear-gradient(to right,var(--fill) 0 var(--p),var(--s4) var(--p) 100%)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(17,20,24,.08),0 3px 10px rgba(17,20,24,.22);transition:transform var(--t-fast) var(--ease)}
.range::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(17,20,24,.08),0 3px 10px rgba(17,20,24,.22)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.range.split{--fill:var(--ok)}
.range.split::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--ok) 0 var(--p),var(--bad) var(--p) 100%)}
.range.split::-moz-range-track{background:linear-gradient(to right,var(--ok) 0 var(--p),var(--bad) var(--p) 100%)}
.range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-top:-8px;font-variant-numeric:tabular-nums}

/* двойной ползунок */
.dual{position:relative;height:44px}
.dual input{position:absolute;inset:0;pointer-events:none}
.dual input::-webkit-slider-thumb{pointer-events:auto}
.dual input::-moz-range-thumb{pointer-events:auto}
.dual input::-webkit-slider-runnable-track{background:transparent}
.dual input::-moz-range-track{background:transparent}
.dual .track{position:absolute;left:0;right:0;top:17px;height:10px;border-radius:99px;background:var(--s4)}
.dual .track i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--volt)}

/* ── Свайп для подтверждения ─────────────── */
.swipe{position:relative;height:64px;border-radius:20px;background:var(--s3);overflow:hidden;user-select:none;touch-action:none}
.swipe .fill{position:absolute;inset:0 auto 0 0;width:64px;background:var(--volt);border-radius:20px;transition:width var(--t) var(--ease)}
.swipe .label{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;color:var(--ink2);pointer-events:none;transition:opacity var(--t-fast)}
.swipe .label::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 2.4s linear infinite}
.swipe .knob{position:absolute;top:6px;left:6px;width:52px;height:52px;border-radius:16px;background:var(--volt-ink);color:var(--volt);display:grid;place-items:center;cursor:grab;transition:transform var(--t) var(--ease);box-shadow:0 2px 8px rgba(17,20,24,.25)}
.swipe.drag .knob,.swipe.drag .fill{transition:none}
.swipe.done .fill{width:100%!important}
.swipe.done .label{opacity:0}
.swipe[aria-disabled=true]{opacity:.4;pointer-events:none}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* ── Поверхности ─────────────────────────── */
.card{background:var(--s1);border-radius:var(--r3);box-shadow:0 0 0 1px var(--line)}
.field-label{font-size:13px;font-weight:500;color:var(--ink3);margin-bottom:10px;display:flex;justify-content:space-between;gap:10px}
.field-label em{font-style:normal;color:var(--ink3);font-weight:400}
.search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;background:var(--s3);color:var(--ink3)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-size:16px}
.search input::placeholder{color:var(--ink3)}

.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;flex:none;background:var(--s4);color:var(--ink)}
.avatar.a1,.avatar.a2,.avatar.a3,.avatar.a4{background:var(--s3);color:var(--ink)}

.list-row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px;border-radius:14px;transition:background var(--t-fast);text-align:left;width:100%}
.list-row:hover{background:var(--s3)}
.list-row .t{flex:1;min-width:0}
.list-row .t b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .t small{display:block;font-size:13px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row mark{background:var(--volt-soft);color:var(--volt);border-radius:4px;padding:0 2px}

/* ── Тост ─────────────────────────────── */
.toast{position:absolute;left:12px;right:12px;bottom:18px;z-index:80;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;background:#111418;color:#fff;box-shadow:0 16px 40px rgba(17,20,24,.3);transform:translateY(140%);opacity:0;transition:transform var(--t-slow) var(--ease),opacity var(--t)}
.toast.show{transform:none;opacity:1}
.toast .t{flex:1;font-size:14px;line-height:1.35}
.toast .t b{display:block;font-weight:600}
.toast button{font-weight:600;min-height:44px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff}
.toast .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1b8f50;color:#fff}
.toast.q .ic{background:#b57610}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms!important;animation:none!important}}