/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #060c18;
  --row-a:    #0b1425;
  --row-b:    #0e1a2e;
  --header-bg:#080f1e;
  --border:   #1a2740;
  --text:     #f8fafc;
  --sub:      #94a3b8;
  --red:      #f87171;
  --red-bg:   rgba(239,68,68,.15);
  --amber:    #fbbf24;
  --amber-bg: rgba(251,191,36,.12);
  --green:    #4ade80;
  --green-bg: rgba(74,222,128,.1);
  --gold:     #f59e0b;
  --primary:  #3b82f6;
}

html, body {
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  /* Some Android WebViews (Fully Kiosk's underlying engine included) boost
     text size independent of the viewport zoom fix in tv.html — belt and
     suspenders against the same "why is this zoomed in" symptom. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Header ──────────────────────────────────────────────────────── */
.tv-header {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 40px;
  background: var(--header-bg);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  gap: 28px;
}
.tv-logo { height: 72px; object-fit: contain; flex-shrink: 0; }

.tv-title {
  flex: 1;
  font-size: 26px; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); text-align: center;
}

.tv-header-clock {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; min-width: 190px;
}
.tv-time { font-size: 28px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tv-date { font-size: 13px; color: var(--sub); font-weight: 500; margin-top: 1px; }

/* ── Stats Bar ───────────────────────────────────────────────────── */
.tv-stats {
  display: flex;
  align-items: stretch;
  height: 66px;
  background: var(--header-bg);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.tv-stat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid var(--border);
  gap: 2px;
}
.tv-stat:last-child { border-right: none; }
.tv-stat-val {
  font-size: 30px; font-weight: 900;
  color: var(--primary); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tv-stat-val.warn { color: var(--amber); }
.tv-stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sub);
}

