* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--color-bg); color: var(--color-text); font: 14px/1.4 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: 600; margin: 0; }
h2 { color: var(--color-muted); font-size: 13px; font-weight: 600; margin: 0; }
p { margin: 0; }

.app { display: flex; flex-direction: column; height: 100vh; }


.page { display: flex; flex: 1; flex-direction: column; gap: var(--gap); max-width: 1280px; min-height: 0; overflow: hidden; padding: 16px; }
.page > * { flex: 0 1 auto; min-height: 0; }
.page > .page__head, .page > .form, .page > .grid, .page > .fixed, .page > .card:has(> .form) { flex: none; }
.card:has(> .form) { overflow: visible; }
.page--scroll { overflow: auto; }
.page--scroll > * { flex: none; }
.page--scroll .card { overflow: visible; }
.page__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; }
.page__title { display: flex; flex-direction: column; gap: 4px; }
.page__meta { color: var(--color-muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 16px; }
.auth { align-items: center; display: flex; flex: 1; justify-content: center; padding: 24px; }
.auth .card { width: 360px; }
.auth .card__title { color: var(--color-text); font-size: 16px; }
.auth .form__footer > .button { flex: 1; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}
.card__title { color: var(--color-muted); font-size: 13px; font-weight: 600; }
.card__bar { align-items: center; display: flex; gap: var(--gap); justify-content: space-between; min-height: 24px; }

.grid { align-items: start; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.stack { align-items: flex-start; display: flex; flex-direction: column; gap: var(--gap); }
.table .stack, .page__head .stack { gap: 2px; }
.stack > .card { align-self: stretch; }
.stack > .card { flex: none; overflow: visible; }
.page > .stack { overflow: auto; }
.row { align-items: end; display: flex; flex-wrap: wrap; gap: var(--gap); }
.row--clickable { cursor: pointer; }
.row__toggle { margin-left: auto; }
.row--end { align-items: center; justify-content: flex-end; }
.hint { color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums; }
.empty { color: var(--color-muted); margin: 0; }
.cell { display: inline-flex; gap: 8px; }

.table__scroll { max-height: 760px; overflow: auto; }
.row-card { display: none; }
.table { border-collapse: collapse; width: 100%; }
.table th {
  background: var(--color-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}
.table td { border-bottom: 1px solid var(--color-hairline); padding: 8px 12px; vertical-align: middle; }
.table th, .table td { white-space: nowrap; width: 1px; }
.table th.wrap, .table td.wrap { white-space: normal; width: auto; }
.table th.num, .table td.num { text-align: right; }
.table td.muted { color: var(--color-muted); }
.table__row--link { cursor: pointer; }
.table__row--link:hover td { background: var(--color-row-hover); }
.table tr:last-child td { border-bottom: 0; }

.badge { border-radius: var(--radius); display: inline-block; font-size: 13px; padding: 1px 6px; white-space: nowrap; }
.badge--ok { background: var(--color-ok-bg); color: var(--color-ok); }
.badge--wait { background: var(--color-wait-bg); color: var(--color-wait); }
.badge--info { background: var(--color-info-bg); color: var(--color-info); }
.badge--muted { background: var(--color-muted-bg); color: var(--color-muted); }
.badge--error { background: var(--color-error-bg); color: var(--color-danger); }

.toast { border: 1px solid; border-radius: var(--radius); padding: 8px 14px; position: fixed; right: 16px; top: 12px; z-index: 10; }
.toast--ok { background: var(--color-ok-bg); border-color: var(--color-ok); color: var(--color-ok); }
.toast--error { background: var(--color-error-bg); border-color: var(--color-danger); color: var(--color-danger); }


.code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  margin: 0;
  overflow-x: auto;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-all;
}
.error { color: var(--color-danger); }
.sidebar__store { font-weight: 600; }
.sidebar__store--unused {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font: inherit;
  padding: 3px 6px;
}

.modal {
  align-items: flex-start;
  background: rgba(0, 0, 0, .6);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: auto;
  padding: 48px 16px;
  position: fixed;
  z-index: 20;
}
.modal__card { flex: none; max-height: calc(100vh - 96px); overflow: auto; width: min(960px, 100%); }
.modal__close { background: none; border: 0; color: var(--color-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.modal__close:hover { color: var(--color-text); }


.body { display: flex; flex: 1; min-height: 0; }
.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding: 12px 0;
  width: 240px;
}
.sidebar__menu { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; }
.sidebar__group { display: flex; flex-direction: column; }
.sidebar__group + .sidebar__group { padding-top: 16px; }
.sidebar__title { color: var(--color-muted); font-size: 12px; font-weight: 600; padding: 0 16px 4px; }
.sidebar__link { align-items: center; color: var(--color-text); display: flex; font-size: 14px; height: 32px; padding: 0 16px; }
.sidebar__link:hover { text-decoration: none; }
.sidebar__link--active { background: var(--color-bg); color: var(--color-text); font-weight: 500; }
.icon { align-items: center; background: none; border: 0; color: var(--color-muted); cursor: pointer; display: inline-flex; flex: none; height: var(--control-height); padding: 0 2px; }
.icon:hover { color: var(--color-text); }
.icon--remove:hover { color: var(--color-danger); }
.icon svg { height: 18px; width: 18px; }
.table .icon { height: 18px; }
.counter { align-items: center; display: inline-flex; gap: 2px; }
.counter__value { font-variant-numeric: tabular-nums; min-width: 4ch; padding-right: 6px; text-align: right; }
.icon--check { color: var(--color-ok); }
.icon--cross { color: var(--color-danger); }
.icon:disabled, .icon--disabled { cursor: default; opacity: .35; pointer-events: none; }
.sidebar__shift { border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }
.status > span { white-space: nowrap; }
.status__action { font-size: 13px; white-space: nowrap; }

.modal { align-items: center; padding: 16px; }
.modal__card { max-height: calc(100vh - 32px); width: min(520px, 100%); }
.modal__card--wide { width: min(760px, 100%); }
.modal__card--pick { width: min(960px, 100%); }
.modal .card__title { color: var(--color-text); font-size: 16px; }
.modal .form__footer { padding-top: 24px; }

.section { display: flex; flex-direction: column; gap: 8px; }
.section + .section { margin-top: 8px; }
.section__title { font-size: 15px; font-weight: 600; margin: 0; }
.form__footer { align-items: center; display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
.form__aside { margin-right: auto; }
.form__footer--inline { justify-content: flex-start; padding-top: 0; }
.form__footer--end { justify-content: flex-end; }
.toolbar { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px; }
.toolbar > .form { flex: none; }
.toolbar > .button { margin-left: auto; }
.row--search > .field { flex: none; width: 180px; }
.row--search > .field:first-child { width: 360px; }
.order-form { max-width: 960px; }
.lines { column-gap: 12px; display: grid; grid-template-columns: 1fr var(--width-narrow) var(--width-number) var(--width-narrow) var(--width-number) var(--control-height); }
.line-grid { --line-cols: 96px minmax(0, 1fr) 64px 112px 64px 112px 32px; display: flex; flex-direction: column; }
.line-row { align-items: center; border-bottom: 1px solid var(--color-hairline); column-gap: 12px; display: grid; grid-template-columns: var(--line-cols); padding: 8px 0; }
.line-row--head { background: var(--color-surface-2); color: var(--color-muted); font-size: 13px; font-weight: 600; height: 32px; padding: 0; }
.line-row .span-2 { grid-column: span 2; }
.line-row .num { text-align: right; }
.line-row input { height: var(--control-height); width: 100%; }
.line-row input[type=checkbox] { height: auto; width: auto; }
.line-tag { background: var(--color-muted-bg); border-radius: var(--radius); color: var(--color-muted); font-size: 12px; justify-self: start; padding: 2px 6px; }
.line-content { align-items: center; display: flex; gap: 8px; min-width: 0; }
.line-content > :first-child { flex: 1; min-width: 0; }
.line-params { grid-column: 2 / -1; }
.line-del { justify-self: end; }
.line-eye { align-items: end; display: flex; gap: 12px; padding-top: 8px; }
.line-eye > .grid12 { flex: 1; }
.line-side { line-height: var(--control-height); width: var(--width-side); }
.line-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan { display: flex; flex-direction: column; gap: 4px; }
.scan__list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); list-style: none; margin: 0; max-width: 720px; padding: 0; }
.scan__item { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: var(--width-narrow) 1fr var(--width-number) var(--width-group-label); height: 36px; padding: 0 12px; }
.scan__item:hover, .scan__item--selected { background: var(--color-bg); }
.scan__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan__item > .num { text-align: right; }

.dropdown { position: relative; }
.dropdown__trigger {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 8px;
  justify-content: space-between;
  height: var(--control-height);
  min-width: 120px;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}
.dropdown__trigger--open, .dropdown__trigger:focus { border-color: var(--color-primary); outline: none; }
.dropdown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__chevron { border-color: var(--color-muted) transparent transparent; border-style: solid; border-width: 5px 4px 0; flex: none; height: 0; width: 0; }
.dropdown__menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin: 2px 0 0;
  min-width: 100%;
  position: absolute;
  z-index: 30;
}
.dropdown__search { background: var(--color-surface); border: 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); font: inherit; padding: 6px 10px; width: 100%; }
.dropdown__search:focus { outline: none; }
.dropdown__search::placeholder { color: var(--color-muted); }
.dropdown__list { list-style: none; margin: 0; max-height: 260px; overflow: auto; padding: 4px 0; }
.dropdown__empty { color: var(--color-muted); padding: 5px 10px; }
.dropdown__option { align-items: center; cursor: pointer; display: flex; min-height: 36px; padding: 0 12px; white-space: nowrap; }
.dropdown__option:hover, .dropdown__option--selected { background: var(--color-bg); }
.dropdown__option--action { color: var(--color-link); }

