/*
 * ══════════════════════════════════════════════════════════════════
 * tc-components.css — TrioClick Shared Component Library v1.0
 * ══════════════════════════════════════════════════════════════════
 *
 * Single source of truth for all shared UI patterns used across:
 *   • bidder-portal-03-workspace.html  (AUTHORING mode)
 *   • submission-tab.html + sec files  (PRESENTATION mode)
 *   • vendor portal, package detail, and all future surfaces
 *
 * Modes are expressed as data attributes on the section container:
 *   data-mode="edit"   → inputs, textareas, upload zones active
 *   data-mode="view"   → read-only display, no editable fields
 *
 * ──────────────────────────────────────────────────────────────────
 * INDEX
 *  1. Design Tokens
 *  2. Reset & Base
 *  3. Typography utilities
 *  4. Status chips & tags
 *  5. Section header
 *  6. Tech-card (collapsible card)
 *  7. KV rows (key-value display)
 *  8. BOQ table
 *  9. HSE metric tiles
 * 10. Track record entries
 * 11. Personnel table
 * 12. Subcontractor table
 * 13. Document rows
 * 14. Upload components (zone, pill)
 * 15. Field inputs & textareas (edit mode)
 * 16. Clarifications / chat thread
 * 17. Data table (generic)
 * 18. Notice / info bar
 * 19. Section scroll wrapper
 * 20. Attachment strip
 * ══════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────
 * 1. DESIGN TOKENS
 * ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --tc-bg:      #0f0f0f;
  --tc-bg2:     #141414;
  --tc-card:    #181818;
  --tc-card2:   #202020;
  --tc-card3:   #252525;

  /* Brand */
  --tc-orange:  #FF4C0B;
  --tc-orange2: #e04500;
  --tc-peach:   #FFC79A;

  /* Semantic */
  --tc-white:   #F6F1E7;
  --tc-muted:   #9C8880;
  --tc-muted2:  rgba(156,136,128,.45);
  --tc-green:   #7dd4a8;
  --tc-amber:   #f5c842;
  --tc-blue:    #a8c4e0;
  --tc-red:     #f87171;
  --tc-purple:  #c4b5e0;

  /* Borders */
  --tc-border:  rgba(255,255,255,.07);
  --tc-border2: rgba(255,255,255,.11);
  --tc-border-o:rgba(255,76,11,.1);

  /* Spacing scale */
  --tc-r-sm:    5px;
  --tc-r-md:    8px;
  --tc-r-lg:    10px;
}

/* ────────────────────────────────────────────────
 * 2. RESET & BASE
 * ──────────────────────────────────────────────── */
/* Global reset scoped to tc sections only, so it never affects the rest of the TrioClick app. */
.tc-sec-wrap, .tc-sec-wrap *, .tc-sec-wrap *::before, .tc-sec-wrap *::after { box-sizing: border-box; }
.tc-sec-wrap ::-webkit-scrollbar { width: 4px; height: 4px; }
.tc-sec-wrap ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* ────────────────────────────────────────────────
 * 3. TYPOGRAPHY UTILITIES
 * ──────────────────────────────────────────────── */
.tc-label {
  font-size: .57rem; font-weight: 700; color: var(--tc-muted2);
  text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: .3rem; margin-top: .65rem; display: block;
}
.tc-label:first-child { margin-top: 0; }

.tc-note {
  font-size: .62rem; color: var(--tc-muted); line-height: 1.5;
}

/* ────────────────────────────────────────────────
 * 4. STATUS CHIPS & TAGS
 * ──────────────────────────────────────────────── */
.tc-chip {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .58rem; font-weight: 700;
  padding: .12rem .4rem; border-radius: var(--tc-r-sm);
  white-space: nowrap;
}
.tc-chip svg  { width: 9px; height: 9px; }
.tc-chip--sm  { font-size: .5rem; padding: .07rem .3rem; } /* compact table chips */

.tc-chip--green   { background: rgba(125,212,168,.1);  color: var(--tc-green);  border: 1px solid rgba(125,212,168,.22); }
.tc-chip--amber   { background: rgba(245,200,66,.1);   color: var(--tc-amber);  border: 1px solid rgba(245,200,66,.2); }
.tc-chip--blue    { background: rgba(168,196,224,.1);  color: var(--tc-blue);   border: 1px solid rgba(168,196,224,.2); }
.tc-chip--red     { background: rgba(248,113,113,.1);  color: var(--tc-red);    border: 1px solid rgba(248,113,113,.2); }
.tc-chip--orange  { background: rgba(255,76,11,.1);    color: var(--tc-orange); border: 1px solid rgba(255,76,11,.2); }
.tc-chip--muted   { background: rgba(255,255,255,.06); color: var(--tc-muted);  border: 1px solid rgba(255,255,255,.1); }
.tc-chip--purple  { background: rgba(196,181,224,.1);  color: var(--tc-purple); border: 1px solid rgba(196,181,224,.18); }

