.attendance-cumulative-dashboard {
  display: grid;
  gap: 18px;
}

.attendance-center-body {
  min-width: 0;
}

.attendance-center-embedded-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.attendance-center-embedded-actions .attendance-filter-form {
  margin: 0;
}

.attendance-management-shell {
  display: grid;
  gap: 16px;
}

.attendance-management-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.attendance-item-list-panel,
.attendance-item-create-closed,
.attendance-item-create-panel,
.attendance-item-detail-head {
  display: grid;
  gap: 14px;
}

.attendance-item-list {
  display: grid;
  gap: 10px;
}

.attendance-item-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.attendance-item-row.active {
  border-color: rgba(30, 99, 182, 0.35);
  background: var(--blue-soft);
}

.attendance-item-row.inactive {
  color: var(--muted);
}

.attendance-item-select {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.attendance-item-type,
.attendance-item-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.attendance-item-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.attendance-item-row-foot,
.attendance-item-badges,
.attendance-item-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.attendance-item-inline-form,
.attendance-item-create-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.attendance-item-name-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: inherit;
}

.attendance-item-name-button strong {
  overflow-wrap: anywhere;
}

.attendance-item-edit-mark {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.attendance-item-detail {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.attendance-item-detail-head h3 {
  margin: 6px 0 4px;
}

.band-linked-roster-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(14, 143, 98, 0.18);
  border-radius: 8px;
  background: #f0fdf7;
  color: #075f43;
  padding: 9px 11px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .attendance-management-grid {
    grid-template-columns: 1fr;
  }

  .attendance-item-inline-form,
  .attendance-item-create-form {
    grid-template-columns: 1fr;
  }

  .attendance-item-inline-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.attendance-cumulative-panel .panel-head {
  align-items: end;
}

.attendance-cumulative-track-field {
  min-width: 180px;
  margin: 0;
}

.attendance-cumulative-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.attendance-cumulative-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.attendance-cumulative-table th,
.attendance-cumulative-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px;
  text-align: center;
  vertical-align: middle;
}

.attendance-cumulative-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 130px;
  background: var(--panel);
  text-align: left;
}

.attendance-cumulative-table thead th {
  background: var(--soft);
  color: var(--muted);
  font-weight: 900;
}

.attendance-cumulative-table tbody tr:last-child th,
.attendance-cumulative-table tbody tr:last-child td {
  border-bottom: 0;
}

.attendance-rate-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 74px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  line-height: 1.15;
}

.attendance-rate-chip small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  color: currentColor;
  opacity: 0.78;
}

.attendance-rate-chip.good {
  border-color: rgba(14, 143, 98, 0.28);
  background: var(--good-soft);
  color: var(--good);
}

.attendance-rate-chip.warn {
  border-color: rgba(199, 120, 0, 0.28);
  background: var(--warn-soft);
  color: var(--warn);
}

.attendance-rate-chip.bad {
  border-color: rgba(199, 42, 42, 0.24);
  background: var(--bad-soft);
  color: var(--bad);
}

.attendance-rate-chip.empty {
  border-color: #e5e9ef;
  background: #f3f5f8;
  color: #8a94a3;
}

.attendance-cumulative-trend-panel .echart {
  min-height: 280px;
}