@import url("./base.css");

:root {
  --page-bg: #edf1f4;
  --surface: #f8fafb;
  --panel: #ffffff;
  --text-main: #17212b;
  --text-muted: #687582;
  --line: #d8e0e6;
  --sidebar: #111d28;
  --sidebar-soft: #172837;
  --cobalt: #2864e8;
  --teal: #16aa96;
  --amber: #d39528;
  --focus: #3e7cff;
  --topbar-height: 66px;
}

[data-permission-denied="true"] {
  display: none !important;
}

[data-app-shell][hidden] {
  display: none !important;
}

[data-formula-ratio-field][hidden] {
  display: none !important;
}

.hardness-conditional-field[hidden],
.hardness-not-applicable[hidden] {
  display: none !important;
}

.hardness-not-applicable {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 13px 14px;
  color: #536875;
  background: #f1f5f7;
  border: 1px solid #d6e0e5;
  border-left: 3px solid #2864e8;
  border-radius: 4px;
}

.hardness-not-applicable strong {
  color: #263640;
  font-size: 13px;
}

.hardness-not-applicable span {
  font-size: 10px;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: #edf2f5;
  background-image: linear-gradient(rgba(63, 95, 115, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 95, 115, .055) 1px, transparent 1px);
  background-size: 32px 32px;
}

.login-screen[hidden] {
  display: none;
}

.login-panel {
  width: min(420px, 100%);
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfdbe2;
  border-radius: 7px;
  box-shadow: 0 24px 70px rgba(17, 38, 52, .18);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 16px 22px;
  color: #fff;
  background: #102331;
}

.login-brand .brand-mark {
  width: 46px;
  height: 46px;
}

.login-brand > span:last-child {
  display: grid;
  gap: 4px;
}

.login-brand strong {
  font-size: 18px;
}

.login-brand small {
  color: #8fb2c8;
  font-size: 11px;
}

.login-heading {
  display: grid;
  gap: 5px;
  padding: 25px 24px 10px;
}

.login-heading > small {
  color: var(--cobalt);
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.login-heading h1 {
  margin: 0;
  color: #172a36;
  font-size: 29px;
}

.login-heading p {
  margin: 0;
  color: #778791;
  font-size: 12px;
}

.login-form {
  display: grid;
  gap: 15px;
  padding: 18px 24px 24px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: #586a75;
  font-size: 12px;
  font-weight: 700;
}

.login-form input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: #263640;
  background: #fff;
  border: 1px solid #cad7df;
  border-radius: 4px;
  outline: 0;
  font-size: 14px;
}

.login-form input:focus {
  border-color: #7299e7;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, .1);
}

.login-form .command-button {
  width: 100%;
  min-height: 44px;
}

.login-error {
  min-height: 16px;
  margin: -4px 0;
  color: #9a4f45;
  font-size: 11px;
}

.login-initial-password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 24px;
  color: #687984;
  background: #f4f7f9;
  border-top: 1px solid #dce5ea;
}

.login-initial-password span {
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 9px;
}

.login-initial-password strong {
  color: #354a57;
  font-size: 12px;
}

.theme-precision {
  --sidebar-width: 268px;
}

.sidebar {
  color: #dce6ef;
  background:
    linear-gradient(180deg, rgba(40, 100, 232, .08), transparent 26%),
    var(--sidebar);
  border-right: 1px solid #253745;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(35, 202, 175, .6), transparent);
  pointer-events: none;
}

.brand-lockup {
  height: 96px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand-mark {
  width: 46px;
  height: 46px;
  padding: 3px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
}

.brand-copy {
  gap: 5px;
  margin-left: 13px;
}

.brand-copy strong {
  color: #f5f8fb;
  font-size: 16px;
}

.brand-copy small {
  color: #7291a8;
  font-size: 11px;
  font-weight: 600;
}

.nav-search {
  height: 40px;
  margin: 18px 18px 10px;
  color: #8ca2b3;
  background: #0c1720;
  border: 1px solid #263847;
  border-radius: 5px;
}

.nav-search > span {
  width: 38px;
}

.nav-search .icon {
  width: 16px;
  height: 16px;
}

.nav-search input {
  height: 38px;
  padding: 0 44px 0 0;
  font-size: 13px;
}

.nav-search small {
  color: #5f778a;
  font-size: 10px;
}

.app-nav {
  gap: 3px;
  padding: 4px 14px 12px;
}

.nav-item {
  min-height: 50px;
  padding: 0 10px;
  color: #8ea4b6;
  border: 1px solid transparent;
  border-radius: 5px;
}

.nav-item:hover {
  color: #eef7ff;
  background: rgba(255, 255, 255, .04);
}

.nav-item.is-active {
  color: #fff;
  background: var(--sidebar-soft);
  border-color: #294255;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -15px;
  width: 3px;
  background: var(--teal);
  box-shadow: 0 0 14px rgba(22, 170, 150, .7);
}

.nav-icon .icon {
  width: 19px;
  height: 19px;
}

.nav-item.is-active .nav-icon {
  color: #35d6bc;
}

.nav-indicator {
  background: #4b6578;
  border-radius: 50%;
}

.nav-item.is-active .nav-indicator {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(22, 170, 150, .12);
}

.sidebar-footer {
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-account-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}

.sidebar-logout {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #93a9b7;
  background: #173244;
  border: 1px solid #2b4a5d;
  border-radius: 4px;
}

.sidebar-logout:hover {
  color: #fff;
  border-color: #4a7087;
}

.sidebar-logout .icon {
  width: 16px;
  height: 16px;
}

.user-security-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  color: #6f8ca0;
}

.user-security-icon .icon {
  width: 15px;
  height: 15px;
}

.user-chip:hover .user-security-icon,
.user-chip:focus-visible .user-security-icon {
  color: #35d6bc;
}

.connection-state {
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  color: #7f97a9;
}

.connection-state b {
  color: #d6e2eb;
}

.connection-state small {
  margin-top: 3px;
}

.status-light {
  background: #29d4a9;
  box-shadow: 0 0 0 4px rgba(41, 212, 169, .12), 0 0 14px rgba(41, 212, 169, .65);
}

.user-chip {
  gap: 10px;
  height: 52px;
  padding: 0 10px;
  color: #8098a9;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.user-chip:hover {
  background: rgba(255, 255, 255, .04);
}

.avatar {
  color: #d8efff;
  background: #20384b;
  border: 1px solid #36566c;
  border-radius: 4px;
}

.user-copy b {
  color: #e8f0f6;
}

.user-copy small {
  margin-top: 3px;
}

.topbar {
  height: var(--topbar-height);
  padding: 0 32px;
  color: #596774;
  background: rgba(248, 250, 251, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar-leading {
  gap: 10px;
}

.location {
  gap: 9px;
}

.location b {
  color: #b0bac2;
}

.location strong {
  color: var(--text-main);
}

.icon-button {
  color: #687783;
  border: 1px solid transparent;
  border-radius: 5px;
}

.icon-button:hover {
  color: var(--cobalt);
  background: #fff;
  border-color: var(--line);
}

.topbar-actions {
  gap: 10px;
}

.system-clock {
  margin-right: 6px;
  color: #6f7c87;
}

.standalone-badge {
  color: #536473;
  font-size: 14px;
  white-space: nowrap;
}

.notice-dot {
  background: var(--amber);
  border: 2px solid var(--surface);
}

.design-select select {
  color: #394753;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(400px, 1fr);
  gap: 18px;
  padding: 32px 36px 36px;
  background:
    linear-gradient(rgba(25, 47, 65, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 47, 65, .025) 1px, transparent 1px),
    var(--page-bg);
  background-size: 28px 28px;
}

.page-intro {
  min-height: 104px;
}

.eyebrow {
  gap: 9px;
  margin-bottom: 10px;
  color: var(--cobalt);
}

.eyebrow-line {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--teal));
}

.title-block h1 {
  color: #131e28;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 37px;
}

.title-block p {
  margin-top: 9px;
  color: var(--text-muted);
}

.module-stamp {
  min-width: 172px;
  padding: 2px 0 4px 24px;
  color: #83909a;
  border-left: 1px solid #cbd4db;
}

.module-stamp strong {
  margin: 3px 0 5px;
  color: #25333f;
}

.module-stamp small {
  gap: 7px;
  color: var(--teal);
}

.module-stamp small i {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(22, 170, 150, .11);
}

.work-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .65fr);
  grid-template-rows: minmax(230px, 1fr) minmax(150px, .58fr);
  gap: 16px;
  min-height: 420px;
}

.frame-main {
  grid-row: 1 / 3;
}

.module-frame {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  background: var(--panel);
  border: 1px solid #d7e0e6;
  border-radius: 6px;
  box-shadow: 0 5px 16px rgba(34, 53, 66, .055);
}

.module-frame > header {
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e2e8ec;
}

