/* ==============================
   50 Tables
   ============================== */

.table{ width:100%; border-collapse:collapse }
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
  font-size:14px;
  color:#e8edf3;
}
.table th{ background:#0b1220; color:var(--muted) }
.table tr:hover td{ background:#0c1324 }

.table-sticky thead th{
  position:sticky;
  top:calc(var(--header-h) + 8px);
  z-index:1;
  background:#0b1220;
}

/* table wrapper */
.table-wrap{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#0f1a16;
}

/* inputs inside table cells */
.table td select.input,
.table td input.input{
  width:100%;
  box-sizing:border-box;
  min-width:220px;
}
.table td select.input.staff-select{ min-width:260px; }
.table td select.input.action-select{ min-width:140px; }

.table td input[type="datetime-local"].input{
  font-variant-numeric: tabular-nums;
}

/* mobile default: horizontal scroll */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wide{
  border-collapse:collapse;
  width:max-content;
  min-width:100%;
  table-layout:auto;
  white-space:nowrap;
}
.table-wide th,.table-wide td{
  padding:.4rem .6rem;
  vertical-align:top;
}

/* wide screens: wrap + fixed layout */
@media (min-width: 1200px){
  .table-scroll{ overflow:visible; }
  .table-wide{
    width:100%;
    table-layout:fixed;
    white-space:normal;
  }
  .table-wide th,.table-wide td{ word-break:break-word; }
  .table-wide.is-compact th,
  .table-wide.is-compact td{
    padding:.3rem .45rem;
    font-size:.95rem;
  }
  .table-wide th.col-narrow, .table-wide td.col-narrow{ width:8%; }
  .table-wide th.col-wide,   .table-wide td.col-wide{ width:18%; }
}

/* matrix (sticky cols) */
.matrix{ border-collapse:separate; border-spacing:0; }
.matrix thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel, #0b1220);
}
.matrix .sticky-col-1{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel, #0b1220);
  min-width: 220px;
}
.matrix .sticky-col-2{
  position: sticky;
  left: 220px;
  z-index: 3;
  background: var(--panel, #0b1220);
  width: 70px;
  text-align:center;
}
.matrix thead .sticky-col-1,
.matrix thead .sticky-col-2{ z-index: 8; }