.tc-tag {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .07rem .3rem; border-radius: 3px;
  font-size: .5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.tc-tag svg { width: 7px; height: 7px; }
.tc-tag--ext    { background: rgba(255,76,11,.1);    color: var(--tc-orange); border: 1px solid rgba(255,76,11,.18); }
.tc-tag--int    { background: rgba(196,181,224,.1);  color: var(--tc-purple); border: 1px solid rgba(196,181,224,.18); }
.tc-tag--init   { background: rgba(255,255,255,.05); color: var(--tc-muted);  border: 1px solid rgba(255,255,255,.08); }
.tc-tag--rev    { background: rgba(168,196,224,.08); color: var(--tc-blue);   border: 1px solid rgba(168,196,224,.15); }
.tc-tag--rr     { background: rgba(255,76,11,.08);   color: var(--tc-orange); border: 1px solid rgba(255,76,11,.15); }
.tc-tag--bafo   { background: rgba(245,200,66,.08);  color: var(--tc-amber);  border: 1px solid rgba(245,200,66,.15); }

/* ────────────────────────────────────────────────
 * 5. SECTION HEADER
 * ──────────────────────────────────────────────── */
.tc-sec-hdr { margin-bottom: .9rem; }
.tc-sec-hdr-row {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .22rem;
}
.tc-sec-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tc-sec-icon svg { width: 14px; height: 14px; }
.tc-sec-title {
  font-size: .9rem; font-weight: 800; color: var(--tc-white); letter-spacing: -.015em;
}
.tc-sec-desc {
  font-size: .67rem; color: var(--tc-muted); line-height: 1.5;
  padding-left: 2.4rem;
}

/* ────────────────────────────────────────────────
 * 6. TECH-CARD (collapsible card)
 * ──────────────────────────────────────────────── */
.tc-card {
  background: var(--tc-card); border: 1px solid var(--tc-border2);
  border-radius: var(--tc-r-lg); margin-bottom: .6rem; overflow: hidden;
}
.tc-card--inset {
  background: var(--tc-card2); border-color: var(--tc-border);
}
.tc-card-hdr {
  padding: .55rem .85rem; border-bottom: 1px solid var(--tc-border);
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; transition: background .12s; user-select: none;
}
.tc-card-hdr:hover { background: rgba(255,255,255,.02); }

.tc-card-icon {
  width: 22px; height: 22px; border-radius: var(--tc-r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; flex-shrink: 0;
}
.tc-card-icon svg { width: 12px; height: 12px; }
.tc-card-title  { font-size: .69rem; font-weight: 800; color: var(--tc-white); flex: 1; }
.tc-card-right  { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.tc-card-chev   { color: var(--tc-muted); transition: transform .18s; }
.tc-card-chev svg { width: 13px; height: 13px; }
.tc-card-chev.open { transform: rotate(180deg); }

.tc-card-body   { padding: .7rem .85rem; }
.tc-card-body.collapsed { display: none; }

/* ────────────────────────────────────────────────
 * 7. KV ROWS
 * ──────────────────────────────────────────────── */
.tc-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.03);
}
.tc-kv:last-child { border-bottom: none; }
.tc-kv-l { font-size: .64rem; color: var(--tc-muted); font-weight: 500; }
.tc-kv-v { font-size: .67rem; font-weight: 700; color: var(--tc-white); text-align: right; }
.tc-kv-v.green  { color: var(--tc-green); }
.tc-kv-v.amber  { color: var(--tc-amber); }
.tc-kv-v.red    { color: var(--tc-red); }
.tc-kv-v.muted  { color: var(--tc-muted); font-weight: 500; }

/* ────────────────────────────────────────────────
 * 8. BOQ TABLE
 * ──────────────────────────────────────────────── */
.tc-boq { width: 100%; border-collapse: collapse; font-size: .69rem; margin-bottom: .6rem; }
.tc-boq th {
  padding: .4rem .65rem; text-align: left;
  font-size: .56rem; font-weight: 700; color: var(--tc-muted);
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--tc-border); background: rgba(255,255,255,.02);
}
.tc-boq th.r { text-align: right; }
.tc-boq td   { padding: .45rem .65rem; border-bottom: 1px solid rgba(255,255,255,.035); vertical-align: middle; }
.tc-boq tbody tr:hover td { background: rgba(255,255,255,.018); }

/* Row types */
.tc-boq-group td {
  background: rgba(255,255,255,.025); font-weight: 700;
  color: rgba(246,241,231,.55); font-size: .63rem; letter-spacing: .03em;
  padding: .38rem .65rem;
}
.tc-boq-sub td {
  background: rgba(168,196,224,.04); font-weight: 700;
  color: rgba(168,196,224,.7); font-size: .61rem;
  padding: .3rem .65rem .3rem 1.4rem;
  border-bottom: 1px solid rgba(168,196,224,.08) !important;
}
.tc-boq-sub td::before { content: '↳ '; opacity: .45; font-size: .58rem; }
.tc-boq-total td {
  background: rgba(255,76,11,.06) !important; font-weight: 800;
  color: var(--tc-orange); border-top: 1px solid rgba(255,76,11,.18);
}

