/* ── FastFlowTrack — Components ────────────────────────────────────────────── */

/* ── Work Order Grid Cards ───────────────────────────────────────────────── */
.wo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 9px; }

.wo-card           { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px; cursor: pointer; transition: border-color .15s; position: relative; overflow: hidden; }
.wo-card::before   { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.wo-card.pu::before { background: var(--red);    }
.wo-card.ph::before { background: var(--orange); }
.wo-card.pn::before { background: var(--blue);   }
.wo-card.pl::before { background: var(--hint);   }
.wo-card:hover     { border-color: var(--border3); }
.wo-card.sel       { border-color: var(--amber); }

.wc-top    { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 7px; padding-left: 7px; }
.wc-wo     { font-family: var(--mono); font-size: 11.7px; color: var(--hint); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px; }
.wc-title  { font-size: 16.9px; font-weight: 600; line-height: 1.3; }
.wc-cust   { font-size: 14.3px; color: var(--muted); margin-top: 1px; }
.wc-foot   { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 1px solid var(--border); padding-left: 7px; }

/* Op pills on cards */
.op-strip  { padding-left: 7px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.op-pill   { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; background: var(--bg3); border: 1px solid var(--border); }
.op-pill.oa { border-color: var(--amber); background: var(--amber-bg); }
.op-pill.od { border-color: var(--border); background: var(--bg3); opacity: .55; }
.op-pill.oh { border-color: var(--red);   background: var(--red-bg); }
.op-seq    { font-family: var(--mono); font-size: 11.7px; color: var(--hint); width: 14px; flex-shrink: 0; text-align: center; }
.op-name   { font-size: 14.3px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa .op-name { color: var(--amber-t); }
.od .op-name { color: var(--hint); text-decoration: line-through; }
.oh .op-name { color: var(--red-t); }
.op-sdot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.op-mach   { font-family: var(--mono); font-size: 11.7px; color: var(--muted); flex-shrink: 0; }
.op-thrs   { font-family: var(--mono); font-size: 11.7px; flex-shrink: 0; }
.op-thrs.over { color: var(--red-t);   }
.op-thrs.good { color: var(--green-t); }
.op-thrs.none { color: var(--hint);    }

/* Mini progress bar (list view) */
.pbsm       { width: 52px; height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.pbsm-fill  { height: 100%; border-radius: 2px; background: var(--amber); }
.pbsm-fill.done { background: var(--green); }
.pct-lbl    { font-family: var(--mono); font-size: 13px; color: var(--muted); width: 30px; text-align: right; }

/* ── Work Order List Rows ─────────────────────────────────────────────────── */
.wo-list-wrap { display: flex; flex-direction: column; gap: 4px; }

.wo-lr           { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 11px; cursor: pointer; transition: border-color .12s; position: relative; overflow: hidden; }
.wo-lr::before   { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.wo-lr.pu::before { background: var(--red);    }
.wo-lr.ph::before { background: var(--orange); }
.wo-lr.pn::before { background: var(--blue);   }
.wo-lr.pl::before { background: var(--hint);   }
.wo-lr:hover     { border-color: var(--border3); }

.lr-wo           { font-family: var(--mono); font-size: 11.7px; color: var(--hint); width: 58px; flex-shrink: 0; padding-left: 6px; letter-spacing: .04em; }
.lr-info         { flex: 1; min-width: 0; }
.lr-info .lt     { font-size: 15.6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-info .lc     { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.lr-cop          { flex: 1; min-width: 0; max-width: 160px; }
.lr-cop .cn      { font-size: 14.3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-cop .cm      { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.lr-right        { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Operation Rows (detail panel) ──────────────────────────────────────── */
.op-rows    { display: flex; flex-direction: column; gap: 5px; }
.op-row     { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.op-row.ora { border-color: var(--amber); }
.op-row.orh { border-color: var(--red);   }
.op-row.ord { opacity: .65;               }

.op-row-hdr        { display: flex; align-items: center; gap: 6px; padding: 7px 9px; cursor: pointer; user-select: none; }
.op-row-hdr:hover  { background: var(--bg4); }

.drag-h            { cursor: grab; color: var(--hint); font-size: 14.3px; flex-shrink: 0; }
.drag-h:active     { cursor: grabbing; }
.op-row.dragging   { opacity: .35; border-style: dashed; }
.op-row.drag-over  { border-color: var(--amber); border-style: dashed; }

.or-seq            { font-family: var(--mono); font-size: 11.7px; color: var(--hint); width: 16px; text-align: center; flex-shrink: 0; }
.or-name           { font-size: 15.6px; font-weight: 600; flex: 1; }
.ora .or-name      { color: var(--amber-t); }
.orh .or-name      { color: var(--red-t);   }
.ord .or-name      { color: var(--hint); text-decoration: line-through; }
.or-chev           { font-size: 13px; color: var(--hint); transition: transform .15s; flex-shrink: 0; }
.or-chev.open      { transform: rotate(90deg); }

.or-body           { padding: 8px 9px 9px; border-top: 1px solid var(--border); display: none; flex-direction: column; gap: 7px; }
.or-body.open      { display: flex; }

.odg               { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.odg-f             { display: flex; flex-direction: column; gap: 2px; }
.odg-lbl           { font-family: var(--mono); font-size: 11.7px; color: var(--hint); text-transform: uppercase; letter-spacing: .06em; }
.odg-val           { font-family: var(--mono); font-size: 14.3px; font-weight: 500; color: var(--text); }
.odg-val.over      { color: var(--red-t);   }
.odg-val.good      { color: var(--green-t); }
.odg-val.none      { color: var(--hint);    }

.op-st-row         { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.op-act-row        { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.op-notes-a        { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg4); color: var(--text); font-size: 13px; font-family: var(--mono); resize: vertical; min-height: 48px; outline: none; }
.op-notes-a:focus  { border-color: var(--amber); }

/* ── Operation Builder (new WO form) ─────────────────────────────────────── */
.ops-builder { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.ob-row      { display: grid; grid-template-columns: 20px 1fr 130px 100px 20px; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; }
.ob-seq      { font-family: var(--mono); font-size: 11.7px; color: var(--hint); width: 14px; text-align: center; flex-shrink: 0; }
.ob-name     { flex: 1; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg4); color: var(--text); font-size: 14.3px; font-family: var(--mono); outline: none; }
.ob-name:focus   { border-color: var(--amber); }
.ob-machine  { width: 130px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg4); color: var(--text); font-size: 14.3px; font-family: var(--mono); outline: none; cursor: pointer; }
.ob-est      { width: 58px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg4); color: var(--text); font-size: 14.3px; font-family: var(--mono); outline: none; }
.ob-rm       { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--hint); border-radius: 3px; flex-shrink: 0; font-size: 18.2px; line-height: 1; }
.ob-rm:hover { background: var(--red-bg); color: var(--red-t); }

/* Op presets */
.presets    { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.preset-btn { padding: 3px 8px; border-radius: 3px; font-size: 13px; font-family: var(--mono); border: 1px solid var(--border); background: var(--bg3); color: var(--muted); cursor: pointer; transition: background .1s; }
.preset-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }