/* ============================================================
   Портал ВЗЛП — дизайн-система «Заводской пульт»
   Токены и оболочка приложения. Источник: DESIGN.md
   ============================================================ */
:root{
  /* Бренд */
  --brand:#FFD200; --brand-deep:#E6BD00; --brand-soft:#FFF4C2;
  --brand-ink:#0E0E10; --black:#000000;
  /* Нейтрали (light) */
  --bg:#F1F1F3; --surface:#FFFFFF; --surface-2:#FAFAFA;
  --ink:#0E0E10; --ink-soft:#3F3F46; --muted:#71717A;
  --line:#E4E4E7; --line-2:#D4D4D8;
  /* Семантика */
  --success:#15803D; --success-bg:#DCFCE7;
  --warning:#B45309; --warning-bg:#FEF1D6;
  --error:#B91C1C; --error-bg:#FEE2E2;
  --info:#1D4ED8; --info-bg:#DBEAFE;
  /* Типографика */
  --f-display:"Unbounded",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  /* Отступы (4px) */
  --s-2:2px; --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px;
  /* Радиусы — малые, «инженерные» */
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-full:999px;
  /* Движение */
  --ease-out:cubic-bezier(.16,.84,.44,1); --t-fast:120ms; --t:200ms;
  --shadow-1:0 1px 2px rgba(14,14,16,.06),0 1px 3px rgba(14,14,16,.05);
  --shadow-2:0 4px 12px rgba(14,14,16,.08),0 2px 4px rgba(14,14,16,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.05; letter-spacing:-.01em; font-family:var(--f-display)}
a{color:inherit}
.mono{font-family:var(--f-mono); font-feature-settings:"tnum"}
.tnum{font-variant-numeric:tabular-nums}

/* Сигнатурные мотивы — параллелограмм и срез угла (из диагоналей логотипа) */
.skew{display:inline-block; transform:skewX(-12deg)}
.skew>*{display:inline-block; transform:skewX(12deg)}
.cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}

