/* ============================================================
 * Table view
 * The scrollable data table shared by the Table view (multi-day sun data).
 * ============================================================ */
/* ---------- Table view ---------- */
.table-controls{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.table-controls .spacer{flex:1;}
.table-wrap{
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:auto; max-height:640px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.table-wrap::-webkit-scrollbar{ height:8px; width:8px; }
.table-wrap::-webkit-scrollbar-track{ background:transparent; }
.table-wrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.table-wrap::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }
table.sun-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px;}
table.sun-table thead th{
  position:sticky; top:0; background:var(--bg-raised); color:var(--ink-dim); text-align:left;
  padding:10px 12px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600;
  border-bottom:1px solid var(--line); z-index:2;
}
table.sun-table td{padding:8px 12px; border-bottom:1px solid var(--line-soft); white-space:nowrap;}
table.sun-table tbody tr:hover{background:var(--bg-panel-2);}
table.sun-table tbody tr.is-today{background:rgba(242,182,92,0.08);}
.forecast-table tbody tr.is-now{background:rgba(127,209,174,0.10);}

/* Pin the Date column so it stays visible while scrolling horizontally through
   twilight/moon-phase columns on narrow screens. */
table.sun-table th:first-child, table.sun-table td:first-child{
  position:sticky; left:0; z-index:1; background:var(--bg-deep);
  box-shadow:2px 0 4px rgba(0,0,0,0.25);
}
table.sun-table thead th:first-child{ z-index:3; background:var(--bg-raised); }
table.sun-table tbody tr:hover td:first-child{ background:var(--bg-panel-2); }
table.sun-table tbody tr.is-today td:first-child{ background:var(--table-today-tint); }
.forecast-table tbody tr.is-now td:first-child{ background:var(--table-now-tint); }
table.sun-table td.muted{color:var(--ink-faint);}