:root {
  --bg: #FFFFFF;
  --bg-soft: #F7F8FA;
  --border: #E7E9ED;
  --text: #111111;
  --text-secondary: #475569;
  --muted: #94A3B8;
  --danger: #B42318;
  --radius: 14px;
  --radius-sm: 10px;
  --tile-receipt: #EAF4EF; --icon-receipt: #35785A;
  --tile-issue: #FFF1E7;   --icon-issue: #A66B3D;
  --tile-return: #F2EDFA;  --icon-return: #8A70AE;
  --tile-stock: #EAF3F8;   --icon-stock: #6494B0;
  --tile-journal: #EAF5F3; --icon-journal: #639A91;
  --tile-transfer: #ECEFF4; --icon-transfer: #5C6B7F;
  --tile-documents: #F6F1E9; --icon-documents: #A99777;
  --tile-cancel: #FBEAEA;
  --tile-min-height: 64px;
  --control-height: 52px;
  --item-height: 48px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
.icon { width: 20px; height: 20px; flex: none; }

.app { max-width: 720px; margin: 0 auto; padding: 12px 16px 32px; }
.app--wide { max-width: none; }

.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--tile-stock); color: var(--icon-stock);
}
.brand__logo .icon { width: 24px; height: 24px; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__title { font-weight: 600; }
.header__user { display: flex; align-items: center; gap: 8px; flex: none; }
.header__user form { margin: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; flex: none;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
button.pill { font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.pill__name { display: none; }

.h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.muted { color: var(--text-secondary); margin: 0 0 16px; }
.empty { color: var(--text-secondary); margin: 8px 0; }
.back { display: inline-block; color: var(--text-secondary); margin-bottom: 12px; }
.back::before { content: "\2190\00a0"; }

.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card--narrow { max-width: 420px; margin: 24px auto; }
.workplace { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: var(--tile-min-height); padding: 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.tile:active { background: var(--bg-soft); }
.tile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); margin-bottom: 6px;
}
.tile__icon .icon { width: 22px; height: 22px; }
.tile__title { font-weight: 600; font-size: 15px; }
.tile__caption { color: var(--text-secondary); font-size: 14px; }
.tile__icon--receipt { background: var(--tile-receipt); color: var(--icon-receipt); }
.tile__icon--issue   { background: var(--tile-issue);   color: var(--icon-issue); }
.tile__icon--return  { background: var(--tile-return);  color: var(--icon-return); }
.tile__icon--stock   { background: var(--tile-stock);   color: var(--icon-stock); }
.tile__icon--journal { background: var(--tile-journal); color: var(--icon-journal); }
.tile__icon--transfer { background: var(--tile-transfer); color: var(--icon-transfer); }
.tile__icon--documents { background: var(--tile-documents); color: var(--icon-documents); }
.tile__icon--cancel { background: var(--tile-cancel); color: var(--danger); }
.tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

.hint { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; }
.hint .icon { width: 20px; height: 20px; }
.hint--receipt { background: var(--tile-receipt); color: var(--icon-receipt); }
.hint--issue { background: var(--tile-issue); color: var(--icon-issue); }
.hint--return { background: var(--tile-return); color: var(--icon-return); }
.hint--transfer { background: var(--tile-transfer); color: var(--icon-transfer); }
.hint--cancel { background: var(--tile-cancel); color: var(--danger); }

.form { display: flex; flex-direction: column; gap: 14px; }
.card .form { margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.field__label { font-size: 14px; color: var(--text-secondary); }
.field__hint { font-size: 13px; color: var(--muted); }
.field__error { font-size: 13px; color: var(--danger); }
.field__note { font-size: 13px; color: var(--text-secondary); }
.field__note:empty { display: none; }
.form__error:empty, .field__error:empty, .field__hint:empty { display: none; }
.input {
  width: 100%; min-height: var(--control-height); padding: 0 14px; font: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}
.input:focus { outline: 2px solid var(--icon-stock); outline-offset: 0; }
.input--textarea { min-height: 72px; padding: 12px 14px; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { width: 100%; background: var(--text); color: var(--bg); }
.btn--primary:disabled { opacity: 0.6; cursor: wait; }
.btn--secondary { background: var(--bg); border-color: var(--border); color: var(--text); }
.btn--ghost { background: transparent; color: var(--text-secondary); padding: 0 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions form { margin: 0; }

.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.badge--ok { background: var(--tile-receipt); color: var(--icon-receipt); }
.badge--warn { background: var(--tile-issue); color: var(--icon-issue); }
.badge--muted { background: var(--bg-soft); color: var(--text-secondary); }
.badge--cancel { background: var(--tile-cancel); color: var(--danger); }
.badge--info { background: var(--tile-stock); color: #2F5F7A; }

.combobox { position: relative; }
.combobox__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
}
.combobox__option { display: flex; align-items: center; min-height: var(--item-height); padding: 0 12px; border-radius: 8px; cursor: pointer; }
.combobox__option:hover, .combobox__option.is-active { background: var(--bg-soft); }


.sheet { margin: 0 -16px; overflow-x: auto; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sheet__table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; white-space: nowrap; }
.sheet__table th, .sheet__table td { padding: 10px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.sheet__table th { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); font-weight: 600; }
.sheet__table th:first-child, .sheet__table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.sheet__table th:first-child { z-index: 3; background: var(--bg-soft); }
.sheet__table tbody tr:nth-child(even) td { background: var(--bg-soft); }
.sheet__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.sheet__table .is-cancelled td:not(.sheet__num) { color: var(--muted); text-decoration: line-through; }
.sheet__table .is-cancelled td:first-child a { text-decoration: line-through; }
.sheet__empty { color: var(--text-secondary); text-align: center !important; }
.sheet__count { margin-top: 12px; font-size: 14px; }
@media (min-width: 600px) {
  .sheet { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); }
}
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 12px; min-height: var(--item-height); padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.row--link { padding: 0; }
.row__link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--item-height); padding: 12px 14px; }
.row__link:active { background: var(--bg-soft); }
.row--reversal { background: var(--bg-soft); }
.row__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none; }
.row__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.row__title { font-weight: 600; }
.row__meta { color: var(--text-secondary); font-size: 14px; }
.row__meta--warn { color: var(--icon-issue); }
.row__qty { font-weight: 600; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--text-secondary); font-weight: 500; }
.table tr:last-child td { border-bottom: 0; }
.table__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__note { display: block; color: var(--text-secondary); font-size: 13px; }
.table .is-cancelled td:not(.table__num) { color: var(--muted); text-decoration: line-through; }
.table__date { white-space: nowrap; }
.table__print { width: 1%; padding-left: 0 !important; padding-right: 8px !important; }
.table__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-secondary); }
.table__more { width: 100%; margin-top: 12px; }
.kind { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kind--receipt { background: var(--tile-receipt); color: var(--icon-receipt); }
.kind--issue { background: var(--tile-issue); color: var(--icon-issue); }
.kind--return { background: var(--tile-return); color: var(--icon-return); }
.kind--transfer { background: var(--tile-transfer); color: var(--icon-transfer); }
.kind--cancel { background: var(--tile-cancel); color: var(--danger); }
.table .is-cancelled .kind { opacity: 0.6; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--text-secondary); }
.dl dd { margin: 0; }

