/*
 * 疾風 出欠管理アプリ
 * Attendance UI Phase 1D-D2C
 *
 * 日程詳細内の出欠別フルネーム一覧専用CSS。
 */

.schedule-attendance-roster {
  margin-top: 18px;
  padding: 16px;

  border:
    1px solid
    var(--hayate-ui-border, #e5d9dc);
  border-radius: 16px;

  background:
    var(--hayate-ui-surface, #ffffff);

  box-shadow:
    0 8px 22px
    rgba(63, 11, 19, 0.08);
}

.schedule-attendance-roster-header {
  display: grid;
  gap: 5px;
  margin-bottom: 13px;
}

.schedule-attendance-roster-title {
  margin: 0;

  color:
    var(--hayate-enji, #741f2b);

  font-size: 1rem;
  font-weight: 900;
  line-height: 1.4;
}

.schedule-attendance-roster-summary {
  margin: 0;

  color:
    var(--hayate-ui-text-sub, #6d6264);

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

.schedule-attendance-roster-content {
  min-width: 0;
}

.schedule-attendance-roster-state {
  margin: 0;
  padding: 13px 14px;

  border-radius: 12px;

  background: #f5f2f3;
  color: #62585a;

  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.6;
}

.schedule-attendance-roster-state.is-loading {
  background: #f8f3e6;
  color: #725514;
}

.schedule-attendance-roster-state.is-information {
  background: #eef4fa;
  color: #315d83;
}

.schedule-attendance-roster-state.is-error {
  background: #fff0f0;
  color: #9e2828;
}

.schedule-attendance-roster-groups {
  display: grid;
  gap: 11px;
}

.schedule-attendance-roster-group {
  overflow: hidden;

  border:
    1px solid
    #e7dfe1;
  border-left:
    5px solid
    #77706f;
  border-radius: 13px;

  background: #ffffff;
}

.schedule-attendance-roster-group.is-attending {
  border-left-color: #2f7d4a;
}

.schedule-attendance-roster-group.is-absent {
  border-left-color: #b3262e;
}

.schedule-attendance-roster-group.is-late {
  border-left-color: #cf7a16;
}

.schedule-attendance-roster-group.is-early {
  border-left-color: #2f6fa3;
}

.schedule-attendance-roster-group.is-partial {
  border-left-color: #7b4b94;
}

.schedule-attendance-roster-group.is-unanswered {
  border-left-color: #77706f;
}

.schedule-attendance-roster-group-heading {
  min-height: 43px;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  background: #faf8f8;
}

.schedule-attendance-roster-group-title {
  margin: 0;

  color:
    var(--hayate-ui-text, #2b2526);

  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.4;
}

.schedule-attendance-roster-count {
  flex-shrink: 0;

  padding: 4px 9px;

  border-radius: 999px;

  background:
    var(--hayate-enji, #741f2b);
  color: #ffffff;

  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.3;
}

.schedule-attendance-roster-member-group {
  padding: 12px;
}

.schedule-attendance-roster-member-group +
.schedule-attendance-roster-member-group {
  border-top:
    1px dashed
    #e4dadd;
}

.schedule-attendance-roster-member-title {
  margin: 0 0 8px;

  color:
    var(--hayate-ui-text-sub, #6d6264);

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.schedule-attendance-roster-name-list {
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;

  list-style: none;
}

.schedule-attendance-roster-name {
  min-width: 0;
  padding: 8px 10px;

  border:
    1px solid
    #eadfe2;
  border-radius: 10px;

  background: #ffffff;
  color:
    var(--hayate-ui-text, #2b2526);

  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.schedule-attendance-roster-empty {
  margin: 0;
  padding: 11px 12px;

  color:
    var(--hayate-ui-text-sub, #6d6264);

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width: 560px) {
  .schedule-attendance-roster {
    margin-top: 15px;
    padding: 13px;
    border-radius: 14px;
  }

  .schedule-attendance-roster-name-list {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .schedule-attendance-roster-name {
    padding:
      8px 9px;
  }
}