/* Cell types */
.tc-boq-code  { font-size: .62rem; color: var(--tc-muted); font-family: monospace; }
.tc-boq-desc  { color: var(--tc-white); font-weight: 500; }
.tc-boq-unit  { color: var(--tc-muted); text-align: center; font-size: .64rem; }
.tc-boq-qty   { text-align: right; color: var(--tc-muted); }
.tc-boq-rate  { text-align: right; font-weight: 700; color: var(--tc-blue); }
.tc-boq-total-cell { text-align: right; font-weight: 700; color: var(--tc-white); }
.tc-boq-total-cell.empty { color: rgba(156,136,128,.28); }

/* Edit mode — rate input */
[data-mode="edit"] .tc-rate-input {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--tc-r-sm); padding: .28rem .42rem;
  font-family: inherit; font-size: .7rem; color: var(--tc-white);
  outline: none; text-align: right; width: 90px; transition: .12s;
}
[data-mode="edit"] .tc-rate-input:focus        { border-color: rgba(255,76,11,.4); background: rgba(255,76,11,.04); }
[data-mode="edit"] .tc-rate-input.empty        { border-color: rgba(245,200,66,.3); }
[data-mode="edit"] .tc-rate-input::placeholder { color: rgba(156,136,128,.3); }

/* View mode — rate shown as plain text */
[data-mode="view"] .tc-rate-input { display: none; }
[data-mode="view"] .tc-rate-display { display: block; text-align: right; font-weight: 700; color: var(--tc-blue); font-size: .69rem; }
[data-mode="edit"] .tc-rate-display { display: none; }

/* BOQ footer */
.tc-boq-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; background: rgba(255,255,255,.025);
  border: 1px solid var(--tc-border2); border-radius: var(--tc-r-lg);
}
.tc-boq-stats { display: flex; gap: 1.5rem; }
.tc-boq-stat-lbl { font-size: .57rem; color: var(--tc-muted); font-weight: 600; }
.tc-boq-stat-val { font-size: .8rem; font-weight: 800; color: var(--tc-white); }
.tc-boq-stat-val.orange { color: var(--tc-orange); }
.tc-boq-stat-val.amber  { color: var(--tc-amber); }
.tc-boq-stat-val.green  { color: var(--tc-green); }

/* ────────────────────────────────────────────────
 * 9. HSE METRIC TILES
 * ──────────────────────────────────────────────── */
.tc-hse-tiles {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .45rem; margin-bottom: .65rem;
}
.tc-hse-tile {
  background: rgba(255,255,255,.025); border: 1px solid var(--tc-border);
  border-radius: var(--tc-r-md); padding: .55rem .7rem; text-align: center;
}
.tc-hse-tile.warn { border-color: rgba(248,113,113,.22); background: rgba(248,113,113,.03); }
.tc-hse-tile.good { border-color: rgba(125,212,168,.22); background: rgba(125,212,168,.03); }
.tc-hse-lbl { font-size: .56rem; font-weight: 700; color: var(--tc-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem; }
.tc-hse-val { font-size: .95rem; font-weight: 800; color: var(--tc-white); }
.tc-hse-val.green { color: var(--tc-green); }
.tc-hse-val.red   { color: var(--tc-red); }
.tc-hse-val.amber { color: var(--tc-amber); }
.tc-hse-sub { font-size: .57rem; color: var(--tc-muted); margin-top: .08rem; }

/* ────────────────────────────────────────────────
 * 10. TRACK RECORD ENTRIES
 * ──────────────────────────────────────────────── */
.tc-tr-entry {
  background: rgba(255,255,255,.02); border: 1px solid var(--tc-border);
  border-radius: var(--tc-r-md); padding: .65rem .8rem; margin-bottom: .45rem;
}
.tc-tr-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .45rem;
}
.tc-tr-name  { font-size: .73rem; font-weight: 800; color: var(--tc-white); }
.tc-tr-meta  { font-size: .6rem; color: var(--tc-muted); margin-bottom: .35rem; }
.tc-tr-del   { background: none; border: none; color: var(--tc-muted); cursor: pointer; font-size: .6rem; padding: .1rem .3rem; border-radius: 4px; font-family: inherit; }
.tc-tr-del:hover { color: var(--tc-red); }
.tc-tr-add {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .7rem; border: 1.5px dashed rgba(255,255,255,.09);
  border-radius: var(--tc-r-md); cursor: pointer;
  font-size: .68rem; font-weight: 600; color: var(--tc-muted); transition: .13s;
}
.tc-tr-add:hover { color: var(--tc-orange); border-color: rgba(255,76,11,.28); background: rgba(255,76,11,.03); }
.tc-tr-add svg { width: 13px; height: 13px; }

