#workOrdersPage { --wo-blue:#1677ff; --wo-blue-dark:#0958d9; --wo-text:#162033; --wo-muted:#697386; --wo-border:#e4e9f2; --wo-bg:#f4f6f9; --wo-green:#22ad68; --wo-orange:#f59e0b; --wo-red:#ef4444; min-height:calc(100svh - 62px); color:var(--wo-text); background:var(--wo-bg); } body.work-orders-workspace-active #workOrdersPage { width:calc(100% + 40px); margin-right:-20px; margin-left:-20px; } #workOrdersPage * { box-sizing:border-box; letter-spacing:0; } #workOrdersPage button, #workOrdersPage input, #workOrdersPage select, #workOrdersPage textarea { font:inherit; } #workOrdersPage button { cursor:pointer; } #workOrdersPage .wo-required { display:inline-block; margin-left:3px; color:#dc2626; font-size:12px; font-weight:700; line-height:1; vertical-align:super; } #workOrdersPage .wo-paste-zone { padding:12px; border:1px dashed #b8c8da; border-radius:6px; background:#f5f8fc; color:#536b82; font-size:12px; line-height:1.6; cursor:text; overflow-wrap:anywhere; } #workOrdersPage .wo-paste-zone:focus-visible { outline:2px solid #7799bc; outline-offset:2px; } #workOrdersPage .wo-paste-zone.is-dragover { border-color:#527eae; background:#e7f0fb; box-shadow:inset 0 0 0 1px #527eae; } #workOrdersPage .wo-paste-zone[aria-disabled="true"] { cursor:not-allowed; opacity:.65; } #workOrdersPage .wo-due-date-note.is-warning { color:#b45309; } #workOrdersPage input[name="reporter"][readonly] { color:#536b82; background:#f6f8fb; cursor:default; } #workOrdersPage svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wo-workspace { min-width:1120px; padding:8px 22px 24px; background:#f4f6f9; } .wo-page-head { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .wo-head-right { display:flex; align-items:center; justify-content:flex-end; gap:14px; min-width:0; margin-left:auto; } .wo-page-head p { margin:0 0 5px; color:#8993a4; font-size:12px; } .wo-page-head h2 { margin:0; font-size:22px; line-height:1.2; color:#101828; } .wo-source-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin:0; color:#596579; font-size:12px; } .wo-source-bar button { border:1px solid #d8dfeb; border-radius:6px; background:#fff; padding:6px 10px; color:#52617a; } .wo-source-bar button.is-active { color:#0864cb; border-color:#8bb8ef; background:#edf5ff; font-weight:700; } .wo-source-bar #woSourceProduction.is-active { color:#a75500; border-color:#f2bf76; background:#fff4e6; } .wo-production-panel { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 14px; padding:10px 14px; background:#fff8ed; border:1px solid #f0c788; border-radius:6px; color:#a75500; font-size:12px; } .wo-production-panel[hidden], .wo-head-actions [hidden], .wo-source-bar [hidden] { display:none; } .wo-production-panel #woProductionStatus.is-connected { color:#16855a; } .wo-production-panel form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .wo-production-panel input { height:34px; width:145px; padding:0 10px; border:1px solid #d8dfeb; border-radius:4px; } .wo-workspace[data-source=production] .wo-config-actions, .wo-workspace[data-source=production] [data-config-edit], .wo-workspace[data-source=production] [data-config-delete] { display:none; } .wo-head-actions { display:flex; gap:10px; } .wo-btn { height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #d8dfeb; border-radius:4px; padding:0 16px; color:#344054; background:#fff; font-weight:600; font-size:13px; white-space:nowrap; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .wo-btn svg { width:16px; height:16px; } .wo-btn:hover { border-color:#9fbff3; color:#1265d8; box-shadow:0 3px 10px rgba(30,90,170,.1); } .wo-btn:active { transform:translateY(1px); } .wo-btn-primary { color:#fff; background:var(--wo-blue); border-color:var(--wo-blue); } .wo-btn-primary:hover { color:#fff; background:var(--wo-blue-dark); border-color:var(--wo-blue-dark); } body.light #workOrdersPage { --wo-blue:#356c9b; --wo-blue-dark:#27577f; } body.light #workOrdersPage .wo-btn-primary, body.light #workOrdersPage .wo-pagination nav button.is-active { color:#315f88; background:#e7eff8; border-color:#c2d3e4; } body.light #workOrdersPage .wo-btn-primary:hover:not(:disabled) { color:#234f76; background:#dce9f5; border-color:#a7c0d8; box-shadow:none; } body.light #workOrdersPage .wo-btn:disabled { color:#8b97a8; background:#f1f4f7; border-color:#e0e6ed; cursor:not-allowed; } body.light #workOrdersPage :is(.wo-type-tabs, .wo-scope-tabs) button:hover { background:#f4f7fb; } #workOrdersPage button:focus-visible { outline:2px solid #6d98bd; outline-offset:2px; } .wo-type-tabs { display:flex; align-items:flex-end; gap:30px; height:44px; border-bottom:1px solid #dde3ed; background:#fff; padding:0 18px; margin:0 -22px 16px; } .wo-type-tabs button { height:44px; padding:0 7px; border:0; border-bottom:2px solid transparent; background:transparent; color:#586174; font-weight:600; } .wo-type-tabs button:hover { color:var(--wo-blue); } .wo-type-tabs button.is-active { color:var(--wo-blue); border-bottom-color:var(--wo-blue); } .wo-layout { display:grid; grid-template-columns:minmax(780px,1fr) 340px; gap:14px; align-items:start; } .wo-main { min-width:0; } .wo-summary { display:grid; grid-template-columns:repeat(6,minmax(118px,1fr)); gap:8px; margin-bottom:12px; } .has-insights .wo-summary { grid-template-columns:repeat(5,minmax(150px,1fr)); } .wo-stat { min-height:104px; display:flex; align-items:center; gap:11px; padding:16px 14px; background:#fff; border:1px solid var(--wo-border); border-radius:6px; box-shadow:0 2px 9px rgba(16,32,55,.035); } .wo-stat-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; color:var(--wo-blue); background:#edf5ff; border-radius:50%; } .wo-stat-icon svg { width:25px; height:25px; } #workOrdersPage .wo-stat-icon .wo-kpi-glyph { width:29px; height:29px; stroke-linecap:round; stroke-linejoin:round; } #workOrdersPage .wo-stat-icon .wo-kpi-glyph.is-processing { width:30px; height:30px; } #workOrdersPage .wo-stat-icon .wo-kpi-glyph.is-completed { width:30px; height:30px; } .wo-stat small, .wo-stat em { display:block; font-style:normal; white-space:nowrap; } .wo-stat small { color:#4c566a; font-size:12px; font-weight:600; } .wo-stat strong { display:block; margin:4px 0 2px; color:#14213a; font-size:24px; line-height:1; } .wo-stat em { color:#8b95a7; font-size:10px; } .wo-stat.orange .wo-stat-icon { color:#e98400; background:#fff3e4; } .wo-stat.green .wo-stat-icon { color:#17a05a; background:#eaf8f0; } .wo-stat.red .wo-stat-icon { color:#e83d4b; background:#fff0f1; } .wo-stat.violet .wo-stat-icon { color:#6e59e8; background:#f0edff; } .wo-stat.dark .wo-stat-icon { color:#344054; background:#eef1f5; } .wo-scope-tabs { display:flex; height:48px; padding:0 13px; background:#fff; border:1px solid var(--wo-border); border-bottom:0; border-radius:6px 6px 0 0; } .wo-scope-tabs button { height:48px; border:0; border-bottom:2px solid transparent; padding:0 14px; color:#566075; background:transparent; font-size:12px; } .wo-scope-tabs button.is-active { color:var(--wo-blue); border-color:var(--wo-blue); font-weight:700; } .wo-filters { display:grid; grid-template-columns:minmax(190px,1.35fr) minmax(145px,.85fr) minmax(125px,.7fr) minmax(125px,.75fr) minmax(260px,1.4fr) auto; gap:10px; align-items:end; padding:14px; background:#fff; border:1px solid var(--wo-border); border-radius:6px; margin-bottom:10px; } .wo-scope-tabs + .wo-filters { border-radius:0 0 6px 6px; } .wo-filters label { display:flex; min-width:0; flex-direction:column; gap:6px; color:#4a5568; font-size:11px; font-weight:600; } .wo-filters input, .wo-filters select, .wo-form-grid input, .wo-form-grid select, .wo-form-grid textarea, .wo-log-form input { width:100%; height:34px; border:1px solid #dce2ec; border-radius:4px; padding:0 10px; outline:0; color:#344054; background:#fff; } .wo-filters input:focus, .wo-filters select:focus, .wo-form-grid input:focus, .wo-form-grid select:focus, .wo-form-grid textarea:focus, .wo-log-form input:focus { border-color:#69a7ff; box-shadow:0 0 0 2px rgba(22,119,255,.1); } .wo-search { position:relative; align-self:end; } .wo-search svg { position:absolute; left:10px; bottom:8px; width:17px; height:17px; color:#99a3b3; } .wo-search input { padding-left:34px; } .wo-date-range { display:grid; grid-template-columns:1fr 16px 1fr; align-items:center; } .wo-date-range i { text-align:center; color:#98a2b3; font-style:normal; } .wo-date-range input { min-width:0; padding:0 5px; font-size:10px; } .wo-filter-actions { display:flex; gap:8px; } .wo-filter-actions .wo-btn { padding:0 13px; } .wo-table-panel { background:#fff; border:1px solid var(--wo-border); border-radius:6px; overflow:hidden; } .wo-table-filter-form { margin:0; } .wo-table-panel th { vertical-align:middle; } .wo-th-inner { display:flex; align-items:center; gap:7px; min-width:0; } .wo-th-label { flex:0 0 auto; } .wo-th-control { width:100px; min-width:0; height:30px; border:1px solid #dce2ec; border-radius:4px; padding:0 7px; outline:0; color:#344054; background:#fff; font-size:10px; font-weight:500; } .wo-th-control:focus { border-color:#69a7ff; box-shadow:0 0 0 2px rgba(22,119,255,.1); } .wo-th-search { width:148px; padding:0 8px; } .wo-th-date-range { display:flex; align-items:center; gap:4px; min-width:214px; } .wo-th-date-range .wo-th-control { width:96px; padding:0 4px; font-size:9px; } .wo-th-date-range i { color:#98a2b3; font-style:normal; } .wo-th-actions { display:flex; gap:5px; } .wo-th-actions .wo-btn { height:30px; padding:0 9px; font-size:10px; } .wo-table-scroll { min-height:360px; overflow:auto; } .wo-table-panel table { width:100%; border-collapse:collapse; table-layout:auto; } .wo-table-panel th { height:43px; padding:0 11px; text-align:left; color:#354052; background:#f7f8fa; font-size:11px; font-weight:700; white-space:nowrap; border-bottom:1px solid var(--wo-border); } .wo-table-panel td { height:57px; padding:8px 11px; color:#394457; font-size:11px; border-bottom:1px solid #edf0f5; vertical-align:middle; white-space:nowrap; } .wo-table-panel tr:last-child td { border-bottom:0; } .wo-table-panel tbody tr { transition:background .14s ease; } .wo-table-panel tbody tr:hover, .wo-table-panel tbody tr.is-selected { background:#f5f9ff; } .wo-link, .wo-row-actions button { border:0; padding:0; color:#1677ff; background:transparent; font-size:11px; } .wo-ticket-link { font-weight:600; } .wo-title-cell { max-width:205px; min-width:115px; white-space:normal; } .wo-title-cell strong { display:block; color:#263245; font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wo-title-cell small { display:block; max-width:180px; margin-top:4px; color:#8a94a6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wo-category { color:#344054; font-weight:500; } .wo-fault-code { display:block; max-width:110px; overflow:hidden; color:#475467; font-family:Consolas,"Courier New",monospace; text-overflow:ellipsis; } .wo-person b, .wo-person small { display:block; font-weight:500; } .wo-person small { margin-top:3px; color:#9aa3b2; font-size:9px; } .wo-priority, .wo-status { display:inline-flex; min-width:30px; height:23px; align-items:center; justify-content:center; padding:0 8px; border-radius:4px; font-size:10px; font-weight:600; } .wo-priority.high { color:#ef3b4f; background:#ffe8e9; }.wo-priority.medium { color:#e98600; background:#fff1dc; }.wo-priority.low { color:#13965b; background:#e5f6ec; } .wo-status.processing { color:#1474e9; background:#eaf3ff; }.wo-status.pending,.wo-status.pending_assignment { color:#e68000; background:#fff1db; } .wo-status.completed,.wo-status.closed { color:#159456; background:#e6f6ed; }.wo-status.resolved_pending_acceptance,.wo-status.resolved_pending_verification { color:#6555d9; background:#eeecff; } .wo-status.overdue { color:#e43d4d; background:#ffe9eb; } time.is-overdue { color:#e9404d; } time small { display:block; margin-top:3px; font-size:9px; font-weight:600; } .wo-progress { display:flex; align-items:center; gap:7px; min-width:92px; } .wo-progress i { width:58px; height:6px; overflow:hidden; border-radius:4px; background:#e9edf4; } .wo-progress i b { display:block; height:100%; border-radius:4px; background:#3184f5; } .wo-progress em { font-style:normal; font-size:10px; } .wo-row-actions { display:flex; gap:10px; } .wo-empty { height:290px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#9aa3b2; } .wo-empty svg { width:36px; height:36px; color:#c9d2df; }.wo-empty strong { color:#667085; font-size:13px; }.wo-empty span { font-size:11px; } .wo-pagination { height:56px; display:flex; align-items:center; gap:18px; padding:0 14px; border-top:1px solid var(--wo-border); color:#687386; font-size:11px; } .wo-pagination label select { height:30px; border:1px solid #dce2ec; border-radius:4px; color:#596579; background:#fff; } .wo-pagination nav { display:flex; gap:6px; margin-left:auto; } .wo-pagination nav button { width:30px; height:30px; border:1px solid #dce2ec; border-radius:4px; color:#4a5568; background:#fff; } .wo-pagination nav button.is-active { color:#fff; background:var(--wo-blue); border-color:var(--wo-blue); }.wo-pagination nav button:disabled { opacity:.45; cursor:default; } .wo-aside { display:flex; flex-direction:column; gap:12px; min-width:0; } .wo-insight, .wo-detail { background:#fff; border:1px solid var(--wo-border); border-radius:6px; box-shadow:0 2px 9px rgba(16,32,55,.025); } .wo-insight { padding:15px; }.wo-insight h3, .wo-detail header h3 { margin:0; color:#243044; font-size:14px; } .wo-status-distribution > div, .wo-chart-row { display:flex; align-items:center; gap:12px; margin-top:12px; } .wo-insight ul { flex:1; min-width:0; padding:0; margin:0; list-style:none; } .wo-insight li { display:grid; grid-template-columns:7px 1fr auto; gap:7px; align-items:center; margin:8px 0; color:#677184; font-size:10px; } .wo-insight li i { width:6px; height:6px; border-radius:1px; }.wo-insight li i.orange { background:#ff9f18; }.wo-insight li i.blue { background:#1677ff; }.wo-insight li i.violet { background:#8b6bd1; }.wo-insight li i.green { background:#22ad68; }.wo-insight li i.red { background:#ef4b55; } .wo-insight li b { color:#344054; } .wo-donut { width:118px!important; height:118px!important; transform:rotate(-90deg); } .wo-donut circle { fill:none; stroke-width:13; }.wo-donut .track { stroke:#eef1f5; }.wo-donut text { transform:rotate(90deg); transform-origin:52px 52px; text-anchor:middle; fill:#182337; stroke:none; font-size:18px; font-weight:700; }.wo-donut text.caption { font-size:9px; font-weight:500; fill:#7a8497; } .wo-detail { min-height:500px; overflow:hidden; }.wo-detail-tall { min-height:818px; } .wo-detail > header { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--wo-border); } .wo-detail > header button, .wo-dialog > header button { width:30px; height:30px; display:grid; place-items:center; border:0; color:#667085; background:transparent; } .wo-detail > header button svg, .wo-dialog > header button svg { width:18px; height:18px; } .wo-detail-body { max-height:625px; overflow:auto; padding:14px; } .wo-detail-body h4 { margin:0 0 11px; padding-top:2px; color:#344054; font-size:11px; }.wo-detail-body h4:not(:first-child) { margin-top:18px; padding-top:13px; border-top:1px solid #edf0f4; } .wo-detail-body dl { display:grid; grid-template-columns:86px 1fr; row-gap:9px; margin:0; font-size:10px; }.wo-detail-body dt { color:#8a94a6; }.wo-detail-body dd { margin:0; color:#344054; min-width:0; } .wo-detail-body .wo-progress { display:inline-flex; vertical-align:middle; } .wo-description { margin:0; color:#495469; font-size:10px; line-height:1.8; white-space:pre-wrap; } .wo-attachments { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.wo-attachments a { min-width:0; padding:8px; border:1px solid #e3e8ef; border-radius:4px; color:#4c5870; text-decoration:none; }.wo-attachments span { height:64px; display:grid; place-items:center; overflow:hidden; color:#7baaf0; background:#f2f6fb; }.wo-attachments span img { width:100%; height:100%; object-fit:cover; }.wo-attachments b { display:block; margin-top:5px; overflow:hidden; color:#647084; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .wo-timeline article { position:relative; min-height:44px; padding:0 0 12px 18px; border-left:1px solid #dfe5ee; font-size:9px; }.wo-timeline article i { position:absolute; left:-4px; top:2px; width:7px; height:7px; border-radius:50%; background:#2377ee; }.wo-timeline time { color:#8a94a5; }.wo-timeline b { margin-left:9px; color:#586377; }.wo-timeline p { margin:5px 0 0; color:#424d62; line-height:1.55; } .wo-detail-empty, .wo-detail-loading { min-height:480px; display:grid; place-items:center; color:#98a2b3; font-size:12px; } .wo-log-form { display:grid; grid-template-columns:1fr 58px auto; gap:7px; padding:11px; border-top:1px solid var(--wo-border); }.wo-log-form input { height:34px; font-size:10px; } .wo-bar { display:grid; grid-template-columns:38px 1fr 68px; align-items:center; gap:8px; margin-top:18px; color:#536075; font-size:10px; }.wo-bar i { height:7px; overflow:hidden; border-radius:4px; background:#ebeff5; }.wo-bar i b { display:block; height:100%; border-radius:4px; background:#1769e0; }.wo-bar em { font-style:normal; text-align:right; color:#677184; } .wo-mini-empty { padding:28px 0 10px; text-align:center; color:#98a2b3; font-size:11px; } .wo-loading, .wo-error { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7b8495; }.wo-loading span { width:28px; height:28px; border:3px solid #dce9fb; border-top-color:var(--wo-blue); border-radius:50%; animation:woSpin .75s linear infinite; }.wo-loading p { margin:12px 0 0; font-size:12px; }.wo-error strong { color:#d92d20; }.wo-error p { font-size:12px; }.wo-error button { border:0; color:#1677ff; background:transparent; } .wo-modal[hidden] { display:none; }.wo-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; }.wo-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); animation:woFade .16s ease; } .wo-dialog { position:relative; width:min(720px,calc(100vw - 32px)); max-height:calc(100svh - 36px); overflow:auto; background:#fff; border-radius:6px; box-shadow:0 22px 60px rgba(16,24,40,.25); animation:woDialog .2s ease-out; } .wo-dialog > header { position:sticky; top:0; z-index:2; height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--wo-border); background:#fff; }.wo-dialog h3 { margin:0; font-size:17px; color:#1d2939; } .wo-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:19px 20px; }.wo-form-grid label { display:flex; flex-direction:column; gap:6px; }.wo-form-grid label.wide { grid-column:1/-1; }.wo-form-grid label small { color:#98a2b3; font-size:10px; font-weight:400; }.wo-form-grid input[type="file"] { height:auto; padding:8px 10px; }.wo-form-grid textarea { height:auto; padding:9px 10px; resize:vertical; line-height:1.55; } #workOrdersPage .wo-form-grid label, #workOrdersPage .wo-form-note { color:#475467; font-size:12px; font-weight:400; } .wo-form-note { grid-column:1/-1; } .wo-dialog form > footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:9px; padding:12px 20px; border-top:1px solid var(--wo-border); background:#fff; } .wo-toast { position:fixed; left:50%; top:78px; z-index:1100; transform:translate(-50%,-12px); padding:9px 16px; border-radius:4px; color:#fff; background:#344054; box-shadow:0 8px 22px rgba(16,24,40,.18); font-size:12px; opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }.wo-toast.is-visible { opacity:1; transform:translate(-50%,0); }.wo-toast.success { background:#168a53; }.wo-toast.error { background:#cf3140; } @keyframes woSpin { to { transform:rotate(360deg); } } @keyframes woFade { from { opacity:0; } } @keyframes woDialog { from { opacity:0; transform:translateY(10px); } } @media (max-width:1350px) { .wo-layout { grid-template-columns:minmax(760px,1fr) 300px; }.wo-summary { grid-template-columns:repeat(3,1fr); }.has-insights .wo-summary { grid-template-columns:repeat(5,minmax(130px,1fr)); }.wo-filters { grid-template-columns:1.3fr repeat(3,minmax(120px,.7fr)); }.wo-filters > label:nth-of-type(5) { grid-column:1/3; }.wo-filter-actions { grid-column:4/5; justify-self:end; } } @media (max-width:900px) { .wo-head-right { flex-wrap:wrap; gap:8px; } .wo-source-bar { justify-content:flex-end; } #workOrdersPage { min-height:calc(100svh - 58px); overflow-x:hidden; }.wo-workspace { min-width:0; padding:14px 12px 24px; }.wo-page-head { height:auto; min-height:58px; }.wo-page-head p { display:none; }.wo-page-head h2 { font-size:18px; }.wo-head-actions .wo-btn { padding:0 10px; }.wo-head-actions .wo-btn span { display:none; }.wo-type-tabs { margin:0 -12px 12px; padding:0 12px; gap:12px; overflow-x:auto; }.wo-layout { display:block; }.wo-aside { margin-top:12px; }.wo-summary,.has-insights .wo-summary { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; }.wo-stat { min-width:155px; scroll-snap-align:start; }.wo-filters { grid-template-columns:1fr 1fr; }.wo-filters > label:first-child,.wo-filters > label:nth-of-type(5) { grid-column:1/-1; }.wo-filter-actions { grid-column:1/-1; justify-self:stretch; }.wo-filter-actions .wo-btn { flex:1; }.wo-table-scroll { min-height:330px; }.wo-table-panel table { min-width:950px; }.wo-pagination { gap:8px; }.wo-pagination nav { overflow-x:auto; }.wo-insight { padding:14px; }.wo-detail-body { max-height:none; }.wo-form-grid { grid-template-columns:1fr; }.wo-form-grid label.wide { grid-column:auto; } } @media (prefers-reduced-motion:reduce) { #workOrdersPage * { animation:none!important; transition:none!important; } } /* ??????????????????????????? */ .wo-icon-filter { position:relative; width:28px; height:28px; flex:0 0 28px; transition:width .16s ease; } .wo-filter-icon { position:absolute; inset:0; z-index:0; display:grid; place-items:center; color:#a4afbf; pointer-events:none; } .wo-filter-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wo-icon-filter .wo-th-control { position:absolute; inset:0; z-index:1; width:28px !important; min-width:28px; height:28px; padding:0; border:1px solid #dce2ec; border-radius:4px; color:transparent; background:transparent; appearance:none; cursor:pointer; } .wo-icon-filter .wo-th-control:focus { border-color:#69a7ff; box-shadow:0 0 0 2px rgba(22,119,255,.1); } .wo-icon-filter:focus-within { width:118px; } .wo-icon-filter:focus-within .wo-filter-icon { opacity:0; } .wo-icon-filter:focus-within .wo-th-control { width:100% !important; min-width:0; padding:0 7px; color:#344054; background:#fff; } .wo-th-icon-input { text-indent:-9999px; } .wo-icon-filter:focus-within .wo-th-icon-input { text-indent:0; } .wo-th-date-range { min-width:68px; gap:4px; } .wo-th-date-range .wo-icon-filter { flex:0 0 28px; } .wo-th-date-range .wo-th-icon-date { width:28px !important; min-width:28px; color:transparent; } .wo-th-icon-date::-webkit-calendar-picker-indicator { opacity:0; cursor:pointer; } .wo-icon-filter:focus-within .wo-th-icon-date { width:104px !important; min-width:0; color:#344054; padding:0 4px; } .wo-th-date-range .wo-icon-filter:focus-within { width:104px; flex-basis:104px; } /* ???????????????? */ .wo-filter-box { position:relative; display:inline-flex; width:27px; height:27px; flex:0 0 27px; } #workOrdersPage .wo-filter-trigger { width:27px; min-width:27px; height:27px; min-height:27px; display:grid; place-items:center; padding:0 !important; border:1px solid transparent; border-radius:4px; color:#7b8798; background:transparent; box-shadow:none; transform:none; cursor:pointer; transition:background .15s ease,color .15s ease; } #workOrdersPage .wo-filter-trigger:hover, #workOrdersPage .wo-filter-trigger:focus-visible { color:#536075; background:#e9eef5; } #workOrdersPage .wo-filter-trigger:focus-visible { outline:2px solid #69a7ff; outline-offset:1px; } #workOrdersPage .wo-filter-trigger svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wo-filter-popover[hidden] { display:none; } .wo-filter-popover.is-floating { position:fixed; z-index:1200; min-width:154px; padding:8px; border:1px solid #dce2ec; border-radius:6px; background:#fff; box-shadow:0 10px 28px rgba(16,32,55,.18); } .wo-filter-popover-control { width:100%; height:32px; border:1px solid #dce2ec; border-radius:4px; padding:0 8px; outline:0; color:#344054; background:#fff; font-size:11px; } .wo-filter-popover-control:focus { border-color:#69a7ff; box-shadow:0 0 0 2px rgba(22,119,255,.1); } .wo-th-date-range { min-width:58px; gap:4px; } .wo-th-date-range i { color:#a4afbf; } .wo-pending-files { display: grid; gap: 6px; min-width: 0; } .wo-pending-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid #dbe4ef; border-radius: 6px; } .wo-pending-file span { overflow-wrap: anywhere; min-width: 0; } #workOrdersPage { --wo-tone:var(--wo-blue); --wo-tone-dark:var(--wo-blue-dark); --wo-tone-bg:var(--wo-bg); --wo-tone-wash:#eff3f8; --wo-tone-panel:#fff; --wo-tone-border:var(--wo-border); } #workOrdersPage .wo-workspace { background:var(--wo-tone-bg); } #workOrdersPage .wo-type-tabs { margin-bottom:0; border-bottom:1px solid var(--wo-tone-border); } #workOrdersPage .wo-type-tabs button.is-active { background:var(--wo-tone-wash); color:var(--wo-tone-dark); border-bottom-color:var(--wo-tone); border-radius:4px 4px 0 0; } #workOrdersPage #woContent { padding-top:16px; background:var(--wo-tone-bg); } #workOrdersPage .wo-table-panel, #workOrdersPage .wo-insight, #workOrdersPage .wo-detail, #workOrdersPage .wo-config-page { background:var(--wo-tone-panel); border-color:var(--wo-tone-border); } #workOrdersPage .wo-scope-tabs, #workOrdersPage .wo-table-panel th, #workOrdersPage .wo-config-note, #workOrdersPage .wo-config-table th, #workOrdersPage .wo-detail > header { background:var(--wo-tone-wash); } #workOrdersPage .wo-config-tabs button.is-active { color:var(--wo-tone); } #workOrdersPage .wo-config-tabs button.is-active::after { background:var(--wo-tone); } #workOrdersPage .wo-table-panel tbody tr[data-row] { cursor:pointer; } #workOrdersPage .wo-table-panel tbody tr[data-row]:hover, #workOrdersPage .wo-table-panel tbody tr.is-selected { background:var(--wo-tone-wash); } #workOrdersPage .wo-table-panel tbody tr.is-selected td:first-child { box-shadow:inset 3px 0 var(--wo-tone); } #workOrdersPage .wo-table-panel tbody tr[data-row]:focus-visible { outline:2px solid var(--wo-tone); outline-offset:-2px; } #workOrdersPage .wo-row-actions { flex-wrap:wrap; max-width:175px; min-width:125px; gap:6px 10px; } #workOrdersPage .wo-detail > header h3 { margin-right:auto; } #workOrdersPage .wo-detail > header .wo-detail-transfer { order:0; width:auto; padding:0 8px; color:var(--wo-tone); font-size:11px; white-space:nowrap; } #workOrdersPage #woCloseDetail { order:1; } .wo-editor-category { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 14px; color:var(--wo-tone-dark); background:var(--wo-tone-bg); border-left:3px solid var(--wo-tone); border-radius:5px; } .wo-editor-category small { flex-basis:100%; font-size:11px; } .wo-transfer-dialog { width:min(600px,calc(100vw - 24px)); } .wo-transfer-summary { overflow-wrap:anywhere; color:#344054; line-height:1.7; } .wo-transfer-summary p { margin:8px 0 0; color:#667085; font-size:12px; } .wo-transfer-status { margin:0; padding:12px; border-radius:6px; color:#694f16; background:#fff6df; font-size:12px; line-height:1.7; } .wo-form-grid > .wo-editor-category, .wo-form-grid > .wo-transfer-summary, .wo-form-grid > .wo-transfer-status { grid-column:1/-1; } #workOrdersPage .wo-overview { position:sticky; top:var(--wo-header-height,0px); z-index:35; padding:4px 0 8px; background:var(--wo-tone-bg); } /* 数据来源保持紧凑行高，由首行 flex 垂直居中。 */ #workOrdersPage .wo-source-bar > span { font-size:12px; line-height:24px; white-space:nowrap; } .wo-overview-loading { color:#64748b; font-size:11px; } #workOrdersPage .wo-overview .wo-summary { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:0; overflow:visible; } #workOrdersPage .wo-overview .wo-stat { min-width:0; min-height:92px; gap:9px; padding:12px 10px; text-align:left; color:var(--wo-text); background:#fff; transform:none; cursor:pointer; } #workOrdersPage .wo-overview .wo-stat-icon { width:34px; height:34px; flex-basis:34px; } #workOrdersPage .wo-overview .wo-stat small { font-size:11px; line-height:1.4; white-space:normal; } #workOrdersPage .wo-overview .wo-stat em { font-size:10px; white-space:normal; } #workOrdersPage .wo-overview .wo-stat:hover { border-color:var(--wo-tone); background:var(--wo-tone-panel); } #workOrdersPage .wo-overview .wo-stat.is-active { border-color:var(--wo-tone); box-shadow:inset 0 0 0 1px var(--wo-tone); background:var(--wo-tone-panel); } #workOrdersPage .wo-overview .wo-stat:focus-visible { outline:2px solid var(--wo-tone); outline-offset:2px; } .wo-type-label { display:inline-flex; padding:3px 7px; border-radius:4px; font-size:11px; font-weight:600; } .wo-type-label[data-order-type="maintenance"] { color:#184c91; background:#dae9fc; } .wo-type-label[data-order-type="development"] { color:#573787; background:#e5d8f7; } .wo-type-label[data-order-type="testing"] { color:#05594f; background:#cce9e2; } .wo-new-type-dialog { width:min(480px,calc(100vw - 24px)); } .wo-new-type-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:24px; } @media (max-width:1100px) { #workOrdersPage .wo-overview .wo-stat { gap:6px; padding:10px 7px; } #workOrdersPage .wo-overview .wo-stat-icon { width:28px; height:28px; flex-basis:28px; } } @media (max-width:900px) { #workOrdersPage .wo-overview { position:static; } #workOrdersPage .wo-overview .wo-summary { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 7px; scroll-snap-type:x proximity; } #workOrdersPage .wo-overview .wo-stat { min-width:152px; scroll-snap-align:start; } #workOrdersPage .wo-type-tabs { gap:8px; } #workOrdersPage .wo-type-tabs button { flex-shrink:0; white-space:nowrap; } #workOrdersPage .wo-workspace[data-type="all"] .wo-scope-tabs { overflow-x:auto; } #workOrdersPage .wo-workspace[data-type="all"] .wo-scope-tabs button { flex-shrink:0; white-space:nowrap; } #workOrdersPage .wo-workspace[data-type="all"] .wo-row-actions { flex-wrap:nowrap; max-width:none; } } body.light #workOrdersPage { color-scheme:light; } body:not(.light) #workOrdersPage { --wo-blue:#2b8cff; --wo-blue-dark:#56a8ff; --wo-green:#39d6ad; --wo-orange:#f2bd58; --wo-red:#ff7184; --wo-bg:#0b1c2e; --wo-border:#254968; --wo-tone-wash:#153451; --wo-tone-panel:#102941; --wo-text:#dceeff; --wo-muted:#9eb8cf; --wo-heading:#f2f8ff; --wo-control:#0d2238; --wo-control-border:#315b7e; --wo-row-border:#1d405f; color-scheme:dark; } body:not(.light) #workOrdersPage .wo-workspace { color:var(--wo-text); background:var(--wo-tone-bg); } body:not(.light) #workOrdersPage .wo-page-head p, body:not(.light) #workOrdersPage .wo-source-bar, body:not(.light) #workOrdersPage .wo-overview-loading, body:not(.light) #workOrdersPage .wo-stat em, body:not(.light) #workOrdersPage .wo-filters label, body:not(.light) #workOrdersPage .wo-pagination, body:not(.light) #workOrdersPage .wo-person small, body:not(.light) #workOrdersPage .wo-insight li, body:not(.light) #workOrdersPage .wo-detail-body dt { color:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-page-head h2, body:not(.light) #workOrdersPage .wo-stat small, body:not(.light) #workOrdersPage .wo-stat strong, body:not(.light) #workOrdersPage .wo-insight h3, body:not(.light) #workOrdersPage .wo-detail > header h3, body:not(.light) #workOrdersPage .wo-detail-body dd, body:not(.light) #workOrdersPage .wo-detail-body h4, body:not(.light) #workOrdersPage .wo-description, body:not(.light) #workOrdersPage .wo-title-cell strong, body:not(.light) #workOrdersPage .wo-person b, body:not(.light) #workOrdersPage .wo-category, body:not(.light) #workOrdersPage .wo-fault-code, body:not(.light) #workOrdersPage .wo-insight li b { color:var(--wo-heading); } body:not(.light) #workOrdersPage .wo-type-tabs, body:not(.light) #workOrdersPage .wo-stat, body:not(.light) #workOrdersPage .wo-scope-tabs, body:not(.light) #workOrdersPage .wo-filters, body:not(.light) #workOrdersPage .wo-table-panel, body:not(.light) #workOrdersPage .wo-insight, body:not(.light) #workOrdersPage .wo-detail, body:not(.light) #workOrdersPage .wo-config-page, body:not(.light) #workOrdersPage .wo-dialog { background:var(--wo-tone-panel); border-color:var(--wo-tone-border); } body:not(.light) #workOrdersPage .wo-type-tabs button, body:not(.light) #workOrdersPage .wo-scope-tabs button, body:not(.light) #workOrdersPage .wo-config-tabs button { color:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-type-tabs button.is-active, body:not(.light) #workOrdersPage .wo-scope-tabs button.is-active, body:not(.light) #workOrdersPage .wo-config-tabs button.is-active { color:var(--wo-tone-dark); } body:not(.light) #workOrdersPage .wo-table-panel th, body:not(.light) #workOrdersPage .wo-scope-tabs, body:not(.light) #workOrdersPage .wo-detail > header, body:not(.light) #workOrdersPage .wo-config-note, body:not(.light) #workOrdersPage .wo-config-table th { color:var(--wo-text); background:var(--wo-tone-wash); border-color:var(--wo-tone-border); } body:not(.light) #workOrdersPage .wo-table-panel td { color:var(--wo-text); border-bottom-color:var(--wo-row-border); } body:not(.light) #workOrdersPage .wo-table-panel tbody tr:hover, body:not(.light) #workOrdersPage .wo-table-panel tbody tr.is-selected { background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-table-panel tbody tr.is-selected td:first-child { box-shadow:inset 3px 0 var(--wo-tone); } body:not(.light) #workOrdersPage .wo-source-bar button, body:not(.light) #workOrdersPage .wo-btn:not(.wo-btn-primary), body:not(.light) #workOrdersPage .wo-pagination nav button, body:not(.light) #workOrdersPage input:not([type="checkbox"]), body:not(.light) #workOrdersPage select, body:not(.light) #workOrdersPage textarea, body:not(.light) #workOrdersPage .wo-th-control, body:not(.light) #workOrdersPage .wo-filter-popover-control, body:not(.light) #workOrdersPage .wo-config-owner { color:var(--wo-text); background:var(--wo-control); border-color:var(--wo-control-border); } body:not(.light) #workOrdersPage input::placeholder, body:not(.light) #workOrdersPage textarea::placeholder { color:#8297a9; } body:not(.light) #workOrdersPage .wo-btn-primary { color:#c5e2ff; background:#244565; border-color:#4e789d; } body:not(.light) #workOrdersPage .wo-link, body:not(.light) #workOrdersPage .wo-row-actions button { color:var(--wo-tone-dark); } body:not(.light) #workOrdersPage .wo-detail-body h4:not(:first-child), body:not(.light) #workOrdersPage .wo-timeline article, body:not(.light) #workOrdersPage .wo-log-form { border-color:var(--wo-row-border); } body:not(.light) #workOrdersPage .wo-description, body:not(.light) #workOrdersPage .wo-timeline p, body:not(.light) #workOrdersPage .wo-timeline b { color:var(--wo-text); } body:not(.light) #workOrdersPage .wo-attachments a { color:var(--wo-text); border-color:var(--wo-control-border); background:var(--wo-control); } body:not(.light) #workOrdersPage .wo-attachments span { background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-config-note strong, body:not(.light) #workOrdersPage .wo-config-table td, body:not(.light) #workOrdersPage .wo-config-table td strong, body:not(.light) #workOrdersPage .wo-config-table code { color:var(--wo-text); } body:not(.light) #workOrdersPage .wo-config-table td { border-bottom-color:var(--wo-row-border); } body:not(.light) #workOrdersPage .wo-detail > header button, body:not(.light) #workOrdersPage .wo-dialog > header button { color:var(--wo-muted); } .wo-log-form small { grid-column:1/-1; color:var(--wo-muted); font-size:10px; line-height:1.6; } .wo-log-form .wo-log-attachments,.wo-log-form .wo-log-feedback { grid-column:1/-1; min-width:0; } .wo-log-attachments > summary { cursor:pointer; padding:6px 0; color:var(--wo-tone-dark); font-size:12px; } .wo-log-attachment-fields { display:grid; gap:8px; padding-top:8px; } .wo-log-attachment-fields .wo-attachment-picker { display:grid; gap:6px; min-width:0; font-size:12px; color:var(--wo-text); } .wo-log-attachment-fields input[type="file"] { height:auto; min-height:34px; padding:6px; max-width:100%; } .wo-log-feedback { font-size:12px; color:#b45309; overflow-wrap:anywhere; } .wo-log-feedback:empty { display:none; } body:not(.light) #workOrdersPage .wo-log-feedback { color:#f2c18b; } body:not(.light) #workOrdersPage .wo-donut text { fill:var(--wo-heading); } body:not(.light) #workOrdersPage .wo-donut text.caption { fill:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-donut .track { stroke:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-stat-icon { color:var(--wo-blue); background:#263d54; } body:not(.light) #workOrdersPage .wo-stat.orange .wo-stat-icon { color:var(--wo-orange); background:#44382a; } body:not(.light) #workOrdersPage .wo-stat.green .wo-stat-icon { color:var(--wo-green); background:#203e36; } body:not(.light) #workOrdersPage .wo-stat.red .wo-stat-icon { color:var(--wo-red); background:#482d38; } body:not(.light) #workOrdersPage .wo-stat.violet .wo-stat-icon { color:#c8b5ed; background:#37314e; } body:not(.light) #workOrdersPage .wo-stat.dark .wo-stat-icon { color:#b9c7d7; background:#303b4a; } body:not(.light) #workOrdersPage .wo-priority.high, body:not(.light) #workOrdersPage .wo-status.overdue { color:#f5acb7; background:#482d38; } body:not(.light) #workOrdersPage .wo-priority.medium, body:not(.light) #workOrdersPage .wo-status.pending, body:not(.light) #workOrdersPage .wo-status.pending_assignment { color:#f1c78a; background:#44382a; } body:not(.light) #workOrdersPage .wo-priority.low, body:not(.light) #workOrdersPage .wo-status.completed, body:not(.light) #workOrdersPage .wo-status.closed, body:not(.light) #workOrdersPage .wo-config-state.is-enabled { color:#88dfba; background:#203e36; } body:not(.light) #workOrdersPage .wo-status.processing { color:#a6d2ff; background:#263d54; } body:not(.light) #workOrdersPage .wo-status.resolved_pending_acceptance, body:not(.light) #workOrdersPage .wo-status.resolved_pending_verification { color:#cdbcf5; background:#37314e; } body:not(.light) #workOrdersPage .wo-progress i, body:not(.light) #workOrdersPage .wo-bar i { background:#34465c; } body:not(.light) #workOrdersPage .wo-progress i b, body:not(.light) #workOrdersPage .wo-bar i b { background:var(--wo-blue); } body:not(.light) #workOrdersPage .wo-filter-popover.is-floating { color:var(--wo-text); background:var(--wo-tone-panel); border-color:var(--wo-tone-border); } body:not(.light) #workOrdersPage .wo-dialog > header, body:not(.light) #workOrdersPage .wo-dialog form > footer { color:var(--wo-text); background:var(--wo-tone-wash); border-color:var(--wo-tone-border); } body:not(.light) #workOrdersPage .wo-dialog h3, body:not(.light) #workOrdersPage .wo-form-grid label, body:not(.light) #workOrdersPage .wo-transfer-summary { color:var(--wo-text); } body:not(.light) #workOrdersPage .wo-form-grid small, body:not(.light) #workOrdersPage .wo-transfer-summary p { color:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-form-grid .wo-form-note { color:var(--wo-text); } body:not(.light) #workOrdersPage .wo-type-label[data-order-type="maintenance"] { color:#a6d2ff; background:#263d54; } body:not(.light) #workOrdersPage .wo-type-label[data-order-type="development"] { color:#cdbcf5; background:#37314e; } body:not(.light) #workOrdersPage .wo-type-label[data-order-type="testing"] { color:#88dfba; background:#203e36; } body:not(.light) #workOrdersPage .wo-source-bar button.is-active, body:not(.light) #workOrdersPage .wo-pagination nav button.is-active { color:var(--wo-tone-dark); border-color:var(--wo-tone); background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-btn:hover:not(:disabled), body:not(.light) #workOrdersPage .wo-type-tabs button:hover, body:not(.light) #workOrdersPage .wo-scope-tabs button:hover { color:var(--wo-tone-dark); border-color:var(--wo-tone); background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-btn-primary:hover:not(:disabled) { color:#e4f2ff; background:#2d5377; border-color:var(--wo-blue); } body:not(.light) #workOrdersPage .wo-btn:disabled { color:#8292a5; background:#252e3d; border-color:var(--wo-row-border); cursor:not-allowed; } body:not(.light) #workOrdersPage .wo-production-panel, body:not(.light) #workOrdersPage .wo-transfer-status { color:#f1c78a; background:#3a3228; border-color:#695438; } body:not(.light) #workOrdersPage #woSourceProduction.is-active { color:#f1c78a; background:#44382a; border-color:#81653f; } body:not(.light) #workOrdersPage .wo-production-panel #woProductionStatus.is-connected { color:#88dfba; } body:not(.light) #workOrdersPage .wo-detail-body dd.is-overdue, body:not(.light) #workOrdersPage .is-overdue, body:not(.light) #workOrdersPage .wo-required { color:#f5acb7; } body:not(.light) #workOrdersPage .wo-due-date-note.is-warning { color:#f1c78a; } body:not(.light) #workOrdersPage .wo-config-table small { color:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-paste-zone, body:not(.light) #workOrdersPage .wo-pending-file { color:var(--wo-muted); background:var(--wo-control); border-color:var(--wo-control-border); } body:not(.light) #workOrdersPage .wo-paste-zone.is-dragover { color:var(--wo-tone-dark); background:var(--wo-tone-wash); border-color:var(--wo-tone); } body:not(.light) #workOrdersPage .wo-config-tabs button b, body:not(.light) #workOrdersPage .wo-config-state.is-disabled { color:var(--wo-muted); background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-config-row-actions button { color:var(--wo-muted); } body:not(.light) #workOrdersPage .wo-config-row-actions button:hover { color:var(--wo-tone-dark); background:var(--wo-tone-wash); } body:not(.light) #workOrdersPage .wo-bar, body:not(.light) #workOrdersPage .wo-bar em { color:var(--wo-muted); } #workOrdersPage, body.light #workOrdersPage, body:not(.light) #workOrdersPage { background:var(--workspace-page-background,#111827); } #workOrdersPage :is(.wo-workspace,.wo-overview,#woContent), body:not(.light) #workOrdersPage :is(.wo-workspace,.wo-overview,#woContent) { background:var(--workspace-page-background,#111827); } /* 工单工作台：保留背景色，以流式容器、明确字号和局部滚动适配中等屏幕。 */ #workOrdersPage .wo-workspace { min-width:0; width:100%; padding:8px 22px 24px; } /* 顶部只保留来源和操作工具栏；分类标题留给总览和标签栏，语义标题供辅助技术读取。 */ #workOrdersPage .wo-page-head { height:auto; min-height:36px; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px; } #workOrdersPage .wo-page-head .wo-page-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } #workOrdersPage .wo-page-head .wo-source-bar { flex:1 1 auto; min-width:0; } #workOrdersPage .wo-page-head .wo-btn { font-size:13px; gap:6px; } #workOrdersPage .wo-head-actions { flex-wrap:wrap; } #workOrdersPage .wo-layout { grid-template-columns:minmax(0,1fr) 320px; gap:16px; } #workOrdersPage :is(.wo-main,.wo-table-panel,.wo-aside,.wo-config-page) { min-width:0; max-width:100%; } #workOrdersPage .wo-table-scroll { max-width:100%; overflow:auto; } #workOrdersPage .wo-table-panel table { min-width:1060px; } #workOrdersPage .wo-table-panel th { font-size:12px; height:44px; } #workOrdersPage .wo-table-panel td { font-size:12px; height:54px; line-height:1.55; } #workOrdersPage .wo-title-cell { min-width:210px; max-width:300px; } #workOrdersPage .wo-title-cell strong { font-size:13px; white-space:normal; overflow-wrap:anywhere; } #workOrdersPage .wo-title-cell small { font-size:11px; } #workOrdersPage .wo-detail-body { padding:16px; } #workOrdersPage .wo-detail-body dl { grid-template-columns:82px minmax(0,1fr); gap:12px 10px; font-size:12px; line-height:1.6; } #workOrdersPage .wo-detail-body h4 { font-size:13px; } #workOrdersPage .wo-detail-body dd { overflow-wrap:anywhere; } #workOrdersPage :is(.wo-type-tabs,.wo-scope-tabs) { max-width:100%; overflow-x:auto; } #workOrdersPage :is(.wo-type-tabs,.wo-scope-tabs) button { flex-shrink:0; min-height:40px; white-space:nowrap; } #workOrdersPage .wo-btn { min-height:36px; } #workOrdersPage .wo-overview .wo-stat { min-width:0; box-shadow:none; } #workOrdersPage .wo-stat strong { font-variant-numeric:tabular-nums; } #workOrdersPage :is(button,input,select,textarea):focus-visible { outline:2px solid var(--wo-blue);outline-offset:3px; } #workOrdersPage .wo-btn:active:not(:disabled) { transform:none;filter:brightness(.93); } /* 深色主题只调整强调色，页面/面板背景沿用原值，警告和超时语义保持。 */ body:not(.light) #workOrdersPage { --wo-blue:#38c6a5; --wo-blue-dark:#75dec4; --wo-muted:#a7b9c8; } body:not(.light) #workOrdersPage .wo-btn-primary { background:#12866f; border-color:#24b79a; color:#fff; } body:not(.light) #workOrdersPage .wo-btn-primary:hover:not(:disabled) { background:#10775f; border-color:#67d8be; color:#fff; box-shadow:none; } body:not(.light) #workOrdersPage .wo-link,body:not(.light) #workOrdersPage .wo-row-actions button { color:#8fc5ed; } body:not(.light) #workOrdersPage .wo-stat-icon { color:#8fc5ed; background:#203e55; } body:not(.light) #workOrdersPage .wo-stat.is-active .wo-stat-icon { color:#75dec4; background:#194238; } body:not(.light) #workOrdersPage .wo-btn:disabled { color:#9cabb9; background:#253345; border-color:#394c60; filter:none; } @media(max-width:1250px){ #workOrdersPage .wo-layout { grid-template-columns:minmax(0,1fr); } #workOrdersPage .wo-overview { position:static; } #workOrdersPage .wo-overview .wo-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible; } #workOrdersPage .wo-overview .wo-stat { min-width:0;min-height:84px;padding:12px; } #workOrdersPage .wo-detail-body { max-height:none; } #workOrdersPage .wo-aside { margin-top:0; } } @media(max-width:700px){ #workOrdersPage .wo-workspace { padding:8px 12px 20px; } #workOrdersPage .wo-type-tabs { margin-left:-12px;margin-right:-12px;max-width:calc(100% + 24px);gap:12px; } #workOrdersPage .wo-overview .wo-summary { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } #workOrdersPage .wo-head-actions { width:100%;gap:6px; } #workOrdersPage .wo-head-actions .wo-btn { flex:1;padding:0 8px;min-height:40px; } #workOrdersPage .wo-head-actions .wo-btn span { display:inline; } #workOrdersPage .wo-pagination { flex-wrap:wrap; } } #workOrdersPage .wo-description,#workOrdersPage .wo-timeline article { font-size:12px;line-height:1.7; } /* 中屏详情利用横向空间分组，避免单列字段拉长页面。 */ @media(min-width:701px) and (max-width:1250px){ #workOrdersPage .wo-detail-body dl { grid-template-columns:82px minmax(0,1fr) 82px minmax(0,1fr);column-gap:18px; } } body:not(.light) #workOrdersPage .wo-stat.orange .wo-stat-icon { color:#8fc5ed;background:#203e55; } /* 复制与删除置于详情工具栏；客户诉求紧随原优先级，保持原表单与深浅主题。 */ #workOrdersPage .wo-detail-toolbar { display:flex;align-items:center;gap:7px; } #workOrdersPage .wo-detail-toolbar button { width:auto;min-height:30px;height:auto;padding:5px 8px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:12px;border:1px solid var(--wo-border);border-radius:4px; } #workOrdersPage .wo-detail-toolbar #woCloseDetail { width:30px;height:30px;padding:5px;border:0; } #workOrdersPage .wo-copy-feedback { min-height:0;margin:0 18px;color:var(--wo-blue);font-size:12px; } #workOrdersPage .wo-copy-feedback:not(:empty) { margin-top:9px; } #workOrdersPage .wo-priority-field .wo-customer-request-label { margin-top:7px;color:var(--wo-muted);font-size:11px;font-weight:400; } #workOrdersPage .wo-priority-field textarea { min-height:58px;resize:vertical;font-size:12px; } #workOrdersPage .wo-customer-request { white-space:pre-wrap;overflow-wrap:anywhere; } #workOrdersPage .wo-delete-action { color:#cf433a!important; } #workOrdersPage .wo-btn-danger { background:#c93d36;border-color:#c93d36;color:#fff; } #workOrdersPage .wo-btn-danger:hover { background:#b72f29; } #workOrdersPage .wo-delete-dialog { max-width:490px; } #workOrdersPage .wo-delete-dialog > p { margin:14px 20px;overflow-wrap:anywhere; } #workOrdersPage .wo-delete-dialog > footer { padding:14px 20px;display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--wo-border); } #workOrdersPage .wo-delete-dialog [data-delete-error] { color:#d1443b;font-size:12px; } #workOrdersPage .wo-delete-dialog .wo-form-note { font-size:12px; } body:not(.light) #workOrdersPage .wo-delete-dialog { background:var(--wo-tone-panel);color:var(--wo-text); } body:not(.light) #workOrdersPage .wo-delete-action { color:#ff9b91!important; } @media(max-width:600px) { #workOrdersPage .wo-detail-toolbar { gap:4px; } #workOrdersPage .wo-detail-toolbar button { padding:5px; } } /* 分类工单统一列表+统计两栏；新建入口与全部/我的标签共行，统计不受当前分页影响。 */ #workOrdersPage .wo-layout.wo-list-statistics { display:grid;grid-template-columns:minmax(0,1fr) 292px;align-items:start;gap:16px; } #workOrdersPage .wo-list-statistics .wo-main { min-width:0; } #workOrdersPage .wo-list-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;margin-bottom:12px; } #workOrdersPage .wo-list-toolbar .wo-scope-tabs { flex:0 1 auto;min-width:0;margin:0; } #workOrdersPage .wo-list-actions [hidden] { display:none; } #workOrdersPage .wo-list-actions { display:flex;flex-shrink:0;align-items:center;gap:8px; } #workOrdersPage .wo-list-actions .wo-btn { min-height:34px;padding:7px 12px;font-size:13px; } #workOrdersPage .wo-list-statistics .wo-statistics { display:block;width:100%;min-width:0; } #workOrdersPage .wo-statistics .wo-insights { display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0; } #workOrdersPage .wo-statistics .wo-insight { width:auto;min-width:0;padding:16px;border:1px solid var(--wo-border);border-radius:10px;box-shadow:0 2px 7px #10182806; } #workOrdersPage .wo-statistics .wo-insight h3 { margin:0 0 14px;font-size:14px; } #workOrdersPage .wo-statistics .wo-chart-row { display:flex;flex-wrap:nowrap;align-items:center;gap:14px; } #workOrdersPage .wo-statistics .wo-chart-legend { min-width:0;flex:1; } #workOrdersPage .wo-statistics .wo-chart-legend > span { display:flex;align-items:center;gap:6px;margin:6px 0;font-size:11px; } #workOrdersPage .wo-statistics .wo-chart-legend b { margin-left:auto; } #workOrdersPage .wo-statistics .wo-workload { min-width:0; } #workOrdersPage .wo-statistics .wo-workload-row { min-width:0; } /* 详情沿用工具页面的右侧浮层表现，遮罩不改变列表宽度；关闭后保留页码、筛选和滚动位置。 */ #workOrdersPage .wo-detail-overlay { position:fixed;inset:0;z-index:1000; } #workOrdersPage .wo-detail-overlay[hidden] { display:none!important; } #workOrdersPage .wo-detail-backdrop { position:absolute;inset:0;background:#0c152b66;backdrop-filter:blur(1px); } #workOrdersPage .wo-detail-overlay .wo-detail-drawer { display:block;position:absolute;top:0;right:0;bottom:0;width:min(720px,100%);min-width:0;max-width:100%;max-height:none;height:100%;margin:0;border:0;border-left:1px solid var(--wo-border);border-radius:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;box-shadow:-12px 0 44px #0f172a26;animation:wo-detail-enter .18s ease-out; } #workOrdersPage .wo-detail-drawer > header { position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;margin:0;padding:14px 20px;border-bottom:1px solid var(--wo-border);background:inherit; } #workOrdersPage .wo-detail-drawer > header h3 { margin:0;font-size:17px;white-space:nowrap; } #workOrdersPage .wo-detail-drawer > header button[data-detail-dismiss] { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer; } #workOrdersPage .wo-detail-drawer > .wo-detail-title { padding-top:18px; } #workOrdersPage .wo-detail-drawer .wo-copy-feedback { margin-left:20px;margin-right:20px; } #workOrdersPage .wo-detail-drawer .wo-detail-grid { grid-template-columns:100px minmax(0,1fr); } #workOrdersPage .wo-detail-loading { padding:28px 20px;color:var(--wo-muted);font-size:13px; } #workOrdersPage .wo-detail-drawer .wo-detail-body { font-size:13px;line-height:1.8;overflow-wrap:anywhere; } #workOrdersPage .wo-modal { z-index:1100; } body.wo-detail-open { overflow:hidden; } body:not(.light) #workOrdersPage .wo-detail-drawer { background:var(--wo-tone-panel);color:var(--wo-text);box-shadow:-12px 0 44px #0007; } body:not(.light) #workOrdersPage .wo-detail-drawer > header { border-color:var(--wo-border); } @keyframes wo-detail-enter { from { transform:translateX(32px);opacity:.6; } to { transform:translateX(0);opacity:1; } } @media(max-width:1150px) { #workOrdersPage .wo-layout.wo-list-statistics { grid-template-columns:minmax(0,1fr) 250px;gap:12px; } #workOrdersPage .wo-statistics .wo-insight { padding:12px; } #workOrdersPage .wo-statistics .wo-chart-row { gap:9px; } } @media(max-width:850px) { #workOrdersPage .wo-layout.wo-list-statistics { grid-template-columns:minmax(0,1fr); } #workOrdersPage .wo-statistics .wo-insights { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } #workOrdersPage .wo-statistics .wo-insight:last-child { grid-column:1/-1; } } @media(max-width:550px) { #workOrdersPage .wo-list-toolbar { gap:8px; } #workOrdersPage .wo-list-actions .wo-btn { padding:7px 9px;font-size:12px;gap:4px; } #workOrdersPage .wo-statistics .wo-insights { grid-template-columns:minmax(0,1fr); } #workOrdersPage .wo-detail-drawer > header { padding:12px;gap:8px; } #workOrdersPage .wo-detail-drawer .wo-detail-grid { grid-template-columns:76px minmax(0,1fr); } } @media(prefers-reduced-motion:reduce) { #workOrdersPage .wo-detail-overlay .wo-detail-drawer { animation:none; } } /* 详情内容区独立滚动，表头和跟进表单固定在抽屉内，不再沿用原侧栏的625px高度。 */ #workOrdersPage .wo-detail-overlay .wo-detail-drawer { display:flex;flex-direction:column;overflow:hidden; } #workOrdersPage .wo-detail-drawer > header { flex-shrink:0; height:auto; } #workOrdersPage .wo-detail-drawer .wo-detail-body { flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain; } #workOrdersPage .wo-detail-drawer .wo-detail-body dl { grid-template-columns:90px minmax(0,1fr); } #workOrdersPage .wo-detail-drawer > .wo-log-form { flex-shrink:0;max-height:42vh;overflow:auto; } @media(max-width:550px) { #workOrdersPage .wo-detail-drawer .wo-detail-body dl { grid-template-columns:76px minmax(0,1fr); } } /* 详情二级页面共用抽屉，切换时保留未提交的备注和附件。 */ #workOrdersPage .wo-detail-tabs { display:flex; align-items:center; gap:12px; flex-shrink:0; } #workOrdersPage .wo-detail-tabs button { width:auto; height:auto; min-height:36px; white-space:nowrap; padding:8px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--wo-muted); font-size:15px; font-weight:600; } #workOrdersPage .wo-detail-tabs button[aria-selected="true"] { color:var(--wo-tone); border-bottom-color:var(--wo-tone); } #workOrdersPage .wo-detail-tabs button:focus-visible { outline:2px solid var(--wo-tone); outline-offset:3px; } #workOrdersPage .wo-detail-drawer > [hidden] { display:none!important; } #workOrdersPage .wo-workflow-panel { flex:1; min-height:0; overflow-y:auto; padding:20px; color:var(--wo-text); } #workOrdersPage .wo-workflow-panel h4 { margin:0 0 8px; font-size:15px; } #workOrdersPage .wo-workflow-subtitle { margin:0 0 20px; overflow-wrap:anywhere; } #workOrdersPage .wo-workflow-current { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-radius:8px; background:var(--wo-tone-wash); } #workOrdersPage .wo-workflow-overdue { color:var(--wo-red); font-weight:600; } #workOrdersPage .wo-workflow-map { list-style:none; margin:24px auto; padding:0; max-width:380px; } #workOrdersPage .wo-workflow-node { position:relative; display:flex; align-items:center; gap:16px; margin-bottom:30px; padding:14px 18px; border:1px solid var(--wo-border); border-radius:8px; background:var(--wo-tone-panel); } #workOrdersPage .wo-workflow-node:not(:last-child)::after { content:'↓'; position:absolute; top:100%; left:50%; height:30px; line-height:30px; color:var(--wo-muted); font-size:22px; } #workOrdersPage .wo-workflow-node.is-current { border:2px solid var(--wo-tone); background:var(--wo-tone-wash); } #workOrdersPage .wo-workflow-node small { display:block; margin-top:3px; color:var(--wo-muted); } #workOrdersPage .wo-workflow-node.is-current small { color:var(--wo-tone); font-weight:600; } #workOrdersPage .wo-workflow-number { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--wo-tone-wash); color:var(--wo-tone); } #workOrdersPage .wo-workflow-note { color:var(--wo-muted); font-size:12px; line-height:1.7; } #workOrdersPage .wo-workflow-panel dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; font-size:13px; } #workOrdersPage .wo-workflow-panel dd { margin:0; overflow-wrap:anywhere; } @media(max-width:550px) { #workOrdersPage .wo-detail-drawer > header { flex-wrap:wrap; } #workOrdersPage .wo-detail-tabs { gap:16px; } } /* 当前节点催办与提出人反馈使用原抽屉配色，窄屏允许操作换行。 */ #workOrdersPage .wo-remind-button { margin-left:auto; } #workOrdersPage .wo-workflow-feedback { margin:16px 0; padding:14px; border:1px solid var(--wo-border); border-radius:8px; } #workOrdersPage .wo-workflow-feedback textarea { width:100%; padding:10px; margin-bottom:10px; border:1px solid var(--wo-border); border-radius:6px; background:var(--wo-tone-panel); color:var(--wo-text); resize:vertical; } #workOrdersPage .wo-workflow-feedback > div { display:flex; flex-wrap:wrap; gap:10px; } #workOrdersPage #woWorkflowResult { color:var(--wo-muted); overflow-wrap:anywhere; }