/* V3.3.64 — compact business pages; all colors inherit the website theme. */ #appView .business-layout { min-width: 0; } #appView .business-layout .page-toolbar { gap: 10px 16px; margin-bottom: 12px; align-items: center; } #appView .business-layout .toolbar-controls { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #appView .business-layout .toolbar-controls > :is(input, select, button, details) { grid-row: auto; grid-column: auto; } #appView .business-layout .toolbar-controls > .search-input { width: auto; min-width: 160px; max-width: 360px; flex: 1 1 200px; } #appView .business-layout .toolbar-controls > select { width: auto; min-width: 120px; max-width: 240px; flex: 0 1 auto; } #appView .business-layout .toolbar-controls > .button { flex: 0 0 auto; width: auto; } #appView .business-layout .toolbar-controls > .icon-button { flex: 0 0 36px; width: 36px; height: 36px; } #appView .business-layout .toolbar-controls > input[type="date"], #appView .business-layout .toolbar-controls > input[data-i18n-date-input] { width: 146px; min-width: 132px; flex: 0 1 146px; } #appView .business-layout :is(.quality-notice, .audit-notice, .approval-notice, .expense-approval-notice, .visitor-privacy-note, .visitor-qr-guidance) { margin-block: 0 10px; min-height: 0; padding: 10px 14px; font-size: 12px; line-height: 1.6; } #appView .business-layout .table-empty { padding-block: 26px; min-height: 0; } /* Keep all actions available without letting secondary controls fill the first screen. */ #appView .business-disclosure { min-width: 0; } #appView .business-disclosure[hidden] { display: none; } #appView .business-disclosure:not([open]) > .business-disclosure-content { display: none; } #appView .business-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--surface-soft); cursor: pointer; list-style: none; font-size: 12px; line-height: 1.6; white-space: nowrap; } #appView .business-disclosure > summary::-webkit-details-marker { display: none; } #appView .business-disclosure > summary:hover { border-color: var(--accent); background: var(--surface); } #appView .business-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #appView .business-chevron { color: var(--muted); font-size: 15px; line-height: 1; } #appView .business-disclosure[open] > summary .business-chevron { transform: rotate(180deg); } #appView .business-filter-count { min-width: 19px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--bg); text-align: center; font-size: 11px; } #appView .business-filter-count[hidden] { display: none; } #appView .business-disclosure.has-active-filters > summary { border-color: var(--accent); } #appView :is(.business-actions, .business-filters) { position: relative; flex: 0 0 auto; } #appView :is(.business-actions, .business-filters)[open] { z-index: 40; } #appView :is(.business-actions, .business-filters) > .business-disclosure-content { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; gap: 7px; width: 260px; max-width: calc(100vw - 36px); max-height: 360px; overflow-y: auto; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-solid); box-shadow: var(--shadow); } #appView .business-layout .business-disclosure-content > :is(.button, .icon-button, input, select) { display: flex; grid-row: auto; grid-column: auto; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; max-width: none; min-height: 36px; height: auto; margin: 0; } #appView .business-layout .business-disclosure-content > [hidden] { display: none; } #appView .business-actions .icon-button { padding: 8px 11px; } #appView .business-actions .icon-button::after { content: attr(aria-label); margin-left: 8px; color: inherit; font-family: inherit; font-size: 12px; } #appView .business-metrics { margin: 0 0 12px; } #appView .business-metrics > summary { justify-content: flex-start; min-height: 29px; padding: 3px 0; border: 0; background: transparent; color: var(--muted); } #appView .business-metrics > summary:hover { color: var(--ink); background: transparent; } #appView .business-metrics > .business-disclosure-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 7px; } #appView .business-metrics .business-disclosure-content > :is(div, span) { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); } #appView .business-metrics .business-disclosure-content :is(strong, small, span) { display: block; } #appView .business-metrics .business-disclosure-content strong { margin: 4px 0; color: var(--ink); font-size: 21px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; } #appView .business-metrics .business-disclosure-content :is(small, div > span) { color: var(--muted); font-size: 11px; line-height: 1.5; } /* Small summaries serve the records below them. */ #appView .business-layout :is(.warehouse-overview-bar, .expense-overview-bar, .after-sales-overview-bar, .processing-overview-bar, .visitor-overview-bar, .report-kpi-grid) { display: grid; gap: 8px; margin-bottom: 12px; } #appView .business-layout :is(.warehouse-overview-bar, .expense-overview-bar, .after-sales-overview-bar, .processing-overview-bar, .report-kpi-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); } #appView .business-layout .visitor-overview-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } #appView .business-layout :is(.warehouse-metric, .report-kpi) { min-width: 0; min-height: 64px; padding: 10px 13px; gap: 10px; } #appView .business-layout .warehouse-metric .metric-icon, #appView .business-layout .report-kpi .metric-icon { width: 30px; height: 30px; min-width: 30px; flex-basis: 30px; } #appView .business-layout .warehouse-metric strong, #appView .business-layout .report-kpi strong { font-size: 23px; line-height: 1.2; } #appView .business-layout .warehouse-metric .metric-copy > span { font-size: 11px; white-space: normal; } #appView .business-layout .warehouse-metric .metric-copy { display: grid; min-width: 0; gap: 3px; } #appView .business-layout .warehouse-metric .metric-copy > :is(span, strong) { display: block; } #appView .business-layout :is(.warehouse-panel, .processing-panel, .expense-panel, .visitor-panel) { min-width: 0; } #appView .business-layout .visitor-toolbar .visitor-filter-controls { display: flex; width: 100%; min-height: 0; gap: 8px; } #appView #page-visitors.business-layout .visitor-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } #appView #page-visitors.business-layout .visitor-toolbar .visitor-filter-controls { flex: 0 0 auto; align-self: stretch; width: 100%; max-width: 100%; } #appView #page-visitors.business-layout .visitor-panel { gap: 0; } #appView #page-after-sales.business-layout .after-sales-toolbar .toolbar-controls { flex-basis: 650px; } #appView #page-processing.business-layout .processing-overview-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); } #appView :is(#page-warehouse, #page-processing).business-layout .page-toolbar .toolbar-controls { flex: 1 1 570px; max-width: 720px; } /* Workbench retains its modules and preferences while prioritizing useful content. */ #appView #page-dashboard.business-layout { gap: 12px; } #appView #page-dashboard.business-layout .dashboard-heading { min-height: 40px; margin-bottom: 0; } #appView #page-dashboard.business-layout .dashboard-metrics { gap: 10px; margin-bottom: 0; } #appView #page-dashboard.business-layout .dashboard-metric { min-height: 88px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px 16px; } #appView #page-dashboard.business-layout .dashboard-metric .metric-icon { width: 32px; height: 32px; } #appView #page-dashboard.business-layout .dashboard-metric .metric-icon svg { width: 23px; height: 23px; } #appView #page-dashboard.business-layout .dashboard-metric > div { display: grid; gap: 3px; } #appView #page-dashboard.business-layout .dashboard-metric strong { order: 2; margin: 0; font-size: 26px; line-height: 1.2; } #appView #page-dashboard.business-layout .dashboard-metric > div > span { order: 1; margin: 0; font-size: 11px; } #appView #page-dashboard.business-layout .dashboard-metric small { order: 3; margin: 0; font-size: 10px; line-height: 1.4; } #appView #page-dashboard.business-layout .dashboard-grid { gap: 12px; margin-top: 0; grid-template-columns: minmax(0, 1.55fr) minmax(285px, .85fr); } #appView #page-dashboard.business-layout .dashboard-grid.single-panel { grid-template-columns: minmax(0, 1fr); } #appView #page-dashboard.business-layout .dashboard-column { gap: 12px; } #appView #page-dashboard.business-layout :is(.dashboard-panel, #dashboardCncModule, #dashboardAlertsModule, #dashboardDocumentsModule, #dashboardProcessingModule) { min-height: 0; padding: 15px; } #appView #page-dashboard.business-layout .dashboard-panel-heading { min-height: 32px; margin-bottom: 10px; padding-bottom: 8px; } #appView #page-dashboard.business-layout .dashboard-cnc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 3px; } #appView #page-dashboard.business-layout .dashboard-cnc-summary > span { min-height: 49px; padding: 8px 10px; border-width: 1px; gap: 3px; } #appView #page-dashboard.business-layout .dashboard-cnc-summary strong { font-size: 20px; } #appView #page-dashboard.business-layout .dashboard-processing-summary > span { min-height: 50px; padding: 8px 10px; } #appView #page-dashboard.business-layout .dashboard-cnc-summary small { font-size: 11px; line-height: 1.35; } #appView #page-dashboard.business-layout .dashboard-cnc-device-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } #appView #page-dashboard.business-layout .dashboard-empty { min-height: 0; padding: 18px 8px; } #appView #page-dashboard.business-layout .dashboard-runtime { margin-top: 0; padding: 14px; } #appView #page-dashboard.business-layout .dashboard-runtime-heading { min-height: 0; margin-bottom: 8px; padding-bottom: 8px; } #appView #page-dashboard.business-layout .runtime-item { min-height: 76px; padding: 10px; } #appView #page-dashboard.business-layout .dashboard-quick-actions { margin-top: 0; padding: 14px; } /* Forms keep readable input targets with less empty waiting space. */ #appView #page-activation.business-layout .activation-grid { grid-template-columns: minmax(300px, .85fr) minmax(320px, 1.15fr); gap: 16px; align-items: start; } #appView #page-activation.business-layout :is(.activation-form, .result-surface) { min-height: 0; padding: 20px; } #appView #page-activation.business-layout .activation-form { gap: 14px; } #appView #page-activation.business-layout .empty-state { min-height: 265px; padding: 20px; } #appView #page-activation.business-layout .activation-form > .button { margin-top: 0; } #appView #page-password.business-layout .account-security-grid { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView #page-password.business-layout :is(.password-form, .account-security-wechat) { max-width: none; padding: 20px; } #appView #page-password.business-layout .password-form .field { margin-bottom: 14px; } #appView #page-password.business-layout .account-security-wechat > p { margin: 12px 0; } #appView #page-accounts.business-layout .business-account-filters { display: flex; flex: 1 1 360px; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; } #appView #page-accounts.business-layout .business-account-filters .field { margin: 0; min-width: 130px; max-width: 220px; flex: 1 1 160px; } #appView #page-accounts.business-layout .business-account-filters .field label { margin-bottom: 4px; font-size: 11px; } #appView #page-accounts.business-layout .account-permission-cell { min-width: 170px; max-width: 280px; align-items: flex-start; flex-wrap: wrap; } #appView #page-accounts.business-layout .permission-tags { gap: 4px; } #appView #page-accounts.business-layout .account-space-cell { min-width: 130px; max-width: 190px; white-space: normal; overflow-wrap: anywhere; } /* Log summaries keep unresolved problems prominent, with secondary counts on demand. */ #appView #page-runtime-logs.business-layout > .runtime-log-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 2px; gap: 8px; } #appView #page-runtime-logs.business-layout > .runtime-log-metrics > div { padding: 10px 13px; } #appView #page-runtime-logs.business-layout .runtime-log-metrics strong { font-size: 23px; margin-top: 4px; } #appView #page-runtime-logs.business-layout .runtime-log-diagnosis { min-height: 0; margin-bottom: 10px; padding: 10px 13px; } #appView #page-runtime-logs.business-layout .runtime-log-filterbar { margin: 10px 0; gap: 8px; } #appView #page-runtime-logs.business-layout .runtime-log-table-panel table { min-width: 1100px; } #appView #page-runtime-logs.business-layout .runtime-log-table-panel th:nth-child(4), #appView #page-runtime-logs.business-layout .runtime-log-table-panel th:nth-child(5) { min-width: 210px; } #appView #page-runtime-logs.business-layout .runtime-log-explanation, #appView #page-runtime-logs.business-layout .runtime-log-action { max-width: 300px; font-size: 12px; line-height: 1.6; } /* Statistical pages retain comparison context rather than seven stacked cards. */ #appView #page-site-analytics.business-layout .analytics-metrics { gap: 8px; margin-bottom: 10px; } #appView #page-site-analytics.business-layout .analytics-metric { min-height: 80px; padding: 12px 14px; gap: 10px; } #appView #page-site-analytics.business-layout .analytics-metric-icon { width: 30px; height: 30px; flex-basis: 30px; } #appView #page-site-analytics.business-layout .analytics-summary-strip { margin-bottom: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } #appView #page-site-analytics.business-layout .analytics-summary-strip > div { min-height: 46px; padding: 10px 14px; } #appView #page-site-analytics.business-layout .analytics-grid { gap: 12px; } #appView #page-site-analytics.business-layout :is(.analytics-trend-panel, .analytics-online-panel) { padding: 15px; } #appView #page-site-analytics.business-layout .analytics-trend { min-width: 420px; grid-template-columns: repeat(14, minmax(22px, 1fr)); gap: 5px; height: 190px; } #appView #page-server-storage.business-layout { gap: 14px; } #appView #page-server-storage.business-layout .storage-drive { padding: 16px 18px; } #appView #page-server-storage.business-layout .storage-drive-value { margin: 12px 0; } #appView #page-server-storage.business-layout .storage-drive-value strong { font-size: 29px; } #appView #page-server-storage.business-layout .storage-drive-site { margin-top: 10px; padding-top: 9px; } #appView #page-server-storage.business-layout .storage-metrics { padding-block: 13px; } #appView #page-server-storage.business-layout .storage-category { padding-block: 12px; } #appView #page-server-storage.business-layout .storage-categories { padding: 18px; } #appView #page-server-storage.business-layout .storage-section-heading { margin-bottom: 12px; } @media (max-width: 1180px) { #appView #page-dashboard.business-layout .dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(265px, .85fr); } } @media (max-width: 900px) { #appView #page-dashboard.business-layout .dashboard-grid { grid-template-columns: minmax(0, 1fr); } #appView #page-dashboard.business-layout #dashboardCncModule { order: 1; } #appView #page-dashboard.business-layout #dashboardProcessingModule { order: 2; } #appView #page-dashboard.business-layout #dashboardRuntimeModule { order: 3; } #appView #page-dashboard.business-layout #dashboardActionsModule { order: 4; } #appView #page-dashboard.business-layout .dashboard-metric { min-height: 84px; padding: 12px 14px; } #appView .business-layout .page-toolbar .toolbar-controls { flex: 1 1 100%; } #appView #page-site-analytics.business-layout .analytics-grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 621px) and (max-width: 1000px) { #appView #page-visitors.business-layout .visitor-toolbar .visitor-filter-controls > .search-input { width: 100%; min-width: 0; max-width: none; flex: 1 0 100%; } } @media (min-width: 621px) and (max-width: 1100px) { #appView #page-processing.business-layout .processing-overview-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #appView #page-activation.business-layout .activation-grid { grid-template-columns: minmax(0, 1fr); } #appView #page-activation.business-layout .empty-state { min-height: 180px; } #appView #page-password.business-layout .account-security-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { #appView .business-layout .page-toolbar { flex-direction: row; align-items: center; } #appView .business-layout .page-toolbar > div:first-child { min-width: 0; } #appView .business-layout .toolbar-controls { width: 100%; justify-content: flex-start; } #appView .business-layout .toolbar-controls > .search-input { width: 100%; min-width: 0; max-width: none; flex: 1 0 100%; } #appView .business-layout .toolbar-controls > select { min-width: 0; max-width: none; flex: 1 1 110px; } #appView .business-layout .toolbar-controls > input[type="date"], #appView .business-layout .toolbar-controls > input[data-i18n-date-input] { min-width: 0; width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); } #appView .business-layout :is(.warehouse-overview-bar, .expense-overview-bar, .after-sales-overview-bar, .processing-overview-bar, .report-kpi-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView #page-processing.business-layout .processing-overview-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView .business-layout .visitor-overview-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #appView .business-filters > .business-disclosure-content { left: 0; right: auto; } #appView .business-layout :is(.warehouse-metric, .report-kpi) { min-height: 61px; padding: 9px 10px; gap: 8px; } #appView #page-visitors.business-layout .visitor-overview-bar .metric-icon { display: none; } #appView #page-visitors.business-layout .visitor-overview-bar .metric-copy > span { line-height: 1.35; } #appView #page-dashboard.business-layout .dashboard-metric { grid-template-columns: minmax(0, 1fr); min-height: 90px; padding: 12px; } #appView #page-dashboard.business-layout .dashboard-metric .metric-icon { display: none; } #appView #page-dashboard.business-layout .dashboard-metric strong { font-size: 25px; } #appView #page-dashboard.business-layout .dashboard-cnc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } #appView #page-dashboard.business-layout .dashboard-cnc-summary > span { padding: 8px; } #appView .business-metrics > .business-disclosure-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView #page-runtime-logs.business-layout > .runtime-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView #page-accounts.business-layout .business-account-filters { order: 3; flex-basis: 100%; gap: 8px; } #appView #page-accounts.business-layout .business-account-filters .field { min-width: 0; max-width: none; } #appView #page-site-analytics.business-layout .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #appView #page-site-analytics.business-layout .analytics-metric { min-height: 83px; padding: 12px; } #appView #page-site-analytics.business-layout .analytics-metric-icon { display: none; } #appView #page-site-analytics.business-layout .analytics-metric small { white-space: normal; overflow-wrap: anywhere; font-size: 10px; } #appView #page-site-analytics.business-layout .analytics-summary-strip > div { min-height: 55px; padding: 9px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 5px; } #appView #page-site-analytics.business-layout .analytics-summary-strip > div + div { border-top: 0; border-left: 1px solid var(--line); } #appView #page-activation.business-layout :is(.activation-form, .result-surface), #appView #page-password.business-layout :is(.password-form, .account-security-wechat) { padding: 16px; } #appView #page-activation.business-layout .empty-state { min-height: 135px; } #appView #page-server-storage.business-layout .storage-metric > strong { font-size: 20px; } #appView #page-server-storage.business-layout .storage-categories { padding: 14px; } }