/* View mode: ref block inside track record */
.tc-tr-ref {
  margin-top: .3rem; padding: .32rem .52rem;
  background: rgba(255,255,255,.03); border-left: 2px solid rgba(168,196,224,.4);
  border-radius: 0 var(--tc-r-sm) var(--tc-r-sm) 0;
  font-size: .62rem; color: rgba(246,241,231,.6); line-height: 1.5;
}
.tc-tr-ref strong { color: var(--tc-white); }

/* ────────────────────────────────────────────────
 * 11. PERSONNEL TABLE & CARDS
 * ──────────────────────────────────────────────── */
.tc-p-table { width: 100%; border-collapse: collapse; font-size: .67rem; }
.tc-p-table th {
  padding: .35rem .45rem; font-size: .55rem; font-weight: 700;
  color: var(--tc-muted); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--tc-border); text-align: left;
}
.tc-p-table td { padding: .3rem .4rem; border-bottom: 1px solid rgba(255,255,255,.035); }
.tc-p-table input {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px; padding: .25rem .38rem;
  font-family: inherit; font-size: .64rem; color: var(--tc-white); outline: none; width: 100%;
}
.tc-p-table input:focus { border-color: rgba(255,76,11,.3); }

/* View mode person card */
.tc-person-card {
  background: var(--tc-card2); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--tc-r-lg); padding: .6rem .85rem;
  display: flex; gap: .62rem; align-items: flex-start; margin-bottom: .45rem;
}
.tc-person-av {
  width: 36px; height: 36px; border-radius: var(--tc-r-md);
  background: rgba(255,76,11,.15); color: var(--tc-orange);
  font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tc-person-body   { flex: 1; min-width: 0; }
.tc-person-name   { font-size: .71rem; font-weight: 800; color: var(--tc-white); margin-bottom: .04rem; }
.tc-person-role   { font-size: .61rem; color: var(--tc-muted); margin-bottom: .2rem; }
.tc-person-quals  { display: flex; gap: .26rem; flex-wrap: wrap; margin-bottom: .2rem; }
.tc-person-qual   { padding: .06rem .28rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 3px; font-size: .54rem; font-weight: 600; color: var(--tc-muted); }
.tc-person-stats  { display: flex; gap: 1rem; }
.tc-person-stat   { display: flex; flex-direction: column; gap: .03rem; }
.tc-person-stat-val { font-size: .69rem; font-weight: 800; color: var(--tc-white); }
.tc-person-stat-lbl { font-size: .51rem; color: var(--tc-muted); }

/* ────────────────────────────────────────────────
 * 12. SUBCONTRACTOR TABLE
 * ──────────────────────────────────────────────── */
.tc-sc-table { width: 100%; border-collapse: collapse; font-size: .67rem; }
.tc-sc-table th {
  padding: .35rem .45rem; font-size: .55rem; font-weight: 700;
  color: var(--tc-muted); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--tc-border); text-align: left;
}
.tc-sc-table td { padding: .3rem .4rem; border-bottom: 1px solid rgba(255,255,255,.035); vertical-align: middle; }
.tc-sc-table input, .tc-sc-table select {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px; padding: .25rem .38rem;
  font-family: inherit; font-size: .64rem; color: var(--tc-white); outline: none; width: 100%;
}

/* View mode — sc row */
.tc-sc-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .44rem .8rem; border-bottom: 1px solid rgba(255,255,255,.04);
}
.tc-sc-row:last-child { border-bottom: none; }
.tc-sc-av {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,76,11,.15); color: var(--tc-orange);
  font-size: .54rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tc-sc-name  { font-size: .66rem; font-weight: 700; color: var(--tc-white); flex: 1; }
.tc-sc-trade { font-size: .58rem; color: var(--tc-muted); }
.tc-sc-val   { font-size: .62rem; font-weight: 700; color: var(--tc-green); min-width: 88px; text-align: right; }
.tc-sc-status{ min-width: 68px; text-align: right; }

/* ────────────────────────────────────────────────
 * 13. DOCUMENT ROWS
 * ──────────────────────────────────────────────── */
