:root {
  --app-scale: 1;
  --app-frame-width: 100vw;
  --app-frame-height: 100vh;
  --waste-calculator-size: 0.9;
  --waste-right-panel-size: 0.9;
  --heat-cook-panel-size: 0.9;
  --native-safe-top: env(safe-area-inset-top, 0px);
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-viewport-height: calc(100vh - var(--native-safe-top) - var(--native-safe-bottom));
  --title: #737373;
  --rail: #ece8f5;
  --rail-ink: #6f63a3;
  --side: #ffffff;
  --panel: #f7f7f7;
  --surface: #ffffff;
  --line: #c9cdd2;
  --line-dark: #aeb4bb;
  --ink: #20242a;
  --muted: #6f7782;
  --field: #e4f5f8;
  --field-white: #ffffff;
  --accent: #ff6335;
  --blue: #4d78b8;
  --green: #16825c;
  --red: #bd3341;
  --status-default-bg: #ffffff;
  --status-default-border: #d5dbe2;
  --status-default-ink: #20242a;
  --status-ok-bg: #e8f7ed;
  --status-ok-bg-strong: #dff3d7;
  --status-ok-border: #8fc79b;
  --status-ok-ink: #146c2e;
  --status-warning-bg: #fff6d9;
  --status-warning-bg-strong: #ffedb1;
  --status-warning-border: #e7c36b;
  --status-warning-ink: #7a4a00;
  --status-error-bg: #ffe7e3;
  --status-error-bg-strong: #ffd6cf;
  --status-error-border: #d7867c;
  --status-error-ink: #8c2f22;
  --status-disabled-bg: #eef1f4;
  --status-disabled-border: #cfd5dc;
  --status-disabled-ink: #6b7280;
  --status-active-bg: #e7f0ff;
  --status-active-bg-strong: #d8e8ff;
  --status-active-border: #6f9fe8;
  --status-active-ink: #174d86;
  --status-active-outline: #1e6bd6;
  --shadow: 0 10px 24px rgba(32, 36, 42, 0.08);
  --titlebar-control-height: 32px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #dfe3e7;
  font-family: "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

body.is-native-app {
  --native-safe-top: 0px;
  --native-safe-bottom: 0px;
}

.erp-frame {
  display: grid;
  grid-template-columns: 78px clamp(300px, 26vw, 500px) minmax(0, 1fr);
  grid-template-rows: 42px minmax(0, 1fr);
  width: var(--app-frame-width);
  height: calc(var(--app-frame-height) - var(--native-safe-top) - var(--native-safe-bottom));
  margin-top: var(--native-safe-top);
  min-width: 0;
  overflow: hidden;
  transform: scale(var(--app-scale));
  transform-origin: top left;
}

body.is-auth-pending .erp-frame,
body.is-logged-out .erp-frame {
  visibility: hidden;
  pointer-events: none;
}

body.is-native-app .erp-frame {
  height: calc(var(--app-frame-height) - var(--native-safe-top));
  margin-top: var(--native-safe-top);
}

body.is-native-app .quick-search-backdrop,
body.is-native-app .alert-backdrop,
body.is-native-app .settings-backdrop {
  padding-top: var(--native-safe-top);
}

body.is-native-app.is-mobile-expiry .mobile-expiry-view {
  min-height: calc(100vh - var(--native-safe-top) - var(--native-safe-bottom));
  padding-top: max(12px, var(--native-safe-top));
  padding-bottom: max(12px, var(--native-safe-bottom));
}

body.is-printing {
  --app-scale: 1 !important;
  --app-frame-width: auto !important;
  --app-frame-height: auto !important;
}

.screen-scale-floating {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 1100;
  display: grid;
  grid-template-columns: auto 150px 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid #c8cfd8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px 8px;
  color: #26313f;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.screen-scale-floating input {
  width: 100%;
}

body.is-screen-scale-hotspot .screen-scale-floating,
.screen-scale-floating:hover,
.screen-scale-floating:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.is-auth-pending .screen-scale-floating,
body.is-logged-out .screen-scale-floating,
body.is-mobile-menu .screen-scale-floating,
body.is-mobile-expiry .screen-scale-floating,
body.is-mobile-sample .screen-scale-floating,
body.is-mobile-barcode .screen-scale-floating,
body.is-mobile-production .screen-scale-floating,
body.meal-calc-fullscreen-mode .screen-scale-floating,
body.waste-calculator-fullscreen-mode .screen-scale-floating,
body.processing-daily-fullscreen-mode .screen-scale-floating,
body.heat-cook-fullscreen-mode .screen-scale-floating,
body.is-printing .screen-scale-floating {
  display: none;
}

.erp-frame.is-menu-collapsed {
  grid-template-columns: 78px 0 minmax(0, 1fr);
}

.titlebar {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: minmax(174px, 220px) minmax(260px, 520px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  color: #ffffff;
  background: linear-gradient(90deg, #77717f 0%, #827c8e 56%, #736d82 100%);
  border-bottom: 1px solid rgba(238, 235, 246, 0.5);
}

.titlebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.window-dot {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border: 2px solid #dad7e6;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.brand {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlebar-search {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  justify-self: stretch;
  width: 100%;
  min-width: 220px;
  height: var(--titlebar-control-height);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d8d4e4;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(58, 54, 74, 0.16);
}

.titlebar-search input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  padding: 0 12px 0 4px;
  color: var(--ink);
  background: transparent;
  outline: 0;
  font-size: 14px;
  font-weight: 800;
}

.titlebar-search input::placeholder {
  color: #79828d;
  font-weight: 800;
}

.titlebar-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  border: 0;
  border-right: 1px solid #d6dce4;
  color: #52606f;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.titlebar-search-button:hover {
  background: #f1f3f5;
}

.quick-search-backdrop {
  position: fixed;
  z-index: 980;
  inset: 42px 0 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
}

.quick-search-backdrop[hidden] {
  display: none;
}

.quick-search-panel {
  width: min(760px, calc(100vw - 190px));
  max-width: calc(100vw - 32px);
  border: 2px solid #71649e;
  border-radius: 14px;
  padding: 12px 14px 14px;
  color: #262039;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(32, 30, 45, 0.34);
}

.quick-search-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.quick-search-panel h2 {
  margin: 0;
  color: #71649e;
  font-size: 22px;
  font-weight: 500;
}

.quick-search-panel header button {
  width: 32px;
  height: 32px;
  border: 0;
  color: #c3c0cb;
  background: transparent;
  font-size: 30px;
  line-height: 1;
}

.quick-search-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  height: 38px;
  border: 2px solid #7a6ca7;
  background: #ffffff;
}

.quick-search-input-row input {
  min-width: 0;
  border: 0;
  padding: 0 8px;
  color: #262039;
  font-size: 20px;
  font-weight: 800;
  outline: 0;
}

.quick-search-input-row button {
  border: 0;
  border-left: 1px solid #9086bb;
  color: #ffffff;
  background: #5f4fa0;
  font-size: 23px;
  font-weight: 800;
}

.quick-search-panel .global-search-results {
  position: static;
  display: block;
  max-height: min(340px, calc(100vh - 260px));
  margin-top: 10px;
  overflow: auto;
  border: 0;
  border-top: 7px solid #d7d4dc;
  background: #ffffff;
  box-shadow: none;
}

.global-search-results[hidden] {
  display: none;
}

.global-search-result,
.global-search-empty {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid #eef0f3;
  padding: 9px 10px;
  color: #20242a;
  background: #ffffff;
  text-align: left;
}

.global-search-result {
  display: grid;
  gap: 2px;
}

.global-search-result:hover,
.global-search-result.is-active {
  background: #fff1eb;
}

.global-search-result strong {
  font-size: 15px;
}

.global-search-result span {
  color: #6b7480;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}

.global-search-empty {
  color: #69727d;
  font-weight: 700;
}

.titlebar-account {
  display: flex;
  grid-column: 4;
  gap: 8px;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
  width: auto;
  max-width: min(46vw, 450px);
  min-width: 0;
}

.titlebar-user-menu {
  display: grid;
  flex: 1 1 230px;
  grid-template-columns: minmax(92px, 0.75fr) minmax(116px, 1fr);
  align-items: center;
  width: clamp(190px, 22vw, 250px);
  min-width: 0;
  height: var(--titlebar-control-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.titlebar-account span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--titlebar-control-height);
  min-width: 0;
  padding: 0 10px;
  border: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.titlebar-account-center {
  border-right: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #f1f5f9 !important;
}

.titlebar-account-center::before {
  content: "";
  display: none;
}

.titlebar-account-name::before {
  content: "";
  display: none;
}

.titlebar-logout,
.titlebar-mobile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--titlebar-control-height);
  min-width: 74px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 4px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.titlebar-mobile {
  background: rgba(255, 255, 255, 0.18);
}

.titlebar-logout {
  background: rgba(103, 96, 123, 0.28);
}

.titlebar-mobile:hover,
.titlebar-logout:hover {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.24);
}

@media (max-width: 1180px) {
  .titlebar {
    grid-template-columns: minmax(154px, 184px) minmax(210px, 380px) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 8px;
  }

  .titlebar-brand {
    gap: 8px;
  }

  .brand {
    max-width: 132px;
    font-size: 14px;
  }

  .titlebar-search {
    min-width: 180px;
  }

  .titlebar-account {
    gap: 5px;
    max-width: none;
  }

  .titlebar-user-menu {
    width: clamp(156px, 20vw, 205px);
    grid-template-columns: minmax(68px, 0.8fr) minmax(84px, 1fr);
  }

  .titlebar-account span {
    padding: 0 6px;
    font-size: 12px;
  }

  .titlebar-logout,
  .titlebar-mobile {
    min-width: 64px;
    padding: 0 8px;
    font-size: 12px;
  }
}

@media (max-width: 1040px) {
  .titlebar {
    grid-template-columns: minmax(146px, 180px) minmax(180px, 1fr) auto;
  }

  .titlebar-account {
    grid-column: auto;
  }

  .titlebar-user-menu {
    display: none;
  }

  .titlebar-search {
    max-width: none;
  }

  .titlebar-account {
    flex: 0 0 auto;
  }
}

.icon-rail {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--rail);
  border-right: 1px solid #d6d0e8;
}

.rail-button {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 82px;
  border: 0;
  border-bottom: 1px solid #ded8ee;
  color: var(--rail-ink);
  background: transparent;
  font-weight: 700;
}

.rail-button.is-active {
  background: #ffffff;
}

.rail-button--bottom {
  margin-top: auto;
  border-top: 1px solid #ded8ee;
}

.rail-icon {
  display: block;
  margin-top: 9px;
  font-size: 31px;
  line-height: 1;
}

.rail-pinned-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 6px;
  min-height: 78px;
  overflow-y: auto;
  padding: 8px 6px;
  border-top: 1px solid #ded8ee;
  -webkit-overflow-scrolling: touch;
}

.rail-pinned-list.is-drop-target {
  background: rgba(255, 99, 53, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 99, 53, 0.4);
}

.rail-pin-empty {
  display: none;
}

.rail-pin-item {
  position: relative;
  display: grid;
  min-width: 0;
  cursor: grab;
}

.rail-pin-item.is-dragging {
  opacity: 0.45;
}

.rail-pin-item.is-drop-target {
  box-shadow: inset 0 3px 0 var(--accent);
}

.rail-pin-item.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.rail-pin-open {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 58px;
  border: 1px solid #d8d2e8;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #5e5489;
  padding: 6px 4px;
  font-weight: 900;
}

.rail-pin-item.is-active .rail-pin-open {
  border-color: var(--accent);
  background: #ffffff;
  color: #d44724;
  box-shadow: inset 0 0 0 1px rgba(255, 99, 53, 0.35);
}

.rail-pin-icon {
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 24px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  word-break: keep-all;
}

.rail-pin-label {
  max-width: 56px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-pin-remove {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #bfc5d0;
  border-radius: 50%;
  background: #ffffff;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.side-menu {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--side);
  border-right: 1px solid var(--line-dark);
}

.erp-frame.is-menu-collapsed .side-menu {
  display: none;
}

.erp-frame.is-menu-collapsed .rail-button[data-menu-main] {
  background: #ffffff;
}

.favorite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 88px;
  padding: 22px 18px 14px;
  border-bottom: 1px solid #e1e4e8;
}

.favorite-head h2 {
  margin: 0;
  color: #3d3572;
  font-size: 21px;
}

.circle-button {
  width: 39px;
  height: 39px;
  border: 2px solid #d9dde2;
  border-radius: 50%;
  color: #98a0a8;
  background: #ffffff;
  font-size: 21px;
}

.side-actions {
  display: flex;
  gap: 22px;
  padding: 13px 28px;
  border-bottom: 1px solid #e7eaed;
}

.side-actions button {
  border: 0;
  color: #555c65;
  background: transparent;
  font-weight: 800;
}

.side-actions button.is-active {
  color: var(--accent);
}

.side-actions button:disabled {
  color: #a5abb2;
  cursor: default;
}

.menu-list {
  min-height: 0;
  overflow: auto;
  padding: 10px 11px 28px;
}

.menu-group-list {
  display: grid;
  gap: 0;
}

.menu-group {
  border-bottom: 1px solid #e8ebef;
}

.menu-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  border: 0;
  padding: 0 10px;
  color: #2d333a;
  background: #ffffff;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
}

.menu-group-title:hover {
  background: #f6f7f9;
}

.menu-group-arrow {
  width: 18px;
  color: #6c737c;
  font-size: 16px;
  text-align: center;
}

.menu-group-items {
  display: grid;
  padding: 3px 0 9px 31px;
}

.menu-group-items[hidden] {
  display: none;
}

.menu-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: stretch;
  min-width: 0;
}

.menu-item-row.is-dragging {
  opacity: 0.48;
}

.menu-item {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 37px;
  border: 0;
  padding: 0 10px;
  color: #28303a;
  background: transparent;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item--child {
  min-height: 34px;
  padding-left: 10px;
  font-weight: 600;
}

.menu-item:hover {
  background: #f0f3f6;
}

.menu-item.is-active {
  color: #ffffff;
  background: var(--accent);
  font-weight: 800;
}

.menu-pin-button {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-left: 1px solid #e2e6eb;
  color: #7a8290;
  background: transparent;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.menu-pin-button span {
  display: block;
  line-height: 1;
  pointer-events: none;
}

.menu-pin-button:hover,
.menu-pin-button.is-pinned {
  color: #d44724;
  background: #fff1eb;
}

.menu-item-row:has(.menu-item.is-active) .menu-pin-button {
  border-left-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: var(--accent);
}

.favorite-picker,
.favorite-manage-list {
  display: grid;
  gap: 6px;
}

.favorite-mode-title,
.favorite-empty {
  padding: 12px 10px;
  color: #66707a;
  font-weight: 700;
}

.favorite-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 0 10px;
  color: #28303a;
  cursor: pointer;
}

.favorite-choice:hover {
  background: #f0f3f6;
}

.favorite-choice input {
  width: 16px;
  height: 16px;
}

.favorite-manage-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #d7dde3;
  padding: 0 7px;
  background: #ffffff;
  cursor: grab;
}

.favorite-manage-item.is-dragging {
  opacity: 0.45;
}

.favorite-manage-item.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}

.favorite-manage-item.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.favorite-drag-handle {
  color: #87909b;
  font-size: 15px;
}

.favorite-manage-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-manage-item button {
  min-width: 45px;
  height: 27px;
  border: 1px solid #c8d0d8;
  border-radius: 4px;
  color: #47515c;
  background: #f9fafb;
  font-weight: 700;
}

.main-panel {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  grid-template-rows: 48px 61px minmax(0, 1fr);
  min-width: 0;
  background: var(--panel);
}

.tabbar {
  display: flex;
  align-items: end;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  background: var(--title);
  padding: 0 10px;
}

.tab-item {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) 28px;
  flex: 0 0 auto;
  height: 39px;
  min-width: 132px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(0, 0, 0, 0.14);
  color: #eeeeee;
  background: transparent;
}

.tab-item.is-active {
  color: #343941;
  background: #ffffff;
}

.tab-button {
  min-width: 0;
  height: 39px;
  border: 0;
  padding: 0 8px 0 16px;
  color: #eeeeee;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.tab-item.is-active .tab-button {
  color: #343941;
}

.tab-close-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 39px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.tab-close-button:hover {
  color: #ffffff;
  background: var(--accent);
}

.commandbar {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.drag-grip {
  width: 11px;
  height: 40px;
  border-left: 3px dotted #b9bdc2;
  border-right: 3px dotted #b9bdc2;
}

.command-button {
  min-height: 34px;
  border: 0;
  padding: 0 12px;
  color: #3b424b;
  background: transparent;
  font-weight: 800;
}

.command-button:hover {
  background: #eef2f5;
}

.command-button:disabled {
  color: #a2a8b0;
  cursor: not-allowed;
}

.alert-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid #c4c9cf;
  border-radius: 4px;
  padding: 0 10px;
  color: #3b424b;
  background: #f8fafc;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.alert-button[hidden] {
  display: none;
}

.alert-button span {
  min-width: 22px;
  border-radius: 11px;
  padding: 2px 7px;
  color: #69717a;
  background: #e7ebef;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.alert-button.has-alerts {
  color: #8c2f22;
  background: #fff0ed;
  border-color: #d7867c;
}

.alert-button.has-alerts span {
  color: #ffffff;
  background: var(--red);
}

.saved-at {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.content-area {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 14px;
}

.view {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
}

.meal-calc-view {
  display: block;
  height: calc(100vh - 78px);
  min-height: 620px;
  padding: 0;
}

.meal-calc-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 5px 8px;
  border: 1px solid var(--line-dark);
  border-bottom: 0;
  background: #f7f7f7;
}

.meal-calc-toolbar .print-device-select--meal-calc select {
  width: 210px;
  height: 28px;
}

.meal-calc-frame {
  display: block;
  width: 100%;
  height: calc(100% - 38px);
  border: 0;
  background: #fff;
}

.meal-calc-view:fullscreen {
  height: 100vh;
  min-height: 100vh;
  padding: var(--native-safe-top) 0 var(--native-safe-bottom);
  background: #fff;
}

.meal-calc-view:fullscreen .meal-calc-toolbar,
body.meal-calc-fullscreen-mode .meal-calc-toolbar {
  display: none;
}

.meal-calc-view:fullscreen .meal-calc-frame,
body.meal-calc-fullscreen-mode .meal-calc-frame {
  height: 100%;
}

body.meal-calc-fullscreen-mode {
  overflow: hidden;
}

body.meal-calc-fullscreen-mode .erp-frame {
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  transform: none;
}

body.meal-calc-fullscreen-mode .titlebar,
body.meal-calc-fullscreen-mode .icon-rail,
body.meal-calc-fullscreen-mode .side-menu,
body.meal-calc-fullscreen-mode .tabbar,
body.meal-calc-fullscreen-mode .commandbar {
  display: none;
}

body.meal-calc-fullscreen-mode .main-panel {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  grid-template-rows: minmax(0, 1fr);
}

body.meal-calc-fullscreen-mode .content-area {
  padding: 0;
  overflow: hidden;
}

body.meal-calc-fullscreen-mode .meal-calc-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: var(--native-safe-top) 0 var(--native-safe-bottom);
  background: #fff;
}

body.waste-calculator-fullscreen-mode {
  overflow: hidden;
}

body.waste-calculator-fullscreen-mode .erp-frame {
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  transform: none;
}

body.waste-calculator-fullscreen-mode .titlebar,
body.waste-calculator-fullscreen-mode .icon-rail,
body.waste-calculator-fullscreen-mode .side-menu,
body.waste-calculator-fullscreen-mode .tabbar,
body.waste-calculator-fullscreen-mode .commandbar {
  display: none !important;
}

body.waste-calculator-fullscreen-mode .main-panel {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  grid-template-rows: minmax(0, 1fr);
}

body.waste-calculator-fullscreen-mode .content-area {
  padding: 0;
  overflow: hidden;
}

body.waste-calculator-fullscreen-mode .waste-calculator-view,
.waste-calculator-view:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: calc(8px + var(--native-safe-top)) 8px calc(8px + var(--native-safe-bottom));
  overflow: hidden;
  background: #f4f6f8;
}

body.waste-calculator-fullscreen-mode .waste-calculator-view .query-panel,
.waste-calculator-view:fullscreen .query-panel {
  display: none !important;
}

body.waste-calculator-fullscreen-mode .waste-window-guide,
.waste-calculator-view:fullscreen .waste-window-guide {
  display: none !important;
}

.waste-fullscreen-exit {
  display: none;
}

body.waste-calculator-fullscreen-mode .waste-fullscreen-exit,
.waste-calculator-view:fullscreen .waste-fullscreen-exit {
  position: fixed;
  bottom: calc(12px + var(--native-safe-bottom));
  left: 12px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 34px;
  border: 1px solid #9aa5b1;
  border-radius: 4px;
  color: #1f2937;
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

body.waste-calculator-fullscreen-mode .waste-touch-panel,
.waste-calculator-view:fullscreen .waste-touch-panel {
  grid-template-columns: minmax(0, 1fr) minmax(calc(300px * var(--waste-right-panel-size)), calc(500px * var(--waste-right-panel-size)));
  min-height: 0;
  margin: 0;
}

.waste-size-control {
  display: none;
}

body.waste-calculator-fullscreen-mode .waste-size-control,
.waste-calculator-view:fullscreen .waste-size-control {
  position: fixed;
  bottom: calc(12px + var(--native-safe-bottom));
  right: 12px;
  z-index: 10020;
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) 48px;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

body.waste-calculator-fullscreen-mode .waste-size-control input,
.waste-calculator-view:fullscreen .waste-size-control input {
  width: 100%;
}

body.waste-calculator-fullscreen-mode .waste-touch-products,
body.waste-calculator-fullscreen-mode .waste-touch-entry,
.waste-calculator-view:fullscreen .waste-touch-products,
.waste-calculator-view:fullscreen .waste-touch-entry {
  padding: calc(14px * var(--waste-calculator-size));
}

body.waste-calculator-fullscreen-mode .waste-touch-stage strong,
.waste-calculator-view:fullscreen .waste-touch-stage strong {
  font-size: clamp(18px, calc(23px * var(--waste-calculator-size)), 28px);
}

body.waste-calculator-fullscreen-mode .waste-touch-selected strong,
.waste-calculator-view:fullscreen .waste-touch-selected strong {
  font-size: clamp(20px, calc(28px * var(--waste-calculator-size)), 34px);
}

body.waste-calculator-fullscreen-mode .waste-touch-metrics b,
.waste-calculator-view:fullscreen .waste-touch-metrics b {
  font-size: clamp(18px, calc(24px * var(--waste-calculator-size)), 30px);
}

body.waste-calculator-fullscreen-mode .waste-type-toggle button,
.waste-calculator-view:fullscreen .waste-type-toggle button,
body.waste-calculator-fullscreen-mode .waste-touch-keypad button,
.waste-calculator-view:fullscreen .waste-touch-keypad button {
  min-height: calc(60px * var(--waste-calculator-size));
  font-size: clamp(18px, calc(24px * var(--waste-calculator-size)), 30px);
}

body.waste-calculator-fullscreen-mode .waste-touch-input input,
.waste-calculator-view:fullscreen .waste-touch-input input {
  height: calc(64px * var(--waste-calculator-size));
  font-size: clamp(22px, calc(30px * var(--waste-calculator-size)), 38px);
}

body.waste-calculator-fullscreen-mode .waste-touch-products,
body.waste-calculator-fullscreen-mode .waste-touch-entry,
.waste-calculator-view:fullscreen .waste-touch-products,
.waste-calculator-view:fullscreen .waste-touch-entry {
  min-height: 0;
}

body.waste-calculator-fullscreen-mode .waste-touch-products,
.waste-calculator-view:fullscreen .waste-touch-products,
body.waste-calculator-fullscreen-mode .waste-touch-entry,
.waste-calculator-view:fullscreen .waste-touch-entry {
  overflow-y: auto;
}

body.waste-calculator-fullscreen-mode .waste-touch-list,
.waste-calculator-view:fullscreen .waste-touch-list {
  max-height: min(44vh, 520px);
}

body.waste-calculator-fullscreen-mode .waste-round-list,
.waste-calculator-view:fullscreen .waste-round-list {
  max-height: min(18vh, 180px);
}

body.waste-calculator-fullscreen-mode .waste-category-list,
.waste-calculator-view:fullscreen .waste-category-list {
  max-height: min(28vh, 300px);
}

body.waste-calculator-fullscreen-mode .waste-product-list,
.waste-calculator-view:fullscreen .waste-product-list {
  max-height: min(34vh, 400px);
}

body.waste-calculator-fullscreen-mode .waste-semi-list,
.waste-calculator-view:fullscreen .waste-semi-list {
  max-height: min(38vh, 460px);
}

body.waste-calculator-fullscreen-mode .waste-calculator-view .grid-panel,
.waste-calculator-view:fullscreen .grid-panel {
  min-height: 0;
  margin: 0;
}

body.waste-calculator-fullscreen-mode .waste-calculator-view .grid-wrap,
.waste-calculator-view:fullscreen .grid-wrap {
  max-height: none;
}

.query-panel,
.grid-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-dark);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border-bottom: 1px solid #dfe3e7;
  color: #3e4773;
  font-weight: 900;
}

.panel-title::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 3px solid #7371a8;
  border-radius: 50%;
}

.query-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px 24px;
  padding: 13px 14px;
}

.waste-window-guide {
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #d7e0e8;
  background: #f8fbff;
  color: #26394f;
  font-size: 12px;
}

.waste-window-guide__title {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.waste-window-guide__title strong {
  color: #1f2b3a;
  font-weight: 900;
}

.waste-window-guide__title span {
  color: #55708d;
  font-weight: 800;
}

.waste-window-guide__rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 6px;
}

.waste-window-guide__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  border: 1px solid #d2dce6;
  padding: 0 8px;
  background: #ffffff;
  font-weight: 900;
}

.waste-window-guide__row.is-enabled {
  border-color: #9ac9a5;
  background: #edf8ef;
  color: #1f6b35;
}

.waste-window-guide__row.is-disabled {
  color: #7b8794;
}

.query-field {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.query-field label {
  color: #313742;
  font-weight: 800;
  text-align: right;
}

.query-field > span {
  color: #313742;
  font-weight: 800;
  text-align: right;
}

.query-field input,
.query-field select {
  height: 33px;
  min-width: 0;
  border: 1px solid #c9ced4;
  padding: 0 8px;
  background: var(--field);
  outline: 0;
}

.query-field input.is-white,
.query-field select.is-white {
  background: var(--field-white);
}

.query-field input.is-error,
.query-field select.is-error {
  border-color: var(--status-error-border);
  box-shadow: inset 0 0 0 1px var(--status-error-border);
  background: var(--status-error-bg);
}

.missing-capacity-panel {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
}

.missing-capacity-panel .panel-title {
  color: var(--status-warning-ink);
  border-bottom-color: var(--status-warning-border);
}

.missing-capacity-panel .panel-title::before {
  border-color: var(--status-warning-border);
}

.missing-capacity-body {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  color: #3f3520;
}

.missing-capacity-body strong {
  font-weight: 900;
}

.missing-capacity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.missing-capacity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid var(--status-warning-border);
  padding: 3px 8px;
  background: var(--status-warning-bg);
  color: #2f2b24;
  font-weight: 800;
}

.missing-capacity-chip small {
  color: var(--status-warning-ink);
  font-weight: 700;
}

.sales-order-import-view-panel {
  min-height: auto;
}

.sales-order-import-view-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: #26394f;
  font-weight: 800;
}

.barcode-summary-panel {
  min-height: auto;
}

.barcode-summary-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 12px;
}

.barcode-summary-chip,
.barcode-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid var(--status-default-border);
  padding: 3px 9px;
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
  font-weight: 900;
  white-space: nowrap;
}

.barcode-summary-chip small {
  color: var(--status-disabled-ink);
  font-weight: 800;
}

.barcode-summary-chip.is-ok,
.barcode-status.is-ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.barcode-summary-chip.is-pending,
.barcode-status.is-pending {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
}

.outbound-barcode-mode-panel {
  min-height: 360px;
}

.outbound-barcode-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  padding: 20px;
}

.outbound-barcode-mode-card {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 210px;
  border: 1px solid #c9d1dc;
  border-radius: 8px;
  padding: 24px;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.08);
}

.outbound-barcode-mode-card:hover {
  border-color: #7c72b0;
  background: #fbfaff;
}

.outbound-barcode-mode-card strong {
  color: #26145f;
  font-size: 28px;
  font-weight: 950;
}

.outbound-barcode-mode-card span {
  color: #4b5563;
  font-size: 15px;
  font-weight: 800;
}

.outbound-barcode-mode-card small {
  color: #16703a;
  font-size: 16px;
  font-weight: 950;
}

.outbound-barcode-grid tr.is-barcode-checked td,
.outbound-production-barcode-grid tr.is-barcode-checked td {
  background: var(--status-ok-bg);
}

.barcode-scan-field input {
  font-weight: 900;
}

.material-form-panel {
  max-width: 1180px;
}

.material-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px 22px;
  padding: 14px;
}

.material-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 14px;
}

.grid-panel {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

.grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.grid-title {
  min-width: 0;
}

.stock-offline-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid var(--status-disabled-border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--status-disabled-ink);
  background: var(--status-disabled-bg);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-offline-status.is-ok {
  border-color: var(--status-ok-border);
  color: var(--status-ok-ink);
  background: var(--status-ok-bg);
}

.stock-offline-status.is-pending,
.stock-offline-status.is-syncing {
  border-color: var(--status-warning-border);
  color: var(--status-warning-ink);
  background: var(--status-warning-bg);
}

.stock-offline-status.is-error {
  border-color: var(--status-error-border);
  color: var(--status-error-ink);
  background: var(--status-error-bg);
}

.stock-offline-status button {
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 7px;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.erp-grid tr.is-offline-pending,
.erp-grid tr.is-offline-failed {
  background: var(--status-warning-bg);
}

.erp-grid tr.is-offline-failed {
  box-shadow: inset 3px 0 0 var(--status-error-border);
}

.grid-subtitle {
  flex: 0 0 auto;
  color: #26394f;
  font-weight: 800;
  white-space: nowrap;
}

.file-picker-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  height: 33px;
  min-width: 0;
  border: 1px solid #c9ced4;
  background: var(--field-white);
}

.file-picker-button {
  height: 31px;
  border: 0;
  border-right: 1px solid #c9ced4;
  padding: 0 12px;
  color: #303842;
  background: #f5f7f9;
  font-weight: 800;
}

.file-picker-button:hover {
  background: #eef2f5;
}

.file-picker-name {
  min-width: 0;
  padding: 0 8px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-dashboard-view {
  gap: 10px;
}

.sales-dashboard-query-grid {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.analytics-card {
  display: grid;
  gap: 5px;
  min-height: 86px;
  border: 1px solid var(--line);
  padding: 13px 15px;
  background: #ffffff;
}

.analytics-card span {
  color: #566171;
  font-size: 12px;
  font-weight: 900;
}

.analytics-card strong {
  color: #192435;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0;
}

.analytics-card small {
  color: #6a7481;
  font-size: 12px;
  font-weight: 700;
}

.analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 10px;
  min-height: 0;
}

.analytics-panel {
  min-height: 260px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.analytics-panel-wide {
  grid-column: span 1;
}

.analytics-layout .analytics-panel-wide:first-child {
  grid-column: 1 / 2;
}

.analytics-layout .analytics-panel-wide:last-child {
  grid-column: 1 / -1;
}

.analytics-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid var(--line);
  padding: 0 13px;
  color: #192435;
}

.analytics-panel-head strong {
  font-size: 14px;
}

.analytics-panel-head span {
  color: #647080;
  font-size: 12px;
  font-weight: 800;
}

.sales-daily-chart {
  display: grid;
  gap: 10px;
  align-content: stretch;
  min-height: 248px;
  padding: 12px 12px 10px;
}

.sales-daily-row {
  display: grid;
  grid-template-columns: repeat(var(--sales-daily-columns), minmax(42px, 1fr));
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.sales-daily-chart-weekly .sales-daily-row {
  min-height: 230px;
}

.sales-daily-chart-monthly {
  min-height: 360px;
}

.sales-daily-chart-monthly .sales-daily-row {
  min-height: 172px;
}

.sales-daily-item {
  display: grid;
  grid-template-rows: 18px minmax(120px, 1fr) 18px;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.sales-daily-value,
.sales-daily-label {
  min-width: 0;
  color: #53606f;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-daily-bar-track {
  display: flex;
  align-items: end;
  justify-content: center;
  border: 1px solid #e3e7ec;
  background: #f7f9fb;
}

.sales-daily-bar {
  width: 72%;
  min-height: 2px;
  background: var(--status-active-bg-strong);
  border: 1px solid var(--status-active-border);
}

.sales-daily-chart-monthly .sales-daily-item {
  grid-template-rows: 18px minmax(84px, 1fr) 18px;
}

.analytics-bars {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.9fr) minmax(110px, 1.4fr) 74px;
  gap: 8px;
  align-items: center;
}

.analytics-bar-label,
.analytics-bar-value {
  min-width: 0;
  color: #243247;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-bar-value {
  text-align: right;
}

.analytics-bar-track {
  height: 14px;
  border: 1px solid #dce2e8;
  background: #f6f8fa;
}

.analytics-bar-fill {
  height: 100%;
  background: var(--status-ok-bg-strong);
  border-right: 1px solid var(--status-ok-border);
}

.analytics-trend-chart {
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow-x: auto;
}

.analytics-trend-block {
  display: grid;
  gap: 5px;
  min-width: 620px;
}

.analytics-trend-date-row,
.analytics-trend-series-row {
  display: grid;
  grid-template-columns: minmax(92px, 116px) repeat(var(--trend-columns), minmax(34px, 1fr)) 72px;
  gap: 4px;
  align-items: stretch;
}

.analytics-trend-corner,
.analytics-trend-date,
.analytics-trend-total-head,
.analytics-trend-label,
.analytics-trend-total {
  min-width: 0;
  height: 24px;
  color: #3c4858;
  font-size: 11px;
  font-weight: 900;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-trend-date,
.analytics-trend-total-head {
  text-align: center;
  color: #647080;
}

.analytics-trend-label {
  padding: 0 6px;
  border: 1px solid #e1e6ec;
  background: #fbfcfd;
}

.analytics-trend-total {
  padding: 0 6px;
  text-align: right;
  border: 1px solid #dce5ef;
  background: #f7fbff;
  color: #23364f;
}

.analytics-trend-cell {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 54px;
  border: 1px solid #e4e9ef;
  background: #f8fafc;
  overflow: hidden;
}

.analytics-trend-fill {
  position: absolute;
  right: 7px;
  bottom: 4px;
  left: 7px;
  min-height: 0;
  background: var(--status-active-bg-strong);
  border: 1px solid var(--status-active-border);
}

.analytics-trend-cell b {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 1px 2px;
  color: #22334a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-table-wrap {
  max-height: 360px;
}

.analytics-product-table td,
.analytics-productivity-table td {
  height: 32px;
}

.analytics-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: #69727d;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .sales-dashboard-query-grid,
  .analytics-summary-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .analytics-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-layout .analytics-panel-wide:first-child,
  .analytics-layout .analytics-panel-wide:last-child {
    grid-column: 1 / -1;
  }
}

.outbound-color-panel {
  min-height: auto;
}

.outbound-template-panel {
  min-height: auto;
}

.receipt-template-panel {
  min-height: auto;
}

.outbound-template-details {
  display: block;
}

.outbound-template-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.outbound-template-summary::-webkit-details-marker {
  display: none;
}

.outbound-template-summary::after {
  content: "펼치기";
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.outbound-template-details[open] .outbound-template-summary::after {
  content: "접기";
}

.outbound-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px 14px;
  padding: 10px;
}

.outbound-template-field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  color: #313742;
  font-weight: 800;
}

.outbound-template-field input {
  height: 33px;
  min-width: 0;
  border: 1px solid #c9ced4;
  padding: 0 8px;
  background: var(--field-white);
  outline: 0;
}

.receipt-template-check-field input[type="checkbox"] {
  justify-self: start;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  accent-color: var(--accent);
}

.outbound-template-field em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.outbound-template-text-grid {
  border-top: 1px solid var(--line);
}

.outbound-template-text-grid .outbound-template-field input {
  grid-column: 2 / 4;
}

.template-preview-wrap {
  border-top: 1px solid var(--line);
  padding: 12px;
  background: #f5f7f9;
}

.template-preview-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  max-width: 100%;
  overflow: auto;
}

.template-preview-title {
  color: #26394f;
  font-size: 12px;
  font-weight: 900;
}

.receipt-layout-preview-sheet,
.outbound-layout-preview-sheet {
  box-sizing: border-box;
  color: #000000;
  background: #ffffff;
  border: 1px solid #9aa3ad;
  box-shadow: 0 2px 9px rgba(20, 30, 40, 0.16);
  font-family: "Malgun Gothic", sans-serif;
}

.receipt-layout-preview-sheet {
  width: var(--receipt-paper-width, 47.5mm);
  height: var(--receipt-paper-height, 65mm);
  padding: var(--receipt-page-padding, 2.5mm);
}

.receipt-layout-preview-title {
  margin: 0 0 var(--receipt-title-margin-bottom, 2mm);
  font-size: var(--receipt-title-font, 10pt);
  font-weight: var(--receipt-title-weight, 900);
  line-height: 1.15;
  text-align: center;
}

.receipt-layout-preview-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--receipt-table-font, 7.5pt);
  font-weight: var(--receipt-table-weight, 400);
}