.module-frame > header span {
  color: #25323d;
  font-size: 14px;
}

.module-frame > header small {
  color: #98a3ac;
  font-size: 10px;
}

.empty-canvas {
  color: #c2cbd2;
  background:
    radial-gradient(circle at center, rgba(40, 100, 232, .035), transparent 52%),
    linear-gradient(rgba(31, 54, 70, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 54, 70, .035) 1px, transparent 1px),
    #fbfcfd;
  background-size: auto, 22px 22px, 22px 22px, auto;
}

.empty-canvas::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cobalt), var(--teal));
  opacity: .88;
}

.empty-canvas strong {
  margin-top: 14px;
  color: #65737e;
  font-size: 14px;
}

.empty-canvas > small {
  margin-top: 5px;
  color: #a4afb7;
}

.canvas-glyph {
  gap: 7px;
  height: 38px;
}

.canvas-glyph span {
  width: 12px;
  background: #d4dce2;
  border: 1px solid #c7d1d8;
}

.canvas-glyph span:nth-child(1) { height: 18px; }
.canvas-glyph span:nth-child(2) { height: 34px; background: rgba(40, 100, 232, .16); border-color: rgba(40, 100, 232, .3); }
.canvas-glyph span:nth-child(3) { height: 25px; background: rgba(22, 170, 150, .14); border-color: rgba(22, 170, 150, .28); }

.status-rings {
  gap: 8px;
  height: 34px;
}

.status-rings i {
  width: 12px;
  height: 12px;
  border: 1px solid #b9c6cf;
  border-radius: 50%;
}

.status-rings i:first-child {
  border-color: var(--teal);
  box-shadow: 0 0 0 5px rgba(22, 170, 150, .08);
}

.line-sequence {
  gap: 6px;
  height: 30px;
}

.line-sequence i {
  width: 32px;
  height: 3px;
  background: #d5dde3;
}

.line-sequence i:first-child { background: var(--cobalt); }
.line-sequence i:nth-child(2) { background: var(--teal); }
.line-sequence i:nth-child(3) { background: var(--amber); }

.app-shell.is-collapsed .brand-lockup,
.app-shell.is-collapsed .connection-state,
.app-shell.is-collapsed .user-chip,
.app-shell.is-collapsed .nav-search {
  justify-content: center;
}

.app-shell.is-collapsed .brand-lockup {
  padding: 0;
}

.app-shell.is-collapsed .user-security-icon {
  display: none;
}

.app-shell.is-collapsed .nav-search {
  width: 44px;
  margin-right: auto;
  margin-left: auto;
}

.app-shell.is-collapsed .nav-item.is-active::before {
  left: -15px;
}

.home-workspace,
.orders-workspace,
.sample-workspace,
.production-workspace,
.product-workspace,
.formula-workspace,
.standard-workspace,
.experiment-workspace,
.inventory-workspace,
.asset-workspace,
.user-workspace,
.data-workspace,
.order-panel,
.order-dialog form {
  min-width: 0;
}

.home-workspace[hidden],
.orders-workspace[hidden],
.sample-workspace[hidden],
.production-workspace[hidden],
.product-workspace[hidden],
.formula-workspace[hidden],
.standard-workspace[hidden],
.experiment-workspace[hidden],
.inventory-workspace[hidden],
.asset-workspace[hidden],
.user-workspace[hidden],
.data-workspace[hidden],
.order-panel[hidden],
.order-tools > [hidden],
.order-filter[hidden],
.filter-empty[hidden],
.work-grid[hidden] {
  display: none !important;
}

body[data-module="home"] .workspace,
body[data-module="orders"] .workspace,
body[data-module="samples"] .workspace,
body[data-module="production"] .workspace,
body[data-module="products"] .workspace,
body[data-module="formulas"] .workspace,
body[data-module="standards"] .workspace,
body[data-module="experiments"] .workspace,
body[data-module="inventory"] .workspace,
body[data-module="equipment"] .workspace,
body[data-module="users"] .workspace,
body[data-module="data"] .workspace {
  grid-template-rows: auto minmax(0, 1fr);
}

.orders-workspace,
.sample-workspace,
.production-workspace,
.product-workspace,
.formula-workspace,
.standard-workspace,
.experiment-workspace,
.inventory-workspace,
.asset-workspace,
.user-workspace,
.data-workspace {
  display: grid;
  grid-template-rows: auto minmax(400px, 1fr);
  gap: 14px;
  min-height: 520px;
}

.home-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.home-kpi-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5e0e6;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(33, 52, 65, .05);
}

.home-kpi-band > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 10px;
  min-height: 76px;
  padding: 13px 16px;
  border-right: 1px solid #e0e7eb;
}

.home-kpi-band > span:last-child {
  border-right: 0;
}

.home-kpi-band small {
  color: #667984;
  font-size: 11px;
  font-weight: 700;
}

.home-kpi-band strong {
  grid-row: span 2;
  color: #1f3440;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 29px;
}

.home-kpi-band i {
  color: #8a99a2;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 9px;
  font-style: normal;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.home-panel {
  display: grid;
  grid-template-rows: 56px minmax(170px, auto);
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5e0e6;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(33, 52, 65, .05);
}

.home-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid #e0e7eb;
}

.home-panel > header > div {
  display: grid;
  gap: 2px;
}

.home-panel > header small {
  color: var(--cobalt);
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 9px;
}

.home-panel > header h2 {
  margin: 0;
  color: #263944;
  font-size: 14px;
}

.home-panel > header b {
  color: #71828d;
  font-size: 11px;
  font-weight: 600;
}

.home-order-rhythm,
.home-schedule-panel {
  grid-column: span 7;
}

.home-sample-panel,
.home-inventory-panel {
  grid-column: span 5;
}

.home-mold-panel {
  grid-column: 1 / -1;
}

.home-timeline-section {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding-top: 2px;
}

.home-timeline-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}

.home-timeline-heading > div {
  display: grid;
  gap: 2px;
}

.home-timeline-heading small {
  color: var(--cobalt);
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 9px;
}

.home-timeline-heading h2 {
  margin: 0;
  color: #263944;
  font-size: 16px;
}

.home-timeline-heading > b {
  color: #71828d;
  font-size: 11px;
  font-weight: 600;
}

.home-schedule-gantt {
  min-height: 250px;
}

.home-panel-body {
  min-width: 0;
  padding: 14px 16px;
}

.home-empty {
  display: grid;
  place-items: center;
  min-height: 142px;
  color: #8a98a1;
  font-size: 11px;
}

.home-rhythm-list {
  display: grid;
  gap: 16px;
  padding: 8px 0;
}

.home-rhythm-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
}

.home-rhythm-row > span {
  color: #566b77;
  font-size: 11px;
  font-weight: 700;
}

.home-rhythm-row > div {
  height: 7px;
  overflow: hidden;
  background: #e7ecef;
  border-radius: 2px;
}

.home-rhythm-row i {
  display: block;
  height: 100%;
  min-width: 0;
}

.home-rhythm-row i.is-pending {
  background: #d5a33a;
}

.home-rhythm-row i.is-running {
  background: var(--cobalt);
}

.home-rhythm-row i.is-done {
  background: #20a58e;
}

.home-rhythm-row > b {
  color: #263a46;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 13px;
  text-align: right;
}

.home-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.home-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 10px;
  background: #f7f9fa;
  border-left: 2px solid #c8d7df;
}

.home-list-item > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.home-list-item strong,
.home-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-item strong {
  color: #2c404c;
  font-size: 11px;
}

.home-list-item small {
  color: #82919a;
  font-size: 9px;
}

.home-list-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #516975;
  background: #e9eff2;
  border-radius: 3px;
  font-size: 9px;
}

.home-list-badge.is-pending {
  color: #87631d;
  background: #fbf1d9;
}

.home-list-badge.is-running {
  color: #2759b5;
  background: #e9effc;
}

.home-list-badge.is-danger {
  color: #965147;
  background: #f8eae7;
}

.order-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.order-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  flex: 0 1 480px;
  min-width: 400px;
  padding: 4px;
  background: #dfe5e9;
  border: 1px solid #d3dbe1;
  border-radius: 6px;
}

.sample-tabs {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  flex-basis: 480px;
}

.production-tabs {
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex-basis: 360px;
}

.experiment-tabs {
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex-basis: 380px;
}

.inventory-tabs {
  grid-template-columns: repeat(4, minmax(124px, 1fr));
  flex-basis: 680px;
}

.inventory-inspection-panel {
  margin-top: 16px;
}

.asset-tabs {
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex-basis: 360px;
}

.data-tabs {
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  flex-basis: 360px;
}

.order-tab {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  color: #677580;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
}

.order-tab:hover {
  color: #2c3a45;
  background: rgba(255, 255, 255, .55);
}