.tc-doc-list { display: flex; flex-direction: column; gap: .38rem; margin-bottom: .75rem; }
.tc-doc-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .46rem .65rem; background: rgba(255,255,255,.02);
  border: 1px solid var(--tc-border); border-radius: var(--tc-r-md); transition: .12s;
}
.tc-doc-row:hover { border-color: rgba(255,255,255,.11); }
.tc-doc-row.uploaded       { border-color: rgba(125,212,168,.15);  background: rgba(125,212,168,.02); }
.tc-doc-row.missing        { border-color: rgba(248,113,113,.2);   background: rgba(248,113,113,.025); }
.tc-doc-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-doc-icon svg { width: 13px; height: 13px; }
.tc-doc-name { font-size: .69rem; font-weight: 600; color: var(--tc-white); }
.tc-doc-sub  { font-size: .59rem; color: var(--tc-muted); margin-top: .04rem; }
.tc-doc-badge { font-size: .57rem; font-weight: 700; padding: .1rem .37rem; border-radius: var(--tc-r-sm); white-space: nowrap; margin-left: auto; }
.tc-doc-badge.ok       { background: rgba(125,212,168,.1); color: var(--tc-green); }
.tc-doc-badge.required { background: rgba(248,113,113,.1); color: var(--tc-red); }
.tc-doc-badge.optional { background: rgba(255,255,255,.06); color: var(--tc-muted); }
.tc-doc-upload {
  padding: .18rem .45rem; border-radius: var(--tc-r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--tc-border2);
  color: var(--tc-muted); font-family: inherit; font-size: .6rem; font-weight: 700;
  cursor: pointer; transition: .12s;
}
.tc-doc-upload:hover { color: var(--tc-orange); border-color: rgba(255,76,11,.25); }
.tc-doc-dl {
  display: flex; align-items: center; gap: .24rem;
  padding: .22rem .52rem; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tc-r-sm);
  font-size: .6rem; font-weight: 600; color: rgba(246,241,231,.68); cursor: pointer; transition: .12s;
}
.tc-doc-dl:hover { background: rgba(255,255,255,.07); }
.tc-doc-dl:hover { background: rgba(255,255,255,.07); }
.tc-doc-dl svg { width: 9px; height: 9px; color: var(--tc-muted); }

/* ────────────────────────────────────────────────
 * 14. UPLOAD COMPONENTS
 * ──────────────────────────────────────────────── */
.tc-upload-zone {
  border: 1.5px dashed rgba(255,255,255,.1); border-radius: var(--tc-r-md);
  padding: .85rem; text-align: center; cursor: pointer; transition: .15s; margin-top: .15rem;
}
.tc-upload-zone:hover { border-color: rgba(255,76,11,.3); background: rgba(255,76,11,.025); }
.tc-upload-zone svg { width: 18px; height: 18px; color: var(--tc-muted); margin-bottom: .3rem; }
.tc-upload-lbl { font-size: .64rem; font-weight: 600; color: var(--tc-muted); }
.tc-upload-sub { font-size: .58rem; color: var(--tc-muted2); margin-top: .1rem; }

.tc-upload-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .5rem; border-radius: var(--tc-r-sm);
  border: 1px solid rgba(125,212,168,.2); background: rgba(125,212,168,.05);
  font-size: .62rem; font-weight: 600; color: var(--tc-green);
  margin-top: .35rem; cursor: pointer;
}
.tc-upload-pill svg { width: 9px; height: 9px; }

/* Hide upload zone in view mode */
[data-mode="view"] .tc-upload-zone { display: none; }
[data-mode="view"] .tc-doc-upload  { display: none; }
[data-mode="view"] .tc-tr-del      { display: none; }
[data-mode="view"] .tc-tr-add      { display: none; }
[data-mode="view"] .add-row-btn    { display: none; }

/* ────────────────────────────────────────────────
 * 15. FIELD INPUTS & TEXTAREAS (edit mode only)
 * ──────────────────────────────────────────────── */
.tc-field-row   { display: grid; grid-template-columns: 1fr 1fr;     gap: .45rem; }
.tc-field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .45rem; }

.tc-field-textarea {
  width: 100%; background: rgba(255,255,255,.03);
  border: 1px solid var(--tc-border); border-radius: 7px;
  padding: .5rem .65rem; font-family: inherit;
  font-size: .7rem; color: var(--tc-white);
  outline: none; resize: vertical; min-height: 72px; line-height: 1.55;
  transition: border-color .13s;
}
.tc-field-textarea:focus { border-color: rgba(255,76,11,.3); }
.tc-field-textarea::placeholder { color: var(--tc-muted2); }

.tc-field-input {
  width: 100%; background: rgba(255,255,255,.03);
  border: 1px solid var(--tc-border); border-radius: 7px;
  padding: .4rem .65rem; font-family: inherit;
  font-size: .7rem; color: var(--tc-white);
  outline: none; transition: border-color .13s;
}
.tc-field-input:focus { border-color: rgba(255,76,11,.3); }
.tc-field-input::placeholder { color: var(--tc-muted2); }

/* In view mode, replace textareas / inputs with prose */
[data-mode="view"] .tc-field-textarea { display: none; }
[data-mode="view"] .tc-field-input    { display: none; }
[data-mode="view"] .tc-field-prose {
  display: block; font-size: .7rem; color: rgba(246,241,231,.72); line-height: 1.78;
}
[data-mode="edit"] .tc-field-prose { display: none; }

.tc-add-row {
  display: flex; align-items: center; gap: .3rem;
  padding: .32rem .55rem; border: 1px dashed rgba(255,255,255,.08);
  border-radius: 6px; cursor: pointer; font-size: .62rem; font-weight: 600;
  color: var(--tc-muted); transition: .12s; margin-top: .35rem;
}
.tc-add-row:hover { color: var(--tc-orange); border-color: rgba(255,76,11,.22); }
.tc-add-row svg { width: 10px; height: 10px; }