.receipt-layout-preview-label-col {
  width: var(--receipt-label-col, 16mm);
}

.receipt-layout-preview-table th,
.receipt-layout-preview-table td {
  height: var(--receipt-row-height, 9.5mm);
  border: 1px solid #000000;
  padding: var(--receipt-cell-padding, 1mm);
  vertical-align: middle;
}

.receipt-layout-preview-table th {
  background: #eeeeee;
  font-size: var(--receipt-label-font, 7.2pt);
  font-weight: var(--receipt-label-weight, 900);
  text-align: center;
}

.receipt-layout-preview-table td {
  font-size: var(--receipt-value-font, 7.5pt);
  font-weight: var(--receipt-value-weight, 400);
  text-align: left;
  white-space: nowrap;
}

.receipt-layout-preview-name-head th {
  height: var(--receipt-name-header-height, 6mm);
}

.receipt-layout-preview-name-value td {
  height: var(--receipt-name-value-height, 12mm);
  font-size: var(--receipt-name-font, 8.5pt);
  font-weight: var(--receipt-name-weight, 900);
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

.receipt-layout-preview-footer {
  margin-top: 1.5mm;
  font-size: var(--receipt-footer-font, 6pt);
  font-weight: var(--receipt-footer-weight, 400);
  text-align: right;
}

.outbound-layout-preview-sheet {
  width: var(--outbound-paper-width, 90mm);
  height: var(--outbound-paper-height, 110mm);
  padding: var(--outbound-padding-y, 5mm) var(--outbound-padding-x, 6mm);
  background: var(--outbound-bg, #ffffff);
}

.outbound-layout-preview-table {
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}

.outbound-layout-preview-table th,
.outbound-layout-preview-table td {
  border: 1px solid #000000;
  padding: var(--outbound-cell-padding, 1.5mm);
  vertical-align: middle;
  background: transparent;
}

.outbound-layout-preview-table th {
  width: var(--outbound-title-col, 30mm);
  font-size: var(--outbound-title-font, 24pt);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  word-break: keep-all;
}

.outbound-layout-preview-table td {
  font-size: var(--outbound-value-font, 18pt);
  font-weight: 900;
  text-align: center;
  word-break: keep-all;
}

.outbound-layout-preview-table tr:not(.outbound-layout-preview-destination):not(.outbound-layout-preview-logo) {
  height: var(--outbound-value-row-height, 19mm);
}

.outbound-layout-preview-destination {
  height: var(--outbound-destination-row-height, 22mm);
}

.outbound-layout-preview-destination th,
.outbound-layout-preview-destination td {
  color: var(--outbound-center-color, #000000);
}

.outbound-layout-preview-destination td {
  font-size: var(--outbound-center-font, 34pt);
}

.outbound-layout-preview-product {
  font-size: var(--outbound-product-font, 16pt) !important;
  white-space: normal;
}

.outbound-layout-preview-qty {
  font-size: var(--outbound-qty-font, 24pt) !important;
}

.outbound-layout-preview-logo {
  height: var(--outbound-logo-row-height, 21mm);
}

.outbound-layout-preview-logo td {
  color: #34b44a;
  font-size: var(--outbound-logo-font, 28pt);
  font-style: italic;
  font-weight: 900;
}

.outbound-layout-preview-logo span {
  font-size: var(--outbound-logo-brand-font, 38pt);
}

.outbound-color-details {
  display: block;
}

.outbound-color-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.outbound-color-summary::-webkit-details-marker {
  display: none;
}

.outbound-color-count {
  margin-left: auto;
  color: #26394f;
  font-size: 12px;
  font-weight: 900;
}

.outbound-color-summary::after {
  content: "펼치기";
  min-width: 46px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.outbound-color-details[open] .outbound-color-summary::after {
  content: "접기";
}

.outbound-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 8px;
  padding: 10px;
}

.outbound-color-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto minmax(80px, auto);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 7px 8px;
}

.outbound-color-row strong,
.outbound-color-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbound-color-row label {
  display: inline-grid;
  grid-template-columns: auto 34px;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.outbound-color-row input[type="color"] {
  width: 34px;
  height: 26px;
  border: 1px solid var(--line);
  padding: 0;
  background: #ffffff;
}

.outbound-color-preview {
  border: 1px solid #111111;
  padding: 4px 8px;
  font-weight: 900;
  text-align: center;
}

.receipt-summary {
  flex: 0 0 auto;
  color: #26394f;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.grid-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.receipt-grid-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.print-device-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #3b424b;
  font-size: 12px;
  font-weight: 900;
}

.print-device-select select {
  width: 170px;
  height: 24px;
  border: 1px solid #b7c4d1;
  border-radius: 3px;
  padding: 0 6px;
  background: #ffffff;
  color: #26394f;
  font-size: 12px;
}

.print-device-select--mobile {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.print-device-select--mobile select {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  font-size: 16px;
}

.grid-head-button {
  height: 24px;
  border: 1px solid #b7c4d1;
  border-radius: 3px;
  padding: 0 10px;
  background: #f7fbff;
  color: #26394f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.grid-head-button:hover {
  border-color: #7fa5c9;
  background: #eaf4ff;
}

.grid-head-button.is-active {
  border-color: #2f5f43;
  background: #2f5f43;
  color: #fff;
}

.grid-head-button--danger {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-ink);
}

.grid-head-button--danger:hover {
  border-color: var(--status-error-border);
  background: var(--status-error-bg-strong);
}

.receipt-manual-print-panel {
  width: fit-content;
  max-width: 100%;
}

.receipt-manual-print-grid {
  grid-template-columns: repeat(3, minmax(250px, 300px));
  gap: 8px 16px;
  padding: 10px 12px;
}

.receipt-manual-print-grid .query-field {
  grid-template-columns: 92px minmax(0, 1fr);
}

.receipt-manual-preview-panel {
  margin-top: 12px;
}

.receipt-manual-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 285px);
  justify-content: center;
  gap: 72px;
  padding: 14px 18px 18px;
}

.receipt-manual-preview-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
}

.receipt-manual-preview-card h3 {
  margin: 0;
  color: #26394f;
  font-size: 15px;
  font-weight: 900;
}

.mobile-manual-print-view {
  width: min(980px, 100%);
}

.mobile-manual-print-view .view {
  gap: 10px;
  padding: 0;
}

.mobile-manual-print-view .receipt-manual-print-panel,
.mobile-manual-print-view .receipt-manual-preview-panel {
  width: 100%;
  margin: 0;
  min-width: 0;
}

.mobile-manual-print-view .receipt-manual-print-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.mobile-manual-print-view .receipt-manual-preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-items: center;
  gap: 16px;
}

.mobile-manual-print-view .mobile-expiry-header {
  min-height: 0;
  padding: 8px 10px;
  gap: 8px;
}

.mobile-manual-print-view .mobile-expiry-header h1 {
  font-size: 20px;
}

.mobile-manual-print-view .mobile-expiry-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
}

.mobile-manual-print-view .mobile-expiry-header-actions button {
  min-width: 0;
  min-height: 30px;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.receipt-manual-mobile-form {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.receipt-manual-mobile-row {
  display: grid;
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.receipt-manual-mobile-row--product {
  grid-template-columns: minmax(0, 1fr) minmax(82px, 0.32fr);
}

.receipt-manual-mobile-row--dates {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(86px, 0.78fr);
}

.receipt-manual-mobile-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #3b424b;
  font-weight: 900;
}

.receipt-manual-mobile-field--product {
  position: relative;
}

.receipt-manual-mobile-field span {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-manual-mobile-field input,
.receipt-manual-mobile-device-row .print-device-select select {
  width: 100%;
  height: 38px;
  min-width: 0;
  border: 1px solid #b9c1ca;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #171b20;
  font-size: 15px;
  font-weight: 900;
  outline: 0;
}

.receipt-manual-mobile-field--qty input {
  text-align: center;
}

.receipt-manual-mobile-suggestions {
  position: absolute;
  z-index: 60;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  display: none;
  max-height: 174px;
  overflow-y: auto;
  border: 1px solid #c7d0da;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  overscroll-behavior: contain;
}

.receipt-manual-mobile-suggestions.is-open {
  display: block;
}

.receipt-manual-mobile-suggestion {
  display: grid;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #e5e8ec;
  padding: 8px 12px;
  background: #ffffff;
  color: #111827;
  text-align: left;
}

.receipt-manual-mobile-suggestion:last-child {
  border-bottom: 0;
}

.receipt-manual-mobile-suggestion strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-manual-mobile-suggestion span,
.receipt-manual-mobile-suggestion-empty {
  color: #4b5563;
  font-size: 13px;
}

.receipt-manual-mobile-suggestion-empty {
  padding: 12px;
}

.receipt-manual-mobile-device-row .print-device-select {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 0;
}

.receipt-manual-mobile-device-row .print-device-select span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-manual-card-action {
  width: 100%;
  height: 34px;
  font-size: 13px;
  font-weight: 900;
}

.receipt-manual-label-preview {
  width: 285px;
  min-height: 390px;
  padding: 15px;
  border: 2px solid #111111;
  background: #ffffff;
  color: #000000;
  font-family: "Malgun Gothic", sans-serif;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.receipt-manual-label-preview .print-title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
}

.receipt-manual-label-preview .print-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 19px;
  font-weight: 800;
}

.receipt-manual-label-preview .print-label-col {
  width: 40%;
}

.receipt-manual-label-preview .print-table th,
.receipt-manual-label-preview .print-table td {
  height: 52px;
  border: 2px solid #000000;
  padding: 8px;
  vertical-align: middle;
}

.receipt-manual-label-preview .print-table th {
  background: #eeeeee;
  text-align: center;
  font-size: 17px;
}

.receipt-manual-label-preview .print-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receipt-manual-label-preview .print-name-row th {
  height: 38px;
}

.receipt-manual-label-preview .print-name-value-row td {
  height: 82px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}

.receipt-manual-label-preview .print-footer {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 980px) {
  .receipt-manual-print-panel {
    width: 100%;
  }

  .receipt-manual-print-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .receipt-manual-preview-grid {
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .receipt-manual-print-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-manual-print-view .receipt-manual-preview-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 8px;
  }
}

.grid-wrap {
  position: relative;
  overflow: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  max-height: calc(100vh - 290px);
}

.grid-split-header {
  display: none;
}

.grid-split-header-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #f3f3f3;
  color: #232830;
}

.grid-split-header-table th {
  height: 31px;
  border-right: 1px solid #d3d6da;
  border-bottom: 1px solid #d9dce0;
  padding: 0;
  overflow: hidden;
  background: #f3f3f3;
  font-weight: 900;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

.grid-split-header-table th.is-sort-asc::after,
.grid-split-header-table th.is-sort-desc::after {
  display: inline-block;
  margin-left: 4px;
  color: #ff5f35;
  font-size: 10px;
  line-height: 1;
}

.grid-split-header-table th.is-sort-asc::after {
  content: "\25B2";
}

.grid-split-header-table th.is-sort-desc::after {
  content: "\25BC";
}

.erp-grid {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #ffffff;
}

.erp-grid thead {
  position: static;
  background: #f3f3f3;
}

.erp-grid thead::before {
  content: none;
}

.erp-grid.has-split-header thead {
  opacity: 1;
}

.erp-grid th,
.erp-grid td {
  height: 31px;
  border-right: 1px solid #d3d6da;
  border-bottom: 1px solid #d9dce0;
  padding: 0;
  overflow: hidden;
  vertical-align: middle;
}

.erp-grid th {
  position: relative;
  color: #232830;
  background: #f3f3f3;
  background-clip: border-box;
  box-shadow: inset 0 -1px 0 #d9dce0, inset -1px 0 0 #d3d6da;
  font-weight: 900;
  text-align: center;
}

.erp-grid th::before {
  content: none;
}

.erp-grid th.is-column-draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.erp-grid th.is-column-resizable::after {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
}

.erp-grid th.is-column-draggable:active,
body.is-column-dragging .erp-grid th.is-column-draggable {
  cursor: grabbing;
}

body.is-column-resizing,
body.is-column-resizing .erp-grid th {
  cursor: col-resize !important;
  user-select: none;
}

.erp-grid th.is-column-drag-source {
  opacity: 0.65;
}

.erp-grid th.is-column-resize-source {
  box-shadow: inset -3px 0 0 #2f73c9;
}

.erp-grid th.is-column-drop-target {
  background: #fff0e9;
  box-shadow: inset 3px 0 0 #ff5f35;
}

.erp-grid th.is-sort-asc::after,
.erp-grid th.is-sort-desc::after {
  display: inline-block;
  margin-left: 4px;
  color: #ff5f35;
  font-size: 10px;
  line-height: 1;
}

.erp-grid th.is-sort-asc::after {
  content: "\25B2";
}

.erp-grid th.is-sort-desc::after {
  content: "\25BC";
}

.erp-grid tr:nth-child(even) td {
  background: #fbfbfb;
}

.erp-grid tr.is-grid-draft td,
.erp-grid tr.is-grid-draft-row td {
  background: #f8fafb;
}

.erp-grid tr.is-grid-draft .select-cell input,
.erp-grid tr.is-grid-draft-row .select-cell input {
  opacity: 0.4;
}

.erp-grid tr.is-selected td,
.erp-grid tr.is-active-row td {
  background: var(--status-active-bg);
}

.erp-grid tr.is-missing td {
  background: var(--status-error-bg);
}

.erp-grid tr.is-selected.is-missing td,
.erp-grid tr.is-active-row.is-missing td {
  background: var(--status-error-bg-strong);
}

.erp-grid tr.is-complete td {
  background: var(--status-ok-bg);
}

.erp-grid tr.is-selected.is-complete td,
.erp-grid tr.is-active-row.is-complete td {
  background: var(--status-ok-bg-strong);
}

.erp-grid tr.is-unprinted td {
  background: var(--status-warning-bg);
}

.erp-grid tr.is-selected.is-unprinted td,
.erp-grid tr.is-active-row.is-unprinted td {
  background: var(--status-warning-bg-strong);
}

.erp-grid tr.is-warning td {
  background: var(--status-warning-bg);
}

.erp-grid tr.is-issue td {
  background: var(--status-error-bg);
}

.erp-grid tr.is-selected.is-issue td,
.erp-grid tr.is-active-row.is-issue td {
  background: var(--status-error-bg-strong);
}

.erp-grid td.is-cell-selected,
.erp-grid th.is-cell-selected {
  background: var(--status-active-bg) !important;
  box-shadow: inset 0 0 0 2px var(--status-active-border);
}

.erp-grid td.is-cell-selected .grid-input,
.erp-grid td.is-cell-selected .grid-select,
.erp-grid td.is-cell-selected .grid-input:focus,
.erp-grid td.is-cell-selected .grid-select:focus {
  background: transparent;
}

.erp-grid td.is-cell-anchor,
.erp-grid th.is-cell-anchor {
  box-shadow: inset 0 0 0 2px var(--status-active-outline);
}

body.is-cell-selecting {
  cursor: cell;
  user-select: none;
}

body.is-column-dragging {
  cursor: grabbing;
  user-select: none;
}

.row-no,
.select-cell {
  width: 44px;
  color: #333942;
  background: #f6f6f6;
  text-align: center;
}

.select-cell input {
  width: 15px;
  height: 15px;
}

.grid-input,
.grid-select {
  width: 100%;
  height: 30px;
  border: 0;
  padding: 0 7px;
  color: var(--ink);
  background: transparent;
  outline: 0;
}

.grid-input:focus,
.grid-select:focus {
  box-shadow: inset 0 0 0 2px var(--blue);
  background: #ffffff;
}

.grid-input.is-error {
  box-shadow: inset 0 0 0 2px var(--status-error-border);
  background: var(--status-error-bg);
}

.stock-count-entry-input {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700;
  text-align: right;
}

.stock-count-entry-input:focus {
  box-shadow: inset 0 0 0 2px var(--green);
}

.stock-count-readonly-input,
.stock-count-readonly-input:disabled {
  color: #475569;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px #cbd5e1;
  cursor: not-allowed;
  opacity: 1;
}

.grid-select {
  padding-right: 3px;
}

.usage-grid {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.usage-grid .usage-code-column {
  width: 150px;
  min-width: 150px;
}

.usage-grid .usage-date-column {
  width: 118px;
  min-width: 118px;
}

.usage-grid th small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.usage-grid td.usage-code-column input,
.usage-grid td.usage-date-column input {
  width: 100%;
  height: 30px;
  border: 0;
  padding: 0 7px;
  color: var(--ink);
  background: transparent;
  outline: 0;
}

.usage-grid td.usage-date-column input {
  text-align: right;
}

.usage-grid td.usage-code-column input:focus,
.usage-grid td.usage-date-column input:focus {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--blue);
}

.grid-text {
  min-height: 30px;
  padding: 6px 7px 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-row td {
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

.split-view {
  display: grid;
  grid-template-columns: minmax(520px, 0.92fr) minmax(520px, 1.08fr);
  gap: 10px;
}

.subgrid-stack {
  display: grid;
  gap: 10px;
}

.small-grid {
  min-width: 760px;
}

.route-grid {
  min-width: 920px;
}

.receipt-grid {
  min-width: 1989px;
}

.sample-grid {
  min-width: 1710px;
}

.stock-grid {
  min-width: 2250px;
}

.waste-record-grid {
  min-width: 1760px;
}

.waste-touch-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 10px;
  margin: 10px 0;
  min-height: 0;
  min-width: 0;
}

.waste-kiosk-panel {
  align-items: stretch;
}

.waste-touch-products,
.waste-touch-entry {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  min-height: 0;
  min-width: 0;
}

.waste-touch-products {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.waste-touch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 900;
  color: var(--ink);
}

.waste-touch-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #0f172a;
  min-width: 0;
}

.waste-touch-stage span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #2f5f43;
  color: #fff;
  font-size: 16px;
  font-weight: 1000;
}

.waste-touch-stage strong {
  font-size: 20px;
  font-weight: 1000;
  min-width: 0;
  overflow-wrap: anywhere;
}

.waste-touch-stage em {
  margin-left: auto;
  color: #64748b;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.waste-admin-toggle {
  margin-left: 8px;
  border: 1px solid #2f5f43;
  border-radius: 8px;
  background: #fff;
  color: #2f5f43;
  padding: 6px 10px;
  font-weight: 900;
  cursor: pointer;
}

.waste-admin-toggle.is-active {
  background: #2f5f43;
  color: #fff;
}

.waste-admin-note {
  margin: -2px 0 8px 40px;
  border: 1px solid #c7d7c7;
  border-radius: 8px;
  background: #f0f7ef;
  color: #365940;
  padding: 8px 10px;
  font-weight: 800;
}

.waste-entry-stage {
  margin-bottom: 14px;
}

.waste-touch-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.waste-round-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: 140px;
}

.waste-category-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-height: 220px;
}

.waste-touch-subhead {
  margin-top: 14px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}

.waste-product-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-height: 300px;
}

.waste-semi-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-height: 320px;
}

.waste-target-card {
  display: grid;
  gap: 4px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid #d6dee8;
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.waste-product-card .waste-target-title {
  font-size: 21px;
  line-height: 1.25;
}

.waste-round-card {
  min-height: 96px;
}

.waste-round-card .waste-target-title {
  font-size: 28px;
}

.waste-category-card .waste-target-title {
  font-size: 24px;
}

.waste-category-card-wrap {
  display: grid;
  gap: 6px;
}

.waste-category-card-wrap.is-hidden .waste-target-card {
  border-color: #cbd5e1;
  background: #f1f5f9;
  opacity: 0.58;
}

.waste-category-hide-button {
  min-height: 34px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-weight: 900;
  cursor: pointer;
}

.waste-category-hide-button.is-hidden {
  border-color: #2f5f43;
  color: #2f5f43;
}

.waste-semi-card {
  min-height: 100px;
}

.waste-semi-card-wrap {
  display: grid;
  gap: 6px;
}

.waste-semi-card-wrap.is-hidden .waste-target-card {
  border-color: #cbd5e1;
  background: #f1f5f9;
  opacity: 0.58;
}

.waste-semi-hide-button {
  min-height: 34px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-weight: 900;
  cursor: pointer;
}

.waste-semi-hide-button.is-hidden {
  border-color: #2f5f43;
  color: #2f5f43;
}

.waste-target-card.is-selected {
  border-color: #2f5f43;
  background: #e7f4ea;
  box-shadow: inset 0 0 0 2px rgba(47, 95, 67, 0.2);
}

.waste-target-title {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.waste-target-product {
  overflow: hidden;
  color: #475569;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waste-target-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #334155;
  font-size: 12px;
}

.waste-target-meta b {
  border: 1px solid #d6dee8;
  border-radius: 999px;
  background: #fff;
  padding: 2px 6px;
}

.waste-touch-selected {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  min-width: 0;
}

.waste-touch-selected strong {
  font-size: 22px;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.waste-touch-round {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: #425b76;
  color: #fff;
  padding: 3px 8px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.waste-touch-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.waste-touch-metrics div {
  display: grid;
  gap: 4px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px;
  min-width: 0;
}

.waste-touch-metrics span {
  color: #64748b;
  font-size: 12px;
}

.waste-touch-metrics b {
  font-size: 18px;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.waste-type-toggle {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.waste-type-toggle {
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}

.waste-type-toggle button {
  min-height: 46px;
  border: 1px solid #b8c5d4;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}

.waste-type-toggle button {
  font-size: 15px;
}

.waste-type-toggle button.is-active {
  border-color: #2f5f43;
  background: #2f5f43;
  color: #fff;
}

.waste-touch-input {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  font-weight: 900;
}

.waste-touch-input input {
  height: 54px;
  border: 1px solid #b8c5d4;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 24px;
  font-weight: 900;
  text-align: right;
  min-width: 0;
}

.waste-touch-result {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  color: #24543f;
  font-weight: 900;
  min-width: 0;
}

.waste-touch-result span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.waste-touch-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-width: 0;
}

.waste-touch-keypad button {
  min-height: 54px;
  border: 1px solid #d6dee8;
  border-radius: 8px;
  background: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  min-width: 0;
}

.waste-touch-keypad .is-clear {
  background: #38251d;
  color: #fff;
}

.waste-touch-keypad .is-save {
  grid-column: span 2;
  background: #5f8c64;
  color: #fff;
}

.waste-touch-keypad .is-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.waste-touch-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 24px;
  color: #64748b;
  text-align: center;
}

.waste-loading-panel {
  display: grid;
  place-content: center;
  gap: 10px;
  min-height: 260px;
  color: #334155;
  text-align: center;
}

.waste-loading-panel strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 1000;
}

.waste-loading-panel span {
  color: #64748b;
  font-weight: 800;
}

.tab-opening-view {
  display: grid;
  min-height: 360px;
}

.tab-opening-panel {
  display: grid;
  place-content: center;
  gap: 10px;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  text-align: center;
}

.tab-opening-panel strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 1000;
}

.tab-opening-panel span {
  color: #64748b;
  font-weight: 800;
}

@media (max-width: 760px) {
  .waste-touch-panel {
    grid-template-columns: 1fr;
  }

  .waste-type-toggle {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stock-count-grid {
  min-width: 1480px;
}

.stock-count-entry-grid {
  min-width: 1480px;
}

.stock-count-create-grid {
  min-width: 1320px;
}

.grid-checkbox-cell {
  text-align: center;
  vertical-align: middle !important;
}

.grid-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.grid-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #1f8f4d;
}

.stock-metric-cell {
  padding: 3px 7px !important;
  vertical-align: middle !important;
  background: #f8fafc;
}

.stock-metric-cell strong {
  display: block;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.stock-metric-cell small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.stock-metric-cell.is-ok {
  background: #ecfdf5;
}

.stock-metric-cell.is-warning {
  background: #fff7ed;
}

.stock-metric-cell.is-warning strong,
.stock-metric-cell.is-warning small {
  color: #9a3412;
}

.stock-metric-cell.is-danger {
  background: #fef2f2;
}

.stock-metric-cell.is-danger strong,
.stock-metric-cell.is-danger small {
  color: #b91c1c;
}

.stock-loss-status.is-pending {
  background: #f1f5f9;
}

.stock-loss-status.is-pending strong,
.stock-loss-status.is-pending small {
  color: #64748b;
}

.stock-count-section-panel {
  min-width: 0;
}

.stock-count-section-panel.is-active .stock-count-section-head {
  border-color: #1f8f4d;
  box-shadow: inset 0 0 0 1px #1f8f4d;
}

.stock-count-section-panel + .stock-count-section-panel {
  margin-top: 16px;
}

.stock-count-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #d1d5db;
  border-bottom: 0;
  padding: 4px 10px;
  background: #f8fafc;
  color: #111827;
}

.stock-count-section-field {
  display: grid;
  grid-template-rows: 13px 26px;
  gap: 1px;
  min-width: 0;
}

.stock-count-section-field.is-warehouse {
  width: min(520px, 100%);
}

.stock-count-section-field.is-status {
  display: none;
}

.stock-count-section-field.is-title {
  width: min(520px, 100%);
}

.stock-count-section-field span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  line-height: 13px;
}

.stock-count-section-input,
.stock-count-section-select {
  width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 0 8px;
  background: #fff;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.stock-count-section-field.is-warehouse .stock-count-section-input,
.stock-count-section-field.is-title .stock-count-section-input,
.stock-count-section-field.is-warehouse em,
.stock-count-section-field.is-title em {
  text-align: center;
}

.stock-count-section-field.is-warehouse span,
.stock-count-section-field.is-title span {
  text-align: center;
}

.stock-count-section-title-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.stock-count-section-input::placeholder {
  color: #94a3b8;
}

.stock-count-section-title-input {
  width: min(320px, 100%);
  height: 28px;
  text-align: center;
}

.stock-count-section-label {
  min-width: 120px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.stock-count-section-field em {
  display: block;
  min-width: 0;
  height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 5px 8px 0;
  overflow: hidden;
  background: #fff;
  color: #111827;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-count-section-head > strong {
  min-width: 150px;
  font-size: 12px;
  font-weight: 900;
}

.stock-count-section-head > span {
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
}

.stock-count-section-head small {
  margin-left: auto;
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
}

.stock-count-section-save-button {
  flex: 0 0 auto;
  min-width: 86px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.stock-count-section-save-button.has-pending {
  border-color: #1f8f4d;
  background: #e8f6ed;
  color: #0f6b37;
}

.stock-count-section-save-button:hover {
  border-color: #1f8f4d;
}

.stock-count-section-drag-handle {
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 1000;
  cursor: grab;
}

.stock-count-section-drag-handle:active {
  cursor: grabbing;
}

.stock-count-section-panel.is-dragging {
  opacity: 0.55;
}

.stock-count-section-panel.is-drop-target .stock-count-section-head {
  border-color: #1f8f4d;
  box-shadow: inset 0 2px 0 #1f8f4d;
}

.stock-count-section-panel.is-drop-target.is-drop-after .stock-count-section-head {
  box-shadow: inset 0 -2px 0 #1f8f4d;
}

.stock-count-section-wrap {
  flex: 0 0 auto;
  max-height: none;
}

.stock-count-empty-section {
  border: 1px dashed #cbd5e1;
  padding: 20px;
  color: #64748b;
  background: #f8fafc;
  font-weight: 800;
  text-align: center;
}

.stock-fifo-cell {
  padding: 3px 6px !important;
  vertical-align: top !important;
  background: #fbfdff;
}

.stock-fifo-list {
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 24px;
  font-size: 11px;
  line-height: 1.35;
  color: #1e293b;
}

.stock-fifo-lot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-expiry-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  vertical-align: middle;
}

.stock-expiry-badge.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.stock-expiry-badge.is-critical,
.stock-expiry-badge.is-expired {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.stock-fifo-empty {
  display: flex;
  align-items: center;
  min-height: 24px;
  color: #6b7280;
  font-size: 11px;
}

.stock-fifo-note {
  margin-top: 2px;
  color: #b45309;
  font-size: 11px;
  line-height: 1.3;
}

.receipt-search-grid {
  min-width: 1620px;
}

.receipt-search-result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 10px;
  align-items: start;
}

.receipt-mismatch-panel {
  min-width: 0;
}

.receipt-mismatch-grid {
  min-width: 520px;
}

.receipt-mismatch-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-mismatch-diff {
  color: #a5312a;
  font-weight: 900;
}

@media (max-width: 1280px) {
  .receipt-search-result-layout {
    grid-template-columns: 1fr;
  }
}

.lunchbox-record-grid {
  min-width: 1785px;
}

.receipt-grid thead tr:first-child th,
.receipt-search-grid thead tr:first-child th {
  height: 34px;
}

.receipt-grid thead tr:nth-child(2) th,
.receipt-search-grid thead tr:nth-child(2) th {
  height: 28px;
}

.grid-action-button {
  display: block;
  width: calc(100% - 8px);
  min-height: 25px;
  margin: 2px 4px;
  border: 1px solid #b8bec5;
  border-radius: 4px;
  color: #24313f;
  background: #f5f7fa;
  font-size: 12px;
  font-weight: 800;
}

.grid-action-button:hover {
  background: #e9f0f7;
}

.grid-action-button:disabled {
  color: var(--status-disabled-ink);
  background: var(--status-disabled-bg);
  border-color: var(--status-disabled-border);
  cursor: not-allowed;
}

.grid-action-button--missing.is-active {
  color: var(--status-error-ink);
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.grid-action-button--complete {
  color: var(--status-ok-ink);
  background: var(--status-ok-bg-strong);
  border-color: var(--status-ok-border);
}

.grid-action-button--issue {
  color: var(--status-error-ink);
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.grid-action-button--danger {
  color: var(--status-error-ink);
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.grid-action-button--danger:hover {
  background: var(--status-error-bg-strong);
  border-color: var(--status-error-border);
}

.receipt-print-cell-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 3px;
}

.receipt-print-cell-actions .grid-action-button {
  width: auto;
  flex: 1 1 0;
  min-width: 42px;
  margin: 2px 0;
  padding: 0 6px;
}

.grid-action-button--secondary {
  background: #ffffff;
  color: #4b5563;
}

.receipt-extra-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.28);
}

.receipt-extra-print-dialog {
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #9aa5b1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}

.receipt-extra-print-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  color: #1f2a44;
  border-bottom: 1px solid #d7dde5;
  background: #f8fafc;
  font-size: 16px;
}

.receipt-extra-print-close {
  width: 30px;
  height: 30px;
  border: 1px solid #c7ced8;
  border-radius: 4px;
  color: #4b5563;
  background: #ffffff;
  font-size: 20px;
  line-height: 1;
}

.receipt-extra-print-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.receipt-extra-print-body label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.receipt-extra-print-body input {
  height: 36px;
  border: 1px solid #b8c2cc;
  border-radius: 4px;
  padding: 0 10px;
  font: inherit;
  font-weight: 800;
}

.receipt-extra-print-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 16px;
}

.receipt-extra-print-actions button {
  min-height: 36px;
  border: 1px solid #aeb8c4;
  border-radius: 4px;
  background: #ffffff;
  color: #263445;
  font-weight: 900;
}

.receipt-extra-print-actions .primary-button {
  border-color: #5f7faf;
  background: #e8f0ff;
  color: #163b72;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #eef1f4;
}

.login-screen[hidden],
.settings-backdrop[hidden],
.alert-backdrop[hidden] {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid #c5cbd2;
  padding: 28px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin: 0 0 6px;
  color: #2b3139;
  font-size: 24px;
}

.login-card label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.login-card input,
.login-card select {
  height: 38px;
  border: 1px solid #b9c0c8;
  padding: 0 10px;
  outline: 0;
  background: #ffffff;
}

.login-card input:focus,
.login-card select:focus {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.login-card button {
  height: 40px;
  border: 0;
  color: #ffffff;
  background: var(--accent);
  font-weight: 900;
}

.login-card button.login-secondary {
  border: 1px solid #b8c3cf;
  color: #26394f;
  background: #f7fbff;
}

.login-card p {
  min-height: 20px;
  margin: 0;
  color: var(--red);
  font-size: 13px;
}

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(32, 36, 42, 0.38);
}

.settings-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: 1px solid #9fa7b0;
  background: #ffffff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.settings-panel.password-panel {
  width: min(520px, calc(100vw - 48px));
}

.settings-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid #d9dde2;
  background: #f5f6f8;
}

.settings-panel h2 {
  margin: 0;
  font-size: 18px;
}

.settings-panel header button,
.settings-create button {
  height: 31px;
  border: 1px solid #b8bec5;
  padding: 0 12px;
  color: #24313f;
  background: #ffffff;
  font-weight: 800;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header-actions select {
  height: 31px;
  min-width: 130px;
  border: 1px solid #b9c0c8;
  padding: 0 8px;
  background: #ffffff;
}

.settings-content {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 24px 24px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.settings-section-title {
  color: #26313f;
  font-weight: 900;
}

.screen-scale-settings,
.signature-settings,
.desktop-printer-settings,
.password-settings {
  display: grid;
  gap: 12px;
}

.screen-scale-settings,
.desktop-printer-settings,
.signature-settings {
  border-bottom: 1px solid #d9dde2;
  padding-bottom: 16px;
}

.screen-scale-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 72px;
  gap: 8px;
  align-items: center;
}

.screen-scale-row input[type="range"] {
  width: 100%;
}

.screen-scale-row select,
.screen-scale-row button {
  height: 32px;
  border: 1px solid #b9c0c8;
  background: #ffffff;
}

.screen-scale-row select {
  padding: 0 8px;
}

.screen-scale-row button {
  color: #24313f;
  font-weight: 800;
}

.desktop-printer-settings label {
  display: grid;
  gap: 6px;
  color: #26313f;
  font-weight: 800;
}

.desktop-printer-settings select,
.desktop-printer-settings input {
  height: 36px;
  border: 1px solid #b9c0c8;
  padding: 0 10px;
  font: inherit;
  background: #ffffff;
}

.desktop-printer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.desktop-printer-actions button {
  height: 34px;
  border: 1px solid #b8bec5;
  background: #ffffff;
  color: #24313f;
  font-weight: 900;
}

.desktop-printer-actions button:last-child {
  color: #ffffff;
  background: var(--accent);
}

.desktop-printer-settings p {
  min-height: 19px;
  margin: 0;
  color: #1f6f42;
  font-size: 13px;
  font-weight: 700;
}

.desktop-printer-settings p.is-error {
  color: var(--red);
}

.password-settings label {
  display: grid;
  gap: 6px;
  color: #26313f;
  font-weight: 800;
}

.password-settings input {
  height: 36px;
  border: 1px solid #b9c0c8;
  padding: 0 10px;
  font: inherit;
}

.password-settings button {
  height: 38px;
  border: 1px solid #b8bec5;
  color: #ffffff;
  background: var(--accent);
  font-weight: 900;
}

.password-settings p {
  min-height: 19px;
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.signature-preview-box {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px solid #c4ccd5;
  background: #fbfcfd;
}

.signature-preview-box img {
  max-width: min(360px, 100%);
  max-height: 76px;
  object-fit: contain;
}

.signature-preview-box span {
  color: #758293;
  font-size: 13px;
  font-weight: 800;
}

.signature-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.signature-upload-button,
.signature-actions button {
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid #b8bec5;
  color: #24313f;
  background: #ffffff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.signature-actions button {
  color: #7a2630;
  background: #fff8f8;
}

.signature-settings p {
  min-height: 19px;
  margin: 0;
  color: #2b6b3f;
  font-size: 13px;
  font-weight: 800;
}

.signature-settings p.is-error {
  color: var(--red);
}

.permission-panel,
.org-page-panel {
  min-height: 0;
}

.org-page-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.grid-head-select {
  height: 30px;
  min-width: 130px;
  border: 1px solid #b9c0c8;
  padding: 0 8px;
  background: #ffffff;
}

.settings-create {
  display: grid;
  grid-template-columns: 145px 160px 160px 120px 120px minmax(210px, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #d9dde2;
}

.settings-create input,
.settings-create select {
  height: 31px;
  border: 1px solid #b9c0c8;
  padding: 0 9px;
}

.settings-create .create-manager-list {
  height: 72px;
  max-height: 72px;
  padding: 4px 6px;
}

.create-manager-list::before {
  content: "상위관리자";
  display: block;
  margin-bottom: 2px;
  color: #66717d;
  font-size: 11px;
  font-weight: 900;
}

.settings-grid-wrap {
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 16px;
}

.permission-center-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.permission-center-section {
  border: 1px solid #cfd6dd;
  background: #ffffff;
}

.permission-center-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border-bottom: 1px solid #dce1e6;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  background: #f5f7f9;
}

.permission-center-section summary::-webkit-details-marker {
  display: none;
}

.permission-center-section summary::before {
  content: "▸";
  margin-right: 8px;
  color: #5b63a1;
  font-weight: 900;
}

.permission-center-section[open] summary::before {
  content: "▾";
}

.permission-center-section summary strong {
  margin-right: auto;
  color: #172033;
  font-size: 14px;
  font-weight: 900;
}

.permission-center-section summary span {
  color: #66717d;
  font-size: 12px;
  font-weight: 800;
}

.permission-center-body {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.permission-kind-block {
  min-width: 0;
  border: 1px solid #dde2e7;
  background: #ffffff;
}

.permission-kind-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border-bottom: 1px solid #e2e6ea;
  padding: 0 10px;
  background: #fbfcfd;
}

.permission-kind-title strong {
  color: #2f3a46;
  font-size: 13px;
  font-weight: 900;
}

.permission-kind-title span {
  color: #74808c;
  font-size: 12px;
  font-weight: 800;
}

.permission-table-wrap {
  overflow: auto;
}

.permission-grid {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  table-layout: fixed;
}

.permission-grid th,
.permission-grid td {
  height: 34px;
  border: 1px solid #d3d7dc;
  padding: 0 7px;
  text-align: center;
}

.permission-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f3f5;
  font-weight: 900;
}

.permission-grid td:first-child,
.permission-grid th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  text-align: left;
}

.permission-grid th:first-child {
  z-index: 3;
  background: #f1f3f5;
}

.permission-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.permission-empty-row {
  height: 44px;
  padding: 0 12px;
  color: #64748b;
  font-weight: 900;
  text-align: center;
}

.notification-settings-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.notification-rule-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid #d9dde2;
  padding: 8px 14px;
  background: #f8fafc;
}

.notification-rule-toggle,
.notification-rule-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

.notification-rule-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #43b66f;
}

