/*
  UX v2 for the local operations toolbox.
  This is a product-level layer: layout hierarchy, restrained color, readable
  controls, collapsible secondary panels, and quieter help text.
*/
:root {
  --ops-canvas: #f3f6f5;
  --ops-canvas-2: #eef3f2;
  --ops-panel: #fbfcfb;
  --ops-panel-raised: #ffffff;
  --ops-inset: #f1f4f3;
  --ops-text: #17211d;
  --ops-text-2: #44524c;
  --ops-muted: #728079;
  --ops-line: rgba(33, 49, 43, .14);
  --ops-line-strong: rgba(33, 49, 43, .22);
  --ops-primary: #1d6b60;
  --ops-primary-hover: #15534b;
  --ops-accent: #24342f;
  --ops-accent-soft: #e2f0ed;
  --ops-warning: #9a5b1f;
  --ops-danger: #b34038;
  --ops-danger-soft: #f8e8e6;
  --ops-radius-sm: 7px;
  --ops-radius: 10px;
  --ops-radius-lg: 13px;
  --ops-focus: 0 0 0 3px rgba(29, 107, 96, .18);
  --ops-shadow: 0 1px 1px rgba(18, 30, 25, .03), 0 12px 28px rgba(18, 30, 25, .055);
  --ops-shadow-soft: 0 1px 2px rgba(18, 30, 25, .045);
}

html {
  background: var(--ops-canvas);
}

