/* ==========================================================================
   Estimates Tab — estimates.css
   ========================================================================== */

/* ── Estimates tab: pane-header stays fixed, only table scrolls ── */
#tab-estimates {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#tab-estimates .pane-header {
  flex-shrink: 0;
  padding: 24px 24px 16px;
}
#estimates-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
}
#fd-table {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Scrollable table wrapper ─────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #fff;
}
/* Inside estimates, also scroll vertically */
#fd-table .table-scroll {
  flex: 1;
  overflow: auto;
}

/* ── Estimates table ──────────────────────────────────────── */
.estimates-table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
}

.estimates-table th,
.estimates-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.estimates-table thead th {
  background: #F8FAFC;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  position: sticky;
  top: 0;
  z-index: 2;
}

.estimates-table tbody tr:hover { background: #F8FAFC; }
.estimates-table tbody tr:last-child td { border-bottom: none; }

.col-epic   { width: 260px; min-width: 260px; }
.col-status { min-width: 110px; }
.col-due    { min-width: 100px; }
.col-team   { min-width: 130px; text-align: center; }

/* ── Frozen columns: Epic + Status ── */
.estimates-table th.col-epic,
.estimates-table td.col-epic {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
.estimates-table th.col-status,
.estimates-table td.col-status {
  position: sticky;
  left: 260px;
  z-index: 1;
  background: #fff;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}
/* thead frozen cells need to sit above both tbody sticky and top-sticky */
.estimates-table thead th.col-epic,
.estimates-table thead th.col-status {
  z-index: 4;
  background: #F8FAFC;
}
.estimates-table tbody tr:hover td.col-epic,
.estimates-table tbody tr:hover td.col-status { background: #F8FAFC; }

.team-capacity {
  font-size: 11px;
  font-weight: 400;
  color: #94A3B8;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Estimates team header: sum + budget input ─────────────── */
.team-budget-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.team-budget-sum {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.team-budget-sum.over-budget { color: #DC2626; }
.team-budget-sep {
  font-size: 11px;
  color: #94A3B8;
}
.team-budget-input {
  width: 62px;
  padding: 2px 5px;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
  background: #fff;
  color: #334155;
  font-weight: 500;
}
.team-budget-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.team-budget-input::placeholder { color: #CBD5E1; }

.epic-key-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.epic-key {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #3B82F6;
  flex-shrink: 0;
  text-decoration: none;
}
a.epic-key:hover { text-decoration: underline; }
.epic-summary {
  font-size: 13px;
  color: #1E293B;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  margin-top: 2px;
}

.epic-total-pts {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.epic-no-pts {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: #FEE2E2;
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: #E2E8F0;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
}
.status-badge--todo       { background: #F1F5F9; color: #475569; }
.status-badge--inprogress { background: #DBEAFE; color: #1D4ED8; }
.status-badge--done       { background: #DCFCE7; color: #15803D; }

.overdue { color: #DC2626; font-weight: 600; }

/* ── Epic header: label + grand total ────────────────────────────────────── */

.col-epic-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.epic-grand-total {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}
.epic-grand-total strong {
  font-weight: 700;
  color: #1E293B;
}
.epic-grand-total.over-budget strong { color: #DC2626; }

/* ── Estimate cell ────────────────────────────────────────── */
.cell-estimate { text-align: center; padding: 6px 8px !important; }

.estimate-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.estimate-input {
  width: 64px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.estimate-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}
.estimate-input.saving { border-color: #F59E0B; }
.estimate-input.saved  { border-color: #10B981; }
.estimate-input.error  { border-color: #DC2626; }

.notes-btn {
  background: none;
  border: none;
  color: #CBD5E1;
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  border-radius: 3px;
  transition: color 0.15s;
  line-height: 1;
}
.notes-btn:hover    { color: #64748B; }
.notes-btn.has-note { color: #3B82F6; }

/* ── Cell intensity colours ───────────────────────────────── */
.intensity-low  { background: rgba(16, 185, 129, 0.06); }
.intensity-med  { background: rgba(245, 158, 11, 0.08); }
.intensity-high { background: rgba(220, 38, 38, 0.06); }