/* Core colors */
:root {
  --bg: #122444;
  --text: #ffffff;
  --section: #4D5B73;
  --btn-green: #36DE8C;
  --btn-red: #e53935;
  /* Larguras fixas das 5 primeiras colunas (em px) */
  --w-col-1: 100px; /* Turma */
  --w-col-2: 120px; /* Disciplina */
  --w-col-3: 140px; /* IdTurmaDisciplina */
  --w-col-4: 100px; /* IdSubturma */
  --w-col-5: 100px; /* Subturma */
}

/* Estilos para a coluna Status */
.status-cell {
  width: 300px;
  max-width: 300px;
  min-width: 300px;
  vertical-align: top;
  padding: 8px;
}

.status-content {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.2;
  color: #333;
}

.status-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background: var(--bg);
  color: var(--text);
}

.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 20px;
  gap: 8px;
}

.header-left { justify-self: start; }
.header-right { justify-self: end; }
.header-title { text-align: center; margin: 0; font-size: 1.6rem; font-weight: 600; }

.logo {
  height: 42px;
  width: auto;
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 20px 24px;
}

.filters-section {
  background: var(--section);
  border-radius: 10px;
  width: 90%;
  margin: 0 auto;
  padding: 16px;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.form-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label { font-size: 0.95rem; }

select {
  appearance: none;
  background: #2f3a4d;
  color: var(--text);
  border: 1px solid #6b7a94;
  border-radius: 8px;
  padding: 10px 12px;
}

.actions { display: flex; align-items: end; }

/* Buttons */
.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary { background: var(--btn-green); color: #0e3a2a; }
.btn-success { background: var(--btn-green); color: #0e3a2a; }
.btn-danger { background: var(--btn-red); color: #ffffff; }

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.table-section {
  background: var(--section);
  border-radius: 10px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

#table-container {
  width: 100%;
  overflow-x: auto;
}

.cronograma-table {
  width: 100%;
  border-collapse: collapse;
  background: #2f3a4d;
  border-radius: 8px;
  /* Não usar overflow:hidden aqui para não cortar colunas sticky */
}

.cronograma-table th {
  background: #1a2332;
  color: var(--text);
  padding: 12px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #4D5B73;
  min-width: 120px;
}

.cronograma-table .sub-header th {
  background: #2a3441;
  font-size: 0.9rem;
  padding: 10px 12px;
}

.cronograma-table td {
  padding: 12px;
  border-bottom: 1px solid #4D5B73;
  vertical-align: top;
  min-width: 120px;
}

.cronograma-table tbody tr:hover {
  background: #3a4558;
}

/* Células das colunas fixas */
.fixed-cell {
  background: #1a2332;
  font-weight: 500;
}

/* Inputs e selects na tabela */
.table-input, .table-select {
  width: 100%;
  background: #2f3a4d;
  color: var(--text);
  border: 1px solid #6b7a94;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.table-input:focus, .table-select:focus {
  outline: none;
  border-color: var(--btn-green);
}

/* Multiselect de horário */
.horario-multiselect {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.horario-multiselect select {
  flex: 1;
  background: #2f3a4d;
  color: var(--text);
  border: 1px solid #6b7a94;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.9rem;
  min-height: 120px;
}

.horario-multiselect select:focus {
  outline: none;
  border-color: var(--btn-green);
}

.horario-multiselect option {
  padding: 4px 8px;
  background: #2f3a4d;
  color: var(--text);
}

.horario-multiselect option:checked {
  background: var(--btn-green);
  color: #0e3a2a;
  font-weight: 600;
}

/* Botão de excluir dentro do campo horário */
.campo-horario .btn-remove-sublinha {
  background: var(--btn-red);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Checkbox de horário (mantido para compatibilidade) */
.horario-checkbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.horario-checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.horario-checkbox input[type="checkbox"] {
  margin: 0;
}

/* Botões de ação */
.btn-add-sublinha {
  background: var(--btn-green);
  color: #0e3a2a;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}

.btn-remove-sublinha {
  background: var(--btn-red);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-add-sublinha:hover, .btn-remove-sublinha:hover {
  opacity: 0.8;
}

/* Sublinhas */
.sublinha {
  background: #3a4558;
  border-top: 1px solid #4D5B73;
  padding: 8px 0;
}

.sublinha .fixed-cell {
  background: #2a3441;
  border-right: 2px solid #4D5B73;
}

.sublinha-spacer {
  background: #3a4558;
  border-right: 2px solid #4D5B73;
  padding: 0;
  width: calc(var(--w-col-1) + var(--w-col-2) + var(--w-col-3) + var(--w-col-4) + var(--w-col-5));
}

/* Coluna do botão adicionar */
.add-button-cell {
  background: #1a2332;
  text-align: center;
  vertical-align: middle;
  border-right: 2px solid #4D5B73;
}

/* Coluna de checkbox */
.checkbox-cell {
  background: #1a2332;
  text-align: center;
  vertical-align: middle;
  border-right: 2px solid #4D5B73;
}

/* Estilos para checkboxes */
.select-all-checkbox,
.row-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--btn-green);
}

.select-all-checkbox {
  margin: 0;
}

.row-checkbox {
  margin: 0;
}

/* Colunas ocultas */
.hidden-column {
  display: none;
}


/* Primeira sublinha (dentro da linha principal) */
.detalhes-container {
  position: relative;
}

.primeira-sublinha {
  width: 100%;
}

.sublinha-campos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.campo-regime,
.campo-inicio,
.campo-fim,
.campo-dia,
.campo-sala,
.campo-professor,
.campo-horario,
.campo-acoes {
  display: flex;
  align-items: center;
}

.campo-acoes {
  justify-content: center;
}

/* Larguras específicas das colunas */
.cronograma-table th:nth-child(1), .cronograma-table td:nth-child(1) { min-width: 50px; width: 50px; } /* Checkbox */
.cronograma-table th:nth-child(2), .cronograma-table td:nth-child(2) { width: var(--w-col-1); min-width: var(--w-col-1); } /* Turma */
.cronograma-table th:nth-child(3), .cronograma-table td:nth-child(3) { width: var(--w-col-2); min-width: var(--w-col-2); } /* Disciplina */
.cronograma-table th:nth-child(4), .cronograma-table td:nth-child(4) { display: none; } /* IdTurmaDisciplina - OCULTA */
.cronograma-table th:nth-child(5), .cronograma-table td:nth-child(5) { display: none; } /* IdSubturma - OCULTA */
.cronograma-table th:nth-child(6), .cronograma-table td:nth-child(6) { width: var(--w-col-5); min-width: var(--w-col-5); } /* Subturma */
.cronograma-table th:nth-child(7), .cronograma-table td:nth-child(7) { min-width: 100px; } /* Adicionar */
.cronograma-table th:nth-child(8), .cronograma-table td:nth-child(8) { min-width: 100px; } /* Regime */
.cronograma-table th:nth-child(9), .cronograma-table td:nth-child(9) { min-width: 120px; } /* Início */
.cronograma-table th:nth-child(10), .cronograma-table td:nth-child(10) { min-width: 120px; } /* Fim */
.cronograma-table th:nth-child(11), .cronograma-table td:nth-child(11) { min-width: 120px; } /* Dia */
.cronograma-table th:nth-child(12), .cronograma-table td:nth-child(12) { min-width: 100px; } /* Sala */
.cronograma-table th:nth-child(13), .cronograma-table td:nth-child(13) { min-width: 150px; } /* Professor */
.cronograma-table th:nth-child(14), .cronograma-table td:nth-child(14) { min-width: 140px; } /* Horário */

/* Colunas fixas (1, 2, 3, 6, 7) com position: sticky - pulando colunas 4 e 5 (ocultas) */
.cronograma-table th:nth-child(1),
.cronograma-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; }
.cronograma-table th:nth-child(2),
.cronograma-table td:nth-child(2) { position: sticky; left: 50px; z-index: 2; }
.cronograma-table th:nth-child(3),
.cronograma-table td:nth-child(3) { position: sticky; left: calc(50px + var(--w-col-1)); z-index: 2; }
.cronograma-table th:nth-child(6),
.cronograma-table td:nth-child(6) { position: sticky; left: calc(50px + var(--w-col-1) + var(--w-col-2)); z-index: 2; }
.cronograma-table th:nth-child(7),
.cronograma-table td:nth-child(7) { position: sticky; left: calc(50px + var(--w-col-1) + var(--w-col-2) + var(--w-col-5)); z-index: 2; }

/* Fundo e separadores para colunas fixas (excluindo colunas ocultas) */
.cronograma-table td:nth-child(1), .cronograma-table td:nth-child(2), .cronograma-table td:nth-child(3), 
.cronograma-table td:nth-child(6), .cronograma-table td:nth-child(7) { background: #1a2332; box-shadow: 1px 0 0 #4D5B73 inset; }
.cronograma-table th:nth-child(1), .cronograma-table th:nth-child(2), .cronograma-table th:nth-child(3), 
.cronograma-table th:nth-child(6), .cronograma-table th:nth-child(7) { background: #1a2332; z-index: 3; }

/* Responsividade da tabela */
@media (max-width: 1200px) {
  .cronograma-table {
    font-size: 0.9rem;
  }
  
  .cronograma-table th,
  .cronograma-table td {
    padding: 8px 6px;
  }
}

@media (max-width: 900px) {
  .cronograma-table {
    font-size: 0.8rem;
  }
  
  .horario-multiselect select {
    min-height: 100px;
  }
}

.footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Responsiveness */
@media (max-width: 1200px) {
  .filters-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .filters-row { grid-template-columns: 1fr 1fr; }
}

/* Campo de professor com busca */
.campo-professor-busca {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.professor-input-group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.professor-codigo {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #6b7a94;
  border-radius: 4px;
  background: #2f3a4d;
  color: var(--text);
  font-size: 0.9rem;
}

.professor-codigo:focus {
  outline: none;
  border-color: var(--btn-green);
  box-shadow: 0 0 0 2px rgba(54, 222, 140, 0.2);
}

.btn-buscar-professor {
  background: var(--btn-green);
  color: #0e3a2a;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}

.btn-buscar-professor:hover {
  opacity: 0.8;
}

.btn-buscar-professor:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.professor-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #2f3a4d;
  border-radius: 4px;
  border: 1px solid #6b7a94;
}

.professor-nome {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.btn-limpar-professor {
  background: var(--btn-red);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: opacity 0.2s;
}

.btn-limpar-professor:hover {
  opacity: 0.8;
}

@media (max-width: 600px) {
  .app-header { grid-template-columns: auto 1fr auto; }
  .header-title { font-size: 1.2rem; }
  .filters-row { grid-template-columns: 1fr; }
  .filters-section { width: 100%; }
}