.notification-rule-time input {
  min-width: 126px;
  height: 30px;
  border: 1px solid #b9c0c8;
  padding: 0 8px;
  background: #ffffff;
  font-weight: 900;
  box-sizing: border-box;
}

.notification-rule-panel small {
  color: #66717d;
  font-size: 12px;
  font-weight: 700;
}

.receipt-approval-panel {
  min-height: 420px;
}

.receipt-approval-accordion {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.receipt-approval-day {
  border: 1px solid #cfd6dd;
  background: #ffffff;
}

.receipt-approval-day summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  color: #172033;
  font-weight: 900;
  list-style: none;
  background: #f5f7f9;
  border-bottom: 1px solid #dce1e6;
}

.receipt-approval-day summary::-webkit-details-marker {
  display: none;
}

.receipt-approval-day summary::before {
  content: "▸";
  margin-right: 8px;
  color: #5b63a1;
}

.receipt-approval-day[open] summary::before {
  content: "▾";
}

.receipt-approval-grid {
  min-width: 1180px;
}

.receipt-approval-grid th,
.receipt-approval-grid td {
  height: 42px;
  white-space: nowrap;
}

.receipt-approval-slot label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
}

.receipt-approval-slot input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #43b66f;
}

.receipt-approval-slot span {
  min-width: 0;
  overflow: hidden;
  color: #6b7280;
  text-overflow: ellipsis;
}

.receipt-approval-slot.is-signed {
  background: #e9f8ee;
}

.receipt-approval-slot.is-signed span {
  color: #0b6b36;
}

.receipt-approval-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 24px;
  border: 1px solid #c8d0d8;
  padding: 0 7px;
  background: #f7f9fb;
  color: #334155;
  font-weight: 900;
}

.receipt-approval-grid tr.is-complete .receipt-approval-status {
  border-color: #8fd3a6;
  background: #e3f8e9;
  color: #0b6b36;
}

.receipt-approval-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-weight: 900;
}

.document-template-panel {
  min-height: 520px;
}

.document-template-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(420px, 520px);
  gap: 12px;
  padding: 12px;
}

.document-template-grid {
  min-width: 760px;
}

.document-template-grid th,
.document-template-grid td {
  height: 42px;
  white-space: nowrap;
}

.document-template-grid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #43b66f;
}

.document-template-preview-panel {
  border: 1px solid #d5dbe2;
  background: #f8fafc;
  padding: 12px;
}

.document-template-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.52);
}

.document-template-modal-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1500px, 96vw);
  height: min(900px, 92vh);
  border: 1px solid #cfd6dd;
  background: #ffffff;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.32);
}

.document-template-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #dce1e6;
  background: #f8fafc;
}

.document-template-modal-head strong {
  display: block;
  color: #172033;
  font-size: 18px;
  font-weight: 900;
}

.document-template-modal-head span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.document-template-modal-head .ghost-button {
  min-width: 72px;
  height: 34px;
  border: 1px solid #c4ccd6;
  background: #ffffff;
  color: #172033;
  font-weight: 900;
}

.document-template-modal-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.document-template-modal-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 180px;
  color: #435066;
  font-size: 12px;
  font-weight: 900;
}

.document-template-modal-toolbar select {
  min-height: 34px;
}

.document-template-modal-toolbar span {
  margin-left: auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.document-template-modal-preview {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 20px;
  background: #eef2f6;
}

.document-template-modal-preview .document-template-preview-canvas {
  min-width: max-content;
  transform-origin: top left;
}

.document-template-modal-preview .document-template-preview-grid {
  min-height: 640px;
}

.document-template-preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #172033;
}

.document-template-preview-title strong {
  font-size: 15px;
}

.document-template-preview-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.document-template-preview-canvas {
  border: 1px solid #cfd6dd;
  background: #ffffff;
  padding: 8px;
  overflow: auto;
}

.document-template-preview-ruler-top {
  display: grid;
  grid-template-columns: 34px repeat(10, minmax(30px, 1fr));
  height: 26px;
}

.document-template-preview-ruler-top span,
.document-template-preview-ruler-top b,
.document-template-preview-ruler-left b {
  display: grid;
  place-items: center;
  background: #eef2f6;
  color: #435066;
  font-size: 12px;
  font-weight: 900;
  border-right: 1px solid #d9dde3;
  border-bottom: 1px solid #d9dde3;
}

.document-template-preview-stage {
  display: grid;
  grid-template-columns: 34px 1fr;
}

.document-template-preview-ruler-left {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
}

.document-template-preview-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(30px, 1fr));
  grid-template-rows: repeat(12, minmax(24px, 1fr));
  min-height: 360px;
  width: max-content;
  min-width: 100%;
  background: #ffffff;
  overflow: hidden;
}

.document-template-preview-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid #e4e8ee;
  border-bottom: 1px solid #e4e8ee;
  background: transparent;
  color: #172033;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  padding: 2px 4px;
  text-overflow: ellipsis;
  white-space: normal;
  cursor: pointer;
}

.document-template-preview-grid.has-excel-preview button,
.document-template-preview-canvas.has-excel-preview .document-template-preview-grid button {
  justify-content: center;
}

.document-template-preview-grid button:hover {
  background: #eef6ff;
}

.document-template-signature-box {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 42px;
  min-height: 34px;
  border: 2px solid #3478d8;
  background: rgba(226, 239, 255, 0.88);
  color: #173c75;
  box-shadow: 0 6px 14px rgba(20, 40, 80, 0.16);
  cursor: move;
}

.document-template-signature-box.is-active {
  border-color: #0f5fc7;
  background: rgba(210, 232, 255, 0.95);
}

.document-template-signature-box.is-disabled {
  opacity: 0.45;
}

.document-template-signature-box span {
  max-width: 100%;
  overflow: hidden;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-signature-box small {
  color: #52637a;
  font-size: 11px;
  font-weight: 900;
}

.document-template-signature-box i {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  background: #3478d8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  cursor: nwse-resize;
}

body.is-document-template-box-dragging {
  user-select: none;
  cursor: grabbing;
}

.notification-route-wrap {
  padding: 10px 14px 16px;
}

.notification-center-list {
  display: grid;
  gap: 10px;
  padding: 10px 14px 16px;
}

.notification-center-section {
  border: 1px solid #cfd6dd;
  background: #ffffff;
}

.notification-center-section summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  cursor: pointer;
  color: #172033;
  font-size: 14px;
  font-weight: 900;
  list-style: none;
  background: #f5f7f9;
  border-bottom: 1px solid #dce1e6;
}

.notification-center-section summary::-webkit-details-marker {
  display: none;
}

.notification-center-section summary::before {
  content: "▸";
  margin-right: 8px;
  color: #5b63a1;
}

.notification-center-section[open] summary::before {
  content: "▾";
}

.notification-center-section .notification-route-wrap {
  padding: 0;
}

.notification-route-grid {
  min-width: 980px;
}

.notification-route-grid--accounts {
  min-width: 1380px;
}

.notification-route-grid th,
.notification-route-grid td {
  height: 58px;
}

.notification-route-grid td {
  text-align: center;
  vertical-align: middle;
}

.notification-route-grid input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #43b66f;
}

.notification-time-input,
.notification-delay-input {
  width: 126px;
  height: 30px;
  border: 1px solid #b9c0c8;
  padding: 0 7px;
  background: #ffffff;
  color: #172033;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
}

.notification-delay-input {
  width: 82px;
}

.notification-route-category {
  min-width: 250px;
}

.notification-route-category strong,
.notification-route-category span,
.notification-route-user strong,
.notification-route-user span,
.notification-route-user small {
  display: block;
  line-height: 1.25;
}

.notification-route-category strong {
  color: #161f2d;
  font-size: 15px;
}

.notification-route-category span {
  margin-top: 3px;
  color: #66717d;
  font-size: 11px;
  font-weight: 700;
}

.notification-route-user {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.notification-route-user strong {
  color: #161f2d;
  font-size: 13px;
}

.notification-route-user span,
.notification-route-user small {
  color: #66717d;
  font-size: 11px;
  font-weight: 700;
}

.grid-head-input {
  height: 30px;
  min-width: 150px;
  border: 1px solid #b9c0c8;
  padding: 0 8px;
  background: #ffffff;
}

.menu-settings-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.menu-settings-layout {
  display: grid;
  grid-template-columns: minmax(390px, 560px);
  justify-content: start;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.menu-settings-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d6dbe1;
  background: #ffffff;
}

.menu-settings-preview-head {
  min-height: 58px;
  border-bottom: 1px solid #e2e5e8;
  padding: 17px 20px 10px;
  color: #3d3572;
  font-size: 21px;
  font-weight: 900;
}

.menu-settings-tree {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 24px;
}

.menu-config-group {
  border-bottom: 1px solid #e8ebef;
  background: #ffffff;
}

.menu-config-group.is-dragging,
.menu-config-item.is-dragging {
  opacity: 0.45;
}

.menu-config-group.is-drop-target {
  box-shadow: inset 0 3px 0 var(--accent);
}

.menu-config-group.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.menu-config-group-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 56px;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}

.menu-config-group-head input {
  height: 32px;
  min-width: 0;
  border: 0;
  padding: 0 8px;
  color: #2d333a;
  background: transparent;
  font-size: 15px;
  font-weight: 900;
}

.menu-config-group-head input:focus {
  outline: 1px solid #b6c0ca;
  background: #ffffff;
}

.menu-config-group-head button {
  height: 28px;
  border: 1px solid #c5cbd2;
  background: #ffffff;
}

.menu-config-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 28px;
  color: #7f8790;
  cursor: grab;
}

.menu-config-items {
  display: grid;
  min-height: 18px;
  padding: 2px 0 8px 34px;
}

.menu-config-items.is-drop-target {
  outline: 2px dashed #b8c0c8;
  outline-offset: -2px;
  background: #f8fafc;
}

.menu-config-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  color: #28303a;
  background: #ffffff;
}

.menu-config-item:hover {
  background: #f0f3f6;
}

.menu-config-item.is-drop-target {
  box-shadow: inset 0 2px 0 var(--accent);
}

.menu-config-item.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.menu-config-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-config-tab {
  color: #7a828b;
  font-size: 12px;
  white-space: nowrap;
}

.menu-settings-card {
  min-height: 0;
  overflow: auto;
  border: 1px solid #d6dbe1;
  background: #ffffff;
}

.menu-settings-card .settings-section-title {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #d6dbe1;
  background: #f4f5f7;
}

.menu-group-editor {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.menu-group-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 48px 54px;
  gap: 6px;
  align-items: center;
}

.menu-group-edit-row input,
.menu-group-edit-row button,
.menu-assignment-grid select {
  height: 30px;
  border: 1px solid #bcc3cb;
  background: #ffffff;
}

.menu-group-edit-row input {
  min-width: 0;
  padding: 0 8px;
}

.menu-group-edit-row button:disabled {
  color: #a8afb7;
  background: #f1f3f5;
  cursor: default;
}

.menu-assignment-wrap {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.menu-assignment-grid {
  min-width: 760px;
}

.menu-assignment-grid select {
  width: 100%;
}

.menu-catalog-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.menu-catalog-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  border: 1px solid #d8dde3;
  padding: 0 10px;
  background: #ffffff;
}

.menu-catalog-group span {
  color: #6e7781;
  font-size: 12px;
  font-weight: 800;
}

.permission-select {
  width: 100%;
  height: 28px;
  border: 1px solid #c2c8cf;
  background: #ffffff;
}

.account-kind-select {
  min-width: 96px;
}

.permission-muted {
  color: var(--muted);
  font-size: 12px;
}

.manager-check-list {
  display: grid;
  gap: 3px;
  max-height: 86px;
  overflow: auto;
  border: 1px solid #d1d6dc;
  padding: 5px 6px;
  background: #ffffff;
}

.manager-check-list label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #26313d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.manager-check-list input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.manager-check-list span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-check-list .manager-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.permission-delete-button {
  height: 26px;
  border: 1px solid #d2a19b;
  border-radius: 4px;
  padding: 0 8px;
  color: #8c2f22;
  background: #fff5f3;
  font-size: 12px;
  font-weight: 900;
}

.permission-delete-button:disabled {
  color: #a2a8b0;
  background: #eceff2;
  border-color: #d0d5db;
  cursor: not-allowed;
}

.permission-account {
  display: grid;
  gap: 2px;
}

.permission-account strong,
.permission-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-account span {
  color: var(--muted);
  font-size: 12px;
}

.org-panel {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1680px, calc(100vw - 20px));
  max-height: min(920px, calc(100vh - 20px));
}

.org-chart-wrap {
  min-height: 0;
  overflow: auto;
  padding: 8px;
  background: #f7f8fa;
}

.org-chart {
  display: grid;
  gap: 10px;
}

.org-center-group {
  border: 1px solid #cfd5dc;
  background: #ffffff;
}

.org-center-title {
  padding: 9px 12px;
  border-bottom: 1px solid #d9dde2;
  background: #eef2f5;
  font-weight: 900;
}

.org-graph {
  position: relative;
  display: grid;
  gap: 96px;
  min-width: 1280px;
  min-height: 560px;
  padding: 18px 28px 40px;
  overflow: auto;
}

.org-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.org-line {
  fill: none;
  stroke: #3973b8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
  pointer-events: stroke;
  cursor: pointer;
}

.org-line:hover {
  stroke: #d04437;
  stroke-width: 6;
}

.org-graph.is-readonly .org-line {
  pointer-events: none;
  cursor: default;
}

.org-graph.is-readonly .org-line:hover {
  stroke: #3973b8;
  stroke-width: 4;
}

.org-line.is-muted {
  opacity: 0.18;
  stroke: #9aa8b7;
  stroke-width: 2.5;
}

.org-line.is-focused {
  opacity: 1;
  stroke: #d04437;
  stroke-width: 6;
}

.org-line--preview {
  stroke: #d04437;
  stroke-dasharray: 7 5;
  pointer-events: none;
}

.org-legend,
.org-lane {
  position: relative;
  z-index: 1;
}

.org-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #4a5562;
  font-size: 12px;
  font-weight: 800;
}

.org-legend span {
  border: 1px solid #d3d9df;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.92);
}

.org-lane {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.org-lane-title {
  display: grid;
  place-items: center;
  border: 1px solid #cfd5dc;
  background: #f2f5f7;
  color: #26313d;
  font-size: 13px;
  font-weight: 900;
}

.org-card-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 46px;
  align-items: stretch;
  min-width: max-content;
  min-height: 150px;
  padding: 0 48px;
}

.org-card {
  position: relative;
  z-index: 3;
  flex: 0 0 280px;
  width: 280px;
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 132px;
  border: 1px solid #cdd3da;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(24, 36, 52, 0.08);
}

.org-card.is-manager {
  border-color: #9cb9d9;
  background: #f7fbff;
}

.org-card.is-field {
  border-color: #d5d9df;
}

.org-card.is-admin {
  border-color: #a5aab2;
  background: #f6f6f7;
}

.org-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.org-card-main strong,
.org-card-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-card-main strong {
  font-size: 14px;
}

.org-card-main span,
.org-card-managers {
  color: var(--muted);
  font-size: 12px;
}

.org-card-managers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.org-card-managers button {
  height: 22px;
  border: 1px solid #c8d4e2;
  border-radius: 4px;
  padding: 0 6px;
  color: #315f95;
  background: #eef6ff;
  font-size: 11px;
  font-weight: 900;
}

.org-card-managers button:hover {
  border-color: #d04437;
  color: #a53228;
  background: #fff1ef;
}

.org-manager-chip {
  min-height: 22px;
  border: 1px solid #d0d7df;
  border-radius: 4px;
  padding: 2px 6px;
  color: #4f6074;
  background: #f5f7f9;
  font-size: 11px;
  font-weight: 900;
}

.org-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.org-card-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.org-card-controls select {
  min-width: 0;
  height: 28px;
  border: 1px solid #c2c8cf;
  background: #ffffff;
}

.org-connect-handle {
  position: absolute;
  left: 50%;
  bottom: -15px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border: 3px solid #3973b8;
  border-radius: 999px;
  background: #ffffff;
  transform: translateX(-50%);
  cursor: crosshair;
  box-shadow: 0 2px 6px rgba(35, 60, 92, 0.24);
}

.org-connect-handle::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: #3973b8;
}

.org-graph.is-connecting .org-card {
  outline: 1px dashed #b7c6d7;
  outline-offset: 2px;
}

.org-graph.is-pending-connection .org-card.is-drop-target {
  outline: 2px dashed #3973b8;
  outline-offset: 3px;
  cursor: pointer;
}

.org-card.is-connection-source {
  border-color: #d04437;
  box-shadow: 0 0 0 3px rgba(208, 68, 55, 0.18), 0 2px 5px rgba(24, 36, 52, 0.08);
}

.org-card.is-focused-manager {
  border-color: #d04437;
  box-shadow: 0 0 0 3px rgba(208, 68, 55, 0.22), 0 2px 5px rgba(24, 36, 52, 0.08);
}

.org-card.is-drop-target:hover {
  background: #eef6ff;
}

.org-tree,
.org-children {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.org-children {
  margin-left: 26px;
  padding: 8px 0 0 14px;
  border-left: 2px solid #d8dee5;
}

.org-node {
  border: 1px solid #d5d9df;
  background: #ffffff;
}

.org-node-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.org-node-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.org-node-title strong,
.org-node-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-node-title span {
  color: var(--muted);
  font-size: 12px;
}

.org-badge {
  border: 1px solid #c9d0d8;
  border-radius: 999px;
  padding: 2px 7px;
  background: #f5f7f9;
  color: #44505c;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.org-node-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.org-node-controls select {
  height: 28px;
  min-width: 128px;
  border: 1px solid #c2c8cf;
  background: #ffffff;
}

.org-manager-list {
  width: 220px;
  max-height: 74px;
}

.org-node-controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #414b57;
  font-size: 12px;
  font-weight: 800;
}

.org-empty {
  padding: 18px;
  border: 1px dashed #c4cbd3;
  background: #ffffff;
  color: var(--muted);
  text-align: center;
}

.alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 880;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(32, 36, 42, 0.24);
}

.alert-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 48px));
  max-height: min(640px, calc(100vh - 48px));
  border: 1px solid #aeb6bf;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.alert-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid #d9dde2;
  background: #f5f6f8;
}

.alert-panel h2 {
  margin: 0;
  font-size: 18px;
}

.alert-panel header button {
  height: 31px;
  border: 1px solid #b8bec5;
  padding: 0 12px;
  color: #24313f;
  background: #ffffff;
  font-weight: 800;
}

.alert-list {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 14px;
}

.alert-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #ead0cb;
  border-radius: 6px;
  padding: 10px;
  background: #fff7f5;
}

.alert-item + .alert-item {
  margin-top: 8px;
}

.alert-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.alert-item-main strong,
.alert-item-main span,
.alert-item-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-item-main strong {
  color: #2f363e;
}

.alert-item-main span {
  color: #8c2f22;
  font-weight: 900;
}

.alert-item-main small,
.alert-empty {
  color: var(--muted);
  font-size: 12px;
}

.alert-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.alert-actions .grid-action-button {
  width: auto;
  min-width: 66px;
  margin: 0;
  padding: 0 8px;
}

.alert-empty {
  border: 1px dashed #cfd5dc;
  padding: 22px;
  text-align: center;
}

.print-root {
  display: none;
}

.room-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px;
}

.room-card {
  min-height: 120px;
  background: #ffffff;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow);
}

.room-card h3 {
  margin: 0;
  padding: 9px 11px;
  color: #ffffff;
  background: var(--title);
  font-size: 15px;
}

.room-card ul {
  margin: 0;
  padding: 9px 13px 13px 28px;
}

.room-card li {
  margin-bottom: 6px;
  color: #303743;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(360px, calc(100% - 36px));
  border-radius: 6px;
  padding: 12px 14px;
  color: #ffffff;
  background: rgba(32, 36, 42, 0.94);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.context-menu {
  position: fixed;
  z-index: 50;
  min-width: 210px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #9fa6af;
  box-shadow: 0 12px 28px rgba(32, 36, 42, 0.18);
}

.context-menu button {
  display: block;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid #eceff2;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.context-menu button[hidden] {
  display: none !important;
}

.context-menu button:last-child {
  border-bottom: 0;
}

.context-menu button:hover {
  background: #eef2f6;
}

body.is-mobile-expiry {
  overflow: auto;
  background: #f2f4f7;
}

body.is-mobile-expiry .erp-frame {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  transform: none;
}

body.is-mobile-expiry .titlebar,
body.is-mobile-expiry .icon-rail,
body.is-mobile-expiry .side-menu,
body.is-mobile-expiry .tabbar,
body.is-mobile-expiry .commandbar {
  display: none;
}

body.is-mobile-expiry .main-panel {
  display: block;
  min-height: 100vh;
  background: #f2f4f7;
}

body.is-mobile-expiry .content-area {
  min-height: 100vh;
  overflow: visible;
  padding: 0;
}

.mobile-expiry-view {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 12px;
}

.mobile-expiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.mobile-expiry-header h1 {
  margin: 0;
  color: #20242a;
  font-size: 21px;
  line-height: 1.2;
}

.mobile-expiry-header span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.mobile-expiry-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mobile-expiry-header button,
.mobile-expiry-toolbar button,
.mobile-expiry-card-actions button {
  min-height: 42px;
  border: 1px solid #aeb8c4;
  border-radius: 6px;
  padding: 0 13px;
  color: #233043;
  background: #ffffff;
  font-weight: 900;
}

.mobile-expiry-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 0.8fr) auto auto;
  gap: 8px;
  align-items: end;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.mobile-expiry-toolbar label,
.mobile-expiry-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #3b424b;
  font-weight: 900;
}

.mobile-expiry-toolbar input,
.mobile-expiry-toolbar select,
.mobile-expiry-field input {
  width: 100%;
  height: 44px;
  border: 1px solid #b9c1ca;
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: #171b20;
  font-size: 18px;
  outline: 0;
}

.mobile-receipt-view .mobile-expiry-header {
  align-items: flex-start;
  flex-direction: row;
  min-height: 0;
  padding: 8px 10px;
}

.mobile-receipt-view .mobile-expiry-header h1 {
  font-size: 20px;
}

.mobile-receipt-view .mobile-expiry-header span {
  margin-top: 1px;
  font-size: 12px;
}

.mobile-receipt-view .mobile-expiry-header-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}

.mobile-receipt-view .mobile-expiry-header-actions button {
  min-height: 30px;
  border-radius: 4px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-receipt-view .mobile-expiry-toolbar {
  grid-template-columns: minmax(116px, 0.66fr) minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: end;
  padding: 8px;
}

.mobile-receipt-view .mobile-expiry-toolbar label > span {
  display: none;
}

.mobile-receipt-view .mobile-expiry-toolbar input,
.mobile-receipt-view .mobile-expiry-toolbar select {
  height: 38px;
  font-size: 15px;
}

.mobile-receipt-view .print-device-select--mobile {
  display: block;
  min-width: 0;
}

.mobile-receipt-view .mobile-toolbar-icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.mobile-expiry-field input {
  height: 52px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-expiry-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(77, 120, 184, 0.18);
}

.mobile-expiry-field input.is-error {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
}

.mobile-expiry-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #39414b;
  font-size: 14px;
}

.mobile-expiry-summary span {
  color: var(--muted);
}

.mobile-receipt-logistics-filter {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
}

.mobile-receipt-logistics-filter button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid #bfccdb;
  border-radius: 999px;
  padding: 0 12px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-receipt-logistics-filter button.is-active {
  border-color: #4d78b8;
  background: #eaf2ff;
  color: #174579;
  box-shadow: inset 0 0 0 1px #9dbbe6;
}

.mobile-receipt-logistics-filter small {
  margin-left: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 1000;
}

.mobile-receipt-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.mobile-receipt-search input {
  width: 100%;
  height: 38px;
  border: 1px solid #b9c1ca;
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: #171b20;
  font-size: 15px;
  font-weight: 900;
  outline: 0;
}

.mobile-receipt-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(77, 120, 184, 0.18);
}

.mobile-receipt-search button {
  min-width: 54px;
  height: 38px;
  border: 1px solid #aeb8c4;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #233043;
  font-size: 13px;
  font-weight: 900;
}

.mobile-receipt-search button:disabled {
  color: #9aa5b1;
  background: #f1f5f9;
}

.mobile-expiry-panel {
  min-height: 0;
  min-width: 0;
}

.mobile-expiry-grid-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  border-top: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.mobile-expiry-grid {
  min-width: 824px;
}

.mobile-receipt-grid {
  min-width: 1040px;
}

.mobile-expiry-grid th,
.mobile-expiry-grid td {
  height: 42px;
}

.mobile-expiry-grid .grid-input,
.mobile-expiry-grid .grid-select {
  height: 40px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.mobile-expiry-grid .grid-text {
  min-height: 40px;
  padding-top: 11px;
}

.mobile-expiry-grid .mobile-receipt-note-input {
  text-align: left;
}

.mobile-receipt-grid-print-button {
  width: 100%;
  min-width: 0;
  padding-right: 4px;
  padding-left: 4px;
  white-space: nowrap;
}

.mobile-expiry-grid .mobile-grid-number-cell,
.mobile-expiry-grid .mobile-grid-number-cell .grid-text {
  text-align: center;
}

.mobile-expiry-grid tr.is-logistics-break > td {
  border-top: 4px solid #5d6b7f;
}

.mobile-expiry-grid .mobile-expiry-status {
  font-weight: 900;
  text-align: center;
}

.receipt-print-status {
  font-weight: 900;
  text-align: center;
}

.receipt-print-status--printed {
  color: var(--status-ok-ink);
}

.receipt-print-status--unprinted,
.receipt-print-status--reprint {
  color: var(--status-warning-ink);
}

.receipt-print-status--pending {
  color: var(--status-disabled-ink);
}

.mobile-expiry-footer {
  display: flex;
  justify-content: stretch;
}

.mobile-expiry-footer button {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--status-active-border);
  border-radius: 6px;
  color: var(--status-active-ink);
  background: var(--status-active-bg);
  font-size: 16px;
  font-weight: 900;
}

.mobile-expiry-list {
  display: grid;
  gap: 10px;
}

