.toolbar {
  align-items: end;
  padding: 12px;
}

.toolbar label span {
  font-size: 15px;
}

.toolbar select {
  height: 48px;
  font-size: 19px;
}

.toolbar button {
  height: 48px;
}

.toolbar .supply-search {
  width: 190px;
  height: 48px;
}

.toolbar .compact-check {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}

.supply-sync-dialog {
  width: min(900px, 94vw);
}

.supply-sync-results {
  max-height: 58vh;
}

.supply-sync-results th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef3f9;
}

.stats {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 8px;
}

.stats > [hidden] {
  display: none !important;
}

.stats article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 18px;
  min-height: 46px;
  border-left: 6px solid #8a96aa;
  padding: 6px 12px;
}

.stats article span {
  display: inline;
  font-size: 15px;
}

.stats article strong {
  margin: 0;
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
}

.stats article.matched-stat {
  border-left-color: #617ee7;
  background: #eaf0ff;
}

.stats article.matched-stat > span {
  color: #3157b7;
}

.stats article.orders-stat {
  position: relative;
  border-left-color: #617ee7;
  background: #eaf0ff;
}

.stats article.orders-stat > span:first-child {
  color: #3157b7;
}

.stats article.orders-stat:focus-visible {
  outline: 3px solid #3157b7;
  outline-offset: 2px;
}

.stats .order-coverage-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.stats .order-coverage-value .stat-count {
  color: #07834d;
}

.stats .order-coverage-value .stat-count.is-mismatch {
  color: #c23636;
}

.stats .order-coverage-value .stat-divider {
  color: #657187;
  font-weight: 500;
}

.stats article .order-summary-tooltip {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  left: 0;
  visibility: hidden;
  width: max-content;
  max-width: min(430px, calc(100vw - 40px));
  padding: 10px 12px;
  border-radius: 9px;
  background: #172033;
  box-shadow: 0 10px 28px #17203338;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  white-space: pre-line;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.stats article.orders-stat:hover .order-summary-tooltip,
.stats article.orders-stat:focus .order-summary-tooltip,
.stats article.orders-stat:focus-within .order-summary-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.stats article.queue-stat {
  border-left-color: #e79a0a;
  background: #fff7e0;
}

.stats article.queue-stat strong {
  color: #a75f00;
}

.stats article.success {
  border-left-color: #15905f;
  background: #ecfdf3;
}

.stats article.success strong {
  color: #07834d;
}

#ordersTable .status.lookup-EXISTS {
  background: #dcf8e9;
  color: #08633d;
}

#ordersTable .status.lookup-MISSING,
#ordersTable .status.lookup-AMBIGUOUS {
  background: #fff1c7;
  color: #75520b;
}

#ordersTable .status.lookup-ERROR {
  background: #fee7e7;
  color: #9e2525;
}

.stats .matched-stat strong.mapping-count-complete {
  color: #07834d;
}

.stats .matched-stat strong.mapping-count-incomplete {
  color: #c23636;
}

.stats .matched-stat strong.mapping-count-neutral {
  color: #657187;
}

.stats article strong span {
  font-size: inherit;
  color: inherit;
}

.scanner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
}

.scanner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scanner-title h2 {
  margin: 0;
}

.scanner-actions {
  display: flex;
  gap: 8px;
}

.scanner-actions button {
  padding: 10px 16px;
}

.resume-button { background: #15905f; }
.pause-button { background: #d64154; }

.scanner input {
  height: 48px;
  text-align: center;
}

.scanner .message {
  grid-column: 1;
}

.orders-card {
  height: calc(100vh - 380px);
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.orders-card .table-wrap {
  flex: 1;
  min-height: 0;
  margin: 8px -10px -10px;
  border-top: 1px solid #e6eaf0;
}

.moved-orders-section {
  flex: 0 0 auto;
  margin: 12px -10px -10px;
  padding: 10px;
  border-top: 2px solid #d8e0ec;
  background: #f8fafc;
}

.moved-orders-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.moved-orders-heading h3,
.moved-orders-heading p {
  margin: 0;
}

.moved-orders-heading p {
  margin-top: 3px;
  color: #65728a;
  font-size: 12px;
}

.orders-card .moved-orders-table-wrap {
  flex: 0 1 auto;
  max-height: 230px;
  margin: 8px 0 0;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
}

#movedOrdersTable {
  width: 100%;
  min-width: 1500px;
}

#movedOrdersTable th,
#movedOrdersTable td {
  padding: 8px 10px;
  vertical-align: top;
}

#movedOrdersTable thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef3f9;
}

#movedOrdersTable .title-cell {
  min-width: 280px;
  white-space: normal;
}

#ordersTable {
  min-width: 1220px;
}

