/* frontend/assets/css/main.css */

:root {
  --primary: #1a56db;
  --primary-dark: #1341a8;
  --secondary: #6b7280;
  --success: #057a55;
  --danger: #e02424;
  --warning: #e3a008;
  --sidebar-bg: #1e2a3a;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #1a56db;
  --sidebar-width: 240px;
}

/* ── Layout ─────────────────────────────────────────────── */
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f8fafc; }

.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
  transition: transform .3s;
}

.sidebar-brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
.sidebar-brand i { color: var(--primary); font-size: 1.4rem; }

.sidebar-nav { padding: .75rem 0; }
.sidebar-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #64748b;
  padding: .75rem 1rem .25rem;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: .875rem;
  border-radius: 0;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav a.active {
  background: rgba(26,86,219,.15);
  color: #fff;
  border-left-color: var(--primary);
}
.sidebar-nav a i { font-size: 1rem; min-width: 18px; }
.sidebar-nav a .nav-text { flex: 1; }
.sidebar-badge { font-size: .7rem; line-height: 1; padding: .25em .5em; }

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 90;
}
.topbar-title { font-weight: 600; font-size: 1rem; color: #111827; }
.topbar-user { font-size: .875rem; color: #6b7280; }

.page-content { padding: 1.5rem; flex: 1; }

/* ── Cards ──────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.25rem;
  border: 1px solid #e5e7eb;
  transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: #111827; line-height: 1; }
.stat-card .stat-label { font-size: .8rem; color: #6b7280; margin-top: .2rem; }

/* ── Tables ─────────────────────────────────────────────── */
.table-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.table-card .table-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.table-card .table-header h5 { margin: 0; font-size: .95rem; font-weight: 600; }
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table thead th { background: #f9fafb; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }

/* ── Badges ─────────────────────────────────────────────── */
.badge-status { font-size: .72rem; padding: .3em .65em; border-radius: 20px; }
.badge-matricula-ativa    { background: #d1fae5; color: #065f46; }
.badge-matricula-pendente { background: #fef3c7; color: #92400e; }
.badge-matricula-removida { background: #f3f4f6; color: #374151; }

/* ── Chips de disciplina ────────────────────────────────── */
.chip-disciplina {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #eff6ff;
  color: #1a56db;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 500;
  padding: .2em .65em;
  white-space: nowrap;
  margin: .15rem .15rem .15rem 0;
}

/* ── Card de matrícula do aluno ─────────────────────────── */
.matricula-card { background:#fff; border-radius:10px; border:1px solid #e5e7eb; margin-bottom:1rem; transition:box-shadow .2s; overflow:hidden; }
.matricula-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); }
.matricula-card.removida { opacity:.6; }
.matricula-card .matricula-header { padding:1rem 1.25rem .75rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.matricula-card .matricula-info .turma-nome { font-weight:600; color:#111827; font-size:.95rem; margin-bottom:.15rem; }
.matricula-card .matricula-info .professor-nome { font-size:.8rem; color:#6b7280; }
.matricula-card .matricula-body { padding:.75rem 1.25rem 1rem; border-top:1px solid #f3f4f6; }
.matricula-card .matricula-acoes { display:flex; flex-direction:column; gap:.4rem; flex-shrink:0; }

/* ── Card de turma (cadastro repetível) ─────────────────── */
.turma-card { border:1.5px solid #e5e7eb; border-radius:10px; padding:1.25rem; margin-bottom:1rem; background:#fff; position:relative; transition:border-color .2s, box-shadow .2s; }
.turma-card:hover { border-color:#1a56db; box-shadow:0 2px 12px rgba(26,86,219,.08); }
.turma-card.is-invalid { border-color:#e02424; box-shadow:0 0 0 3px rgba(224,36,36,.12); }
.turma-card .turma-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.turma-card .turma-num { font-size:.75rem; font-weight:700; color:#1a56db; text-transform:uppercase; letter-spacing:.04em; }
.btn-remover-turma { width:26px; height:26px; border-radius:50%; border:none; background:#fee2e2; color:#b91c1c; display:flex; align-items:center; justify-content:center; font-size:.8rem; cursor:pointer; transition:background .15s; padding:0; line-height:1; }
.btn-remover-turma:hover { background:#fca5a5; }
.btn-remover-turma:disabled { background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }

/* ── Fade de entrada (novos cards) ─────────────────────── */
@keyframes fadeInCard { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.turma-card.entering { animation:fadeInCard .2s ease-out forwards; }

/* ── Tabs de status ─────────────────────────────────────── */
.nav-tabs .nav-link { color:#6b7280; font-size:.875rem; }
.nav-tabs .nav-link.active { color:#1a56db; font-weight:600; border-bottom-color:#1a56db; }
.nav-tabs .nav-link:hover { color:#1341a8; }

/* ── Forms ──────────────────────────────────────────────── */
.form-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
}
.form-label { font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.form-control, .form-select { font-size: .875rem; }

/* ── Questões ────────────────────────────────────────────── */
.questao-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: .75rem;
  background: #fff;
  transition: border-color .2s;
}
.questao-card:hover { border-color: var(--primary); }
.questao-card.selecionada { border-color: var(--primary); background: #eff6ff; }
.questao-numero {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  flex-shrink: 0;
}

/* ── Alternativas ────────────────────────────────────────── */
.alternativa-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: .5rem;
  transition: all .15s;
}
.alternativa-label:hover { border-color: var(--primary); background: #f0f7ff; }
.alternativa-label input { margin-top: .1rem; }
.alternativa-label.correta { border-color: var(--success); background: #f0fdf4; }
.alternativa-label.errada  { border-color: var(--danger);  background: #fef2f2; }

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
}

@media (max-width: 576px) {
  .matricula-card .matricula-header { flex-direction: column; }
  .matricula-card .matricula-acoes  { flex-direction: row; flex-wrap: wrap; }
  .turma-card { padding: 1rem; }
}