.mobile-receipt-card-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.mobile-receipt-card {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.mobile-sample-card {
  gap: 8px;
}

.mobile-sample-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.mobile-sample-grid .grid-input,
.mobile-sample-grid .grid-select {
  min-height: 34px;
  text-align: center;
}

.mobile-sample-grid .grid-input[list] {
  text-align: left;
}

.mobile-receipt-card.is-logistics-break {
  margin-top: 8px;
  border-top: 4px solid #5d6b7f;
}

.mobile-receipt-supplier-line {
  min-width: 0;
  color: #67717f;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-receipt-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #5d6671;
  font-size: 13px;
  font-weight: 850;
}

.mobile-receipt-subline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-receipt-qty-grid {
  display: grid;
  grid-template-columns: minmax(78px, 0.82fr) minmax(118px, 1.18fr) minmax(132px, 1.35fr) minmax(54px, 0.5fr);
  gap: 5px;
  align-items: end;
}

.mobile-receipt-qty-grid > .mobile-receipt-logistics {
  display: none;
}

.mobile-receipt-field,
.mobile-receipt-readonly {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mobile-receipt-field span,
.mobile-receipt-readonly span {
  color: #4f5b68;
  font-size: 11px;
  font-weight: 900;
}

.mobile-receipt-field input,
.mobile-receipt-field select,
.mobile-receipt-readonly strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid #b9c1ca;
  border-radius: 7px;
  padding: 0 8px;
  background: #ffffff;
  color: #171b20;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  outline: 0;
}

.mobile-receipt-logistics strong {
  padding: 0 6px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-receipt-actual-unit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(42px, 0.72fr);
  gap: 4px;
  min-width: 0;
}

.mobile-receipt-actual-unit-control input,
.mobile-receipt-actual-unit-control select {
  padding: 0 5px;
}

.mobile-receipt-actual-unit-control select {
  font-size: 12px;
}

.mobile-receipt-field input:focus,
.mobile-receipt-field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(77, 120, 184, 0.18);
}

.mobile-receipt-field input.is-error {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
}

.mobile-receipt-field-wide {
  grid-column: 1 / -1;
}

.mobile-receipt-field-wide input {
  text-align: left;
}

.mobile-receipt-print-inline {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border-radius: 7px;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 900;
}

.mobile-receipt-unit-inline {
  min-width: 70px;
}

.mobile-receipt-unit-inline select {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 0;
  padding: 0 6px;
  background: transparent;
  color: #334155;
  font-size: 15px;
  font-weight: 1000;
  text-align: center;
  outline: 0;
}

.mobile-expiry-grid .grid-select[data-mobile-receipt-field="receiveUnit"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #334155;
  font-weight: 1000;
  outline: 0;
  box-shadow: none;
}

.mobile-receipt-expiry-inline input {
  text-align: center;
}

.mobile-receipt-title-stack {
  display: grid;
  min-width: 0;
}

@media (max-width: 520px) {
  .mobile-expiry-view {
    gap: 10px;
    padding: 8px;
  }

  .mobile-expiry-header {
    align-items: stretch;
    flex-direction: column;
  }

  .mobile-expiry-header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-expiry-header-actions button {
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
  }

  .mobile-expiry-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-expiry-toolbar label,
  .mobile-expiry-toolbar .print-device-select {
    grid-column: 1 / -1;
  }

  .mobile-receipt-card-list {
    padding: 6px;
  }

  .mobile-sample-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-receipt-qty-grid {
    grid-template-columns: minmax(78px, 0.82fr) minmax(118px, 1.18fr) minmax(132px, 1.35fr) minmax(54px, 0.5fr);
  }

  .mobile-receipt-field input,
  .mobile-receipt-field select,
  .mobile-receipt-readonly strong {
    height: 35px;
    font-size: 14px;
  }

  .mobile-receipt-unit-inline {
    min-width: 64px;
  }

  .mobile-receipt-logistics strong,
  .mobile-receipt-print-inline {
    font-size: 10px;
  }
}

.mobile-menu-view {
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  width: min(1040px, 100%);
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
}

.mobile-menu-card {
  display: grid;
  align-content: center;
  gap: 0;
  min-height: 64px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 12px 16px;
  background: #ffffff;
  color: #142033;
  text-align: left;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.mobile-menu-card strong {
  font-size: 21px;
  line-height: 1.2;
}

.mobile-menu-card:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.mobile-menu-card:not(:disabled):active {
  transform: translateY(1px);
  background: #eef6ff;
}

.mobile-menu-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  margin: 16px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  background: #ffffff;
  color: #27492a;
  font-size: 18px;
  font-weight: 900;
}

.mobile-stock-count-view {
  width: min(860px, 100%);
}

.mobile-stock-count-view .mobile-expiry-header {
  align-items: flex-start;
  min-height: 0;
  padding: 8px 10px;
}

.mobile-stock-count-view .mobile-expiry-header h1 {
  font-size: 20px;
}

.mobile-stock-count-view .mobile-expiry-header-actions button {
  min-height: 30px;
  border-radius: 4px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-stock-count-toolbar {
  grid-template-columns: minmax(150px, 0.85fr) minmax(190px, 1.15fr) 42px;
  gap: 6px;
  padding: 8px;
}

.mobile-stock-count-toolbar > *,
.mobile-stock-count-toolbar label {
  min-width: 0;
}

.mobile-stock-count-toolbar label > span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.mobile-stock-count-toolbar input,
.mobile-stock-count-toolbar select {
  min-width: 0;
  height: 38px;
  font-size: 15px;
  font-weight: 900;
}

.mobile-stock-count-summary {
  align-items: flex-start;
}

.mobile-stock-count-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.mobile-stock-count-sync small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.mobile-stock-count-list {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.mobile-stock-count-list.is-card-layout {
  overflow-x: visible;
}

.mobile-stock-count-section {
  display: grid;
  gap: 4px;
  min-width: 370px;
}

.mobile-stock-count-list.is-card-layout .mobile-stock-count-section,
.mobile-stock-count-list.is-card-layout .mobile-stock-count-section-head {
  min-width: 0;
}

.mobile-stock-count-section + .mobile-stock-count-section {
  margin-top: 6px;
}

.mobile-stock-count-row {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) 50px 50px 68px 68px;
  gap: 4px;
  align-items: center;
  min-width: 370px;
  min-height: 32px;
  border: 1px solid #d5dbe2;
  border-radius: 5px;
  padding: 3px 5px;
  background: #ffffff;
}

.mobile-stock-count-row.is-entered {
  border-color: #1f8f4d;
  box-shadow: inset 3px 0 0 #1f8f4d;
}

.mobile-stock-count-row.is-thaw,
.mobile-stock-count-card.is-thaw {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.mobile-stock-count-row.is-thaw.is-entered,
.mobile-stock-count-card.is-thaw.is-entered {
  background: #eef2f7;
}

.mobile-stock-count-thaw-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  padding: 1px 5px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.2;
  vertical-align: middle;
}

.mobile-stock-count-row-head {
  min-height: 28px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 1000;
  text-align: center;
}

.mobile-stock-count-row-head span:first-child {
  text-align: left;
}

.mobile-stock-count-product {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-stock-count-row input {
  width: 100%;
  height: 28px;
  border: 1px solid #b9c1ca;
  border-radius: 4px;
  padding: 0 5px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  outline: 0;
}

.mobile-stock-count-row input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.mobile-stock-count-row input[type="number"]::-webkit-inner-spin-button,
.mobile-stock-count-row input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.mobile-stock-count-row input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(31, 143, 77, 0.18);
}

.mobile-stock-count-row em,
.mobile-stock-count-row > span {
  overflow: hidden;
  color: #334155;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-stock-count-row em {
  color: #174579;
}

.mobile-stock-count-section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 370px;
  min-height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 4px 48px 4px 58px;
  background: #eef6ff;
  color: #111827;
  font-weight: 900;
  text-align: center;
}

.mobile-stock-count-section-save {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  min-width: 44px;
  height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
}

.mobile-stock-count-section-save.has-pending {
  border-color: #1f8f4d;
  background: #e8f6ed;
  color: #0f6b37;
}

.mobile-stock-count-section-head strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-stock-count-section-head span {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.mobile-stock-count-card {
  display: grid;
  gap: 10px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.mobile-stock-count-card.is-entered {
  border-color: #1f8f4d;
  box-shadow: inset 0 0 0 1px rgba(31, 143, 77, 0.45);
}

.mobile-stock-count-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mobile-stock-count-card-head strong {
  display: block;
  color: #111827;
  font-size: 17px;
  line-height: 1.25;
}

.mobile-stock-count-card-head span,
.mobile-stock-count-meta {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.mobile-stock-count-card-head em {
  flex: 0 0 auto;
  min-width: 76px;
  border-radius: 6px;
  padding: 6px 8px;
  background: #eef6ff;
  color: #174579;
  font-style: normal;
  font-weight: 1000;
  text-align: center;
}

.mobile-stock-count-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.mobile-stock-count-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-stock-count-input-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.mobile-stock-count-input-grid input {
  width: 100%;
  height: 44px;
  border: 1px solid #b9c1ca;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  outline: 0;
}

.mobile-stock-count-input-grid input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.mobile-stock-count-input-grid input[type="number"]::-webkit-inner-spin-button,
.mobile-stock-count-input-grid input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.mobile-stock-count-input-grid input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 143, 77, 0.18);
}

.mobile-stock-count-note {
  grid-column: 1 / -1;
}

.mobile-expiry-card,
.mobile-expiry-empty {
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.mobile-expiry-card.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.mobile-expiry-card.is-error {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
}

.mobile-expiry-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.mobile-expiry-card-top span {
  border-radius: 5px;
  padding: 4px 7px;
  color: #ffffff;
  background: var(--status-disabled-ink);
  font-size: 12px;
  font-weight: 900;
}

.mobile-expiry-card-top strong {
  min-width: 0;
  color: #171b20;
  font-size: 19px;
  line-height: 1.25;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-receipt-unit-transparent {
  width: 78px;
  height: 34px;
  border: 0;
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  color: #334155;
  font-size: 15px;
  font-weight: 1000;
  text-align: center;
  outline: 0;
}

.mobile-receipt-unit-transparent:focus {
  box-shadow: 0 2px 0 var(--blue);
}

.mobile-expiry-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 10px 0;
  color: #5d6671;
  font-size: 13px;
}

.mobile-expiry-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-expiry-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.mobile-expiry-status {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.mobile-expiry-card.is-done .mobile-expiry-status {
  color: var(--status-ok-ink);
}

.mobile-expiry-card.is-error .mobile-expiry-status {
  color: var(--status-error-ink);
}

.mobile-expiry-empty {
  color: var(--muted);
  text-align: center;
}

.mobile-barcode-toolbar {
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(110px, 0.7fr);
}

.mobile-barcode-scan-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.mobile-barcode-scan-panel.is-legacy-hidden {
  display: none;
}

.mobile-barcode-device-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-barcode-device-toggle button {
  min-height: 48px;
  border: 1px solid #b8c3d0;
  border-radius: 8px;
  background: #ffffff;
  color: #263243;
  font-size: 16px;
  font-weight: 1000;
}

.mobile-barcode-device-toggle button.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
  box-shadow: inset 0 0 0 2px var(--status-active-bg-strong);
}

.mobile-barcode-scanner-status {
  min-height: 34px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  color: #445065;
  font-size: 13px;
  font-weight: 900;
}

.mobile-barcode-scanner-status.is-ok {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.mobile-barcode-scanner-status.is-error {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-ink);
}

.mobile-barcode-mode-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
}

.mobile-barcode-mode-select .outbound-barcode-mode-card {
  min-height: 150px;
  padding: 18px;
}

.mobile-barcode-mode-select .outbound-barcode-mode-card strong {
  font-size: 24px;
}

.mobile-barcode-mode-select .outbound-barcode-mode-card span {
  font-size: 13px;
}

.mobile-barcode-mode-select .outbound-barcode-mode-card small {
  font-size: 14px;
}

.mobile-barcode-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.mobile-barcode-actions button {
  min-height: 42px;
  border: 1px solid #aeb8c4;
  border-radius: 6px;
  padding: 0 8px;
  color: #233043;
  background: #ffffff;
  font-weight: 900;
}

.mobile-barcode-actions button:first-child {
  border-color: #7fa6d5;
  background: #eef6ff;
}

.mobile-barcode-camera {
  display: grid;
  gap: 6px;
  position: relative;
}

.mobile-barcode-camera.is-hidden {
  display: none;
}

.mobile-barcode-camera video {
  width: 100%;
  max-height: 280px;
  border: 1px solid #c6d0dc;
  border-radius: 8px;
  background: #111827;
  object-fit: cover;
}

.mobile-barcode-camera-status {
  color: #5d6671;
  font-size: 13px;
  font-weight: 800;
}

.mobile-barcode-color-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
  margin-top: 4px;
}

.mobile-barcode-color-settings summary {
  cursor: pointer;
  color: #34206f;
  font-weight: 900;
}

.mobile-barcode-color-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.mobile-barcode-color-card {
  display: grid;
  gap: 6px;
  border: 1px solid #d9e0e8;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.mobile-barcode-color-card.is-active {
  border-color: var(--status-active-border);
  box-shadow: inset 0 0 0 2px var(--status-active-bg);
}

.mobile-barcode-color-card-head {
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 6px;
}

.mobile-barcode-color-card-head strong {
  color: #172033;
  font-size: 13px;
  line-height: 1.2;
}

.mobile-barcode-color-card-head i {
  width: 28px;
  height: 28px;
  border: 1px solid #8794a4;
  border-radius: 50%;
}

.mobile-barcode-color-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.mobile-barcode-color-card label {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
}

.mobile-barcode-color-card input[type="color"] {
  width: 100%;
  height: 26px;
  border: 0;
  padding: 0;
  background: transparent;
}

.mobile-barcode-color-actions {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.mobile-barcode-color-actions button {
  min-height: 42px;
  border: 1px solid #7fa6d5;
  border-radius: 6px;
  background: #eef6ff;
  color: #164673;
  font-weight: 950;
}

.mobile-barcode-color-actions span {
  color: #5d6671;
  font-size: 13px;
  font-weight: 850;
}

.mobile-barcode-color-actions span.is-ok {
  color: var(--status-ok-ink);
}

.mobile-barcode-color-actions span.is-error {
  color: var(--status-error-ink);
}

.mobile-barcode-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.mobile-barcode-color-grid label {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid #d9e0e8;
  border-radius: 6px;
  padding: 4px 6px;
  background: #ffffff;
  color: #233043;
  font-size: 12px;
  font-weight: 900;
}

.mobile-barcode-color-grid input {
  width: 38px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
}

.mobile-barcode-scan-panel input[readonly] {
  caret-color: transparent;
}

.mobile-barcode-scan-color-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  padding: 0 8px;
  background: #edf2f7;
  color: #425066;
  font-size: 12px;
  font-weight: 950;
  vertical-align: middle;
}

.mobile-barcode-scan-value {
  border-width: 3px;
  font-weight: 1000;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.mobile-barcode-scan-popup {
  position: fixed;
  top: 22%;
  left: 50%;
  z-index: 9999;
  max-width: min(86vw, 520px);
  transform: translate(-50%, -8px);
  border: 2px solid #0f7a42;
  border-radius: 12px;
  padding: 18px 24px;
  background: #ecfdf3;
  color: #075c35;
  font-size: 22px;
  font-weight: 1000;
  text-align: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.mobile-barcode-scan-popup.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.mobile-barcode-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.mobile-barcode-confirm-dialog.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-barcode-confirm-card {
  width: min(92vw, 560px);
  border: 2px solid #1f3f2f;
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.mobile-barcode-confirm-head {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d9e2dc;
}

.mobile-barcode-confirm-head small {
  color: #4f6f5b;
  font-size: 14px;
  font-weight: 900;
}

.mobile-barcode-confirm-head strong {
  color: #0f172a;
  font-size: 28px;
  font-weight: 1000;
}

.mobile-barcode-confirm-product {
  display: grid;
  gap: 8px;
  padding: 18px 0;
}

.mobile-barcode-confirm-product b {
  color: #061226;
  font-size: 24px;
  line-height: 1.25;
}

.mobile-barcode-confirm-product span,
.mobile-barcode-confirm-product em {
  color: #475569;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
}

.mobile-barcode-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-barcode-confirm-actions button {
  min-height: 84px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 42px;
  font-weight: 1000;
  cursor: pointer;
}

.mobile-barcode-confirm-actions .is-no {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #b91c1c;
}

.mobile-barcode-confirm-actions .is-yes {
  border-color: #86efac;
  background: #dcfce7;
  color: #047857;
}

.mobile-barcode-summary {
  align-items: flex-start;
}

.mobile-barcode-summary span {
  text-align: right;
}

.mobile-barcode-summary-chips {
  padding: 0;
}

.mobile-barcode-category-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}

.mobile-barcode-category-chip {
  min-height: 54px;
  border: 1px solid #c9d2dd;
  border-radius: 7px;
  padding: 6px 7px;
  background: #ffffff;
  color: #253244;
  text-align: left;
  box-shadow: 0 1px 2px rgba(21, 34, 50, 0.06);
}

.mobile-barcode-category-chip.is-static {
  cursor: default;
}

.mobile-barcode-production-category-chips {
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
}

.mobile-barcode-category-chip strong,
.mobile-barcode-category-chip span,
.mobile-barcode-category-chip small {
  display: block;
  line-height: 1.15;
}

.mobile-barcode-category-chip strong {
  font-size: 15px;
  font-weight: 950;
}

.mobile-barcode-category-chip span {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 850;
}

.mobile-barcode-category-chip small {
  margin-top: 2px;
  color: #697589;
  font-size: 11px;
  font-weight: 800;
}

.mobile-barcode-category-chip small::before {
  content: "미 ";
}

.mobile-barcode-category-chip.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  box-shadow: inset 0 0 0 1px var(--status-active-border);
}

.mobile-barcode-category-chip.is-ok {
  border-color: var(--status-ok-border);
}

.mobile-barcode-category-chip.is-pending.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  box-shadow: inset 0 0 0 1px var(--status-active-border);
}

.mobile-barcode-group {
  display: grid;
  gap: 8px;
}

.mobile-barcode-production-section {
  display: grid;
  gap: 8px;
}

.mobile-barcode-production-section + .mobile-barcode-production-section {
  margin-top: 14px;
}

.mobile-barcode-production-section.is-additional {
  padding-top: 10px;
  border-top: 2px solid #d8e1ed;
}

.mobile-barcode-production-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border: 1px solid #cbd6e4;
  border-radius: 7px;
  padding: 7px 10px;
  background: #eef4fb;
  color: #182238;
  box-shadow: 0 1px 3px rgba(20, 35, 55, 0.08);
}

.mobile-barcode-production-section.is-additional .mobile-barcode-production-bar {
  border-color: #d7c5a6;
  background: #fff7e6;
}

.mobile-barcode-production-bar strong {
  font-size: 15px;
  font-weight: 950;
}

.mobile-barcode-production-bar span {
  color: #5c6878;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.mobile-barcode-production-groups {
  display: grid;
  gap: 8px;
}

.mobile-barcode-group + .mobile-barcode-group {
  margin-top: 10px;
}

.mobile-barcode-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #d6dee8;
  border-radius: 7px;
  padding: 6px 9px;
  background: #f7f9fc;
  color: #243044;
}

.mobile-barcode-group-head strong {
  font-size: 16px;
  font-weight: 950;
}

.mobile-barcode-group-head span {
  color: #697589;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.mobile-barcode-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
}

.mobile-barcode-product-tile {
  min-height: 36px;
  border: 1px solid var(--status-warning-border);
  border-radius: 6px;
  padding: 7px 8px;
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.mobile-barcode-product-tile strong {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.mobile-barcode-production-tile {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 3px;
}

.mobile-barcode-production-tile span {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 850;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-product-tile.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.mobile-barcode-product-tile.is-pending {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
}

.mobile-barcode-card .mobile-expiry-meta {
  grid-template-columns: 1fr;
}

.mobile-barcode-card.is-done .mobile-expiry-status {
  color: var(--status-ok-ink);
}

.mobile-barcode-view {
  background: #edf3f8;
}

.mobile-barcode-view .mobile-expiry-header,
.mobile-barcode-modern-summary,
.mobile-barcode-scan-panel,
.mobile-barcode-filter-bar,
.mobile-barcode-queue-card,
.mobile-barcode-back-card,
.mobile-barcode-error-panel {
  border: 1px solid #d8e1eb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(20, 35, 55, 0.05);
}

.mobile-barcode-view .mobile-expiry-header {
  padding: 16px 20px;
}

.mobile-barcode-view .mobile-expiry-header h1 {
  color: #051225;
  font-size: 25px;
  letter-spacing: 0;
}

.mobile-barcode-view .mobile-expiry-header p {
  margin-top: 10px;
  color: #58708c;
  font-size: 14px;
  font-weight: 900;
}

.mobile-barcode-view .mobile-expiry-header-actions button {
  border: 0;
  background: transparent;
  color: #aeb9c7;
  font-size: 18px;
  font-weight: 1000;
}

.mobile-barcode-toolbar {
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.mobile-barcode-modern-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px;
}

.mobile-barcode-modern-summary > div:first-child {
  display: grid;
  gap: 4px;
}

.mobile-barcode-modern-summary span,
.mobile-barcode-modern-summary small {
  color: #55708e;
  font-size: 14px;
  font-weight: 850;
}

.mobile-barcode-modern-summary strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #061226;
  font-size: 22px;
  font-weight: 1000;
}

.mobile-barcode-modern-summary strong b {
  color: #f36a00;
  font-size: 48px;
  line-height: 1;
}

.mobile-barcode-modern-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, auto));
  gap: 22px;
  margin: 0;
  align-items: center;
}

.mobile-barcode-modern-summary dl div {
  display: grid;
  gap: 4px;
  text-align: center;
}

.mobile-barcode-modern-summary dt {
  color: #5b708a;
  font-size: 14px;
  font-weight: 950;
}

.mobile-barcode-modern-summary dd {
  margin: 0;
  color: #16a34a;
  font-size: 28px;
  font-weight: 1000;
}

.mobile-barcode-modern-summary dd.is-danger {
  color: #dc2626;
}

.mobile-barcode-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-barcode-panel-head strong {
  color: #071225;
  font-size: 23px;
  font-weight: 1000;
}

.mobile-barcode-scan-panel {
  gap: 14px;
  padding: 20px;
}

.mobile-barcode-device-toggle {
  display: flex;
  gap: 8px;
}

.mobile-barcode-device-toggle button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  background: #eff5fb;
  color: #15528c;
  font-size: 14px;
}

.mobile-barcode-device-toggle button.is-active {
  border: 0;
  background: #e2f3ff;
  color: #07558a;
  box-shadow: none;
}

.mobile-barcode-scan-value {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mobile-barcode-camera {
  display: block;
  position: relative;
  height: clamp(170px, 46vw, 240px);
  max-height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #101b2d;
}

.mobile-barcode-camera video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.mobile-barcode-camera-frame {
  position: absolute;
  inset: 42px 58px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  pointer-events: none;
}

.mobile-barcode-camera-line {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  pointer-events: none;
}

.mobile-barcode-camera-status {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #eaf2ff;
  font-size: 16px;
  font-weight: 1000;
  text-align: center;
}

.mobile-barcode-scanner-status {
  display: none;
}

.mobile-barcode-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mobile-barcode-actions button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: #f2f6fb;
  color: #24415f;
  font-size: 13px;
  font-weight: 1000;
}

.mobile-barcode-actions button[data-mobile-outbound-barcode-camera-start] {
  background: #e2f3ff;
  color: #07558a;
}

.mobile-barcode-recent-scan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  padding: 0 16px;
  background: #f8fbfe;
}

.mobile-barcode-recent-scan span {
  color: #6b7f98;
  font-size: 16px;
  font-weight: 900;
}

.mobile-barcode-recent-scan strong {
  overflow: hidden;
  color: #071225;
  font-size: 18px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-recent-scan em {
  min-width: 74px;
  border-radius: 999px;
  padding: 8px 14px;
  font-style: normal;
  font-size: 14px;
  font-weight: 1000;
  text-align: center;
}

.mobile-barcode-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
}

.mobile-barcode-filter-chip {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: #f4f7fa;
  color: #41536b;
  font-size: 15px;
  font-weight: 1000;
}

.mobile-barcode-filter-chip span {
  margin-left: 8px;
  color: #f36a00;
}

.mobile-barcode-filter-chip.is-active {
  background: #0f172a;
  color: #ffffff;
}

.mobile-barcode-list {
  display: grid;
  gap: 14px;
}

.mobile-barcode-queue-card {
  --barcode-accent: #f36a00;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.mobile-barcode-queue-card.is-theme-blue {
  --barcode-accent: #2563eb;
}

.mobile-barcode-queue-card.is-theme-purple {
  --barcode-accent: #7c3aed;
}

.mobile-barcode-queue-card.is-theme-green,
.mobile-barcode-queue-card.is-complete {
  --barcode-accent: #16a34a;
}

.mobile-barcode-queue-card.is-error {
  --barcode-accent: #dc2626;
  border-color: #fecaca;
  background: #fff7f7;
}

.mobile-barcode-queue-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.mobile-barcode-queue-title {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-items: start;
}

.mobile-barcode-queue-title i {
  width: 12px;
  height: 12px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--barcode-accent);
}

.mobile-barcode-queue-title strong {
  display: block;
  overflow: hidden;
  color: #071225;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-queue-title span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #58708c;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-queue-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #64748b;
  white-space: nowrap;
}

.mobile-barcode-queue-count strong {
  color: var(--barcode-accent);
  font-size: 27px;
  font-weight: 1000;
}

.mobile-barcode-queue-count span {
  font-size: 20px;
  font-weight: 1000;
}

.mobile-barcode-progress {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7edf4;
}

.mobile-barcode-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--barcode-accent);
}

.mobile-barcode-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  color: #263b57;
  font-size: 14px;
  font-weight: 1000;
}

.mobile-barcode-queue-meta b {
  color: #dc2626;
}

.mobile-barcode-queue-meta em {
  margin-left: auto;
  color: #5d7491;
  font-style: normal;
}

.mobile-barcode-back-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 0 20px;
  color: #071225;
  text-align: left;
}

.mobile-barcode-back-card span,
.mobile-barcode-back-card em {
  color: #5b708a;
  font-style: normal;
  font-weight: 950;
}

.mobile-barcode-back-card strong {
  overflow: hidden;
  font-size: 23px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-detail {
  display: grid;
  gap: 12px;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.mobile-barcode-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #0f172a;
}

.mobile-barcode-detail-head strong {
  font-size: 18px;
  font-weight: 1000;
}

.mobile-barcode-detail-head span {
  color: #5f728b;
  font-size: 13px;
  font-weight: 900;
}

.mobile-barcode-detail ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-barcode-detail li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 10px;
  background: #f8fafc;
}

.mobile-barcode-detail li.is-error {
  background: #fff1f2;
  color: #b91c1c;
}

.mobile-barcode-detail li.is-done {
  background: #ecfdf3;
  color: #047857;
}

.mobile-barcode-detail li span,
.mobile-barcode-detail li em {
  color: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.mobile-barcode-detail li strong {
  overflow: hidden;
  color: inherit;
  font-size: 15px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-detail li strong small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: inherit;
  font-size: 11px;
  font-weight: 850;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-barcode-follow-button {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: #101827;
  color: #ffffff;
  font-size: 16px;
  font-weight: 1000;
}

.mobile-barcode-error-panel {
  display: grid;
  gap: 16px;
  border-color: #fecaca;
  padding: 20px;
  background: #fff1f2;
  color: #b91c1c;
}

.mobile-barcode-error-panel.is-empty {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #047857;
}

.mobile-barcode-error-head {
  display: grid;
  gap: 6px;
}

.mobile-barcode-error-head strong {
  font-size: 38px;
  font-weight: 1000;
}

.mobile-barcode-error-head span {
  font-size: 16px;
  font-weight: 950;
}

.mobile-barcode-error-card {
  display: grid;
  gap: 14px;
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
}

.mobile-barcode-error-card strong {
  color: #071225;
  font-size: 24px;
  font-weight: 1000;
}

.mobile-barcode-error-card span {
  display: block;
  margin-top: 6px;
  color: #61728a;
  font-size: 14px;
  font-weight: 900;
}

.mobile-barcode-error-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.mobile-barcode-error-card dl div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
}

.mobile-barcode-error-card dt,
.mobile-barcode-error-card dd {
  margin: 0;
  font-size: 16px;
  font-weight: 1000;
}

.mobile-barcode-error-card dt {
  color: #64748b;
}

.mobile-barcode-error-card dd {
  color: #b91c1c;
}

.mobile-barcode-error-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-barcode-error-actions button {
  min-height: 48px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 16px;
  font-weight: 1000;
}

@media (max-width: 560px) {
  .mobile-barcode-modern-summary {
    grid-template-columns: 1fr;
  }

  .mobile-barcode-modern-summary dl {
    grid-template-columns: repeat(3, 1fr);
  }

  .mobile-barcode-filter-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mobile-barcode-filter-chip {
    flex: 0 0 auto;
  }

  .mobile-barcode-queue-card-main {
    grid-template-columns: 1fr;
  }

  .mobile-barcode-queue-count {
    justify-content: flex-end;
  }

  .mobile-barcode-camera-frame {
    inset: 42px 40px;
  }
}

.production-progress-row.is-running {
  background: var(--status-active-bg);
}

.erp-grid tr.production-progress-row.is-running td {
  background: var(--status-active-bg);
}

.production-progress-row.is-done {
  background: var(--status-ok-bg);
}

.erp-grid tr.production-progress-row.is-done td {
  background: var(--status-ok-bg);
}

.production-matrix-panel .grid-wrap {
  max-height: 46vh;
}

.production-matrix-grid {
  width: 780px;
  min-width: 780px;
  table-layout: fixed;
}

.production-matrix-grid th {
  height: 24px;
  padding: 2px 3px;
  color: #111827;
  font-size: 12px;
  text-align: center;
}

.production-matrix-product-head {
  width: 240px;
  min-width: 240px;
}

.production-matrix-product {
  width: 240px;
  min-width: 240px;
  background: #ffffff;
  text-align: left;
}

.production-matrix-product strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-matrix-product small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #657083;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-matrix-cell {
  width: 60px;
  min-width: 60px;
  height: 24px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.production-matrix-cell.is-done {
  background: var(--status-ok-bg-strong);
}

.production-matrix-cell.is-partial {
  background: var(--status-warning-bg-strong);
}

.production-matrix-cell.is-pending {
  background: var(--status-default-bg);
}

.production-matrix-cell.is-none {
  position: relative;
  background: #2f343a;
}

.production-matrix-cell.is-none::after {
  content: "×";
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.production-matrix-cell span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  color: #4a3300;
  font-size: 11px;
  font-weight: 900;
}

.production-delivery-summary-row.is-done {
  background: var(--status-ok-bg);
}

.production-delivery-summary-row.is-partial {
  background: var(--status-warning-bg);
}

.production-delivery-summary-row.is-pending {
  background: var(--status-default-bg);
}

.production-delivery-chips,
.mobile-production-delivery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.production-delivery-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  border: 1px solid var(--status-default-border);
  border-radius: 5px;
  padding: 3px 6px;
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.production-delivery-chip b {
  color: #1f2732;
  font-size: 12px;
}

.production-delivery-chip small {
  color: #5f6b7a;
  font-size: 11px;
  font-weight: 800;
}

.production-delivery-chip.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.production-delivery-chip.is-done b,
.production-delivery-chip.is-done small {
  color: var(--status-ok-ink);
}

.production-delivery-chip.is-partial {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
}

.production-delivery-chip.is-partial b,
.production-delivery-chip.is-partial small {
  color: var(--status-warning-ink);
}

.production-delivery-chip.is-pending {
  border-color: var(--status-default-border);
  background: var(--status-default-bg);
  color: var(--status-disabled-ink);
}

.mobile-production-toolbar {
  grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) minmax(105px, 0.7fr) minmax(110px, 0.7fr) auto auto;
}

.mobile-production-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-production-summary span {
  min-height: 42px;
  border: 1px solid #d5dbe2;
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
  color: #283242;
  font-weight: 900;
  text-align: center;
}

.mobile-production-list {
  display: grid;
  gap: 10px;
}

.mobile-production-card {
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.mobile-production-card.is-running {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
}

.mobile-production-card.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.mobile-production-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.mobile-production-card summary::-webkit-details-marker {
  display: none;
}

.mobile-production-card summary strong {
  min-width: 0;
  color: #1f2732;
  font-size: 18px;
  line-height: 1.25;
  word-break: keep-all;
}

.mobile-production-card summary span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #edf1f5;
  color: #394454;
  font-weight: 900;
}

.mobile-production-card.is-running summary span {
  background: var(--status-active-bg-strong);
  color: var(--status-active-ink);
}

.mobile-production-card.is-done summary span {
  background: var(--status-ok-bg-strong);
  color: var(--status-ok-ink);
}

.mobile-production-card-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid #e2e7ed;
  padding: 12px;
}

.mobile-production-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mobile-production-facts span,
.mobile-production-times span {
  border: 1px solid #d8dee6;
  border-radius: 6px;
  padding: 9px;
  background: #f8fafc;
  color: #5a6573;
  font-size: 13px;
}

.mobile-production-facts b {
  display: block;
  margin-top: 3px;
  color: #1f2732;
  font-size: 16px;
}

.mobile-production-delivery {
  border: 1px solid #e1e6ed;
  border-radius: 6px;
  padding: 8px;
  background: #fbfcfe;
}

.processing-daily-view {
  gap: 0;
}

.production-estimate-query-grid {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.production-estimate-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.production-estimate-card {
  display: grid;
  gap: 5px;
  min-height: 84px;
  border: 1px solid var(--line);
  padding: 13px 15px;
  background: #ffffff;
}

.production-estimate-card span {
  color: #566171;
  font-size: 12px;
  font-weight: 900;
}

.production-estimate-card strong {
  color: #192435;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0;
}

.production-estimate-card small {
  color: #6a7481;
  font-size: 12px;
  font-weight: 800;
}

.production-estimate-row.is-running td {
  background: var(--status-warning-bg);
}

.production-estimate-row.is-done td {
  background: var(--status-ok-bg);
}

.production-estimate-row.is-partial td {
  background: var(--status-warning-bg-strong);
}

.production-estimate-row.is-ready td {
  background: var(--status-default-bg);
}

.production-estimate-grid td {
  height: 34px;
}

@media (max-width: 1180px) {
  .production-estimate-query-grid,
  .production-estimate-summary {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

.processing-kiosk-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 1120px);
  min-height: min(760px, calc(100vh - 120px));
  margin: 0 auto;
  border: 1px solid #dfe9dc;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fff5 0%, #ffffff 42%, #f7fbf5 100%);
  box-shadow: 0 16px 34px rgba(35, 55, 38, 0.12);
}

.processing-kiosk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 94px;
  padding: 18px 30px;
  background: #527b49;
  color: #ffffff;
}

