/* Local visual interaction pass: shared desktop context and keyboard affordances. */
:root {
  --focus-ring: #4f7397;
  --nav-active-line: #e7a06d;
  --surface-hover: #f7fafc;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-180%);
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  color: #294967;
  box-shadow: 0 4px 18px rgba(27, 48, 73, .2);
  font-size: 12px;
  transition: transform 130ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Keep the current page context available while long tables and forms scroll. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(35, 50, 71, .02);
}

/* Make the active destination legible without relying on background contrast alone. */
.sidebar .nav-item {
  position: relative;
}

.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-active-line);
}

/* A consistent keyboard ring is easier to see on the pale work surface. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4f7397;
  outline-offset: 3px;
}

/* Preserve the row context when a keyboard user reaches an action inside a table. */
tbody tr:focus-within,
.crm-table tr:focus-within td {
  background: var(--surface-hover);
}

/* Reserve scrollbar space so filters and action rows do not jump when results change. */
.table-scroll,
.crm-table-wrap,
.entry-table {
  scrollbar-gutter: stable;
}

.crm-table-wrap[role="region"] {
  outline: none;
}

.crm-table-wrap[role="region"]:focus-visible {
  outline: 3px solid #4f7397;
  outline-offset: -3px;
}

.crm-customer-identity {
  min-width: 0;
  max-width: 100%;
}

#table-wrap .crm-customer-identity .customer-link {
  flex: 1 1 48px;
  min-width: 48px;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* At the smallest supported desktop width, let the queue context wrap below filters. */
@media (max-width: 1200px) {
  .wb-summary {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .wb-summary-context {
    grid-column: 1 / -1;
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
  }

  .skip-link {
    transition: none;
  }
}

/* Keep secondary copy readable on the white desktop surfaces. */
.helper,
.design-note,
.crm-resultbar,
.crm-bottom,
.crm-table th,
.site-footer,
.top-note {
  color: #64778a;
}

.wb-table small {
  color: #64778a;
}

/* At compact desktop widths the title can wrap taller than the original tab offset.
   Keep one sticky navigation row so the order view tabs never sit behind the heading. */
@media (max-width: 900px) {
  #order-workspace .compact-heading {
    position: relative;
    top: auto;
    z-index: auto;
  }
  #order-workspace .compact-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(36, 58, 82, .08);
  }
}

/* P1-3 (com-p1b): the queue context never forces one line. Long role names wrap
   inside their own column instead of squeezing the filters or overflowing.
   :root raises specificity because workbench.css arrives later in the hosted
   module bundle and would otherwise restore white-space:nowrap. */
:root .wb-summary {
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, max-content);
}

:root .wb-summary-context {
  min-width: 0;
  max-width: 320px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

:root .wb-summary-context b {
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  :root .wb-summary {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  :root .wb-summary-context {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 640px) {
  :root .wb-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
  }
}

/* P3（com-p3）手机宽度（≤760px）下的桌面版：员工手机默认会被导向 mobile.html，
   这里只照顾 ?view=desktop、平板竖屏和被拉窄的电脑窗口。侧栏收进左侧抽屉，
   顶栏左侧出现「☰」按钮；点导航项、遮罩或按 Esc 关闭。 */
.nav-drawer-toggle,
.nav-drawer-backdrop {
  display: none;
}

@media (max-width: 760px) {
  :root .sidebar {
    width: min(82vw, 280px);
    z-index: 60;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }

  :root.nav-drawer-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: 8px 0 28px rgba(15, 28, 44, .28);
    transition: transform 200ms ease;
  }

  :root.nav-drawer-open .nav-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 28, 44, .38);
  }

  :root.nav-drawer-open body {
    overflow: hidden;
  }

  :root .app-shell {
    margin-left: 0;
  }

  .nav-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin-left: -4px;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: #fff;
    color: #294967;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  :root .topbar {
    padding: 0 12px;
    gap: 8px;
  }

  :root .topbar .breadcrumb {
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  :root .topbar .breadcrumb #crumb {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :root .top-actions {
    gap: 8px;
    flex: none;
  }

  :root #top-status {
    display: none;
  }

  :root main {
    padding-left: 12px;
    padding-right: 12px;
  }

  :root .site-footer {
    padding: 16px 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :root .sidebar,
  :root.nav-drawer-open .sidebar {
    transition: none;
  }
}

/* com-p3b（2026-10-11）：按要求去掉全站蓝色焦点框（浏览器默认蓝框 + 各模块自定义蓝色焦点环）。
   放在最后加载并用 !important，保证覆盖前面所有 :focus / :focus-visible / :focus-within 规则。 */
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible,
*:focus-within,
input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: none !important;
}