/* ── Out on Walkthrough Today ────────────────────────────────────── */
.tv-outtoday {
  flex-shrink: 0;
  background: linear-gradient(135deg, #00191c 0%, #002a30 45%, #00191c 100%);
  border-bottom: 2px solid #0e7490;
  padding: 10px 36px 12px;
}
.tv-outtoday-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: #22d3ee; text-transform: uppercase; margin-bottom: 8px;
}
.tv-outtoday-list {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.tv-outtoday-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.3);
  border-radius: 10px; padding: 7px 16px 7px 8px;
}
.tv-outtoday-avatars { display: flex; }
.tv-outtoday-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
  border: 2px solid #00191c; flex-shrink: 0;
}
.tv-outtoday-avatar + .tv-outtoday-avatar { margin-left: -6px; }
.tv-outtoday-body { line-height: 1.25; }
.tv-outtoday-names { font-size: 15px; font-weight: 800; color: #ecfeff; }
.tv-outtoday-meta { font-size: 12.5px; color: #67e8f9; font-weight: 600; }

/* ── Table Header ────────────────────────────────────────────────── */
.tv-table-head {
  display: grid;
  grid-template-columns: 72px 1fr 90px 100px 130px 260px 170px;
  column-gap: 16px;
  align-items: center;
  padding: 0 24px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}
.tv-th {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sub);
}
.tv-th.center { text-align: center; }
.tv-th.right  { text-align: right; }
.tv-th-range {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: none; color: var(--primary); margin-left: 10px;
  opacity: .85;
}

/* ── Scrolling Rows ──────────────────────────────────────────────── */
.tv-rows-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.tv-rows {
  position: absolute; top: 0; left: 0; right: 0;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

/* ── Bid Row ─────────────────────────────────────────────────────── */
.tv-row {
  display: grid;
  grid-template-columns: 72px 1fr 90px 100px 130px 260px 170px;
  column-gap: 16px;
  align-items: center;
  padding: 12px 24px;
  height: 108px;
  border-bottom: 1px solid var(--border);
  border-left: 5px solid transparent;
  transition: background .2s;
}
.tv-row:nth-child(odd)  { background: var(--row-a); }
.tv-row:nth-child(even) { background: var(--row-b); }
.tv-row.overdue { animation: pulse-border 2s ease-in-out infinite; }

@keyframes pulse-border {
  0%,100% { border-left-color: rgba(239,68,68,.4); }
  50%      { border-left-color: rgba(239,68,68,1); }
}

/* Estimator avatar */
.tv-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}

/* Project name + sub-estimator chips, side by side — the chips fill the
   gap between the project name and the Type column instead of leaving it
   dead, and instead of stacking below the name and growing the row. */
.tv-proj {
  display: flex; align-items: center; gap: 28px;
  overflow: hidden;
}
.tv-proj-main { flex-shrink: 0; max-width: 340px; overflow: hidden; }
.tv-proj-name {
  font-size: 22px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.tv-proj-cust {
  font-size: 14px; color: var(--sub); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-proj-type {
  font-size: 12px; color: var(--primary); margin-top: 3px;
  font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Type badge */
.tv-type {
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 6px;
  display: inline-block; text-align: center;
}
.tv-type.bid  { background: rgba(59,130,246,.2); color: #93c5fd; border: 1px solid rgba(59,130,246,.4); }
.tv-type.co   { background: rgba(251,191,36,.2);  color: #fde68a; border: 1px solid rgba(251,191,36,.4); }
.tv-type.walk { background: rgba(34,211,238,.18); color: #67e8f9; border: 1px solid rgba(34,211,238,.4); }

/* Multiple avatars in one row (walk-through with several assignees) —
   sized/overlapped to still fit inside the 96px avatar column even at 3. */
.tv-avatars { display: flex; flex-shrink: 0; width: 72px; }
.tv-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
  border: 2px solid var(--row-a); flex-shrink: 0;
}
.tv-avatars .tv-avatar-sm + .tv-avatar-sm { margin-left: -13px; }
.tv-avatar-more {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--sub);
  background: var(--border); border: 2px solid var(--row-a);
  flex-shrink: 0; margin-left: -13px;
}

/* Sub-estimators — every one, as compact avatar+name+scope chips filling
   the gap between the project name and the Type column. Wraps to a second
   line within the row on the rare bid with several sub-estimators rather
   than truncating anyone off the board. */
.tv-subest {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; flex: 1; min-width: 0;
}
.tv-subest-chip { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.tv-subest-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.tv-subest-text { line-height: 1.2; }
.tv-subest-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.tv-subest-scope {
  font-size: 11px; font-weight: 600; color: var(--sub); margin-top: 1px;
  white-space: nowrap;
}

/* Amount */
.tv-amount {
  font-size: 18px; font-weight: 700; color: var(--sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* RFI Due / Walkthrough columns — real dedicated deadline columns, not
   folded into one catch-all Details cell. */
.tv-rfi-cell {
  font-size: 14px; font-weight: 700; color: #c4b5fd;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tv-rfi-cell.empty { color: var(--sub); font-weight: 500; opacity: .5; }
.tv-walk-cell { display: flex; justify-content: flex-end; }
.tv-walk-pill-sm {
  background: rgba(34,211,238,.14); color: #67e8f9; border: 1px solid rgba(34,211,238,.4);
  font-size: 13px; font-weight: 800; line-height: 1.15; padding: 5px 10px;
  border-radius: 8px; display: flex; flex-direction: column; align-items: center;
  white-space: nowrap;
}
.tv-walk-pill-sm .tv-walk-pill-time { font-size: 10px; font-weight: 700; color: #a5f3fc; }

/* Details — its own left-aligned column with real width, so it lines up
   cleanly under its header and site-company names don't need to truncate
   into an unreadable "…". */
.tv-details-cell {
  font-size: 14px; font-weight: 600; color: var(--sub);
  text-align: left; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Due date */
.tv-due {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
.tv-due-pill {
  padding: 8px 18px; border-radius: 8px;
  font-size: 20px; font-weight: 900;
  white-space: nowrap; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tv-due-pill.red    { background: var(--red-bg);   color: var(--red);   border: 1px solid rgba(239,68,68,.4); }
.tv-due-pill.amber  { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(251,191,36,.4); }
.tv-due-pill.green  { background: var(--green-bg); color: var(--green); border: 1px solid rgba(74,222,128,.3); }
.tv-due-pill.none   { background: transparent;     color: var(--sub);   border: 1px solid var(--border); }
.tv-walk-pill {
  background: rgba(34,211,238,.14); color: #67e8f9; border: 1px solid rgba(34,211,238,.4);
  font-size: 16px; line-height: 1.15; padding: 6px 14px;
  display: flex; flex-direction: column; align-items: center;
}
.tv-walk-pill-time { font-size: 12px; font-weight: 700; color: #a5f3fc; }

/* Empty state */
.tv-empty {
  display: flex; align-items: center; justify-content: center;
  height: 200px; font-size: 20px; color: var(--sub);
}

/* ── Page indicator ──────────────────────────────────────────────── */
.tv-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; height: 28px; flex-shrink: 0;
  background: var(--header-bg);
  border-top: 1px solid var(--border);
}
.tv-pager-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); transition: background .3s;
}
.tv-pager-dot.active { background: var(--primary); }

/* ── Wins Banner ─────────────────────────────────────────────────── */
.tv-wins {
  flex-shrink: 0;
  min-height: 120px;
  background: linear-gradient(135deg, #1c0d00 0%, #2d1500 40%, #1c0d00 100%);
  border-top: 2px solid #92400e;
  padding: 14px 36px;
  position: relative; overflow: hidden;
}
.tv-wins::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(245,158,11,.08) 0%, transparent 70%);
  pointer-events: none;
}
.tv-wins-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  color: #d97706; text-transform: uppercase; margin-bottom: 8px;
}
.tv-wins-stage { position: relative; height: 60px; }
.tv-win-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 24px;
  opacity: 0; transition: opacity .7s ease;
}
.tv-win-item.active { opacity: 1; }
.tv-win-icon { font-size: 36px; flex-shrink: 0; }
.tv-win-body { flex: 1; min-width: 0; }
.tv-win-name {
  font-size: 26px; font-weight: 800; color: #fef3c7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-win-meta { font-size: 14px; color: #fcd34d; margin-top: 4px; font-weight: 600; }
.tv-win-amt {
  font-size: 38px; font-weight: 900; color: var(--gold);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(245,158,11,.35);
}
.tv-wins-dots {
  display: flex; gap: 7px; justify-content: flex-end; margin-top: 6px;
}
.tv-wins-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,158,11,.25); transition: background .3s; }
.tv-wins-dot.active { background: var(--gold); }

/* ── No-wins ─────────────────────────────────────────────────────── */
.tv-no-wins {
  flex-shrink: 0; height: 48px;
  background: var(--header-bg); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--sub); font-weight: 600;
}

/* ── Error ───────────────────────────────────────────────────────── */
.tv-error {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.tv-error-inner { text-align: center; }
.tv-error-inner p { font-size: 20px; color: var(--sub); margin-top: 12px; }