.order-tab.is-active {
  color: #1c2b36;
  background: #fff;
  border-color: #cad4dc;
  box-shadow: 0 3px 8px rgba(36, 55, 69, .08);
}

.order-tab > span:nth-child(2) {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-tab > span:first-child,
.order-tab > span:first-child .icon {
  width: 18px;
  height: 18px;
}

.order-tab.is-active > span:first-child {
  color: var(--cobalt);
}

.order-tab small {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 20px;
  color: #8996a0;
  background: #e7ecef;
  border-radius: 3px;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.order-tab.is-active small {
  color: var(--cobalt);
  background: rgba(40, 100, 232, .09);
}

.order-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.order-query {
  display: flex;
  align-items: center;
  width: 230px;
  height: 42px;
  color: #73818c;
  background: #fff;
  border: 1px solid #d3dde4;
  border-radius: 5px;
}

.order-query > span {
  display: grid;
  place-items: center;
  width: 38px;
  flex: 0 0 auto;
}

.order-query .icon {
  width: 16px;
  height: 16px;
}

.order-query input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}

.order-query input::placeholder {
  color: #9aa5ad;
}

.order-filter select {
  width: 112px;
  height: 42px;
  padding: 0 10px;
  color: #55646f;
  background: #fff;
  border: 1px solid #d3dde4;
  border-radius: 5px;
  outline: 0;
  font-size: 13px;
}

.order-status-filter {
  position: relative;
  flex: 0 0 auto;
}

.order-status-filter[hidden] {
  display: none !important;
}

.order-status-filter summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-width: 158px;
  height: 42px;
  padding: 0 10px 0 12px;
  color: #55646f;
  background: #fff;
  border: 1px solid #d3dde4;
  border-radius: 5px;
  outline: 0;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.order-status-filter summary::-webkit-details-marker {
  display: none;
}

.order-status-filter summary:focus-visible {
  border-color: #7299e7;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, .1);
}

.order-status-filter summary .icon {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.order-status-filter[open] summary .icon {
  transform: rotate(180deg);
}

.order-status-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 18;
  display: grid;
  gap: 3px;
  min-width: 168px;
  padding: 7px;
  background: #fff;
  border: 1px solid #cad6de;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(27, 48, 62, .16);
}

.order-status-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 8px;
  color: #465965;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.order-status-options label:hover {
  background: #eef4f7;
}

.order-status-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cobalt);
}

.command-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  color: #485964;
  background: #fff;
  border: 1px solid #ced9e0;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.command-button:hover {
  color: var(--cobalt);
  border-color: #9cb8e8;
}

.command-button.is-primary {
  color: #fff;
  background: var(--cobalt);
  border-color: var(--cobalt);
  box-shadow: 0 5px 12px rgba(40, 100, 232, .18);
}

.command-button.is-primary:hover {
  color: #fff;
  background: #1e57d1;
}

.command-button:disabled {
  color: #91a0aa;
  background: #e7ecef;
  border-color: #d7e0e5;
  box-shadow: none;
  cursor: not-allowed;
}

.command-button .icon {
  width: 16px;
  height: 16px;
}

.button-symbol {
  font-family: Bahnschrift, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.panel-kicker,
.order-dialog header small,
.record-dialog header small {
  color: #6f8a9d;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.order-panel {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d6e0e6;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(33, 52, 65, .055);
}

.sample-empty-frame {
  min-height: 0;
}

.production-empty-frame {
  min-height: 0;
}

.formula-empty-frame {
  min-height: 0;
}

.formula-command-bar,
.formula-tools {
  width: 100%;
}

.formula-command-bar {
  justify-content: flex-end;
}

.formula-tools .order-query {
  flex: 1 1 auto;
  width: auto;
}

.formula-table {
  min-width: 1040px;
}

.standard-command-bar,
.standard-tools {
  width: 100%;
}

.standard-command-bar {
  justify-content: flex-end;
}

.standard-tools .order-query {
  flex: 1 1 auto;
  width: auto;
}

.standard-table {
  min-width: 820px;
}

.standard-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.standard-row-actions .table-action {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.record-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.record-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.record-row-action[hidden] {
  display: none !important;
}

.record-row-action .icon {
  width: 13px;
  height: 13px;
}

.record-row-action.is-delete {
  color: #9d3f36;
  border-color: #e8c8c3;
  background: #fff8f7;
}

.record-row-action.is-delete:hover {
  color: #7e2e28;
  border-color: #dba8a1;
  background: #fceae8;
}

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

.deletion-table {
  min-width: 1120px;
}

.experiment-table {
  min-width: 900px;
}

.compression-experiment-table {
  min-width: 1180px;
}

.raw-material-table {
  min-width: 1120px;
}

.finished-product-table {
  min-width: 880px;
}

.batching-table {
  min-width: 1160px;
}

.record-group-row > td {
  padding: 0;
  background: #edf3f6;
  border-bottom-color: #d2dee5;
}

.record-group-row:hover > td {
  background: #e9f0f4;
}

.record-group-toggle {
  display: grid;
  grid-template-columns: 24px minmax(210px, 1fr) minmax(530px, 2.4fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 13px;
  color: #40525f;
  text-align: left;
  background: transparent;
}

.record-group-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.record-group-chevron {
  display: grid;
  place-items: center;
  color: #537084;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.record-group-chevron .icon {
  width: 17px;
  height: 17px;
}

.record-group-row.is-expanded .record-group-chevron {
  transform: rotate(0);
}

.record-group-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.record-group-identity strong {
  overflow: hidden;
  color: #1f3442;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-group-identity small {
  overflow: hidden;
  color: #758895;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-group-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  align-items: center;
  min-width: 0;
  color: #617681;
  font-size: 11px;
}

.record-group-summary > span {
  padding: 0 13px;
  border-left: 1px solid #cfdae0;
  white-space: nowrap;
}

.record-group-summary b {
  color: #245f85;
  font-size: 12px;
}

.grouped-record-row[hidden] {
  display: none !important;
}

.grouped-record-row > td:first-child {
  padding-left: 28px;
  border-left: 3px solid #8db1c8;
}

.grouped-record-row:last-child > td {
  border-bottom-color: #cddae2;
}

.mold-table {
  min-width: 1180px;
}

.user-command-bar,
.user-tools {
  width: 100%;
}

.user-command-bar {
  justify-content: flex-end;
}

.user-tools .order-query {
  flex: 1 1 auto;
  width: auto;
}

.user-panel-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.role-permission-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  background: #f8fafb;
  border-bottom: 1px solid #dce4e9;
}

.role-permission-guide > span {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 68px;
  padding: 12px 14px;
  border-right: 1px solid #e0e7eb;
}

.role-permission-guide > span:last-child {
  grid-column: span 2;
  border-right: 0;
}

.role-permission-guide > span:nth-child(n + 5) {
  border-top: 1px solid #e0e7eb;
}

.role-permission-guide b {
  color: #2d414d;
  font-size: 12px;
}

.role-permission-guide small {
  color: #7c8b95;
  font-size: 10px;
  line-height: 1.55;
}

.user-table {
  min-width: 980px;
}

.audit-table {
  min-width: 1040px;
}

.deletion-table {
  min-width: 900px;
}

.user-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.user-fixed-permission {
  color: #58717f;
  font-size: 11px;
  font-weight: 700;
}

.user-row-actions .table-action:disabled {
  color: #a4b0b7;
  background: #edf1f3;
  border-color: #d9e1e6;
  cursor: not-allowed;
}

.user-row-actions .table-action.is-danger {
  color: #9d3f36;
  border-color: #e8c8c3;
  background: #fff8f7;
}

.user-row-actions .table-action.is-danger:hover:not(:disabled) {
  color: #7e2e28;
  border-color: #dba8a1;
  background: #fceae8;
}

.mold-panel-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.mold-maintenance-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  border-bottom: 1px solid #dce4e9;
  background: #f8fafb;
}

.mold-maintenance-band > span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 11px 14px;
  border-right: 1px solid #e0e7eb;
}

.mold-maintenance-band > span:last-child {
  border-right: 0;
}

.mold-maintenance-band small {
  color: #7f8d96;
  font-size: 10px;
}

.mold-maintenance-band strong {
  color: #2c3e49;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 19px;
}