/* 输入框聚焦：不再出现蓝色光圈和蓝边，改成中性灰边，仍能看出当前在输入哪一格。 */
input:focus,
select:focus,
textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.login-row select:focus,
#intake-text:focus,
#order-editor .entry-flat-grid input:focus,
#order-editor .entry-flat-grid select:focus,
#order-editor .entry-flat-line:focus-within,
.crm-order-range-values label:focus-within {
  box-shadow: none !important;
}

.form-grid input:focus,
.form-grid select:focus,
.login-row select:focus,
#intake-text:focus,
#order-editor .entry-flat-grid input:focus,
#order-editor .entry-flat-grid select:focus,
#order-editor .entry-flat-line:focus-within,
.crm-order-range-values label:focus-within {
  border-color: #b9c1ca !important;
}

input:focus:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),
select:focus,
textarea:focus {
  border-color: #b9c1ca;
}

/* com-p9（2026-10-11）：排版小修，只动间距/对齐，不改功能。
   1) 列表页顶部「手动更新 · 最近更新 … / 更新列表」原来左对齐挤在标题上方，改成右对齐的细工具条。 */
main > .actions.helper[data-hosted-sync] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #8a96a3;
  font-size: 12px;
  line-height: 1.4;
}

main > .actions.helper[data-hosted-sync] .btn {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

/* 2) 列表底部分页：靠右，与上方卡片拉开距离。 */
main > .actions.helper[data-list-pagination] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: #718096;
  font-size: 12px;
}

/* 3) 卡片下方的说明文字：与卡片留出间距，限制行宽，便于阅读。 */
main > p.helper {
  margin: 12px 0 0;
  max-width: 980px;
  color: #8a96a3;
  font-size: 12px;
  line-height: 1.7;
}

/* 4) 系统设置「账号与登录」搜索框：外层无底色却有内边距，导致比下方卡片缩进一截；改为左边对齐。 */
.org-page.org-workspace > .filterbar {
  padding-left: 0;
  padding-right: 0;
}

/* 5) 侧栏「仓库管理」分组标题与上一组贴得太紧，补上与其它分组一致的间距。 */
.sidebar .nav-caption.warehouse-nav-label {
  margin-top: 14px;
}

/* com-p10（2026-10-11）排版小修 6：窄屏顶栏。
   ≤1180px：去掉「定制业务 /」前缀和顶栏身份说明；≤900px：只显示当前页面（最后一级），完整路径在鼠标提示里。 */
@media (max-width: 1180px) {
  :root .topbar .breadcrumb {
    font-size: 0;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
  }
  :root .topbar .breadcrumb > span {
    display: none;
  }
  :root .topbar .breadcrumb #crumb {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  :root #top-status {
    display: none;
  }
}

@media (max-width: 900px) {
  :root .topbar .breadcrumb #crumb[data-short] {
    font-size: 0;
  }
  :root .topbar .breadcrumb #crumb[data-short]::after {
    content: attr(data-short);
    font-size: 13px;
  }
}

