:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-tint: #f2f5f9;
  --surface-rail: #eef2f7;
  --text: #111827;
  --muted: #667085;
  --subtle: #98a2b3;
  --line: #e5e9f0;
  --line-strong: #cfd7e6;
  --primary: #365cff;
  --primary-dark: #2447d8;
  --primary-soft: #edf3ff;
  --primary-quiet: #f5f7ff;
  --focus-ring: 0 0 0 3px rgba(54, 92, 255, 0.14);
  --success: #12b76a;
  --success-soft: #ecfdf3;
  --warning: #f79009;
  --warning-soft: #fffaeb;
  --danger: #f04438;
  --danger-soft: #fef3f2;
  --slate: #344054;
  --radius: 8px;
  --control-height: 40px;
  --control-radius: 4px;
  --shadow: 0 14px 38px rgba(16, 24, 40, 0.07);
  --shadow-soft: 0 6px 18px rgba(16, 24, 40, 0.055);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

button:focus-visible {
  outline: 2px solid rgba(54, 92, 255, 0.34);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

.watermark-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.12;
  background-repeat: repeat;
  background-size: 360px 360px;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

.loading-box {
  display: grid;
  place-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  box-shadow: none;
  filter: none;
}

.loading-logo {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #ee1d2f 0deg,
      #ff4a32 78deg,
      #f7a637 142deg,
      #ffd76a 198deg,
      #75b6ff 252deg,
      #465fff 314deg,
      transparent 315deg 360deg
    );
  box-shadow: none;
  font-size: 0;
  filter: none;
  animation: loading-spin 0.78s linear infinite;
}

.loading-logo::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  filter: none;
}

.loading-box [data-loading-text] {
  display: block;
  color: #365cff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, #fbfcff 0%, #f1f5fb 100%);
}

.login-panel {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.login-brand,
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #6a7dff);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(70, 95, 255, 0.24);
}

.login-logo-mark {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.12;
}

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

h3 {
  font-size: 17px;
  line-height: 1.25;
}

.muted,
.message {
  color: var(--muted);
}

.message {
  min-height: 22px;
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.form-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 760;
}

.has-field-error > input,
.has-field-error > select,
.has-field-error > textarea,
.has-field-error > .input-clear-wrap > input,
.has-field-error > .invoice-quantity-control > input,
.has-field-error .work-order-marketer-control .input-clear-wrap > input {
  border-color: #f04438;
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
}

.has-field-error > .input-clear-wrap .input-clear-button,
.has-field-error > .invoice-quantity-control .input-clear-button,
.has-field-error .work-order-marketer-control .input-clear-button {
  background: #f04438;
}

.field-error-text {
  display: block;
  margin-top: -2px;
  color: #d92d20;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.validation-message-host {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.validation-message-host .field-error-text {
  flex: 0 1 auto;
  max-width: min(62%, 360px);
  margin: 0 0 0 auto;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-type-box.has-field-error {
  border-color: #f04438;
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
}

.wide-field {
  grid-column: 1 / -1;
}

.required-star {
  color: var(--danger);
  margin-left: 3px;
  font-weight: 850;
}

input,
select,
textarea,
output {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 0 12px;
  color: var(--text);
  background: #fff;
  line-height: 20px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
output {
  height: var(--control-height);
  border-radius: var(--control-radius);
}

select {
  padding-right: 34px;
}

.input-clear-wrap {
  position: relative;
  display: block;
  height: var(--control-height);
  min-width: 0;
}

.input-clear-wrap input {
  height: 100%;
  min-height: 0;
  padding-right: 28px;
}

.invoice-quantity-control {
  position: relative;
  display: block;
  height: var(--control-height);
  width: 100px;
  min-width: 0;
}

.invoice-quantity-control input {
  height: 100%;
  min-height: 0;
  padding-right: 54px;
}

.invoice-quantity-control .input-clear-button {
  right: 31px;
}

.invoice-quantity-stepper {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: 18px;
  overflow: hidden;
  border: 1px solid #d0d5dd;
  border-radius: 3px;
  background: #f9fafb;
}

.invoice-quantity-stepper button {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #667085;
  font-size: 7px;
  line-height: 1;
  box-shadow: none;
}

.invoice-quantity-stepper button + button {
  border-top: 1px solid #d0d5dd;
}

.invoice-quantity-stepper button:hover,
.invoice-quantity-stepper button:focus-visible {
  background: #eef4ff;
  color: #155eef;
}

.money-input-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}

.money-input-control .input-clear-wrap {
  width: 154px;
  flex: 0 0 154px;
}

.money-input-control b {
  color: #475467;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.input-clear-button {
  position: absolute;
  right: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d0d5dd;
  color: #fff;
  font-size: 0;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
  cursor: pointer;
}

.input-clear-button::before,
.input-clear-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 1.6px;
  border-radius: 999px;
  background: #fff;
  transform-origin: center;
}

.input-clear-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.input-clear-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.input-clear-button:hover,
.input-clear-button:focus-visible {
  background: #98a2b3;
  color: #fff;
  outline: none;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(54, 92, 255, 0.68);
  box-shadow: var(--focus-ring);
}

output {
  display: block;
  padding: 9px 12px;
  line-height: 20px;
  background: var(--surface-tint);
}

textarea {
  height: auto;
  padding: 9px 12px;
  resize: vertical;
  min-height: 84px;
}

.primary,
.ghost,
.small {
  min-height: 38px;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

.primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.ghost,
.small {
  border: 1px solid var(--line);
  background: #fff;
  color: #344054;
}

.ghost:hover,
.small:hover {
  border-color: #c7d7fe;
  background: var(--primary-quiet);
  color: var(--primary);
  box-shadow: none;
}

.ghost.danger,
.small.danger {
  color: var(--danger);
}

.menu-toggle {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(15, 23, 42, 0.36);
}

.system-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.system-dialog.hidden { display: none; }

.system-dialog-card {
  width: min(440px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22);
}

.system-dialog-accent { height: 4px; background: var(--primary); }
.system-dialog-content { padding: 26px 28px 16px; }
.system-dialog-content h2 { margin: 0; color: #101828; font-size: 18px; letter-spacing: 0; }
.system-dialog-content p { margin: 12px 0 0; color: #475467; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.system-dialog-content input { width: 100%; margin-top: 16px; }
.system-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 28px 24px; }
.system-dialog-actions button { min-width: 84px; }
.system-dialog.is-danger .system-dialog-accent { background: var(--danger); }
.system-dialog.is-danger #systemDialogConfirm { border-color: #dc2626; background: #dc2626; color: #fff; }
.system-dialog.is-danger #systemDialogConfirm:hover { border-color: #b42318; background: #b42318; }

@media (max-width: 0px) {
  .system-dialog { padding: 16px; }
  .system-dialog-content { padding: 22px 20px 14px; }
  .system-dialog-actions { padding: 10px 20px 20px; }
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
  background: #fff;
}

.brand {
  min-height: 54px;
  padding: 2px 8px 18px;
  border-bottom: 1px solid var(--line);
}

.brand strong {
  display: block;
  font-size: 17px;
  line-height: 1.12;
}

.brand span:not(.brand-mark) {
  display: block;
  margin-top: 4px;
  color: #1677ff;
  font-size: 12px;
  font-weight: 700;
}

nav {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.nav-btn {
  position: relative;
  width: 100%;
  min-height: 38px;
  padding: 9px 10px 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #667085;
  text-align: left;
  font-size: 13px;
  font-weight: 760;
}

.nav-btn.active,
.nav-btn:hover {
  background: var(--primary-quiet);
  color: var(--primary);
}

.nav-btn.active {
  border-color: #dbe4ff;
  color: var(--primary-dark);
}

.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
}

.nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: #344054;
  font-weight: 850;
}

.nav-caret {
  color: var(--subtle);
  font-size: 12px;
}

.nav-submenu {
  display: grid;
  gap: 3px;
  padding: 2px 0 8px 12px;
}

.nav-sub-btn {
  min-height: 34px;
  padding-left: 12px;
  color: #667085;
}

.nav-logout {
  margin-top: 8px;
  color: var(--muted);
}

.nav-logout:hover {
  color: var(--primary);
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.workspace-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  min-width: 0;
  min-height: 45px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 22px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-rail);
  scrollbar-width: thin;
  position: relative;
  z-index: 2;
}

.workspace-tabs.empty {
  display: none;
}

.workspace-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 132px;
  max-width: 240px;
  height: 37px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #e7ecf4;
  color: #667085;
}

.workspace-tab.active {
  position: relative;
  z-index: 1;
  height: 38px;
  margin-bottom: -1px;
  background: #fff;
  color: var(--text);
  border-color: #cfd5df;
  box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.04);
}

.workspace-tab.active::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
}

.workspace-tab-title,
.workspace-tab-close {
  min-height: 0;
  border: 0;
  background: transparent;
}

.workspace-tab-title {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 12px;
  color: inherit;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 820;
}

.workspace-tab-close {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-right: 6px;
  padding: 0;
  border-radius: 50%;
  color: #667085;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.workspace-tab-close:hover {
  background: #f2f4f7;
  color: var(--danger);
}

.content-panel {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  min-width: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.status-switch-field {
  align-content: start;
}

.status-switch-control {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
}

.status-list-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  vertical-align: middle;
}

.status-switch-control > input,
.status-list-switch > input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.status-switch-track {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.status-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 0.18s ease;
}

.status-switch-control > input:checked + .status-switch-track,
.status-list-switch > input:checked + .status-switch-track {
  border-color: #78c995;
  background: #78c995;
}

.status-switch-control > input:checked + .status-switch-track::after,
.status-list-switch > input:checked + .status-switch-track::after {
  transform: translateX(22px);
}

.status-switch-control > input:focus-visible + .status-switch-track,
.status-list-switch > input:focus-visible + .status-switch-track {
  box-shadow: 0 0 0 2px rgba(120, 201, 149, 0.2);
}

.status-switch-control > input:disabled,
.status-list-switch > input:disabled {
  cursor: not-allowed;
}

.status-switch-control > input:disabled + .status-switch-track,
.status-list-switch > input:disabled + .status-switch-track {
  opacity: 0.52;
}

.status-list-switch .status-switch-track {
  border-color: #d5dce8;
  background: #dfe5ee;
  border-radius: 999px;
}