.mold-maintenance-reminder {
  display: inline-flex;
  min-height: 22px;
  padding: 4px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.mold-maintenance-reminder.is-overdue,
.mold-maintenance-reminder.is-today {
  color: #965147;
  background: #f8ece9;
}

.mold-maintenance-reminder.is-soon {
  color: #8b651b;
  background: #fbf3df;
}

.mold-maintenance-reminder.is-planned,
.mold-maintenance-reminder.is-none {
  color: #4d6675;
  background: #edf2f5;
}

.production-panel[data-production-view="schedule"] {
  min-height: 620px;
}

.schedule-view-body {
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.schedule-gantt {
  min-width: 0;
  padding: 14px 16px 16px;
  background: #f8fafb;
  border-bottom: 1px solid #dce4e9;
}

.schedule-gantt > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

.schedule-gantt > header > div:first-child {
  display: grid;
  gap: 3px;
}

.schedule-gantt > header small {
  color: var(--cobalt);
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.schedule-gantt > header strong {
  color: #2d3d48;
  font-size: 14px;
}

.schedule-gantt > header > div:last-child {
  display: flex;
  gap: 6px;
}

.calendar-nav,
.calendar-today {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  color: #546774;
  background: #fff;
  border: 1px solid #ced9e0;
  border-radius: 4px;
}

.calendar-nav {
  width: 32px;
  font-size: 22px;
}

.calendar-today {
  min-width: 48px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
}

.calendar-nav:hover,
.calendar-today:hover {
  color: var(--cobalt);
  border-color: #9db6e5;
}

.schedule-gantt-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #d9e2e7;
  border-radius: 5px;
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  user-select: none;
}

.schedule-gantt-scroll.is-dragging,
.schedule-gantt-scroll.is-dragging * {
  cursor: grabbing !important;
}

.schedule-gantt-board {
  min-width: calc(310px + var(--gantt-width));
  background: #fff;
}

.gantt-header,
.gantt-row {
  display: grid;
  grid-template-columns: 310px var(--gantt-width);
}

.gantt-corner,
.gantt-meta {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f2f5f7;
  border-right: 1px solid #d9e2e7;
}

.gantt-corner {
  display: grid;
  align-content: center;
  gap: 2px;
  height: 46px;
  padding: 0 12px;
}

.gantt-corner strong {
  color: #40515c;
  font-size: 11px;
}

.gantt-corner small {
  color: #89959d;
  font-size: 9px;
}

.gantt-days,
.gantt-track {
  display: grid;
  grid-template-columns: repeat(var(--gantt-days), 38px);
  width: var(--gantt-width);
}

.gantt-day-button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  height: 46px;
  padding: 0;
  color: #657681;
  background: #f6f8fa;
  border: 0;
  border-left: 1px solid #e1e7eb;
}

.gantt-day-button:hover {
  color: var(--cobalt);
  background: #edf3fd;
}

.gantt-day-button.is-today {
  color: #fff;
  background: var(--cobalt);
}

.gantt-day-button.is-month-start:not(.is-today) {
  color: #2459b5;
  background: #eaf1fc;
  border-left: 2px solid #7da2df;
}

.gantt-day-button b {
  font-size: 11px;
}

.gantt-day-button small {
  font-size: 9px;
  font-weight: 400;
}

.gantt-day-button.is-month-start small {
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 8px;
  font-weight: 700;
}

.gantt-row {
  min-height: 56px;
  border-top: 1px solid #e1e7eb;
}

.gantt-meta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #fff;
}

.gantt-meta > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.gantt-meta strong,
.gantt-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-meta strong {
  color: #2f404a;
  font-size: 11px;
}

.gantt-meta small {
  color: #87949c;
  font-size: 9px;
}

.gantt-track {
  align-items: center;
  min-height: 56px;
  background: repeating-linear-gradient(90deg, transparent 0 37px, #e7ecef 37px 38px);
}

.gantt-bar {
  z-index: 1;
  align-self: center;
  height: 28px;
  min-width: 0;
  margin: 0 2px;
  padding: 0 8px;
  overflow: hidden;
  color: #fff;
  background: var(--cobalt);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(29, 66, 139, .2);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-bar:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 1px;
}

.gantt-bar.is-running {
  background: var(--teal);
}

.gantt-bar.is-done {
  background: #7563ad;
}

.gantt-bar.is-cancelled {
  background: #9a6b66;
}

.gantt-bar:hover {
  filter: brightness(.94);
}

.gantt-empty {
  display: grid;
  place-items: center;
  min-height: 112px;
  color: #8a97a0;
  font-size: 12px;
}

.status-badge.is-cancelled {
  color: #87534e;
  background: #f6e9e7;
  border-color: #e2c2be;
}

.schedule-table-wrap {
  min-height: 240px;
}

.production-schedule-table {
  min-width: 1420px;
}

.sample-task-table {
  min-width: 1160px;
}

.sample-production-table,
.sample-shipping-table {
  min-width: 1100px;
}

.order-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 17px;
  border-bottom: 1px solid #e0e7eb;
}

.order-panel-head > div:first-child {
  display: grid;
  gap: 2px;
}

.order-panel-head h2 {
  margin: 0;
  color: #21313c;
  font-size: 15px;
}

.panel-kicker {
  color: var(--cobalt);
}

.panel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-meta b {
  color: #75838d;
  font-size: 12px;
  font-weight: 600;
}

.order-table-wrap {
  min-width: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab8c1 #edf1f3;
}

.order-table {
  width: 100%;
  min-width: 1030px;
  border-collapse: collapse;
  color: #3c4b56;
  font-size: 12px;
}

.order-table.is-wide {
  min-width: 1120px;
}

.order-table th,
.order-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #e4e9ec;
  text-align: left;
  vertical-align: middle;
}

.order-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 40px;
  color: #6c7a84;
  background: #f1f4f6;
  border-bottom-color: #d6e0e5;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.order-table tbody tr {
  transition: background 140ms ease;
}

.order-table tbody tr:hover {
  background: #f8fafb;
}

.finished-product-detail-row {
  cursor: pointer;
}

.finished-product-detail-row:focus-visible {
  position: relative;
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}

.product-detail-grid .computed-display {
  align-items: flex-start;
  overflow-wrap: anywhere;
  white-space: normal;
}

.order-table td > strong,
.order-table td > small {
  display: block;
  white-space: nowrap;
}

.order-table td > strong {
  color: #263640;
  font-size: 12px;
}

.order-table td > small {
  margin-top: 5px;
  color: #89959e;
  font-size: 10px;
}

.order-no,
.cost-total {
  color: #2457b8 !important;
  font-family: Bahnschrift, Consolas, monospace;
}

.order-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 130px;
}

.order-status-line b {
  color: #5c6c77;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 11px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.status-badge.is-running {
  color: #14645a;
  background: #e4f4f1;
  border-color: #b9dfd8;
}

.status-badge.is-pending {
  color: #8a6419;
  background: #fff4da;
  border-color: #efd99d;
}

.status-badge.is-done {
  color: #345ca6;
  background: #e9f0fd;
  border-color: #c5d6f4;
}

.progress-track {
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  background: #e2e8ec;
  border-radius: 2px;
}

.progress-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt), var(--teal));
}

.attention-text {
  color: #a56f12;
  font-weight: 700;
}

.table-action {
  min-width: 48px;
  height: 30px;
  padding: 0 9px;
  color: #315fb7;
  background: #eef3fd;
  border: 1px solid #ccd9f1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.table-action:hover {
  color: #fff;
  background: var(--cobalt);
  border-color: var(--cobalt);
}

.table-action.is-complete {
  color: #12685b;
  background: #e7f5f2;
  border-color: #b9ddd6;
}

.table-action.is-complete:hover {
  color: #fff;
  background: #148874;
  border-color: #148874;
}

.filter-empty td {
  height: 180px;
  padding: 0;
  color: #8b98a1;
}

.empty-table-message {
  position: sticky;
  left: 0;
  display: grid;
  place-items: center;
  width: min(100%, calc(100vw - 360px));
  height: 180px;
  text-align: center;
}

.order-table td.order-cost-product > strong {
  font-size: 14px;
}

.order-dialog,
.record-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  color: #24333e;
  background: #fff;
  border: 1px solid #bccbd4;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(11, 25, 36, .28);
}

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

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

.work-order-dialog {
  width: min(1080px, calc(100vw - 32px));
}

.production-record-dialog,
.withdrawal-record-dialog,
.withdrawal-shipping-dialog,
.shipping-record-dialog {
  width: min(840px, calc(100vw - 32px));
}

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

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

.formula-quote-dialog {
  width: min(980px, calc(100vw - 32px));
}

.quote-history-dialog {
  width: min(1120px, calc(100vw - 32px));
}

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

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

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

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

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

.product-dialog .field-span-2 {
  grid-column: 1 / -1;
}

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

.user-dialog .field-span-2 {
  grid-column: 1 / -1;
}

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

.password-dialog-body {
  min-width: 0;
  overflow: auto;
}

.password-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.password-required-alert {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin: 20px 20px 0;
  padding: 13px 14px;
  color: #6e4c13;
  background: #fff8e8;
  border: 1px solid #e8cb8d;
  border-radius: 4px;
}

.password-required-alert > .icon {
  width: 22px;
  height: 22px;
  margin: 2px auto 0;
  color: #b2770d;
}