#columnMenu {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: min(320px,calc(100vw - 24px));
  max-height: min(480px,calc(100dvh - 24px));
  overflow: hidden;
  right: auto;
}
#columnMenu[hidden] { display: none; }
#columnOptions { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
#columnOptions label { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
#columnOptions label[hidden] { display: none; }
#columnOptions label:hover { background: #f3f6fc; }
#columnOptions label input { flex: 0 0 auto; margin: 0; }
#columnMenu .column-menu-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex-shrink: 0; }
#columnMenu .column-menu-actions button { min-width: 0; white-space: normal; }
#columnOptions .order-column-option { display: flex; align-items: center; gap: 4px; }
#columnOptions .order-column-option label { flex: 1; min-width: 0; }
.order-column-move { display: flex; flex: 0 0 auto; gap: 3px; }
.order-column-move button { padding: 5px 8px; font-size: 14px; line-height: 20px; }

#ordersTable th,
#ordersTable td {
  padding: 8px 10px;
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.admin-print-target {
  border-top: 1px solid #e6eaf0;
  padding-top: 16px;
}

@media (max-width: 1450px) {
  .program-tab {
    padding: 8px 10px;
    font-size: 13px;
  }
}

dialog {
  width: min(720px, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 22px 80px #11182755;
}

dialog::backdrop {
  background: #11182788;
}

.scan-failure-dialog {
  width: min(520px, calc(100vw - 32px));
}

.scan-failure-dialog > .settings-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 24px;
}

.scan-failure-dialog .dialog-title {
  display: block;
  width: 100%;
}

.scan-failure-dialog .dialog-title h2,
.scan-failure-dialog .message {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.scan-failure-dialog .dialog-title p {
  margin-top: 8px;
  line-height: 1.4;
}

.scan-failure-dialog .message {
  display: block;
  grid-column: 1;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.scan-failure-dialog .dialog-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.scan-failure-dialog .dialog-actions button {
  width: 100%;
  min-height: 44px;
}

.auth-dialog {
  width: min(390px, calc(100vw - 28px));
  border-radius: 16px;
}

.auth-form {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.auth-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-heading h2,
.auth-heading p {
  margin: 0;
}

.auth-heading h2 {
  font-size: 22px;
  line-height: 1.2;
}

.auth-heading p {
  margin-top: 3px;
  color: #687487;
  font-size: 13px;
}

.auth-mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 11px;
  background: #2762e8;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .03em;
}

.auth-fields {
  display: grid;
  gap: 12px;
}

.auth-fields label span {
  display: block;
  margin-bottom: 5px;
  color: #4e5b70;
  font-size: 13px;
  font-weight: 700;
}

.auth-fields input {
  height: 42px;
  padding: 9px 11px;
}

.auth-form .message {
  grid-column: auto;
  min-height: 34px;
  padding: 8px 10px;
  font-size: 13px;
}

.auth-form button {
  width: 100%;
  height: 42px;
  padding: 9px 14px;
}

.settings-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.settings-form label span {
  display: block;
  margin-bottom: 7px;
  color: #5f6b7c;
  font-size: 13px;
  font-weight: 700;
}

.dialog-title,
.dialog-actions,
.wb-supply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-title h2,
.dialog-title p {
  margin: 0;
}

.dialog-title p {
  margin-top: 4px;
  color: #687487;
  font-size: 14px;
}

.dialog-actions {
  justify-content: flex-end;
}

.wb-supplies-list {
  display: grid;
  gap: 9px;
  max-height: 55vh;
  overflow: auto;
}

.wb-supply-row {
  border: 1px solid #dfe4eb;
  border-radius: 10px;
  padding: 12px;
}

.wb-supply-row small {
  display: block;
  margin-top: 4px;
  color: #687487;
}

.wide-dialog {
  width: min(1280px, calc(100vw - 32px));
}

.registry-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.registry-toolbar a {
  color: #2762e8;
  font-size: 14px;
  font-weight: 700;
}

.registry-table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
}

.registry-table-wrap .hash {
  max-width: 190px;
  overflow: hidden;
  font-family: Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.registry-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.registry-filters input {
  padding: 8px 10px;
  font-size: 13px;
}

#registryTable {
  min-width: 2600px;
}

#registryTable thead {
  position: sticky;
  top: 0;
  z-index: 4;
}

#registryTable th {
  cursor: pointer;
  white-space: nowrap;
}

.base64-preview {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 3px 7px;
  align-items: center;
}

.base64-preview code {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.base64-preview small {
  color: #687487;
}

.base64-preview button {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 6px 8px;
  font-size: 11px;
}

.section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.column-menu-wrap {
  position: relative;
}

.column-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 250px;
  border: 1px solid #dfe4eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 35px #17203324;
  padding: 10px;
}

.column-menu label {
  display: block;
  padding: 6px 4px;
  color: #253550;
  font-size: 14px;
}

.column-menu label[hidden] {
  display: none;
}

