/* ============================================================
   Склад · единая система стилей (переучёт + сканер + вход)
   Идентика: «манифест отгрузки» — складская сигнализация
   (hazard-amber / QC-pass green / reject-stamp red), бумага
   упаковочного листа, моно-данные, штрих-баркод как разделитель.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Hebrew:wght@400;500;600;700&display=swap');

:root{
  /* -- палитра (тёмная тема по умолчанию) -- */
  --rack-0:#0f1214;      /* фон страницы, "цех ночью" */
  --rack-1:#171b1e;      /* поверхность / карточки */
  --rack-2:#1e2327;      /* поверхность повыше (модалки, шапка) */
  --rack-3:#262c31;      /* инпуты, чипы */
  --line:#333a40;        /* границы */
  --line-soft:#272d32;
  --ink:#ece7da;         /* основной текст — тёплый ламповый белый */
  --ink-dim:#8b9298;     /* приглушённый текст */
  --ink-faint:#5c6469;

  --hazard:#e8a636;      /* основной акцент — hazard-amber */
  --hazard-ink:#171303;  /* текст поверх hazard */
  --hazard-soft:rgba(232,166,54,0.13);
  --pass:#5fac7d;        /* success / совпадает */
  --pass-soft:rgba(95,172,125,0.13);
  --hold:#d06a52;        /* danger / недостача */
  --hold-soft:rgba(208,106,82,0.14);
  --steel:#5b84a6;       /* info / вторичный акцент */
  --steel-soft:rgba(91,132,166,0.14);
  --violet:#a97fc9;      /* третичный акцент — для различения похожих кнопок */
  --violet-soft:rgba(169,127,201,0.14);

  --radius-sm:4px;
  --radius:7px;
  --radius-lg:12px;
  --mono:'IBM Plex Mono', 'IBM Plex Sans Hebrew', 'SFMono-Regular', Consolas, monospace;
  --sans:'IBM Plex Sans', 'IBM Plex Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-lg:0 20px 50px rgba(0,0,0,.45);
  --shadow-md:0 8px 24px rgba(0,0,0,.3);
}

html[data-theme="light"]{
  --rack-0:#e9e6dc;       /* фон — бумага упаковочного листа */
  --rack-1:#f6f4ee;
  --rack-2:#ffffff;
  --rack-3:#ece8de;
  --line:#d8d2c3;
  --line-soft:#e3ded1;
  --ink:#201d16;
  --ink-dim:#6b6558;
  --ink-faint:#9b9584;

  --hazard:#c1791f;
  --hazard-ink:#fffaf0;
  --hazard-soft:rgba(193,121,31,0.10);
  --pass:#3e8a5e;
  --pass-soft:rgba(62,138,94,0.10);
  --hold:#b8543a;
  --hold-soft:rgba(184,84,58,0.10);
  --steel:#3f6f92;
  --steel-soft:rgba(63,111,146,0.10);
  --violet:#8a4fa0;
  --violet-soft:rgba(138,79,160,0.09);
  --shadow-lg:0 20px 50px rgba(30,25,10,.16);
  --shadow-md:0 8px 24px rgba(30,25,10,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; background:var(--rack-0); color:var(--ink); }
body{
  font-family:var(--sans);
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, color .15s ease;
}
html{ transition:background-color .15s ease; }
::selection{ background:var(--hazard-soft); }
h1,h2,h3{ font-family:var(--mono); margin:0; }
a{ color:inherit; }

/* -- eyebrow / stencil label -- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}

/* -- signature: baркод-разделитель -- */
.bar-rule{
  height:14px;
  background-image:repeating-linear-gradient(90deg,
    var(--ink-faint) 0 2px, transparent 2px 5px,
    var(--ink-faint) 5px 6px, transparent 6px 11px,
    var(--ink-faint) 11px 14px, transparent 14px 18px,
    var(--ink-faint) 18px 19px, transparent 19px 24px);
  opacity:.55;
}
html[data-theme="light"] .bar-rule{ opacity:.4; }

/* ---------- header ---------- */
.app-header{
  background:var(--rack-2);
  border-bottom:1px solid var(--line);
  padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:40;
}
.app-header .brand{ display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:0; }
.app-header .brand a{ text-decoration:none; }
.app-header .brand .name{
  font-family:var(--mono); font-weight:700; font-size:15px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-header .tool-switch{
  font-size:12.5px; font-weight:700; color:var(--rack-2); text-decoration:none;
  background:var(--steel); border:1px solid var(--steel); border-radius:99px; padding:7px 14px;
  font-family:var(--mono);
  display:inline-flex; align-items:center; gap:6px;
  transition:filter .15s ease, transform .05s ease;
}
.app-header .tool-switch:hover{ filter:brightness(1.12); }
.app-header .tool-switch:active{ transform:scale(.97); }
.app-header .tool-switch::before{ content:'⇄'; font-size:11px; }
.app-header .tool-switch:hover{ border-color:var(--hazard); color:var(--hazard); }
.app-header .user{
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim);
}
.app-header .user .email{ font-family:var(--mono); color:var(--ink); }

/* ---------- buttons ---------- */
/* base applies to any <button> (and .btn) so markup doesn't need an extra class */
button, .btn{
  font-family:var(--sans); cursor:pointer; border:none; border-radius:var(--radius);
  padding:10px 16px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid transparent;
  background:var(--rack-3); color:var(--ink);
  transition:transform .05s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  min-height:40px;
}
button:active, .btn:active{ transform:scale(.97); }
button:disabled, .btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:var(--hazard); color:var(--hazard-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--hazard); color:var(--hazard); }
.btn-light{ background:var(--rack-3); color:var(--ink); border-color:var(--line); }
.btn-light:hover{ border-color:var(--ink-dim); }
.btn-danger{ background:transparent; color:var(--hold); border-color:var(--hold); }
.btn-danger:hover{ background:var(--hold-soft); }
/* extra accents for toolbars with several same-weight actions side by side —
   distinct colors so each button is spottable at a glance, not just readable */
