/*
 * 疾風 出欠管理アプリ
 * Attendance UI Phase 1D-B
 *
 * 月間カレンダー専用CSS。
 * 既存の日程一覧、出欠回答、APIには影響を与えない。
 */

:root {
  --attendance-calendar-tournament: #b3262e;
  --attendance-calendar-practice-game: #2f7d4a;
  --attendance-calendar-practice: #d8a72d;
  --attendance-calendar-meeting: #7b4b94;
  --attendance-calendar-other: #77706f;
}

.attendance-calendar-card {
  margin-bottom: 18px;
  padding: 18px;
  border:
    1px solid
    var(--hayate-ui-border, #ddd4d1);
  border-radius: 20px;
  background:
    var(--hayate-ui-surface, #ffffff);
  box-shadow:
    0 8px 24px
    rgba(63, 11, 19, 0.08);
}

.attendance-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.attendance-calendar-heading {
  min-width: 0;
}

.attendance-calendar-label {
  margin: 0 0 3px;
  color:
    var(--hayate-ui-wine, #741f2b);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.attendance-calendar-title {
  margin: 0;
  color:
    var(--hayate-ui-text, #2b2526);
  font-size: 1.2rem;
  line-height: 1.35;
}

.attendance-calendar-controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.attendance-calendar-control,
.attendance-calendar-today {
  min-height: 38px;
  border:
    1px solid
    rgba(90, 16, 27, 0.24);
  border-radius: 10px;
  background: #ffffff;
  color:
    var(--hayate-ui-wine, #741f2b);
  font-weight: 800;
  cursor: pointer;
}

.attendance-calendar-control {
  width: 38px;
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
}

.attendance-calendar-today {
  padding: 0 11px;
  font-size: 0.78rem;
}

.attendance-calendar-control:hover,
.attendance-calendar-today:hover {
  background:
    rgba(90, 16, 27, 0.06);
}

.attendance-calendar-control:focus-visible,
.attendance-calendar-today:focus-visible,
.attendance-calendar-day:focus-visible {
  outline:
    3px solid
    rgba(216, 167, 45, 0.46);
  outline-offset: 2px;
}

.attendance-calendar-weekdays,
.attendance-calendar-grid {
  display: grid;
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );
}

.attendance-calendar-weekdays {
  margin-bottom: 5px;
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.attendance-calendar-weekdays span {
  padding: 5px 0;
}

.attendance-calendar-weekdays .is-sunday {
  color:
    var(--attendance-calendar-tournament);
}

.attendance-calendar-weekdays .is-saturday {
  color: #3269a8;
}

.attendance-calendar-grid {
  overflow: hidden;
  border:
    1px solid
    rgba(90, 16, 27, 0.13);
  border-radius: 14px;
  background:
    rgba(90, 16, 27, 0.08);
  gap: 1px;
}

.attendance-calendar-day {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 66px;
  padding: 7px 4px 5px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color:
    var(--hayate-ui-text, #2b2526);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.attendance-calendar-day:hover {
  background:
    rgba(90, 16, 27, 0.045);
}

.attendance-calendar-day.is-outside-month {
  background: #f8f6f5;
  color:
    rgba(43, 37, 38, 0.42);
}

.attendance-calendar-day.is-selected {
  z-index: 1;
  background:
    rgba(90, 16, 27, 0.09);
  box-shadow:
    inset 0 0 0 2px
    var(--hayate-ui-wine, #741f2b);
}

.attendance-calendar-day.is-today
.attendance-calendar-day-number {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    var(--hayate-ui-wine, #741f2b);
  color: #ffffff;
  align-items: center;
  justify-content: center;
}

.attendance-calendar-day-number {
  display: inline-flex;
  min-width: 26px;
  min-height: 26px;
  font-size: 0.83rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.attendance-calendar-markers {
  display: flex;
  width: 100%;
  min-height: 10px;
  padding: 0 3px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.attendance-calendar-marker {
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background:
    var(--attendance-calendar-other);
}

.attendance-calendar-marker.is-tournament,
.attendance-calendar-legend .is-tournament::before,
.attendance-calendar-event.is-tournament {
  --attendance-calendar-event-color:
    var(--attendance-calendar-tournament);
}

.attendance-calendar-marker.is-practice-game,
.attendance-calendar-legend .is-practice-game::before,
.attendance-calendar-event.is-practice-game {
  --attendance-calendar-event-color:
    var(--attendance-calendar-practice-game);
}

.attendance-calendar-marker.is-practice,
.attendance-calendar-legend .is-practice::before,
.attendance-calendar-event.is-practice {
  --attendance-calendar-event-color:
    var(--attendance-calendar-practice);
}

.attendance-calendar-marker.is-meeting,
.attendance-calendar-legend .is-meeting::before,
.attendance-calendar-event.is-meeting {
  --attendance-calendar-event-color:
    var(--attendance-calendar-meeting);
}

.attendance-calendar-marker.is-other,
.attendance-calendar-legend .is-other::before,
.attendance-calendar-event.is-other {
  --attendance-calendar-event-color:
    var(--attendance-calendar-other);
}

.attendance-calendar-marker {
  background:
    var(
      --attendance-calendar-event-color,
      var(--attendance-calendar-other)
    );
}

.attendance-calendar-more-count {
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.62rem;
  font-weight: 800;
}

.attendance-calendar-legend {
  display: flex;
  margin-top: 10px;
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.67rem;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.attendance-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.attendance-calendar-legend span::before {
  width: 11px;
  height: 4px;
  border-radius: 999px;
  background:
    var(
      --attendance-calendar-event-color,
      var(--attendance-calendar-other)
    );
  content: "";
}

.attendance-calendar-status {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background:
    rgba(90, 16, 27, 0.055);
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.8rem;
}

.attendance-calendar-status[hidden] {
  display: none;
}

.attendance-calendar-selected {
  margin-top: 16px;
  padding-top: 15px;
  border-top:
    1px solid
    rgba(90, 16, 27, 0.12);
}

.attendance-calendar-selected-title {
  margin: 0 0 10px;
  color:
    var(--hayate-ui-text, #2b2526);
  font-size: 0.95rem;
  line-height: 1.5;
}

.attendance-calendar-selected-list {
  display: grid;
  gap: 8px;
}

.attendance-calendar-empty {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #f7f5f4;
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.82rem;
  line-height: 1.6;
}

.attendance-calendar-events {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
}

.attendance-calendar-event {
  padding: 11px 12px;
  border:
    1px solid
    rgba(90, 16, 27, 0.11);
  border-left:
    5px solid
    var(
      --attendance-calendar-event-color,
      var(--attendance-calendar-other)
    );
  border-radius: 12px;
  background: #ffffff;
}

.attendance-calendar-event.is-cancelled {
  opacity: 0.68;
  background: #f6f3f2;
}

.attendance-calendar-event-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.attendance-calendar-event-badge {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background:
    color-mix(
      in srgb,
      var(
        --attendance-calendar-event-color,
        var(--attendance-calendar-other)
      ) 13%,
      white
    );
  color:
    var(
      --attendance-calendar-event-color,
      var(--attendance-calendar-other)
    );
  font-size: 0.68rem;
  font-weight: 800;
}

.attendance-calendar-event-title {
  min-width: 0;
  margin: 0;
  color:
    var(--hayate-ui-text, #2b2526);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.5;
}

.attendance-calendar-event-status {
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 7px;
  background:
    rgba(179, 38, 46, 0.1);
  color:
    var(--attendance-calendar-tournament);
  font-size: 0.66rem;
  font-weight: 800;
}

.attendance-calendar-event-meta {
  margin: 6px 0 0;
  color:
    var(--hayate-ui-muted, #746d6e);
  font-size: 0.76rem;
  line-height: 1.55;
}

@media screen and (max-width: 480px) {
  .attendance-calendar-card {
    padding: 14px 10px;
    border-radius: 17px;
  }

  .attendance-calendar-toolbar {
    align-items: flex-start;
  }

  .attendance-calendar-title {
    font-size: 1.05rem;
  }

  .attendance-calendar-control,
  .attendance-calendar-today {
    min-height: 36px;
  }

  .attendance-calendar-control {
    width: 34px;
  }

  .attendance-calendar-today {
    padding-right: 8px;
    padding-left: 8px;
  }

  .attendance-calendar-day {
    min-height: 56px;
    padding-top: 5px;
    padding-right: 2px;
    padding-left: 2px;
    gap: 3px;
  }

  .attendance-calendar-day-number {
    min-width: 23px;
    min-height: 23px;
    font-size: 0.76rem;
  }

  .attendance-calendar-day.is-today
  .attendance-calendar-day-number {
    width: 23px;
    height: 23px;
  }

  .attendance-calendar-marker {
    width: 10px;
  }

  .attendance-calendar-legend {
    font-size: 0.63rem;
    gap: 6px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-calendar-control,
  .attendance-calendar-today,
  .attendance-calendar-day {
    scroll-behavior: auto;
  }
}