.password-required-alert strong {
  color: #4f390f;
  font-size: 13px;
}

.password-required-alert p,
.password-policy,
.password-form-error {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.password-policy {
  color: #6f7f89;
}

.password-form-error {
  min-height: 19px;
  color: #b33c34;
  font-weight: 700;
}

.password-dialog [data-password-logout] {
  margin-right: auto;
}

.password-required-alert[hidden],
.password-dialog [data-password-optional][hidden],
.password-dialog [data-password-logout][hidden] {
  display: none;
}

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

.permission-dialog-body {
  min-height: 0;
  padding: 16px 20px;
  overflow: auto;
}

.permission-role-setting {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
  background: #f6f9fa;
}

.permission-role-setting label {
  display: grid;
  gap: 6px;
  color: #435762;
  font-size: 12px;
  font-weight: 700;
}

.permission-role-setting select {
  height: 38px;
  padding: 0 36px 0 11px;
  border: 1px solid #cad7de;
  border-radius: 4px;
  color: #18303d;
  background: #fff;
}

.permission-role-setting > small {
  color: #6f818b;
  font-size: 11px;
  line-height: 1.6;
}


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

.dingtalk-dialog-body {
  min-width: 0;
  padding: 0 20px 20px;
  overflow: auto;
  background: #f8fafb;
}

.dingtalk-status-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  margin: 0 -20px;
  background: #fff;
  border-bottom: 1px solid #dce4e9;
}

.dingtalk-status-band > span {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px 16px;
  border-right: 1px solid #e0e7eb;
}

.dingtalk-status-band > span:last-child {
  border-right: 0;
}

.dingtalk-status-band small,
.dingtalk-section-head small,
.dingtalk-recipient-head small {
  color: #718692;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.dingtalk-status-band strong {
  color: #203642;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 15px;
}

.dingtalk-status-band strong.is-ready {
  color: #0b8e7c;
}

.dingtalk-status-band strong.is-warning {
  color: #a56e16;
}

.dingtalk-status-band strong.is-danger {
  color: #a9453d;
}

.dingtalk-section {
  padding: 16px 0 18px;
  border-bottom: 1px solid #dce4e9;
}

.dingtalk-section:last-of-type {
  border-bottom: 0;
}

.dingtalk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-bottom: 10px;
}

.dingtalk-section-head > div:first-child {
  display: grid;
  gap: 3px;
}

.dingtalk-section-head h3 {
  margin: 0;
  color: #263a46;
  font-size: 15px;
}

.dingtalk-section-state {
  color: #6c7e89;
  font-size: 11px;
  font-weight: 700;
}

.dingtalk-connection-grid {
  display: grid;
  grid-template-columns: minmax(160px, .75fr) minmax(220px, 1.35fr) minmax(220px, 1fr);
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.dingtalk-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: #435762;
  font-size: 12px;
  font-weight: 700;
}

.dingtalk-field-wide {
  grid-column: span 2;
}

.dingtalk-field input,
.dingtalk-field select,
.dingtalk-rule-tools input,
.dingtalk-rule-tools select,
.dingtalk-binding-input,
.dingtalk-recipient-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  color: #263640;
  background: #fff;
  border: 1px solid #cdd8df;
  border-radius: 4px;
  outline: 0;
  font-size: 13px;
}

.dingtalk-field input:focus,
.dingtalk-field select:focus,
.dingtalk-rule-tools input:focus,
.dingtalk-rule-tools select:focus,
.dingtalk-binding-input:focus,
.dingtalk-recipient-search input:focus {
  border-color: #7299e7;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, .09);
}

.dingtalk-field > small {
  min-height: 16px;
  color: #7d8d96;
  font-size: 10px;
  font-weight: 500;
}

.dingtalk-enable-field .switch-control,
.dingtalk-rule-toggle .switch-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.dingtalk-enable-field .switch-control input,
.dingtalk-rule-toggle .switch-control input {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 40px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.dingtalk-enable-field .switch-control > b,
.dingtalk-rule-toggle .switch-control > b {
  color: #52616c;
  font-size: 12px;
}

.dingtalk-test-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.dingtalk-test-field .command-button {
  min-width: 104px;
}

.dingtalk-table-wrap {
  min-width: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.dingtalk-table {
  width: 100%;
  border-collapse: collapse;
  color: #314550;
  font-size: 12px;
}

.dingtalk-table th,
.dingtalk-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e1e8ec;
}

.dingtalk-table thead th {
  color: #5c707c;
  background: #eef3f5;
  font-size: 11px;
  white-space: nowrap;
}

.dingtalk-table tbody tr:last-child > * {
  border-bottom: 0;
}

.dingtalk-table td strong,
.dingtalk-table td small {
  display: block;
}

.dingtalk-table td strong {
  color: #263a46;
  font-size: 12px;
}

.dingtalk-table td small {
  margin-top: 3px;
  color: #81909a;
  font-size: 10px;
}

.dingtalk-binding-table {
  min-width: 740px;
}

.dingtalk-binding-table th:nth-child(1) {
  width: 18%;
}

.dingtalk-binding-table th:nth-child(2) {
  width: 25%;
}

.dingtalk-binding-table th:nth-child(3) {
  width: 14%;
}

.dingtalk-binding-control {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.dingtalk-binding-clear {
  min-width: 54px;
}

.dingtalk-rule-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dingtalk-rule-tools label {
  position: relative;
  display: block;
  width: min(260px, 30vw);
}

.dingtalk-rule-tools label .icon,
.dingtalk-recipient-search .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: #71848f;
  transform: translateY(-50%);
}

.dingtalk-rule-tools input,
.dingtalk-recipient-search input {
  padding-left: 34px;
}

.dingtalk-rule-tools select {
  width: 126px;
}

.dingtalk-rule-table-wrap {
  max-height: 410px;
}

.dingtalk-rule-table {
  min-width: 800px;
}

.dingtalk-rule-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.dingtalk-rule-table th:nth-child(1) {
  width: 26%;
}

.dingtalk-rule-table th:nth-child(2) {
  width: 31%;
}

.dingtalk-rule-table th:nth-child(3) {
  width: 16%;
}

.dingtalk-rule-table tr.is-module-start > * {
  border-top: 2px solid #cddae2;
}

.dingtalk-module-label {
  color: #47616f;
  font-weight: 800;
}

.dingtalk-recipient-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: #35536a;
  background: #fff;
  border: 1px solid #cbd8df;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.dingtalk-recipient-trigger.has-recipients {
  color: #145c54;
  background: #eef9f6;
  border-color: #a9d9d0;
}

.dingtalk-recipient-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.dingtalk-rule-empty,
.dingtalk-delivery-empty,
.dingtalk-binding-empty {
  height: 88px;
  color: #7d8d96;
  text-align: center !important;
}

.dingtalk-delivery-table {
  min-width: 920px;
}

.dingtalk-delivery-table th:nth-child(1) {
  width: 155px;
}

.dingtalk-delivery-status {
  display: inline-flex !important;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  color: #526671;
  background: #edf2f5;
  border: 1px solid #d5e0e5;
  font-size: 10px !important;
  font-weight: 800;
}

.dingtalk-delivery-status.is-sent,
.dingtalk-delivery-status.is-success {
  color: #0b7468;
  background: #e8f7f3;
  border-color: #b8e0d8;
}

.dingtalk-delivery-status.is-failed,
.dingtalk-delivery-status.is-failure {
  color: #9d3f36;
  background: #fff1ef;
  border-color: #e8c8c3;
}

.dingtalk-delivery-status.is-pending {
  color: #94620f;
  background: #fff7e4;
  border-color: #ead39c;
}

.dingtalk-recipient-popover {
  position: fixed;
  z-index: 1200;
  width: min(360px, calc(100vw - 28px));
  max-height: min(480px, calc(100vh - 28px));
  overflow: hidden;
  background: #fff;
  border: 1px solid #bfcdd5;
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(14, 29, 40, .24);
}

.dingtalk-recipient-popover[hidden] {
  display: none;
}

.dingtalk-recipient-head,
.dingtalk-recipient-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f5f8fa;
}

.dingtalk-recipient-head {
  border-bottom: 1px solid #dce4e9;
}

.dingtalk-recipient-head > div {
  display: grid;
  gap: 3px;
}

.dingtalk-recipient-head strong {
  color: #263a46;
  font-size: 13px;
}

.dingtalk-recipient-head > button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #637680;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 22px;
}

.dingtalk-recipient-head > button:hover {
  background: #fff;
  border-color: #cfd9df;
}

.dingtalk-recipient-search {
  position: relative;
  display: block;
  margin: 12px;
}

.dingtalk-recipient-options {
  max-height: 270px;
  padding: 0 12px 12px;
  overflow: auto;
}

.dingtalk-recipient-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 5px;
  border-bottom: 1px solid #edf1f3;
}