.processing-kiosk-nav {
  display: grid;
  justify-items: start;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.processing-kiosk-nav:disabled {
  cursor: default;
}

.processing-kiosk-nav h1 {
  margin: 0;
  color: #ffffff;
  font-size: 40px;
  font-weight: 950;
  line-height: 1.05;
}

.processing-kiosk-nav span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 900;
}

.processing-kiosk-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: end;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.processing-kiosk-actions button,
.processing-product-head button {
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.processing-kiosk-actions .processing-manager-call-button {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg-strong);
  color: var(--status-warning-ink);
}

.processing-manager-call-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--status-warning-border);
  border-radius: 12px;
  padding: 14px;
  background: var(--status-warning-bg);
  box-shadow: 0 10px 26px rgba(97, 68, 0, 0.11);
}

.processing-conflict-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--status-warning-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
}

.processing-conflict-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.processing-conflict-panel strong {
  font-size: 18px;
  font-weight: 950;
}

.processing-conflict-panel span {
  font-size: 13px;
  font-weight: 800;
}

.processing-conflict-list {
  display: grid;
  gap: 8px;
}

.processing-conflict-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--status-warning-border);
  padding-top: 8px;
}

.processing-conflict-list article > div {
  display: flex;
  gap: 6px;
}

.processing-conflict-list button {
  min-height: 36px;
  border: 1px solid var(--status-warning-border);
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--status-warning-ink);
  font-weight: 900;
  cursor: pointer;
}

.processing-conflict-list button.is-primary {
  background: var(--status-warning-bg-strong);
}

.processing-manager-call-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.processing-manager-call-head strong {
  display: block;
  color: var(--status-warning-ink);
  font-size: 20px;
  font-weight: 950;
}

.processing-manager-call-head span {
  display: block;
  margin-top: 4px;
  color: var(--status-warning-ink);
  font-size: 13px;
  font-weight: 800;
}

.processing-manager-call-head button,
.processing-manager-call-actions button {
  min-height: 38px;
  border: 1px solid var(--status-warning-border);
  border-radius: 6px;
  padding: 0 14px;
  background: #ffffff;
  color: var(--status-warning-ink);
  font-weight: 950;
  cursor: pointer;
}

.processing-manager-call-issues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.processing-manager-call-issues button {
  min-height: 46px;
  border: 1px solid var(--status-warning-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--status-warning-ink);
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.processing-manager-call-issues button.is-active {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg-strong);
  color: var(--status-warning-ink);
}

.processing-manager-call-note {
  display: grid;
  gap: 6px;
  color: var(--status-warning-ink);
  font-size: 13px;
  font-weight: 900;
}

.processing-manager-call-note textarea {
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--status-warning-border);
  border-radius: 7px;
  padding: 10px 12px;
  background: #ffffff;
  color: #1d1d1d;
  font-size: 16px;
  font-weight: 800;
  resize: vertical;
}

.processing-manager-call-actions {
  display: flex;
  justify-content: flex-end;
}

.processing-manager-call-actions button {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok-ink);
}

.processing-kiosk-date,
.processing-kiosk-center {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.processing-kiosk-center {
  min-width: 132px;
}

.processing-kiosk-date input,
.processing-kiosk-center select {
  width: 100%;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #172015;
  font-size: 16px;
  font-weight: 950;
}

.processing-barcode-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  align-items: end;
  gap: 8px;
  border: 1px solid #b7c8d9;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fbff;
  box-shadow: 0 6px 16px rgba(38, 67, 39, 0.05);
}

.processing-barcode-panel label {
  display: grid;
  gap: 4px;
  color: #26394f;
  font-size: 13px;
  font-weight: 950;
}

.processing-barcode-panel input {
  width: 100%;
  height: 42px;
  border: 1px solid #9eb4ca;
  border-radius: 7px;
  padding: 0 12px;
  background: #ffffff;
  color: #101827;
  font-size: 18px;
  font-weight: 950;
}

.processing-barcode-panel input.is-error {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
}

.processing-barcode-panel button {
  height: 42px;
  border: 1px solid #94a9bd;
  border-radius: 7px;
  padding: 0 14px;
  background: #ffffff;
  color: #203247;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.processing-barcode-panel button:first-of-type {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-barcode-panel small {
  color: #506274;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .processing-barcode-panel {
    grid-template-columns: 1fr 1fr;
  }

  .processing-barcode-panel label,
  .processing-barcode-panel small {
    grid-column: 1 / -1;
  }
}

.processing-kiosk-body {
  display: grid;
  min-height: 0;
  padding: 30px;
}

.processing-start-stage {
  display: grid;
  align-items: stretch;
  min-height: 520px;
  border: 1px solid #e0eadc;
  border-radius: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.66);
}

.processing-start-stage.is-config {
  --processing-color: #ffffff;
  --processing-text-color: #111827;
  border-color: color-mix(in srgb, var(--processing-color) 70%, #ffffff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--processing-color) 84%, #ffffff) 0%, color-mix(in srgb, var(--processing-color) 62%, #ffffff) 100%);
}

.processing-start-layout {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(118px, auto);
  gap: 16px;
  width: min(100%, 760px);
  margin: 0 auto;
}

.processing-start-title {
  border-bottom-color: rgba(255, 255, 255, 0.58);
}

.processing-start-title strong,
.processing-start-title span {
  color: var(--processing-text-color);
}

.processing-start-block,
.processing-start-color-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08);
}

.processing-start-block > strong,
.processing-start-color-card span {
  color: #1f2937;
  font-size: 17px;
  font-weight: 950;
}

.processing-line-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.processing-line-choice-grid button,
.processing-round-choice-grid button {
  min-height: 62px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 22px;
  font-weight: 950;
  cursor: pointer;
}

.processing-line-choice-grid button.is-active,
.processing-round-choice-grid button.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
  box-shadow: inset 0 0 0 2px var(--status-active-bg-strong), 0 8px 16px rgba(23, 77, 134, 0.14);
}

.processing-round-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.processing-round-choice-grid button {
  display: grid;
  grid-template-columns: 46px auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.processing-round-choice-grid i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-style: normal;
  font-size: 18px;
  font-weight: 950;
}

.processing-round-choice-grid span {
  font-size: 24px;
}

.processing-start-color-card {
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  min-height: 72px;
  border-color: color-mix(in srgb, var(--processing-color) 72%, #ffffff);
}

.processing-start-color-card::before {
  content: "";
  width: 46px;
  height: 46px;
  border: 2px solid rgba(17, 24, 39, 0.24);
  border-radius: 999px;
  background: var(--processing-color);
}

.processing-start-color-card strong {
  color: #111827;
  font-size: 22px;
  font-weight: 950;
}

.processing-start-color-card em {
  color: #374151;
  font-style: normal;
  font-weight: 950;
}

.processing-start-button {
  width: 100%;
  min-height: 118px;
  border: 1px solid #d8e2d5;
  border-radius: 14px;
  background: #ffffff;
  color: #050505;
  font-size: 46px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(38, 67, 39, 0.08);
}

.processing-start-button:disabled {
  color: var(--status-disabled-ink);
  cursor: default;
  opacity: 0.86;
}

.processing-line-settings-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.08);
}

.processing-line-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-line-settings-head strong {
  display: block;
  color: #172015;
  font-size: 22px;
  font-weight: 950;
}

.processing-line-settings-head span {
  display: block;
  margin-top: 3px;
  color: #5b6675;
  font-size: 13px;
  font-weight: 900;
}

.processing-line-settings-head > div:last-child {
  display: flex;
  gap: 6px;
}

.processing-line-settings-head button,
.processing-line-setting-actions button {
  min-height: 34px;
  border: 1px solid #b8c2cf;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #273142;
  font-weight: 950;
  cursor: pointer;
}

.processing-line-settings-head button:first-child {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-line-settings-grid {
  display: grid;
  gap: 6px;
}

.processing-line-setting-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) 96px auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--status-default-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--status-default-bg);
}

.processing-line-setting-row.is-hidden {
  border-color: var(--status-disabled-border);
  background: var(--status-disabled-bg);
  opacity: 0.72;
}

.processing-line-setting-row > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
  font-weight: 950;
}

.processing-line-setting-row label {
  display: grid;
  gap: 4px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 950;
}

.processing-line-setting-row input[type="text"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #b8c2cf;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.processing-line-setting-visible {
  align-items: center;
  justify-items: center;
}

.processing-line-setting-visible input {
  width: 18px;
  height: 18px;
}

.processing-line-setting-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.processing-line-setting-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.processing-choice-stage {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 520px;
}

.processing-stage-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #dce6d8;
  padding-bottom: 14px;
}

.processing-stage-title strong {
  color: #172015;
  font-size: 28px;
  font-weight: 950;
}

.processing-stage-title span {
  color: #5b6656;
  font-weight: 900;
}

.processing-stage-grid {
  display: grid;
  gap: 16px;
}

.processing-stage-grid.is-round {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.processing-stage-grid.is-group {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.processing-stage-grid button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 170px;
  border: 1px solid #d8e2d5;
  border-radius: 14px;
  background: #ffffff;
  color: #050505;
  font-size: 38px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(38, 67, 39, 0.06);
}

.processing-stage-grid button span {
  color: #647166;
  font-size: 16px;
  font-weight: 900;
}

.processing-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.processing-product-head strong {
  display: block;
  color: #172015;
  font-size: 26px;
  font-weight: 950;
}

.processing-product-head span {
  display: block;
  margin-top: 3px;
  color: #5d6872;
  font-size: 13px;
  font-weight: 900;
}

.processing-product-head button {
  border-color: #c8d3c4;
  background: #ffffff;
  color: #23311f;
}

.processing-touch-toolbar {
  display: grid;
  gap: 10px;
  border: 1px solid #cfd5dd;
  padding: 12px;
  background: #ffffff;
}

.processing-touch-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-touch-title strong {
  color: #211658;
  font-size: 20px;
  font-weight: 950;
}

.processing-touch-title span {
  color: #596273;
  font-size: 13px;
  font-weight: 850;
}

.processing-touch-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.processing-touch-actions button {
  min-height: 34px;
  border: 1px solid #b9c2cd;
  border-radius: 5px;
  padding: 0 12px;
  background: #ffffff;
  color: #273142;
  font-weight: 900;
  cursor: pointer;
}

.processing-touch-filters {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(190px, 1fr) minmax(180px, 0.9fr);
  gap: 8px;
}

.processing-touch-filters label,
.processing-card-inputs label {
  display: grid;
  gap: 5px;
  color: #303846;
  font-weight: 900;
}

.processing-touch-filters span,
.processing-card-inputs span {
  font-size: 13px;
}

.processing-touch-filters input,
.processing-touch-filters select,
.processing-card-inputs input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #b9c2cd;
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: #171b20;
  font-size: 18px;
  font-weight: 900;
}

.processing-round-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

.processing-round-toggle button {
  min-height: 58px;
  border: 1px solid #b9c2cd;
  border-radius: 6px;
  background: #f6f8fa;
  color: #273142;
  font-size: 22px;
  font-weight: 950;
  cursor: pointer;
}

.processing-round-toggle button.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-group-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.processing-group-toggle button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  border: 1px solid #b9c2cd;
  border-radius: 6px;
  background: #ffffff;
  color: #273142;
  cursor: pointer;
}

.processing-group-toggle button strong {
  font-size: 24px;
  font-weight: 950;
}

.processing-group-toggle button span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.processing-group-toggle button.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-group-toggle button.is-active span {
  color: var(--status-active-ink);
}

.processing-touch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.processing-touch-summary span {
  min-height: 46px;
  border: 1px solid #d5dbe2;
  border-radius: 6px;
  padding: 8px;
  background: #fbfcfe;
  color: #5a6573;
  font-weight: 850;
  text-align: center;
}

.processing-touch-summary b {
  display: block;
  color: #1f2732;
  font-size: 18px;
  font-weight: 950;
}

.processing-card-area {
  display: grid;
  gap: 14px;
}

.processing-group-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px dashed #bfc7d2;
  border-radius: 8px;
  background: #ffffff;
  color: #4d5968;
  font-size: 22px;
  font-weight: 950;
}

.processing-product-group {
  display: grid;
  gap: 8px;
}

.processing-product-group h3 {
  margin: 0;
  color: #211658;
  font-size: 18px;
  font-weight: 950;
}

.processing-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.processing-card {
  display: grid;
  grid-template-columns: 34px minmax(260px, 1fr) minmax(420px, 1.45fr);
  grid-template-areas:
    "marker title facts"
    "centers centers centers";
  align-items: center;
  gap: 10px;
  border: 1px solid #d2d9e2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.processing-card:hover,
.processing-card:focus-visible {
  border-color: #7da5d0;
  box-shadow: 0 5px 14px rgba(28, 69, 104, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.processing-card.is-running {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
}

.processing-card.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.processing-list-marker {
  grid-area: marker;
  width: 28px;
  height: 28px;
  border: 2px solid #9fb2a0;
  border-radius: 7px;
  background: #ffffff;
}

.processing-card.is-ready .processing-list-marker {
  background: var(--status-disabled-bg);
}

.processing-card.is-running .processing-list-marker {
  border-color: var(--status-active-border);
  background: var(--status-active-bg-strong);
}

.processing-card.is-done .processing-list-marker {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg-strong);
}

.processing-card header {
  grid-area: title;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.processing-card header strong {
  display: block;
  color: #1f2732;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
  word-break: keep-all;
}

.processing-card header span {
  display: block;
  margin-top: 3px;
  color: #6a7380;
  font-size: 12px;
  font-weight: 800;
}

.processing-card header em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #edf1f5;
  color: #394454;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.processing-card.is-running header em {
  background: var(--status-active-bg-strong);
  color: var(--status-active-ink);
}

.processing-card.is-done header em {
  background: var(--status-ok-bg-strong);
  color: var(--status-ok-ink);
}

.processing-card-facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 5px;
}

.processing-card-facts span {
  border: 1px solid #d9dee6;
  border-radius: 6px;
  padding: 7px;
  background: #f8fafc;
  color: #5a6573;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.processing-card-facts b {
  display: block;
  margin-top: 2px;
  color: #1f2732;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.processing-center-strip {
  grid-area: centers;
  display: flex;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  border: 1px solid #d5dbe2;
  border-radius: 7px;
  padding: 3px;
  background: #f7fafc;
  overflow: hidden;
}

.processing-detail-panel .processing-center-strip {
  grid-area: auto;
}

.processing-center-segment {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  flex: var(--weight, 1) 1 0;
  min-width: 54px;
  min-height: 34px;
  border: 1px solid #ccd4dd;
  border-radius: 5px;
  background: #ffffff;
  color: #344052;
  overflow: hidden;
  isolation: isolate;
}

.processing-center-segment i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: #dbe4ee;
  z-index: -1;
  transition: width 0.25s ease;
}

.processing-center-segment b {
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.processing-center-segment small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.processing-center-segment.is-done {
  border-color: var(--status-ok-border);
  color: var(--status-ok-ink);
}

.processing-center-segment.is-done i {
  background: var(--status-ok-bg-strong);
}

.processing-center-segment.is-partial {
  border-color: var(--status-warning-border);
  color: var(--status-warning-ink);
}

.processing-center-segment.is-partial i {
  background: var(--status-warning-bg-strong);
}

.processing-center-segment.is-pending i {
  background: var(--status-disabled-bg);
}

.processing-card-inputs {
  grid-area: inputs;
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(100px, 0.7fr) minmax(160px, 1fr);
  gap: 6px;
}

.processing-card-times {
  grid-area: times;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.processing-card-times span {
  border: 1px solid #d8dee6;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 13px;
  font-weight: 850;
}

.processing-card-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.processing-card-actions button {
  min-height: 44px;
  border: 1px solid #b8c0ca;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2732;
  font-size: 17px;
  font-weight: 950;
  cursor: pointer;
}

.processing-card-actions button:first-child {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-card-actions button:last-child {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.processing-detail-panel {
  display: grid;
  gap: 16px;
  border: 1px solid #d2d9e2;
  border-radius: 14px;
  padding: 22px;
  background: #ffffff;
}

.processing-detail-panel.is-running {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
}

.processing-detail-panel.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.processing-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-detail-head button {
  min-height: 42px;
  border: 1px solid #c4cbd4;
  border-radius: 6px;
  padding: 0 16px;
  background: #ffffff;
  color: #253043;
  font-weight: 950;
  cursor: pointer;
}

.processing-detail-head span {
  border-radius: 999px;
  padding: 8px 14px;
  background: #edf1f5;
  color: #394454;
  font-size: 14px;
  font-weight: 950;
}

.processing-detail-title strong {
  display: block;
  color: #121820;
  font-size: 34px;
  font-weight: 950;
  line-height: 1.2;
}

.processing-detail-title span {
  display: block;
  margin-top: 6px;
  color: #657080;
  font-size: 15px;
  font-weight: 850;
}

.processing-process-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.processing-process-tabs button {
  min-height: 58px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 8px 12px;
  background: #ffffff;
  color: #263240;
  text-align: left;
  cursor: pointer;
}

.processing-process-tabs button.is-active {
  border-color: var(--status-active-border);
  box-shadow: inset 0 0 0 2px var(--status-active-bg-strong);
}

.processing-process-tabs button.is-running {
  background: var(--status-active-bg);
}

.processing-process-tabs button.is-done {
  background: var(--status-ok-bg);
}

.processing-process-tabs strong,
.processing-process-tabs span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-process-tabs strong {
  font-size: 17px;
  font-weight: 950;
}

.processing-process-tabs span {
  margin-top: 3px;
  color: #5f6b7a;
  font-size: 12px;
  font-weight: 900;
}

.processing-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.processing-detail-metrics span,
.processing-detail-times > span,
.processing-detail-worker {
  border: 1px solid #d8dee6;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: #5a6573;
  font-weight: 900;
}

.processing-detail-metrics b,
.processing-detail-times > span b {
  display: block;
  margin-top: 4px;
  color: #172015;
  font-size: 22px;
  font-weight: 950;
}

.processing-detail-worker {
  display: grid;
  gap: 6px;
}

.processing-detail-worker small {
  color: #5a6573;
  font-size: 14px;
  font-weight: 900;
}

.processing-detail-worker input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #172015;
  font-size: 22px;
  font-weight: 950;
}

.processing-detail-worker input:disabled {
  background: #eef2f6;
  color: #5f6b7a;
}

.processing-detail-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.processing-detail-start {
  min-height: 92px;
  border: 1px solid var(--status-ok-border);
  border-radius: 10px;
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
  font-size: 30px;
  font-weight: 950;
  cursor: pointer;
}

.processing-end-dialog {
  display: grid;
  gap: 14px;
  border: 2px solid var(--status-active-border);
  border-radius: 12px;
  padding: 18px;
  background: var(--status-active-bg);
  box-shadow: 0 12px 24px rgba(25, 74, 119, 0.12);
}

.processing-end-dialog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.processing-end-dialog-head strong {
  color: var(--status-active-ink);
  font-size: 26px;
  font-weight: 950;
}

.processing-end-dialog-head span {
  color: #536171;
  font-size: 14px;
  font-weight: 850;
}

.processing-end-current {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.processing-end-current span {
  min-height: 54px;
  border: 1px solid #d2deea;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  color: #5b6675;
  font-size: 13px;
  font-weight: 900;
}

.processing-end-current b {
  display: block;
  margin-top: 3px;
  color: #111820;
  font-size: 22px;
  font-weight: 950;
}

.processing-end-dialog label {
  display: grid;
  gap: 6px;
  color: #253043;
  font-size: 15px;
  font-weight: 950;
}

.processing-end-dialog input {
  width: 100%;
  min-height: 70px;
  border: 1px solid #aab8c8;
  border-radius: 8px;
  padding: 0 16px;
  background: #ffffff;
  color: #111820;
  font-size: 34px;
  font-weight: 950;
}

.processing-end-dialog-actions {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(180px, 1fr);
  gap: 8px;
}

.processing-end-dialog-actions button {
  min-height: 58px;
  border: 1px solid #b8c0ca;
  border-radius: 8px;
  background: #ffffff;
  color: #273142;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.processing-end-dialog-actions button:last-child {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-work-history {
  display: grid;
  gap: 10px;
  border: 1px solid #d6dfeb;
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
}

.processing-work-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-work-history-head strong {
  color: #172015;
  font-size: 24px;
  font-weight: 950;
}

.processing-work-history-head span {
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef3f8;
  color: #394454;
  font-weight: 950;
}

.processing-work-history-list {
  display: grid;
  gap: 8px;
}

.processing-work-history-row {
  display: grid;
  grid-template-columns: 42px minmax(220px, 1fr) repeat(4, minmax(82px, 0.35fr)) minmax(48px, auto) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.processing-work-history-row.is-editing {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
}

.processing-work-history-row > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
  font-weight: 950;
}

.processing-work-history-row div {
  display: grid;
  gap: 2px;
}

.processing-work-history-row strong {
  color: #111820;
  font-size: 18px;
  font-weight: 950;
}

.processing-work-history-row span,
.processing-work-history-row small,
.processing-work-history-row em {
  color: #5b6675;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.processing-work-history-edit-button {
  height: 32px;
  border: 1px solid #b8c3cf;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: #26394f;
  font-weight: 900;
  cursor: pointer;
}

.processing-work-history-edit {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  border-top: 1px dashed #c8d2df;
  padding-top: 8px;
}

.processing-work-history-edit label {
  display: grid;
  gap: 4px;
  color: #26394f;
  font-weight: 900;
}

.processing-work-history-edit input {
  height: 34px;
  border: 1px solid #b9c0c8;
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-weight: 900;
}

.processing-work-history-edit button {
  height: 34px;
  border: 1px solid #b8c3cf;
  border-radius: 6px;
  padding: 0 14px;
  background: #fff;
  font-weight: 900;
}

.processing-work-history-edit button:first-of-type {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

.processing-work-history-empty {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px dashed #c8d2df;
  border-radius: 8px;
  background: #fbfcfe;
  color: #5b6675;
  font-weight: 950;
}

.outbound-center-settings-grid input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c4ccd6;
  border-radius: 4px;
  padding: 0 8px;
  background: #ffffff;
  color: #18202b;
  font-size: 13px;
  font-weight: 800;
}

.outbound-center-settings-grid input:focus {
  border-color: #7567aa;
  box-shadow: 0 0 0 2px rgba(117, 103, 170, 0.16);
  outline: none;
}

.outbound-center-settings-grid {
  min-width: 920px;
}

.outbound-center-settings-grid td {
  height: 48px;
}

.outbound-center-alert {
  display: grid;
  gap: 4px;
  border: 1px solid var(--status-warning-border);
  border-left-width: 4px;
  padding: 10px 14px;
  background: var(--status-warning-bg);
  color: var(--status-warning-ink);
  font-weight: 900;
}

.outbound-center-alert span {
  color: var(--status-warning-ink);
  font-size: 13px;
}

.outbound-center-settings-grid tr.is-dragging {
  opacity: 0.48;
}

.outbound-center-settings-grid [data-outbound-center-row] {
  cursor: pointer;
}

.outbound-center-settings-grid [data-outbound-center-row]:active {
  cursor: pointer;
}

.outbound-center-name-cell {
  padding: 7px 10px;
}

.outbound-center-name-cell strong {
  display: block;
  color: #121923;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.outbound-center-name-cell span {
  display: block;
  margin-top: 3px;
  color: #607084;
  font-size: 12px;
  font-weight: 850;
}

.outbound-center-settings-grid tr.is-moving-source {
  outline: 2px solid var(--status-active-outline);
  outline-offset: -2px;
  background: var(--status-active-bg);
}

.outbound-center-settings-grid tr.is-drop-target td {
  border-top: 2px solid var(--status-active-outline);
}

.outbound-center-settings-grid tr.is-drop-target.is-drop-after td {
  border-top: 1px solid #d7dbe2;
  border-bottom: 2px solid var(--status-active-outline);
}

.outbound-center-settings-grid tbody.is-drop-target,
.outbound-center-disabled-drop-box.is-drop-target {
  outline: 2px solid var(--status-active-outline);
  outline-offset: -2px;
}

.outbound-center-settings-grid tr.is-disabled {
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
}

.outbound-center-settings-grid tr.has-order-warning {
  background: var(--status-warning-bg);
}

.outbound-center-zone-row td {
  background: #eef3f8;
  color: #1d3148;
  font-weight: 950;
  text-align: left;
}

.outbound-center-zone-row.is-disabled-zone td {
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
}

.outbound-center-empty-row td {
  height: 46px;
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
  font-weight: 850;
  text-align: center;
}

.outbound-center-drag-cell {
  text-align: center;
  width: 78px;
}

.outbound-center-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 30px;
  border: 1px solid #c8d0da;
  border-radius: 4px;
  background: #f8fafc;
  color: #536171;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.outbound-center-drag-handle:active {
  cursor: grabbing;
}

.outbound-center-drag-handle.is-active {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

body.is-outbound-center-dragging,
body.is-outbound-center-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.outbound-center-disabled-drop-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border: 1px dashed var(--status-disabled-border);
  border-radius: 6px;
  margin-top: 8px;
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
  font-size: 13px;
  font-weight: 950;
}

.outbound-center-active-cell label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}

.outbound-center-active-cell input {
  width: auto;
  min-height: 0;
}

.outbound-center-status-cell {
  text-align: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 26px;
  border: 1px solid var(--status-default-border);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--status-default-bg);
  color: var(--status-default-ink);
  font-size: 12px;
  font-weight: 950;
}

.status-pill--done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
  color: var(--status-ok-ink);
}

.status-pill--disabled {
  border-color: var(--status-disabled-border);
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
}

.outbound-center-order-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--status-disabled-bg);
  color: var(--status-disabled-ink);
  font-size: 12px;
  font-weight: 950;
}

.outbound-center-order-badge.is-warning {
  background: var(--status-warning-bg-strong);
  color: var(--status-warning-ink);
}

.outbound-center-action-cell {
  white-space: nowrap;
  text-align: center;
}

.outbound-center-action-cell button {
  min-width: 38px;
  min-height: 30px;
  border: 1px solid #c8d0da;
  border-radius: 4px;
  margin: 0 2px;
  background: #ffffff;
  color: #253142;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.outbound-center-action-cell button:hover {
  border-color: var(--status-active-border);
  background: var(--status-active-bg);
  color: var(--status-active-ink);
}

body.is-processing-daily-standalone {
  overflow: hidden;
}

body.is-processing-daily-standalone .erp-frame {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  transform: none;
}

body.is-processing-daily-standalone .titlebar,
body.is-processing-daily-standalone .icon-rail,
body.is-processing-daily-standalone .side-menu,
body.is-processing-daily-standalone .tabbar,
body.is-processing-daily-standalone .commandbar {
  display: none;
}

body.is-processing-daily-standalone .main-panel {
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
}

body.is-processing-daily-standalone .content-area {
  padding: calc(10px + var(--native-safe-top)) 10px calc(10px + var(--native-safe-bottom));
  overflow: auto;
}

body.is-processing-daily-standalone .processing-daily-view {
  min-height: calc(100vh - 20px - var(--native-safe-top) - var(--native-safe-bottom));
}

