/* KhaosClass — Identidade KhaosLab: minimalista, futurista, institucional premium */
:root {
  --bg: #0B0B0D;
  --surface: #141416;
  --surface-2: #1C1C20;
  --surface-hover: #222227;
  --border: #2A2A2E;
  --border-light: #333338;
  --text: #F6F6F8;
  --text-muted: #8A8B94;
  --text-dim: #5A5B63;
  --red: #C8325A;
  --orange: #E36A25;
  --yellow: #F3D027;
  --green: #49A34B;
  --teal: #1D8E9F;
  --blue: #244186;
  --purple: #733C87;
  --magenta: #911F5A;
  --accent: #F3D027;
  --accent-hover: #EBB328;
  --accent-dim: rgba(243, 208, 39, 0.12);
  --success: #49A34B;
  --danger: #C8325A;
  --warning: #E36A25;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w: 248px;
  --topbar-h: 56px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ============ OVERLAY ============ */
.menu-overlay {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.55);
  z-index: 29;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.menu-overlay.open { opacity:1; pointer-events:auto; }

/* ============ SIDEBAR ============ */
.sidebar {
  position: fixed; top:0; left:0; height:100vh;
  width: var(--sidebar-w);
  z-index: 30;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.sidebar.open { transform: translateX(0); }

.sidebar-inner {
  width: 100%; height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.logo { display:flex; align-items:center; gap:10px; margin-bottom:24px; font-size:1.2em; font-weight:700; letter-spacing:-0.5px; }
.logo-icon { width:28px; height:28px; border-radius:50%; background:conic-gradient(from 0deg, var(--red), var(--orange), var(--yellow), var(--green), var(--teal), var(--blue), var(--purple), var(--magenta), var(--red)); flex-shrink:0; }
.logo-text { color:var(--text); }
.turma-selector { margin-bottom:24px; }
.turma-selector label { font-size:0.7em; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim); margin-bottom:8px; display:block; font-weight:600; }
.select-turma { width:100%; padding:11px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:inherit; font-size:0.88em; cursor:pointer; transition:var(--transition); }
.select-turma:hover { border-color:var(--accent); }
.select-turma:focus { outline:none; border-color:var(--accent); }
.select-turma option { background:var(--surface); color:var(--text); }
.nav-menu { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item { padding:12px 16px; border:none; background:transparent; color:var(--text-muted); font-family:inherit; font-size:0.88em; font-weight:600; text-align:left; cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition); position:relative; }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--accent-dim); color:var(--accent); }
.nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--accent); border-radius:0 4px 4px 0; }
.sidebar-footer { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.footer-link { font-size:0.78em; color:var(--text-dim); text-decoration:none; transition:var(--transition); }
.footer-link:hover { color:var(--accent); }

/* ============ TOPBAR ============ */
.topbar {
  position: sticky; top:0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h);
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Hambúrguer */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: var(--transition);
}
.menu-toggle:active span { background: var(--accent); }

.topbar h1 { font-size:1.3em; font-weight:700; color:var(--text); letter-spacing:-0.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.turma-badge { font-size:0.72em; font-weight:700; padding:5px 12px; background:var(--accent-dim); color:var(--accent); border:1px solid rgba(243,208,39,0.25); border-radius:999px; white-space:nowrap; flex-shrink:0; }

/* ============ MAIN ============ */
.main { padding: 20px 16px 32px; max-width: 1080px; width: 100%; margin: 0 auto; }
.tab { display:none; }
.tab.active { display:block; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:14px; }
.card h3 { font-size:0.95em; font-weight:700; margin-bottom:14px; color:var(--text); }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; transition:var(--transition); min-width:0; }
.stat-card:hover { border-color:var(--border-light); }
.stat-label { font-size:0.68em; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim); margin-bottom:8px; font-weight:600; }
.stat-value { font-size:1.8em; font-weight:700; color:var(--accent); word-break:break-word; }

/* Forms */
.input, .textarea, select.input { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:0.88em; color:var(--text); background:var(--surface-2); transition:var(--transition); }
.input:focus, .textarea:focus, select.input:focus { outline:none; border-color:var(--accent); background:var(--surface-hover); }
.input::placeholder, .textarea::placeholder { color:var(--text-dim); }
.input-sm { max-width:180px; }
.textarea { min-height:80px; resize:vertical; }
label { font-size:0.82em; font-weight:600; color:var(--text-muted); display:inline-block; margin-right:8px; }
.hint { font-size:0.82em; color:var(--text-muted); margin-bottom:14px; }
.muted { color:var(--text-muted); font-size:0.9em; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.center { justify-content:center; }

/* Buttons */
.btn { padding:10px 20px; border:none; border-radius:999px; font-family:inherit; font-size:0.84em; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.btn-primary { background:var(--accent); color:#1a1a1a; }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 0 20px rgba(243,208,39,0.25); }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:6px 14px; font-size:0.78em; }
.btn-danger { background:transparent; color:var(--danger); border:1px solid var(--border); }
.btn-danger:hover { border-color:var(--danger); background:rgba(200,50,90,0.08); }

/* Lists */
.student-list, .announcements, .ranking, .cal-list, .atividades-list, .prazos-list { display:flex; flex-direction:column; gap:8px; }
.student-item, .announcement-item, .ranking-item, .cal-item, .atividade-item { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; }
.student-item { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.student-item:hover, .announcement-item:hover, .ranking-item:hover, .cal-item:hover, .atividade-item:hover { border-color:var(--border-light); background:var(--surface-hover); }
.student-name { font-weight:600; font-size:0.9em; color:var(--text); }
.student-squad { font-size:0.78em; color:var(--text-dim); margin-top:2px; }
.student-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Squads */
.squads-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:14px; }
.squad-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; transition:var(--transition); position:relative; overflow:hidden; }
.squad-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--teal),var(--blue),var(--purple)); }
.squad-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-light); }
.squad-name { font-weight:700; font-size:1.05em; margin-bottom:6px; }
.squad-points { font-size:1.4em; font-weight:700; color:var(--accent); }
.squad-members { font-size:0.78em; color:var(--text-dim); margin-top:4px; }

