/* Shared visual rhythm for the workspace. Keep print layout in print.css. */
:root {
  --ui-ink: #263548;
  --ui-muted: #617287;
  --ui-line: #dfe6ee;
  --ui-surface: #fff;
  --ui-canvas: #f2f5f9;
  --ui-shadow: 0 5px 20px rgba(31, 54, 81, .045);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.5;
  font-synthesis: none;
}
body { background: var(--ui-canvas); }
button, input, select, textarea { font-family: inherit; }
/* Center plain controls as well as styled actions. Specific menu layouts keep their alignment. */
:where(button) { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
:where(#workspace-navigation > button, .workspace-shortcuts button, #account-menu-panel > button) { justify-content: flex-start; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select) { line-height: normal; vertical-align: middle; }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { border-color: var(--ui-line); color: var(--ui-ink); }
input::placeholder, textarea::placeholder { color: #93a0b0; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.shell .sidebar { background: var(--sidebar-bg); }
.shell .sidebar .brand { line-height: 1.3; }
.shell .sidebar .brand small { font-size: 10px; letter-spacing: .2px; }
#workspace-navigation > button { font-size: 13px; font-weight: 500; letter-spacing: .1px; min-height: 43px; }
#workspace-navigation > button.current { background: rgba(255,255,255,.1); }
.workspace-menu-links button { border-radius: 6px; min-height: 39px; }
.workspace-drawer { border-radius: 0 8px 8px 0; box-shadow: 0 16px 36px rgba(31,54,81,.18); }

.shell .topbar { border-bottom-color: var(--ui-line); }
.workspace-company { font-size: 12px; }
.workspace-company b { font-weight: 650; color: #304760; }
.workspace-company small { font-size: 11px; color: var(--ui-muted); }
.workspace-notifications, #account-menu-toggle { font-size: 13px; }
.workspace-tabs { border-bottom-color: var(--ui-line); }
.workspace-tab > button { font-size: 13px; }

.shell .content { padding: 18px 22px 26px; }
.page-heading { gap: 16px; margin-bottom: 16px; }
.page-heading h1 { color: #213348; font-size: 23px; font-weight: 700; line-height: 1.3; margin-bottom: 5px; }
.page-heading p { color: var(--ui-muted); font-size: 13px; line-height: 1.55; }
.page-heading .actions { align-items: center; }
.panel, .workspace-categories { border-color: var(--ui-line); border-radius: 8px; box-shadow: var(--ui-shadow); }
.panel-header { padding: 13px 18px; min-height: 48px; }
.panel-header h2 { font-size: 15px; font-weight: 650; }
.panel-header small { font-size: 12px; color: var(--ui-muted); }
.panel-body { padding: 16px 18px; }
.dashboard-grid { gap: 16px; }
.workflow-card { border-radius: 8px; background: #fbfcfe; }
.workflow-card b { font-size: 14px; }
.workflow-card p { color: var(--ui-muted); font-size: 13px; }
.workspace-shortcuts { border-color: var(--ui-line); border-radius: 8px; padding: 14px; gap: 10px; }
.workspace-shortcuts button { min-height: 58px; padding: 10px 12px; border-radius: 7px; box-shadow: none; transition: border-color .15s, background .15s; }
.workspace-shortcuts b { font-size: 13px; line-height: 1.35; }
.shortcut-icon { width: 36px; height: 36px; border-radius: 8px; }
.metrics { gap: 12px; }
.metric, .metric.accent { min-height: 122px; border-radius: 8px; padding: 17px 18px; }
.metric-label { font-size: 12px; }
.metric-value { font-size: 29px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric-note { font-size: 11px; line-height: 1.4; }

.primary, .secondary, .danger { min-height: 36px; padding: 8px 13px; font-size: 13px; font-weight: 600; line-height: 1.3; border-radius: 6px; }
.primary { box-shadow: 0 2px 5px rgba(34,53,75,.08); }
.primary:hover { filter: brightness(.98); }
.secondary { border-color: var(--ui-line); }
.secondary:hover { border-color: #bfcbd8; }
.text-button { font-size: 13px; font-weight: 500; }
.actions { gap: 8px; }
.badge { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 5px; }
.info-bar, .warning-bar { padding: 10px 13px; margin-bottom: 13px; font-size: 13px; line-height: 1.55; border-radius: 6px; }
.section-note { font-size: 12px; line-height: 1.5; margin: 10px 0 15px; }

label { font-size: 13px; color: #34465a; }
.form-grid { column-gap: 14px; }
.form-grid label { margin-bottom: 12px; }
label input, label select, label textarea { margin-top: 5px; }
.shell .content input:not([type=checkbox]):not([type=radio]):not([type=file]),
.shell .content select, .shell .content textarea,
.modal-overlay input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modal-overlay select, .modal-overlay textarea { min-height: 36px; padding: 7px 10px; font-size: 13px; border-radius: 6px; }
#content form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]),
#content form select, #content form textarea,
#modal-body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]),
#modal-body select, #modal-body textarea { text-align: center; }
#content label:has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea)),
#modal-body label:has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea)) { text-align: center; }
.toolbar { gap: 8px; margin-bottom: 13px; }
.toolbar label { font-size: 12px; color: var(--ui-muted); }
.toolbar input, .toolbar select { min-height: 35px; }

table { font-size: 13px; font-variant-numeric: tabular-nums; }
th { padding: 10px 12px; color: #536579; font-size: 12px; letter-spacing: .1px; background: #f3f6fa; }
td { padding: 10px 12px; color: #34465a; font-size: 13px; }
.table-scroll th, .table-scroll td { text-align: center; vertical-align: middle; }
.table-scroll td.num, .table-scroll th.num { text-align: center; }
.table-scroll tbody tr:hover { background: #f6f9fd; }
.sku { color: #738397; font-size: 11px; }
.empty { color: var(--ui-muted); font-size: 13px; }
.workspace-table-tools, .workspace-product-pagination { font-size: 13px; }
.workspace-category-list button { font-size: 13px; }

.compact-document-header > .document-number-strip { font-size: 12px; min-height: 31px; border-radius: 4px; }
.compact-document-header > .document-number-strip strong { font-size: 12px; }
.compact-header-fields > label { color: #43556a; font-size: 12px; line-height: 1.3; }
.compact-header-fields > label input, .compact-header-fields > label select, .compact-header-fields > label textarea { height: 37px; min-height: 37px; font-size: 13px; }
.compact-header-extras { margin: 7px 0 10px; }
.compact-team-contact, .compact-header-note, .compact-header-help, .compact-stock-override { color: var(--ui-muted); font-size: 12px; }
.compact-header-note summary, .compact-header-help summary, .compact-stock-override summary { min-height: 28px; border-radius: 5px; }
.material-entry-wrapper { border-radius: 7px; border-color: var(--ui-line); }
.material-grid-head { min-height: 40px; background: #f3f6fa; color: #536579; font-size: 12px; }
.material-edit-row { padding: 7px 0; }
.material-edit-row input, .material-edit-row select { min-height: 35px; font-size: 13px !important; border-radius: 5px; }
.material-entry-footer { font-size: 12px; }
.document-import-item { border-radius: 6px; }
.document-import-item b { font-size: 13px; }
.document-import-item small { font-size: 12px; }

.modal { border-radius: 10px; }
.modal > header { padding: 13px 18px; border-bottom: 1px solid var(--ui-line); }
.modal > header h2 { font-size: 18px; }
.modal #modal-body { padding: 16px 18px; }
.detail-info { border-radius: 7px; }
.detail-row { line-height: 1.5; }
.settings-tabs button { font-size: 13px; }

@media (max-width: 1100px) {
  .shell .content { padding: 16px; }
  .page-heading h1 { font-size: 21px; }
  .workspace-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sidebar { height: 66px; }
  .sidebar .legacy-navigation { height: 66px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sidebar .legacy-navigation::-webkit-scrollbar { display: none; }
  .sidebar .legacy-navigation button { min-width: 72px; min-height: 65px; padding: 7px 8px; font-size: 11px; line-height: 1.2; scroll-snap-align: start; }
  .sidebar .legacy-navigation button span { font-size: 19px; }
  .main { padding-bottom: 68px; }
  .shell .content { padding: 12px 12px 20px; }
  .page-heading { align-items: stretch; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 12px; }
  .page-heading .actions { justify-content: flex-start; }
  .workspace-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .workspace-shortcuts button { min-height: 54px; }
  .panel-body { padding: 13px; }
  .metric, .metric.accent { min-height: 115px; padding: 14px; }
  .metric-value { font-size: 25px; }
  .compact-header-fields > label { font-size: 12px; }
  .toolbar { align-items: stretch; }
  .toolbar label { min-width: 0; }
  .modal #modal-body { padding: 13px; }
  .table-scroll { max-width: 100%; }
}
.shell .topbar{position:sticky;top:0;height:74px;min-height:74px;align-items:flex-end;padding-bottom:7px}
.system-masthead{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.2;white-space:nowrap;pointer-events:none}
.system-masthead strong{font-size:17px;font-weight:700;color:#26394e;letter-spacing:.06em}
.system-masthead small{font-size:11px;color:#778ba1;margin-top:3px;letter-spacing:.08em}
.shell .workspace-tabs{top:74px}
.document-number-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.compact-document-header>.document-number-strip .number-input{width:220px;max-width:100%;height:26px!important;min-height:26px!important;padding:3px 7px!important;font-size:12px;font-weight:650;letter-spacing:.02em}
.document-number-strip small{font-size:11px;color:#70839a}
.saved-number-editor{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;padding:8px 10px;background:#f5f8fc;border:1px solid #e2eaf2;border-radius:6px;margin:8px 0}
.saved-number-editor label{margin:0;font-size:11px;color:#5e7187}
.saved-number-editor input{display:block;width:210px;max-width:100%;height:33px;margin-top:3px;padding:5px 8px;font-size:12px;font-weight:600}
.saved-number-editor button{min-height:33px;padding:6px 10px;font-size:11px}
td .saved-number-editor{margin:4px 0 0;padding:4px;display:flex}
td .saved-number-editor label{font-size:0}
td .saved-number-editor input{width:155px}
@media (max-width:760px){
  .shell .topbar{height:76px;min-height:76px;padding-bottom:6px}
  .system-masthead strong{font-size:14px}
  .system-masthead small{font-size:10px}
  .shell .workspace-tabs{top:76px}
}
@media print {
  body { background: #fff; }
  .panel, .workspace-categories, .primary { box-shadow: none; }
  th, td { font-size: 11px; padding: 8px; }
}