/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .icon { flex-shrink: 0; }

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(18, 59, 93, 0.15); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 1px 2px rgba(47, 143, 139, 0.2); }
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.btn-secondary { background: #fff; border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface-muted); border-color: var(--color-accent); color: var(--color-primary); }

.btn-outline { background: transparent; border-color: currentColor; color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-soft); }

.btn-danger { background: #fff; border-color: var(--color-danger-text); color: var(--color-danger-text); }
.btn-danger:hover { background: var(--color-danger-bg); }

.btn-sm { padding: 7px 15px; font-size: 0.82rem; }
.btn-block { width: 100%; }

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* Formulários */
.field { margin-bottom: var(--space-4); }

.field label,
.field legend {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  margin-bottom: var(--space-2);
  color: var(--color-grafite);
}

.field .hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.field .error-message {
  font-size: 0.82rem;
  color: var(--color-danger-text);
  margin-top: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea { min-height: 120px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: var(--shadow-focus);
}

input.has-error, select.has-error, textarea.has-error {
  border-color: var(--color-danger-text);
}

/* Campo de senha com botão de mostrar/ocultar */
.password-field { position: relative; }
.password-field input { padding-right: 84px; }
.password-field .toggle-password-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.password-field .toggle-password-btn:hover { background: var(--color-accent-soft); }

.checkbox-field, .radio-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.checkbox-field input, .radio-field input { width: auto; margin-top: 4px; accent-color: var(--color-accent); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.card + .card { margin-top: var(--space-5); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Ícone circular de destaque, usado em stat-cards, empty-states e cards */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  flex-shrink: 0;
}
.icon-badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.icon-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.icon-badge--lg { width: 60px; height: 60px; border-radius: var(--radius-lg); }

/* Grid de indicadores (dashboard) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; }

.stat-card__value {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  line-height: 1;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-card__label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Tabelas */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

th, td {
  text-align: left;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

thead th {
  background: var(--color-surface-muted);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

tbody tr { transition: background-color var(--transition-fast); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background-color: var(--color-bg-alt); }

.table-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-neutral { background: var(--color-surface-muted); color: var(--color-text-muted); }

/* Alertas / flash messages */
.alert {
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-shadow: var(--shadow-xs);
}
.alert__icon { flex-shrink: 0; margin-top: 1px; }
.alert__close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}
.alert__close:hover { opacity: 1; }
.alert.is-dismissed { display: none; }

.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: #bfe3cf; }
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: #f2c6bd; }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #f2d9b3; }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: #c7e2ea; }

/* Estado vazio */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-muted);
}
.empty-state h3 { color: var(--color-text); margin-top: var(--space-4); }
.empty-state .icon-badge {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.empty-state p { max-width: 42ch; margin-left: auto; margin-right: auto; }
.empty-state .btn { margin-top: var(--space-2); }

/* Paginação */
.pagination {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.88rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.pagination a:hover { background: var(--color-surface-muted); border-color: var(--color-accent); text-decoration: none; }
.pagination .is-current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* Filtros de listagem */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.filter-bar .field { margin-bottom: 0; min-width: 160px; }

/* Player de aula */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--color-grafite);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame__focus-toggle {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(18, 43, 52, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.video-frame__focus-toggle:hover { background: rgba(18, 43, 52, 0.85); }
.video-frame__focus-toggle .icon-compress { display: none; }
.live-class-stage.is-focus-mode .video-frame__focus-toggle .icon-expand { display: none; }
.live-class-stage.is-focus-mode .video-frame__focus-toggle .icon-compress { display: inline-flex; }

/*
 * Modo "foco total": o próprio bloco vídeo + chat vira um overlay fixo
 * cobrindo a tela inteira (por cima da sidebar/topbar), para o aluno ver o
 * vídeo bem maior. Sair volta o bloco ao lugar original no fluxo da página.
 */
.live-class-stage.is-focus-mode {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--color-bg);
  padding: var(--space-5);
  margin: 0;
}
body.has-focus-mode {
  overflow: hidden;
}

/* Tags de prioridade de avisos */
.priority-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.priority-dot.normal { background: var(--color-info); }
.priority-dot.important { background: var(--color-warning); }
.priority-dot.urgent { background: var(--color-danger-text); }

/* Lista de módulos/aulas (admin) */
.reorder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reorder-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reorder-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }

.reorder-item__controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reorder-item__body { flex: 1; min-width: 0; }
.reorder-item__title { font-weight: 600; }
.reorder-item__meta { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.utility-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Item de navegação simples (links de continuidade, dashboard) */
.media-row {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}
.media-row__thumb {
  width: 220px;
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .card { padding: var(--space-5); }
  .stat-card__value { font-size: 1.75rem; }
}

/*
 * Layout do vídeo + chat lado a lado (área do aluno). O vídeo mantém a
 * proporção 16:9 via padding-top (não pode "esticar" no eixo cruzado do
 * flex, senão a proporção quebra), e o chat estica para acompanhar a altura
 * resultante do vídeo — por isso vira uma coluna flex com as mensagens
 * ocupando o espaço disponível e rolando internamente.
 */
.live-class-stage {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}
.live-class-stage .video-frame {
  flex: 1 1 0;
  min-width: 0;
  align-self: flex-start;
}
.live-class-stage .live-chat {
  flex: 0 0 320px;
  min-width: 0;
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.live-class-stage .live-chat .live-chat__messages {
  flex: 1;
  min-height: 160px;
  max-height: none;
}
@media (max-width: 860px) {
  .live-class-stage {
    flex-direction: column;
  }
  .live-class-stage .video-frame {
    align-self: stretch;
  }
  .live-class-stage .live-chat {
    flex: 1 1 auto;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
  }
  .live-class-stage .live-chat .live-chat__messages {
    max-height: 280px;
  }
}

/* Chat da aula ao vivo */
.live-chat { margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.live-chat__title { font-size: 1rem; margin-bottom: var(--space-3); }
.live-chat__messages {
  max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); background: var(--color-bg-alt); border-radius: var(--radius-md); margin-bottom: var(--space-3);
}
.live-chat__message { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.live-chat__message-meta { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.74rem; color: var(--color-text-muted); margin-bottom: 2px; }
.live-chat__message p { margin: 0; font-size: 0.88rem; word-break: break-word; }
.live-chat__delete { display: block; margin-top: 4px; background: none; border: none; color: var(--color-danger-text); font-size: 0.72rem; font-weight: 600; cursor: pointer; padding: 0; }
.live-chat__delete:hover { text-decoration: underline; }
.live-chat__error { color: var(--color-danger-text); font-size: 0.82rem; margin-bottom: var(--space-2); }
.live-chat__form { display: flex; gap: var(--space-2); }
.live-chat__form input { flex: 1; }