.sidebar__brand { border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }
.sidebar__logo { color: var(--color-text); font-size: 15px; font-weight: 700; }
.sidebar__logo:hover { text-decoration: none; }
.status { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.dot { background: var(--color-muted); border-radius: 50%; display: inline-block; flex: none; height: 8px; width: 8px; }
.dot--ok { background: var(--color-ok); }
.sidebar__user { align-items: baseline; border-top: 1px solid var(--color-border); color: var(--color-muted); display: flex; gap: 8px; justify-content: space-between; margin-top: auto; padding: 12px 16px 0; }
.sidebar__logout { color: var(--color-muted); }
.sidebar__logout:hover { color: var(--color-text); text-decoration: none; }
.grid > .field--wide, .grid > label:has(textarea) { grid-column: 1 / -1; }
.stack > .field { align-self: stretch; }
.row--inline > .line__date { flex: none; width: var(--width-date); }

.summary { display: grid; gap: 2px 16px; grid-template-columns: auto 1fr; margin: 0; }
.summary dt { color: var(--color-muted); }
.summary dd { margin: 0; }
.seg { align-self: flex-start; background: var(--color-track); border-radius: var(--radius); display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; }
.seg__button { align-items: center; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--color-text); cursor: pointer; display: inline-flex; font: inherit; height: 28px; justify-content: center; padding: 0 12px; }
.seg__button--active { background: var(--color-surface); border-color: var(--color-border-strong); font-weight: 500; }