/* ---- Оболочка приложения ----------------------------------- */
.app{
  display:grid; grid-template-columns:230px 1fr;
  grid-template-rows:60px 1fr; grid-template-areas:"side head" "side main";
  min-height:100vh;
}
.app-side{grid-area:side; background:var(--black); color:#d4d4d8; padding:var(--s-16); display:flex; flex-direction:column; gap:4px}
.app-side .brand{display:flex; align-items:center; gap:10px; padding:6px 4px var(--s-16)}
.app-side .brand .blk{background:var(--brand); color:var(--brand-ink); font-family:var(--f-display); font-weight:800; font-size:15px; padding:4px 9px 3px; transform:skewX(-10deg)}
.app-side .brand .blk span{display:inline-block; transform:skewX(10deg)}
.app-side .brand small{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:#71717a; text-transform:uppercase}
.nav-group{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:#52525b; text-transform:uppercase; padding:var(--s-16) 4px 6px}
.nav-i{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:600; color:#d4d4d8; text-decoration:none; cursor:pointer; position:relative;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-i .ic{width:18px; text-align:center; opacity:.8}
.nav-i:hover{background:#1c1c20; color:#fff}
.nav-i.active{background:var(--brand); color:var(--brand-ink)}
.nav-i.active::before{content:""; position:absolute; left:-16px; top:6px; bottom:6px; width:4px; background:var(--brand); transform:skewX(-12deg)}
.app-side .me{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 4px 4px; border-top:1px solid #2a2a30; font-size:12.5px}
.avatar{width:30px; height:30px; border-radius:var(--r-sm); background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; font-weight:800; font-family:var(--f-display); font-size:13px; flex:0 0 auto}
.app-side .me b{color:#fff; font-weight:600; display:block; font-size:13px}
.app-side .me span{color:#71717a; font-size:11px}

.app-head{grid-area:head; background:var(--surface); border-bottom:1px solid var(--line); padding:0 var(--s-24); display:flex; align-items:center; gap:var(--s-16)}
.app-head .crumb{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.app-head .spacer{margin-left:auto}

.app-main{grid-area:main; padding:var(--s-24); overflow:auto; min-width:0}
.wrap{max-width:1280px; min-width:0}
/* Страницы с широкими таблицами/доской используют всю доступную ширину */
.wrap.wrap-full{max-width:none}

/* Доска планирования: страница скроллится как единое целое (сайдбар и шапка
   едут вместе с контентом) — поэтому основную область НЕ делаем отдельным
   скролл-контейнером, а .app даём расти по контенту. Сама доска
   (бэклог+таблица) занимает ровно высоту экрана и прокручивает свой контент
   внутри себя — см. height:100vh у .board-wrap. Нижний отступ убираем, чтобы
   доска доходила до самого низа без пустоты. */
body.board-page .app{min-height:0}
body.board-page .app-main{overflow:visible; padding-bottom:0}

/* Мобильная навигация (по умолчанию скрыта; включается в адаптиве) */
.nav-toggle{display:none}
.nav-burger{display:none; cursor:pointer; font-size:22px; line-height:1; padding:2px 8px; user-select:none; color:var(--ink)}
.nav-backdrop{display:none}

/* ---- Кнопки ------------------------------------------------- */
.btn{
  font-family:var(--f-body); font-weight:700; font-size:14px; cursor:pointer;
  border:1px solid transparent; padding:10px 18px; border-radius:var(--r-sm);
  transition:transform var(--t-fast),background var(--t-fast),border var(--t-fast);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface-2)}

/* ---- Карточки / заглушка ----------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:var(--s-24)}
.eyebrow{font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:var(--s-12); margin-bottom:var(--s-16)}
.eyebrow::before{content:""; width:28px; height:3px; background:var(--brand); display:block; transform:skewX(-20deg)}
.page-title{font-weight:700; font-size:28px; margin-bottom:var(--s-8)}
.lead{color:var(--ink-soft); max-width:60ch}

/* ---- Поля форм --------------------------------------------- */
.field{margin-bottom:var(--s-16)}
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.01em}
.input{
  width:100%; font-family:var(--f-body); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:10px 12px; transition:border var(--t-fast),box-shadow var(--t-fast);
}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}

.alert{display:flex; gap:10px; padding:11px 13px; border-radius:var(--r-sm); font-size:13.5px; border:1px solid; align-items:flex-start}
.a-error{background:var(--error-bg); border-color:var(--error); color:var(--error)}

/* ---- Экран входа (T-07) ------------------------------------- */
.auth{min-height:100vh; display:grid; place-items:center; background:var(--black); padding:var(--s-24); position:relative; overflow:hidden}
/* индустриальные диагонали-акценты на фоне (из мотива логотипа) */
.auth::before,.auth::after{content:""; position:absolute; transform:skewX(-12deg); opacity:.9}
.auth::before{top:-10%; left:-6%; width:120px; height:60%; background:var(--brand); opacity:.10}
.auth::after{bottom:-12%; right:-4%; width:200px; height:55%; background:var(--brand); opacity:.06}
.auth-card{position:relative; z-index:1; width:100%; max-width:380px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:var(--s-32)}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:var(--s-24)}
.auth-brand .blk{background:var(--brand); color:var(--brand-ink); font-family:var(--f-display); font-weight:800; font-size:18px; padding:6px 12px 5px; transform:skewX(-10deg)}
.auth-brand .blk span{display:inline-block; transform:skewX(10deg)}
.auth-brand small{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}
.auth-card h1{font-family:var(--f-display); font-weight:700; font-size:22px; margin-bottom:var(--s-8)}
.auth-card .sub{color:var(--muted); font-size:13px; margin-bottom:var(--s-24)}

/* ---- Таблицы ----------------------------------------------- */
.tbl{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.tbl th{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-weight:500; background:var(--surface-2)}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl td .sub{color:var(--muted); font-size:12px; margin-top:2px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-12)}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---- Бейджи прав ------------------------------------------- */
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip-perm{font-family:var(--f-mono); font-size:11px; padding:3px 8px; border-radius:var(--r-sm); background:var(--brand-soft); color:var(--ink); border:1px solid var(--brand)}
.chip-muted{font-family:var(--f-mono); font-size:11px; color:var(--muted)}

/* ---- Чек-лист (CheckboxSelectMultiple → div[id^=id_] > div > label) -------- */
.checklist > div[id^="id_"]{display:grid; gap:8px; margin-top:6px}
.checklist > div[id^="id_"] > div{border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); transition:border var(--t-fast)}
.checklist > div[id^="id_"] > div:hover{background:var(--surface)}
.checklist > div[id^="id_"] label{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:14px; font-weight:500; cursor:pointer; margin:0}
.checklist input[type=checkbox]{width:16px; height:16px; accent-color:var(--brand); flex:0 0 auto}

/* ---- Кнопки: вторичная и опасная ---------------------------- */
.btn-secondary{background:var(--ink); color:var(--surface)}
.btn-secondary:hover{opacity:.9}
.btn-danger{background:var(--error); color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn-sm{padding:6px 12px; font-size:13px}

/* ---- Сообщения --------------------------------------------- */
.messages{display:grid; gap:8px; margin-bottom:var(--s-16)}
.msg{padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px; border:1px solid}
.msg.success{background:var(--success-bg); border-color:var(--success); color:var(--success)}
.msg.error{background:var(--error-bg); border-color:var(--error); color:var(--error)}

/* ---- Статус-пилюли ----------------------------------------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; font-weight:500; padding:3px 8px; border-radius:var(--r-sm); letter-spacing:.03em; text-transform:uppercase}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill-on{background:var(--success-bg); color:var(--success)}
.pill-off{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}

/* ---- Инлайновый чекбокс ------------------------------------ */
.check-inline{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; cursor:pointer; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2)}
.check-inline input[type=checkbox]{width:16px; height:16px; accent-color:var(--brand)}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-16); margin-bottom:var(--s-24); flex-wrap:wrap}
.form-actions{display:flex; gap:10px; margin-top:var(--s-24)}
.hint-err{color:var(--error); font-size:12px; margin-top:4px}

/* ---- Генерация этикетки (E6) ------------------------------- */
.gen-grid{display:grid; grid-template-columns:1fr 360px; gap:var(--s-24); align-items:start}
.gen-preview-cap{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-12)}

/* Предпросмотр этикетки — повторяет макет PDF (164×85 pt) */
.label{background:#fff; color:#0E0E10; border:2px solid #0E0E10; border-radius:6px; padding:12px 14px; aspect-ratio:164/85; display:flex; flex-direction:column; box-shadow:var(--shadow-1)}
.label .l-cap{font-family:var(--f-body); font-size:9px; color:#3f3f46; letter-spacing:.02em}
.label .l-batch{font-family:var(--f-mono); font-weight:700; font-size:21px; line-height:1.1; margin-top:1px}
.label .l-div{border-top:1.5px solid #0E0E10; margin:8px 0}
.label .l-bottom{display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex:1}
.label .l-date{font-family:var(--f-mono); font-weight:700; font-size:17px; margin:1px 0 4px}
.label .l-line{font-family:var(--f-mono); font-size:10px; color:#0E0E10}
.label .l-qr{width:62px; height:62px; image-rendering:pixelated; flex:0 0 auto}

.gen-data{display:grid; gap:6px; margin-top:var(--s-16); font-family:var(--f-mono); font-size:12px}
.gen-data .row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line)}
.gen-data .row span:first-child{color:var(--muted)}
.gen-data .row span:last-child{color:var(--ink); word-break:break-all; text-align:right}

@media(max-width:900px){.gen-grid{grid-template-columns:1fr}}

/* ---- Адаптив ------------------------------------------------ */
@media(max-width:900px){
  .app{grid-template-columns:1fr; grid-template-areas:"head" "main"}
  /* Сайдбар превращается в выезжающую панель (drawer) */
  .app-side{
    position:fixed; top:0; left:0; bottom:0; width:240px; max-width:84vw; z-index:60;
    overflow-y:auto; transform:translateX(-100%);
    transition:transform var(--t) var(--ease-out); box-shadow:var(--shadow-2);
  }
  .nav-toggle:checked ~ .app-side{transform:translateX(0)}
  .nav-toggle:checked ~ .nav-backdrop{display:block; position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.45)}
  .nav-burger{display:inline-flex}
  .app-head{padding:0 var(--s-16); gap:var(--s-12)}
  .app-main{padding:var(--s-16)}
  .page-title{font-size:22px}
}
@media(max-width:560px){
  .app-main{padding:var(--s-12)}
  .btn{padding:9px 14px; font-size:13px}
}