body {
  background:
    linear-gradient(180deg, #fbfcfb 0, var(--ops-canvas) 310px, var(--ops-canvas-2) 100%) !important;
  color: var(--ops-text) !important;
  letter-spacing: 0 !important;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Microsoft YaHei", sans-serif !important;
}

h1 {
  color: var(--ops-text) !important;
  font-size: clamp(22px, 1.8vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

h2,
h3 {
  color: var(--ops-text) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

label {
  color: var(--ops-text-2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.app {
  background: transparent !important;
}

.sidebar,
.topbar,
.frame-shell,
.login-card,
.card,
.panel,
.preview,
.section,
.modal,
details.panel,
details.section {
  background: var(--ops-panel-raised) !important;
  border: 1px solid var(--ops-line) !important;
  border-radius: var(--ops-radius-lg) !important;
  box-shadow: var(--ops-shadow-soft) !important;
}

.card,
.panel,
.preview,
details.panel,
details.section {
  box-shadow: var(--ops-shadow) !important;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="date"],
select,
textarea {
  min-height: 38px !important;
  border: 1px solid var(--ops-line-strong) !important;
  border-radius: var(--ops-radius-sm) !important;
  background: var(--ops-inset) !important;
  color: var(--ops-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

textarea {
  line-height: 1.45 !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible {
  outline: none !important;
  border-color: rgba(29, 107, 96, .55) !important;
  box-shadow: var(--ops-focus) !important;
}

button,
.primary,
.secondary,
.ghost,
.tab,
.smallBtn {
  min-height: 36px !important;
  border-radius: var(--ops-radius-sm) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  transition: background .14s ease, border-color .14s ease, transform .14s ease !important;
}

button:not(.secondary):not(.ghost):not(.danger):not(.tab):not(.elementItem):not(.tool-button):not(.open-new):not(.logout):not(.ecosystem-step),
.primary {
  border: 1px solid var(--ops-primary) !important;
  background: var(--ops-primary) !important;
  color: #fff !important;
}

button:not(.secondary):not(.ghost):not(.danger):not(.tab):not(.elementItem):not(.tool-button):not(.open-new):not(.logout):not(.ecosystem-step):hover,
.primary:hover {
  background: var(--ops-primary-hover) !important;
  border-color: var(--ops-primary-hover) !important;
}

button.secondary,
.secondary,
button.ghost,
.ghost {
  border: 1px solid var(--ops-line-strong) !important;
  background: #f6f8f7 !important;
  color: var(--ops-text) !important;
}

button.secondary:hover,
.secondary:hover,
button.ghost:hover,
.ghost:hover {
  background: #ecf1ef !important;
  border-color: rgba(33, 49, 43, .3) !important;
}

button.danger,
.danger {
  background: var(--ops-danger) !important;
  border-color: var(--ops-danger) !important;
  color: #fff !important;
}

button:disabled {
  background: #d7ddda !important;
  border-color: #d7ddda !important;
  color: #7a8781 !important;
  opacity: 1 !important;
}

.badge,
.pill {
  border-radius: 999px !important;
  border: 1px solid rgba(29, 107, 96, .22) !important;
  background: var(--ops-accent-soft) !important;
  color: var(--ops-accent) !important;
  font-weight: 760 !important;
}

.hint,
.small,
.sub,
.side-sub,
.current-meta,
.tool-desc,
.muted {
  color: var(--ops-muted) !important;
  line-height: 1.5 !important;
}

body.ux-hide-help .hint:not(.ux-keep-help):not(#status):not(#fieldInfo):not(#mapPanel):not(#mapCheck),
body.ux-hide-help .compactPanel .hint,
body.ux-hide-help .file-drop .status:not(.error):not(.ok) {
  display: none !important;
}

.field:focus-within > .hint,
label:focus-within + .hint {
  display: block !important;
}

.status,
[id$="Status"],
#status {
  display: block !important;
  min-height: 30px !important;
  border: 1px solid var(--ops-line) !important;
  border-radius: var(--ops-radius-sm) !important;
  background: #f8faf9 !important;
  color: var(--ops-muted) !important;
  padding: 7px 9px !important;
  line-height: 1.45 !important;
}

.status.ok,
[id$="Status"].ok {
  background: #edf8f4 !important;
  color: #1d6b42 !important;
  border-color: rgba(29, 107, 66, .22) !important;
}

.status.warn {
  background: #fff6e8 !important;
  color: var(--ops-warning) !important;
  border-color: rgba(154, 91, 31, .2) !important;
}

.status.error {
  background: var(--ops-danger-soft) !important;
  color: var(--ops-danger) !important;
  border-color: rgba(179, 64, 56, .24) !important;
}

summary.ux-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ops-text) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  border-radius: var(--ops-radius-sm);
}

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

summary.ux-summary::after {
  content: "+";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ops-inset);
  color: var(--ops-muted);
  font-weight: 800;
}

details[open] > summary.ux-summary::after {
  content: "-";
}

details.panel,
details.section {
  padding: 12px !important;
}

details.panel > summary.ux-summary,
details.section > summary.ux-summary {
  margin: -2px 0 10px !important;
}

details.panel:not([open]),
details.section:not([open]) {
  padding-bottom: 12px !important;
}

details.panel:not([open]) > :not(summary),
details.section:not([open]) > :not(summary) {
  display: none !important;
}

table {
  border-color: var(--ops-line) !important;
}

th,
td {
  border-color: rgba(33, 49, 43, .12) !important;
}

th {
  background: #eef3f1 !important;
  color: var(--ops-text-2) !important;
}

.tabs {
  gap: 6px !important;
  padding: 10px 12px 0 !important;
}

.tab {
  background: #f4f7f6 !important;
  border: 1px solid var(--ops-line) !important;
  color: var(--ops-text-2) !important;
}

.tab.active,
.tab[aria-selected="true"] {
  background: var(--ops-primary) !important;
  border-color: var(--ops-primary) !important;
  color: #fff !important;
}

/* Toolbox shell */
.tool-button {
  border-radius: 11px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ops-text) !important;
}

.tool-button:hover {
  background: #f2f5f4 !important;
  border-color: var(--ops-line) !important;
}

.tool-button.active {
  background: #e8f1ef !important;
  border-color: rgba(29, 107, 96, .2) !important;
}

.tool-button.active .tool-icon,
.tool-icon {
  background: #eef2f1 !important;
  color: var(--ops-text) !important;
}

.tool-button.active .tool-icon {
  background: var(--ops-accent) !important;
  color: #fff !important;
}

.open-new,
.logout {
  background: #f6f8f7 !important;
  color: var(--ops-text) !important;
  border: 1px solid var(--ops-line-strong) !important;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ecosystem-rail {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(58vw, 720px);
  overflow-x: auto;
  padding: 3px;
  border: 1px solid rgba(33, 49, 43, .1);
  border-radius: 999px;
  background: #f7f9f8;
  scrollbar-width: none;
}

.ecosystem-rail::-webkit-scrollbar {
  display: none;
}

.ecosystem-step {
  display: inline-grid;
  grid-template-columns: auto;
  gap: 1px;
  min-width: 92px;
  min-height: 42px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ops-text-2) !important;
  text-align: left;
}

.ecosystem-step span {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 740;
  line-height: 1.1;
}

.ecosystem-step strong {
  color: inherit;
  font-size: 13px;
  line-height: 1.1;
}

.ecosystem-step.active {
  background: #e8f1ef !important;
  border-color: rgba(29, 107, 96, .2) !important;
  color: var(--ops-primary) !important;
}

.tool-list {
  gap: 12px !important;
  padding: 12px !important;
}

.tool-group {
  display: grid;
  gap: 5px;
}

.tool-group-title {
  padding: 0 8px 2px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 800;
}

.ux-flow-context {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0 14px 10px;
  padding: 6px 10px;
  border: 1px solid rgba(33, 49, 43, .11);
  border-radius: 999px;
  background: rgba(251, 252, 251, .82);
  color: var(--ops-muted);
  box-shadow: 0 1px 1px rgba(18, 30, 25, .025);
}

.ux-flow-context span {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 800;
}

.ux-flow-context strong {
  color: var(--ops-text);
  font-size: 12px;
  font-weight: 820;
}

.ux-flow-context em {
  color: var(--ops-muted);
  font-size: 12px;
  font-style: normal;
}

body.ux-page-xiangmai .ux-flow-context {
  margin-left: auto;
  margin-right: auto;
}

body.ux-page-tax-invoice .ux-flow-context {
  margin: -6px 0 12px;
}

/* Xiangmai */
body.ux-page-xiangmai .wrap {
  max-width: 1160px !important;
  padding: 18px !important;
}

body.ux-page-xiangmai .card {
  padding: 16px !important;
  margin: 12px 0 !important;
}

body.ux-page-xiangmai .card.warn {
  background: #fff8ed !important;
  color: #7b4219 !important;
  border-color: rgba(154, 91, 31, .22) !important;
}

body.ux-page-xiangmai .grid {
  gap: 12px !important;
}

body.ux-page-xiangmai details.card > summary.ux-summary {
  margin-bottom: 0 !important;
}

/* Batch label */
body.ux-page-batch-label .topbar {
  height: auto !important;
  min-height: 52px !important;
  align-items: center !important;
  padding: 8px 14px !important;
  background: rgba(251, 252, 251, .92) !important;
}

body.ux-page-batch-label .topbar .row {
  gap: 7px !important;
}

body.ux-page-batch-label .layout {
  grid-template-columns: 260px minmax(580px, 1fr) 300px !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}

body.ux-page-batch-label .panel {
  padding: 12px !important;
}

body.ux-page-batch-label .leftCol,
body.ux-page-batch-label .rightCol {
  align-self: start;
}

body.ux-page-batch-label .toolbar {
  gap: 7px !important;
}

body.ux-page-batch-label .stageWrap {
  min-height: 640px !important;
}

body.ux-page-batch-label .stageScroller {
  background: #dfe6e4 !important;
  border-color: rgba(33, 49, 43, .16) !important;
  border-radius: var(--ops-radius-lg) !important;
}

body.ux-page-batch-label .dropHint {
  background: rgba(251, 252, 251, .94) !important;
  border-color: rgba(29, 107, 96, .28) !important;
  color: var(--ops-accent) !important;
}

body.ux-page-batch-label .labelStage {
  box-shadow: 0 20px 44px rgba(24, 34, 30, .15) !important;
}

body.ux-page-batch-label .elementItem {
  background: #f5f8f7 !important;
  color: var(--ops-text) !important;
  border-color: var(--ops-line) !important;
}

body.ux-page-batch-label .elementItem.active {
  background: #e7f2ef !important;
  color: var(--ops-accent) !important;
  border-color: rgba(29, 107, 96, .3) !important;
}

body.ux-page-batch-label #dataPreview {
  max-height: 140px !important;
}

/* Tax invoice */
body.ux-page-tax-invoice {
  background:
    linear-gradient(180deg, #fbfcfb 0, #f3f6f5 340px, #eef3f2 100%) !important;
}

body.ux-page-tax-invoice .app {
  max-width: none !important;
  padding: 16px 20px !important;
}

body.ux-page-tax-invoice .topbar {
  padding: 8px 0 14px !important;
  align-items: center !important;
}

body.ux-page-tax-invoice .topbar .sub {
  max-width: 680px !important;
}

body.ux-page-tax-invoice .layout {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) !important;
  gap: 14px !important;
}

body.ux-page-tax-invoice .panel {
  padding: 13px !important;
  gap: 12px !important;
}

body.ux-page-tax-invoice .file-drop {
  padding: 10px !important;
  gap: 8px !important;
  background: #f8faf9 !important;
  border-color: rgba(33, 49, 43, .16) !important;
}

body.ux-page-tax-invoice .doc-wrap {
  overflow: auto !important;
  background:
    linear-gradient(90deg, rgba(33, 49, 43, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(33, 49, 43, .08) 1px, transparent 1px),
    #e8f3ee !important;
  background-size: 40px 40px !important;
}

body.ux-page-tax-invoice .document {
  box-shadow: 0 18px 42px rgba(24, 34, 30, .12) !important;
}

@media screen and (max-width: 1180px) {
  body.ux-page-batch-label .layout,
  body.ux-page-tax-invoice .layout {
    grid-template-columns: 1fr !important;
  }

  body.ux-page-batch-label .rightCol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.ux-page-tax-invoice .panel {
    position: static !important;
    max-height: none !important;
  }
}

@media screen and (max-width: 820px) {
  .app {
    height: auto !important;
  }

  .grid,
  .grid2,
  .grid3,
  .grid-2,
  .grid-3,
  .summary {
    grid-template-columns: 1fr !important;
  }

  body.ux-page-batch-label .rightCol {
    grid-template-columns: 1fr !important;
  }

  body.ux-page-batch-label .stageScroller {
    padding: 28px !important;
  }

  body.ux-page-tax-invoice .app {
    padding: 12px !important;
  }

  body.ux-page-tax-invoice .topbar {
    grid-template-columns: 1fr !important;
  }

  body.ux-page-tax-invoice .document {
    width: 100% !important;
    min-width: 0 !important;
    padding: 24px 18px !important;
  }

  body.ux-page-tax-invoice .document .invoice-table,
  body.ux-page-tax-invoice .document .contract-table,
  body.ux-page-tax-invoice .document .doc-meta {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.ux-page-tax-invoice .document th,
  body.ux-page-tax-invoice .document td {
    padding: 6px 5px !important;
    border-width: 1px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media print {
  .topbar,
  .panel,
  .tabs,
  .summary,
  details.panel,
  details.section {
    display: none !important;
  }

  .app,
  .doc-wrap {
    padding: 0 !important;
  }

  .layout,
  .preview {
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .doc-wrap {
    background: white !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .document {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}