/* 현황판 달력. 자체 미디어쿼리를 포함하므로 responsive.css 뒤에 온다.
   원래 style.css 한 파일이었다. base.html 의 읽는 순서를 바꾸면
   나중 규칙이 앞 규칙을 덮어쓰는 순서가 깨진다. */

/* =========================
   현황판 달력
   ========================= */

.calendar-box {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--inset);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}

.calendar-head strong {
  font-size: 16px;
  font-weight: 800;
  min-width: 130px;
  text-align: center;
}

.calendar-nav {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--raised-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
}

.calendar-nav:active {
  box-shadow: var(--inset);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}

.calendar-weekdays {
  margin-bottom: 6px;
}

.calendar-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0;
}

.calendar-weekday.sun { color: var(--danger); }
.calendar-weekday.sat { color: var(--accent); }

.calendar-day {
  position: relative;
  min-height: 46px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  border: 1.5px solid transparent;
}

.calendar-day.out-month .calendar-day-num {
  color: var(--border-strong);
}

.calendar-day.today {
  border-color: var(--border-strong);
}

/* 마감 숙제가 있는 날만 색으로 강조 */
.calendar-day.has-due {
  background: var(--accent-soft);
  border-color: rgba(31, 125, 140, 0.45);
  font-weight: 700;
  cursor: pointer;
}

.calendar-day.has-due:hover {
  background: rgba(31, 125, 140, 0.18);
}

.calendar-day.has-due .calendar-day-num {
  color: var(--accent);
}

.calendar-day.has-due.overdue {
  background: var(--neutral-bg);
  border-color: var(--border-strong);
}

.calendar-day.has-due.overdue .calendar-day-num {
  color: var(--muted);
}

.calendar-day.has-due.selected {
  background: var(--accent);
  border-color: var(--accent);
}

.calendar-day.has-due.selected .calendar-day-num,
.calendar-day.has-due.selected .calendar-day-count {
  color: #ffffff;
}

.calendar-day-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

.calendar-legend .dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  margin-right: 5px;
  vertical-align: -1px;
}

.calendar-legend .dot.due {
  background: rgba(31, 125, 140, 0.35);
  border: 1.5px solid var(--accent);
}

.calendar-legend .dot.overdue {
  background: var(--neutral-bg);
  border: 1.5px solid var(--muted);
}

/* 마감일별 숙제 묶음 */
.assignment-group {
  margin-bottom: 18px;
}

.assignment-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.assignment-group-head strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent);
}

.assignment-group-head.overdue strong {
  color: var(--muted);
}

.assignment-group-head span {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}

/* 교재 순서 조정 */
.order-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.order-controls form {
  margin: 0;
}

.order-no {
  font-weight: 800;
  color: var(--muted);
  min-width: 18px;
}

.order-controls .btn.small {
  min-height: 32px;
  padding: 4px 9px;
  font-size: 11px;
}

.order-controls .btn.small:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 480px) {
  .calendar-day {
    min-height: 42px;
    font-size: 12.5px;
  }

  .calendar-box {
    padding: 14px 12px;
  }
}

/* =========================
   v0.9 모바일 현황판
   첫 화면은 짧게: 한 줄 요약 + 숙제 카드 목록.
   달력·필터는 접어두고, 자세한 건 숙제 상세 화면에서 본다.
   ========================= */

/* ── 오늘 한 줄 요약 ── */
.today-banner {
  background: var(--navy);
  color: #ffffff;
  box-shadow: var(--raised);
  border-radius: var(--r-container);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.today-banner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.today-banner-head .avatar {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.today-banner-date {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.68);
}

.today-banner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.today-banner-facts .fact {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  border-radius: 10px;
  padding: 6px 11px;
}

/* 배너 안에서는 티얼/레드가 어두워 보이므로 밝은 톤으로 */
.today-banner-facts .fact.strong {
  color: #ffffff;
  background: rgba(88, 190, 200, 0.26);
}

.today-banner-facts .fact.overdue {
  color: #ffffff;
  background: rgba(224, 122, 110, 0.30);
}

/* 네이비 배너 위의 버튼: 흰 버튼 = 주요 액션 */
.today-banner-actions .btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  box-shadow: none;
}