/* ────────────────────────────────────────────────
 * 16. CLARIFICATIONS / CHAT THREAD
 * ──────────────────────────────────────────────── */
.tc-clr-thread { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem; }
.tc-clr-msg    { display: flex; gap: .5rem; }
.tc-clr-msg.out { flex-direction: row-reverse; }
.tc-clr-av {
  width: 26px; height: 26px; border-radius: 6px;
  font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.tc-clr-av.mine   { background: rgba(255,76,11,.18); color: var(--tc-orange); }
.tc-clr-av.system { background: rgba(168,196,224,.12); color: var(--tc-blue); }
.tc-clr-bubble { max-width: 78%; padding: .46rem .62rem; border-radius: 8px; font-size: .68rem; line-height: 1.5; }
.tc-clr-msg.in  .tc-clr-bubble { background: rgba(255,255,255,.05); border: 1px solid var(--tc-border); border-radius: 8px 8px 8px 2px; color: rgba(246,241,231,.85); }
.tc-clr-msg.out .tc-clr-bubble { background: rgba(255,76,11,.1); border: 1px solid rgba(255,76,11,.2); border-radius: 8px 8px 2px 8px; }
.tc-clr-msg.gen .tc-clr-bubble { background: rgba(168,196,224,.07); border: 1px solid rgba(168,196,224,.15); border-radius: 8px; color: rgba(246,241,231,.75); }
.tc-clr-meta   { font-size: .57rem; color: var(--tc-muted2); margin-top: .2rem; }
.tc-clr-status { display: inline-flex; align-items: center; gap: .2rem; font-size: .57rem; font-weight: 700; margin-top: .18rem; }
.tc-clr-status.answered { color: var(--tc-green); }
.tc-clr-status.pending  { color: var(--tc-amber); }
.tc-clr-compose { display: flex; gap: .45rem; align-items: flex-end; }
.tc-clr-compose textarea {
  flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--tc-border2);
  border-radius: 8px; padding: .46rem .6rem;
  font-family: inherit; font-size: .68rem; color: var(--tc-white);
  outline: none; resize: none; min-height: 54px; line-height: 1.5;
  transition: border-color .13s;
}
.tc-clr-compose textarea:focus { border-color: rgba(255,76,11,.3); }
.tc-clr-compose textarea::placeholder { color: var(--tc-muted2); }
.tc-clr-send {
  padding: .42rem .75rem; border-radius: 8px; background: var(--tc-orange);
  border: none; color: #fff; font-family: inherit; font-size: .65rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: .3rem; flex-shrink: 0; transition: .13s;
}
.tc-clr-send:hover { background: var(--tc-orange2); }
.tc-clr-send svg { width: 12px; height: 12px; }

/* ────────────────────────────────────────────────
 * 17. DATA TABLE (generic / milestones / stats)
 * ──────────────────────────────────────────────── */
.tc-tbl { width: 100%; border-collapse: collapse; font-size: .65rem; }
.tc-tbl th {
  font-size: .55rem; font-weight: 700; color: var(--tc-muted2);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .3rem .52rem; border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: right; white-space: nowrap;
}
.tc-tbl th:first-child { text-align: left; }
.tc-tbl td {
  padding: .36rem .52rem; border-bottom: 1px solid rgba(255,255,255,.03);
  color: rgba(246,241,231,.72); text-align: right; vertical-align: middle;
}
.tc-tbl td:first-child { text-align: left; font-weight: 600; color: var(--tc-white); }
.tc-tbl tr:last-child td { border-bottom: none; }
.tc-tbl tr.hl td { background: rgba(125,212,168,.05); color: var(--tc-green); font-weight: 700; }
.tc-tbl tr.hl td:first-child { color: var(--tc-green); }

/* ────────────────────────────────────────────────
 * 18. NOTICE / INFO BAR
 * ──────────────────────────────────────────────── */
.tc-notice {
  display: flex; align-items: flex-start; gap: .45rem;
  padding: .45rem .65rem; border-radius: 7px;
  font-size: .63rem; color: rgba(246,241,231,.6); line-height: 1.5;
  margin-bottom: .65rem;
}
.tc-notice svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: .04rem; }
.tc-notice--blue   { background: rgba(168,196,224,.05); border: 1px solid rgba(168,196,224,.15); }
.tc-notice--blue svg { color: var(--tc-blue); }
.tc-notice--amber  { background: rgba(245,200,66,.04); border: 1px solid rgba(245,200,66,.15); }
.tc-notice--amber svg { color: var(--tc-amber); }
.tc-notice--red    { background: rgba(248,113,113,.05); border: 1px solid rgba(248,113,113,.2); }
.tc-notice--red svg { color: var(--tc-red); }
.tc-notice--green  { background: rgba(125,212,168,.05); border: 1px solid rgba(125,212,168,.15); }
.tc-notice--green svg { color: var(--tc-green); }

