/* UI195 review: one presentation contract after the historical workspace CSS.
   Uses the existing HTML, permission visibility, forms and table contracts.
   Do not move column widths, virtual list rows or finance state into this file. */
html:root[data-shx-theme="premium"] {
  --shx-ui-font: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --shx-ui-body: 14px;
  --shx-ui-caption: 12px;
  --shx-ui-control: 40px;
  --shx-ui-control-pad: 8px 12px;
  --shx-ui-space-1: 4px;
  --shx-ui-space-2: 8px;
  --shx-ui-space-3: 12px;
  --shx-ui-space-4: 16px;
  --shx-ui-space-6: 24px;
  --shx-ui-press: 100ms cubic-bezier(.23,1,.32,1);
  font-family: var(--shx-ui-font);
}
html:root[data-shx-theme="premium"][data-shx-density="compact"] {
  --shx-ui-control: 36px;
  --shx-ui-control-pad: 6px 12px;
}
html:root[data-shx-theme="premium"][data-shx-density="comfortable"] {
  --shx-ui-body: 16px;
  --shx-ui-caption: 13px;
  --shx-ui-control: 44px;
  --shx-ui-control-pad: 9px 12px;
}

/* One readable CJK/Latin family without a font download or layout shift. */
html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top,#choice-view) {
  font-family: var(--shx-ui-font);
  font-size: var(--shx-ui-body);
  line-height: 1.6;
}
html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top,#choice-view,#login-view) :is(button,input,select,textarea) {
  font-family: var(--shx-ui-font);
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(#dashboard-original,.wb-cockpit-board) {
  font-family: var(--shx-ui-font);
}
html:root[data-shx-theme="premium"] body #app-view #page-content {
  padding: var(--shx-ui-space-6);
}
html:root[data-shx-theme="premium"] body #app-view #page-content .page-heading {
  margin: 0 0 var(--shx-ui-space-4);
  gap: var(--shx-ui-space-4);
  align-items: flex-start;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .page-heading h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .page-heading p {
  margin: var(--shx-ui-space-2) 0 0;
  font-size: var(--shx-ui-caption);
  line-height: 1.6;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.panel-toolbar h3,.dashboard-card-header h3,.up-settings162 h3) {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.unified-focus-toolbar,.terminal-section) {
  margin-bottom: var(--shx-ui-space-4);
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-toolbar {
  padding-bottom: var(--shx-ui-space-4);
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-purpose {
  margin: 0 0 var(--shx-ui-space-2);
  font-size: var(--shx-ui-body);
  line-height: 1.6;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.panel-toolbar,.terminal-padding) {
  padding: var(--shx-ui-space-4);
}

/* Only form containers get the stacked-label contract: checkbox labels stay rows. */
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.terminal-page-toolbar,.terminal-filters,.filters,.up-toolbar,.unified-focus-filter-body form,.unified-focus-filter-body form>div) {
  align-items: flex-end;
  gap: var(--shx-ui-space-3);
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.terminal-page-toolbar,.terminal-filters,.filters,.up-toolbar,.unified-focus-filter-body) label:not(.terminal-check):not(.up-check):not(:has(>input[type="checkbox"])):not(:has(>input[type="radio"])) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--shx-ui-space-1);
  min-width: 0;
  margin: 0;
  font-size: var(--shx-ui-caption);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