.dingtalk-recipient-option:last-child {
  border-bottom: 0;
}

.dingtalk-recipient-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.dingtalk-recipient-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dingtalk-recipient-option b {
  color: #2c414d;
  font-size: 12px;
}

.dingtalk-recipient-option small {
  overflow: hidden;
  color: #7b8b95;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dingtalk-recipient-empty {
  display: grid;
  place-items: center;
  min-height: 96px;
  color: #7d8d96;
  font-size: 11px;
  text-align: center;
}

.dingtalk-recipient-footer {
  border-top: 1px solid #dce4e9;
}

.dingtalk-recipient-footer > span {
  color: #61747f;
  font-size: 11px;
  font-weight: 700;
}

.dingtalk-form-error {
  min-height: 18px;
  margin: 10px 0 0;
  color: #a23f37;
  font-size: 11px;
}

.dingtalk-dialog[data-loading="true"] [data-dingtalk-save],
.dingtalk-dialog[data-saving="true"] [data-dingtalk-save] {
  pointer-events: none;
  opacity: .55;
}


.command-button.is-danger {
  color: #fff;
  border-color: #a9453d;
  background: #a9453d;
  box-shadow: 0 8px 18px rgba(120, 38, 32, .16);
}

.command-button.is-danger:hover:not(:disabled) {
  border-color: #8e352f;
  background: #8e352f;
}

.command-button.is-danger:disabled {
  color: #91a0aa;
  background: #e7ecef;
  border-color: #d7e0e5;
  box-shadow: none;
}

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

.account-delete-body {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 24px;
}

.account-delete-body > .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  color: #9d3f36;
  border: 1px solid #e8c8c3;
  border-radius: 5px;
  background: #fff5f3;
}

.account-delete-body strong {
  display: block;
  margin-bottom: 7px;
  color: #162d39;
  font-size: 16px;
}

.account-delete-body strong b {
  color: #9d3f36;
}

.account-delete-body p {
  margin: 0;
  color: #687b85;
  font-size: 12px;
  line-height: 1.7;
}

.delete-confirm-field {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: #6d4a45;
  font-size: 11px;
  font-weight: 700;
}

.delete-confirm-field[hidden] {
  display: none !important;
}

.delete-confirm-field input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  color: #3c2c2a;
  background: #fff;
  border: 1px solid #d9aaa4;
  border-radius: 4px;
  outline: 0;
}

.delete-confirm-field input:focus {
  border-color: #a94b43;
  box-shadow: 0 0 0 3px rgba(169, 75, 67, .1);
}

.permission-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.permission-table-wrap {
  overflow: auto;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
}

.permission-table th,
.permission-table td {
  height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8eb;
  text-align: left;
  font-size: 12px;
}

.permission-table thead th {
  color: #667782;
  background: #f1f5f7;
}

.permission-table tbody th {
  color: #334954;
  font-weight: 600;
}

.permission-table tbody tr.is-module-start:not(:first-child) th,
.permission-table tbody tr.is-module-start:not(:first-child) td {
  border-top: 2px solid #cbd8df;
}

.permission-table td {
  width: 120px;
  text-align: center;
}

.permission-table td:nth-child(2) {
  width: auto;
  color: #526671;
  text-align: left;
}

.permission-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cobalt);
}

.permission-table input[type="checkbox"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.experiment-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.inventory-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.batching-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.batching-ingredient-editor {
  padding: 12px;
  background: #f5f8fa;
  border: 1px solid #d9e3e8;
  border-radius: 5px;
}

.batching-ingredient-editor > header {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin-bottom: 10px;
}

.batching-ingredient-editor > header > div {
  display: grid;
  gap: 3px;
}

.batching-ingredient-editor > header strong {
  color: #263640;
  font-size: 13px;
}

.batching-ingredient-editor > header small {
  color: #82909a;
  font-size: 10px;
}

.batching-ingredient-rows {
  display: grid;
  gap: 8px;
}

.batching-ingredient-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 150px 190px;
  align-items: end;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dce4e9;
  border-radius: 4px;
}

.batching-ingredient-row > div {
  display: grid;
  gap: 4px;
  align-self: center;
}

.batching-ingredient-row > div strong {
  color: #263640;
  font-size: 12px;
}

.batching-ingredient-row > div small {
  color: #85939c;
  font-size: 10px;
}

.batching-stock {
  align-self: center;
  font-size: 11px;
}

.batching-stock.is-matched {
  color: #16725f;
}

.batching-stock.is-unmetered {
  color: #286f9c;
}

.batching-stock.is-missing {
  color: #965147;
}

.batching-ingredient-row.is-b-material input[readonly] {
  color: #245c80;
  background: #edf4f8;
  border-color: #c7d9e4;
  font-weight: 700;
  cursor: default;
}

.batching-ingredient-empty {
  display: grid;
  place-items: center;
  min-height: 86px;
  color: #83919a;
  font-size: 11px;
}

.experiment-result-display.is-passed {
  color: #16725f;
  background: #e6f5f1;
  border-color: #b9ddd4;
}

.experiment-result-display.is-failed {
  color: #965147;
  background: #f8ece9;
  border-color: #e4c3bd;
}

.experiment-result-display.is-pending {
  color: #8b651b;
  background: #fbf3df;
  border-color: #ead6a1;
}

.standard-preview-dialog {
  width: min(980px, calc(100vw - 32px));
  height: min(820px, calc(100vh - 40px));
}

.standard-preview-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.standard-preview-shell {
  min-height: 0;
  padding: 16px;
  overflow: auto;
  background: #edf2f5;
}

.standard-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto 10px;
  color: #647580;
  font-size: 11px;
}

.standard-preview-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standard-preview-meta small {
  flex: 0 0 auto;
}

.standard-document-paper {
  width: min(780px, 100%);
  min-height: 920px;
  margin: 0 auto;
  padding: 54px 64px;
  color: #202c34;
  background: #fff;
  box-shadow: 0 6px 24px rgba(24, 42, 54, .12);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}

.standard-document-paper h1,
.standard-document-paper h2,
.standard-document-paper h3,
.standard-document-paper p {
  margin: 0 0 14px;
}

.standard-document-paper h1 {
  font-size: 23px;
  text-align: center;
}

.standard-document-paper h2 {
  font-size: 18px;
}

.standard-document-paper h3 {
  font-size: 15px;
}

.standard-document-paper p {
  font-size: 13px;
  white-space: pre-wrap;
}

.standard-document-paper p.is-list-item::before {
  content: "•";
  margin-right: 8px;
  color: var(--cobalt);
}

.standard-document-paper table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 12px;
}

.standard-document-paper td {
  padding: 7px 9px;
  white-space: pre-wrap;
  border: 1px solid #aebcc5;
  vertical-align: top;
}

.standard-preview-message {
  display: grid;
  place-items: center;
  min-height: 300px;
  color: #71818c;
  text-align: center;
}

.standard-preview-message.is-error {
  color: #87534e;
}

.production-record-dialog .field-span-2,
.withdrawal-record-dialog .field-span-2,
.withdrawal-shipping-dialog .field-span-2,
.shipping-record-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.schedule-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.formula-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.formula-quote-dialog .field-span-2 {
  grid-column: 1 / -1;
}

.quote-summary,
.quote-mold-summary {
  display: grid;
  gap: 10px;
}

.quote-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quote-mold-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-summary > span,
.quote-mold-summary > span {
  display: grid;
  gap: 8px;
  min-height: 78px;
  padding: 12px 14px;
  background: #f5f8fa;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.quote-mold-summary > span {
  background: #eef9f6;
  border-color: #c8e7df;
}

.quote-mold-summary-waste > span {
  background: #fff8e8;
  border-color: #e8cb8d;
}

.quote-summary small,
.quote-mold-summary small {
  color: #718692;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.quote-summary strong,
.quote-mold-summary strong {
  color: #17303d;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 18px;
}

.quote-mold-summary strong {
  color: #0b7567;
}

.quote-mold-summary-waste strong {
  color: #a45a00;
}

.quote-note {
  margin: 0;
  padding: 10px 12px;
  color: #5e707b;
  background: #fff8e8;
  border: 1px solid #e8cb8d;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
}

.quote-detail-wrap {
  overflow: auto;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.quote-detail-table {
  min-width: 780px;
}

.quote-row-warning td {
  background: #fff8f7;
}

.quote-history-layout {
  display: grid;
  gap: 14px;
}

.quote-history-latest {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.quote-history-latest > span {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 12px 14px;
  background: #f5f8fa;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
}

.quote-history-latest small {
  color: #718692;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.quote-history-latest strong {
  color: #17303d;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 17px;
}

.quote-history-latest i {
  color: #718692;
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
}

.quote-history-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 90px;
  place-items: center;
  color: #718692;
  background: #f5f8fa;
  border: 1px dashed #cfdce2;
  border-radius: 5px;
}

.quote-history-table {
  min-width: 1080px;
}

.formula-composition-editor {
  padding: 12px;
  background: #f5f8fa;
  border: 1px solid #d9e3e8;
  border-radius: 5px;
}

.formula-composition-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  margin-bottom: 10px;
}

.formula-composition-editor > header > div {
  display: grid;
  gap: 3px;
}

.formula-composition-editor > header strong {
  color: #263640;
  font-size: 13px;
}

.formula-composition-editor > header small {
  color: #82909a;
  font-size: 10px;
}

.formula-a-rows {
  display: grid;
  gap: 9px;
}

.formula-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 34px;
  align-items: end;
  gap: 9px;
}