/* prefill note (edit mode only) */
.tc-prefill {
  display: flex; align-items: center; gap: .45rem;
  padding: .44rem .6rem; background: rgba(168,196,224,.05);
  border: 1px solid rgba(168,196,224,.14); border-radius: 7px;
  font-size: .64rem; color: rgba(246,241,231,.6); margin-bottom: .6rem;
}
.tc-prefill svg { width: 12px; height: 12px; color: var(--tc-blue); flex-shrink: 0; }
.tc-prefill a { color: var(--tc-blue); font-weight: 700; text-decoration: none; cursor: pointer; }
[data-mode="view"] .tc-prefill { display: none; }

/* ────────────────────────────────────────────────
 * 19. SECTION SCROLL WRAPPER
 * ──────────────────────────────────────────────── */
.tc-sec-wrap {
  padding: 1rem 1.3rem;
  display: flex; flex-direction: column;
  align-items: center; gap: .8rem; min-height: 100%;
}
.tc-sec-wrap > * { max-width: 700px; width: 100%; }

/* Org chart display */
.tc-org-chart {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--tc-r-md); padding: .75rem;
  display: flex; flex-direction: column; align-items: center; gap: .52rem;
}
.tc-org-row   { display: flex; gap: .5rem; justify-content: center; }
.tc-org-box   { background: var(--tc-card2); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; padding: .36rem .58rem; text-align: center; min-width: 108px; }
.tc-org-name  { font-size: .62rem; font-weight: 700; color: var(--tc-white); }
.tc-org-role  { font-size: .54rem; color: var(--tc-muted); margin-top: .04rem; }
.tc-org-line  { width: 1px; height: 15px; background: rgba(255,255,255,.1); margin: 0 auto; }
.tc-org-hline { height: 1px; background: rgba(255,255,255,.1); width: 80%; margin: 0 auto; }

