@import url("./machine-calendar.css");

/* Machine calendar, production queue, dispatch list and operations dialogs (lot, task, shipment, GLS).
   Screen composition owned by this area. Tokens and shared components come from design.css;
   no !important, no #workspace ID selectors, no reserved min-heights. */

/* Shared operations helpers */
.ops-num{font-variant-numeric:tabular-nums}
.ops-nowrap{white-space:nowrap}
.ops-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ops-cell>.cell-secondary{margin:0}

/* ---------- Production queue (operations.queue) ---------- */
.queue-filters+.admin-workspace{margin-top:var(--space-section)}
[data-screen-id="operations.queue"]{gap:var(--space-section)}
.queue-filters>.panel-body{container-type:inline-size;display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-card)}
.queue-views{display:flex;min-width:0}
.queue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);min-width:0}
.queue-toolbar>.queue-views{flex:1 1 auto}
.queue-toolbar>.queue-calendar-link{flex:0 0 auto;margin-right:0}
.queue-view-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px var(--space-4);min-width:0}
.queue-calendar-link{margin-right:-10px;color:var(--accent)}
.queue-calendar-link:hover{background:var(--accent-soft);color:var(--accent-hover)}
.queue-view-note{flex:1 1 280px;margin:0;font-size:var(--text-sm)}
.queue-filters form.stack{gap:var(--space-2)}
.queue-filter-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:var(--space-2) var(--space-3)}
.queue-filter-row>.field{margin:0}
.queue-filter-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.queue-filter-help{margin:0;font-size:var(--text-xs);line-height:1.4}
.queue-filter-details{min-width:0;border-top:1px solid var(--line-soft)}
.queue-filter-details>summary{display:flex;align-items:center;gap:4px;min-height:44px;font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.queue-filter-details[open]>summary{margin-bottom:var(--space-2)}
.queue-filter-details>summary>small{margin-left:auto;font-size:var(--text-xs);font-weight:400;color:var(--muted)}
@container (max-width:819px){
 .queue-filter-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .queue-filter-actions{grid-column:1/-1}
}
/* Status and owner keep their selected value readable at medium widths (they take two tracks each). */
@container (min-width:560px) and (max-width:819px){.queue-filter-row>:nth-child(-n+2){grid-column:span 2}}
@container (min-width:820px) and (max-width:959px){
 .queue-filter-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .queue-filter-row>:nth-child(-n+2){grid-column:span 2}
 .queue-filter-actions{grid-column:1/-1}
}
@container (max-width:559px){
 .queue-toolbar{flex-wrap:wrap}
 .queue-toolbar>.queue-views{flex-basis:100%}
 .queue-toolbar>.queue-calendar-link{min-height:44px;padding-inline:0}
 .queue-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .queue-filter-actions>.btn{flex:1 1 0}
}
/* Phones: state and owner get full width so the selected value stays readable; the two dates stay paired. */
@container (max-width:419px){
 .queue-filter-row>:nth-child(-n+2){grid-column:1/-1}
}
/* Very narrow: the date fields too get full width so the RRRR-MM-DD placeholder is not cut. */
@container (max-width:279px){
 .queue-filter-row{grid-template-columns:minmax(0,1fr)}
}
.queue-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--space-4);padding:10px var(--space-card);border-bottom:1px solid var(--line)}
.queue-head>h2{margin:0;font-size:var(--text-lg);font-weight:650;letter-spacing:-.15px;line-height:1.35}
.queue-head>p{margin:0;font-size:var(--text-xs);line-height:1.4}
.queue-summary{container-type:inline-size}
.queue-summary-details{border-top:1px solid var(--line-soft)}
.queue-summary-details>summary{display:flex;align-items:center;gap:4px;min-height:44px;padding:6px var(--space-card);font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.queue-summary-details>summary:focus-visible{outline-offset:-3px}
.queue-summary-details>summary>small{margin-left:auto;font-size:var(--text-xs);font-weight:400;color:var(--muted)}
.queue-summary-details>p{margin:0;padding:0 var(--space-card) var(--space-2);font-size:var(--text-xs);color:var(--muted)}
.queue-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.queue-metric{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-width:0;padding:10px var(--space-card);border-right:1px solid var(--line-soft)}
.queue-metric:last-child{border-right:0}
.queue-metric>span{font-size:var(--text-sm);font-weight:600;line-height:1.35;color:var(--muted)}
.queue-metric>strong{font-size:var(--text-2xl);line-height:1.1;letter-spacing:-.4px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--navy)}
.queue-pipeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-soft);background:var(--surface-2)}
.queue-pipeline>.queue-count{padding:7px var(--space-card);border-right:1px solid var(--line-soft)}
.queue-pipeline>.queue-count:last-child{border-right:0}
.queue-pipeline>[data-count="available"]{background:var(--accent-soft);color:#2c5faa}
.queue-count{display:flex;align-items:baseline;gap:4px;min-width:0;font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.queue-count-label{min-width:0;overflow-wrap:break-word}
.queue-count>strong{margin-left:auto;font-size:var(--text-sm);color:var(--ink);white-space:nowrap}
.queue-count>strong>small{font-size:var(--text-xs);font-weight:400;color:var(--muted)}
.queue-pipeline>[data-count="available"]>strong{color:var(--accent)}
@container (max-width:879px){
 .queue-pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}
 .queue-pipeline>.queue-count:nth-child(3){border-right:0}
 .queue-pipeline>.queue-count:nth-child(-n+3){border-bottom:1px solid var(--line-soft)}
}
@container (max-width:519px){
 .queue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .queue-metric>strong{font-size:var(--text-xl)}
 .queue-metric:nth-child(2){border-right:0}
 .queue-metric:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
 .queue-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
 .queue-pipeline>.queue-count{padding-inline:var(--space-3)}
 .queue-pipeline>.queue-count:nth-child(3){border-right:1px solid var(--line-soft)}
 .queue-pipeline>.queue-count:nth-child(even){border-right:0}
 .queue-pipeline>.queue-count:nth-child(-n+4){border-bottom:1px solid var(--line-soft)}
}
/* Very narrow: counts may wrap rather than overflow, but the tracks first try to keep 'N ks' on the label line. */
@container (max-width:339px){
 .queue-count{white-space:normal}
 .queue-pipeline>.queue-count{padding-inline:var(--space-2)}
}
.queue-list .queue-empty{padding:var(--space-3) var(--space-card)}
.queue-list .queue-empty>p{margin:0}
.queue-list .product-list-pager{padding:8px var(--space-card)}
/* Five consistent work columns: case, plan, quantities, tasks/delivery and the next action.
   Narrow panels use the same DOM order with labelled groups; quantities never disappear. */
[data-screen-id="operations.queue"] .queue-table{container-type:inline-size;overflow:visible}
.queue-table .data-table{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,.95fr) minmax(144px,max-content);column-gap:var(--space-4);white-space:normal;font-size:var(--text-md)}
.queue-table .data-table :is(thead,tbody){display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.queue-table .data-table tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;column-gap:var(--space-4);row-gap:var(--space-2);align-items:start;padding:12px var(--space-card);border-bottom:1px solid var(--line-soft)}
.queue-table .data-table tbody tr:last-child{border-bottom:0}
.queue-table .data-table thead tr{padding-block:8px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.queue-table .data-table :is(th,td){display:block;min-width:0;padding:0;border:0;background:none;overflow-wrap:anywhere;vertical-align:top}
.queue-table .data-table th{font-size:var(--text-xs);line-height:1.35;color:var(--muted)}
.queue-table .data-table td{color:var(--ink-2);line-height:1.4}
.queue-table .badge{white-space:normal}
.queue-identity{display:flex;align-items:center;gap:10px;min-width:0}
.queue-preview{position:relative;flex:0 0 40px}
.queue-preview .model-visual.small{width:40px;height:40px}
.queue-preview .model-visual.small>svg.icon{width:20px;height:20px}
.queue-preview-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.queue-name{display:flex;flex-direction:column;min-width:0}
.queue-name>.text-link{font-size:var(--text-md);overflow-wrap:normal}
.queue-muted{font-size:var(--text-xs);color:var(--muted)}
.queue-row-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--space-2);margin-top:var(--space-2)}
.queue-plan,.queue-service{display:grid;gap:6px;min-width:0;margin:0}
.queue-plan>div{display:grid;gap:1px;min-width:0}
.queue-plan dt{font-size:var(--text-xs);color:var(--muted)}
.queue-plan dd{margin:0;font-size:var(--text-sm)}
.queue-plan>div:first-child dd{font-weight:650;color:var(--ink)}
.queue-plan strong{font-weight:650;font-variant-numeric:tabular-nums}
.queue-service>span{font-size:var(--text-sm)}
.queue-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px var(--space-3);min-width:0}
.queue-table .queue-count{min-width:0;white-space:normal;overflow-wrap:break-word}
.queue-counts>[data-count="available"]{color:var(--accent)}
.queue-counts>[data-count="available"]>strong{color:var(--accent)}
.queue-tasks{display:flex;flex-direction:column;gap:1px}
.queue-tasks>strong{font-size:var(--text-sm);color:var(--ink)}
.queue-tasks>ul{margin:0;padding:0;list-style:none;font-size:var(--text-xs);color:var(--ink-2)}
.queue-next-step{flex-direction:column;align-items:stretch;gap:6px}
.queue-table td:last-child .btn{min-height:var(--control-height-sm);padding:5px 12px;white-space:normal}
/* At medium widths, retain a compact work row: identity/action above three labelled fact groups. */
@container (max-width:1039px){
 .queue-table .data-table{grid-template-columns:repeat(3,minmax(0,1fr))}
 .queue-table .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .queue-table .data-table tbody tr{row-gap:var(--space-3)}
 .queue-table .data-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:var(--text-xs);font-weight:600;color:var(--muted)}
 .queue-table .data-table td:is(:first-child,:last-child)::before{display:none}
 .queue-table .data-table td:nth-child(1){grid-column:1/3;grid-row:1}
 .queue-table .data-table td:nth-child(2){grid-column:1;grid-row:2}
 .queue-table .data-table td:nth-child(3){grid-column:2;grid-row:2}
 .queue-table .data-table td:nth-child(4){grid-column:3;grid-row:2}
 .queue-table .data-table td:nth-child(5){grid-column:3;grid-row:1}
}
/* Phones: identity, paired context, all six quantities, then actions. No horizontal table scroll. */
@container (max-width:599px){
 .queue-table .data-table{grid-template-columns:repeat(2,minmax(0,1fr))}
 .queue-table .data-table td:nth-child(1){grid-column:1/-1;grid-row:1}
 .queue-table .data-table td:nth-child(2){grid-column:1;grid-row:2}
 .queue-table .data-table td:nth-child(3){grid-column:1/-1;grid-row:3}
 .queue-table .data-table td:nth-child(4){grid-column:2;grid-row:2}
 .queue-table .data-table td:nth-child(5){grid-column:1/-1;grid-row:4}
 .queue-next-step{flex-direction:row}
 .queue-next-step .btn{flex:1 1 0}
}
@container (max-width:339px){.queue-next-step{flex-direction:column}}
@media(max-width:699px){.queue-table td:last-child .btn{min-height:44px}}