body.processing-daily-fullscreen-mode .content-area {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

body.processing-daily-fullscreen-mode .processing-daily-view {
  display: grid;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #ffffff;
  padding: var(--native-safe-top) 0 var(--native-safe-bottom);
}

body.processing-daily-fullscreen-mode .processing-kiosk-shell {
  width: 100vw;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.processing-daily-fullscreen-mode .processing-kiosk-header {
  min-height: 86px;
  padding: 14px 28px;
}

body.processing-daily-fullscreen-mode .processing-kiosk-body {
  min-height: 0;
  overflow: auto;
  padding: 22px;
}

body.processing-daily-fullscreen-mode .processing-start-stage,
body.processing-daily-fullscreen-mode .processing-choice-stage {
  min-height: calc(100vh - 130px - var(--native-safe-top) - var(--native-safe-bottom));
}

@media (max-width: 760px) {
  .processing-kiosk-shell {
    min-height: calc(100vh - 20px);
    border-radius: 14px;
  }

  .processing-kiosk-header {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
  }

  .processing-kiosk-nav h1 {
    font-size: 30px;
  }

  .processing-kiosk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .processing-kiosk-actions button,
  .processing-kiosk-date,
  .processing-kiosk-center {
    flex: 1 1 120px;
  }

  .processing-kiosk-body {
    padding: 16px;
  }

  .processing-start-stage,
  .processing-choice-stage {
    min-height: 420px;
  }

  .processing-start-button {
    min-height: 96px;
    font-size: 34px;
  }

  .processing-line-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-round-choice-grid,
  .processing-start-color-card {
    grid-template-columns: 1fr;
  }

  .processing-start-color-card::before {
    width: 54px;
    height: 54px;
  }

  .processing-stage-grid.is-round,
  .processing-stage-grid.is-group {
    grid-template-columns: 1fr;
  }

  .processing-stage-grid button {
    min-height: 128px;
    font-size: 30px;
  }

  .processing-line-settings-head {
    align-items: stretch;
    flex-direction: column;
  }

  .processing-line-setting-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .processing-line-setting-visible,
  .processing-line-setting-actions {
    grid-column: 2;
    justify-content: flex-start;
    justify-items: start;
  }

  .processing-touch-summary,
  .processing-card-facts,
  .processing-card-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-card {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      "marker title"
      "facts facts"
      "centers centers";
  }

  .processing-center-segment {
    min-width: 46px;
  }

  .processing-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-detail-times,
  .processing-end-dialog-actions,
  .processing-end-current {
    grid-template-columns: 1fr;
  }

  .processing-work-history-row {
    grid-template-columns: 36px minmax(0, 1fr) minmax(92px, 0.5fr);
  }

  .processing-work-history-row em {
    grid-column: 2 / -1;
  }

  .processing-work-history-edit-button {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .processing-work-history-edit {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .processing-detail-title strong {
    font-size: 26px;
  }

  .processing-detail-start {
    min-height: 76px;
    font-size: 24px;
  }
}

.mobile-production-card label {
  display: grid;
  gap: 5px;
  color: #3b424b;
  font-weight: 900;
}

.mobile-production-card input,
.mobile-production-card select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #b9c1ca;
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: #171b20;
  font-size: 18px;
  font-weight: 900;
}

.mobile-production-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 1360px) {
  .erp-frame {
    grid-template-columns: 72px 330px minmax(0, 1fr);
  }

  .erp-frame.is-menu-collapsed {
    grid-template-columns: 72px 0 minmax(0, 1fr);
  }

  .query-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .room-board {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

}

@media (max-width: 700px) {
  .erp-frame {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr);
    position: relative;
  }

  .erp-frame.is-menu-collapsed {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .titlebar {
    grid-column: 1 / 3;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 0 6px;
  }

  .titlebar-brand {
    gap: 7px;
  }

  .window-dot {
    width: 28px;
    height: 28px;
  }

  .brand {
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titlebar-search {
    display: none;
  }

  .quick-search-backdrop {
    inset: 42px 0 0;
    align-items: start;
    padding: 18px 10px;
  }

  .quick-search-panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    border-radius: 10px;
  }

  .mobile-production-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mobile-production-summary,
  .mobile-production-facts,
  .mobile-production-times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .titlebar-account {
    grid-column: auto;
    display: flex;
    gap: 4px;
    justify-content: end;
    width: auto;
    min-width: 0;
  }

  .titlebar-user-menu {
    display: none;
  }

  .titlebar-account span {
    display: none;
  }

  .titlebar-logout,
  .titlebar-mobile {
    height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .icon-rail {
    grid-column: 1;
  }

  .rail-button {
    min-height: 72px;
    font-size: 11px;
  }

  .rail-icon {
    font-size: 24px;
  }

  .side-menu {
    position: fixed;
    z-index: 30;
    top: 42px;
    left: 58px;
    display: flex;
    width: min(310px, calc(100vw - 58px));
    height: calc(100vh - 42px);
    box-shadow: 8px 0 18px rgba(32, 36, 42, 0.18);
  }

  .erp-frame.is-menu-collapsed .side-menu {
    display: none;
  }

  .main-panel {
    grid-column: 2;
    grid-row: 2;
  }

  .commandbar {
    gap: 2px;
    padding: 8px 4px;
    overflow-x: auto;
  }

  .drag-grip,
  .saved-at {
    display: none;
  }

  .command-button {
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  .query-grid {
    grid-template-columns: 1fr;
  }

  .query-field {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .mobile-expiry-view {
    padding: 8px;
  }

  .mobile-expiry-header {
    align-items: stretch;
    flex-direction: column;
  }

  .mobile-expiry-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-expiry-toolbar {
    grid-template-columns: 1fr;
  }

  .mobile-expiry-toolbar button {
    width: 100%;
  }

  .mobile-barcode-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-barcode-summary {
    display: grid;
  }

  .mobile-barcode-summary span {
    text-align: left;
  }

  .mobile-expiry-meta {
    grid-template-columns: 1fr;
  }

  .mobile-expiry-grid-wrap {
    max-height: none;
  }

  .mobile-expiry-grid {
    min-width: 883px;
  }
}

@media (max-width: 900px) {
  body:not(.is-mobile-expiry) {
    overflow: hidden;
  }

  body:not(.is-mobile-expiry) .erp-frame {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr);
    position: relative;
  }

  body:not(.is-mobile-expiry) .erp-frame.is-menu-collapsed {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  body:not(.is-mobile-expiry) .titlebar {
    grid-column: 1 / 3;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 0 6px;
  }

  body:not(.is-mobile-expiry) .titlebar-brand {
    min-width: 0;
  }

  body:not(.is-mobile-expiry) .brand {
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.is-mobile-expiry) .titlebar-search {
    display: none;
  }

  body:not(.is-mobile-expiry) .titlebar-account {
    grid-column: auto;
    display: flex;
    gap: 4px;
    justify-content: end;
    width: auto;
    min-width: 0;
  }

  body:not(.is-mobile-expiry) .titlebar-user-menu {
    display: none;
  }

  body:not(.is-mobile-expiry) .titlebar-account span {
    display: none;
  }

  body:not(.is-mobile-expiry) .icon-rail {
    grid-column: 1;
    grid-row: 2;
    min-width: 58px;
  }

  body:not(.is-mobile-expiry) .rail-button {
    min-height: 72px;
    font-size: 11px;
  }

  body:not(.is-mobile-expiry) .rail-icon {
    font-size: 24px;
  }

  body:not(.is-mobile-expiry) .rail-pinned-list {
    gap: 5px;
    min-height: 64px;
    padding: 6px 5px;
  }

  body:not(.is-mobile-expiry) .rail-pin-open {
    min-height: 50px;
    border-radius: 8px;
    padding: 5px 3px;
  }

  body:not(.is-mobile-expiry) .rail-pin-icon {
    width: 28px;
    min-height: 20px;
    font-size: 12px;
  }

  body:not(.is-mobile-expiry) .rail-pin-label {
    max-width: 46px;
    font-size: 9px;
  }

  body:not(.is-mobile-expiry) .rail-pin-remove {
    width: 17px;
    height: 17px;
    font-size: 11px;
  }

  body:not(.is-mobile-expiry) .side-menu {
    position: absolute;
    z-index: 1200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: auto;
    max-width: none;
    height: auto;
    min-width: 0;
    background: #ffffff;
    border-right: 0;
    box-shadow: none;
  }

  body:not(.is-mobile-expiry) .favorite-head {
    min-height: 42px;
    padding: 0 14px;
  }

  body:not(.is-mobile-expiry) .menu-list {
    padding: 6px 8px 20px;
  }

  body:not(.is-mobile-expiry) .menu-item {
    min-height: 42px;
    padding: 0 14px;
    font-size: 14px;
  }

  body:not(.is-mobile-expiry) .erp-frame.is-menu-collapsed .side-menu {
    display: none;
  }

  body:not(.is-mobile-expiry) .erp-frame:not(.is-menu-collapsed) .main-panel {
    visibility: hidden;
    pointer-events: none;
  }

  body:not(.is-mobile-expiry) .main-panel {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
  }

  body:not(.is-mobile-expiry) .tabbar {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.is-mobile-expiry) .commandbar {
    gap: 4px;
    min-width: 0;
    padding: 8px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.is-mobile-expiry) .content-area {
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.is-mobile-expiry) .view,
  body:not(.is-mobile-expiry) .query-panel,
  body:not(.is-mobile-expiry) .grid-panel {
    min-width: 0;
  }

  body:not(.is-mobile-expiry) .query-grid {
    grid-template-columns: minmax(260px, 1fr);
  }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body:not(.is-mobile-expiry) .content-area {
    padding: 8px;
  }

  body:not(.is-mobile-expiry) .view,
  body:not(.is-mobile-expiry) .query-panel,
  body:not(.is-mobile-expiry) .grid-panel,
  body:not(.is-mobile-expiry) .grid-wrap,
  body:not(.is-mobile-expiry) .grid-head,
  body:not(.is-mobile-expiry) .query-grid,
  body:not(.is-mobile-expiry) .query-field,
  body:not(.is-mobile-expiry) .split-view,
  body:not(.is-mobile-expiry) .subgrid-stack,
  body:not(.is-mobile-expiry) .receipt-manual-print-panel,
  body:not(.is-mobile-expiry) .settings-grid-wrap {
    min-width: 0;
    max-width: 100%;
  }

  body:not(.is-mobile-expiry) .split-view,
  body:not(.is-mobile-expiry) .sales-dashboard-query-grid,
  body:not(.is-mobile-expiry) .production-estimate-query-grid,
  body:not(.is-mobile-expiry) .material-form-grid,
  body:not(.is-mobile-expiry) .receipt-manual-print-grid,
  body:not(.is-mobile-expiry) .outbound-barcode-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.is-mobile-expiry) .waste-touch-panel {
    grid-template-columns: minmax(0, 1fr) minmax(260px, min(38vw, 380px));
    min-width: 0;
    max-width: 100%;
  }

  body.waste-calculator-fullscreen-mode .waste-touch-panel,
  .waste-calculator-view:fullscreen .waste-touch-panel {
    grid-template-columns: minmax(0, 1fr) minmax(calc(300px * var(--waste-right-panel-size)), calc(500px * var(--waste-right-panel-size)));
  }

  body:not(.is-mobile-expiry) .query-grid {
    gap: 8px;
    padding: 10px;
  }

  body:not(.is-mobile-expiry) .query-field {
    grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
    gap: 6px;
  }

  body:not(.is-mobile-expiry) .query-field label,
  body:not(.is-mobile-expiry) .query-field > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.is-mobile-expiry) .query-field input,
  body:not(.is-mobile-expiry) .query-field select,
  body:not(.is-mobile-expiry) .query-field button,
  body:not(.is-mobile-expiry) .print-device-select,
  body:not(.is-mobile-expiry) .print-device-select select {
    min-width: 0;
    max-width: 100%;
  }

  body:not(.is-mobile-expiry) .grid-panel {
    min-height: 260px;
  }

  body:not(.is-mobile-expiry) .grid-head {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 8px;
  }

  body:not(.is-mobile-expiry) .grid-title {
    flex: 1 1 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.is-mobile-expiry) .grid-actions,
  body:not(.is-mobile-expiry) .receipt-grid-actions,
  body:not(.is-mobile-expiry) .desktop-printer-actions,
  body:not(.is-mobile-expiry) .material-form-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
  }

  body:not(.is-mobile-expiry) .grid-wrap {
    overflow: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.is-mobile-expiry) .erp-grid,
  body:not(.is-mobile-expiry) .grid-split-header-table {
    max-width: none;
  }

  body:not(.is-mobile-expiry) .command-button,
  body:not(.is-mobile-expiry) .tab-button,
  body:not(.is-mobile-expiry) .grid-head-button,
  body:not(.is-mobile-expiry) .grid-action-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body:not(.is-mobile-expiry) .waste-window-guide {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.is-mobile-expiry) .waste-window-guide__title {
    white-space: normal;
  }

  body:not(.is-mobile-expiry) .waste-window-guide__rows {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media print {
  :root {
    --app-scale: 1 !important;
    --app-frame-width: auto !important;
    --app-frame-height: auto !important;
  }

  @page {
    size: 47.5mm 65mm;
    margin: 0;
  }

  @page receiptLabel {
    size: 47.5mm 65mm;
    margin: 0;
  }

  @page outboundLabel {
    size: 90mm 110mm;
    margin: 0;
  }

  html,
  body {
    background: #ffffff;
    width: auto !important;
    height: auto !important;
    overflow: visible;
    transform: none !important;
    zoom: 1 !important;
  }

  body > *:not(.print-root) {
    display: none !important;
    visibility: hidden !important;
  }

  .erp-frame,
  .context-menu,
  .screen-scale-floating,
  .settings-backdrop,
  .quick-search-backdrop,
  .alert-backdrop,
  .toast {
    display: none !important;
    visibility: hidden !important;
  }

  .print-root {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .print-root * {
    visibility: visible;
  }

  .print-page {
    width: 47.5mm;
    height: 65mm;
    margin: 0;
    padding: 2.5mm;
    color: #000000;
    font-family: "Malgun Gothic", sans-serif;
    page-break-after: always;
  }

  .print-page:last-child {
    page-break-after: auto;
  }

  .receipt-print-page {
    page: receiptLabel;
    width: var(--receipt-paper-width, 47.5mm);
    height: var(--receipt-paper-height, 65mm);
    padding: var(--receipt-page-padding, 2.5mm);
  }

  .print-title {
    margin: 0 0 var(--receipt-title-margin-bottom, 2mm);
    font-size: var(--receipt-title-font, 10pt);
    font-weight: var(--receipt-title-weight, 900);
    line-height: 1.15;
    text-align: center;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--receipt-table-font, 7.5pt);
    font-weight: var(--receipt-table-weight, 400);
  }

  .print-label-col {
    width: var(--receipt-label-col, 16mm);
  }

  .print-value-col {
    width: auto;
  }

  .print-table th,
  .print-table td {
    height: var(--receipt-row-height, 9.5mm);
    border: 1px solid #000000;
    padding: var(--receipt-cell-padding, 1mm);
    vertical-align: middle;
  }

  .print-table th {
    background: #eeeeee;
    text-align: center;
    font-size: var(--receipt-label-font, 7.2pt);
    font-weight: var(--receipt-label-weight, 900);
  }

  .print-table td {
    font-size: var(--receipt-value-font, 7.5pt);
    font-weight: var(--receipt-value-weight, 400);
    white-space: nowrap;
  }

  .print-name-row th {
    height: var(--receipt-name-header-height, 6mm);
  }

  .print-name-value-row td {
    height: var(--receipt-name-value-height, 12mm);
    font-size: var(--receipt-name-font, 8.5pt);
    font-weight: var(--receipt-name-weight, 900);
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .print-footer {
    font-weight: var(--receipt-footer-weight, 400);
  }

  .outbound-product-name td {
    font-size: 7.5pt;
  }

  .outbound-range {
    font-size: 13pt;
    font-weight: 900;
    text-align: center;
  }

  .outbound-print-page {
    page: outboundLabel;
    width: var(--outbound-paper-width, 90mm);
    height: var(--outbound-paper-height, 110mm);
    padding: var(--outbound-padding-y, 5mm) var(--outbound-padding-x, 6mm);
    background: var(--outbound-bg, #ffffff) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .outbound-form-table {
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    border-collapse: collapse;
    table-layout: fixed;
    color: #000000;
    background: transparent;
  }

  .outbound-form-table th,
  .outbound-form-table td {
    border: 1px solid #000000;
    padding: var(--outbound-cell-padding, 1.5mm);
    vertical-align: middle;
    background: transparent;
  }

  .outbound-form-table th {
    width: var(--outbound-title-col, 30mm);
    font-size: var(--outbound-title-font, 24pt);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    word-break: keep-all;
  }

  .outbound-form-table td {
    font-size: var(--outbound-value-font, 18pt);
    font-weight: 900;
    text-align: center;
    word-break: keep-all;
  }

  .outbound-form-table tr:not(.outbound-destination-row):not(.outbound-logo-row) {
    height: var(--outbound-value-row-height, 19mm);
  }

  .outbound-destination-row th,
  .outbound-destination-row td {
    color: var(--outbound-center-color, #000000);
  }

  .outbound-destination-row {
    height: var(--outbound-destination-row-height, 22mm);
  }

  .outbound-destination-row td {
    font-size: var(--outbound-center-font, 34pt);
    letter-spacing: 0;
  }

  .outbound-form-product {
    font-size: var(--outbound-product-font, 16pt) !important;
    white-space: normal;
  }

  .outbound-form-total,
  .outbound-form-box {
    font-size: var(--outbound-qty-font, 24pt) !important;
  }

  .outbound-logo-row {
    height: var(--outbound-logo-row-height, 21mm);
  }

  .outbound-logo-row td {
    color: #34b44a;
    font-size: var(--outbound-logo-font, 28pt);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0;
  }

  .outbound-logo-row span {
    font-size: var(--outbound-logo-brand-font, 38pt);
  }

  .print-footer {
    margin-top: 1.5mm;
    font-size: var(--receipt-footer-font, 6pt);
    text-align: right;
  }
}

.mobile-receipt-view .mobile-expiry-header {
  align-items: flex-start;
  flex-direction: row;
}

.mobile-receipt-view .mobile-expiry-header-actions {
  display: flex;
  grid-template-columns: none;
}

.mobile-receipt-view .mobile-expiry-toolbar {
  grid-template-columns: minmax(116px, 0.66fr) minmax(0, 1fr) 38px;
}

.mobile-receipt-view .mobile-expiry-toolbar label,
.mobile-receipt-view .mobile-expiry-toolbar .print-device-select {
  grid-column: auto;
}

.mobile-receipt-view .mobile-expiry-toolbar button {
  width: 38px;
}

.mobile-barcode-view .mobile-expiry-header {
  align-items: flex-start;
  flex-direction: row;
  min-height: 0;
  padding: 8px 10px;
}

.mobile-barcode-view .mobile-expiry-header h1 {
  font-size: 20px;
}

.mobile-barcode-view .mobile-expiry-header-actions {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  justify-content: flex-end;
  gap: 4px;
}

.mobile-barcode-view .mobile-expiry-header-actions button {
  min-height: 30px;
  border-radius: 4px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-barcode-view .mobile-barcode-toolbar {
  grid-template-columns: minmax(106px, 0.85fr) minmax(0, 1fr) minmax(82px, 0.68fr);
  gap: 6px;
  padding: 8px;
}

.mobile-barcode-view .mobile-barcode-toolbar label {
  grid-column: auto;
}

.mobile-barcode-view .mobile-barcode-toolbar input,
.mobile-barcode-view .mobile-barcode-toolbar select {
  height: 38px;
  font-size: 14px;
}

.mobile-stock-count-view .mobile-expiry-header {
  align-items: flex-start;
  flex-direction: row;
  gap: 8px;
}

.mobile-stock-count-view .mobile-expiry-header > div:first-child {
  min-width: 0;
}

.mobile-stock-count-view .mobile-expiry-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  grid-template-columns: none;
  justify-content: flex-end;
  gap: 4px;
}

.mobile-stock-count-view .mobile-expiry-header-actions button {
  min-width: 0;
  min-height: 30px;
  border-radius: 4px;
  padding: 0 9px;
  font-size: 12px;
  white-space: nowrap;
}

.mobile-stock-count-view .mobile-stock-count-toolbar {
  grid-template-columns: minmax(150px, 0.85fr) minmax(190px, 1.15fr) 42px;
}

.mobile-stock-count-view .mobile-stock-count-toolbar label {
  grid-column: auto;
}

.mobile-stock-count-view .mobile-stock-count-toolbar button {
  width: 42px;
}

.mobile-stock-count-view .mobile-stock-count-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.mobile-stock-count-view .mobile-stock-count-sync,
.mobile-stock-count-view .stock-offline-status {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .mobile-expiry-toolbar,
  .mobile-receipt-view .mobile-expiry-toolbar,
  .mobile-barcode-view .mobile-barcode-toolbar,
  .mobile-production-toolbar {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    align-items: end;
  }

  .mobile-stock-count-view .mobile-stock-count-toolbar {
    grid-template-columns: minmax(150px, 0.85fr) minmax(190px, 1.15fr) 42px;
    align-items: end;
  }

  .mobile-expiry-toolbar > *,
  .mobile-expiry-toolbar label,
  .mobile-expiry-toolbar .print-device-select {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-expiry-toolbar input,
  .mobile-expiry-toolbar select,
  .mobile-expiry-toolbar .print-device-select select {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-expiry-toolbar label > span,
  .mobile-expiry-toolbar .print-device-select > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-receipt-view .mobile-toolbar-icon-button,
  .mobile-stock-count-view .mobile-stock-count-toolbar button {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  body:not(.is-mobile-expiry) .waste-touch-panel,
  body.waste-calculator-fullscreen-mode .waste-touch-panel,
  .waste-calculator-view:fullscreen .waste-touch-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .mobile-stock-count-view .mobile-stock-count-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
  }
}

@media (max-width: 520px) {
  .mobile-receipt-view .mobile-expiry-toolbar,
  .mobile-barcode-view .mobile-barcode-toolbar,
  .mobile-production-toolbar,
  .mobile-stock-count-view .mobile-stock-count-toolbar {
    grid-template-columns: 1fr;
  }

  .mobile-receipt-view .mobile-toolbar-icon-button,
  .mobile-stock-count-view .mobile-stock-count-toolbar button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .mobile-stock-count-view .mobile-expiry-header {
    align-items: stretch;
    flex-direction: column;
  }

  .mobile-stock-count-view .mobile-expiry-header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .mobile-stock-count-view .mobile-stock-count-summary {
    grid-template-columns: 1fr;
  }

  .mobile-stock-count-view .mobile-stock-count-sync {
    justify-content: flex-start;
  }

  .mobile-stock-count-view .stock-offline-status {
    width: 100%;
    justify-content: space-between;
  }
}

.heat-cook-entry-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(340px * var(--heat-cook-panel-size)), calc(420px * var(--heat-cook-panel-size)));
  gap: 12px;
  margin-top: 10px;
}

.heat-cook-view .print-device-select--heat-cook {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.heat-cook-view .print-device-select--heat-cook span {
  text-align: right;
}

.heat-cook-view .print-device-select--heat-cook select {
  width: 100%;
  height: 33px;
}

.heat-cook-printer-button {
  align-self: center;
}

.heat-cook-entry-main,
.heat-cook-entry-side {
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #ffffff;
  padding: 12px;
}

.heat-cook-entry-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
}

@media (min-width: 1360px) {
  .heat-cook-entry-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

.heat-cook-section-title {
  margin-bottom: 10px;
  color: #202b3c;
  font-weight: 800;
}

.heat-cook-semi-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.heat-cook-flat-semi-card {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  border: 1px solid #cfd8e6;
  border-radius: 4px;
  background: #ffffff;
  padding: 10px 12px;
  color: #0f1f36;
  text-align: left;
  cursor: pointer;
}

.heat-cook-flat-semi-card:hover {
  border-color: #7fa2d7;
  background: #f5f9ff;
}

.heat-cook-flat-semi-card.is-selected {
  border-color: #2868b7;
  background: #eaf3ff;
  box-shadow: inset 0 0 0 1px #2868b7;
}

.heat-cook-flat-semi-card strong {
  font-size: 15px;
}

.heat-cook-flat-semi-card span,
.heat-cook-flat-semi-card small {
  color: #5b6778;
  font-size: 12px;
}

.heat-cook-touch-products .waste-touch-list {
  max-height: 190px;
}

.heat-cook-touch-products .heat-cook-product-list {
  max-height: 230px;
}

.heat-cook-touch-products .heat-cook-semi-list {
  max-height: 220px;
}

.heat-cook-touch-products .heat-cook-child-stage-list {
  max-height: 220px;
}

.heat-cook-touch-products .heat-cook-process-list {
  max-height: 180px;
}

.heat-cook-touch-products .waste-target-card {
  min-height: 86px;
}

.heat-cook-touch-products .heat-cook-process-card {
  min-height: 70px;
}

.heat-cook-touch-products .heat-cook-child-card {
  min-height: 74px;
  border-color: #bdd7f8;
  background: #f7fbff;
}

.heat-cook-touch-products .heat-cook-child-card.is-selected {
  border-color: #2f78d6;
  background: #eaf3ff;
}

.heat-cook-child-list {
  display: grid;
  width: 100%;
  gap: 4px;
  margin-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.32);
  padding-top: 6px;
}

.heat-cook-child-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  color: #526071;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.heat-cook-child-item::before {
  content: "└";
  color: #8492a6;
}

.heat-cook-child-item b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heat-cook-child-item em,
.heat-cook-child-item i {
  color: #667085;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.heat-cook-child-level-2 {
  padding-left: 12px;
}

.heat-cook-child-level-3,
.heat-cook-child-level-4 {
  padding-left: 24px;
}

.heat-cook-admin-hint {
  margin: 6px 0 8px;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #f8fafc;
  padding: 8px 10px;
  color: #526071;
  font-size: 12px;
  font-weight: 800;
}

.heat-cook-category-card-wrap,
.heat-cook-semi-card-wrap,
.heat-cook-child-card-wrap {
  position: relative;
  display: grid;
  min-width: 0;
}

.heat-cook-category-card-wrap .heat-cook-category-card,
.heat-cook-semi-card-wrap .heat-cook-semi-card,
.heat-cook-child-card-wrap .heat-cook-child-card {
  width: 100%;
  padding-right: 64px;
}

.heat-cook-category-card-wrap.is-hidden-target .heat-cook-category-card,
.heat-cook-semi-card-wrap.is-hidden-target .heat-cook-semi-card,
.heat-cook-child-card-wrap.is-hidden-target .heat-cook-child-card {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #667085;
  opacity: 0.72;
}

.heat-cook-hide-button {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 48px;
  height: 28px;
  border: 1px solid #b8c1cf;
  border-radius: 4px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.heat-cook-category-card-wrap.is-hidden-target .heat-cook-hide-button,
.heat-cook-semi-card-wrap.is-hidden-target .heat-cook-hide-button,
.heat-cook-child-card-wrap.is-hidden-target .heat-cook-hide-button {
  border-color: #86b99b;
  background: #eef8f1;
  color: #146c3f;
}

.heat-cook-class-control {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #ffffff;
  padding: 6px 8px;
}

.heat-cook-class-control span {
  color: #475467;
  font-size: 12px;
  font-weight: 900;
}

.heat-cook-class-control select {
  width: 100%;
  height: 30px;
  border: 1px solid #b8c1cf;
  border-radius: 4px;
  background: #ffffff;
  color: #101828;
  font-size: 13px;
  font-weight: 800;
}

.heat-cook-view .grid-head-button.is-active {
  border-color: #2868b7;
  background: #eaf3ff;
  color: #174a88;
  font-weight: 900;
}

.heat-cook-selected-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border: 1px solid #d8e5d8;
  border-radius: 6px;
  background: #f7fbf6;
  padding: 10px;
}

.heat-cook-selected-summary span,
.heat-cook-selected-summary small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.heat-cook-selected-summary strong {
  color: #12351f;
  font-size: 18px;
  font-weight: 900;
}

.heat-cook-temp-status,
.heat-cook-temp-max {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 10px;
  border: 1px solid #cfd8e6;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.heat-cook-temp-status span,
.heat-cook-temp-max span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.heat-cook-temp-status strong,
.heat-cook-temp-max strong {
  color: #0f1f36;
  font-size: 20px;
  font-weight: 900;
}

.heat-cook-temp-status em {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 58px;
  border-radius: 999px;
  padding: 7px 10px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.heat-cook-temp-status.is-ok {
  border-color: #9bd7ae;
  background: #edf9f0;
}

.heat-cook-temp-status.is-ok em {
  background: #1f8d49;
  color: #fff;
}

.heat-cook-temp-status.is-wait {
  border-color: #f0cf8a;
  background: #fff8e6;
}

.heat-cook-temp-status.is-wait em {
  background: #a66100;
  color: #fff;
}

.heat-cook-field {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.heat-cook-field input {
  height: 36px;
  border: 1px solid #bfc9d7;
  border-radius: 4px;
  padding: 0 10px;
  font: inherit;
}

.heat-cook-device-temp-input[readonly] {
  background: #f8fafc;
  color: #0f1f36;
  font-weight: 900;
  pointer-events: none;
}

.heat-cook-field input[data-heat-cook-sheet-count] {
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}

.heat-cook-sheet-keypad-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  margin-top: 2px;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px;
}

.heat-cook-sheet-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.heat-cook-sheet-keypad button {
  min-height: 54px;
  border: 1px solid #d6dee8;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.heat-cook-sheet-keypad button.is-active {
  border-color: #1f8d49;
  background: #1f8d49;
  color: #ffffff;
}

.heat-cook-sheet-keypad .is-clear {
  background: #38251d;
  color: #ffffff;
}

.heat-cook-sheet-keypad .is-enter {
  grid-column: span 2;
  min-height: 54px;
  border-color: #5f8c64;
  background: #5f8c64;
  color: #ffffff;
}

.heat-cook-sheet-keypad .is-enter.is-under-temp {
  border-color: #b45309;
  background: #b45309;
  color: #ffffff;
}

@media (max-width: 900px) {
  .heat-cook-entry-panel,
  body.heat-cook-fullscreen-mode .heat-cook-entry-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .heat-cook-entry-main,
  .heat-cook-entry-side,
  .heat-cook-sheet-keypad-panel,
  .heat-cook-sheet-keypad {
    min-width: 0;
    max-width: 100%;
  }

  .heat-cook-entry-side {
    align-content: start;
  }

  .heat-cook-sheet-keypad-panel {
    width: 100%;
    padding: 10px;
  }

  .heat-cook-sheet-keypad {
    gap: 6px;
  }

  .heat-cook-sheet-keypad button,
  body.heat-cook-fullscreen-mode .heat-cook-sheet-keypad button {
    min-width: 0;
    min-height: 46px;
    font-size: 18px;
  }

  .heat-cook-sheet-keypad .is-enter {
    min-height: 46px;
  }
}

.heat-cook-retry-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid #f0cf8a;
  border-radius: 8px;
  background: #fffaf0;
  padding: 12px;
}

.heat-cook-retry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7c3f00;
}

.heat-cook-retry-head strong {
  font-size: 16px;
  font-weight: 950;
}

.heat-cook-retry-head span {
  border-radius: 999px;
  background: #b45309;
  padding: 4px 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.heat-cook-retry-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.heat-cook-retry-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid #efbf72;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px 10px;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
}

.heat-cook-retry-card span {
  color: #7c3f00;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.heat-cook-retry-card strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heat-cook-retry-card em {
  border-radius: 999px;
  background: #fff3d6;
  padding: 4px 8px;
  color: #8a4a00;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.heat-cook-retry-card:hover,
.heat-cook-retry-card:focus-visible {
  border-color: #b45309;
  box-shadow: inset 0 0 0 1px #b45309;
}

.heat-cook-retry-empty {
  border: 1px dashed #efbf72;
  border-radius: 6px;
  padding: 12px;
  color: #7c3f00;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

@media (min-width: 1360px) {
  .heat-cook-sheet-keypad-panel {
    margin-top: 2px;
  }
}

.heat-cook-expiry-preview {
  display: grid;
  gap: 4px;
  margin: 8px 0 12px;
  border: 1px solid #cddced;
  border-radius: 4px;
  background: #f7fbff;
  padding: 10px;
}

.heat-cook-expiry-preview span,
.heat-cook-expiry-preview small {
  color: #667085;
  font-size: 12px;
}

.heat-cook-expiry-preview strong {
  color: #0f1f36;
  font-size: 18px;
}

.heat-cook-empty {
  border: 1px dashed #cfd8e6;
  border-radius: 4px;
  padding: 24px;
  color: #667085;
  text-align: center;
}

.heat-cook-grid .grid-input {
  min-width: 0;
}

.heat-cook-print-page .print-table td,
.heat-cook-print-page .print-table th {
  word-break: keep-all;
}

.heat-cook-print-page .print-name-value-row td {
  font-size: 18px;
  font-weight: 900;
}

body.heat-cook-fullscreen-mode {
  overflow: hidden;
}

body.heat-cook-fullscreen-mode .erp-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  transform: none !important;
  transform-origin: top left;
  z-index: 9999;
}

body.heat-cook-fullscreen-mode .titlebar,
body.heat-cook-fullscreen-mode .icon-rail,
body.heat-cook-fullscreen-mode .side-menu,
body.heat-cook-fullscreen-mode .tabbar,
body.heat-cook-fullscreen-mode .commandbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.heat-cook-fullscreen-mode .main-panel {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

body.heat-cook-fullscreen-mode .content-area {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

body.heat-cook-fullscreen-mode .heat-cook-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  background: #f4f6f8;
  padding: calc(10px + var(--native-safe-top)) 10px calc(10px + var(--native-safe-bottom));
}

body.heat-cook-fullscreen-mode .heat-cook-view > .query-panel {
  display: none !important;
}

.heat-cook-fullscreen-exit {
  display: none;
}

.heat-cook-panel-size-control {
  display: none;
}

body.heat-cook-fullscreen-mode .heat-cook-fullscreen-exit {
  position: fixed;
  bottom: calc(12px + var(--native-safe-bottom));
  left: 12px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 34px;
  border: 1px solid #9aa5b1;
  border-radius: 4px;
  color: #1f2937;
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

body.heat-cook-fullscreen-mode .heat-cook-panel-size-control {
  position: fixed;
  bottom: calc(12px + var(--native-safe-bottom));
  right: 12px;
  z-index: 10020;
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) 48px;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

body.heat-cook-fullscreen-mode .heat-cook-panel-size-control input {
  width: 100%;
}

body.heat-cook-fullscreen-mode .heat-cook-entry-panel {
  grid-template-columns: minmax(0, 1fr) minmax(calc(320px * var(--heat-cook-panel-size)), calc(430px * var(--heat-cook-panel-size)));
  min-height: 0;
  margin-top: 0;
}

body.heat-cook-fullscreen-mode .heat-cook-retry-panel {
  max-height: 18vh;
  margin-top: 0;
  overflow: hidden;
}

body.heat-cook-fullscreen-mode .heat-cook-retry-list {
  max-height: calc(18vh - 48px);
  overflow: auto;
}

body.heat-cook-fullscreen-mode .heat-cook-sheet-keypad button {
  min-height: calc(60px * var(--heat-cook-panel-size));
  font-size: clamp(18px, calc(24px * var(--heat-cook-panel-size)), 30px);
}

body.heat-cook-fullscreen-mode .heat-cook-entry-main,
body.heat-cook-fullscreen-mode .heat-cook-entry-side,
body.heat-cook-fullscreen-mode .heat-cook-view .grid-panel {
  min-height: 0;
  overflow: auto;
}

body.heat-cook-fullscreen-mode .heat-cook-touch-products .waste-touch-list {
  max-height: none;
}

body.heat-cook-fullscreen-mode .heat-cook-touch-products .heat-cook-category-list {
  max-height: 17vh;
}

body.heat-cook-fullscreen-mode .heat-cook-touch-products .heat-cook-product-list {
  max-height: 20vh;
}

body.heat-cook-fullscreen-mode .heat-cook-touch-products .heat-cook-semi-list {
  max-height: none;
}

body.heat-cook-fullscreen-mode .heat-cook-touch-products .heat-cook-child-stage-list {
  max-height: none;
}

body.heat-cook-fullscreen-mode .heat-cook-view .grid-wrap {
  max-height: none;
}

.asset-cell {
  min-width: 190px;
}

.asset-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 3px 4px;
}

.mini-button {
  height: 24px;
  border: 1px solid #b9c5d3;
  background: #f8fafc;
  color: #1f2937;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-button:hover {
  background: #eef6ff;
  border-color: #8ab5e5;
}

.mini-button.danger {
  color: #991b1b;
  background: #fff7f7;
}

.asset-empty {
  color: #7c8794;
  font-size: 12px;
  font-weight: 700;
}
.usage-lot-note-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.usage-lot-note-cell span {
  min-width: 0;
}

.usage-lot-note-cell button {
  flex: 0 0 auto;
  border: 1px solid #f59e0b;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.usage-lot-future-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
}

.usage-lot-future-card {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid #d7dde8;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.26);
  padding: 18px;
}

.usage-lot-future-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.usage-lot-future-head strong {
  display: block;
  font-size: 20px;
  color: #111827;
}

.usage-lot-future-head span,
.usage-lot-future-summary,
.usage-lot-future-empty {
  color: #526171;
  font-weight: 700;
}

.usage-lot-future-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.usage-lot-future-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  text-align: left;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
  background: #f8fafc;
  padding: 12px 14px;
  cursor: pointer;
}

.usage-lot-future-option.is-selected {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: inset 4px 0 0 #f97316;
}

.usage-lot-future-option strong {
  margin-right: 8px;
}

.usage-lot-future-option small {
  grid-column: 1 / -1;
  color: #64748b;
  font-weight: 700;
}

.usage-lot-future-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-temperature-view {
  container-name: warehouse-temperature;
  container-type: inline-size;
  gap: 16px;
}

.warehouse-temperature-query-grid {
  grid-template-columns: minmax(180px, 260px) minmax(120px, 160px);
}

.warehouse-temperature-history-query {
  grid-template-columns: minmax(160px, 220px) repeat(2, minmax(150px, 190px)) minmax(180px, 260px) minmax(100px, 130px);
}

.warehouse-temperature-settings-query {
  grid-template-columns: minmax(180px, 260px) repeat(2, minmax(100px, 130px));
}

.warehouse-temperature-query-action button {
  min-height: 38px;
  width: 100%;
}

.warehouse-temperature-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 36px;
  border: 1px solid #c8ced8;
  border-radius: 4px;
  padding: 0 13px;
  color: #344054;
  background: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.warehouse-temperature-action-button:hover:not(:disabled) {
  border-color: #817a95;
  background: #f5f3f8;
}

.warehouse-temperature-action-button.is-primary {
  border-color: #625b76;
  color: #ffffff;
  background: #625b76;
}

.warehouse-temperature-action-button.is-primary:hover:not(:disabled) {
  border-color: #4f4960;
  background: #4f4960;
}

.warehouse-temperature-action-button:disabled {
  color: #8a93a1;
  background: #eef1f5;
  cursor: wait;
}

.warehouse-temperature-summary,
.warehouse-temperature-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #d8dee8;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.warehouse-temperature-summary > div,
.warehouse-temperature-metrics > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-right: 1px solid #e5e9f0;
}

.warehouse-temperature-summary > div:last-child,
.warehouse-temperature-metrics > div:last-child {
  border-right: 0;
}

.warehouse-temperature-summary span,
.warehouse-temperature-metrics span {
  color: #5b6573;
  font-size: 13px;
  font-weight: 700;
}

.warehouse-temperature-summary strong,
.warehouse-temperature-metrics strong {
  color: #152033;
  font-size: 23px;
}

.warehouse-temperature-summary .is-alert strong {
  color: #c62828;
}

.warehouse-temperature-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
}

.warehouse-temperature-card {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid #d8dee8;
  border-top: 4px solid #9aa5b4;
  border-radius: 6px;
  background: #fff;
}

.warehouse-temperature-card.is-normal {
  border-top-color: #1f9d55;
}

.warehouse-temperature-card.is-alert {
  border-color: #efb1b1;
  border-top-color: #d32f2f;
  background: #fffafa;
}

.warehouse-temperature-card.is-stale {
  border-top-color: #d97706;
  background: #fffdf7;
}

.warehouse-temperature-card.is-unconfigured {
  border-top-color: #546e7a;
}

.warehouse-temperature-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.warehouse-temperature-card-head strong {
  min-width: 0;
  color: #111827;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.warehouse-temperature-card-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 4px;
  background: #eef1f5;
  color: #4b5563;
  font-size: 11px;
  font-weight: 800;
}

.warehouse-temperature-card.is-normal .warehouse-temperature-card-head span {
  background: #e7f6ed;
  color: #13733d;
}

.warehouse-temperature-card.is-alert .warehouse-temperature-card-head span {
  background: #fde8e8;
  color: #b42318;
}

.warehouse-temperature-card.is-stale .warehouse-temperature-card-head span {
  background: #fff1d6;
  color: #9a5a00;
}

.warehouse-temperature-current {
  color: #111827;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.warehouse-temperature-card.is-alert .warehouse-temperature-current {
  color: #c62828;
}

.warehouse-temperature-card-meta {
  display: grid;
  gap: 3px;
  color: #647184;
  font-size: 12px;
  font-weight: 700;
}

.warehouse-temperature-empty,
.warehouse-temperature-table-empty {
  padding: 34px 20px;
  color: #697586;
  text-align: center;
  font-weight: 700;
}

.warehouse-temperature-entry-panel {
  padding: 16px;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  background: #fff;
}

.warehouse-temperature-entry-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(130px, 0.7fr) minmax(190px, 1fr) minmax(220px, 1.5fr) 110px;
  align-items: end;
  gap: 12px;
}

.warehouse-temperature-entry-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #394657;
  font-size: 12px;
  font-weight: 800;
}

.warehouse-temperature-entry-grid input,
.warehouse-temperature-entry-grid select {
  width: 100%;
  min-height: 38px;
}

.warehouse-temperature-entry-grid button {
  min-height: 38px;
}

.warehouse-temperature-history-panel .grid-wrap {
  max-height: calc(100vh - 340px);
}

.warehouse-temperature-table {
  min-width: 900px;
}

.warehouse-temperature-table th:nth-child(1) {
  width: 56px;
}

.warehouse-temperature-table th:nth-child(2) {
  width: 160px;
}

.warehouse-temperature-table th:nth-child(3) {
  width: 180px;
}

.warehouse-temperature-value-cell {
  font-weight: 800;
  text-align: right;
}

.warehouse-temperature-settings-table {
  min-width: 1180px;
}

.warehouse-temperature-settings-table input[type="text"],
.warehouse-temperature-settings-table input[type="number"] {
  width: 100%;
  min-width: 80px;
}

.warehouse-temperature-settings-table th:nth-child(1) {
  width: 52px;
}

.warehouse-temperature-settings-table th:nth-child(2) {
  width: 58px;
}

.warehouse-temperature-settings-table th:nth-child(3) {
  width: 190px;
}

.warehouse-temperature-settings-table th:nth-child(4),
.warehouse-temperature-settings-table th:nth-child(5) {
  width: 100px;
}

.warehouse-temperature-settings-table th:nth-child(6) {
  width: 120px;
}

.warehouse-temperature-settings-table th:nth-child(7) {
  width: 180px;
}

.warehouse-temperature-settings-table th:nth-child(8) {
  width: 190px;
}

.warehouse-temperature-recipient-picker {
  position: relative;
}

.warehouse-temperature-recipient-picker summary {
  cursor: pointer;
  color: #30445f;
  font-weight: 800;
}

.warehouse-temperature-recipient-picker > div {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 220px;
  max-height: 240px;
  display: grid;
  gap: 7px;
  overflow: auto;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #cfd7e3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 33, 51, 0.18);
}

.warehouse-temperature-recipient-picker label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #303b49;
  font-size: 12px;
  white-space: nowrap;
}

.warehouse-temperature-no-recipient {
  color: #7b8491;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .warehouse-temperature-board {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .warehouse-temperature-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .warehouse-temperature-query-grid,
  .warehouse-temperature-history-query,
  .warehouse-temperature-settings-query,
  .warehouse-temperature-entry-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-temperature-summary,
  .warehouse-temperature-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-temperature-summary > div:nth-child(2),
  .warehouse-temperature-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .warehouse-temperature-summary > div:nth-child(-n + 2),
  .warehouse-temperature-metrics > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e5e9f0;
  }

  .warehouse-temperature-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-temperature-card {
    min-height: 138px;
    padding: 13px;
  }

  .warehouse-temperature-current {
    font-size: 29px;
  }
}

@container warehouse-temperature (max-width: 720px) {
  .warehouse-temperature-query-grid,
  .warehouse-temperature-history-query,
  .warehouse-temperature-settings-query,
  .warehouse-temperature-entry-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-temperature-board {
    grid-template-columns: 1fr;
  }

  .warehouse-temperature-card {
    min-height: 126px;
  }

  .warehouse-temperature-summary > div,
  .warehouse-temperature-metrics > div {
    gap: 8px;
    padding: 12px;
  }

  .warehouse-temperature-history-panel .grid-wrap,
  .warehouse-temperature-settings-panel .grid-wrap {
    max-height: none;
    overflow: visible;
  }

  .warehouse-temperature-history-panel,
  .warehouse-temperature-settings-panel {
    min-height: 0;
  }

  .warehouse-temperature-table,
  .warehouse-temperature-settings-table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  .warehouse-temperature-table thead,
  .warehouse-temperature-settings-table thead {
    display: none;
  }

  .warehouse-temperature-table tbody,
  .warehouse-temperature-settings-table tbody {
    display: grid;
    width: 100%;
    gap: 10px;
  }

  .warehouse-temperature-table tr,
  .warehouse-temperature-settings-table tr {
    display: block;
    width: 100%;
    overflow: hidden;
    border: 1px solid #d8dee8;
    border-left: 4px solid #8d879d;
    border-radius: 6px;
    background: #fff;
  }

  .warehouse-temperature-table td,
  .warehouse-temperature-settings-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    min-height: 40px;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    text-align: left;
    white-space: normal;
  }

  .warehouse-temperature-table td:last-child,
  .warehouse-temperature-settings-table td:last-child {
    border-bottom: 0;
  }

  .warehouse-temperature-table td::before,
  .warehouse-temperature-settings-table td::before {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
  }

  .warehouse-temperature-table td:nth-child(1)::before {
    content: "No";
  }

  .warehouse-temperature-table td:nth-child(2)::before {
    content: "측정일시";
  }

  .warehouse-temperature-table td:nth-child(3)::before {
    content: "측정지점";
  }

  .warehouse-temperature-table td:nth-child(4)::before {
    content: "온도";
  }

  .warehouse-temperature-table td:nth-child(5)::before {
    content: "방식";
  }

  .warehouse-temperature-table td:nth-child(6)::before {
    content: "기록자";
  }

  .warehouse-temperature-table td:nth-child(7)::before {
    content: "비고";
  }

  .warehouse-temperature-settings-table td:nth-child(1)::before {
    content: "No";
  }

  .warehouse-temperature-settings-table td:nth-child(2)::before {
    content: "사용";
  }

  .warehouse-temperature-settings-table td:nth-child(3)::before {
    content: "측정지점";
  }

  .warehouse-temperature-settings-table td:nth-child(4)::before {
    content: "하한 (℃)";
  }

  .warehouse-temperature-settings-table td:nth-child(5)::before {
    content: "상한 (℃)";
  }

  .warehouse-temperature-settings-table td:nth-child(6)::before {
    content: "갱신기준";
  }

  .warehouse-temperature-settings-table td:nth-child(7)::before {
    content: "센서 코드";
  }

  .warehouse-temperature-settings-table td:nth-child(8)::before {
    content: "알림 관리자";
  }

  .warehouse-temperature-table-empty {
    display: block !important;
    padding: 24px 16px !important;
    text-align: center !important;
  }

  .warehouse-temperature-table-empty::before {
    content: none !important;
  }

  .warehouse-temperature-settings-table input[type="text"],
  .warehouse-temperature-settings-table input[type="number"] {
    min-width: 0;
  }

  .warehouse-temperature-recipient-picker,
  .warehouse-temperature-recipient-picker summary {
    width: 100%;
  }

  .warehouse-temperature-recipient-picker > div {
    position: static;
    width: 100%;
    max-height: 190px;
    box-sizing: border-box;
    box-shadow: none;
  }
}

@media (max-width: 620px) {
  .warehouse-temperature-view {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .warehouse-temperature-board {
    grid-template-columns: 1fr;
  }
}
.warehouse-temperature-mobile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid #ddd8ee;
  background: #f6f3fb;
}

.warehouse-temperature-mobile-tabs button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #5f5870;
  font-weight: 700;
}