.formula-material-row.is-b-material {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.formula-remove-material {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #87534e;
  background: #fff;
  border: 1px solid #d8c1be;
  border-radius: 4px;
  font-size: 19px;
}

.formula-remove-material:disabled {
  color: #aeb9c0;
  background: #edf1f3;
  border-color: #d9e1e6;
  cursor: not-allowed;
}

.product-table {
  min-width: 1240px;
}

.product-mold-empty {
  margin: 0;
  padding: 10px 0 2px;
  color: #81909a;
  font-size: 11px;
  text-align: center;
}

.product-mold-empty[hidden] {
  display: none;
}

.product-feature-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.product-feature-actions .command-button {
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.product-feature-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.product-feature-field[hidden],
.product-feature-actions [hidden],
.product-feature-field [hidden],
.product-identity-lock[hidden] {
  display: none;
}

.product-dialog input[readonly] {
  color: #536878;
  background: #eef3f6;
  cursor: not-allowed;
}

.product-feature-remove {
  display: grid;
  place-items: center;
  width: 34px;
  height: 40px;
  padding: 0;
  color: #87534e;
  background: #fff;
  border: 1px solid #d8c1be;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
}

.product-feature-remove:hover {
  color: #fff;
  background: #a9453d;
  border-color: #a9453d;
}

.product-feature-remove:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.product-identity-lock {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0;
  padding: 9px 11px;
  color: #6e4c13;
  background: #fff8e8;
  border: 1px solid #e8cb8d;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.product-identity-lock .icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.schedule-mold-editor {
  padding: 12px;
  background: #f5f8fa;
  border: 1px solid #d9e3e8;
  border-radius: 5px;
}

.schedule-mold-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  border: 0;
}

.schedule-mold-editor > header > div {
  display: grid;
  gap: 2px;
}

.schedule-mold-editor > header strong {
  font-size: 12px;
}

.schedule-mold-editor > header small {
  color: #81909a;
  font-size: 10px;
}

.schedule-mold-rows {
  display: grid;
  gap: 9px;
}

.schedule-mold-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 34px;
  align-items: end;
  gap: 9px;
}

.work-order-mold-row {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.schedule-mold-row label {
  display: grid;
  gap: 6px;
}

.schedule-mold-row label > span {
  color: #65747e;
  font-size: 11px;
  font-weight: 700;
}

.schedule-mold-row input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #cdd8df;
  border-radius: 4px;
  outline: 0;
}

.mold-remove-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  padding: 0;
  color: #8c5d59;
  background: #fff;
  border: 1px solid #e0cecb;
  border-radius: 4px;
  font-size: 21px;
}

.schedule-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 65px;
  border: 1px solid #d8e2e7;
  border-radius: 5px;
  overflow: hidden;
}

.schedule-summary > span {
  display: grid;
  gap: 5px;
  min-height: 65px;
  padding: 12px 14px;
  background: #f5f8fa;
  border-right: 1px solid #dfe6ea;
}

.schedule-summary > span:last-child {
  border-right: 0;
}

.schedule-summary small {
  color: #7b8992;
  font-size: 10px;
}

.schedule-summary strong {
  color: #263640;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 14px;
}

.order-dialog::backdrop,
.record-dialog::backdrop {
  background: rgba(13, 25, 34, .58);
  backdrop-filter: blur(4px);
}

.order-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 42px);
  margin: 0;
}

.order-dialog header,
.record-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 0 20px;
  background: #f5f8fa;
  border-bottom: 1px solid #dce4e9;
}

.order-dialog header > div,
.record-dialog header > div {
  display: grid;
  gap: 3px;
}

.order-dialog h2,
.record-dialog h2 {
  margin: 0;
  font-size: 18px;
}

.dialog-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #6c7a84;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 25px;
  line-height: 1;
}

.dialog-close:hover {
  color: #253640;
  background: #fff;
  border-color: #cfd9df;
}

.dialog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
  overflow: auto;
}

.work-order-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dialog-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 5px 0 7px;
  color: #243640;
  border-bottom: 1px solid #dbe4e9;
}

.dialog-section-title span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  color: var(--cobalt);
  background: #eaf0fd;
  border-radius: 3px;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 10px;
}

.dialog-section-title b {
  font-size: 13px;
}

.work-order-form-grid .field-span-2 {
  grid-column: span 2;
}

.work-order-form-grid .work-order-detail-full {
  grid-column: 1 / -1;
}

.work-order-form-grid .work-order-detail-half {
  grid-column: span 2;
}

.work-order-form-grid .work-order-detail-quarter {
  grid-column: span 1;
}

.computed-display {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 10px;
  color: #526671;
  background: #eef3f5;
  border: 1px solid #d5e0e5;
  border-radius: 4px;
  font-family: Bahnschrift, "Microsoft YaHei UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.dialog-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.dialog-form-grid label.is-full {
  grid-column: 1 / -1;
}

.dialog-form-grid label > span {
  color: #5d6c77;
  font-size: 12px;
  font-weight: 700;
}

.dialog-form-grid .field-lock-hint {
  color: #8a6415;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.dialog-form-grid input,
.dialog-form-grid select,
.dialog-form-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  color: #263640;
  background: #fff;
  border: 1px solid #cdd8df;
  border-radius: 4px;
  outline: 0;
  font-size: 13px;
  resize: vertical;
}

.dialog-form-grid input:focus,
.dialog-form-grid select:focus,
.dialog-form-grid textarea:focus {
  border-color: #7299e7;
  box-shadow: 0 0 0 3px rgba(40, 100, 232, .09);
}

.dialog-form-grid .input-with-unit {
  position: relative;
  display: flex;
  min-width: 0;
}

.input-with-unit input {
  padding-right: 42px;
}

.input-with-unit b {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #7b8992;
  font-family: Bahnschrift, Consolas, monospace;
  font-size: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.dialog-form-grid .switch-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.switch-control input {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 40px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  position: relative;
  display: block;
  width: 40px;
  height: 22px;
  background: #cbd5db;
  border: 1px solid #b8c5cd;
  border-radius: 12px;
  transition: background 150ms ease, border-color 150ms ease;
  pointer-events: none;
}

.switch-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(21, 38, 49, .2);
  transition: transform 150ms ease;
}

.switch-control input:checked + .switch-track {
  background: var(--teal);
  border-color: var(--teal);
}

.switch-control input:checked + .switch-track i {
  transform: translateX(18px);
}

.switch-control input:focus-visible + .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.switch-control > b {
  color: #52616c;
  font-size: 12px;
}

.order-dialog footer,
.record-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px;
  background: #f5f8fa;
  border-top: 1px solid #dce4e9;
}

.record-dialog dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 10px 20px 20px;
}

.record-dialog dl > div {
  min-width: 0;
  padding: 14px 8px;
  border-bottom: 1px solid #e4e9ec;
}

.record-dialog dl > div:last-child {
  grid-column: 1 / -1;
}

.record-dialog dt {
  margin-bottom: 6px;
  color: #7b8992;
  font-size: 10px;
}

.record-dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #263640;
  font-size: 13px;
  font-weight: 700;
}

