/* =========================================================
   LIFTRIX Shared Tables / Lists
   安全版：既存テーブル・リストのレイアウトは大きく触らない
========================================================= */

:root{
  /* Table / List Surface */
  --liftrix-list-radius: 16px;
  --liftrix-list-radius-sm: 12px;

  --liftrix-list-border: rgba(132,169,255,0.14);
  --liftrix-list-border-strong: rgba(132,169,255,0.22);

  --liftrix-list-bg:
    linear-gradient(180deg, rgba(13,27,50,0.88), rgba(7,16,31,0.94));

  --liftrix-list-row-bg: rgba(255,255,255,0.020);
  --liftrix-list-row-hover: rgba(63,169,255,0.075);
  --liftrix-list-row-selected: rgba(63,169,255,0.105);

  --liftrix-list-head-bg: rgba(255,255,255,0.035);
  --liftrix-list-head-text: rgba(221,233,255,0.62);

  --liftrix-list-text: #F7FBFF;
  --liftrix-list-muted: rgba(221,233,255,0.50);

  --liftrix-list-divider: rgba(255,255,255,0.075);

  --liftrix-list-shadow:
    0 14px 34px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);

  --liftrix-list-cell-padding-y: 12px;
  --liftrix-list-cell-padding-x: 14px;
}

/* =========================================================
   New Table Classes
   新規画面ではこのクラスを使う
========================================================= */

.liftrixTableWrap{
  width: 100%;
  overflow-x: auto;
  border-radius: var(--liftrix-list-radius);
  border: 1px solid var(--liftrix-list-border);
  background: var(--liftrix-list-bg);
  box-shadow: var(--liftrix-list-shadow);
}

.liftrixTable{
  width: 100%;
  border-collapse: collapse;
  color: var(--liftrix-list-text);
}

.liftrixTable th,
.liftrixTable td{
  padding: var(--liftrix-list-cell-padding-y) var(--liftrix-list-cell-padding-x);
  border-bottom: 1px solid var(--liftrix-list-divider);
  text-align: left;
  vertical-align: middle;
}

.liftrixTable th{
  color: var(--liftrix-list-head-text);
  background: var(--liftrix-list-head-bg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.liftrixTable td{
  color: var(--liftrix-list-text);
  font-size: 13px;
  font-weight: 750;
}

.liftrixTable tbody tr:hover{
  background: var(--liftrix-list-row-hover);
}

.liftrixTable tbody tr:last-child td{
  border-bottom: 0;
}

/* =========================================================
   New List Classes
========================================================= */

.liftrixList{
  overflow: hidden;
  border-radius: var(--liftrix-list-radius);
  border: 1px solid var(--liftrix-list-border);
  background: var(--liftrix-list-bg);
  box-shadow: var(--liftrix-list-shadow);
}

.liftrixListItem{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--liftrix-list-cell-padding-y) var(--liftrix-list-cell-padding-x);
  border-bottom: 1px solid var(--liftrix-list-divider);
  color: var(--liftrix-list-text);
}

.liftrixListItem:last-child{
  border-bottom: 0;
}

.liftrixListItem:hover{
  background: var(--liftrix-list-row-hover);
}

.liftrixListTitle{
  color: var(--liftrix-list-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.liftrixListMeta{
  color: var(--liftrix-list-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   Safe Existing Compatibility
   既存テーブル・リストのサイズやgrid構造は触らない
========================================================= */

/* Admin / Trainer のテーブル系 */
.adminTable,
.clientsTable,
.trainersTable,
.assignmentsTable,
.recordsTable,
.goalsTable,
.reportTable{
  border-color: var(--liftrix-list-border);
}

/* テーブル行の色味だけ軽く統一 */
.adminTable tbody tr:hover,
.clientsTable tbody tr:hover,
.trainersTable tbody tr:hover,
.assignmentsTable tbody tr:hover,
.recordsTable tbody tr:hover,
.goalsTable tbody tr:hover,
.reportTable tbody tr:hover{
  background: var(--liftrix-list-row-hover);
}

/* Header text */
.adminTable th,
.clientsTable th,
.trainersTable th,
.assignmentsTable th,
.recordsTable th,
.goalsTable th,
.reportTable th{
  color: var(--liftrix-list-head-text);
  font-weight: 900;
}

/* Client / Trainer 行カード系 */
.clientRow,
.trainerRow,
.assignmentRow,
.recordRow,
.goalRow,
.reportRow,
.slotRow{
  border-color: var(--liftrix-list-divider);
}

.clientRow:hover,
.trainerRow:hover,
.assignmentRow:hover,
.recordRow:hover,
.goalRow:hover,
.reportRow:hover,
.slotRow:hover{
  background: var(--liftrix-list-row-hover);
}

/* Compact list containers */
.clientListCompact,
.trainerListCompact,
.assignmentList,
.recordList,
.goalList,
.slotList{
  scrollbar-width: thin;
  scrollbar-color: rgba(159,190,255,0.28) transparent;
}

.clientListCompact::-webkit-scrollbar,
.trainerListCompact::-webkit-scrollbar,
.assignmentList::-webkit-scrollbar,
.recordList::-webkit-scrollbar,
.goalList::-webkit-scrollbar,
.slotList::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}

.clientListCompact::-webkit-scrollbar-track,
.trainerListCompact::-webkit-scrollbar-track,
.assignmentList::-webkit-scrollbar-track,
.recordList::-webkit-scrollbar-track,
.goalList::-webkit-scrollbar-track,
.slotList::-webkit-scrollbar-track{
  background: transparent;
}

.clientListCompact::-webkit-scrollbar-thumb,
.trainerListCompact::-webkit-scrollbar-thumb,
.assignmentList::-webkit-scrollbar-thumb,
.recordList::-webkit-scrollbar-thumb,
.goalList::-webkit-scrollbar-thumb,
.slotList::-webkit-scrollbar-thumb{
  background: rgba(159,190,255,0.28);
  border-radius: 999px;
}

/* =========================================================
   Empty State
========================================================= */

.liftrixEmptyState{
  padding: 28px 18px;
  text-align: center;
  color: var(--liftrix-list-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

/* =========================================================
   Safety Notes
   以下は意図的に指定しない:
   display / grid-template-columns
   width / min-width / max-width
   height / min-height / max-height
   position
   overflow-y
========================================================= */

/* =========================================================
   Legacy Table Compatibility
   app_ui.css から移管
========================================================= */

.tableWrap{
  overflow-x:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.table th{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.table td{
  color:var(--text-soft);
}