.warehouse-temperature-mobile-tabs button.is-active {
  background: #77658f;
  color: #fff;
}

.mobile-warehouse-temperature-view .warehouse-temperature-view {
  min-width: 0;
}

@media (max-width: 520px) {
  .warehouse-temperature-mobile-tabs {
    grid-template-columns: 1fr;
  }
}

.home-dashboard-view {
  position: relative;
  min-height: 100%;
  padding: 12px 4px 90px;
}

.home-dashboard-grid {
  --home-dashboard-row-height: 72px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 810px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, var(--home-dashboard-row-height));
  gap: 10px;
}

.home-dashboard-cell-grid {
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 10px;
  pointer-events: none;
}

.home-dashboard-cell-grid span {
  border: 1px dashed #c9d3cf;
  border-radius: 4px;
  background: #f5f8f7;
}

.home-dashboard-widget,
.home-dashboard-drop-preview {
  grid-column: var(--home-widget-x) / span var(--home-widget-w);
  grid-row: var(--home-widget-y) / span var(--home-widget-h);
  min-width: 0;
  min-height: 0;
}

.home-dashboard-widget {
  position: relative;
  z-index: 2;
}

.home-dashboard-widget.is-editing {
  outline: 2px solid rgba(13, 133, 120, 0.25);
  outline-offset: 2px;
}

.home-dashboard-widget.is-selected {
  outline-color: #0c887a;
}

.home-dashboard-widget.is-dragging {
  opacity: 0.48;
}

.home-dashboard-widget-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.home-dashboard-widget-content.is-clickable {
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}

.home-dashboard-widget-content.is-clickable:hover {
  filter: brightness(0.985);
}

.home-dashboard-widget-content.is-clickable:focus-visible {
  outline: 3px solid rgba(11, 136, 122, 0.42);
  outline-offset: 2px;
}

.home-dashboard-widget-tools {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #a9bbb5;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(25, 45, 38, 0.14);
}

.home-dashboard-widget-tools button {
  min-height: 31px;
  border: 0;
  border-radius: 4px;
  padding: 0 9px;
  background: #edf5f2;
  color: #23453c;
  font-size: 12px;
  font-weight: 850;
}

.home-dashboard-widget-tools .home-dashboard-drag-handle {
  width: 34px;
  padding: 0;
  background: #153029;
  color: #fff;
  cursor: grab;
  font-size: 17px;
  letter-spacing: 0;
}

.home-dashboard-widget-tools .home-dashboard-drag-handle:active {
  cursor: grabbing;
}

.home-dashboard-drop-preview {
  z-index: 8;
  display: none;
  border: 2px solid #0b8a7b;
  border-radius: 6px;
  background: rgba(12, 138, 123, 0.13);
  pointer-events: none;
}

.home-dashboard-drop-preview.is-visible {
  display: block;
}

.home-dashboard-drop-preview.is-blocked {
  border-color: #c83b35;
  background: rgba(200, 59, 53, 0.12);
}

.home-dashboard-manager-button {
  position: fixed;
  z-index: 92;
  right: 22px;
  bottom: 72px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #63877d;
  border-radius: 6px;
  padding: 0 15px;
  background: #18342d;
  color: #fff;
  box-shadow: 0 8px 22px rgba(29, 53, 45, 0.24);
  font-size: 13px;
  font-weight: 850;
}

.home-dashboard-manager-button.is-active {
  background: #0b887a;
}

.home-dashboard-manager-button span {
  font-size: 17px;
}

.home-dashboard-manager {
  position: fixed;
  z-index: 91;
  right: 22px;
  bottom: 124px;
  width: min(390px, calc(100vw - 34px));
  max-height: calc(100vh - 160px);
  overflow: auto;
  border: 1px solid #b9c8c3;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(28, 48, 41, 0.24);
  color: #17231f;
}

.home-dashboard-manager > header,
.home-dashboard-manager-mode,
.home-dashboard-settings-title,
.home-dashboard-catalog > div,
.home-dashboard-manager > footer {
  display: flex;
  align-items: center;
}

.home-dashboard-manager > header {
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid #dce4e1;
}

.home-dashboard-manager > header span,
.home-basic-widget-header > div > span {
  color: #0a756a;
  font-size: 11px;
  font-weight: 900;
}

.home-dashboard-manager h2,
.home-dashboard-manager h3,
.home-basic-widget-header h2 {
  margin: 2px 0 0;
  letter-spacing: 0;
}

.home-dashboard-manager h2 {
  font-size: 19px;
}

.home-dashboard-manager > header > button {
  width: 38px;
  height: 38px;
  border: 1px solid #c5d0cc;
  border-radius: 5px;
  padding: 0;
  background: #fff;
  color: #344a43;
  font-size: 23px;
}

.home-dashboard-manager-mode {
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: #f4f7f6;
  border-bottom: 1px solid #dce4e1;
}

.home-dashboard-manager-mode strong,
.home-dashboard-manager-mode span {
  display: block;
}

.home-dashboard-manager-mode span {
  margin-top: 3px;
  color: #6d7974;
  font-size: 11px;
}

.home-dashboard-manager-mode > button {
  min-height: 36px;
  border: 1px solid #9fb4ad;
  border-radius: 5px;
  padding: 0 12px;
  background: #fff;
  color: #375149;
  font-weight: 850;
  white-space: nowrap;
}

.home-dashboard-manager-mode > button.is-active {
  border-color: #0b887a;
  background: #0b887a;
  color: #fff;
}

.home-dashboard-manager-section {
  padding: 15px 18px;
  border-bottom: 1px solid #dce4e1;
}

.home-dashboard-manager-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.home-dashboard-menu-shortcut-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.home-dashboard-menu-shortcut-picker select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #bac8c3;
  border-radius: 5px;
  padding: 0 9px;
  background: #fff;
  color: #1e302a;
  font-weight: 750;
}

.home-dashboard-menu-shortcut-picker button {
  min-height: 40px;
  border: 1px solid #0b887a;
  border-radius: 5px;
  padding: 0 15px;
  background: #0b887a;
  color: #fff;
  font-weight: 850;
}

.home-dashboard-menu-shortcut-picker button:disabled {
  border-color: #c4ceca;
  background: #edf1ef;
  color: #909b97;
}

.home-dashboard-manager-help {
  margin: 8px 0 0;
  color: #718079;
  font-size: 11px;
  line-height: 1.45;
}

.home-dashboard-catalog {
  border-top: 1px solid #dce4e1;
}

.home-dashboard-catalog > div {
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid #e3e9e7;
  padding: 8px 2px;
}

.home-dashboard-catalog > div.is-selected {
  box-shadow: inset 3px 0 #0b887a;
  padding-left: 10px;
  background: #f1f8f6;
}

.home-dashboard-catalog span,
.home-dashboard-catalog strong,
.home-dashboard-catalog small {
  min-width: 0;
  display: block;
}

.home-dashboard-catalog small {
  margin-top: 3px;
  color: #718079;
  font-size: 11px;
}

.home-dashboard-catalog button,
.home-dashboard-settings-title button,
.home-dashboard-manager > footer button {
  min-height: 34px;
  border: 1px solid #b4c5bf;
  border-radius: 5px;
  padding: 0 11px;
  background: #fff;
  color: #345149;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.home-dashboard-catalog button:disabled {
  color: #8b9692;
  background: #f0f2f1;
}

.home-dashboard-settings-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.home-dashboard-settings-title h3 {
  margin: 0;
}

.home-dashboard-settings-title button {
  border-color: #e5b9b5;
  color: #a93630;
}

.home-dashboard-selected-settings > label,
.home-dashboard-position-fields label {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  color: #52635c;
  font-size: 12px;
  font-weight: 850;
}

.home-dashboard-selected-settings select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #bac8c3;
  border-radius: 5px;
  padding: 0 9px;
  background: #fff;
  color: #1e302a;
  font-weight: 750;
}

.home-dashboard-position-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.home-dashboard-manager > footer {
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: #f7f9f8;
}

.home-dashboard-manager > footer span {
  color: #74817c;
  font-size: 10px;
  text-align: right;
}

.home-basic-widget,
.home-compact-widget {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #cfd9d5;
  border-top: 3px solid #60716a;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 52, 45, 0.07);
  color: #17231f;
}

.home-basic-widget {
  display: flex;
  flex-direction: column;
}

.home-menu-shortcut-widget {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #c7d5d0;
  border-top: 3px solid #0b887a;
  border-radius: 6px;
  padding: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 52, 45, 0.07);
  color: #17231f;
}

.home-menu-shortcut-widget.is-unavailable {
  border-top-color: #8d9894;
  color: #6b7772;
}

.home-menu-shortcut-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e4f2ee;
  color: #08766b;
  font-size: 14px;
  font-weight: 900;
}

.home-menu-shortcut-widget div,
.home-menu-shortcut-widget small,
.home-menu-shortcut-widget strong,
.home-menu-shortcut-widget div > span {
  min-width: 0;
  display: block;
}

.home-menu-shortcut-widget small {
  overflow: hidden;
  color: #718079;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-shortcut-widget strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-menu-shortcut-widget div > span {
  margin-top: 5px;
  color: #0a756a;
  font-size: 10px;
  font-weight: 850;
}

.home-menu-shortcut-widget > b {
  color: #6b7c76;
  font-size: 24px;
  font-weight: 500;
}

.home-basic-widget-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid #dde5e2;
}

.home-basic-widget-header h2 {
  font-size: 17px;
}

.home-basic-widget-header > button,
.home-basic-widget-actions button,
.home-compact-widget-heading button {
  min-height: 32px;
  border: 1px solid #afc2bc;
  border-radius: 5px;
  padding: 0 10px;
  background: #fff;
  color: #315047;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.home-basic-widget-actions {
  display: flex;
  gap: 6px;
}

.home-basic-widget-actions button:first-child {
  width: 34px;
  padding: 0;
  font-size: 16px;
}

.home-widget-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #dde5e2;
  background: #f6f8f7;
}

.home-widget-metrics > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding: 10px 12px;
  border-right: 1px solid #dde5e2;
}

.home-widget-metrics > div:last-child {
  border-right: 0;
}

.home-widget-metrics span {
  color: #65736d;
  font-size: 10px;
  font-weight: 800;
}

.home-widget-metrics strong {
  font-size: 18px;
}

.home-widget-metrics .is-active strong {
  color: #08776c;
}

.home-widget-metrics .is-alert strong {
  color: #b52e29;
}

.home-temperature-list,
.home-alert-list,
.home-quick-menu-list {
  min-height: 0;
  overflow: auto;
  flex: 1;
}

.home-temperature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  border-bottom: 1px solid #e5eae8;
  padding: 7px 14px;
}

.home-temperature-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.home-temperature-row > span {
  font-size: 16px;
  font-weight: 900;
}

.home-temperature-row small {
  min-width: 48px;
  color: #68766f;
  font-size: 10px;
  font-weight: 850;
  text-align: right;
}

.home-temperature-row.is-alert > span,
.home-temperature-row.is-high > span,
.home-temperature-row.is-low > span {
  color: #b52e29;
}

.home-alert-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.7fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 49px;
  border: 0;
  border-bottom: 1px solid #e4eae7;
  padding: 8px 14px;
  background: #fff;
  color: #1f302a;
  text-align: left;
}

.home-alert-row strong,
.home-alert-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-alert-row span,
.home-alert-row small {
  color: #69766f;
  font-size: 11px;
}

.home-quick-menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  padding: 10px;
}

.home-quick-menu-list button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #d4ddda;
  border-radius: 5px;
  padding: 0 11px;
  background: #f9fbfa;
  color: #263c35;
  text-align: left;
}

.home-quick-menu-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.home-quick-menu-list span {
  color: #74837d;
  font-size: 17px;
}

.home-widget-empty {
  min-height: 100px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #718079;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.home-compact-widget {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px 12px;
}

.home-compact-widget.is-active {
  border-top-color: #0c8477;
}

.home-compact-widget.is-warning {
  border-top-color: #c57a12;
}

.home-compact-widget.is-alert {
  border-top-color: #c83b35;
}

.home-compact-widget-heading,
.home-compact-widget-value,
.home-compact-widget-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-compact-widget-heading > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #345047;
  font-size: 12px;
  font-weight: 900;
}

.home-compact-widget-value strong {
  font-size: 29px;
}

.home-compact-widget-value span,
.home-compact-widget-meta {
  color: #6a7771;
  font-size: 10px;
  font-weight: 800;
}

.home-dashboard-widget.is-narrow .home-compact-widget-heading button,
.home-dashboard-widget.is-narrow .home-compact-widget-meta,
.home-dashboard-widget.is-short .home-basic-widget-header span {
  display: none;
}

.home-ferry-widget {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #cfd9d5;
  border-top: 3px solid #60716a;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(35, 52, 45, 0.08);
  color: #17231f;
}

.home-ferry-widget.is-active {
  border-top-color: #0c8477;
}

.home-ferry-widget.is-warning {
  border-top-color: #c57a12;
}

.home-ferry-widget.is-alert {
  border-top-color: #c83b35;
}

.home-ferry-widget-header,
.home-ferry-widget-actions,
.home-ferry-section-heading,
.home-ferry-widget-footer {
  display: flex;
  align-items: center;
}

.home-ferry-widget-header {
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 17px;
}

.home-ferry-widget-title > span {
  color: #08766c;
  font-size: 11px;
  font-weight: 900;
}

.home-ferry-widget-title h1 {
  margin: 3px 0 0;
  font-size: 23px;
  line-height: 1.25;
}

.home-ferry-widget-title p {
  margin: 4px 0 0;
  color: #69766f;
  font-size: 12px;
  font-weight: 700;
}

.home-ferry-widget-actions {
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.home-ferry-widget-state {
  border-radius: 4px;
  padding: 7px 9px;
  background: #edf1ef;
  color: #57635e;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.home-ferry-widget-state.is-active {
  background: #e3f3ef;
  color: #087167;
}

.home-ferry-widget-state.is-warning {
  background: #fff2d8;
  color: #8f5705;
}

.home-ferry-widget-state.is-alert {
  background: #fde7e5;
  color: #a92d28;
}

.home-ferry-icon-button,
.home-ferry-detail-button,
.home-ferry-more,
.home-ferry-forecast-link {
  border: 1px solid #b9c9c4;
  border-radius: 5px;
  background: #ffffff;
  color: #385048;
  font-size: 12px;
  font-weight: 850;
}

.home-ferry-icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 19px;
}

.home-ferry-icon-button:disabled {
  color: #8d9893;
  background: #f0f3f2;
  cursor: wait;
}

.home-ferry-detail-button {
  min-height: 38px;
  padding: 0 14px;
  border-color: #83b9b1;
  background: #eef8f6;
  color: #087167;
}

.home-ferry-warning {
  border-top: 1px solid #ecd59f;
  border-bottom: 1px solid #ecd59f;
  padding: 9px 22px;
  background: #fff8e8;
  color: #85530b;
  font-size: 12px;
  font-weight: 800;
}

.home-ferry-weather {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid #dce5e1;
  border-bottom: 1px solid #dce5e1;
  padding: 10px 18px;
  background: #f7faf8;
}

.home-ferry-weather > div {
  display: grid;
  gap: 2px;
}

.home-ferry-weather span,
.home-ferry-weather small {
  color: #66736d;
  font-size: 11px;
  font-weight: 750;
}

.home-ferry-weather strong {
  color: #1d332c;
  font-size: 13px;
}

.home-ferry-weather small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ferry-weather.is-active {
  border-left: 4px solid #2d8b69;
  background: #f3faf6;
}

.home-ferry-weather.is-warning {
  border-left: 4px solid #d97706;
  background: #fff9ed;
}

.home-ferry-weather.is-alert {
  border-left: 4px solid #c83f3f;
  background: #fff4f3;
}

.home-ferry-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #e0e6e3;
  border-bottom: 1px solid #e0e6e3;
  background: #f7f9f8;
}

.home-ferry-summary > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-right: 1px solid #e0e6e3;
}

.home-ferry-summary > div:last-child {
  border-right: 0;
}

.home-ferry-summary span {
  color: #66736d;
  font-size: 12px;
  font-weight: 800;
}

.home-ferry-summary strong {
  font-size: 22px;
}

.home-ferry-summary .is-active strong {
  color: #08776c;
}

.home-ferry-summary .is-alert strong {
  color: #b52e29;
}

.home-ferry-body {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.75fr);
}

.home-ferry-routes,
.home-ferry-forecast {
  min-width: 0;
  padding: 18px 22px;
}

.home-ferry-forecast {
  border-left: 1px solid #e0e6e3;
  background: #f7faf9;
}

.home-ferry-section-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-ferry-section-heading strong {
  font-size: 15px;
}

.home-ferry-section-heading span {
  color: #68756f;
  font-size: 11px;
  font-weight: 800;
}

.home-ferry-route-list {
  border-top: 1px solid #dfe5e2;
}

.home-ferry-route {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(78px, auto);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e5eae7;
  border-left: 3px solid #87938e;
  padding: 10px 10px 10px 12px;
}

.home-ferry-route.is-active {
  border-left-color: #0c8a7d;
}

.home-ferry-route.is-warning {
  border-left-color: #d17808;
  background: #fffdf7;
}

.home-ferry-route.is-alert {
  border-left-color: #c83b35;
  background: #fff9f8;
}

.home-ferry-route time {
  color: #20312a;
  font-size: 15px;
  font-weight: 900;
}

.home-ferry-route > div {
  min-width: 0;
}

.home-ferry-route > div strong,
.home-ferry-route > div small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ferry-route > div strong {
  font-size: 14px;
}

.home-ferry-route > div strong span {
  color: #829089;
}

.home-ferry-route > div small {
  margin-top: 3px;
  color: #718079;
  font-size: 11px;
  font-weight: 700;
}

.home-ferry-route-status {
  border-radius: 4px;
  padding: 5px 7px;
  background: #edf1ef;
  color: #52605a;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.home-ferry-route.is-active .home-ferry-route-status {
  background: #e4f4f1;
  color: #087167;
}

.home-ferry-route.is-warning .home-ferry-route-status {
  background: #fff0d0;
  color: #935800;
}

.home-ferry-route.is-alert .home-ferry-route-status {
  background: #fde5e5;
  color: #b42318;
}

.home-ferry-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #e5eae7;
  color: #6d7973;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.home-ferry-more,
.home-ferry-forecast-link {
  min-height: 34px;
  margin-top: 10px;
  padding: 0 11px;
}

.home-ferry-forecast-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #cbdcd7;
  border-bottom: 1px solid #cbdcd7;
  padding: 17px 2px;
}

.home-ferry-forecast-primary span {
  color: #66736d;
  font-size: 12px;
  font-weight: 800;
}

.home-ferry-forecast-primary strong {
  color: #08776c;
  font-size: 25px;
}

.home-ferry-forecast-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
}

.home-ferry-forecast-breakdown > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e0e7e4;
  padding: 10px 2px;
}

.home-ferry-forecast-breakdown dt {
  color: #65726c;
  font-size: 12px;
  font-weight: 800;
}

.home-ferry-forecast-breakdown dd {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.home-ferry-forecast-link {
  width: 100%;
  border-color: #92beb7;
  color: #087167;
}

.home-ferry-widget-footer {
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #e0e6e3;
  padding: 10px 22px;
  color: #718079;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .home-dashboard-grid {
    min-height: 0;
    display: block;
  }

  .home-dashboard-cell-grid,
  .home-dashboard-drop-preview {
    display: none !important;
  }

  .home-dashboard-widget {
    min-height: 220px;
    margin-bottom: 12px;
  }

  .home-dashboard-widget.is-short,
  .home-dashboard-widget.is-narrow {
    min-height: 150px;
  }

  .home-dashboard-widget-content {
    height: auto;
    min-height: inherit;
    overflow: visible;
  }

  .home-dashboard-widget-content > section {
    min-height: inherit;
  }

  .home-dashboard-drag-handle {
    display: none;
  }

  .home-ferry-widget-header {
    align-items: flex-start;
  }

  .home-ferry-body {
    grid-template-columns: 1fr;
  }

  .home-ferry-forecast {
    border-top: 1px solid #e0e6e3;
    border-left: 0;
  }
}

@media (max-width: 650px) {
  .home-dashboard-view {
    padding: 0 0 82px;
  }

  .home-dashboard-manager-button {
    right: 12px;
    bottom: 62px;
  }

  .home-dashboard-manager {
    right: 8px;
    bottom: 114px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 132px);
  }

  .home-dashboard-position-fields {
    grid-template-columns: 1fr;
  }

  .home-alert-row {
    grid-template-columns: 1fr auto;
  }

  .home-alert-row span {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .home-quick-menu-list {
    grid-template-columns: 1fr;
  }

  .home-ferry-widget-header,
  .home-ferry-widget-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .home-ferry-widget-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .home-ferry-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-ferry-summary > div:nth-child(2) {
    border-right: 0;
  }

  .home-ferry-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e0e6e3;
  }

  .home-ferry-route {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .home-ferry-route-status {
    grid-column: 2;
    justify-self: start;
  }
}

.ferry-operations-view {
  gap: 14px;
  color: #17231f;
}

.ferry-operations-title-row,
.ferry-operations-query-row,
.ferry-operations-refresh-wrap {
  display: flex;
  align-items: center;
}

.ferry-operations-title-row {
  justify-content: space-between;
  gap: 16px;
}

.ferry-operations-source,
.ferry-operations-refresh-wrap span,
.ferry-operations-footnote {
  color: #66736d;
  font-size: 12px;
  font-weight: 700;
}

.ferry-operations-source {
  margin-top: 4px;
}

.ferry-operations-refresh-wrap {
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.ferry-operations-refresh {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid #9abeb8;
  border-radius: 5px;
  padding: 0 13px;
  background: #eef8f6;
  color: #086c62;
  font-size: 13px;
  font-weight: 850;
}

.ferry-operations-refresh:disabled {
  color: #7b8782;
  background: #eef1ef;
  cursor: wait;
}

.ferry-operations-query-row {
  gap: 12px;
  margin-top: 15px;
}

.ferry-operations-date-field {
  min-width: 190px;
  display: grid;
  gap: 6px;
  color: #4d5a54;
  font-size: 12px;
  font-weight: 800;
}

.ferry-operations-date-field input {
  min-height: 38px;
}

.ferry-operations-direction {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  align-self: end;
  overflow: hidden;
  border: 1px solid #cfd8d4;
  border-radius: 5px;
  background: #ffffff;
}

.ferry-operations-direction button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid #dfe5e2;
  border-radius: 0;
  background: transparent;
  color: #52605a;
  font-size: 13px;
  font-weight: 800;
}

.ferry-operations-direction button:last-child {
  border-right: 0;
}

.ferry-operations-direction button.is-active {
  background: #0c7d71;
  color: #ffffff;
}

.ferry-operations-warning {
  margin-top: 12px;
  border-left: 4px solid #d97706;
  padding: 9px 11px;
  background: #fff8e8;
  color: #875208;
  font-size: 12px;
  font-weight: 800;
}

.ferry-weather-section {
  border: 1px solid #d8e0dc;
  border-left: 4px solid #85928c;
  border-radius: 6px;
  padding: 15px 16px;
  background: #ffffff;
}

.ferry-weather-section.is-active {
  border-left-color: #2d8b69;
  background: #f8fcfa;
}

.ferry-weather-section.is-warning {
  border-left-color: #d97706;
  background: #fffaf0;
}

.ferry-weather-section.is-alert {
  border-left-color: #c83f3f;
  background: #fff7f6;
}

.ferry-weather-state {
  flex: 0 0 auto;
  border: 1px solid #cfd8d4;
  border-radius: 999px;
  padding: 5px 9px;
  background: #f2f5f3;
  color: #53615b;
  font-size: 12px;
  font-weight: 900;
}

.ferry-weather-state.is-active {
  border-color: #b8d9c9;
  background: #eaf7f0;
  color: #176b4e;
}

.ferry-weather-state.is-warning {
  border-color: #efd19b;
  background: #fff4dc;
  color: #9a5a05;
}

.ferry-weather-state.is-alert {
  border-color: #efb7b2;
  background: #ffe9e7;
  color: #a82929;
}

.ferry-weather-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ferry-weather-card,
.ferry-weather-clear,
.ferry-weather-unavailable {
  min-width: 0;
  border: 1px solid #d8e0dc;
  border-radius: 5px;
  background: #ffffff;
}

.ferry-weather-card {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
}

.ferry-weather-card.is-warning {
  border-color: #efd19b;
}

.ferry-weather-card.is-alert {
  border-color: #efb7b2;
}

.ferry-weather-badge {
  border-radius: 4px;
  padding: 4px 7px;
  background: #edf1ef;
  color: #46534d;
  font-size: 11px;
  font-weight: 900;
}

.ferry-weather-card.is-warning .ferry-weather-badge {
  background: #fff0cf;
  color: #945500;
}

.ferry-weather-card.is-alert .ferry-weather-badge {
  background: #ffe3e0;
  color: #a42626;
}

.ferry-weather-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.ferry-weather-card p {
  margin: 0;
  color: #4f5d57;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.ferry-weather-clear,
.ferry-weather-unavailable {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
}

.ferry-weather-clear strong {
  color: #176b4e;
  font-size: 13px;
}

.ferry-weather-clear span,
.ferry-weather-unavailable {
  color: #66736d;
  font-size: 12px;
  font-weight: 750;
}

.ferry-weather-unavailable {
  border-color: #efd19b;
  background: #fff9ed;
  color: #875208;
}

.ferry-weather-note {
  margin: 10px 0 0;
  color: #6b7771;
  font-size: 11px;
  font-weight: 700;
}

.ferry-operations-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d8e0dc;
  border-radius: 6px;
  background: #ffffff;
}

.ferry-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ferry-section-heading h3 {
  margin: 2px 0 0;
  color: #17231f;
  font-size: 19px;
}

