/* ===== tables.css - Tabular Data ===== */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.95rem;
}

thead th {
  text-align: left;
  padding: 0.625rem 0.75rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--table-border);
}

th.th_right, td.td_right { text-align: right; }
th.th_center, td.td_center { text-align: center; }
th.th_left, td.td_left { text-align: left; }
td.foot_left { padding-left: 0.75rem;}
td.foot_right { padding-right: 0.75rem;}

tbody td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
  color: var(--text);
}

tr.shift-row:hover { background: rgba(255,255,255,0.12); }
tr.shift-row:hover td { background: transparent; }
tr:hover td { background: rgba(255,255,255,0.01); }
td.num, th.num { font-family: var(--font-mono); }


/* Sticky tables */
.table-sticky { border-collapse: separate; border-spacing: 0; }
/* The header row is a structural rail: a stronger hairline anchors it. */
.table-sticky thead th { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 2px solid var(--line-strong); }
.table-sticky .sticky-col { position: sticky; left: 0; z-index: 4; background: var(--panel); border-right: 2px solid var(--line-strong); }

/* "Now" line: in the day-per-row matrices (month/year), today reads as a
   horizontal teal rule running across the whole board. */
.today-row { background: rgb(var(--accent-rgb) / 0.08); }
.today-row td, .today-row th { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.today-row .date-cell, .today-row .day-cell { color: var(--accent); }
.today-row:hover { background: rgb(var(--accent-rgb) / 0.14); }

/* Date column reads as an instrument readout. Mono is wider than Inter, so the
   ISO date must not wrap (its hyphens are break points) and the size is trimmed
   so the column does not grow taller/wider than it did before. */
.month-schedule .date-cell { font-family: var(--font-mono); white-space: nowrap; font-size: 0.82rem; }

.coworkers-row {
  background: rgba(255,255,255,0.02);
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}
.coworkers-row:hover { background: rgba(255,255,255,0.03); }

/* Responsive Tables */
@media (max-width: 800px) {
  thead { display: none; }
  
  tbody td {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
  }
  
  tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    display: inline-block;
    margin-right: 0.5rem;
  }
  
  tbody tr {
    margin: 0.5rem 0;
    display: block;
    border-bottom: 1px solid var(--table-border);
    background: var(--panel);
    border-radius: var(--radius);
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  table { font-size: 0.88rem; }
  tbody td { padding: 6px 0.625rem; }
}

/* Breakdown table - slim with borders */
.breakdown-table {
  border: 1px solid rgba(255,255,255,0.12);
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.breakdown-table th,
.breakdown-table td {
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.3;
}

.breakdown-table thead th {
  padding: 0.3rem 0.4rem;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

.breakdown-table tfoot td {
  border-top: 2px solid rgba(255,255,255,0.15);
  font-weight: 600;
}

/* Keep breakdown table scrollable on mobile instead of card layout */
@media (max-width: 800px) {
  .breakdown-table thead { display: table-header-group; }
  .breakdown-table tbody td {
    display: table-cell;
    width: auto;
    padding: 0.2rem 0.35rem;
  }
  .breakdown-table tbody td::before { display: none; }
  .breakdown-table tbody tr {
    display: table-row;
    margin: 0;
    border-bottom: none;
    background: none;
    border-radius: 0;
    padding: 0;
  }
}