/* =======================================================================
   tables.css — Data Tables, Schedule Tables, Sticky Headers, Zebra
   Advanced Solar Load Calculator — Production CSS Architecture
   ======================================================================= */

/* ── Table wrapper ─────────────────────────────────────────────────── */
.data-table-wrap {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
  max-height: 70vh;
}

/* ── Data table ────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.data-table thead {
  background: rgba(15, 23, 42, 0.7);
  color: var(--text-3);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.data-table th {
  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
  text-align: right;
  white-space: nowrap;
  user-select: none;
}

.data-table th.sortable {
  cursor: pointer;
}
.data-table th.sortable:hover {
  color: var(--accent-2);
}

.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid rgba(30, 41, 59, 0.5);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.3);
}

/* Actions column */
.actions-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.data-table tbody tr:hover .actions-cell {
  opacity: 1;
}

/* Empty cell */
.empty-cell {
  text-align: center !important;
  color: var(--text-3);
  padding: var(--sp-12) var(--sp-4) !important;
}

/* Total row */
.data-table tfoot tr,
.data-table tbody tr.total-row {
  border-top: 2px solid rgba(255,106,0,0.4);
  background: rgba(15, 23, 42, 0.4);
  font-weight: 700;
}

/* ── Schedule table (wider, more columns) ──────────────────────────── */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.schedule-table thead {
  background: rgba(15, 23, 42, 0.8);
  color: var(--text-3);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.schedule-table th {
  padding: var(--sp-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.schedule-table th:hover {
  color: var(--accent-2);
}

.schedule-table td {
  padding: 6px var(--sp-2);
  border-top: 1px solid rgba(30, 41, 59, 0.4);
}

.schedule-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.3);
}

/* ── Report table ──────────────────────────────────────────────────── */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.report-table thead {
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.report-table th {
  padding: var(--sp-2);
  font-weight: 600;
  text-align: right;
}
.report-table td {
  padding: var(--sp-2);
  border-bottom: 1px solid rgba(30, 41, 59, 0.4);
}
.report-table .highlight-row {
  background: rgba(255,106,0,0.1);
}

/* ── Assumptions table ─────────────────────────────────────────────── */
.assumptions-table .detail-row {
  background: rgba(15, 23, 42, 0.4);
}

.assumptions-table .detail-row td {
  padding: var(--sp-4) var(--sp-6);
}

/* ── Phase allocation table ────────────────────────────────────────── */
.phase-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.phase-badge-l1 { background: rgba(245,158,11,0.3); color: #fbbf24; }
.phase-badge-l2 { background: rgba(59,130,246,0.3);  color: #60a5fa; }
.phase-badge-l3 { background: rgba(236,72,153,0.3);  color: #f472b6; }
.phase-badge-3p { background: rgba(139,92,246,0.3);  color: #a78bfa; }

/* ── Table legend ──────────────────────────────────────────────────── */
.table-legend {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-3);
}

.table-legend strong {
  color: var(--text-2);
}

/* ── Responsive tables ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .data-table th,
  .data-table td {
    padding: 4px 6px;
  }
}