html:root[data-shx-theme="premium"] body #app-view #page-content form.terminal-page-toolbar>label:not(.terminal-check):not(.up-check) {
  flex: 1 1 144px;
  min-width: 144px;
  max-width: 240px;
}
html:root[data-shx-theme="premium"] body #app-view #page-content form.terminal-page-toolbar>label:first-child:has(input[name="query"]) {
  flex-basis: 224px;
  max-width: 320px;
}
html:root[data-shx-theme="premium"] body #app-view #page-content form.terminal-page-toolbar>label>:is(input,select) {
  width: 100%;
  min-width: 0;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.terminal-filters,.unified-focus-filter-body) :is(.terminal-check,.up-check,label:has(>input[type="checkbox"]),label:has(>input[type="radio"])) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--shx-ui-space-2);
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--shx-ui-control);
  margin: 0;
  white-space: normal;
  font-size: var(--shx-ui-body);
  font-weight: 400;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-filter-body {
  gap: var(--shx-ui-space-3);
  padding: var(--shx-ui-space-4);
  max-height: min(60dvh,480px);
  overscroll-behavior: contain;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-filter-body label:not(.terminal-check):not(.up-check) {
  min-width: 144px;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-filter-body #prepaid-selection {
  flex: 1 1 220px;
  min-width: 0;
  padding-block: 8px;
  overflow-wrap: anywhere;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-filter-body .toolbar-spacer {
  display: none;
}

html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),select) {
  height: var(--shx-ui-control);
  min-height: var(--shx-ui-control);
  padding: var(--shx-ui-control-pad);
  margin-top: 0;
  font-size: var(--shx-ui-body);
  line-height: 1.5;
}
html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer) textarea {
  font-size: var(--shx-ui-body);
  line-height: 1.6;
}
html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) .button {
  min-height: var(--shx-ui-control);
  padding: var(--shx-ui-control-pad);
  font-size: var(--shx-ui-body);
  font-weight: 600;
  line-height: 1.5;
  gap: var(--shx-ui-space-2);
  box-shadow: none;
  transform: none;
  transition: none;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.terminal-page-toolbar,.heading-actions,.unified-focus-primary)>.button {
  min-width: 0;
}
html:root[data-shx-theme="premium"] body #app-view #page-content :is(.unified-focus-secondary,.unified-focus-filter)>summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--shx-ui-control);
  padding: var(--shx-ui-control-pad);
  font-size: var(--shx-ui-body);
  font-weight: 500;
  line-height: 1.5;
}

/* Preserve registered widths, fixed-row/ellipsis contracts and scroll ownership. */
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(th,td) {
  font-size: var(--shx-ui-body);
  font-variant-numeric: tabular-nums;
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) th {
  font-weight: 600;
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) [data-compact-grid] :is([data-cell-key],[data-column]):is([data-cell-key="quantity"],[data-column="quantity"],[data-cell-key="amount"],[data-column="amount"],[data-cell-key="price"],[data-column="price"],[data-cell-key="cost_price"],[data-column="cost_price"],[data-cell-key="balance"],[data-column="balance"],[data-cell-key="total_price"],[data-column="total_price"],[data-cell-key="unit_price"],[data-column="unit_price"],[data-cell-key="unit_cost"],[data-column="unit_cost"],[data-cell-key="total_cost"],[data-column="total_cost"],[data-cell-key="gross_profit"],[data-column="gross_profit"],[data-cell-key="paid_amount"],[data-column="paid_amount"],[data-cell-key="prepaid_applied"],[data-column="prepaid_applied"],[data-cell-key="outstanding"],[data-column="outstanding"]) {
  text-align: right !important; /* The original fixed-grid contract centers every cell with !important. */
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) [data-compact-grid] :is(
  [data-cell-key="outstanding_amount"],[data-column="outstanding_amount"],
  [data-cell-key="total_deposited"],[data-column="total_deposited"],
  [data-cell-key="total_amount"],[data-column="total_amount"],
  [data-cell-key="balance_before"],[data-column="balance_before"],
  [data-cell-key="balance_after"],[data-column="balance_after"],
  [data-cell-key="allocated"],[data-column="allocated"],
  [data-cell-key="allocated_amount"],[data-column="allocated_amount"],
  [data-cell-key="original_amount"],[data-column="original_amount"],
  [data-cell-key="outstanding_before"],[data-column="outstanding_before"],
  [data-cell-key="outstanding_after"],[data-column="outstanding_after"],
  [data-cell-key="prepaid_increase"],[data-column="prepaid_increase"],
  [data-cell-key="removed_prepaid"],[data-column="removed_prepaid"],
  [data-cell-key="restored_allocated"],[data-column="restored_allocated"],
  [data-cell-key="completed_order_total"],[data-column="completed_order_total"],
  [data-cell-key="completed_order_cost_total"],[data-column="completed_order_cost_total"],
  [data-cell-key="completed_order_profit_total"],[data-column="completed_order_profit_total"]
) {
  text-align: right !important; /* Registered finance columns, not inferred numeric identifiers. */
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) [data-compact-grid] th[data-column]>button {
  font-size: var(--shx-ui-body);
  text-align: inherit;
}
html:root[data-shx-theme="premium"] body #app-view #page-content tbody tr {
  background-image: none;
  box-shadow: none;
  transition: none;
}