.status-list-switch .status-switch-track::after {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.status-list-switch > input:checked + .status-switch-track::after {
  transform: translateX(20px);
}

.status-list-switch > input:checked + .status-switch-track {
  border-color: #1677ff;
  background: #1677ff;
}

.bank-outlet-table-wrap th:nth-child(1),
.bank-outlet-table-wrap td:nth-child(1) {
  width: 220px;
}

.bank-outlet-table-wrap th:nth-child(2),
.bank-outlet-table-wrap td:nth-child(2) {
  width: 240px;
}

.bank-outlet-table-wrap th:nth-child(3),
.bank-outlet-table-wrap td:nth-child(3) {
  width: 280px;
}

.bank-outlet-hierarchy { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bank-outlet-pane { min-width: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.bank-outlet-pane > header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 13px; border-bottom: 1px solid var(--line); color: #344054; }
.bank-outlet-pane > header strong { font-size: 14px; }
.bank-outlet-pane > header span { color: var(--muted); font-size: 12px; }
.bank-outlet-option-list {
  min-height: 210px;
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.bank-outlet-option, .bank-outlet-record { width: 100%; min-height: 42px; border: 0; border-bottom: 1px solid #eef1f5; background: #fff; }
button.bank-outlet-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; color: #344054; text-align: left; cursor: pointer; }
button.bank-outlet-option:hover { background: #f5f8ff; }
button.bank-outlet-option.selected, .bank-outlet-record.selected { background: #eff4ff; }
button.bank-outlet-option.selected { color: #155eef; font-weight: 700; }
.bank-outlet-option small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bank-outlet-record { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.bank-outlet-record .bank-outlet-option { min-width: 0; flex: 1; }
.bank-outlet-empty { display: grid; min-height: 210px; place-items: center; padding: 16px; color: var(--muted); font-size: 13px; text-align: center; }
.bank-outlet-editor { margin-top: 16px; }

.personal-dashboard {
  min-height: calc(100vh - 120px);
  padding: 28px;
}

.personal-dashboard-title {
  margin-bottom: 18px;
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
}

.personal-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
  max-width: 1120px;
}

.personal-dashboard-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 118px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.personal-dashboard-card span { grid-column: 1 / -1; color: var(--muted); font-size: 14px; font-weight: 700; }
.personal-dashboard-card strong { color: var(--text); font-size: 30px; line-height: 1; }
.personal-dashboard-card em { margin-left: 6px; color: var(--muted); font-size: 13px; font-style: normal; }
.personal-dashboard-card.blue { border-top: 3px solid #377dff; }
.personal-dashboard-card.orange { border-top: 3px solid #f79009; }
.personal-dashboard-card.red { border-top: 3px solid #f04438; }
.personal-dashboard-card.purple { border-top: 3px solid #7a5af8; }
.personal-dashboard-error { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--danger); font-size: 13px; font-weight: 650; }
.personal-dashboard-error .small { flex: 0 0 auto; }

.empty-workspace {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: calc(100vh - 120px);
  color: var(--muted);
  text-align: center;
}

.empty-workspace strong {
  color: var(--text);
  font-size: 18px;
}

.empty-workspace span {
  font-size: 13px;
  font-weight: 720;
}

.paged-loading-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 260px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
}

.paged-loading-state .loading-logo {
  width: 44px;
  height: 44px;
}

.paged-loading-state .loading-logo::after {
  inset: 6px;
}

.panel-body {
  padding: 0;
}

.merchant-ownership-layout { padding-bottom: 20px; }
.merchant-ownership-workspace { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); gap: 16px; }
.merchant-ownership-pane { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.merchant-ownership-pane-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.merchant-ownership-pane-head strong { color: var(--text); font-size: 15px; }
.merchant-ownership-list { display: grid; max-height: 440px; overflow: auto; padding: 8px; align-content: start; }
.merchant-ownership-pane:first-child .merchant-ownership-list { height: 440px; overflow-y: scroll; scrollbar-gutter: stable; }
.merchant-ownership-pane-actions { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.merchant-ownership-pane-actions .danger:disabled { cursor: not-allowed; opacity: 0.45; }
.merchant-ownership-source, .merchant-ownership-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef2f6; border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.merchant-ownership-source:hover, .merchant-ownership-person:hover:not(:disabled) { background: #f5f8ff; }
.merchant-ownership-source.selected { background: #edf3ff; box-shadow: inset 3px 0 0 var(--primary); }
.merchant-ownership-source strong, .merchant-ownership-person strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.merchant-ownership-source span, .merchant-ownership-person span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.merchant-ownership-person:disabled { cursor: not-allowed; opacity: 0.5; }
.merchant-ownership-search { display: block; padding: 10px 12px 0; }
.merchant-ownership-search input { width: 100%; }
.merchant-ownership-search select { width: 100%; }
.merchant-ownership-person-filter { padding-top: 8px; }
.merchant-ownership-people-list { max-height: 376px; }
.merchant-ownership-empty { padding: 32px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.merchant-ownership-history { margin-top: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(300px, 388px) minmax(0, 1fr);
  gap: 18px;
}

.stacked {
  display: grid;
  gap: 16px;
}

.role-layout .card {
  width: 100%;
}

.role-layout .form-grid,
.invoice-form-layout .form-grid,
.inventory-form-layout .form-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  margin-top: 0;
}

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

.inventory-form-layout .form-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.readonly-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface-soft);
}

.readonly-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 720;
}

.readonly-item strong {
  display: block;
  font-size: 15px;
  word-break: break-all;
}

.import-settings-page {
  gap: 14px;
}

.import-setting-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-settings-form {
  display: grid;
  gap: 14px;
}

.import-settings-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.import-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.import-setting-check {
  min-height: var(--control-height);
  align-items: center;
  margin-top: 22px;
}

.import-field-table table {
  min-width: 1180px;
}

.import-field-table th:nth-child(1),
.import-field-table th:nth-child(2),
.import-field-table th:nth-child(3),
.import-field-table th:nth-child(5),
.import-field-table th:nth-child(6),
.import-field-table th:nth-child(7) {
  white-space: nowrap;
}

.import-field-table td {
  vertical-align: middle;
}

.import-field-table td:nth-child(1) {
  min-width: 170px;
}

.import-field-table td:nth-child(2) {
  min-width: 160px;
}

.import-field-table td:nth-child(3) {
  min-width: 92px;
}

.import-field-table td:nth-child(4) {
  min-width: 260px;
}

.import-field-table td:nth-child(5) {
  min-width: 110px;
}

.import-field-table .input-clear-wrap input,
.import-field-table select {
  min-width: 0;
  width: 100%;
}

.import-field-table .check-cell {
  text-align: center;
}

.import-field-table .check-cell input {
  width: 18px;
  height: 18px;
}

.merchant-import-field-table table {
  min-width: 900px;
}

.merchant-import-field-table [data-import-field-draggable] {
  cursor: grab;
}

.merchant-import-field-table [data-import-field-draggable].import-field-dragging {
  opacity: .48;
}

.merchant-import-field-table .import-field-drop-before td {
  border-top: 2px solid var(--primary);
}

.merchant-import-field-table .import-field-drop-after td {
  border-bottom: 2px solid var(--primary);
}

.data-import-page {
  gap: 14px;
}

.data-import-direct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.data-import-direct-grid .data-import-drop {
  min-height: 190px;
}

.data-import-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

.data-import-upload {
  display: grid;
  gap: 8px;
}

.data-import-drop {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 128px;
  padding: 18px;
  border: 1px dashed #98a2b3;
  border-radius: 4px;
  background: #fff;
  color: #475467;
  text-align: center;
  cursor: pointer;
}

.data-import-drop:hover,
.data-import-drop:focus-visible,
.data-import-drop.dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.data-import-drop strong {
  color: var(--text);
  font-size: 16px;
}

.upload-drop-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  text-align: center;
}

.upload-drop-plus {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 50%;
  background: #dcfae6 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.upload-drop-plus::before,
.upload-drop-plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #12b76a !important;
  content: "";
  transform: translate(-50%, -50%);
}

.upload-drop-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.upload-drop-hint strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

.data-import-drop span,
.data-import-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.data-import-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.data-import-match {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.data-import-match strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-import-match span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.data-import-match.matched {
  border-color: #84caff;
  background: #eff8ff;
}

.data-import-match.missing-required {
  border-color: #fecdca;
  background: #fff1f3;
}

.data-import-messages {
  display: grid;
  gap: 8px;
}

.data-import-message {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.data-import-message strong {
  font-size: 13px;
}

.data-import-message.danger {
  border-color: #fda29b;
  background: #fffbfa;
  color: var(--danger);
}

.data-import-message.warn {
  border-color: #fedf89;
  background: #fffcf5;
  color: #93370d;
}

.data-import-message.success {
  border-color: #abefc6;
  background: #f6fef9;
  color: #067647;
}

.data-import-preview-table table {
  min-width: 1100px;
}

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}

.work-order-close-trigger {
  margin-left: auto;
  border-color: #fecaca;
  background: #fff1f0;
  color: #dc2626;
}

.form-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.form-hint.danger {
  color: var(--danger);
}

.table-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.table-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.table-section-head strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.table-section-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

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

.invoice-recent-table {
  grid-column: 1 / -1;
}

.invoice-upload {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.invoice-upload-drop {
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 104px;
  padding: 16px;
  border: 1px dashed #98a2b3;
  border-radius: var(--radius);
  background: #fff;
  color: #475467;
  text-align: center;
  cursor: pointer;
}

.invoice-upload-drop strong {
  font-size: 15px;
}

.invoice-upload-drop span,
.invoice-upload-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.invoice-upload.dragging .invoice-upload-drop,
.invoice-upload.uploading .invoice-upload-drop {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.document-file-manager {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 560px;
  padding: 0;
}

.document-tree {
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: #fbfcfe;
}

.document-tree-root,
.document-tree-node {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  padding: 0 9px;
  background: transparent;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

.document-tree-node { padding-left: calc(10px + var(--depth) * 18px); }
.document-tree-root.active,
.document-tree-node.active { background: #eaf0ff; color: var(--primary); font-weight: 800; }
.document-tree-branches { margin-top: 6px; }

.document-workspace { min-width: 0; padding: 18px; }

.document-library-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.document-publish-workspace { width: min(1120px, 100%); }

.document-publish-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.document-publish-category-panel {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line);
  background: #fbfcfe;
}

.document-publish-category-tree {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 3px;
}

.document-publish-category-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px 0 calc(8px + var(--depth, 0) * 18px);
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #475467;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.document-publish-category-node:hover { background: #f2f4f7; }
.document-publish-category-node.active { background: #eaf0ff; color: var(--primary); }
.document-publish-form-panel { min-width: 0; padding: 20px; }

.document-publish-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.document-publish-form .document-publish-title,
.document-publish-form .document-publish-remark {
  width: 400px;
  max-width: 100%;
}

.document-publish-category-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.document-publish-category-value > span { color: #475467; font-size: 14px; font-weight: 700; }
.document-publish-category-value > strong {
  display: block;
  overflow: hidden;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-upload-panel.document-publish-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-bottom: 0;
  border-bottom: 0;
}

.document-publish-form .document-upload,
.document-publish-form .form-actions { grid-column: auto; }

.document-publish-form .document-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(720px, 100%);
}

.document-publish-form .invoice-upload-drop { min-height: 88px; padding: 10px; }

.document-publish-form .invoice-upload-status { display: block; margin: 0; min-width: 0; overflow-wrap: anywhere; }

.document-upload-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 110px minmax(180px, 1fr) minmax(220px, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.document-upload-panel .document-upload { min-width: 0; }
.document-upload-panel .invoice-upload-drop { min-height: 42px; padding: 9px; }
.document-upload-panel .invoice-upload-drop strong { font-size: 12px; }
.document-upload-panel:not(.document-publish-form) .invoice-upload-status { display: none; }
.document-upload-panel .form-actions { display: flex; gap: 7px; }

.document-breadcrumb { margin: 18px 0 12px; color: #344054; font-weight: 800; }
.document-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; }
.document-folder { display: flex; align-items: center; gap: 9px; min-height: 52px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; background: #fff; color: #344054; text-align: left; cursor: pointer; }
.document-folder:hover { border-color: #92a9ee; background: #f7f9ff; }

.document-folder-mark {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 14px;
  overflow: visible;
  border: 1px solid #d39b28;
  border-radius: 3px;
  background: #f6c95b;
  box-shadow: inset 0 -3px 0 rgba(183, 123, 13, 0.16);
}
.document-folder-mark::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 1px;
  width: 9px;
  height: 5px;
  border: 1px solid #d39b28;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #f9d878;
}
.document-folder-mark::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.76);
}
.document-tree-node.active .document-folder-mark,
.document-folder:hover .document-folder-mark {
  border-color: #5586c9;
  background: #84b5ef;
  box-shadow: inset 0 -3px 0 rgba(43, 105, 181, 0.18);
}
.document-tree-node.active .document-folder-mark::before,
.document-folder:hover .document-folder-mark::before { border-color: #5586c9; background: #acd0f5; }

.document-file-list { margin-top: 14px; }
.document-file-row { display: flex; align-items: center; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--line); }
.document-file-main { display: grid; grid-template-columns: 34px minmax(160px, 0.55fr) minmax(220px, 1fr); align-items: center; gap: 10px; flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent; color: #344054; text-align: left; cursor: pointer; }
.document-file-main:hover .document-file-name { color: var(--primary); }
.document-file-icon { display: block; width: 34px; height: 34px; object-fit: contain; }
.document-file-mark { display: grid; place-items: center; width: 28px; height: 32px; border: 1px solid #9aaed5; border-radius: 2px; background: #f7f9ff; color: #4763b8; font-size: 8px; font-weight: 700; line-height: 1; }
.document-file-mark-pdf { border-color: #f1b6b1; background: #fff5f4; color: #c83d35; }
.document-file-mark-word { border-color: #a8c7ee; background: #f2f7ff; color: #2866b7; }
.document-file-mark-excel { border-color: #a6d7ba; background: #f2fbf5; color: #24834f; }
.document-file-mark-ppt { border-color: #f0c39d; background: #fff7f0; color: #c66a22; }
.document-file-mark-zip { border-color: #c6b3e9; background: #f8f5ff; color: #7954bb; }
.document-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.document-file-meta { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.document-empty { padding: 32px 0; color: var(--muted); text-align: center; }

.document-category-settings { display: grid; gap: 18px; }
.document-category-settings .document-category-list { order: 1; }
.document-category-settings .form-grid { order: 2; }
.document-category-list { border-top: 1px solid var(--line); }
.document-category-row { display: flex; align-items: center; gap: 9px; min-height: 48px; padding-left: calc(var(--depth) * 24px); border-bottom: 1px solid var(--line); }
.document-category-name { font-weight: 750; }
.document-category-level { color: var(--muted); font-size: 12px; }
.document-category-row .row-actions { margin-left: auto; }

.import-setting-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.import-setting-status-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: #475467;
  font-size: 13px;
  font-weight: 720;
}

@media (max-width: 0px) {
  .document-upload-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-upload-panel .form-actions { grid-column: auto; }
}

@media (max-width: 0px) {
  .document-file-manager { grid-template-columns: 1fr; min-height: 0; }
  .document-tree { border-right: 0; border-bottom: 1px solid var(--line); }
  .document-tree-branches { display: flex; flex-wrap: wrap; gap: 4px; }
  .document-tree-node { width: auto; padding-left: 9px; }
  .document-upload-panel { grid-template-columns: 1fr; }
  .document-file-main { grid-template-columns: 34px minmax(0, 1fr); }
  .document-file-meta { grid-column: 2; }
  .document-file-row { align-items: flex-start; }
}

.document-upload.dragging .invoice-upload-drop,
.document-upload.uploading .invoice-upload-drop {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.document-library-table strong {
  display: inline-block;
  margin-right: 8px;
}

.document-library-table .status-pill {
  vertical-align: middle;
}

.serial-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.serial-range-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.serial-range-tools label {
  gap: 5px;
  min-width: 0;
}

.serial-range-tools .ghost {
  grid-column: 1 / -1;
  width: 100%;
  white-space: nowrap;
}

.serial-range-message {
  grid-column: 1 / -1;
  min-height: 18px;
  display: flex;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.pdf-preview-modal,
.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.58);
}

.invoice-red-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.42); }
.invoice-red-modal.hidden { display: none; }
.invoice-red-modal-card { width: min(480px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.invoice-red-modal-card > header, .invoice-red-modal-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.invoice-red-modal-card > header { border-bottom: 1px solid var(--line); }
.invoice-red-modal-card > header strong { font-size: 16px; }
.invoice-red-modal-card > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.invoice-red-modal-body { display: grid; gap: 18px; padding: 18px; }
.invoice-red-modal-body > label { display: grid; gap: 7px; width: 200px; }

.pdf-preview-shell,
.image-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1080px, 96vw);
  height: min(860px, 92vh);
  min-height: 420px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pdf-preview-head,
.image-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.pdf-preview-head strong,
.image-preview-head strong {
  font-size: 14px;
}

.pdf-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-preview-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f2f4f7;
}

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

.image-preview-tool {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 32px;
  min-height: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #1d2939;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.image-preview-tool:hover,
.image-preview-tool:focus-visible {
  border-color: rgba(49, 78, 255, 0.56);
  color: var(--primary);
}

.image-preview-tool svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-preview-ratio-tool {
  min-width: 48px;
}

.image-preview-close-tool {
  min-width: 54px;
}

.image-preview-scale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.image-preview-stage {
  min-height: 0;
  overflow: auto;
  background: #111827;
}

.image-preview-stage-inner {
  display: grid;
  place-items: center;
  min-width: 100%;
  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.image-preview-canvas {
  position: relative;
  flex: 0 0 auto;
}

.image-preview-canvas img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.pda-login-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.pda-login-title,
.pda-login-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pda-login-title {
  justify-content: space-between;
}

.pda-login-content {
  justify-content: center;
}

.pda-login-title h3 {
  margin-bottom: 4px;
}

.pda-login-qr {
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
  flex: 0 0 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.pda-login-qr svg {
  width: 232px;
  height: 232px;
  display: block;
}

.pda-login-code {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.pda-login-code span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pda-login-code strong {
  font-size: 24px;
  letter-spacing: 2px;
  word-break: break-all;
}

.danger-text {
  color: var(--danger);
  font-weight: 800;
}

.query-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.merchant-query-bar {
  grid-template-columns: 200px 400px 300px auto;
}

.merchant-query-bar .query-actions {
  justify-content: flex-start;
}

.merchant-list-count {
  color: var(--muted);
  font-size: 13px;
}

.merchant-list-page .merchant-address-column {
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.merchant-list-page .merchant-summary-column {
  width: 220px;
  min-width: 220px;
}

.merchant-list-page .merchant-source-channel-column {
  width: 130px;
  min-width: 130px;
}

.merchant-list-page .merchant-finance-contact-column {
  width: 140px;
  min-width: 140px;
}

.merchant-list-page .merchant-status-column {
  width: 100px;
  min-width: 100px;
}

.merchant-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.merchant-summary span:last-child {
  color: var(--muted);
}

.merchant-finance-contact-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.merchant-finance-contact-summary span:last-child {
  color: var(--muted);
}

.settlement-account-summary {
  display: grid;
  gap: 3px;
  min-width: 170px;
}

.settlement-account-summary span:nth-child(2),
.settlement-account-summary span:nth-child(3) {
  color: var(--muted);
}

.settlement-merchant-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 160px;
}

.settlement-merchant-summary span {
  display: block;
  min-width: 0;
}

.settlement-merchant-summary span:last-child {
  color: var(--muted);
}

.settlement-failures-table-wrap th:nth-child(6),
.settlement-failures-table-wrap td:nth-child(6),
.settlement-failures-table-wrap th:nth-child(7),
.settlement-failures-table-wrap td:nth-child(7) {
  min-width: 92px;
  white-space: nowrap;
}

.settlement-failures-table-wrap th:nth-child(2),
.settlement-failures-table-wrap td:nth-child(2) {
  min-width: 116px;
  white-space: nowrap;
}

.settlement-error-message {
  display: block;
  min-width: 200px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.license-expiry-legal-expired {
  color: #d92d20;
}

.inventory-query-bar {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.query-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inventory-query-bar .query-actions {
  grid-column: 1 / -1;
}

.query-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.permission-box {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.permission-box legend {
  padding: 0 4px;
  color: #475467;
  font-size: 13px;
  font-weight: 820;
}

.permission-group {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.permission-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.permission-module {
  font-weight: 820;
  padding-top: 6px;
}

.permission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.check-row {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 5px;
  font-weight: 680;
  white-space: nowrap;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.table-wrap {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

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

.inventory-query-table table {
  min-width: 1320px;
}

.inventory-report-table table {
  min-width: 1080px;
}

.stocktake-discrepancy-page { max-width: 1600px; margin: 0 auto; }
.stocktake-discrepancy-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stocktake-discrepancy-filters { display: inline-flex; gap: 8px; }
.stocktake-discrepancy-filters .small.is-active { border-color: var(--primary); background: var(--primary-quiet); color: var(--primary); }
.stocktake-discrepancy-table table { min-width: 1120px; }
.stocktake-discrepancy-table td { vertical-align: middle; }
.serial-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.stocktake-discrepancy-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.stocktake-discrepancy-pill.warning { border-color: #fedf89; background: #fffaeb; color: #b54708; }
.stocktake-discrepancy-pill.success { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.stocktake-discrepancy-pill.muted { border-color: #d0d5dd; background: #f2f4f7; color: #475467; }
.stocktake-discrepancy-resolve { border: 1px solid #dbe6ff; border-radius: var(--radius); background: #f8fbff; padding: 16px; }
.stocktake-discrepancy-resolve-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stocktake-discrepancy-resolve-head div { display: grid; gap: 4px; }
.stocktake-discrepancy-resolve-head span { color: var(--muted); font-size: 13px; }
.stocktake-discrepancy-form { margin: 0; }

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  text-align: left;
  font-size: 12px;
  line-height: 1.42;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

th {
  position: static;
  background: #f7f9fc;
  color: #5f6b7a;
  font-size: 12px;
  font-weight: 850;
}

td {
  color: #2f3a4a;
}

.numeric-cell {
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.truncate-cell {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.actions-col {
  width: 132px;
}

.actions-cell {
  min-width: 132px;
}

tbody tr {
  transition: background 0.14s ease;
}

tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.66);
}

tbody tr:not(.selected-row):hover {
  background: #f9fafb;
}

tbody tr.sortable-resource-row {
  cursor: grab;
}

tbody tr.sortable-resource-row:active {
  cursor: grabbing;
}

tbody tr.sortable-dragging td {
  background: #eef4ff;
  opacity: 0.58;
}

tbody tr.sortable-drop-before td {
  box-shadow: inset 0 2px 0 var(--primary);
}

tbody tr.sortable-drop-after td {
  box-shadow: inset 0 -2px 0 var(--primary);
}

tr:last-child td {
  border-bottom: 0;
}

.invoice-red-row td {
  color: var(--danger);
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.row-actions .icon-button {
  width: 34px;
  padding: 0;
  text-align: center;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 82px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.source-pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.source-web {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.source-pda {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.stock-total-cell {
  color: #111827;
  font-size: 14px;
}

.warehouse-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

.warehouse-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  padding: 4px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.warehouse-chip strong {
  color: #101828;
  font-variant-numeric: tabular-nums;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.pagination-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

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

.pagination-size {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  white-space: nowrap;
}

.pagination-size select {
  width: auto;
  min-width: 86px;
  min-height: 32px;
  padding: 0 28px 0 8px;
}

.small {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
}

.pill {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pill.enabled,
.pill.success {
  border-color: #abefc6;
  background: var(--success-soft);
  color: #067647;
}

.pill.disabled,
.pill.failed,
.pill.danger {
  border-color: #fecdca;
  background: var(--danger-soft);
  color: #b42318;
}

.pill.merchant-normal {
  border-color: #abefc6;
  background: var(--success-soft);
  color: #067647;
}

.pill.merchant-disabled {
  border-color: #fecdca;
  background: var(--danger-soft);
  color: #b42318;
}

.pill.merchant-frozen {
  border-color: #c7d7fe;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.pill.merchant-cancelled,
.pill.merchant-default {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #475467;
}

.pill.warning {
  border-color: #fedf89;
  background: var(--warning-soft);
  color: #b54708;
}

.pill.pending_assign,
.pill.needs_more_info {
  border-color: #fedf89;
  background: var(--warning-soft);
  color: #b54708;
}

.pill.pending_process,
.pill.processing {
  border-color: #c7d7fe;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.pill.pending_review {
  border-color: #d9d6fe;
  background: #f4f3ff;
  color: #5925dc;
}

.pill.completed {
  border-color: #abefc6;
  background: var(--success-soft);
  color: #067647;
}

.pill.cancelled {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #475467;
}

.pill.pending_application,
.pill.queued,
.pill.created {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.pill.issued,
.pill.matched,
.pill.used {
  border-color: #abefc6;
  background: var(--success-soft);
  color: #067647;
}

.pill.red_invoice,
.pill.red_reversed,
.pill.delete_failed {
  border-color: #fecdca;
  background: var(--danger-soft);
  color: #b42318;
}

.pill.missing,
.pill.pending,
.pill.skipped {
  border-color: #fedf89;
  background: var(--warning-soft);
  color: #b54708;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #fecdca;
  border-radius: 999px;
  background: var(--danger-soft);
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.work-order-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-tabs .small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.work-order-tabs .primary-chip {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.work-order-tabs span {
  font-size: 11px;
}

.work-order-search-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.work-order-search-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-order-search-title strong {
  font-size: 14px;
}

.work-order-search-grid {
  display: grid;
  grid-template-columns: 200px 200px 400px 200px 200px;
  column-gap: 8px;
  row-gap: 10px;
  align-items: end;
}

.work-order-search-grid .work-order-no-field,
.work-order-search-grid .work-order-no-field .input-clear-wrap {
  width: 100px;
  min-width: 100px;
}

.work-order-assignee-query-fields {
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(2, 200px);
  gap: 8px;
  min-width: 0;
}

.work-order-search-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.1fr) minmax(380px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.work-order-left,
.work-order-detail,
.work-order-action-form {
  display: grid;
  gap: 14px;
}

.work-order-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.work-order-list-head strong {
  font-size: 14px;
}

.work-order-list-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.work-order-list-page {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.work-order-table-wrap {
  max-height: none;
}

.work-order-table td,
.work-order-table th {
  white-space: nowrap;
}

.work-order-table th:nth-child(1), .work-order-table td:nth-child(1) { width: 104px; min-width: 104px; }
.work-order-table th:nth-child(2), .work-order-table td:nth-child(2) { width: 220px; min-width: 220px; }
.work-order-table th:nth-child(3), .work-order-table td:nth-child(3) { width: 160px; min-width: 160px; }
.work-order-table th:nth-child(5), .work-order-table td:nth-child(5) { width: 104px; min-width: 104px; }
.work-order-table th:nth-child(6), .work-order-table td:nth-child(6) { width: 152px; min-width: 152px; }
.work-order-table th:nth-child(7), .work-order-table td:nth-child(7), .work-order-table th:nth-child(8), .work-order-table td:nth-child(8) { width: 164px; min-width: 164px; }
.work-order-number-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 56px; text-align: center; }
.work-order-urgent-chip { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; border: 1px solid #fecaca; border-radius: 12px; background: #fff1f0; color: #dc2626; font-size: 13px; font-style: normal; line-height: 1; }
.work-order-merchant-cell { min-width: 0; }
.work-order-merchant-no, .work-order-merchant-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-order-merchant-no { color: var(--text); }
.work-order-merchant-name { margin-top: 4px; color: var(--muted); }
.work-order-type-cell, .work-order-assignee-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Parameter pages are operated list-first: browse above, then add or edit below. */
.parameter-settings-layout .table-side { order: 1; }
.parameter-settings-layout .form-grid { order: 2; }

.inventory-type-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
}

.inventory-type-tabs button {
  min-width: 96px;
}

.inventory-type-settings .table-section-head {
  margin-top: 0;
}

.work-order-table .selected-row td {
  background: var(--primary-soft);
}

.work-order-form {
  display: grid;
  gap: 14px;
}

.business-type-box {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.business-type-box legend {
  padding: 0 4px;
  color: #475467;
  font-size: 13px;
  font-weight: 820;
}

.business-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.tag-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-choice {
  display: inline-flex;
  min-width: 0;
}

.tag-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tag-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tag-choice:hover span {
  border-color: #b8c2ff;
  color: var(--primary-dark);
}

.tag-choice input:focus-visible + span {
  outline: 2px solid rgba(70, 95, 255, 0.32);
  outline-offset: 2px;
}

.tag-choice input:checked + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: none;
}

.tag-choice input:checked + span:hover {
  border-color: var(--primary-dark);
  background: var(--primary-soft);
}

.tag-choice.auto-locked span,
.tag-choice.auto-locked input:checked + span {
  border-color: #fda29b;
  background: #fff1f0;
  color: #d92d20;
  box-shadow: none;
  cursor: not-allowed;
}

.tag-choice.auto-locked input:disabled + span {
  opacity: 1;
}

.priority-choice-box {
  display: grid;
  gap: 0;
  align-self: end;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #475467;
  font-size: 12px;
  font-weight: 760;
}

.priority-choice-box .tag-choice-options {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2f4f7;
}

.priority-choice span {
  min-width: 76px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
}

.priority-choice-normal span {
  color: var(--primary);
}

.priority-choice-urgent span {
  color: #dc2626;
}

.priority-choice-normal input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

.priority-choice-normal input:checked + span:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  color: #fff;
}

.priority-choice-urgent input:checked + span {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
  box-shadow: none;
}

.priority-choice-urgent input:checked + span:hover {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #fff;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.work-order-inline-row {
  display: grid;
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.work-order-top-row {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-contact-row {
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px);
}

.work-order-bank-row {
  grid-template-columns: repeat(3, minmax(180px, 220px)) minmax(340px, 1fr);
}

.work-order-assignee-row {
  grid-template-columns: minmax(220px, 280px) minmax(220px, 280px) max-content;
}

.work-order-assignee-row .priority-choice-box {
  justify-self: start;
}

.work-order-location-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.work-order-location-block.dragging {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
}

.work-order-location-block.dragging .work-order-location-head span {
  color: var(--primary);
}

.work-order-location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-location-head strong {
  color: var(--text);
  font-size: 14px;
}

.work-order-location-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.work-order-location-drop-zone {
  display: grid;
  width: 100%;
  min-height: 88px;
  place-content: center;
  gap: 5px;
  padding: 14px 18px;
  border: 1px dashed #94a3b8;
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}

.work-order-location-drop-zone:hover,
.work-order-location-drop-zone:focus-visible,
.work-order-location-block.dragging .work-order-location-drop-zone {
  border-color: var(--primary);
  background: #eff6ff;
  color: var(--primary);
  outline: none;
  box-shadow: none;
}

.work-order-location-drop-zone strong {
  font-size: 14px;
}

.work-order-location-drop-zone span {
  color: var(--muted);
  font-size: 12px;
}

.work-order-location-block.dragging .work-order-location-drop-zone span {
  color: var(--primary);
}

.work-order-location-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.work-order-location-input-row textarea {
  min-height: 72px;
}

.work-order-location-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px;
}

.work-order-location-result {
  display: grid;
  gap: 8px;
}

.work-order-location-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.work-order-location-status:empty {
  display: none;
}

.work-order-location-status.is-success {
  color: #067647;
}

.work-order-location-status.is-warn {
  color: #b54708;
}

.work-order-location-status.is-danger {
  color: var(--danger);
}

.work-order-location-status.is-loading {
  color: var(--primary);
}

.work-order-location-link {
  justify-self: start;
}

.work-order-detail-location {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.work-order-merchant-name-field {
  width: min(40em, 100%);
  flex: 0 1 40em;
}

.work-order-top-row > label:not(.work-order-merchant-name-field) {
  flex: 0 0 200px;
}

.work-order-top-row .priority-choice-box {
  flex: 0 0 auto;
  justify-self: start;
}

.work-order-marketer-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-order-marketer-control .input-clear-wrap {
  flex: 0 0 168px;
}

.work-order-marketer-match {
  min-width: 0;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}

.work-order-marketer-match.matched {
  color: #067647;
}

.work-order-marketer-match.unmatched {
  color: var(--danger);
}

.work-order-upload-set {
  display: grid;
  gap: 12px;
}

.work-order-upload-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.work-order-drop {
  display: grid;
  gap: 6px;
  width: min(200px, 100%);
  max-width: 200px;
  justify-self: start;
  min-height: 104px;
  align-content: center;
  justify-items: center;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  padding: 12px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.work-order-drop:hover,
.work-order-drop:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.work-order-drop.dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.work-order-drop strong {
  color: var(--text);
}

.work-order-upload-preview {
  display: grid;
  min-width: 0;
  min-height: 104px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px;
  background: var(--surface-tint);
}

.work-order-upload-preview .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(92px, 120px));
}

.work-order-upload-preview .empty-inline {
  align-self: center;
  color: var(--muted);
}

.work-order-list {
  display: grid;
  gap: 8px;
}

.work-order-card {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.work-order-card.active {
  border-color: var(--primary);
  background: var(--primary-quiet);
  box-shadow: var(--focus-ring);
}

.work-order-card em,
.work-order-card small {
  color: var(--muted);
  font-style: normal;
}

.work-order-card b {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11px;
}

.work-order-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.work-order-detail.empty {
  min-height: 260px;
  place-items: center;
  color: var(--muted);
}

.work-order-detail-head,
.work-order-actions,
.work-order-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.work-order-detail-head {
  justify-content: space-between;
}

.work-order-meta {
  color: var(--muted);
  font-size: 12px;
}

.conversation-detail {
  gap: 16px;
}

.normal-detail {
  gap: 18px;
}

.work-order-detail-section {
  display: grid;
  gap: 10px;
}

.work-order-detail-section h4 {
  margin: 0;
  color: #101828;
  font-size: 14px;
}

.work-order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-detail-pair {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.work-order-detail-pair span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.work-order-detail-pair strong {
  min-width: 0;
  color: #1d2939;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.work-order-progress {
  display: grid;
  gap: 10px;
}

.work-order-progress-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.work-order-progress-item i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.work-order-progress-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-progress-item strong {
  font-size: 13px;
}

.work-order-progress-item span,
.work-order-progress-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.work-order-replies {
  display: grid;
  gap: 10px;
}

.work-order-reply {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.work-order-reply-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.work-order-reply-body,
.work-order-reply-next {
  display: grid;
  gap: 3px;
}

.work-order-reply-body span,
.work-order-reply-next span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.work-order-reply-body p,
.work-order-reply-next p {
  margin: 0;
  color: #1d2939;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.work-order-operation-box {
  display: grid;
  gap: 12px;
}

.work-order-conversation {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.work-order-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: min(760px, 100%);
  justify-self: start;
}

.work-order-message.from-worker {
  grid-template-columns: minmax(0, 1fr) 34px;
  justify-self: end;
}

.work-order-message-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--slate);
  font-size: 13px;
  font-weight: 860;
  box-shadow: none;
}

.work-order-message.from-worker .work-order-message-avatar {
  grid-column: 2;
  grid-row: 1;
  background: var(--primary);
  color: #fff;
}

.work-order-message.from-worker .work-order-message-body {
  grid-column: 1;
  grid-row: 1;
  border-color: #c7d2fe;
  background: #eef2ff;
}

.work-order-message.from-system {
  justify-self: center;
  grid-template-columns: minmax(0, 1fr);
  width: min(560px, 100%);
}

.work-order-message.from-system .work-order-message-avatar {
  display: none;
}

.work-order-message-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.work-order-message.composer .work-order-message-body {
  border-color: #dbe4ff;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.work-order-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-message-head strong {
  font-size: 13px;
}

.work-order-message-head span,
.work-order-message-body p {
  color: var(--muted);
  font-size: 12px;
}

.work-order-message-body p {
  margin: 0;
  line-height: 1.7;
  white-space: pre-wrap;
}

.work-order-message-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

.work-order-message-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.work-order-message-summary b {
  color: var(--muted);
  font-size: 11px;
}

.work-order-score-line {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--success-soft);
  color: #067647;
  font-size: 12px;
  font-weight: 780;
}

.work-order-score-line strong {
  font-size: 16px;
}

.work-order-message .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.work-order-composer-form {
  display: grid;
  gap: 12px;
  padding-top: 0;
  border-top: 0;
}

.work-order-composer-form textarea {
  min-height: 84px;
}

.work-order-section {
  display: grid;
  gap: 9px;
}

.work-order-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.work-order-attachment {
  display: grid;
  gap: 5px;
}

.work-order-attachment-media {
  position: relative;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-tint);
}

.work-order-attachment-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #f8fafc;
  color: #667085;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.work-order-attachment-thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.work-order-attachment-thumb.is-empty {
  background: #f2f4f7;
}

.work-order-attachment-state {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.work-order-attachment.is-error .work-order-attachment-state {
  background: rgba(220, 38, 38, 0.92);
}

.work-order-attachment-delete {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transform: translate(50%, -50%);
}

.work-order-attachment-delete::before,
.work-order-attachment-delete::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 1.5px;
  border-radius: 999px;
  background: #fff;
  transform-origin: center;
}

.work-order-attachment-delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.work-order-attachment-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.work-order-attachment-delete:hover,
.work-order-attachment-delete:focus-visible {
  background: #b91c1c;
  outline: none;
  transform: translate(50%, -50%);
}

.work-order-attachment-media:hover .work-order-attachment-placeholder,
.work-order-attachment-media:focus-within .work-order-attachment-placeholder {
  background: #eef4ff;
  color: var(--primary);
  transform: scale(1.02);
}

.work-order-attachment > span {
  color: var(--muted);
  font-size: 12px;
}

.work-order-action-form {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.work-order-timeline {
  display: grid;
  gap: 9px;
}

.work-order-detail-view {
  max-width: 1480px;
  margin: 0 auto;
}

.work-order-edit-view {
  max-width: 1480px;
  margin: 0 auto;
}

.work-order-detail-page {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-bottom: 24px;
}

.work-order-edit-page {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding-bottom: 24px;
}

.work-order-detail-toolbar,
.work-order-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-order-detail-toolbar {
  justify-content: flex-start;
}

.work-order-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
  gap: 22px;
  align-items: start;
}

.work-order-edit-main,
.work-order-edit-side,
.work-order-edit-block {
  min-width: 0;
}

.work-order-edit-main {
  padding-right: 22px;
  border-right: 1px solid var(--line);
}

.work-order-edit-form {
  gap: 16px;
}

.work-order-edit-side {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 16px;
}

.work-order-edit-block {
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.work-order-edit-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.work-order-edit-block h4 {
  margin: 0;
  font-size: 14px;
}

.work-order-detail-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.work-order-detail-page .work-order-detail-header {
  align-items: flex-start;
  justify-content: flex-start;
}

.work-order-detail-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.work-order-detail-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.work-order-detail-topline {
  gap: 8px 18px;
}

.work-order-detail-topline > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
}

.work-order-detail-topline > span:first-child {
  justify-content: flex-start;
  text-align: left;
}

.work-order-detail-topline b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.work-order-detail-topline strong {
  min-width: 0;
  color: #101828;
  font-size: 13px;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.work-order-detail-topline .pill {
  font-style: normal;
}

.work-order-priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 76px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
  white-space: nowrap;
}

.work-order-priority-pill-normal {
  border-color: var(--primary);
  background: var(--primary);
}

.work-order-priority-pill-urgent {
  border-color: #dc2626;
  background: #dc2626;
}

.work-order-detail-header h3 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  line-height: 1.35;
}

.work-order-detail-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
}

.work-order-detail-header p {
  margin: 0;
}

.work-order-detail-status {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.work-order-detail-status small {
  color: var(--muted);
  font-size: 12px;
}

.work-order-detail-summary-section {
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.work-order-detail-summary-section .work-order-detail-grid {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
}

.work-order-detail-summary-section .work-order-detail-pair {
  border-radius: 6px;
  background: #fff;
}

.work-order-detail-summary-attachments {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.work-order-detail-summary-attachments > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.work-order-detail-summary-attachments .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(88px, 112px));
}

.work-order-workflow {
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: none;
  overflow: visible;
  padding: 2px 0;
}

.work-order-workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  justify-items: stretch;
  align-items: start;
  min-width: 0;
  padding: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.work-order-workflow-step::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background: var(--line);
}

.work-order-workflow-step:last-child::after {
  display: none;
}

.work-order-workflow-step i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-style: normal;
}

.work-order-workflow-step-body {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: none;
}

.work-order-workflow-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-workflow-step-head strong {
  color: #1d2939;
  font-size: 14px;
}

.work-order-workflow-step-body b {
  color: #344054;
  font-size: 13px;
  line-height: 1.4;
}

.work-order-workflow-step-body p,
.work-order-workflow-step-body em {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.work-order-workflow-step.current .work-order-workflow-step-body {
  border-color: var(--line-strong);
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  background: #fff;
}

.work-order-workflow-step.done,
.work-order-workflow-step.current {
  color: #1d2939;
}

.work-order-workflow-step.done::after {
  background: #12b76a;
}

.work-order-workflow-step.done i {
  border-color: #12b76a;
  background: #12b76a;
  color: #fff;
}

.work-order-workflow-step.current i {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

.work-order-workflow-step.stopped i,
.work-order-workflow.is-cancelled .work-order-workflow-step.current i {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.work-order-workflow-step.stopped .work-order-workflow-step-body {
  border-color: #fecdca;
  border-left-color: var(--danger);
  background: #fff;
}

.work-order-workflow-step.returned i {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: #b54708;
}

.work-order-workflow-step.returned .work-order-workflow-step-body {
  border-color: #fedf89;
  background: #fff;
}

.work-order-node-content {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.work-order-node-block {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.work-order-node-block > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.work-order-create-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  gap: 10px 42px;
  min-width: 0;
}

.work-order-create-record {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.work-order-create-record span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.work-order-create-record strong {
  min-width: 0;
  color: #1d2939;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.work-order-workflow-step-body .work-order-detail-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.work-order-workflow-step-body .work-order-detail-pair {
  padding: 8px 9px;
  border-radius: 6px;
  background: #fff;
}

.work-order-workflow-step.current .work-order-detail-pair {
  background: #fff;
}

.work-order-node-attachments .work-order-attachments.compact,
.work-order-node-event-attachments .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(88px, 112px));
}

.work-order-node-events {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.work-order-completion-confirmation {
  display: grid;
  gap: 10px;
}

.work-order-completion-confirmation-item {
  display: grid;
  gap: 10px;
}

.work-order-completion-meta {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.work-order-completion-confirmation-item p {
  margin: 0;
  color: #344054;
  font-size: 14px;
  line-height: 1.6;
}

.work-order-completion-score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: #667085;
  font-size: 12px;
}

.work-order-completion-duration {
  color: #667085;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.work-order-completion-duration span {
  color: #1d2939;
  font-weight: 400;
}

.work-order-completion-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 26px;
  line-height: 1;
}

.work-order-completion-stars i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #d0d5dd;
  font-style: normal;
}

.work-order-completion-stars i.selected {
  background: transparent !important;
  color: #fdb022;
}

.work-order-node-event {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-left: 10px;
  border-left: 3px solid var(--line-strong);
}

.work-order-node-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.work-order-node-event-head b {
  min-width: 0;
  color: #1d2939;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.work-order-node-event-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.work-order-node-event p {
  margin: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.work-order-node-event .work-order-change-list {
  margin-top: 0;
}

.work-order-node-event-attachments {
  margin-top: 2px;
}

.work-order-process-conversation {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.work-order-process-message {
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: min(560px, 68%);
  min-width: 0;
}

.work-order-process-message.reviewer {
  justify-self: end;
}

.work-order-process-message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.work-order-process-message.reviewer .work-order-process-message-meta {
  justify-content: flex-end;
}

.work-order-process-message-meta strong {
  color: #344054;
  font-size: 12px;
}

.work-order-process-return-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fef2f2;
  color: #b42318;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

.work-order-process-message-bubble {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px 8px 8px;
  background: #fff;
}

.work-order-process-message.reviewer .work-order-process-message-bubble {
  border-color: #b9caff;
  border-radius: 8px 2px 8px 8px;
  background: var(--primary-quiet);
}

.work-order-process-message-bubble b {
  color: #1d2939;
  font-size: 13px;
}

.work-order-process-message-bubble p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.work-order-process-message-bubble .work-order-change-list {
  margin-top: 0;
}

.work-order-process-message-attachments {
  margin-top: 2px;
}

.work-order-process-message-attachments .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(88px, 112px));
}

.user-account-password-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.user-account-password-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.person-login-account-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.person-login-account-heading {
  display: grid;
  gap: 3px;
}

.person-login-account-heading strong {
  color: #1d2939;
  font-size: 14px;
}

.person-login-account-heading span {
  color: var(--muted);
  font-size: 12px;
}

.person-login-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.person-login-account-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.person-login-access-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.binding-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.binding-bound { border-color: #abefc6; color: #067647; background: #ecfdf3; }
.binding-unbound { border-color: #fedf89; color: #b54708; background: #fffaeb; }
.binding-unavailable { border-color: #d0d5dd; color: var(--muted); background: var(--surface-soft); }
.binding-action { margin-left: 7px; }

.miniapp-binding-modal { position: fixed; inset: 0; z-index: 121; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.42); }
.miniapp-binding-modal.hidden { display: none; }
.miniapp-binding-modal-card { width: min(420px, 100%); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22); }
.miniapp-binding-modal-card > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.miniapp-binding-modal-card header div { display: grid; gap: 3px; }
.miniapp-binding-modal-card header strong { color: #1d2939; font-size: 16px; }
.miniapp-binding-modal-card header span { color: var(--muted); font-size: 12px; }
.miniapp-binding-modal-body { display: grid; justify-items: center; gap: 12px; padding: 22px; text-align: center; }
.miniapp-binding-modal-qr { display: grid; place-items: center; width: 250px; height: 250px; padding: 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.miniapp-binding-modal-qr :is(canvas, img) { display: block; max-width: 100%; height: auto; }
.miniapp-binding-modal-body p { margin: 0; color: #475467; font-size: 13px; line-height: 1.65; }
.miniapp-binding-modal-body > span { color: var(--muted); font-size: 12px; }

.person-transfer-modal { position: fixed; inset: 0; z-index: 121; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.42); }
.person-transfer-modal.hidden { display: none; }
.person-transfer-modal-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1160px, 94vw); height: min(720px, 86vh); overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22); }
.person-transfer-modal-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.person-transfer-modal-card > header > div { display: grid; gap: 3px; }
.person-transfer-modal-card > header strong { color: #1d2939; font-size: 17px; }
.person-transfer-modal-card > header span { color: var(--muted); font-size: 12px; }
.person-transfer-board { display: grid; grid-template-columns: 1fr; align-content: start; gap: 12px; min-height: 0; overflow-y: auto; padding: 16px 20px; background: #f8fafc; }
.person-transfer-department { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.person-transfer-department.is-drop-target { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(53, 91, 255, 0.12); }
.person-transfer-department-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-right: 1px solid var(--line); background: #fbfcfe; }
.person-transfer-department-head strong { color: #344054; font-size: 14px; }
.person-transfer-department-head span { color: var(--muted); font-size: 12px; }
.person-transfer-person-list { display: flex; align-content: start; align-items: stretch; flex-wrap: wrap; gap: 8px; min-height: 76px; padding: 10px; }
.person-transfer-person-card { display: grid; gap: 3px; width: 210px; padding: 10px; border: 1px solid #dbe3ee; border-radius: 5px; background: #fff; color: #344054; text-align: left; cursor: grab; }
.person-transfer-person-card:hover { border-color: #9bb5ff; background: #f5f8ff; }
.person-transfer-person-card.is-dragging { opacity: 0.45; }
.person-transfer-person-card.is-pending { border-color: #9bb5ff; background: #eef4ff; }
.person-transfer-person-card.is-pending span { color: #2e5ae8; font-weight: 700; }
.person-transfer-person-card strong { font-size: 14px; }
.person-transfer-person-card span { color: var(--muted); font-size: 12px; }
.person-transfer-empty { padding: 18px 6px; color: #98a2b3; font-size: 13px; text-align: center; }
.person-transfer-modal-card > footer { display: grid; grid-template-columns: minmax(210px, 1fr) 260px auto; gap: 14px; align-items: end; padding: 14px 20px; border-top: 1px solid var(--line); }
.person-transfer-summary { min-height: 40px; color: #475467; font-size: 13px; line-height: 1.5; }
.person-transfer-summary strong { color: #1d2939; }
.person-transfer-reason { display: grid; gap: 6px; }
.person-transfer-reason span { color: #475467; font-size: 12px; }
.person-transfer-reason input { width: 100%; }
.person-transfer-actions { display: flex; justify-content: flex-end; gap: 8px; }

.access-choice-box {
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.access-choice-box legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.access-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.permission-intro {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.permission-details {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.permission-details summary {
  padding: 10px 12px;
  cursor: pointer;
  color: #344054;
  font-weight: 600;
}

.permission-details-body {
  padding: 0 12px 12px;
}

.work-order-node-action {
  padding-top: 2px;
}

.work-order-node-action-separated {
  position: relative;
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px dashed #cbd5e1;
}

.work-order-node-action-separated::before {
  content: "本次处理";
  position: absolute;
  top: -11px;
  left: 0;
  padding: 0 9px 0 0;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
}

.work-order-node-action .work-order-operation-layout {
  gap: 14px;
}

.work-order-node-action .work-order-maintenance {
  padding-left: 16px;
}

.work-order-handle-section {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.work-order-operation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.work-order-operation-layout.has-secondary {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.work-order-maintenance {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.work-order-form-heading {
  display: grid;
  gap: 4px;
}

.work-order-form-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.work-order-maintenance {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.work-order-task-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.work-order-score-field {
  display: grid;
  gap: 7px;
  color: #475467;
  font-size: 12px;
  font-weight: 500;
}

.work-order-score-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
}

.work-order-score-star {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: 4px;
  outline: 0 !important;
  background: transparent !important;
  color: #d0d5dd;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none !important;
  -webkit-appearance: none;
}

.work-order-score-star:hover,
.work-order-score-star:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fdb022;
}

.work-order-score-star.selected {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fdb022;
}

.work-order-maintenance .work-order-task-form + .work-order-task-form {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.work-order-close-details {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.work-order-close-details summary {
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.work-order-close-details[open] summary {
  margin-bottom: 12px;
}

.work-order-task-form textarea {
  min-height: 88px;
}

.work-order-task-form > button {
  justify-self: start;
}

.work-order-assignment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-information-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.work-order-source-attachments {
  display: grid;
  gap: 8px;
}

.work-order-source-attachments > strong {
  color: var(--muted);
  font-size: 12px;
}

.work-order-history-wrap {
  max-height: none;
  overflow: visible !important;
}

.work-order-query-page .work-order-table-wrap,
.work-order-detail-page .table-wrap {
  max-height: none;
  overflow: visible !important;
}

.work-order-history-table th:first-child {
  width: 150px;
}

.work-order-history-table th:nth-child(3) {
  width: 120px;
}

.work-order-history-table th:last-child {
  width: 170px;
}

.work-order-history-table td {
  vertical-align: top;
}

.work-order-history-table td p {
  margin: 0;
  color: #344054;
  line-height: 1.6;
  white-space: pre-wrap;
}

.work-order-change-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.work-order-change-item {
  display: grid;
  grid-template-columns: minmax(84px, 0.42fr) minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fafb;
  color: #344054;
  font-size: 12px;
  line-height: 1.45;
}

.work-order-change-item b {
  color: #1d2939;
  font-weight: 820;
}

.work-order-change-item span,
.work-order-change-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 760;
}

.work-order-change-item span {
  color: var(--muted);
}

.work-order-change-item i {
  color: var(--muted);
  font-style: normal;
  text-align: center;
}

.work-order-change-item strong {
  color: var(--primary-dark);
}

.work-order-change-records {
  display: grid;
  gap: 14px;
}

.work-order-change-record {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.work-order-change-record:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.work-order-change-record-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #475467;
  font-size: 13px;
  font-weight: 400;
}

.work-order-change-record-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #fedf89;
  border-radius: 50%;
  background: #fffaeb;
  color: #b54708;
  font-size: 12px;
  font-weight: 600;
}

.work-order-change-record-head time {
  color: var(--muted);
}

.work-order-change-record-fields {
  display: grid;
  gap: 8px;
  margin: 10px 0 0 34px;
  max-width: 920px;
}

.work-order-change-record-columns,
.work-order-change-record-field {
  display: grid;
  grid-template-columns: 160px minmax(220px, 340px) minmax(220px, 340px);
  gap: 0;
  align-items: start;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
}

.work-order-change-record-columns {
  color: var(--muted);
  font-size: 12px;
}

.work-order-change-record-columns span:nth-child(-n + 2),
.work-order-change-record-field > :nth-child(-n + 2) {
  padding-right: 16px;
}

.work-order-change-record-columns span:last-child,
.work-order-change-record-field > div:last-child {
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.work-order-change-record-label {
  color: #475467;
}

.work-order-change-record-field > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.work-order-change-record-field + .work-order-change-record-field {
  padding-top: 8px;
  border-top: 1px dashed #eaecf0;
}

.work-order-change-record-field > div:last-child {
  color: var(--primary-dark);
}

.work-order-change-record-field.is-attachments > div {
  padding-top: 2px;
}

.work-order-change-record-field.is-attachments .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(58px, 72px));
  gap: 6px;
}

.work-order-change-record-field.is-attachments .work-order-attachment-media {
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.work-order-change-record-field.is-attachments .work-order-attachment-placeholder {
  border-radius: 0;
  background: transparent;
}

@media (max-width: 0px) {
  .work-order-change-record-columns,
  .work-order-change-record-field {
    grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr);
    font-size: 12px;
  }

  .work-order-change-record-fields {
    margin-left: 0;
  }
}

.work-order-history-attachments {
  margin-top: 10px;
}

.work-order-history-attachments .work-order-attachments.compact {
  grid-template-columns: repeat(auto-fill, minmax(88px, 116px));
}

.timeline-item {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--primary-soft);
  padding-left: 10px;
}

.timeline-item span,
.timeline-item em,
.empty-inline {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.no-permission,
.info-box {
  margin: 16px;
  padding: 15px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 760;
}

.no-permission {
  border: 1px solid #fecdca;
  background: var(--danger-soft);
  color: #b42318;
}

.info-box {
  border: 1px solid #c7d7fe;
  background: var(--primary-soft);
  color: #344054;
}

.no-permission.compact,
.info-box.compact {
  margin: 0;
  padding: 12px;
}

.image-compressor-page {
  gap: 16px;
}

.pdf-compressor-page { gap: 16px; }
.image-scan-pdf-page { gap: 16px; }
.image-scan-pdf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.image-scan-pdf-panel { border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; }
.image-scan-pdf-drop { display: grid; place-items: center; gap: 10px; width: 100%; min-height: 150px; border: 1px dashed #98a2b3; border-radius: 3px; background: #fff; color: var(--text); cursor: pointer; }
.image-scan-pdf-drop:hover, .image-scan-pdf-drop.dragging, .image-scan-pdf-drop.processing { border-color: var(--primary); background: var(--primary-soft); }
.image-scan-pdf-drop:disabled { cursor: wait; }
.image-scan-pdf-preview { display: grid; min-height: 420px; place-items: center; padding: 16px; background: #f7f8fa; }
.image-scan-pdf-crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; transform: rotate(var(--page-rotation, 0deg)); transform-origin: center; transition: transform .16s ease; }
.image-scan-pdf-preview canvas { display: block; max-width: 100%; max-height: 620px; border: 1px solid #d9dee8; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.image-scan-pdf-crop-frame { position: absolute; z-index: 1; border: 2px solid #ef4444; box-shadow: 0 0 0 9999px rgba(16, 24, 40, .16); pointer-events: none; }
.image-scan-pdf-crop-handle { position: absolute; width: 14px; height: 14px; min-width: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #ef4444; box-shadow: 0 1px 3px rgba(127, 29, 29, .35); pointer-events: auto; touch-action: none; }
.image-scan-pdf-crop-handle.top-left { top: -8px; left: -8px; cursor: nwse-resize; }
.image-scan-pdf-crop-handle.top-right { top: -8px; right: -8px; cursor: nesw-resize; }
.image-scan-pdf-crop-handle.bottom-left { bottom: -8px; left: -8px; cursor: nesw-resize; }
.image-scan-pdf-crop-handle.bottom-right { right: -8px; bottom: -8px; cursor: nwse-resize; }
.image-scan-pdf-empty { display: grid; gap: 6px; place-items: center; color: var(--muted); font-size: 13px; }
.image-scan-pdf-empty strong { color: var(--text); font-size: 15px; }
.image-scan-pdf-panel-head { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.image-scan-pdf-panel-head strong { font-size: 15px; }
.image-scan-pdf-panel-head span { color: var(--muted); font-size: 12px; }
.image-scan-pdf-preview-actions { display: inline-flex; align-items: center; gap: 8px; }
.image-scan-pdf-rotate-tool { display: grid; width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #475467; cursor: pointer; place-items: center; }
.image-scan-pdf-rotate-tool:hover:not(:disabled), .image-scan-pdf-rotate-tool:focus-visible { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); outline: none; }
.image-scan-pdf-rotate-tool:disabled { color: #c7ced9; cursor: not-allowed; }
.image-scan-pdf-rotate-tool i, .image-scan-pdf-rotate-tool i svg { display: block; width: 16px; height: 16px; }
.image-scan-pdf-rotate-tool i svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.image-scan-pdf-queue-actions { display: inline-flex; align-items: center; gap: 8px; }
.image-scan-pdf-queue-actions button { min-width: 0; }
.image-scan-pdf-queue { display: flex; align-items: center; min-height: 174px; gap: 8px; overflow-x: auto; padding: 16px; }
.image-scan-pdf-item { position: relative; display: grid; flex: 0 0 160px; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; text-align: left; }
.image-scan-pdf-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.image-scan-pdf-split { display: grid; flex: 0 0 32px; height: 220px; align-content: center; justify-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: #98a2b3; cursor: pointer; }
.image-scan-pdf-split i { display: block; width: 2px; height: 174px; background: currentColor; }
.image-scan-pdf-split span { display: grid; width: 30px; height: 22px; place-items: center; border: 0; font-size: 20px; line-height: 1; transform: rotate(270deg); }
.image-scan-pdf-split.is-split { color: #ef4444; }
.image-scan-pdf-split:not(.is-split) i { width: 0; border-left: 2px dashed currentColor; background: transparent; }
.image-scan-pdf-item-main { display: grid; gap: 7px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.image-scan-pdf-thumb { display: grid; height: 118px; place-items: center; overflow: hidden; background: #f5f6f8; border-radius: 2px; }
.image-scan-pdf-thumb img { width: 100%; height: 100%; object-fit: contain; }
.image-scan-pdf-item strong { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.image-scan-pdf-item span { color: var(--muted); font-size: 12px; }
.image-scan-pdf-remove { position: absolute; top: 0; right: 0; z-index: 2; display: grid; width: 12px; height: 12px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #dc2626; color: #fff; font-size: 0; line-height: 1; cursor: pointer; box-shadow: none; place-items: center; transform: translate(50%, -50%); }
.image-scan-pdf-remove::before, .image-scan-pdf-remove::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 1.5px; border-radius: 999px; background: #fff; transform-origin: center; }
.image-scan-pdf-remove::before { transform: translate(-50%, -50%) rotate(45deg); }
.image-scan-pdf-remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
.image-scan-pdf-remove:hover, .image-scan-pdf-remove:focus-visible { background: #b91c1c; outline: none; transform: translate(50%, -50%); }
.image-scan-pdf-queue-empty { display: grid; min-height: 100px; place-items: center; color: var(--muted); font-size: 13px; }
.pdf-compressor-card, .pdf-compressor-result { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.pdf-compressor-card { padding: 16px; }
.pdf-compressor-drop { display: grid; place-items: center; gap: 10px; width: 100%; min-height: 210px; border: 1px dashed #98a2b3; border-radius: 3px; background: #fff; color: var(--text); cursor: pointer; }
.pdf-compressor-drop:hover, .pdf-compressor-drop.dragging, .pdf-compressor-drop.processing { border-color: var(--primary); background: var(--primary-soft); }
.pdf-compressor-drop:disabled { cursor: wait; }
.pdf-compressor-drop > span:not(.upload-drop-hint) { color: var(--muted); font-size: 13px; }
.pdf-compressor-result-head { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pdf-compressor-result-head strong { font-size: 15px; }
.pdf-compressor-result-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 13px 16px; }
.pdf-compressor-result-row > div:first-child { display: grid; min-width: 0; gap: 4px; }
.pdf-compressor-result-row > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-compressor-result-row > div:first-child span { color: var(--muted); font-size: 12px; }
.rmb-uppercase-page { padding: 20px; }
.rmb-uppercase-card { display: grid; gap: 18px; width: min(720px, 100%); padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.rmb-uppercase-input-row { display: flex; align-items: flex-end; min-height: 68px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rmb-uppercase-card label { width: 250px; }
.rmb-uppercase-card .money-input-control { width: 250px; }
.rmb-uppercase-card .money-input-control .input-clear-wrap { width: 250px; max-width: 250px; flex: 0 0 250px; }
.rmb-uppercase-card .money-input-control input { width: 100%; font-size: 18px; font-variant-numeric: tabular-nums; }
.rmb-uppercase-result { display: grid; gap: 12px; min-height: 126px; padding: 18px 20px; border: 1px solid #d6e2ff; border-radius: 6px; background: var(--primary-quiet); }
.rmb-uppercase-result-head { display: flex; align-items: center; min-height: 22px; }
.rmb-uppercase-result-head > span:first-child { color: var(--muted); font-size: 13px; font-weight: 720; }
.rmb-uppercase-copy-state { margin-left: auto; color: var(--success); font-size: 12px; font-weight: 700; }
.rmb-uppercase-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: 7px; padding: 0 8px; border: 1px solid #c9d8fb; border-radius: 4px; background: #fff; color: var(--primary); font-size: 12px; line-height: 1; white-space: nowrap; }
.rmb-uppercase-copy:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.rmb-uppercase-copy:disabled { opacity: .42; }
.rmb-uppercase-copy img { display: block; width: 16px; height: 16px; object-fit: contain; }
.rmb-uppercase-result > strong { color: #1d3fb8; font-size: 22px; line-height: 1.65; letter-spacing: 1px; overflow-wrap: anywhere; }
.rmb-uppercase-result > strong.is-empty { color: var(--subtle); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.pdf-compressor-size { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.pdf-compressor-size b { color: #98a2b3; font-weight: 600; }
.pdf-compressor-size strong { color: #067647; }
.pdf-compressor-empty { display: grid; min-height: 76px; place-items: center; color: var(--muted); font-size: 13px; }

.image-compressor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.image-compressor-main,
.image-compressor-side,
.image-compressor-list-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  background: var(--surface-soft);
}

.image-compressor-main {
  background: #fff;
}

.image-compressor-drop {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-height: 176px;
  padding: 22px;
  border: 1px dashed #98a2b3;
  border-radius: var(--radius);
  background: #fff;
  color: #475467;
  text-align: center;
}

.image-compressor-drop:hover,
.image-compressor-drop.dragging,
.image-compressor-drop.processing {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.image-compressor-drop strong {
  font-size: 18px;
  line-height: 1.3;
}

.image-compressor-drop span:not(.image-compressor-drop-icon) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.image-compressor-drop svg,
.image-compressor-actions svg,
.image-compressor-row-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.image-compressor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.image-compressor-section-head strong {
  font-size: 15px;
  line-height: 1.25;
}

.image-compressor-section-head span {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 760;
}

.image-compressor-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.image-compressor-preview-stage {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, #f2f4f7 25%, transparent 25%),
    linear-gradient(-45deg, #f2f4f7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f2f4f7 75%),
    linear-gradient(-45deg, transparent 75%, #f2f4f7 75%);
  background-color: #fff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  overflow: hidden;
}

.image-compressor-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.image-compressor-empty,
.image-compressor-empty-row {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 112px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 760;
}

.image-compressor-empty strong {
  color: var(--text);
  font-size: 15px;
}

.image-compressor-empty span {
  font-size: 12px;
}

.image-compressor-options {
  display: grid;
  gap: 10px;
}

.suffix-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.suffix-input input {
  border-radius: var(--control-radius) 0 0 var(--control-radius);
}

.suffix-input b {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.image-compressor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-compressor-actions .primary,
.image-compressor-actions .ghost,
.image-compressor-row-actions .small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.image-compressor-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-compressor-stats div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: #fff;
}

.image-compressor-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.image-compressor-stats strong {
  font-size: 16px;
}

.image-compressor-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.image-compressor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: #fff;
}

.image-compressor-row.active {
  border-color: rgba(70, 95, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.1);
}

.image-compressor-row-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.image-compressor-thumb {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f2f4f7;
  overflow: hidden;
}

.image-compressor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-compressor-row-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.image-compressor-row-text strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.image-compressor-row-text em {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.image-compressor-status {
  justify-self: end;
  min-width: 64px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f2f4f7;
  color: #475467;
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.image-compressor-status.done {
  border-color: #abefc6;
  background: var(--success-soft);
  color: #067647;
}

.image-compressor-status.processing {
  border-color: #fedf89;
  background: var(--warning-soft);
  color: #b54708;
}

.image-compressor-status.error {
  border-color: #fecdca;
  background: var(--danger-soft);
  color: #b42318;
}

.image-compressor-row-actions {
  display: flex;
  gap: 6px;
}

.image-compressor-row-actions .small {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.allinpay-code-page {
  gap: 16px;
}

.allinpay-code-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 16px;
  align-items: start;
}

.allinpay-code-form,
.allinpay-code-preview-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}

/* The generated electronic-code preview itself must remain unobscured. */
.allinpay-code-preview-panel {
  position: relative;
  z-index: 10000;
}

.allinpay-code-section-head h2 {
  font-size: 20px;
}

.allinpay-code-section-head span,
.allinpay-code-hint,
.allinpay-code-field em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}

.allinpay-code-field {
  display: grid;
  gap: 8px;
}

.allinpay-code-field > span {
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
}

.allinpay-code-source-grid,
.allinpay-code-templates,
.allinpay-code-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.allinpay-code-source,
.allinpay-code-template {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  padding: 0 13px;
  background: #fff;
  color: var(--slate);
  font-size: 13px;
  font-weight: 780;
}

.allinpay-code-source.active,
.allinpay-code-template.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.allinpay-code-entry {
  display: grid;
  gap: 12px;
}

.allinpay-code-upload {
  display: grid;
  width: 100%;
  min-height: 140px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
}

.allinpay-code-upload.dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.allinpay-code-camera {
  position: relative;
  display: grid;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #182230;
  place-items: center;
}

.allinpay-code-camera video {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.allinpay-code-camera span {
  position: absolute;
  bottom: 14px;
  padding: 7px 10px;
  border-radius: var(--control-radius);
  background: rgba(0, 0, 0, .52);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.allinpay-code-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.allinpay-code-message.success { color: #067647; }
.allinpay-code-message.error { color: #b42318; }

.allinpay-code-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.allinpay-code-preview-head span,
.allinpay-code-template-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.allinpay-code-preview-stage {
  display: grid;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  place-items: center;
}

.allinpay-code-preview-stage img {
  display: block;
  width: 100%;
  max-height: 600px;
  object-fit: contain;
}

.allinpay-code-empty {
  display: grid;
  gap: 5px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.allinpay-code-empty strong { color: var(--text); font-size: 15px; }

.allinpay-code-template {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.allinpay-code-template i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--allinpay-code-start), var(--allinpay-code-end));
}

.allinpay-code-download { width: 100%; }

@media (max-width: 0px) {
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 0px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: min(320px, 84vw);
    height: 100vh;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: var(--shadow);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  nav {
    grid-template-columns: 1fr;
  }

  .nav-submenu {
    grid-column: auto;
  }

  .readonly-grid,
  .role-layout .form-grid,
  .invoice-form-layout .form-grid,
  .inventory-form-layout .form-grid,
  .work-order-layout,
  .work-order-edit-layout,
  .work-order-search-grid,
  .work-order-operation-layout,
  .work-order-information-grid,
  .work-order-assignment-fields,
  .work-order-location-input-row,
  .query-bar,
  .inventory-query-bar,
  .work-order-inline-row,
  .work-order-contact-row,
  .image-compressor-layout,
  .allinpay-code-layout,
  .permission-line {
    grid-template-columns: 1fr;
  }

  .work-order-maintenance {
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

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

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

  .work-order-node-action .work-order-maintenance {
    padding-left: 0;
  }

  .work-order-edit-main {
    padding-right: 0;
    border-right: 0;
  }

  .work-order-edit-side {
    position: static;
  }

  .pda-login-title,
  .pda-login-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .serial-range-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .action-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .work-order-location-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pagination-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 0px) {
  .work-order-upload-row {
    grid-template-columns: 1fr;
  }

  .login-shell {
    padding: 16px;
  }

  .login-panel {
    padding: 24px;
  }

  .workspace {
    min-height: 100vh;
  }

  .workspace-tabs {
    min-height: 48px;
    padding: 12px 12px 0;
  }

  .workspace-tab {
    min-width: 112px;
    max-width: 180px;
  }

  .content-panel {
    padding: 12px;
  }

  .image-preview-modal {
    padding: 10px;
  }

  .image-preview-shell {
    width: 100%;
    height: 92vh;
    min-height: 360px;
  }

  .image-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-preview-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .panel-body {
    padding: 0;
  }

  .serial-range-tools {
    grid-template-columns: 1fr;
  }

  .person-login-account-fields,
  .person-login-access-fields {
    grid-template-columns: 1fr;
  }

  .work-order-change-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .work-order-change-item i {
    text-align: left;
  }

  .work-order-message {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .work-order-message.from-worker {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .work-order-message-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .work-order-message-summary {
    grid-template-columns: 1fr;
  }

  .work-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .work-order-detail-summary-section .work-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .work-order-workflow-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
  }

  .work-order-workflow-step::after {
    left: 13px;
  }

  .work-order-workflow-step i {
    width: 28px;
    height: 28px;
  }

  .work-order-node-event-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .work-order-process-message {
    width: fit-content;
    max-width: 88%;
  }

  .user-account-password-fields {
    grid-template-columns: 1fr;
  }

  .person-login-account-fields {
    grid-template-columns: 1fr;
  }

  .image-compressor-drop {
    min-height: 142px;
    padding: 18px;
  }

  .image-compressor-preview-stage {
    min-height: 260px;
  }

  .image-compressor-stats,
  .image-compressor-row {
    grid-template-columns: 1fr;
  }

  .image-compressor-row-main {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .image-compressor-status {
    justify-self: start;
    grid-column: 2;
  }

  .image-compressor-row-actions {
    justify-content: flex-start;
  }

  .allinpay-code-form,
  .allinpay-code-preview-panel {
    padding: 15px;
  }

  .allinpay-code-preview-stage {
    min-height: 360px;
  }

  .work-order-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-order-detail-status {
    justify-items: start;
  }

  .work-order-workflow {
    max-width: none;
  }

  nav {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .nav-submenu {
    padding-left: 0;
  }

  .nav-btn {
    min-height: 34px;
    padding: 8px 9px;
    font-size: 12px;
  }

  .form-actions,
  .query-actions,
  .action-buttons {
    width: 100%;
  }

  .form-actions > *,
  .query-actions > *,
  .action-buttons > * {
    flex: 1 1 auto;
  }
}

/* super-static-contract:start */
.loading-logo {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #ee1d2f 0deg,
      #ff4a32 78deg,
      #f7a637 142deg,
      #ffd76a 198deg,
      #75b6ff 252deg,
      #465fff 314deg,
      transparent 315deg 360deg
    );
  box-shadow: none;
  font-size: 0;
  filter: none;
  object-fit: initial;
  animation: loading-spin 0.78s linear infinite;
}

.loading-logo::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}

.loading-box [data-loading-text] {
  display: block;
  color: #365cff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
}

.brand-mark {
  display: none;
}

.brand span:not(.brand-mark) {
  color: #1677ff;
}

.nav-logout {
  margin-top: 8px;
  color: var(--muted);
}

.nav-logout:hover {
  color: var(--primary);
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* super-static-contract:end */

/* Keep operational text calm; reserve strong weight for hierarchy and actions. */
.loading-box [data-loading-text] {
  color: #101828;
  font-weight: 400;
}

body .app-shell :is(p, span, label, td, input, select, textarea, output, strong, b),
body .login-shell :is(p, span, label, input, select, textarea) {
  font-weight: 400;
}

body .app-shell th {
  font-weight: 600;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body .app-shell :is(.primary, .ghost, .small) {
  font-weight: 600;
}

body .app-shell :is(.nav-btn, .nav-sub-btn, .workspace-tab-title, .workspace-tab-close) {
  font-weight: 500;
}

body .app-shell .workspace-tab-close {
  font-weight: 400;
}

body .app-shell .sidebar .nav-btn:not(.nav-sub-btn),
body .app-shell .sidebar .nav-btn:not(.nav-sub-btn) > span:not(.nav-caret) {
  font-weight: 700;
}

body .app-shell .brand strong,
body .app-shell h1,
body .app-shell h2,
body .app-shell h3,
body .login-shell h1,
body .login-shell h2,
body .login-shell h3 {
  font-weight: 700;
}

/* Keep the established desktop form language; mobile viewport changes do not reflow ERP pages. */
body .app-shell .invoice-application-row {
  display: flex;
  align-items: end;
  flex-wrap: nowrap;
  gap: 16px;
}

body .app-shell .invoice-application-row > label {
  flex: 0 0 200px;
}

body .app-shell label:has(input[name="quantity"]) {
  width: 100px;
  min-width: 100px;
}

body .app-shell .invoice-application-row > label:has(input[name="quantity"]),
body .app-shell .invoice-edit-row > label:has(input[name="quantity"]) {
  flex: 0 0 100px;
}

body .app-shell .invoice-application-row > label:has(input[name="merchantName"]),
body .app-shell .invoice-application-row > label:has(input[name="buyerName"]) {
  flex-basis: 400px;
  width: 400px;
}

body .app-shell .work-order-assignee-row {
  grid-template-columns: 200px 200px max-content;
  gap: 16px;
}

body .app-shell .priority-choice-box,
body .app-shell .priority-choice-box .tag-choice-options,
body .app-shell .priority-choice {
  width: auto;
}

body .app-shell .priority-choice-box .tag-choice-options {
  display: inline-flex;
  flex-wrap: nowrap;
}

.invoice-merchant-summary {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.invoice-date-summary {
  display: grid;
  gap: 4px;
  min-width: 134px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.invoice-date-summary > div { display: block; }

.invoice-merchant-summary > span:first-child { color: var(--text); }
.invoice-merchant-summary > span:last-child { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.invoice-edit-flow-no {
  color: #475467;
  font-size: 14px;
}

.invoice-edit-flow-no strong {
  color: #101828;
  font-weight: 700;
}

.invoice-detail-page { gap: 16px; }
.invoice-detail-flow-no { display: flex; align-items: center; gap: 10px; color: #475467; font-size: 14px; }
.invoice-detail-flow-no strong { color: #101828; font-size: 16px; }
.invoice-detail-section { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.invoice-detail-section > h2 { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); color: #1d2939; font-size: 15px; }
.invoice-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invoice-detail-item { display: grid; min-height: 78px; gap: 8px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.invoice-detail-item:nth-child(4n) { border-right: 0; }
.invoice-detail-item:nth-last-child(-n + 4) { border-bottom: 0; }
.invoice-detail-item > span { color: var(--muted); font-size: 12px; }
.invoice-detail-item > strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.invoice-detail-item.wide { grid-column: span 2; }
.invoice-detail-pdf { align-content: center; }
.invoice-red-detail-section > h2 { color: #b54708; background: #fffaeb; }

.invoice-edit-form {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
}

.invoice-edit-upload-row .invoice-upload {
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.invoice-edit-upload-row .invoice-upload-drop {
  min-height: 116px;
}

.invoice-edit-row {
  display: flex;
  align-items: end;
  flex-wrap: nowrap;
  gap: 16px;
}

.invoice-edit-row > label {
  flex: 0 0 200px;
  min-width: 0;
}

.invoice-edit-row > label:has(input[name="merchantName"]),
.invoice-edit-row > label:has(input[name="buyerName"]),
.invoice-edit-row > label:has(input[name="invoiceContent"]),
.invoice-edit-row > label:has(input[name="remark"]) {
  flex-basis: 400px;
}

body .app-shell .pagination-size select { width: auto !important; min-width: 86px; }

body .app-shell .date-range-field { position: relative; width: 400px; max-width: 100%; }
body .app-shell label:has(> select[name*="department" i]),
body .app-shell label:has(> select[name*="person" i]),
body .app-shell label:has(> select[data-person-field]),
body .app-shell label:has(> select[data-query-person-field]) {
  width: 200px;
  min-width: 200px;
}

body .app-shell .work-order-search-grid .work-order-created-range-field { grid-column: auto; width: 300px; }
body .app-shell .date-range-picker { position: relative; display: block; width: 100%; }
body .app-shell .date-range-display { display: flex; align-items: center; width: 100%; height: var(--control-height); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--control-radius); background: #fff; color: var(--text); font: inherit; text-align: left; }
body .app-shell .date-range-display::after { width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid #667085; border-bottom: 1.5px solid #667085; content: ""; transform: rotate(45deg) translateY(-2px); }
body .app-shell .date-range-display:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(54, 92, 255, 0.12); }
body .app-shell .date-range-popup { position: absolute; z-index: 1200; top: calc(100% + 6px); left: 0; width: 624px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16); }
body .app-shell .date-range-popup.hidden { display: none; }
body .app-shell .date-range-nav { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 10px; }
body .app-shell .date-range-nav strong { color: #344054; font-size: 13px; text-align: center; }
body .app-shell .date-range-nav button { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #475467; font-size: 20px; line-height: 1; }
body .app-shell .date-range-nav button:hover { background: #f2f4f7; }
body .app-shell .date-range-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body .app-shell .date-range-months section:first-child { padding-right: 18px; }
body .app-shell .date-range-months section + section { padding-left: 18px; border-left: 1px solid #eaecf0; }
body .app-shell .date-range-months section > strong { display: block; margin: 0 0 8px; color: #344054; font-size: 13px; text-align: center; }
body .app-shell .date-range-week, body .app-shell .date-range-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
body .app-shell .date-range-week { margin-bottom: 4px; color: #98a2b3; font-size: 11px; text-align: center; }
body .app-shell .date-range-days button { width: 100%; min-width: 0; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #344054; font-size: 12px; }
body .app-shell .date-range-days button:hover, body .app-shell .date-range-days button.in-range { background: #eff4ff; }
body .app-shell .date-range-days button.in-range { border-radius: 0; }
body .app-shell .date-range-days button.selected { border-radius: 4px; background: var(--primary); color: #fff; }