/* com-p13（2026-10-11）排版：侧栏线性图标、分组标题、小问号说明、长表格固定表头、字号下限。 */
.sidebar .nav-item>.nav-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;font-size:0;color:#91a6c1}
.sidebar .nav-item>.nav-ico svg{display:block;width:18px;height:18px}
.sidebar .nav-item.active>.nav-ico,.sidebar .crm-nav-parent.active>.nav-ico{color:#f0aa7d}
.sidebar .nav-caption{font-size:11px;letter-spacing:1.5px}
.sidebar .nav-caption.nav-gap,.sidebar .nav-caption.warehouse-nav-label{margin-top:14px}
.sidebar-foot small,.site-footer{font-size:11px}

.mx-help{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border:1px solid #c9d3de;border-radius:50%;background:#fff;color:#7b8a9b;font:600 11px/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;vertical-align:middle;cursor:help;user-select:none}
.mx-help:hover,.mx-help:focus{border-color:#9fb0c2;color:#3f5368}
.mx-help:hover::after,.mx-help:focus::after{content:attr(data-tip);position:absolute;z-index:60;top:calc(100% + 6px);left:-10px;width:max-content;max-width:min(360px,72vw);padding:8px 10px;border-radius:6px;background:#263445;color:#fff;font-size:12px;font-weight:400;line-height:1.65;white-space:normal;text-align:left;box-shadow:0 6px 18px rgba(20,30,45,.18)}
.op-section-title{display:flex;align-items:center;margin:16px 0 8px;font-size:13px}
.mes-empty>p:only-child,.mes-empty>p:first-child{margin:0 0 10px;color:#718096}
.mes-list-empty{padding:16px 12px;color:#8a96a3}

/* 长表格：表头固定，宽表横向滚动（采购、成品仓/生产仓、开票与成本、系统设置、行政管理）。 */
body[data-page="purchases"] main .table-scroll,
body[data-page="finished-warehouse"] main .table-scroll,
body[data-page="production-warehouse"] main .table-scroll,
body[data-page="invoice-requests"] main .table-scroll,
body[data-page="invoice-processing"] main .table-scroll,
body[data-page="invoice-costs"] main .table-scroll,
body[data-page="invoice-costs"] main .cost-table-scroll,
body[data-page="invoices"] main .table-scroll,
body[data-page="settings"] main .table-scroll,
body[data-page="admin"] main .table-scroll{max-height:max(320px,calc(100vh - 210px));overflow:auto;overscroll-behavior:contain}
body[data-page="purchases"] main .table-scroll thead th,
body[data-page="finished-warehouse"] main .table-scroll thead th,
body[data-page="production-warehouse"] main .table-scroll thead th,
body[data-page="invoice-requests"] main .table-scroll thead th,
body[data-page="invoice-processing"] main .table-scroll thead th,
body[data-page="invoice-costs"] main .table-scroll thead th,
body[data-page="invoice-costs"] main .cost-table-scroll thead th,
body[data-page="invoices"] main .table-scroll thead th,
body[data-page="settings"] main .table-scroll thead th,
body[data-page="admin"] main .table-scroll thead th{position:sticky;top:0;z-index:2;background:#f7f9fc;box-shadow:inset 0 -1px 0 #e3e8ee;white-space:nowrap}

/* com-p14（2026-10-11）弹窗/抽屉统一：三档宽度（小 480 / 中 640 / 大 1040）、统一内边距、底部按钮靠右（取消在左、主操作在右）；空白状态统一：小图标 + 一句话 + 可选下一步按钮。仅电脑端。 */
:root{--mx-dlg-sm:480px;--mx-dlg-md:640px;--mx-dlg-lg:1040px;--mx-dlg-px:24px;--mx-dlg-head-py:18px;--mx-dlg-body-py:20px;--mx-dlg-foot-py:14px;--mx-dlg-gap:10px}
@media (min-width:761px){
 /* 中：默认抽屉与普通弹窗 */
 html body .drawer,html body .modal,html body .fd-dialog,html body .st-dialog,html body .wt-dialog,html body .pd-dialog:not(.pd-wide),html body .crm-order-link-dialog,html body #pi-dialog,
 html body #drawer:has(.wh-inventory-detail),html body .drawer:has(.worker-detail){width:min(var(--mx-dlg-md),calc(100vw - 32px));max-width:calc(100vw - 32px)}
 /* 小：确认类 */
 html body .modal.mx-dlg-sm,html body .wo-confirm-dialog,html body .mx-dlg-sm{width:min(var(--mx-dlg-sm),calc(100vw - 32px));max-width:calc(100vw - 32px)}
 /* 大：选择器、明细、表格类 */
 html body .drawer.product-picker-wide,html body .drawer.hosted-controls-wide,html body #drawer.order-progress-wide,html body .cat-dialog,html body .st-dialog.st-dialog-wide,
 html body .cw-dialog,html body dialog.modal:has(.invoice-detail-body),html body dialog.drawer:has(.invoice-detail-body),html body dialog.modal:has(.pov-dialog),
 html body dialog#hosted-jushuitan-dialog,html body dialog#hosted-xiaobangbang-dialog,html body .mx-dlg-lg{width:min(var(--mx-dlg-lg),calc(100vw - 48px));max-width:calc(100vw - 48px)}
 html body .drawer.product-picker-wide{max-width:calc(100vw - 48px)}

 /* 统一内边距：头 18/24，内容 20/24，底 14/24 */
 html body .dialog-head,html body .cat-dialog-head,html body .fd-dialog-head,html body .st-dialog-head,html body .wt-dialog-head,html body .cw-dialog>header{padding:var(--mx-dlg-head-py) var(--mx-dlg-px)}
 html body .dialog-body,html body .cat-dialog-body,html body .fd-dialog-body,html body .st-dialog-body,html body .wt-dialog-body,html body .pd-dialog:not(.pd-wide) .pd-dialog-body,html body .cw-dialog>section{padding:var(--mx-dlg-body-py) var(--mx-dlg-px)}
 html body .dialog-foot,html body .cat-dialog-foot,html body .fd-dialog-foot,html body .wt-dialog-foot,html body .cw-dialog>footer{padding:var(--mx-dlg-foot-py) var(--mx-dlg-px)}
 html body .dialog-head h2,html body .cat-dialog-head h2,html body .fd-dialog-head h2,html body .st-dialog-head h2,html body .wt-dialog-head h2,html body .cw-dialog>header h2{font-size:17px;line-height:1.4}

 /* 底部按钮：靠右；说明文字/删除在最左，取消/关闭在主操作左边，主操作在最右 */
 html body :is(.dialog-foot,.cat-dialog-foot,.fd-dialog-foot,.wt-dialog-foot,.st-dialog-actions,.wo-confirm-actions,.cw-dialog>footer):not(.customer-form-footer):not(.cat-excel-foot){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mx-dlg-gap)}
 html body :is(.dialog-foot,.cat-dialog-foot,.fd-dialog-foot,.wt-dialog-foot,.st-dialog-actions,.wo-confirm-actions,.cw-dialog>footer):not(.customer-form-footer):not(.cat-excel-foot)>*{order:2}
 html body :is(.dialog-foot,.cat-dialog-foot,.fd-dialog-foot,.wt-dialog-foot,.st-dialog-actions,.wo-confirm-actions,.cw-dialog>footer):not(.customer-form-footer):not(.cat-excel-foot)>:is(p,small,span,.muted,.helper,.error-msg,.cat-delete-action,.danger){order:0;margin-right:auto}
 html body :is(.dialog-foot,.cat-dialog-foot,.fd-dialog-foot,.wt-dialog-foot,.st-dialog-actions,.wo-confirm-actions,.cw-dialog>footer):not(.customer-form-footer):not(.cat-excel-foot)>:is([data-action="close"],[data-action="close-dialog"],[data-cat="close"]:not(.primary),[data-cm="close"],[data-hsettings="close"],[data-fd="close"],[data-invoice="close"],[data-hosted-org="close"],[data-hosted-control="close"],[data-hosted-change="close"],[data-hosted-print="close"],[data-si="close"],[data-pd="close"],[data-ui^="close"],[data-ui="confirm-cancel"]){order:1}
 html body :is(.dialog-foot,.cat-dialog-foot,.fd-dialog-foot,.wt-dialog-foot,.st-dialog-actions,.wo-confirm-actions,.cw-dialog>footer):not(.customer-form-footer):not(.cat-excel-foot)>:is(.primary,.st-primary,[type="submit"]){order:3}

 /* 空白状态：一种样式（含旧的 empty / mes-empty / invoice-empty / sfp-empty / fd-empty / st-empty / wh-stock-empty / fs-empty / org-empty） */
 html body :is(.mx-empty,div.empty:not(.card),p.empty,.mes-empty,.invoice-empty,.invoice-order-empty,.sfp-empty,.fd-empty,.st-empty,.wh-stock-empty,.fs-empty,div.org-empty,.org-case-empty){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0;margin:0;padding:32px 16px;border:0;background:none;text-align:center;color:#7b8a9b;font-size:13px;line-height:1.7}
 html body :is(.mx-empty,div.empty:not(.card),p.empty,.mes-empty,.invoice-empty,.invoice-order-empty,.sfp-empty,.fd-empty,.st-empty,.wh-stock-empty,.fs-empty,div.org-empty,.org-case-empty)::before{content:"";flex:none;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b7c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.6 6.2A2 2 0 0 1 8.5 5h7a2 2 0 0 1 1.9 1.2L20 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1.2 2h4.6l1.2-2H20'/%3E%3C/svg%3E") no-repeat center/contain}
 html body :is(.mx-empty,div.empty:not(.card),p.empty,.mes-empty,.invoice-empty,.sfp-empty,.fd-empty,.st-empty,.org-case-empty) :is(h3,p){margin:0;max-width:440px}
 html body :is(.mx-empty,div.empty:not(.card),.mes-empty,.invoice-empty,.sfp-empty,.fd-empty,.st-empty,.org-case-empty) h3{font-size:13px;font-weight:500;color:#5d6f83}
 html body :is(.mx-empty,div.empty:not(.card),.mes-empty,.invoice-empty,.sfp-empty,.fd-empty,.st-empty,.org-case-empty) p{font-size:12px;color:#8a97a6}
 html body .mx-empty>p{font-size:13px;color:#6b7b8d}
 html body :is(.empty-symbol,.fd-empty-icon,.st-empty-icon,.sfp-empty>span[aria-hidden],.org-case-empty>span){display:none}
 html body :is(.mx-empty,div.empty,.mes-empty,.invoice-empty,.sfp-empty,.fd-empty,.st-empty) :is(.btn,.st-button,a.btn){margin-top:4px}
 html body .mx-empty-action{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
 html body :is(.mx-empty.is-compact,.invoice-order-empty){padding:18px 12px;gap:6px}
 html body :is(.mx-empty.is-compact,.invoice-order-empty)::before{width:22px;height:22px}
 html body .mx-empty.is-row{padding:24px 12px}
 html body tr.mx-empty-row>td{padding:0;background:#fff}
 html body tr.mx-empty-row:hover>td{background:#fff}
 html body .mx-loading{padding:20px 12px;text-align:center;color:#8a97a6}
}