/* Gantt bars (programme view) */
.tc-gantt-row  { display: flex; align-items: center; gap: .55rem; padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.tc-gantt-row:last-child { border-bottom: none; }
.tc-gantt-lbl  { font-size: .63rem; font-weight: 600; color: rgba(246,241,231,.75); min-width: 180px; }
.tc-gantt-track{ flex: 1; height: 9px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.tc-gantt-fill { height: 100%; border-radius: 99px; background: rgba(255,76,11,.5); }
.tc-gantt-fill.done { background: rgba(125,212,168,.6); }
.tc-gantt-dur  { font-size: .57rem; color: var(--tc-muted); min-width: 50px; text-align: right; }

/* Construction sequence steps */
.tc-seq-steps { display: flex; flex-direction: column; gap: .3rem; }
.tc-seq-step  { display: flex; align-items: flex-start; gap: .52rem; padding: .36rem .52rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: 7px; }
.tc-seq-num   { width: 21px; height: 21px; border-radius: 50%; background: rgba(255,76,11,.15); color: var(--tc-orange); font-size: .56rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-seq-name  { font-size: .64rem; font-weight: 700; color: var(--tc-white); margin-bottom: .04rem; }
.tc-seq-desc  { font-size: .6rem; color: var(--tc-muted); line-height: 1.45; }

/* ────────────────────────────────────────────────
 * 20. ATTACHMENT STRIP
 * ──────────────────────────────────────────────── */
.tc-atts {
  display: flex; align-items: center; gap: .38rem; flex-wrap: wrap;
  padding-top: .58rem; border-top: 1px solid rgba(255,255,255,.05);
}
.tc-atts-lbl {
  font-size: .57rem; color: var(--tc-muted2);
  display: flex; align-items: center; gap: .22rem; flex-shrink: 0;
}
.tc-atts-lbl svg { width: 9px; height: 9px; }
.tc-att {
  display: flex; align-items: center; gap: .22rem;
  padding: .16rem .42px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tc-r-sm);
  font-size: .59rem; color: rgba(246,241,231,.68); cursor: pointer; transition: .12s;
}
.tc-att:hover { background: rgba(255,255,255,.07); }
.tc-att svg { width: 9px; height: 9px; color: var(--tc-muted); }

/* ────────────────────────────────────────────────
 * 21. VENDOR FIELD KIT
 * ──────────────────────────────────────────────── */
/* Single source of truth for the vendor-registration field look, shared by the registration
 * wizard steps (KeyPersonnel, VendorRegReferences, ...) AND the vendor self-service "fix and
 * resubmit" modals -- so a vendor fixing a flagged item sees the exact same field styling they
 * originally filled these fields in with, not a separately-maintained lookalike. */

/* Card container (KeyPersonnel's tech-card) */
.vf-card       { background: #181818; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; overflow: hidden; }
.vf-card-hdr   { padding: .6rem .9rem; border-bottom: 1px solid rgba(255,255,255,.11); }
.vf-card-title { font-size: .71rem; font-weight: 800; color: var(--tc-white); }
.vf-card-body  { padding: .75rem .9rem; }

/* Uppercase field label (KeyPersonnel's field-lbl) */
.vf-lbl            { font-size: .57rem; font-weight: 700; color: #9c8880; text-transform: uppercase; letter-spacing: .09em; margin: .65rem 0 .3rem; }
.vf-lbl:first-child{ margin-top: 0; }
.vf-lbl-optional   { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tc-muted2); }

/* Compact input/textarea (KeyPersonnel's p-table input / inline org-notes textarea) */
.vf-input-compact {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px; padding: .32rem .45rem; width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: .68rem; color: var(--tc-white); outline: none;
}
.vf-input-compact:focus { border-color: rgba(255,76,11,.3); }
.vf-textarea-compact {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: .42rem .55rem; font-family: inherit; font-size: .67rem;
  color: var(--tc-white); outline: none; resize: vertical; min-height: 58px; line-height: 1.55;
}
.vf-textarea-compact:focus { border-color: rgba(255,76,11,.3); }

/* Spacious standalone field (VendorRegReferences' pfx-form-group / pfx-form-input / form-textarea) */
.vf-form-group  { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; }
.vf-form-label  { font-size: .65rem; font-weight: 700; color: var(--tc-muted); text-transform: uppercase; letter-spacing: .06em; }
.vf-form-input {
  background: var(--tc-card2); border: 1px solid var(--tc-border2); border-radius: 7px;
  padding: .58rem .8rem; font-size: .75rem; color: var(--tc-white); font-family: inherit;
  outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.vf-form-input:focus       { border-color: rgba(255,76,11,.35); }
.vf-form-input::placeholder{ color: var(--tc-muted2); }
.vf-form-textarea {
  background: var(--tc-card2); border: 1px solid var(--tc-border2); border-radius: 7px;
  padding: .58rem .8rem; font-size: .74rem; color: var(--tc-white); font-family: inherit;
  outline: none; resize: vertical; min-height: 68px; line-height: 1.55;
  transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.vf-form-textarea:focus       { border-color: rgba(255,76,11,.35); }
.vf-form-textarea::placeholder{ color: var(--tc-muted2); }

/* Wizard footer buttons (KeyPersonnel's btn-back / btn-next, identical in VendorRegReferences) */
.vf-btn-back {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem;
  background: transparent; color: var(--tc-muted); border: 1px solid var(--tc-border2);
  border-radius: 7px; font-family: inherit; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: .12s;
}
.vf-btn-back:hover { color: var(--tc-white); border-color: rgba(255,255,255,.15); }
.vf-btn-next {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.1rem;
  background: var(--tc-orange); color: #fff; border: none; border-radius: 7px;
  font-family: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; transition: .12s;
}
.vf-btn-next:hover { background: var(--tc-orange2); }
.vf-btn-back:disabled, .vf-btn-next:disabled { opacity: .5; cursor: not-allowed; }

/* Dashed "add another item" affordances -- nav sidebar (VendorRegReferences' nav-add-btn) and
   inline row lists (VendorRegReferences' btn-add-contact / btn-remove-contact / contact-row),
   shared here so every profile-edit page that adds "+ Add X" gets the same styling instead of
   duplicating this per page (or, worse, falling back to unstyled default browser buttons/inputs). */
.nav-add-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: .5rem .7rem .65rem; padding: .48rem; border: 1px dashed rgba(255,255,255,.1);
  border-radius: 7px; font-size: .67rem; font-weight: 600; color: var(--tc-muted);
  cursor: pointer; transition: .15s; background: none; font-family: inherit; width: calc(100% - 1.4rem);
}
.nav-add-btn:hover { border-color: rgba(255,76,11,.3); color: var(--tc-orange); }
.nav-add-btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-add-contact {
  display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem;
  background: transparent; border: 1px dashed rgba(255,255,255,.1); border-radius: 7px;
  font-family: inherit; font-size: .68rem; font-weight: 600; color: var(--tc-muted);
  cursor: pointer; transition: .15s;
}
.btn-add-contact:hover { border-color: rgba(255,76,11,.3); color: var(--tc-orange); }
.btn-add-contact:disabled { opacity: .5; cursor: not-allowed; }

.btn-remove-contact {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,.06);
  background: transparent; color: var(--tc-muted2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; transition: .12s;
}
.btn-remove-contact:hover { color: var(--tc-red); border-color: rgba(248,113,113,.2); }

.contact-rows { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .65rem; }
.contact-row  { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: center; }
.contact-row-num { font-size: .6rem; font-weight: 800; color: var(--tc-muted2); margin-bottom: .25rem; }

/* ────────────────────────────────────────────────
 * UTILITY HELPERS
 * ──────────────────────────────────────────────── */
.tc-divider { height: 1px; background: var(--tc-border); margin: .5rem 0; }
.tc-sec-divider { font-size: .6rem; font-weight: 800; color: var(--tc-white); padding-bottom: .25rem; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: .3rem; }
.r { text-align: right; }
.g { color: var(--tc-green); }
.a { color: var(--tc-amber); }
.rd{ color: var(--tc-red); }