.btn-save{ background:var(--steel-soft); color:var(--steel); border-color:var(--steel); }
.btn-save:hover{ background:var(--steel); color:var(--rack-2); }
.btn-import{ background:var(--violet-soft); color:var(--violet); border-color:var(--violet); }
.btn-import:hover{ background:var(--violet); color:var(--rack-2); }
.btn-excel{ background:var(--pass-soft); color:var(--pass); border-color:var(--pass); }
.btn-excel:hover{ background:var(--pass); color:var(--rack-2); }
.btn-sm{ padding:6px 11px; font-size:12px; min-height:32px; border-radius:var(--radius-sm); }
.btn-block{ width:100%; }
.icon-btn{
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:5px 8px; font-size:12px; color:var(--ink-dim); cursor:pointer; min-height:30px;
}
.icon-btn:hover{ border-color:var(--ink-dim); color:var(--ink); }

/* ---------- form controls ---------- */
label{ font-size:12.5px; color:var(--ink-dim); display:block; margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
  font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--rack-3); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:11px 13px; outline:none; width:100%;
  transition:border-color .15s ease;
}
input:focus, select:focus, textarea:focus{ border-color:var(--hazard); }
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
.field{ margin-bottom:16px; }
.field-mono input{ font-family:var(--mono); }

/* -- large mono "scan field" (shared by both tools) -- */
.scan-field{
  display:flex; align-items:center; gap:10px;
  background:var(--rack-3); border:2px solid var(--line); border-radius:var(--radius);
  padding:4px 16px; transition:border-color .15s ease, box-shadow .15s ease;
}
.scan-field.active{ border-color:var(--hazard); box-shadow:0 0 0 4px var(--hazard-soft); }
.scan-field .dot{ width:10px; height:10px; border-radius:50%; background:var(--ink-faint); flex-shrink:0; }
.scan-field.active .dot{ background:var(--hazard); animation:dotpulse 1s ease infinite; }
@keyframes dotpulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.scan-field label{ margin:0; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; white-space:nowrap; }
.scan-field input{ border:none; background:transparent; padding:12px 0; font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:.02em; }

/* ---------- card / ticket ---------- */
.card{
  background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.card-pad{ padding:16px; }
/* "оторванный корешок манифеста" — перфорация по верхнему краю модалок */
.ticket{
  position:relative;
  background-image:radial-gradient(circle, var(--rack-0) 2.5px, transparent 2.6px);
  background-size:14px 14px;
  background-position:0 -7px;
  background-repeat:repeat-x;
  background-color:transparent;
  height:8px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---------- overlay / modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(6,8,9,.6);
  display:none; align-items:center; justify-content:center; z-index:100; padding:16px;
}
.overlay.show{ display:flex; }
.modal{
  background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  width:100%; max-width:400px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal .modal-body{ padding:22px; }
.modal h3{ margin:0 0 4px; font-size:16.5px; }
.modal .sub{ color:var(--ink-dim); font-size:13px; margin-bottom:16px; }
.modal-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.modal-actions button{ flex:1; min-width:110px; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--rack-2); border:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:13px; padding:10px 16px; border-radius:var(--radius);
  opacity:0; transform:translateY(10px); transition:all .2s ease; max-width:88vw; box-shadow:var(--shadow-md);
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.ok{ border-color:var(--pass); color:var(--pass); }
.toast.err{ border-color:var(--hold); color:var(--hold); }

/* ---------- badges / states ---------- */
.badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px;
  padding:2px 8px; border-radius:99px; font-weight:700; font-size:12.5px; font-family:var(--mono);
}
.badge.ok{ background:var(--pass-soft); color:var(--pass); }
.badge.danger{ background:var(--hold-soft); color:var(--hold); }
.badge.warn{ background:var(--hazard-soft); color:var(--hazard); }
.badge.neutral{ background:var(--rack-3); color:var(--ink-dim); }

/* ---------- stat cards ---------- */
.stat-card{ background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; min-width:100px; flex:1; }
.stat-card .num{ font-family:var(--mono); font-size:20px; font-weight:700; }
.stat-card .lbl{ font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }
.stat-card.ok .num{ color:var(--pass); }
.stat-card.danger .num{ color:var(--hold); }
.stat-card.warn .num{ color:var(--hazard); }

/* ---------- pills / filters ---------- */
.pill{
  background:var(--rack-1); border:1.5px solid var(--line); color:var(--ink-dim);
  padding:7px 13px; border-radius:99px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.pill:hover{ border-color:var(--hazard); color:var(--ink); }
.pill.active{ background:var(--hazard); border-color:var(--hazard); color:var(--hazard-ink); }

/* ---------- table ---------- */
.table-wrap{ background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:auto; }
table{ border-collapse:collapse; width:100%; font-size:13.5px; }
thead th{
  position:sticky; top:0; background:var(--rack-2); border-bottom:1.5px solid var(--line);
  text-align:left; padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-dim); white-space:nowrap; font-family:var(--mono);
}
tbody td{ padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--rack-2); }
tbody tr.highlight{ animation:rowflash 1.6s ease; }
@keyframes rowflash{ 0%{ background:var(--hazard-soft); } 100%{ background:transparent; } }
.mono{ font-family:var(--mono); color:var(--ink-dim); }
.heb{ direction:rtl; unicode-bidi:isolate; font-family:var(--sans); }