/* Timer */
.timer-display { font-size:3em; font-weight:300; text-align:center; color:var(--accent); font-family:'Courier New',monospace; margin:14px 0; letter-spacing:2px; }
.result-box { margin-top:14px; padding:20px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); text-align:center; font-size:1.2em; font-weight:700; min-height:56px; display:flex; align-items:center; justify-content:center; color:var(--accent); }

/* Announcements */
.announcement-title { font-weight:700; color:var(--accent); margin-bottom:8px; }
.announcement-content { font-size:0.9em; line-height:1.5; color:var(--text); }
.announcement-date { font-size:0.78em; color:var(--text-dim); margin-top:8px; }

/* Ranking */
.ranking-position { font-size:1.2em; font-weight:700; color:var(--accent); width:32px; }
.ranking-name { flex:1; font-weight:600; font-size:0.9em; }
.ranking-kairos { font-weight:700; color:var(--accent); }

/* Calendar */
.cal-info { flex:1; }
.cal-titulo { font-weight:600; font-size:0.9em; }
.cal-data { font-size:0.78em; color:var(--text-dim); }
.cal-tipo { font-size:0.72em; padding:3px 10px; border-radius:999px; font-weight:700; margin-right:8px; }
.cal-tipo.prazo { background:rgba(200,50,90,0.15); color:var(--red); }
.cal-tipo.prova { background:rgba(227,106,37,0.15); color:var(--orange); }
.cal-tipo.evento { background:rgba(115,60,135,0.15); color:var(--purple); }
.cal-tipo.feriado { background:rgba(73,163,75,0.15); color:var(--green); }
.cal-delete { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1.1em; padding:4px; transition:var(--transition); }
.cal-delete:hover { color:var(--danger); }
.prazo-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.prazo-item:last-child { border-bottom:none; }
.prazo-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:7px; }
.prazo-dot.prazo { background:var(--red); }
.prazo-dot.prova { background:var(--orange); }
.prazo-titulo { font-weight:600; font-size:0.9em; }
.prazo-data { font-size:0.78em; color:var(--text-dim); }

/* Activities */
.atividade-info { flex:1; }
.atividade-nome { font-weight:600; font-size:0.9em; }
.atividade-meta { font-size:0.78em; color:var(--text-dim); margin-top:2px; }
.atividade-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.peso-badge { font-size:0.72em; padding:3px 10px; border-radius:999px; background:var(--accent-dim); color:var(--accent); font-weight:700; border:1px solid rgba(243,208,39,0.2); }

/* Boletim */
.boletim-table { width:100%; border-collapse:collapse; font-size:0.82em; }
.boletim-table th, .boletim-table td { padding:9px 10px; text-align:center; border-bottom:1px solid var(--border); }
.boletim-table th { font-weight:600; color:var(--text-dim); text-transform:uppercase; font-size:0.72em; letter-spacing:1px; }
.boletim-table td.aluno-name { text-align:left; font-weight:600; color:var(--text); }
.boletim-table .aprovado { color:var(--success); font-weight:700; }
.boletim-table .reprovado { color:var(--danger); font-weight:700; }
.boletim-table .pendente { color:var(--warning); font-weight:700; }

/* Misc */
input[type="checkbox"] { accent-color:var(--accent); width:18px; height:18px; cursor:pointer; }
input[type="radio"] { accent-color:var(--accent); cursor:pointer; }
input[type="date"] { color-scheme: dark; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-light); }

/* ============ MOBILE DEFAULT (<=900px) ============ */
@media (max-width: 900px) {
  .main { padding: 16px 14px 28px; }
  .topbar { padding: 0 14px; }
  .topbar h1 { font-size: 1.15em; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 16px 14px; }
  .stat-value { font-size: 1.6em; }
  .card { padding: 16px 14px; margin-bottom: 12px; }
  .row, .row-between { align-items: stretch; }
  .row > * { width: 100%; }
  .btn, .btn-primary, .btn-ghost, .btn-danger { width: 100%; justify-content: center; }
  .student-item, .cal-item, .atividade-item, .ranking-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .student-actions, .atividade-actions { width: 100%; justify-content: flex-start; }
  .timer-display { font-size: 2.5em; letter-spacing: 1px; }
  .result-box { padding: 16px 12px; font-size: 1.05em; }
  .boletim-table { font-size: 0.72em; display: block; overflow-x: auto; white-space: nowrap; }
  .boletim-table th, .boletim-table td { padding: 8px 8px; }
}

/* ============ TELAS PEQUENAS (<=420px) ============ */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 1.05em; }
}

/* ============ DESKTOP (>=901px) ============ */
@media (min-width: 901px) {
  .menu-toggle { display: none; }
  .menu-overlay { display: none !important; }
  .sidebar {
    transform: translateX(0);
    transition: none;
  }
  .main {
    margin-left: var(--sidebar-w);
    padding: 36px;
    max-width: 1080px;
  }
  .topbar {
    position: relative;
    border-bottom: none;
    padding: 0;
    height: auto;
    margin-bottom: 24px;
    background: transparent;
  }
  .topbar h1 { font-size: 1.9em; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-value { font-size: 2.2em; }
  .card { padding: 24px; }
  .squads-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .timer-display { font-size: 3.5em; }
  .row > * { width: auto; }
  .btn { width: auto; }
}