.column-menu label input {
  width: auto;
  margin-right: 6px;
}

.column-menu-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid #e6eaf0;
  margin-top: 7px;
  padding-top: 9px;
}

.column-menu-actions button {
  flex: 1;
  padding: 8px;
  font-size: 12px;
}

#ordersTable {
  width: 100%;
  min-width: 1080px;
  table-layout: auto;
}

#ordersTable th,
#ordersTable td {
  min-width: 50px;
  max-width: 200px;
  box-sizing: border-box;
}

#ordersTable th[data-column="title"],
#ordersTable td[data-column="title"],
#ordersTable .title-cell {
  min-width: 300px;
  max-width: none;
}

#ordersTable #ordersHeader th[data-column="title"] {
  width: 100%;
}

#ordersTable th[data-column="kiz"],
#ordersTable td[data-column="kiz"],
#ordersTable .kiz-cell {
  min-width: 150px;
  max-width: 200px;
}

/* Readable operator-table proportions. Fixed-data columns keep a stable
   preferred width; the product name absorbs the remaining viewport width. */
#ordersTable [data-column="productType"] { width: 55px; min-width: 55px; }
#ordersTable [data-column="id"] { width: 105px; min-width: 105px; }
#ordersTable [data-column="orderDate"] { width: 125px; min-width: 125px; }
#ordersTable [data-column="vendorCode"] { width: 130px; min-width: 130px; }
#ordersTable [data-column="mySkladArticle"] { width: 115px; min-width: 115px; }
#ordersTable [data-column="nmId"] { width: 100px; min-width: 100px; }
#ordersTable [data-column="stickerCode"] { width: 150px; min-width: 150px; }
#ordersTable [data-column="kiz"] { width: 150px; min-width: 150px; }
#ordersTable [data-column="sku"] { width: 150px; min-width: 150px; }
#ordersTable [data-column="mySkladBarcodes"] { width: 165px; min-width: 165px; }
#ordersTable [data-column="status"] { width: 75px; min-width: 75px; }
#ordersTable [data-column="actions"] { width: 150px; min-width: 150px; }
#ordersTable [data-column="mappingStatus"] { width: 120px; min-width: 120px; }

#ordersTable thead {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #f8fafc;
  box-shadow: 0 2px 0 #d9e0e9;
}

#ordersTable thead th {
  background: #f8fafc;
}

#ordersTable th {
  position: relative;
  cursor: pointer;
  user-select: none;
}

#ordersTable .order-column-label {
  padding-right: 7px;
}

#ordersTable .column-resize-handle {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

#ordersTable .column-resize-handle::after {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}

#ordersTable th:hover .column-resize-handle::after,
#ordersTable .column-resize-handle:focus-visible::after,
body.order-column-resizing #ordersTable .column-resize-handle::after {
  background: #7fa2ee;
}

body.order-column-resizing,
body.order-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

#ordersTable .filter-row th {
  padding: 5px 6px;
  cursor: default;
}

#ordersTable .filter-row input {
  min-width: 0;
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 12px;
}

#ordersTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ordersTable .title-cell,
#ordersTable td[data-column="vendorCode"],
#ordersTable td[data-column="mySkladArticle"] {
  overflow-wrap: anywhere;
  white-space: normal;
}

#ordersTable .sticker-code-cell {
  font-variant-numeric: tabular-nums;
  min-width: 150px;
  font-weight: 700;
  letter-spacing: .02em;
  overflow-wrap: normal;
  white-space: nowrap;
}

#ordersTable .sort-marker {
  color: #2762e8;
}

#ordersTable .row-actions {
  display: flex;
  gap: 5px;
}

#ordersTable .row-actions button {
  padding: 7px 8px;
  font-size: 12px;
}

#ordersTable .printed-order {
  background: #f1fbf6;
}

#ordersTable .wb-cancelled-order {
  background: #ffe4e6;
  color: #8f1d2c;
  box-shadow: inset 6px 0 #dc3545;
}

#ordersTable .wb-cancelled-order .status.WB_CANCELLED {
  background: #cf3045;
  color: #fff;
}

#ordersTable .wb-cancelled-order [data-print-sku],
#ordersTable .wb-cancelled-order [data-reprint] {
  display: none;
}

#ordersTable .active-print-order {
  background: #dce9ff;
  box-shadow: inset 0 0 0 3px #2762e8;
}

.sku-print-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sku-print-cell button {
  padding: 6px 8px;
  font-size: 12px;
}

#ordersTable .kit-order {
  box-shadow: inset 4px 0 #8b5cf6;
}

/* Settings and compact operator controls */
button,
.button-link {
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.15;
}

.program-tabs {
  gap: 5px;
}

.program-tab {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.toolbar button,
.scanner-actions button,
.section-actions button,
.section-actions .button-link {
  min-height: 34px;
  padding: 7px 12px;
}