/* ---------- theme + lang switches ---------- */
.switch-group{ display:flex; gap:4px; background:var(--rack-3); border-radius:8px; padding:3px; }
.switch-group button{
  background:transparent; border:none; color:var(--ink-dim); padding:5px 10px; font-size:11.5px;
  border-radius:6px; font-weight:700; font-family:var(--mono); cursor:pointer; letter-spacing:.03em;
}
.switch-group button.active{ background:var(--hazard); color:var(--hazard-ink); }
.theme-btn{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  cursor:pointer; font-size:14px; padding:0;
}
.theme-btn:hover{ border-color:var(--hazard); color:var(--hazard); }

/* ---------- auth pages (login/register) ---------- */
.auth-shell{
  flex:1; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{ width:100%; max-width:380px; }
.auth-card .eyebrow{ margin-bottom:6px; }
.auth-card h1{ font-size:22px; margin-bottom:20px; }
.auth-foot{ text-align:center; font-size:13px; color:var(--ink-dim); margin-top:16px; }
.auth-error{
  background:var(--hold-soft); border:1px solid var(--hold); color:var(--hold);
  border-radius:var(--radius); padding:10px 12px; font-size:13px; margin-bottom:14px; display:none;
}
.auth-error.show{ display:block; }

/* ---------- home / chooser ---------- */
.home-shell{ flex:1; max-width:900px; margin:0 auto; width:100%; padding:40px 20px 60px; }
.home-hero{ margin-bottom:28px; }
.home-hero h1{ font-size:30px; margin:8px 0; letter-spacing:-.01em; }
.home-hero p{ color:var(--ink-dim); font-size:14.5px; margin:0; }
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .tool-grid{ grid-template-columns:1fr; } }
.tool-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; position:relative; overflow:hidden;
  transition:border-color .15s ease, transform .1s ease;
}
.tool-card:hover{ border-color:var(--hazard); transform:translateY(-2px); }
.tool-card .glyph{ font-size:30px; margin-bottom:14px; }
.tool-card h2{ font-size:17px; margin-bottom:6px; }
.tool-card p{ color:var(--ink-dim); font-size:13px; margin:0 0 14px; line-height:1.5; }
.tool-card .bar-rule{ position:absolute; left:0; right:0; bottom:0; }
.tool-card .go{ font-family:var(--mono); font-size:12px; color:var(--hazard); font-weight:700; }

input[type=file]{ display:none; }
.hint{ font-size:12.5px; color:var(--ink-dim); line-height:1.5; }

/* ---------- camera modal (shared: count + scanner) ---------- */
.camera-modal{
  display:none; position:fixed; inset:0; background:rgba(6,8,9,.72);
  z-index:110; align-items:center; justify-content:center; padding:16px;
}
.camera-modal.show{ display:flex; }
.camera-card{
  background:var(--rack-1); border:1px solid var(--line); border-radius:var(--radius-lg);
  width:100%; max-width:420px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
}
.camera-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.qr-reader{ width:100%; min-height:260px; background:#000; }
.qr-reader video{ width:100% !important; }
.camera-status{
  padding:10px 16px; font-size:12.5px; color:var(--ink-dim); text-align:center;
  background:var(--rack-2);
}
.camera-footer{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.scan-overlay-frame{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78%; height:90px; border:2px solid var(--hazard); border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.35); pointer-events:none;
}

@media (max-width:640px){
  .app-header .tool-switch .txt{ display:none; }
  .modal-actions .btn{ min-width:0; }
}

/* ---------- scroll-to-top ---------- */
.scroll-top-btn{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:44px; height:44px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--hazard); color:var(--hazard-ink); border:none;
  font-size:18px; font-weight:700; box-shadow:var(--shadow-md); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, filter .15s ease;
}
.scroll-top-btn.show{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top-btn:hover{ filter:brightness(1.08); }
.scroll-top-btn:active{ transform:scale(.94); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}