.table-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.table-scroll-lg {
  max-height: 420px;
  overflow-y: auto;
}

.table-scroll-sm {
  max-height: 280px;
  overflow-y: auto;
}

.word-break-all {
  word-break: break-all;
}

.checkin-user-info {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--surface);
}

.checkin-user-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.checkin-user-info strong {
  color: var(--text);
}

.w-full {
  width: 100%;
}

.w-96 {
  width: 96px;
}

.min-w-180 {
  min-width: 180px;
}

.max-w-220 {
  max-width: 220px;
}

.input-min-140 {
  min-width: 140px;
}

.card-block {
  padding: 16px;
}

.card-block-sm {
  padding: 12px;
}

.card-soft {
  border-color: #d8e3f0;
  background: #f8fbff;
}

.card-dashed {
  background: #f8fafc;
  border-style: dashed;
}

.card-warn {
  border-color: #f2d19d;
  background: #fff8e8;
  color: #8f5d00;
}

.inset-card {
  padding: 12px;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  background: #fff;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.8rem;
  color: #3c4c63;
  border: 1px solid #d5e0ed;
  background: #f7fafe;
}

.meta-pill-grid .meta-pill {
  flex: 0 1 auto;
}

.meta-pill.holiday {
  color: var(--warning);
  border-color: #f4d487;
  background: var(--warning-soft);
}

.meta-pill.full {
  color: var(--danger);
  border-color: #f8c1cc;
  background: var(--danger-soft);
}

.meta-pill.volunteer-badge {
  color: #2e7d32;
  border-color: #a5d6a7;
  background: #f1f8f1;
}

.meta-pill.is-error {
  color: var(--danger);
}

.meta-pill.is-locked {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.16);
}

.meta-pill.is-idle {
  background: #f3f4f6;
  color: #4b5563;
  border-color: rgba(75, 85, 99, 0.12);
}

.meta-pill.is-normal {
  background: #dcfce7;
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.16);
}

.meta-pill.is-connected {
  background: #dcfce7;
  color: #166534;
  border-color: rgba(22, 101, 52, 0.16);
}

.meta-pill.is-warn {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.16);
}

.meta-pill.is-offline {
  background: #fee2e2;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.16);
}

.table-wrap {
  border: 1px solid #d7e2ef;
  border-radius: var(--radius-md);
  background: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table.matrix {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
}

table.matrix th,
table.matrix td {
  border-right: 1px solid #e1e8f2;
  border-bottom: 1px solid #e1e8f2;
  padding: 9px;
  text-align: center;
  font-size: 0.84rem;
  background: #fff;
}

table.matrix tr td:last-child,
table.matrix tr th:last-child {
  border-right: none;
}

table.matrix tr:last-child td {
  border-bottom: none;
}

table.matrix thead th {
  background: #f4f8ff;
  position: sticky;
  top: 0;
  z-index: 3;
}

table.matrix tbody tr:nth-child(2n) td {
  background: #fbfdff;
}

table.matrix th:first-child,
table.matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #f4f8ff;
  box-shadow: 1px 0 0 #e1e8f2;
}

table.matrix tbody tr:nth-child(2n) td:first-child {
  background: #f0f6ff;
}

table.matrix input[type="checkbox"] {
  display: block;
  margin: 0 auto;
}