.messages { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); }
.message--success { background: var(--tile-receipt); color: var(--icon-receipt); border-color: transparent; }
.message--error { background: var(--tile-cancel); color: var(--danger); border-color: transparent; }

.section { margin-top: 20px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section__head .h1, .section__head .h2 { margin: 0; }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.filters__actions { grid-column: 1 / -1; display: flex; gap: 10px; }

.units { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--tile-stock); color: #2F5F7A; font-size: 13px; font-weight: 600; white-space: nowrap; }
.unit-new { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }

.inline__rows { display: flex; flex-direction: column; }
.inline__row { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.inline__row:first-child { border-top: 0; padding-top: 0; }
.inline__main { display: flex; align-items: flex-end; gap: 8px; }
.inline__main .field { flex: 1; min-width: 0; }
.inline__remove {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: var(--control-height); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
}
.inline__quantity { max-width: 240px; }
.inline__add { width: 100%; margin-top: 16px; }

.stepper { display: grid; grid-template-columns: var(--control-height) minmax(0, 1fr) var(--control-height); }
.stepper__btn {
  display: inline-flex; align-items: center; justify-content: center; height: var(--control-height);
  border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font: inherit;
}
.stepper__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.stepper__btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.stepper__btn:active { background: var(--bg-soft); }
.stepper__input { border-radius: 0; padding: 0 4px; text-align: center; font-weight: 600; font-size: 18px; appearance: textfield; -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.thumb {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-soft); color: var(--muted);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(17, 17, 17, 0.92); }
.lightbox:target { display: flex; align-items: center; justify-content: center; }
.lightbox__close { position: absolute; inset: 0; }
.lightbox__figure {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0; padding: 16px; max-width: 100%; max-height: 100%; pointer-events: none;
}
.lightbox__figure img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-sm); }
.lightbox__figure figcaption { color: var(--bg); font-weight: 600; }

.cancel-block { margin-top: 16px; padding: 14px; border-radius: var(--radius-sm); background: var(--tile-cancel); }
.cancel-block__title { margin: 0 0 8px; font-weight: 600; color: var(--danger); }
.cancel-form { margin-top: 16px; }
.cancel-form summary { list-style: none; cursor: pointer; width: 100%; }
.cancel-form summary::-webkit-details-marker { display: none; }
.cancel-form[open] summary { margin-bottom: 12px; }
.cancel-form .field { margin-bottom: 12px; }

@media (min-width: 600px) {
  .app { padding: 20px 24px 40px; }
  .pill__name { display: inline; }
}
.link { text-decoration: underline; }
.dl--spaced { margin: 16px 0 0; }

.document { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; margin-top: 16px; color: #000; }
.document__title { font-size: 20px; font-weight: 600; text-align: center; margin: 0 0 4px; }
.document__meta { text-align: center; margin: 0 0 20px; }
.document__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.document__table th, .document__table td { border: 1px solid #000; padding: 8px 10px; text-align: left; }
.document__table th { font-weight: 600; }
.document__num { width: 1%; text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.document__signatures { margin-top: 32px; }
.document__signatures p { margin: 0 0 16px; }

@page { margin: 0; }
@media print {
  body { background: #fff; }
  .app { max-width: none; padding: 0; }
  .header, .messages, .no-print, .section { display: none !important; }
  .document { border: 0; border-radius: 0; padding: 15mm; margin: 0; }
}