.today-banner-actions .btn:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.30);
}

.today-banner-actions .btn.primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}

.today-banner-actions .btn.primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}

.today-banner-actions {
  display: flex;
  gap: 8px;
}

.today-banner-actions .btn { flex: 1; }

/* ── 탭 + 접히는 영역 ── */
.list-controls { margin-bottom: 16px; }

.tab-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tab-row .btn { flex: 1; }

.fold {
  border-top: 1px solid var(--border);
  padding: 10px 0 0;
}

.fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
  list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }

.fold > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
}

.fold[open] > summary::after { transform: rotate(180deg); }

.fold-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 3px 8px;
}

.filter-form {
  display: grid;
  gap: 10px;
  padding: 6px 0 12px;
}

.filter-form label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.filter-actions .btn { flex: 1; }

/* ── 마감일 소제목 ── */
.due-heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  margin: 18px 0 10px;
}

.due-heading.today { color: var(--accent); }
.due-heading.overdue { color: var(--danger, var(--bad)); }

/* ── 숙제 카드 ── */
.assignment-card-list {
  display: grid;
  gap: 10px;
}

.assignment-card {
  display: block;
  background: var(--surface);
  box-shadow: var(--raised-sm);
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
}

.assignment-card:active { box-shadow: var(--inset); }

.assignment-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assignment-card-head strong {
  font-size: 15.5px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}

.assignment-card-head .chev {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.assignment-card-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 10px;
}

.assignment-card-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.assignment-card-counts .count {
  font-size: 12.5px;
  font-weight: 700;
}

.count.danger { color: var(--danger, var(--bad)); }
.count.warn { color: var(--warn, var(--warn)); }
.count.done { color: var(--accent); }
.count.muted { color: var(--muted); font-weight: 600; }

/* ── 진행률 막대 ── */
.progress-bar {
  height: 7px;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--inset);
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

/* ── 숙제 상세 화면 ── */
.status-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.status-header h1 {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
}

.status-header p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 3px 0 0;
}

/* 세그먼트 탭: 연그레이 트랙 위에 흰 알약이 올라간다 */
.status-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
}

.status-tab {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.status-tab.active {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(32, 36, 58, 0.10);
  color: var(--accent);
}

.info-list { margin: 0 0 14px; }

.info-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.info-list dt {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.info-list dd {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0;
  text-align: right;
}

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

.btn-row form { margin: 0; }

/* ── 학생 카드 (표를 대신한다) ── */
.student-card-list {
  display: grid;
  gap: 10px;
}

.student-card {
  background: var(--surface);
  box-shadow: var(--raised-sm);
  border-radius: 16px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
}

.student-card.not_submitted { border-left-color: var(--danger, var(--bad)); }
.student-card.in_progress { border-left-color: var(--warn, var(--warn)); }
.student-card.completed { border-left-color: var(--accent); }

.student-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.student-card-head strong {
  font-size: 15.5px;
  font-weight: 800;
}

.student-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 9px;
}

.student-card-facts strong { color: var(--text); }

.student-card-time {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 10px;
}

.student-card-actions {
  display: flex;
  gap: 8px;
}

.student-card-actions .btn { flex: 1; }

/* ── 문항별 오답 ── */
.hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
}

.question-stat-list {
  display: grid;
  gap: 10px;
}

.question-stat {
  background: var(--surface);
  box-shadow: var(--raised-sm);
  border-radius: 16px;
  padding: 13px 16px;
}

.question-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.question-stat-head strong {
  font-size: 14.5px;
  font-weight: 800;
}

.question-stat-bar {
  height: 7px;
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--inset);
  overflow: hidden;
  margin-bottom: 8px;
}

.question-stat-bar .fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--danger, var(--bad));
}

.question-stat-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.question-stat-facts .danger {
  color: var(--danger, var(--bad));
  font-weight: 700;
}

/* ── 데스크톱: 카드를 여러 열로 ── */
@media (min-width: 768px) {
  .assignment-card-list,
  .student-card-list,
  .question-stat-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .assignment-card-list,
  .student-card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 활성 탭은 '상태' 강조라서 네이비가 아니라 티얼 (design.md §2 역할 분리) */
.tab-row .btn.primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}

.tab-row .btn.primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}