/* ═══════════════════════════════════════════════════════════════════════════
   matrix.css — TE detail header, tabs, and the evaluation matrix
   Frozen identity columns + smart horizontal scroll. Dense, legible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TE detail header ── */
.te-head{flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 22px 0}
.te-head-top{display:flex;align-items:flex-start;gap:14px}
.te-back{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);color:var(--ink-2);flex:0 0 auto}
.te-back:hover{background:var(--surface-3)}
.te-title-wrap{min-width:0;flex:1}
.te-title-wrap h1{font-size:var(--fs-18);font-weight:680;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;line-height:1.25}
.te-title-wrap h1 .num{font-family:var(--mono);font-size:var(--fs-13);font-weight:600;color:var(--brand-700);background:var(--brand-tint);padding:2px 8px;border-radius:var(--r-xs)}
.te-title-wrap .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62vw}
.te-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:var(--fs-12);color:var(--ink-3)}
.te-meta b{color:var(--ink-2);font-weight:600}
.te-head-actions{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}

/* ── Matrix tab layout ── */
.mx-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 22px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto}
.mx-bidders{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.btab{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-12);font-weight:600;color:var(--ink-2);
  transition:all var(--fast);white-space:nowrap;
}
.btab:hover{background:var(--surface-3)}
.btab.active{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btab .ota{font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-3)}
.btab.active .ota{background:rgba(255,255,255,.18);color:#fff}
.btab .ota.ok{background:var(--ok-bg);color:var(--ok)}
.btab .ota.no{background:var(--no-bg);color:var(--no)}
.btab .ota.warn{background:var(--warn-bg);color:var(--warn)}
.btab.active .ota.ok,.btab.active .ota.no,.btab.active .ota.warn{background:rgba(255,255,255,.2);color:#fff}

.mx-progress{display:flex;align-items:center;gap:9px;min-width:180px}
.mx-progress .bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.mx-progress .bar > i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill);transition:width .4s var(--ease)}
.mx-progress .txt{font-size:var(--fs-12);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.mx-filters{display:inline-flex;gap:2px;background:var(--surface-3);border-radius:var(--r-sm);padding:2px}
.mx-filters button{padding:4px 9px;border-radius:var(--r-xs);font-size:var(--fs-12);font-weight:600;color:var(--ink-3)}
.mx-filters button.active{background:var(--surface);box-shadow:var(--sh-1)}
.mx-filters button[data-f="YES"].active{color:var(--ok)}
.mx-filters button[data-f="NO"].active{color:var(--no)}
.mx-filters button[data-f="TO BE CLARIFIED"].active{color:var(--warn)}

/* ── The matrix table ── */
.mx-scroll{flex:1;min-height:0;overflow:auto;background:var(--canvas)}
table.mx{border-collapse:separate;border-spacing:0;font-size:var(--fs-12);background:var(--surface);min-width:100%}
.mx thead th{
  position:sticky;top:0;z-index:5;background:var(--surface-2);color:var(--ink-3);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;text-align:left;
  padding:7px 8px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--hair);white-space:nowrap;
}
.mx tbody td{padding:4px 8px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);vertical-align:middle;background:var(--surface)}
.mx tbody tr:hover td{background:var(--brand-50)}
.mx tbody tr.filtered-out{display:none}

/* Frozen identity columns (left) */
.mx .fz{position:sticky;z-index:4;background:var(--surface)}
.mx thead th.fz{z-index:6;background:var(--surface-2)}
.mx tbody tr:hover td.fz{background:var(--brand-50)}
.mx .c-no  {left:0;    width:42px;  text-align:center;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mx .c-pr  {left:42px; width:96px;  font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.mx .c-sap {left:138px;width:84px;  font-family:var(--mono);font-size:10.5px;color:var(--ink);font-weight:600}
.mx .c-desc{left:222px;width:260px; box-shadow:6px 0 8px -6px rgba(0,50,61,.18)}
.mx .c-desc .d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:248px}
.mx thead th.c-desc{box-shadow:6px 0 8px -6px rgba(0,50,61,.10)}

/* Scrolling data columns */
.mx .c-num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:10.5px}
.mx .c-mono{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.mx .c-cert{font-family:var(--mono);font-size:10px;color:var(--brand-700);font-weight:600;text-align:center}
.mx input.cell{width:100%;min-width:42px;height:24px;border:1px solid transparent;background:transparent;border-radius:var(--r-xs);padding:0 5px;font-size:11px}
.mx input.cell:hover{border-color:var(--line-2);background:var(--surface-2)}
.mx input.cell:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 2px var(--brand-ring)}
.mx input.cell.num{text-align:right;font-family:var(--mono)}

/* Group header tint for eval block */
.mx thead th.grp-eval{background:var(--brand-tint);color:var(--brand-800)}
.mx td.eval-cell{background:rgba(0,152,181,.025)}
.mx tbody tr:hover td.eval-cell{background:var(--brand-50)}

/* Eval selects */
.dsel{
  width:100%;min-width:78px;height:25px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--surface);font-size:11px;font-weight:600;padding:0 4px;cursor:pointer;color:var(--ink-2);
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:16px;
}
.dsel:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring);outline:none}
.dsel.v-ok{background-color:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.dsel.v-no{background-color:var(--no-bg);color:var(--no);border-color:var(--no-line)}
.dsel.v-warn{background-color:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.dsel.v-mut{background-color:var(--muted-bg);color:var(--ink-3)}

/* Final badge */
.fin{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:22px;padding:0 8px;border-radius:var(--r-xs);font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;background:var(--muted-bg);color:var(--ink-3)}
.fin.v-ok{background:var(--ok-bg);color:var(--ok)}
.fin.v-no{background:var(--no-bg);color:var(--no)}
.fin.v-warn{background:var(--warn-bg);color:var(--warn)}
.fin.v-mut{background:var(--muted-bg);color:var(--ink-3)}
.fin.empty{background:transparent;color:var(--ink-4);border:1px dashed var(--line-2)}

/* row tint by final */
.mx tr.row-NO td.fz{box-shadow:inset 3px 0 0 var(--no)}
.mx tr.row-YES td.c-no{color:var(--ok)}

/* Phase bottom bar */
.phase-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:11px 22px;background:var(--surface);border-top:1px solid var(--line)}
.phase-bar .info{font-size:var(--fs-12);color:var(--ink-3)}
.phase-bar .grow{flex:1}

/* Stock cell mini */
.mx .stock-pos{color:var(--ok);font-weight:600;cursor:pointer;text-decoration:underline dotted}
.mx .stock-no{color:var(--ink-4)}
.mx .cancel-badge{display:inline-block;padding:1px 6px;border-radius:var(--r-xs);background:var(--no);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.04em;cursor:pointer}