/* Canonical compact workflow and filter components. */
/* Status/theme borders must not close the selected folder tab. */
.inspection .workflow-tab[aria-selected=true],.inspection .workflow-tab[aria-selected=true]:hover{border-bottom-width:0}
.inspection .workflow-tab[aria-selected=true]::after{bottom:0;height:3px;background:#f0f7f4}
.inspection.round-purple .workflow-tab[aria-selected=true]::after{background:var(--round-surface)}
.filters.card{position:sticky;top:0;z-index:15;box-shadow:0 3px 12px #17312814}
.compact-round-nav{position:fixed;top:0;z-index:16;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;padding:8px;background:#f0f7f4;border:1px solid var(--green);border-radius:0 0 8px 8px;box-shadow:0 4px 12px #17312820}
.round-purple .compact-round-nav{background:var(--round-surface)}
.compact-round-links{display:flex;gap:5px;overflow-x:auto;min-width:0;flex:1}
.compact-round-links button{white-space:nowrap;font-size:11px;padding:8px;min-height:36px;flex-shrink:0}
.compact-round-links button.green{background:var(--status-success);color:#205037;border-color:#a9cdb8}
.compact-round-links button.yellow,.compact-round-links button.neutral{background:var(--status-wait);color:#68500b;border-color:#e8dcbb}
.compact-round-links button.orange{background:var(--status-action);color:#783b08;border-color:#e4ac73}
.compact-round-links button.red{background:var(--status-error);color:#8c2117;border-color:#e8bdb7}
.compact-round-links button[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 -3px 0 var(--green);font-weight:800}
.compact-round-nav>.round-back{flex-shrink:0;white-space:nowrap;font-size:11px}
.inspection .workflow-panel{scroll-margin-top:70px}
@media(max-width:750px){.compact-round-nav{padding:5px;gap:4px}.compact-round-links button{font-size:10px;padding:7px}.compact-round-nav>.round-back{padding:7px}}
:root{--status-success:#dcf0e4;--status-wait:#fff5cf;--status-action:#ffe0bb;--status-error:#fce0dd;--status-idle:#fff5cf;--body-copy:#172d35}
.filters.card{gap:10px;overflow-x:auto;overflow-y:hidden;padding-top:14px;padding-bottom:12px}
.filters.card>label{flex:1 0 104px;min-width:104px;font-size:11px;line-height:1.4}
.filters.card .multi-filter-trigger{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;padding-right:22px;font-size:12px}
.filters.card .filter-clear{width:24px;min-width:24px;height:24px;min-height:24px;max-height:24px;right:-5px;top:9px;font-size:17px}
.filters.card .filter-actions{gap:8px;align-items:center}
.filter-count{font-size:11px;white-space:nowrap}
.filter-feedback{min-height:22px;margin:-8px 2px 5px;font-size:12px;color:#50636a}
.filter-feedback button{padding:2px 8px;min-height:26px;font-size:12px}
.results-summary{font-size:12px;color:#5b7075;margin:0 2px 8px}
#order-results[aria-busy=true]{opacity:.65;pointer-events:none}
#order-results{transition:opacity .12s ease}
.multi-filter-menu{max-width:calc(100vw - 16px);z-index:20}
.multi-filter-menu label{min-height:36px;font-size:13px;line-height:1.35}
.multi-filter-menu input[type=checkbox]{width:18px;height:18px;min-height:18px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #166b5b;outline-offset:3px}
.order-card .secondary-column{color:#6b7b80;font-size:11px}
.order-card .date-caption{display:block;font-size:11px;font-weight:500;line-height:1.35;margin-top:3px;color:#53696e}
.order-card .inspection-overdue .date-caption{color:#9a3027;font-weight:650}
.order-card .compact-workflow{grid-auto-columns:minmax(168px,1fr);gap:8px;align-items:stretch;overflow-x:auto}
.order-card .compact-workflow .stage-link{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:7px 8px;min-height:76px;min-width:0;border:1px solid #d0ddda;border-radius:7px;text-align:center;line-height:1.25;box-shadow:none}
.order-card .compact-workflow .stage-link .stage-title{display:block;margin:0;font-size:12px;line-height:1.3;font-weight:700;color:#243d3a;width:100%;white-space:normal;overflow-wrap:normal}
.order-card .compact-workflow .stage-title>span{display:block;font:inherit;overflow-wrap:normal;word-break:normal}
.order-card .compact-workflow .stage-status{display:block;font-size:11px;font-weight:500;line-height:1.25;overflow-wrap:break-word;word-break:normal;color:#334b46}
.order-card .compact-workflow .stage-status>span:not(.bi-copy){display:inline;font:inherit;overflow-wrap:normal}
.order-card .compact-workflow .stage-link span::before{content:none;margin:0}
.order-card .compact-workflow .stage-link .stage-status,.order-card .compact-workflow .stage-link .stage-status span{font-size:11px;font-weight:500;line-height:1.3}
.order-card .compact-workflow .bi-copy,.order-card .compact-workflow .bi-en,.order-card .compact-workflow .bi-zh{font:inherit;color:inherit;margin:0}
.order-card .compact-workflow .stage-link.green{background:var(--status-success);border-color:#c9ddd1}
.order-card .compact-workflow .stage-link.yellow{background:var(--status-wait);border-color:#e8dcbb}
.order-card .compact-workflow .stage-link.red{background:var(--status-error);border-color:#e8bdb7}
.order-card .compact-workflow .stage-link.red .stage-status{color:#992c21;font-weight:650}
.order-card .compact-workflow .stage-link.neutral{background:var(--status-idle);border-color:#b6bdc9}
.order-card .compact-workflow .stage-link:hover{border-color:#26765f;box-shadow:inset 0 0 0 1px #26765f}
.flow-attention{font-size:12px;line-height:1.4;gap:5px 9px;color:#3e5359;align-items:baseline;margin-top:7px}
.flow-attention .attention-label{font-weight:700;color:#285b51}
.workflow-tab.neutral{background:#e7edeb;color:#34544c;border:1px solid #b9ccc6;border-top:4px solid #bed0c9;border-radius:12px 12px 0 0}
.workflow-tab.neutral[aria-selected=true]{background:#f0f8f5;border-color:#145f54;border-top-width:5px}
.workflow-tab.neutral:not([aria-selected=true]){border-bottom:2px solid var(--green)}
.workflow-tab.neutral[aria-selected=true]{background:#f0f7f4}
.workflow-tab.neutral small{background:var(--status-idle);color:#475365;border:1px solid #aeb7bf;box-sizing:border-box}
.workflow-tab small{font-size:11px;line-height:1.2;overflow-wrap:break-word;word-break:normal;color:#243d35}
.workflow-tab[id$="-date"] small,.workflow-tab[id$="-pack"] small{font-size:11px;line-height:1.2}
.workflow-tab.yellow small{background:#ffedb1;color:#66460b}
.workflow-tab.red small{background:#f8d4ce;color:#8c2117}
.workflow-tab.green small{background:#cce8d6;color:#205037}
.workflow-tab:not([aria-selected=true]){height:96px;min-height:96px;max-height:96px}
.workflow-tab[aria-selected=true]{height:102px;min-height:102px;max-height:102px}
.order-card>.shipment-stamp{max-width:62%;pointer-events:none}
@media(max-width:900px){.filters.card>label{flex-basis:116px}.order-card .compact-workflow{grid-auto-columns:minmax(180px,1fr)}.workflow-tabs{grid-auto-columns:minmax(184px,1fr)}}
@media(prefers-reduced-motion:reduce){#order-results{transition:none}}

.filters.card>label:has(select[data-multi-filter]){min-width:124px;flex-basis:124px}
.filters.card .filter-count{display:none}
.results-summary .filter-summary{margin-left:12px;color:#17614e;font-weight:650}

.order-card .compact-workflow .stage-link.neutral .stage-title,.order-card .compact-workflow .stage-link.neutral .stage-status{color:#475365}

/* Four status colours. Orange is an action; red is an exception/overdue. */
.order-card .compact-workflow .stage-link.orange{background:var(--status-action);border-color:#e4ac73}
.order-card .compact-workflow .stage-link.orange .stage-title,.order-card .compact-workflow .stage-link.orange .stage-status{color:#783b08}
.order-card .compact-workflow .stage-link.yellow .stage-title,.order-card .compact-workflow .stage-link.yellow .stage-status{color:#68500b}
.workflow-tab.orange{background:#e7edeb;color:#34544c;border:1px solid #b9ccc6;border-top:4px solid #bed0c9;border-radius:12px 12px 0 0}
.workflow-tab.orange:not([aria-selected=true]){border-bottom:2px solid var(--green)}
.workflow-tab.orange[aria-selected=true]{background:#f0f7f4;border-color:#145f54;border-top-width:5px}
.workflow-tab.orange small{background:var(--status-action);color:#783b08}
.workflow-tab.yellow small{background:var(--status-wait);color:#68500b}
.workflow-tab.red small{background:var(--status-error);color:#8c2117}

/* Small screens use labelled cards without duplicating order data. */
.round-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.round-heading-actions .round-back{white-space:nowrap;color:var(--green);border-color:var(--green)}
@media(max-width:750px){.round-heading-actions{justify-content:space-between;margin-top:8px}.round-heading-actions .round-back{font-size:11px}}
.round-purple{--green:#67448b;--round-surface:#f7f2fa;--round-line:#d7c9e2}
.order-card.round-purple{border-color:var(--round-line);border-top-color:#795698;box-shadow:0 3px 12px #54326814}
.order-card.round-purple .order-card-heading{background:#eee5f4;border-color:var(--round-line)}
.order-card.round-purple .order-card-heading a,.order-card.round-purple td>a,.round-purple .flow-heading,.round-purple .attention-label{color:#67448b}
.order-card.round-purple .workflow-row{background:var(--round-surface)}
.round-purple .primary{background:#67448b;border-color:#67448b;color:#fff}
.round-purple .primary:hover{background:#51316e}
.inspection.round-purple{border-color:var(--round-line);box-shadow:0 3px 12px #54326814}
.inspection.round-purple>.heading h2,.inspection.round-purple .flow-attention a{color:#67448b}
.inspection.round-purple .workflow-tab{background:#eae1f0;color:#594367;border-color:#c7b5d6;box-shadow:inset 0 3px 0 #cdbbdc}
.inspection.round-purple .workflow-tab:hover{background:#e1d4eb}
.inspection.round-purple .workflow-tab[aria-selected=true]{background:var(--round-surface);color:#67448b;border-color:#67448b;box-shadow:inset 0 4px 0 #67448b}
.inspection.round-purple .workflow-tab[aria-selected=true]::after{background:var(--round-surface)}
.inspection.round-purple .workflow-tab .zh{color:inherit}
.inspection.round-purple .workflow-panel{background:var(--round-surface);border-color:#67448b}
.inspection.round-purple .workflow-panel>h3:first-child{background:var(--round-surface);color:#67448b;border-color:var(--round-line)}
.inspection.round-purple .inspection-standard h4,.inspection.round-purple .sampling-card h5{color:#67448b}
.inspection.round-purple .sampling-card h5{background:#eee5f4}
.inspection.round-purple .method-agency{border-color:#c7b5d6}
/* Status badges deliberately retain green/yellow/orange/red meanings. */
@media(max-width:750px){
 .order-card .table-wrap{overflow:visible}
 .order-card table,.order-card tbody{display:block;width:100%;min-width:0}
 .order-card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .order-card .order-summary-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
 .order-card .order-summary-row>td{display:block;min-width:0;width:auto!important;padding:9px 2px;white-space:normal;overflow-wrap:anywhere}
 .order-card .order-summary-row>td::before{content:attr(data-label);display:block;margin-bottom:4px;color:#64757a;font-size:10px;font-weight:600}
 .order-card .order-summary-row>.mobile-wide{grid-column:1/-1}
 .order-card .order-summary-row>.order-actions::before{display:none}
 .order-card .product-mini{min-width:0;align-items:flex-start}
 .order-card .product-mini>span{min-width:0}
 .order-card .product-mini img{flex-shrink:0;width:54px;height:60px}
 .order-card .inspection-date-column>b{white-space:nowrap}
 .order-card .order-actions .button{display:block;text-align:center;margin:0;min-height:40px;padding:10px}
 .order-card .workflow-row,.order-card .workflow-row>td{display:block;width:100%;min-width:0}
 .order-card .workflow-row>td{padding:10px 0}
 .order-card .compact-workflow{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:6px}
 .order-card .compact-workflow .stage-link{min-height:92px;padding:7px 5px}
 .order-card .flow-attention{display:flex;flex-wrap:wrap;overflow-wrap:anywhere}
 .order-card-heading span{overflow-wrap:anywhere;text-align:right}
}
