/* Work orders page (design H, 4 Nov 2026). Loaded after tabs.css, which gives the course pills (.cx-pill). */
.wo-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-pill[aria-pressed=true] { background: var(--night); color: #FFFFFF; }
.wo-count { font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--rule-2); color: var(--ink-2); }
.cx-pill[aria-pressed=true] .wo-count { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.wo-who-l { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 0; }
.wo-who { min-width: 210px; }
.wo-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wo-fig { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-fig span { font-size: 13px; font-weight: 600; color: var(--slate); }
.wo-fig b { font-size: 26px; font-weight: 700; }
.wo-fig small { font-size: 13px; color: var(--slate); overflow-wrap: anywhere; }
.wo-bad { color: var(--danger) !important; font-weight: 700; }
.wo-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wo-list { padding: 8px !important; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.wo-list-h { padding: 6px 10px 4px; }
.wo-item { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: 12px; border: 2px solid transparent; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.wo-item:hover { background: var(--paper); }
.wo-item[aria-current=true] { border-color: var(--brand-text, var(--brand)); background: var(--brand-soft); }
.wo-item-t { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.wo-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: #F3ECFF; color: #5B21B6; }
.wo-st-on { background: #F3ECFF; color: #5B21B6; }
.wo-st-bad { background: #FDECEA; color: #B42318; }
.wo-st-blue { background: #E8EEFD; color: #1D4ED8; }
.wo-st-ok { background: #E6F4EC; color: #1F7A4D; }
.wo-st-grey { background: #F0EEF5; color: #352C46; }
.wo-track { --c: #8A3FFC; position: relative; display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--rule-2); overflow: hidden; }
.wo-track i { position: absolute; inset: 0 auto 0 0; display: block; }
.wo-track i.w { background: var(--c); opacity: .35; }
.wo-track i.a { background: var(--c); }
.wo-ask-chip { align-self: flex-start; font-size: 12px; font-weight: 700; color: #8A4B0A; background: #FDF0E1; border-radius: 999px; padding: 2px 9px; }
.wo-detail { margin: 0; padding: 22px 24px !important; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.wo-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wo-head h2 { margin: 4px 0 0; font-size: 24px; }
.wo-who-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wo-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #FFFFFF; flex: none; }
.wo-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.wo-ask { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #FDF0E1; color: #5C3204; }
.wo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wo-tile { background: var(--paper); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.wo-tile span, .wo-tile small { font-size: 13px; color: var(--slate); }
.wo-tile b { font-size: 18px; }
.wo-h3 { margin: 0 0 8px; font-size: 15px; }
.wo-table { width: 100%; }
.wo-table td.wo-prog { width: 38%; }
.wo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.wo-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wo-batch { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--rule-2); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.wo-batch:hover b { color: var(--brand-text, var(--brand)); text-decoration: underline; }
.wo-note { margin: 0 0 14px; padding: 12px 14px; background: var(--brand-soft); border-radius: 12px; white-space: pre-line; }
.wo-act { padding: 5px 0; }
.wo-dialog { max-width: 560px; }
.wo-lbl { font-weight: 600; margin-bottom: 6px; }
.wo-nums { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.wo-nums label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; margin: 0; }
.wo-num { width: 90px; text-align: right; }
.wo-total { padding-bottom: 10px; color: var(--slate); }
.wo-total b { color: var(--ink); }
@media (max-width: 1180px) { .wo-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .wo-split, .wo-two { grid-template-columns: 1fr; } .wo-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wo-tiles { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .wo-item[aria-current=true], .cx-pill[aria-pressed=true] { outline: 3px solid Highlight; outline-offset: -3px; } .wo-st { border: 1px solid CanvasText; } }