.order-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  color: #e8f5f2;
  background: #18352f;
  border: 1px solid #397869;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(10, 30, 25, .22);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.order-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .theme-precision .work-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
    grid-template-rows: minmax(250px, 1fr) 170px;
  }

  .theme-precision .frame-main {
    grid-row: auto;
  }

  .theme-precision .frame-footer {
    grid-column: 1 / -1;
  }

  .order-command-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .order-tabs {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .sample-tabs {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }

  .production-tabs {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .experiment-tabs {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .inventory-tabs {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .asset-tabs {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .data-tabs {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .order-tools {
    justify-content: flex-start;
  }

  .order-query {
    flex: 1 1 230px;
    width: auto;
  }

  .work-order-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-order-form-grid .work-order-detail-half {
    grid-column: span 1;
  }

}

@media (max-width: 680px) {
  .dingtalk-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .dingtalk-dialog form {
    max-height: calc(100vh - 18px);
  }

  .dingtalk-dialog-body {
    padding: 0 12px 14px;
  }

  .dingtalk-status-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -12px;
  }

  .dingtalk-status-band > span:nth-child(2n) {
    border-right: 0;
  }

  .dingtalk-status-band > span:nth-child(-n + 2) {
    border-bottom: 1px solid #e0e7eb;
  }

  .dingtalk-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .dingtalk-connection-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .dingtalk-field-wide {
    grid-column: auto;
  }

  .dingtalk-test-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .dingtalk-test-field .command-button {
    width: 100%;
  }

  .dingtalk-rule-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .dingtalk-rule-tools label,
  .dingtalk-rule-tools select {
    width: 100%;
  }

  .dingtalk-binding-table,
  .dingtalk-binding-table tbody,
  .dingtalk-rule-table,
  .dingtalk-rule-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dingtalk-binding-table thead,
  .dingtalk-rule-table thead {
    display: none;
  }

  .dingtalk-binding-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e1e8ec;
  }

  .dingtalk-binding-table tbody tr:last-child {
    border-bottom: 0;
  }

  .dingtalk-binding-table td,
  .dingtalk-rule-table td {
    padding: 0;
    border: 0;
  }

  .dingtalk-binding-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .dingtalk-binding-table td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dingtalk-binding-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .dingtalk-binding-table td:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 5px;
  }

  .dingtalk-binding-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dingtalk-rule-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 11px 12px;
    border-bottom: 1px solid #e1e8ec;
  }

  .dingtalk-rule-table tbody tr.is-module-start {
    border-top: 2px solid #cddae2;
  }

  .dingtalk-rule-table tbody tr:first-child {
    border-top: 0;
  }

  .dingtalk-rule-table tr.is-module-start > * {
    border-top: 0;
  }

  .dingtalk-rule-table td:nth-child(1) {
    grid-column: 1 / -1;
    color: #6f8390;
    font-size: 10px;
  }

  .dingtalk-rule-table td:nth-child(2) {
    grid-column: 1;
  }

  .dingtalk-rule-table td:nth-child(3) {
    grid-column: 2;
  }

  .dingtalk-rule-table td:nth-child(4) {
    grid-column: 1 / -1;
  }

  .dingtalk-recipient-trigger {
    width: 100%;
    justify-content: flex-start;
  }

  .dingtalk-recipient-popover {
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto;
    max-height: calc(100vh - 16px);
  }

  .permission-role-setting {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  .workspace {
    gap: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .page-intro {
    min-height: 96px;
  }

  .title-block h1 {
    font-size: 31px;
  }

  body[data-module="formulas"] .title-block h1 {
    font-size: 28px;
  }

  body[data-module="standards"] .title-block h1 {
    font-size: 28px;
  }

  body[data-module="equipment"] .title-block h1 {
    font-size: 28px;
  }

  body[data-module="data"] .title-block h1 {
    font-size: 28px;
  }

  .theme-precision .work-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 190px 190px;
  }

  .theme-precision .frame-footer {
    grid-column: auto;
  }

  body[data-module="home"] .workspace,
  body[data-module="orders"] .workspace,
  body[data-module="samples"] .workspace,
  body[data-module="production"] .workspace,
  body[data-module="products"] .workspace,
  body[data-module="formulas"] .workspace,
  body[data-module="standards"] .workspace,
  body[data-module="experiments"] .workspace,
  body[data-module="inventory"] .workspace,
  body[data-module="equipment"] .workspace,
  body[data-module="users"] .workspace,
  body[data-module="data"] .workspace {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .orders-workspace,
  .sample-workspace,
  .production-workspace,
  .product-workspace,
  .formula-workspace,
  .standard-workspace,
  .experiment-workspace,
  .inventory-workspace,
  .asset-workspace,
  .user-workspace,
  .data-workspace {
    grid-template-rows: auto minmax(420px, 1fr);
  }

  .home-kpi-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-kpi-band > span {
    border-right: 1px solid #e0e7eb;
    border-bottom: 1px solid #e0e7eb;
  }

  .home-kpi-band > span:nth-child(2n) {
    border-right: 0;
  }

  .home-kpi-band > span:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

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

  .home-order-rhythm,
  .home-schedule-panel,
  .home-sample-panel,
  .home-inventory-panel,
  .home-mold-panel {
    grid-column: auto;
  }

  .order-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sample-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .production-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experiment-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mold-maintenance-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mold-maintenance-band > span:nth-child(2) {
    border-right: 0;
  }

  .mold-maintenance-band > span:nth-child(-n + 2) {
    border-bottom: 1px solid #e0e7eb;
  }

  .role-permission-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-permission-guide > span:nth-child(2) {
    border-right: 0;
  }

  .role-permission-guide > span:nth-child(-n + 2) {
    border-bottom: 1px solid #e0e7eb;
  }

  .role-permission-guide > span:nth-child(n + 3) {
    border-top: 1px solid #e0e7eb;
  }

  .user-dialog .field-span-2 {
    grid-column: auto;
  }

  .permission-dialog-body {
    padding: 12px;
  }

  .permission-table thead th:first-child,
  .permission-table tbody th {
    display: none;
  }

  .permission-table th,
  .permission-table td {
    padding-right: 6px;
    padding-left: 6px;
  }

  .permission-table thead th:nth-child(2),
  .permission-table td:nth-child(2) {
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  .permission-table thead th:nth-child(n + 3),
  .permission-table td:nth-child(n + 3) {
    width: 72px;
    white-space: nowrap;
    text-align: center;
  }

  .order-tab {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 0 4px;
    text-align: center;
  }

  .order-tab > span:first-child {
    display: none;
  }

  .order-tab > span:nth-child(2) {
    font-size: 12px;
  }

  .order-tab small {
    display: none;
  }

  .order-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .order-query {
    grid-column: 1 / -1;
    width: 100%;
  }

  .order-filter select {
    width: 118px;
  }

  .command-button {
    padding: 0 11px;
  }

  .order-panel {
    min-height: 420px;
  }

  .empty-table-message {
    width: calc(100vw - 72px);
  }

  .order-panel-head {
    padding: 0 13px;
  }

  .panel-meta b {
    display: none;
  }

  .dialog-form-grid,
  .record-dialog dl {
    grid-template-columns: 1fr;
  }

  .dialog-form-grid label.is-full,
  .record-dialog dl > div:last-child {
    grid-column: auto;
  }

  .work-order-form-grid .field-span-2 {
    grid-column: auto;
  }

  .production-record-dialog .field-span-2,
  .shipping-record-dialog .field-span-2 {
    grid-column: auto;
  }

  .schedule-dialog .field-span-2 {
    grid-column: auto;
  }

  .formula-dialog .field-span-2 {
    grid-column: auto;
  }

  .product-dialog .field-span-2 {
    grid-column: auto;
  }

  .product-feature-grid {
    grid-template-columns: 1fr;
  }

  .experiment-dialog .field-span-2 {
    grid-column: auto;
  }

  .inventory-dialog .field-span-2 {
    grid-column: auto;
  }

  .batching-dialog .field-span-2 {
    grid-column: auto;
  }

  .batching-ingredient-row {
    grid-template-columns: 1fr;
  }

  .formula-material-row {
    grid-template-columns: minmax(0, 1fr) 96px 34px;
  }

  .formula-material-row.is-b-material {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .standard-preview-shell {
    padding: 10px;
  }

  .standard-document-paper {
    min-height: 620px;
    padding: 28px 22px;
  }

  .schedule-mold-row {
    grid-template-columns: minmax(0, 1fr) 110px 34px;
  }

  .work-order-mold-row {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .schedule-summary {
    grid-template-columns: 1fr;
  }

  .schedule-summary > span {
    min-height: 54px;
    border-right: 0;
    border-bottom: 1px solid #dfe6ea;
  }

  .schedule-summary > span:last-child {
    border-bottom: 0;
  }

  .schedule-gantt-board {
    min-width: calc(170px + var(--gantt-width));
  }

  .gantt-header,
  .gantt-row {
    grid-template-columns: 170px var(--gantt-width);
  }

  .gantt-corner {
    padding: 0 8px;
  }

  .gantt-meta {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 8px;
  }

  .work-order-form-grid .work-order-detail-full,
  .work-order-form-grid .work-order-detail-half,
  .work-order-form-grid .work-order-detail-quarter {
    grid-column: auto;
  }

  .order-toast {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  body[data-module="orders"] .module-stamp {
    min-width: 120px;
    padding-left: 12px;
  }

  body[data-module="samples"] .module-stamp {
    min-width: 120px;
    padding-left: 12px;
  }

  body[data-module="production"] .module-stamp {
    min-width: 120px;
    padding-left: 12px;
  }

  body[data-module="orders"] .title-block p,
  body[data-module="samples"] .title-block p,
  body[data-module="production"] .title-block p {
    font-size: 13px;
    white-space: nowrap;
  }
}