/* Show pointer cursor when hovering student rows in homework tab */
.hw-progress-row:hover { cursor: pointer; }
:root { --bg:#f5f7fb; --ink:#1f2933; --mut:#6b7280; --pri:#19777e; --acc:#93cbcf; }
*{ box-sizing:border-box; }
body{ margin:0; min-height:100vh; font-family:'Poppins',system-ui,Segoe UI,Arial,sans-serif; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; }
header{ display:flex; align-items:center; gap:0.75rem; padding:1.125rem 1.5rem; background:#39384a; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.15); flex-wrap:wrap; }
header img{ height:clamp(2.5rem, 5vw, 3rem); }
header h1{ margin:0; font-size:clamp(1rem, 5vw, 1.4rem); font-weight:600; flex:1; min-width:150px; }
#burger-menu-mount{ display:flex; align-items:center; min-width:3rem; }
.nav-tabs{ display:flex; gap:0; border-bottom:1px solid #e5e7eb; background:#fff; flex-wrap:wrap; }
.nav-tabs a{ padding:0.75rem 1.25rem; text-decoration:none; color:#6b7280; font-weight:500; border-bottom:3px solid transparent; transition:all .2s ease; cursor:pointer; font-size:clamp(0.85rem, 2vw, 1rem); }
.nav-tabs a:hover{ color:#19777e; }
.nav-tabs a.active{ color:#19777e; border-bottom-color:#19777e; background:#fafbfc; }
main{ flex:1 1 auto; width:100%; padding:clamp(1rem, 3vw, 1.5rem); }
.layout{ width:100%; display:flex; flex-direction:column; gap:1.125rem; }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:1rem; box-shadow:0 6px 24px rgba(15,23,42,.08); }
.filters{ display:flex; gap:0.75rem; flex-wrap:wrap; padding:1rem 1.25rem; align-items:center; border-bottom:1px solid #eef2f7; }
.filters .group{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
select, button, input[type="search"]{ font:inherit; padding:0.625rem 0.75rem; border-radius:0.625rem; border:1px solid #cfd8e3; background:#fff; color:var(--ink); font-size:clamp(0.85rem, 2vw, 1rem); }
button.pri{ background:var(--pri); color:#fff; border:1px solid #15676d; cursor:pointer; transition:filter .2s ease; white-space:nowrap; }
button.pri:hover{ filter:brightness(.95); }
button.ghost{ background:#fff; color:var(--pri); border:1px solid var(--pri); cursor:pointer; transition:background .2s ease,color .2s ease; white-space:nowrap; }
button.ghost:hover{ background:rgba(25,119,126,0.08); }
.status{ margin-left:auto; font-size:clamp(0.7rem, 1.5vw, 0.85rem); color:var(--mut); min-height:20px; }
.status.error{ color:#d14343; }
.grid{ display:grid; grid-template-columns:minmax(0,30%) minmax(0,1fr); gap:1.25rem; align-items:start; padding:1.25rem; }
.grid.class-tracker-grid{ grid-template-columns:minmax(0,15%) minmax(0,1fr); }
@media (max-width: 1024px){ .grid{ grid-template-columns:1fr; padding:1.125rem; } }
@media (max-width: 768px){ 
  header h1{ font-size:clamp(0.9rem, 4vw, 1.2rem); }
  .grid.class-tracker-grid{ grid-template-columns:1fr; }
}

table{ width:100%; border-collapse:collapse; font-size:clamp(0.8rem, 1.5vw, 1rem); min-width:100%; }
thead th{ text-align:left; font-weight:600; color:#374151; background:#f3f4f6; position:sticky; top:0; z-index:1; }
th, td{ padding:0.75rem 0.875rem; border-bottom:1px solid #eef2f7; }
tbody tr:hover{ background:#f9fafb; }
.rank{ width:3.5rem; text-align:center; font-weight:600; color:#4b5563; }
.num{ text-align:center; font-variant-numeric:tabular-nums; }
.clickable{ color:#19777e; cursor:pointer; text-decoration:none; }
th.sortable{ cursor:pointer; user-select:none; position:relative; padding-right:1.5rem; }
th.sortable:hover{ background:#e5e7eb; }
th.sortable::after{ content:''; position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); width:0.75rem; height:0.75rem; opacity:0.5; }
th.sortable.sort-asc::after{ content:'▲'; opacity:1; }
th.sortable.sort-desc::after{ content:'▼'; opacity:1; }

.section-title{ padding:0.875rem 1.125rem; border-bottom:1px solid #eef2f7; font-weight:600; color:#374151; font-size:clamp(0.85rem, 1.5vw, 0.95rem); }
.student-panel{ padding:1rem 1.25rem; }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; }
@media (max-width: 760px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:#f7fafc; border:1px solid #e5e7eb; border-radius:0.75rem; padding:0.75rem; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); }
.stat .val{ font-size:clamp(1.2rem, 4vw, 1.5rem); font-weight:700; color:#111827; }
.mut{ color:#6b7280; font-size:clamp(0.7rem, 1.5vw, 0.75rem); }
.bar{ height:0.5rem; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--acc), var(--pri)); width:0%; transition:width .3s ease; }

.lists{ margin-top:0.625rem; }
.lists .row{ display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid #f1f5f9; gap:0.75rem; flex-wrap:wrap; }
.lists .row:last-child{ border-bottom:none; }
.tag{ display:inline-block; padding:0.125rem 0.5rem; border-radius:999px; background:#e6f7f8; color:#17666c; font-size:clamp(0.65rem, 1.5vw, 0.75rem); font-weight:600; }
.empty{ padding:1rem; color:#6b7280; text-align:center; font-size:clamp(0.8rem, 1.5vw, 0.9rem); }
.scroll-wrap{ overflow:auto; max-height:32.5rem; }

.tabs-header{ display:flex; gap:0; border-bottom:1px solid #eef2f7; background:#fafbfc; flex-wrap:wrap; }
.tab-btn{ flex:1; min-width:80px; padding:0.75rem 1rem; background:none; border:none; cursor:pointer; font-size:clamp(0.85rem, 2vw, 0.9rem); font-weight:500; color:#6b7280; transition:all .2s ease; border-bottom:3px solid transparent; }
.tab-btn:hover{ color:#19777e; }
.tab-btn.active{ color:#19777e; border-bottom-color:#19777e; background:#fff; }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* Assignment filter tabs: Active / Ended for Homework panel */
.assignment-filter-tab { flex: 1; padding: 0.55rem 0.75rem; border: none; background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #9ca3af; border-bottom: 2px solid transparent; transition: all .15s ease; }
.assignment-filter-tab:hover { color: #19777e; }
.assignment-filter-tab-active { color: #19777e; border-bottom-color: #19777e; }

/* Assignment tabs container */
#homework-content .assignment-tabs { border-top: 1px solid #e2e8f0; display:flex; gap:0; margin-bottom:8px; padding:8px; background:#f3f4f6; }

.overview-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; padding:1rem 1.25rem; }
@media (max-width: 640px){ .overview-grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.75rem; padding:0.75rem; } }
.chart-container{ position:relative; height:18.75rem; background:#fafbfc; border-radius:0.75rem; padding:0.75rem; border:1px solid #e5e7eb; }
.stat-card{ background:#f7fafc; border:1px solid #e5e7eb; border-radius:0.75rem; padding:1.25rem 1rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.375rem; min-height:9.375rem; }
.stat-card .val{ font-size:clamp(1.5rem, 5vw, 2rem); font-weight:700; color:#111827; }
.stat-card .label{ font-size:clamp(0.85rem, 1.5vw, 0.875rem); color:#6b7280; font-weight:500; }
.stat-card .icon{ font-size:2rem; }
.stat-card .icon-img{ width:3rem; height:3rem; object-fit:contain; }

.game-list{ display:flex; flex-direction:column; gap:0.875rem; padding:1.125rem; }
.games-toolbar{ display:flex; align-items:center; justify-content:flex-start; padding:0.75rem 1.125rem; border-bottom:1px solid #eef2f7; background:#fafbfc; gap:0.75rem; flex-wrap:wrap; }
.game-card{ background:#f7fafc; border:1px solid #e5e7eb; border-radius:0.875rem; padding:1rem; display:flex; flex-direction:column; gap:1.125rem; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); }
.game-header{ display:flex; justify-content:space-between; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.game-name{ font-size:clamp(0.9rem, 2vw, 1rem); font-weight:600; color:#1f2933; }
.game-meta{ font-size:clamp(0.7rem, 1.5vw, 0.8rem); color:#6b7280; }
.game-charts{ display:flex; flex-wrap:wrap; gap:1.125rem; align-items:flex-start; }
.game-chart{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; flex:0 0 140px; }
@media (max-width: 640px){ .game-chart{ flex:0 0 120px; } }
.game-chart.overall canvas{ width:160px !important; height:160px !important; }
@media (max-width: 640px){ .game-chart.overall canvas{ width:120px !important; height:120px !important; } }
.game-chart.mode{ flex-basis:130px; }
.game-chart.mode canvas{ width:120px !important; height:120px !important; }
.chart-caption{ font-size:clamp(0.8rem, 1.5vw, 0.85rem); color:#374151; text-align:center; }
.mode-caption{ font-size:clamp(0.65rem, 1.2vw, 0.75rem); color:#6b7280; text-align:center; max-width:130px; }
.chart-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; gap:0.75rem; flex-wrap:wrap; }
.chart-title{ font-size:clamp(0.85rem, 1.5vw, 0.9rem); font-weight:600; color:#1f2933; }
.chart-toggle{ display:flex; gap:0.375rem; flex-wrap:wrap; }
.toggle-btn{ padding:0.25rem 0.625rem; border-radius:999px; border:1px solid #d1d5db; background:#fff; color:#374151; font-size:clamp(0.65rem, 1.2vw, 0.75rem); cursor:pointer; transition:all .2s ease; white-space:nowrap; }
.toggle-btn:hover{ border-color:#19777e; color:#19777e; }
.toggle-btn.active{ background:#19777e; color:#fff; border-color:#19777e; box-shadow:0 4px 8px rgba(25,119,126,0.2); }

.class-item{ padding:0.75rem 1rem; border-bottom:1px solid #eef2f7; cursor:pointer; transition:all .2s ease; color:#374151; display:flex; justify-content:space-between; align-items:center; font-size:clamp(0.85rem, 1.5vw, 0.95rem); }
.class-item:hover{ background:#fafbfc; color:#19777e; }
.class-item.active{ background:#e6f7f8; color:#19777e; border-left:4px solid #19777e; padding-left:0.75rem; font-weight:600; }
.class-item.hidden{ opacity:0.6; }
.class-item .visibility-badge{ font-size:clamp(0.6rem, 1vw, 0.7rem); padding:0.125rem 0.5rem; border-radius:999px; background:#f3f4f6; color:#6b7280; font-weight:500; white-space:nowrap; }
.class-item.hidden .visibility-badge{ background:#ffe5e5; color:#d14343; }

.top-students{ display:flex; flex-direction:row; gap:1rem; flex-wrap:wrap; }
.student-rank-card{ background:linear-gradient(135deg, #f7fafc 0%, #e6f7f8 100%); border:1px solid #d1e6e8; border-radius:0.75rem; padding:0.75rem; position:relative; overflow:hidden; flex:1 1 calc(33.333% - 0.75rem); min-width:200px; }
.student-rank-card::before{ content:attr(data-rank); position:absolute; top:-0.5rem; right:-0.5rem; width:60px; height:60px; background:#19777e; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; }
.student-rank-card .name{ font-size:clamp(0.9rem, 2vw, 1rem); font-weight:600; color:#1f2933; margin-bottom:0.125rem; }
.student-rank-card .korean-name{ font-size:clamp(0.75rem, 1.5vw, 0.85rem); color:#6b7280; margin-bottom:0.5rem; }
.student-rank-card .stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.375rem; }
.student-rank-card .stat-item{ display:flex; flex-direction:column; }
.student-rank-card .stat-label{ font-size:clamp(0.6rem, 1vw, 0.7rem); color:#6b7280; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.student-rank-card .stat-value{ font-size:clamp(0.95rem, 2vw, 1.1rem); font-weight:700; color:#19777e; }

/* Homework Assignment Cards */
.hw-assignment-card {
  background: #f7fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: all 0.2s ease;
}

.hw-assignment-card:hover {
  border-color: #19777e;
  box-shadow: 0 4px 12px rgba(25,119,126,0.12);
}

.hw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.hw-card-title {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 700;
  color: #1f2933;
}

.hw-card-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hw-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  font-weight: 600;
  white-space: nowrap;
}

.hw-status.active {
  background: #d1f1ec;
  color: #0f5a68;
}

.hw-status.ended {
  background: #fde2e2;
  color: #991b1b;
}

.hw-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hw-meta-item {
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  color: #4b5563;
}

.hw-meta-item strong {
  color: #1f2933;
  font-weight: 600;
}

@media (max-width: 640px){
  main{ padding:1.125rem 0.75rem; }
  .filters{ padding:0.875rem 0.75rem; gap:0.5rem; }
  .grid{ padding:0.875rem; }
  table{ min-width:0; }
  .overview-grid{ grid-template-columns:1fr; }
  
  .hw-assignment-card {
    padding: 1rem;
    gap: 0.75rem;
  }
}