.ferry-section-heading h3 small {
  margin-left: 7px;
  color: #6b7771;
  font-size: 12px;
  font-weight: 750;
}

.ferry-section-kicker {
  color: #087b70;
  font-size: 11px;
  font-weight: 900;
}

.ferry-section-count {
  color: #087b70;
  font-size: 13px;
  font-weight: 900;
}

.ferry-current-heading {
  margin-top: 4px;
}

.ferry-forecast-section {
  display: grid;
  gap: 10px;
  padding: 2px 0 4px;
}

.ferry-forecast-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #bdd8d2;
  border-radius: 6px;
  background: #f4faf8;
}

.ferry-forecast-summary > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border-right: 1px solid #d8e8e4;
}

.ferry-forecast-summary > div:last-child {
  border-right: 0;
}

.ferry-forecast-summary span {
  color: #5e6c66;
  font-size: 12px;
  font-weight: 800;
}

.ferry-forecast-summary strong {
  color: #17231f;
  font-size: 20px;
}

.ferry-forecast-summary .is-active strong {
  color: #087b70;
}

.ferry-forecast-summary .is-alert strong {
  color: #c62828;
}

.ferry-forecast-summary .is-warning strong {
  color: #a35d00;
}

.ferry-forecast-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.ferry-forecast-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(105px, auto);
  align-items: center;
  gap: 12px;
  border: 1px solid #d8e0dc;
  border-left: 4px solid #83918b;
  border-radius: 6px;
  padding: 11px 12px;
  background: #ffffff;
}

.ferry-forecast-card.is-active {
  border-left-color: #0c8a7d;
}

.ferry-forecast-card.is-warning {
  border-color: #e6c27b;
  border-left-color: #d97706;
  background: #fffdf8;
}

.ferry-forecast-card.is-alert {
  border-color: #efb3b3;
  border-left-color: #c62828;
  background: #fffafa;
}

.ferry-forecast-result {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 3px;
}

.ferry-forecast-result small {
  max-width: 180px;
  overflow-wrap: anywhere;
  color: #68756f;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.ferry-forecast-card.is-active .ferry-operation-status-badge {
  background: #e4f4f1;
  color: #087167;
}

.ferry-forecast-card.is-warning .ferry-operation-status-badge {
  background: #fff0d0;
  color: #935800;
}

.ferry-forecast-card.is-alert .ferry-operation-status-badge {
  background: #fde5e5;
  color: #b42318;
}

.ferry-operations-summary > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid #e5ebe8;
}

.ferry-operations-summary > div:last-child {
  border-right: 0;
}

.ferry-operations-summary span {
  color: #627069;
  font-size: 12px;
  font-weight: 800;
}

.ferry-operations-summary strong {
  color: #17231f;
  font-size: 22px;
}

.ferry-operations-summary .is-active strong {
  color: #087b70;
}

.ferry-operations-summary .is-alert strong {
  color: #c62828;
}

.ferry-operations-list {
  display: grid;
  gap: 8px;
}

.ferry-operation-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(90px, 0.25fr) minmax(150px, 0.4fr);
  align-items: center;
  gap: 14px;
  border: 1px solid #d8e0dc;
  border-left: 4px solid #83918b;
  border-radius: 6px;
  padding: 13px 15px;
  background: #ffffff;
}

.ferry-operation-card.is-active {
  border-left-color: #0c8a7d;
}

.ferry-operation-card.is-done {
  border-left-color: #7d8c85;
  background: #fafbfa;
}

.ferry-operation-card.is-warning {
  border-color: #e6c27b;
  border-left-color: #d97706;
  background: #fffdf8;
}

.ferry-operation-card.is-alert {
  border-color: #efb3b3;
  border-left-color: #c62828;
  background: #fffafa;
}

.ferry-operation-route,
.ferry-operation-time,
.ferry-operation-location,
.ferry-operation-status {
  min-width: 0;
}

.ferry-operation-route-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ferry-operation-route-line strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ferry-operation-route-line span {
  color: #77837d;
  font-weight: 900;
}

.ferry-operation-vessel {
  overflow: hidden;
  margin-top: 4px;
  color: #67736d;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ferry-operation-time,
.ferry-operation-location,
.ferry-operation-status {
  display: grid;
  gap: 4px;
}

.ferry-operation-time span,
.ferry-operation-location span {
  color: #77837d;
  font-size: 11px;
  font-weight: 800;
}

.ferry-operation-time strong,
.ferry-operation-location strong {
  overflow-wrap: anywhere;
  color: #25332d;
  font-size: 14px;
}

.ferry-operation-status {
  justify-items: end;
}

.ferry-operation-status-badge {
  min-width: 68px;
  border-radius: 4px;
  padding: 5px 8px;
  background: #edf1ef;
  color: #52605a;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.ferry-operation-card.is-active .ferry-operation-status-badge {
  background: #e4f4f1;
  color: #087167;
}

.ferry-operation-card.is-warning .ferry-operation-status-badge {
  background: #fff0d0;
  color: #935800;
}

.ferry-operation-card.is-alert .ferry-operation-status-badge {
  background: #fde5e5;
  color: #b42318;
}

.ferry-operation-status small {
  color: #77837d;
  font-size: 11px;
  font-weight: 700;
}

.ferry-operation-comparison {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #e6ebe8;
}

.ferry-operation-comparison > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  color: #5e6a65;
}

.ferry-operation-comparison > div + div {
  border-left: 1px solid #e6ebe8;
  padding-left: 14px;
}

.ferry-operation-comparison span,
.ferry-operation-comparison small {
  color: #77837d;
  font-size: 11px;
  font-weight: 750;
}

.ferry-operation-comparison strong {
  color: #26342e;
  font-size: 13px;
}

.ferry-operation-comparison .has-actual strong {
  color: #087b70;
}

.ferry-non-operation-section {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  border-top: 1px solid #d8e0dc;
  padding-top: 16px;
}

.ferry-non-operation-group {
  display: grid;
  gap: 7px;
}

.ferry-non-operation-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #5f6c66;
  font-size: 12px;
}

.ferry-non-operation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.ferry-non-operation-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(90px, 0.5fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe4e2;
  border-radius: 6px;
  padding: 10px 11px;
  background: #f6f7f6;
}

.ferry-non-operation-row .ferry-operation-route-line strong {
  color: #53605a;
  font-size: 14px;
}

.ferry-non-operation-label {
  border-radius: 4px;
  padding: 4px 7px;
  background: #e5e9e7;
  color: #5b6761;
  font-size: 11px;
  font-weight: 850;
}

.ferry-non-operation-row > small {
  overflow-wrap: anywhere;
  color: #68746e;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.ferry-operations-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e0dc;
  border-radius: 6px;
  padding: 24px;
  background: #ffffff;
  color: #6c7973;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.ferry-operations-footnote {
  text-align: right;
}

@media (max-width: 900px) {
  .ferry-operation-card {
    grid-template-columns: minmax(240px, 1fr) minmax(90px, 0.3fr) minmax(140px, 0.45fr);
    gap: 10px;
  }
}

@media (max-width: 700px) {
  .ferry-operations-title-row,
  .ferry-operations-query-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ferry-operations-refresh-wrap {
    justify-content: space-between;
  }

  .ferry-operations-date-field,
  .ferry-operations-direction {
    width: 100%;
  }

  .ferry-operations-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ferry-forecast-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ferry-forecast-summary > div:nth-child(2) {
    border-right: 0;
  }

  .ferry-forecast-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #d8e8e4;
  }

  .ferry-forecast-list {
    grid-template-columns: 1fr;
  }

  .ferry-weather-list {
    grid-template-columns: 1fr;
  }

  .ferry-weather-clear,
  .ferry-weather-unavailable {
    align-items: flex-start;
    flex-direction: column;
  }

  .ferry-non-operation-list {
    grid-template-columns: 1fr;
  }

  .ferry-operations-summary > div:nth-child(2) {
    border-right: 0;
  }

  .ferry-operations-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e5ebe8;
  }

  .ferry-operation-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .ferry-operation-route {
    grid-column: 1 / -1;
  }

  .ferry-operation-status {
    justify-items: stretch;
  }

  .ferry-operation-status-badge {
    min-width: 0;
  }

  .ferry-operations-footnote {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .home-ferry-weather {
    grid-template-columns: 1fr;
  }

  .home-ferry-weather small {
    white-space: normal;
  }

  .ferry-section-heading {
    align-items: flex-start;
  }

  .ferry-weather-card {
    grid-template-columns: 1fr;
  }

  .ferry-section-heading h3 small {
    display: block;
    margin: 3px 0 0;
  }

  .ferry-forecast-card {
    grid-template-columns: 1fr;
  }

  .ferry-forecast-result {
    justify-items: start;
  }

  .ferry-forecast-result small {
    max-width: none;
    text-align: left;
  }

  .ferry-operation-comparison {
    grid-template-columns: 1fr;
  }

  .ferry-operation-comparison > div {
    grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  }

  .ferry-operation-comparison > div + div {
    border-top: 1px solid #e6ebe8;
    border-left: 0;
    padding-left: 0;
  }

  .ferry-non-operation-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ferry-non-operation-row > small {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Processing daily: compact operations workspace */
.processing-daily-view {
  --processing-teal: #087b70;
  --processing-teal-dark: #075f58;
  --processing-teal-soft: #e6f3f1;
  --processing-ink: #17231f;
  --processing-muted: #64716c;
  --processing-line: #d8e0dc;
  --processing-surface: #ffffff;
  --processing-canvas: #f4f7f6;
  color: var(--processing-ink);
}

.processing-daily-view,
.processing-daily-view * {
  letter-spacing: 0;
}

.processing-daily-view .processing-kiosk-shell {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 1280px);
  min-height: min(780px, calc(100vh - 104px));
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  background: var(--processing-canvas);
  box-shadow: 0 12px 28px rgba(22, 42, 36, 0.08);
}

.processing-daily-view .processing-kiosk-header {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--processing-line);
  background: #ffffff;
  color: var(--processing-ink);
  min-width: 0;
}

.processing-daily-view .processing-kiosk-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--processing-ink);
}

.processing-daily-view .processing-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: #1d2b27;
  color: #ffffff;
  font-size: 23px;
  font-style: normal;
  font-weight: 900;
}

.processing-daily-view .processing-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.processing-daily-view .processing-brand-copy strong {
  overflow: hidden;
  color: var(--processing-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-brand-copy small {
  overflow: hidden;
  color: var(--processing-muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-session-state {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 0 11px;
  background: #f8faf9;
  color: var(--processing-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.processing-daily-view .processing-session-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa6a1;
}

.processing-daily-view .processing-session-state.is-active {
  border-color: #a7d2cc;
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-session-state.is-active i {
  background: var(--processing-teal);
}

.processing-daily-view .processing-kiosk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.processing-daily-view .processing-kiosk-actions button,
.processing-daily-view .processing-product-head button {
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 0 11px;
  background: #ffffff;
  color: #31403b;
  font-size: 12px;
  font-weight: 850;
}

.processing-daily-view .processing-kiosk-actions button:hover,
.processing-daily-view .processing-kiosk-actions button:focus-visible {
  border-color: #82bbb3;
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-kiosk-actions .processing-manager-call-button {
  border-color: #e3c78b;
  background: #fffaf0;
  color: #805b13;
}

.processing-daily-view .processing-kiosk-date,
.processing-daily-view .processing-kiosk-center {
  display: block;
  min-width: 128px;
  color: var(--processing-muted);
}

.processing-daily-view .processing-kiosk-date > span,
.processing-daily-view .processing-kiosk-center > span {
  display: none;
}

.processing-daily-view .processing-kiosk-date input,
.processing-daily-view .processing-kiosk-center select {
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 0 9px;
  background: #ffffff;
  color: var(--processing-ink);
  font-size: 13px;
  font-weight: 800;
}

.processing-daily-view .processing-kiosk-body {
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: var(--processing-canvas);
}

.processing-daily-view .processing-kiosk-body > *,
.processing-daily-view .processing-card-area,
.processing-daily-view .processing-queue-toolbar,
.processing-daily-view .processing-product-group,
.processing-daily-view .processing-card-grid {
  min-width: 0;
}

.processing-daily-view .processing-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 10px;
}

.processing-daily-view .processing-page-heading > div {
  display: grid;
  gap: 3px;
}

.processing-daily-view .processing-page-heading strong {
  color: var(--processing-ink);
  font-size: 24px;
  font-weight: 900;
}

.processing-daily-view .processing-page-heading span,
.processing-daily-view .processing-page-heading em {
  color: var(--processing-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.processing-daily-view .processing-start-stage,
.processing-daily-view .processing-start-stage.is-config,
.processing-daily-view .processing-setup-stage {
  display: block;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.processing-daily-view .processing-setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: stretch;
  gap: 12px;
}

.processing-daily-view .processing-setup-main,
.processing-daily-view .processing-setup-summary {
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  background: var(--processing-surface);
}

.processing-daily-view .processing-setup-main {
  display: grid;
  align-content: start;
}

.processing-daily-view .processing-setup-section {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.processing-daily-view .processing-setup-section + .processing-setup-section {
  border-top: 1px solid var(--processing-line);
}

.processing-daily-view .processing-setup-section > header,
.processing-daily-view .processing-setup-summary > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-daily-view .processing-setup-section > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.processing-daily-view .processing-setup-section > header b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #21332d;
  color: #ffffff;
  font-size: 12px;
}

.processing-daily-view .processing-setup-section > header strong {
  color: var(--processing-ink);
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-setup-section > header span {
  color: var(--processing-teal-dark);
  font-size: 11px;
  font-weight: 850;
}

.processing-daily-view .processing-line-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.processing-daily-view .processing-line-choice-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  border: 1px solid var(--processing-line);
  border-radius: 7px;
  padding: 0 12px;
  background: #ffffff;
  color: #30413b;
  cursor: pointer;
}

.processing-daily-view .processing-line-choice-grid button span {
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-line-choice-grid button small {
  color: #8b9692;
  font-size: 10px;
  font-weight: 750;
}

.processing-daily-view .processing-line-choice-grid button.is-active {
  border-color: var(--processing-teal);
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
  box-shadow: inset 3px 0 0 var(--processing-teal);
}

.processing-daily-view .processing-line-choice-grid button.is-active small {
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-round-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.processing-daily-view .processing-round-choice-grid button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid var(--processing-line);
  border-radius: 7px;
  padding: 8px 12px;
  background: #ffffff;
  color: #30413b;
  text-align: left;
  cursor: pointer;
}

.processing-daily-view .processing-round-choice-grid button > i {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(23, 35, 31, 0.16);
  border-radius: 4px;
}

.processing-daily-view .processing-round-choice-grid button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.processing-daily-view .processing-round-choice-grid strong {
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-round-choice-grid small,
.processing-daily-view .processing-round-choice-grid em {
  color: var(--processing-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.processing-daily-view .processing-round-choice-grid button.is-active {
  border-color: var(--processing-teal);
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-round-choice-grid button.is-active em {
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-setup-summary {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
}

.processing-daily-view .processing-setup-summary > header {
  padding: 15px;
  border-bottom: 1px solid var(--processing-line);
}

.processing-daily-view .processing-setup-summary > header > div {
  display: grid;
  gap: 3px;
}

.processing-daily-view .processing-setup-summary > header small {
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 750;
}

.processing-daily-view .processing-setup-summary > header strong {
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-setup-summary > header > span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #edf1ef;
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 850;
}

.processing-daily-view .processing-setup-summary > header > span.is-ready {
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-setup-summary dl {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 8px 15px;
}

.processing-daily-view .processing-setup-summary dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 37px;
  border-bottom: 1px solid #edf1ef;
}

.processing-daily-view .processing-setup-summary dt {
  color: var(--processing-muted);
  font-size: 11px;
  font-weight: 750;
}

.processing-daily-view .processing-setup-summary dd {
  margin: 0;
  color: var(--processing-ink);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.processing-daily-view .processing-setup-color {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 15px 12px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 9px;
  background: #f8faf9;
}

.processing-daily-view .processing-setup-color > i {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(23, 35, 31, 0.16);
  border-radius: 5px;
}

.processing-daily-view .processing-setup-color span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.processing-daily-view .processing-setup-color small {
  color: var(--processing-muted);
  font-size: 9px;
  font-weight: 750;
}

.processing-daily-view .processing-setup-color strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-start-button {
  min-height: 48px;
  border: 1px solid var(--processing-teal);
  border-radius: 0 0 7px 7px;
  background: var(--processing-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.processing-daily-view .processing-start-button:disabled {
  border-color: #d9dfdc;
  background: #e8ecea;
  color: #8b9692;
  cursor: default;
}

.processing-daily-view .processing-barcode-panel {
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  box-shadow: none;
}

.processing-daily-view .processing-barcode-panel label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--processing-muted);
  font-size: 11px;
}

.processing-daily-view .processing-barcode-panel input,
.processing-daily-view .processing-barcode-panel button {
  height: 36px;
  min-height: 36px;
  border-color: var(--processing-line);
  border-radius: 6px;
  font-size: 13px;
}

.processing-daily-view .processing-barcode-panel button:first-of-type {
  border-color: #a7d2cc;
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-barcode-panel small {
  color: var(--processing-muted);
  font-size: 11px;
}

.processing-daily-view .processing-card-area {
  gap: 10px;
}

.processing-daily-view .processing-queue-toolbar {
  display: grid;
  gap: 12px;
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.processing-daily-view .processing-product-head {
  align-items: center;
}

.processing-daily-view .processing-product-head strong {
  color: var(--processing-ink);
  font-size: 22px;
  font-weight: 900;
}

.processing-daily-view .processing-product-head span {
  color: var(--processing-muted);
  font-size: 11px;
  font-weight: 750;
}

.processing-daily-view .processing-queue-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.processing-daily-view .processing-queue-summary span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: var(--processing-muted);
  font-size: 11px;
}

.processing-daily-view .processing-queue-summary b {
  color: var(--processing-ink);
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-queue-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--processing-line);
  padding-top: 11px;
}

.processing-daily-view .processing-group-tabs,
.processing-daily-view .processing-status-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.processing-daily-view .processing-group-tabs,
.processing-daily-view .processing-status-tabs,
.processing-daily-view .processing-queue-filter-row > * {
  min-width: 0;
}

.processing-daily-view .processing-group-tabs button,
.processing-daily-view .processing-status-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: #46534e;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.processing-daily-view .processing-group-tabs button b,
.processing-daily-view .processing-status-tabs button b {
  color: #87928e;
  font-size: 10px;
  font-weight: 850;
}

.processing-daily-view .processing-group-tabs button.is-active,
.processing-daily-view .processing-status-tabs button.is-active {
  border-color: var(--processing-teal);
  background: var(--processing-teal);
  color: #ffffff;
}

.processing-daily-view .processing-group-tabs button.is-active b,
.processing-daily-view .processing-status-tabs button.is-active b {
  color: rgba(255, 255, 255, 0.82);
}

.processing-daily-view .processing-product-group {
  gap: 6px;
}

.processing-daily-view .processing-card-grid {
  gap: 6px;
}

.processing-daily-view .processing-card {
  grid-template-columns: 30px minmax(210px, 1.05fr) minmax(210px, 0.72fr) minmax(250px, 1fr) 56px;
  grid-template-areas: "marker title facts centers action";
  gap: 10px;
  width: 100%;
  min-height: 76px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #ffffff;
  box-shadow: none;
}

.processing-daily-view .processing-card > * {
  min-width: 0;
}

.processing-daily-view .processing-card.is-running,
.processing-daily-view .processing-card.is-done {
  background: #ffffff;
}

.processing-daily-view .processing-card.is-running {
  border-color: #9bc9c3;
  box-shadow: inset 3px 0 0 var(--processing-teal);
}

.processing-daily-view .processing-card.is-done {
  border-color: #c7d7cf;
  box-shadow: inset 3px 0 0 #5d8b72;
}

.processing-daily-view .processing-card:hover,
.processing-daily-view .processing-card:focus-visible {
  border-color: #78ada6;
  box-shadow: inset 3px 0 0 var(--processing-teal), 0 4px 12px rgba(22, 42, 36, 0.08);
  transform: none;
}

.processing-daily-view .processing-list-marker {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #edf1ef;
  color: #52605a;
  font-size: 11px;
  font-weight: 900;
}

.processing-daily-view .processing-card.is-running .processing-list-marker {
  background: var(--processing-teal);
  color: #ffffff;
}

.processing-daily-view .processing-card.is-done .processing-list-marker {
  background: #5d8b72;
  color: #ffffff;
}

.processing-daily-view .processing-card header {
  display: grid;
  gap: 3px;
}

.processing-daily-view .processing-card header > div {
  min-width: 0;
}

.processing-daily-view .processing-card header strong {
  overflow: hidden;
  color: var(--processing-ink);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-card header small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-card header em {
  justify-self: start;
  border-radius: 4px;
  padding: 3px 6px;
  background: #edf1ef;
  color: #56635e;
  font-size: 10px;
  font-weight: 850;
}

.processing-daily-view .processing-card header em span {
  display: inline;
  margin: 0 0 0 5px;
  color: inherit;
  font-size: 9px;
}

.processing-daily-view .processing-card.is-running header em {
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-card.is-done header em {
  background: #eaf1ed;
  color: #41634f;
}

.processing-daily-view .processing-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 5px;
}

.processing-daily-view .processing-card-facts span {
  border: 0;
  border-left: 1px solid var(--processing-line);
  border-radius: 0;
  padding: 2px 7px;
  background: transparent;
  color: var(--processing-muted);
  font-size: 9px;
  text-align: right;
}

.processing-daily-view .processing-card-facts small {
  display: block;
  font-size: 9px;
  font-weight: 750;
}

.processing-daily-view .processing-card-facts b {
  margin-top: 2px;
  color: var(--processing-ink);
  font-size: 14px;
}

.processing-daily-view .processing-center-strip {
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.processing-daily-view .processing-center-segment {
  min-width: 46px;
  min-height: 32px;
  border-radius: 5px;
}

.processing-daily-view .processing-card-action {
  grid-area: action;
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  background: #f8faf9;
  color: #45534e;
  font-size: 11px;
  font-weight: 900;
}

.processing-daily-view .processing-card.is-running .processing-card-action {
  border-color: var(--processing-teal);
  background: var(--processing-teal);
  color: #ffffff;
}

.processing-daily-view .processing-queue-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  border: 1px dashed #c4cfca;
  border-radius: 8px;
  background: #ffffff;
  color: var(--processing-muted);
  font-size: 14px;
  font-weight: 800;
}

.processing-daily-view .processing-detail-stage {
  display: grid;
  gap: 12px;
}

.processing-daily-view .processing-detail-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.processing-daily-view .processing-detail-heading > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  background: #ffffff;
  color: #35443e;
  font-size: 20px;
  cursor: pointer;
}

.processing-daily-view .processing-detail-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.processing-daily-view .processing-detail-heading small {
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 750;
}

.processing-daily-view .processing-detail-heading strong {
  overflow: hidden;
  font-size: 22px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-detail-heading > span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #edf1ef;
  color: #56635e;
  font-size: 10px;
  font-weight: 850;
}

.processing-daily-view .processing-detail-heading > span.is-running {
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
}

.processing-daily-view .processing-detail-heading > span.is-done {
  background: #eaf1ed;
  color: #41634f;
}

.processing-daily-view .processing-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 12px;
}

.processing-daily-view .processing-detail-panel,
.processing-daily-view .processing-detail-panel.is-running,
.processing-daily-view .processing-detail-panel.is-done,
.processing-daily-view .processing-active-panel {
  border: 1px solid var(--processing-line);
  border-radius: 8px;
  background: #ffffff;
}

.processing-daily-view .processing-detail-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 15px;
}

.processing-daily-view .processing-detail-panel > *,
.processing-daily-view .processing-detail-section-head,
.processing-daily-view .processing-detail-metrics,
.processing-daily-view .processing-detail-delivery,
.processing-daily-view .processing-work-history,
.processing-daily-view .processing-work-history-list,
.processing-daily-view .processing-work-history-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.processing-daily-view .processing-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-daily-view .processing-detail-section-head > div {
  display: grid;
  gap: 2px;
}

.processing-daily-view .processing-detail-section-head strong {
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-detail-section-head span {
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 750;
}

.processing-daily-view .processing-detail-section-head > b {
  border-radius: 4px;
  padding: 4px 7px;
  background: var(--processing-teal-soft);
  color: var(--processing-teal-dark);
  font-size: 10px;
}

.processing-daily-view .processing-process-tabs {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.processing-daily-view .processing-process-tabs button {
  min-height: 52px;
  border-color: var(--processing-line);
  border-radius: 6px;
  padding: 7px 10px;
}

.processing-daily-view .processing-process-tabs button.is-active {
  border-color: var(--processing-teal);
  box-shadow: inset 3px 0 0 var(--processing-teal);
}

.processing-daily-view .processing-process-tabs button.is-running,
.processing-daily-view .processing-process-tabs button.is-done {
  background: #ffffff;
}

.processing-daily-view .processing-process-tabs strong {
  font-size: 13px;
}

.processing-daily-view .processing-process-tabs span {
  font-size: 10px;
}

.processing-daily-view .processing-detail-metrics {
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 6px;
}

.processing-daily-view .processing-detail-metrics span {
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 9px;
  background: #f8faf9;
}

.processing-daily-view .processing-detail-metrics small {
  display: block;
  color: var(--processing-muted);
  font-size: 9px;
  font-weight: 750;
}

.processing-daily-view .processing-detail-metrics b {
  margin-top: 3px;
  color: var(--processing-ink);
  font-size: 17px;
}

.processing-daily-view .processing-detail-delivery {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--processing-line);
  padding-top: 12px;
}

.processing-daily-view .processing-detail-delivery > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processing-daily-view .processing-detail-delivery strong {
  font-size: 13px;
  font-weight: 900;
}

.processing-daily-view .processing-detail-delivery > div:first-child span {
  color: var(--processing-muted);
  font-size: 10px;
  font-weight: 750;
}

.processing-daily-view .processing-work-history {
  gap: 8px;
  border-color: var(--processing-line);
  border-radius: 7px;
  padding: 11px;
  box-shadow: none;
}

.processing-daily-view .processing-work-history-head strong {
  font-size: 15px;
}

.processing-daily-view .processing-work-history-head span {
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
}

.processing-daily-view .processing-work-history-row {
  grid-template-columns: 26px minmax(130px, 1fr) repeat(4, minmax(42px, 0.32fr)) auto auto;
  gap: 5px;
  border-color: var(--processing-line);
  border-radius: 6px;
  padding: 7px;
  background: #f8faf9;
}

.processing-daily-view .processing-work-history-row > b {
  width: 24px;
  height: 24px;
  background: #e7efeb;
  color: #476254;
  font-size: 10px;
}

.processing-daily-view .processing-work-history-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-work-history-row span,
.processing-daily-view .processing-work-history-row small,
.processing-daily-view .processing-work-history-row em {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-daily-view .processing-work-history-edit-button {
  height: 28px;
  border-color: var(--processing-line);
  border-radius: 5px;
  padding: 0 7px;
  font-size: 10px;
}

.processing-daily-view .processing-active-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 440px;
  overflow: hidden;
}

.processing-daily-view .processing-active-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--processing-line);
}

.processing-daily-view .processing-active-panel > header > div {
  display: grid;
  gap: 2px;
}

.processing-daily-view .processing-active-panel > header small {
  color: var(--processing-muted);
  font-size: 9px;
  font-weight: 750;
}

.processing-daily-view .processing-active-panel > header strong {
  font-size: 16px;
  font-weight: 900;
}

.processing-daily-view .processing-active-panel > header > span {
  color: var(--processing-teal-dark);
  font-size: 10px;
  font-weight: 850;
}

.processing-daily-view .processing-active-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.processing-daily-view .processing-detail-worker {
  gap: 5px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.processing-daily-view .processing-detail-worker small {
  color: var(--processing-muted);
  font-size: 10px;
}

.processing-daily-view .processing-detail-worker input {
  min-height: 46px;
  border-color: var(--processing-line);
  border-radius: 6px;
  font-size: 21px;
  text-align: right;
}

.processing-daily-view .processing-detail-times {
  grid-template-columns: 1fr;
  gap: 6px;
}

.processing-daily-view .processing-detail-times > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--processing-line);
  border-radius: 6px;
  padding: 9px;
  background: #f8faf9;
}

.processing-daily-view .processing-detail-times small {
  color: var(--processing-muted);
  font-size: 9px;
  font-weight: 750;
}

.processing-daily-view .processing-detail-times > span b {
  margin: 0;
  font-size: 11px;
}

.processing-daily-view .processing-active-note {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--processing-teal);
  padding: 8px 10px;
  background: var(--processing-teal-soft);
}

.processing-daily-view .processing-active-note strong {
  color: var(--processing-teal-dark);
  font-size: 11px;
  font-weight: 850;
}

.processing-daily-view .processing-active-note span {
  color: #52716b;
  font-size: 9px;
  font-weight: 700;
}

.processing-daily-view .processing-active-panel > footer {
  border-top: 1px solid var(--processing-line);
  padding: 12px;
  background: #f2f7f5;
}

.processing-daily-view .processing-detail-start {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--processing-teal);
  border-radius: 6px;
  background: var(--processing-teal);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.processing-daily-view .processing-end-dialog {
  gap: 9px;
  border: 1px solid #9fc9c3;
  border-radius: 7px;
  padding: 10px;
  background: #f3faf8;
  box-shadow: none;
}

.processing-daily-view .processing-end-dialog-head {
  align-items: start;
  flex-direction: column;
  gap: 2px;
}

.processing-daily-view .processing-end-dialog-head strong {
  font-size: 14px;
}

.processing-daily-view .processing-end-current {
  grid-template-columns: 1fr;
  gap: 4px;
}

.processing-daily-view .processing-end-current span {
  min-height: 0;
  border: 0;
  border-bottom: 1px solid #d7e6e2;
  border-radius: 0;
  padding: 5px 0;
  background: transparent;
}

.processing-daily-view .processing-end-current b {
  display: inline;
  margin-left: 6px;
  font-size: 13px;
}

.processing-daily-view .processing-end-dialog input {
  min-height: 48px;
  font-size: 22px;
}

.processing-daily-view .processing-end-dialog-actions {
  grid-template-columns: 0.65fr 1fr;
  gap: 5px;
}

.processing-daily-view .processing-end-dialog-actions button {
  min-height: 40px;
  border-radius: 6px;
  font-size: 12px;
}

body.processing-daily-fullscreen-mode .processing-daily-view .processing-kiosk-header {
  min-height: 68px;
  padding: 10px 14px;
}

body.processing-daily-fullscreen-mode .processing-daily-view .processing-kiosk-body {
  padding: 14px;
}

body.processing-daily-fullscreen-mode .processing-daily-view .processing-start-stage {
  min-height: 0;
}

@media (max-width: 1120px) {
  .processing-daily-view .processing-kiosk-header {
    grid-template-columns: minmax(190px, 1fr) auto;
  }

  .processing-daily-view .processing-session-state {
    display: none;
  }

  .processing-daily-view .processing-card {
    grid-template-columns: 28px minmax(210px, 1fr) minmax(190px, 0.8fr) 54px;
    grid-template-areas:
      "marker title facts action"
      "centers centers centers centers";
  }

  .processing-daily-view .processing-detail-metrics {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
  }
}

@media (max-width: 900px) {
  .processing-daily-view .processing-setup-layout,
  .processing-daily-view .processing-detail-layout {
    grid-template-columns: 1fr;
  }

  .processing-daily-view .processing-setup-summary,
  .processing-daily-view .processing-active-panel {
    min-height: 0;
  }

  .processing-daily-view .processing-queue-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .processing-daily-view .processing-kiosk-shell {
    min-height: calc(100vh - 20px);
    border-radius: 8px;
  }

  .processing-daily-view .processing-kiosk-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .processing-daily-view .processing-kiosk-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .processing-daily-view .processing-kiosk-actions button,
  .processing-daily-view .processing-kiosk-date,
  .processing-daily-view .processing-kiosk-center {
    flex: 0 0 auto;
  }

  .processing-daily-view .processing-kiosk-body {
    padding: 10px;
  }

  .processing-daily-view .processing-page-heading strong {
    font-size: 21px;
  }

  .processing-daily-view .processing-line-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-daily-view .processing-round-choice-grid {
    grid-template-columns: 1fr;
  }

  .processing-daily-view .processing-start-button {
    min-height: 48px;
    font-size: 15px;
  }

  .processing-daily-view .processing-barcode-panel {
    grid-template-columns: 1fr 1fr;
  }

  .processing-daily-view .processing-barcode-panel label,
  .processing-daily-view .processing-barcode-panel small {
    grid-column: 1 / -1;
  }

  .processing-daily-view .processing-product-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .processing-daily-view .processing-queue-summary {
    width: 100%;
    justify-content: space-between;
  }

  .processing-daily-view .processing-card {
    grid-template-columns: 28px minmax(0, 1fr) 50px;
    grid-template-areas:
      "marker title action"
      "facts facts facts"
      "centers centers centers";
  }

  .processing-daily-view .processing-card-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .processing-daily-view .processing-card-facts span {
    text-align: center;
  }

  .processing-daily-view .processing-detail-heading {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .processing-daily-view .processing-detail-heading > span {
    grid-column: 2;
    justify-self: start;
  }

  .processing-daily-view .processing-detail-heading strong {
    font-size: 19px;
  }

  .processing-daily-view .processing-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-daily-view .processing-work-history-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }

  .processing-daily-view .processing-work-history-row > div:nth-of-type(n + 2),
  .processing-daily-view .processing-work-history-row > em {
    display: none;
  }

  .processing-daily-view .processing-work-history-edit-button {
    grid-column: 3;
    grid-row: 1;
  }

  .processing-daily-view .processing-work-history-edit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .processing-daily-view .processing-line-choice-grid {
    grid-template-columns: 1fr;
  }

  .processing-daily-view .processing-queue-summary {
    gap: 8px;
  }

  .processing-daily-view .processing-card {
    grid-template-columns: 26px minmax(0, 1fr) 46px;
    padding: 8px;
  }

  .processing-daily-view .processing-detail-metrics {
    grid-template-columns: 1fr 1fr;
  }
}