/* A colspan empty row belongs to the visible scroll pane, not the sum of all
   registered column widths. Only the empty cell is released from fixed-row
   clipping; real rows, colgroups and the resize contract remain unchanged. */
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(.table-scroll,.terminal-table-scroll,.wb-related-table) > table > tbody > tr > td[colspan]:has(>.empty) {
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: left !important;
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(.table-scroll,.terminal-table-scroll,.wb-related-table) > table > tbody > tr > td[colspan] > .empty {
  position: sticky;
  left: 0;
  width: fit-content;
  max-width: 440px;
  margin: 0;
  padding: var(--shx-ui-space-6);
  text-align: left;
  white-space: normal;
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(.table-scroll,.terminal-table-scroll,.wb-related-table) > table > tbody > tr > td[colspan] > .empty > strong {
  display: block;
  font-size: var(--shx-ui-body);
  font-weight: 600;
  color: var(--shx-color-text);
}
html:root[data-shx-theme="premium"] body :is(#app-view #page-content,#form-dialog,#wb-record-drawer) :is(.table-scroll,.terminal-table-scroll,.wb-related-table) > table > tbody > tr > td[colspan] > .empty > p {
  margin: var(--shx-ui-space-2) 0 0;
  font-size: var(--shx-ui-body);
  line-height: 1.6;
}

/* Shared modal edges and field rhythm; the native dialog still owns focus/scroll. */
html:root[data-shx-theme="premium"] body #form-dialog .dialog-heading {
  padding: var(--shx-ui-space-4) var(--shx-ui-space-6);
  gap: var(--shx-ui-space-4);
}
html:root[data-shx-theme="premium"] body #form-dialog .dialog-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
html:root[data-shx-theme="premium"] body #form-dialog :is(.dialog-form,.dialog-detail,.account-live-detail) {
  padding: var(--shx-ui-space-6);
}
html:root[data-shx-theme="premium"] body #form-dialog :is(.terminal-native-fields,.field-grid,.terminal-form-grid) {
  gap: var(--shx-ui-space-4);
  align-items: start;
}
html:root[data-shx-theme="premium"] body #form-dialog :is(.terminal-native-fields,.field-grid,.terminal-form-grid)>label {
  margin: 0;
  gap: var(--shx-ui-space-1);
  font-size: var(--shx-ui-caption);
  font-weight: 500;
  line-height: 1.5;
}
html:root[data-shx-theme="premium"] body #form-dialog .account-detail-top h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: var(--shx-ui-space-1) 0 0;
}
html:root[data-shx-theme="premium"] body #form-dialog .account-read-status {
  margin: var(--shx-ui-space-2) 0 var(--shx-ui-space-4);
  font-size: var(--shx-ui-caption);
}
html:root[data-shx-theme="premium"] body #form-dialog .account-balance-cards {
  gap: var(--shx-ui-space-3);
}
html:root[data-shx-theme="premium"] body #form-dialog .account-balance-card {
  padding: var(--shx-ui-space-4);
}
html:root[data-shx-theme="premium"] body #form-dialog .account-balance-card>strong {
  margin-top: var(--shx-ui-space-2);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
html:root[data-shx-theme="premium"] body #form-dialog .account-detail-fields {
  grid-template-columns: minmax(112px,144px) minmax(0,1fr);
}
html:root[data-shx-theme="premium"] body #form-dialog .account-detail-fields :is(dt,dd) {
  padding: var(--shx-ui-space-3) var(--shx-ui-space-2);
  font-size: var(--shx-ui-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
html:root[data-shx-theme="premium"] body #form-dialog .account-detail-fields dd {
  font-weight: 400;
}