.steps { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
.steps__item { align-items: center; color: var(--color-muted); display: inline-flex; height: var(--control-height); padding: 0 10px; white-space: nowrap; }
.steps__item--done { color: var(--color-muted); gap: 4px; }
.steps__item--current { border-bottom: 2px solid var(--color-info); color: var(--color-info); }
.steps__item--next { color: var(--color-text); }
.steps__item--final { background: var(--color-ok-bg); color: var(--color-ok); }
.steps__item--cancelled { background: var(--color-muted-bg); color: var(--color-muted); }
.row--inline > .field__input { flex: 1; min-width: 0; width: auto; }
.row--inline:has(> .dropdown) { flex-wrap: nowrap; }
.row--inline > .dropdown { flex: 1; min-width: 0; }

.grid12 { display: grid; gap: 16px 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid12 > * { grid-column: span 12; min-width: 0; }
.grid12 > .button { justify-self: start; }
.grid12 > .col-2 { grid-column: span 2; }
.grid12 > .col-3 { grid-column: span 3; }
.grid12 > .col-4 { grid-column: span 4; }
.grid12 > .col-6 { grid-column: span 6; }
.grid12 > .col-8 { grid-column: span 8; }
.grid12 > .col-4.start { grid-column: 1 / span 4; }
.grid12 > .field--inline { align-self: end; min-height: var(--control-height); }

.blanks { background: var(--color-surface); color: #000; font-size: 9pt; line-height: 1.3; position: relative; width: 210mm; }
.blanks--small { font-size: 8pt; }
.blanks__cut { border-top: 1px dashed #000; height: 0; left: 0; position: absolute; right: 0; top: 148.5mm; }
.blanks__cut span { font-size: 7pt; left: 50%; position: absolute; top: 1mm; transform: translateX(-50%); }
.blanks--pages .blanks__cut { display: none; }
.blank { box-sizing: border-box; display: flex; flex-direction: column; gap: 2mm; height: 148.5mm; overflow: hidden; padding: 10mm; }
.blanks--pages .blank { height: 297mm; }
.blank div, .blank span { color: #000; }
.blank__body { display: flex; flex: 1; flex-direction: column; gap: 1mm; }
.blank__copy { font-size: 8pt; text-align: right; }
.blank__head { display: flex; gap: 10mm; justify-content: space-between; }
.blank__order { text-align: right; }
.blank__strong { font-size: 11pt; font-weight: 600; }
.blank__rx { display: flex; flex-direction: column; gap: 0.5mm; }
.blank__rx-date { font-size: 8pt; text-align: right; }
.blank__small { font-size: 8pt; }
.blank__small--hidden { visibility: hidden; }
.blank__sign { display: flex; gap: 10mm; }
.blank__sign-cell { display: flex; flex: 1; flex-direction: column; gap: 0.5mm; }
.blank__line { border-bottom: 1px solid #000; height: 12mm; }
.blank .table { font-variant-numeric: tabular-nums; }
.blank .table th { background: none; border-bottom: 1px solid #000; color: #000; font-size: 8pt; font-weight: 600; padding: 0.6mm 2mm; position: static; }
.blank .table td { border-bottom: 1px solid #c7c7c7; padding: 0.6mm 2mm; }
.blank .table tfoot td { border: 0; padding: 0.4mm 2mm; }
.blank .table .strong { font-weight: 600; }
.blank .lens { display: flex; flex-direction: column; line-height: 1.2; }
.blank .lens__traits, .blank .lens__diopters { font-size: 8pt; }

.lens { display: flex; flex-direction: column; gap: 2px; }
.lens__traits { color: var(--color-muted); font-size: 13px; }
.lens__diopters { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { background: var(--color-muted-bg); border-radius: var(--radius); color: var(--color-muted); font-size: 12px; padding: 1px 6px; white-space: nowrap; }

@page { margin: 0; size: A4; }
@media print {
  .sidebar, .topbar, .backdrop, .no-print, .toast { display: none; }
  .body, .app { display: block; height: auto; overflow: visible; }
  html, body { height: auto; overflow: visible; }
  .page { max-width: none; overflow: visible; padding: 0; }
  .blanks { width: auto; }
  .blanks--pages .blank:last-child { break-before: page; }
  .table__scroll { max-height: none; overflow: visible; }
  body { background: #fff; color: #000; }
}

.line__num { text-align: right; }
.row--fields { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius); color: var(--color-text); cursor: pointer; font: inherit; height: 28px; padding: 0 10px; }
.chip--on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }
.pick { display: flex; flex-direction: column; gap: 16px; }
.pick__row { align-items: center; display: flex; gap: 12px; }
.pick__label { color: var(--color-muted); flex: none; font-size: 13px; width: var(--width-group-label); }
.eyes { align-items: end; display: grid; gap: 8px 12px; grid-template-columns: var(--width-side) repeat(4, var(--width-number)); justify-content: start; }
.eyes > .field--inline { grid-column: 1 / -1; }
.eyes__side { line-height: var(--control-height); }
.stock--here { color: var(--color-ok); }
.stock--order { color: var(--color-muted); }

.topbar { align-items: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: none; gap: 12px; height: 48px; padding: 0 12px; }
.topbar__menu { background: var(--color-secondary); border: 0; border-radius: var(--radius); color: var(--color-text); font: inherit; height: 40px; padding: 0 12px; }
.topbar__store { font-weight: 600; }
.backdrop { background: rgba(0, 0, 0, .4); inset: 0; position: fixed; z-index: 15; }

@media screen and (max-width: 1023px) {
  .topbar { display: flex; }
  .sidebar { bottom: 0; left: 0; position: fixed; top: 0; transform: translateX(-100%); transition: transform .15s; z-index: 20; }
  .body--menu .sidebar { transform: none; }
  .page { max-width: none; }
  .row--search { flex-wrap: wrap; }
  .row--search > .field, .row--search > .field:first-child { width: auto; }
}

@media screen and (max-width: 767px) {
  :root { --control-height: 40px; --gap: 12px; }
  .page { gap: 12px; overflow: auto; padding: 12px; }
  .page > * { flex: none; }
  .page__head { align-items: stretch; flex-direction: column; }
  .page__head .button, .page__head > a.button { width: 100%; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .button { width: 100%; }
  .grid { grid-template-columns: 1fr; }
  .grid12 > * { grid-column: 1 / -1; }
  .field--narrow, .field--number, .field--date, .field--narrow > .field__input, .field--number > .field__input, .field--date > .field__input { width: 100%; }
  .steps { flex-wrap: wrap; }
  .chip { height: 40px; }
  .icon { height: 40px; }
  .button { min-height: 40px; }
  .sidebar__link { height: 40px; }
  .dropdown__option { min-height: 44px; }
  .modal { padding: 0; }
  .modal__card, .modal__card--wide, .modal__card--pick { max-height: 100vh; min-height: 100vh; width: 100%; }
  .table__scroll { max-height: none; overflow: visible; }
  .table, .table thead, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table thead { display: none; }
  .table tr { border-bottom: 1px solid var(--color-border); padding: 8px 0; }
  .table tr:last-child { border-bottom: 0; }
  .table td { border: 0; display: flex; gap: 12px; justify-content: space-between; padding: 2px 0; text-align: left; white-space: normal; width: auto; }
  .table td::before { color: var(--color-muted); content: attr(data-label); flex: none; font-size: 13px; }
  .table td:empty { display: none; }
  .table td:first-child { font-size: 16px; font-weight: 600; }
  .table td ~ td { font-size: 13px; }
  .table td::before { font-size: 13px; font-weight: 400; }
  .table tr:has(.row-card) td { display: none; }
  .table tr:has(.row-card) td.row-card { display: flex; flex-direction: column; font-size: 14px; font-weight: 400; gap: 2px; }
  .row-card::before { content: none; }
  .row-card__top { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
  .row-card__main { font-size: 16px; font-weight: 600; }
  .row-card__side { white-space: nowrap; }
  .row-card__meta { color: var(--color-muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 6px; }
  .row-card__part + .row-card__part::before { content: "· "; }
  .line-row { grid-template-columns: 96px minmax(0, 1fr) 1fr 1fr; row-gap: 8px; }
  .line-row--head { display: none; }
  .line-row .line-content { grid-column: 2 / -1; }
  .line-row .num { grid-column: auto; }
  .line-row .line-del { grid-column: 4; }
  .line-params { grid-column: 1 / -1; }
  .line-eye { flex-wrap: wrap; }
  .eyes { gap: 8px; grid-template-columns: var(--width-side) repeat(4, minmax(0, 1fr)); }
  .eyes .field, .eyes .field__input { width: 100%; }
  .modal__close { height: 40px; min-width: 40px; }
  .pick__row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pick__label { width: auto; }
}