/* Keep native select popups on a stationary dialog surface. The historical
   fill-both entrance animations retain a transformed layer after settling. */
html:root[data-shx-theme="premium"] body #form-dialog[open]:has(select),
html:root[data-shx-theme="premium"] body #form-dialog[open]:has(.shx-account-panel):has(select),
html:root[data-shx-theme="premium"] body #wb-record-drawer.wb-record-modal[open]:has(select) {
  animation: none;
  transform: none;
}

/* Pointer-only feedback: instant navigation/table states, no new entry motion. */
@media (hover:hover) and (pointer:fine) {
  html:root[data-shx-theme="premium"] body #app-view #page-content tbody tr:not([aria-selected="true"]):hover {
    background-color: #f1f5fb;
    box-shadow: none;
  }
  html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) .button:active:not(:disabled):not(:focus-visible) {
    transform: scale(.98);
    transition: transform var(--shx-ui-press);
  }
}
@media (hover:none), (pointer:coarse) {
  html:root[data-shx-theme="premium"] {
    --shx-ui-control: 44px;
  }
  html:root[data-shx-theme="premium"] body #app-view #page-content tbody tr:not([aria-selected="true"]):hover {
    background-color: #fff;
    box-shadow: none;
  }
  html:root[data-shx-theme="premium"] body #app-view #page-content tbody tr:nth-child(even):not([aria-selected="true"]):hover {
    background-color: #f7f9fc;
  }
  html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) .button:not(.primary):not(.danger):hover:not(:disabled) {
    background: #fff;
    border-color: var(--shx-color-border);
    color: var(--shx-color-text);
    transform: none;
    box-shadow: none;
  }
}
html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--shx-color-focus);
  outline-offset: 2px;
}

/* Explicit exceptions: chat virtualization, Google two-line rows, embedded FB.
   Their existing scroll/height/column rules are intentionally untouched. */
html:root[data-shx-theme="premium"] body.support-inbox-mode #app-view #page-content {
  padding: 8px 10px;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .material-google-page .material-sync-stamps {
  font-size: var(--shx-ui-caption);
  line-height: 1.6;
}
html:root[data-shx-theme="premium"] body #app-view #page-content .material-google-page .material-customer-name {
  font-weight: 600;
}
@media (max-width:720px) {
  html:root[data-shx-theme="premium"] body #app-view #page-content {
    padding: var(--shx-ui-space-4);
  }
  html:root[data-shx-theme="premium"] body #app-view #page-content .page-heading h1 {
    font-size: 22px;
  }
  html:root[data-shx-theme="premium"] body #app-view #page-content .unified-focus-filter-body {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  html:root[data-shx-theme="premium"] body #app-view #page-content form.terminal-page-toolbar>label:not(.terminal-check):not(.up-check) {
    min-width: min(144px,100%);
    max-width: none;
  }
  html:root[data-shx-theme="premium"] body #form-dialog :is(.dialog-heading,.dialog-form,.dialog-detail,.account-live-detail) {
    padding: var(--shx-ui-space-4);
  }
  html:root[data-shx-theme="premium"] body #form-dialog :is(.terminal-native-fields,.field-grid,.terminal-form-grid) {
    grid-template-columns: minmax(0,1fr);
  }
  html:root[data-shx-theme="premium"] body #form-dialog .account-balance-cards {
    grid-template-columns: minmax(0,1fr);
  }
  html:root[data-shx-theme="premium"] body #form-dialog .account-balance-card>strong {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html:root[data-shx-theme="premium"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) .button:active:not(:disabled) {
    transform: none;
    transition: none;
  }
}
html:root[data-shx-theme="premium"][data-shx-motion="reduce"] body :is(#app-view,#form-dialog,#record-drawer,#wb-record-drawer,#terminal-shell-top) .button:active:not(:disabled) {
  transform: none;
  transition: none;
}