/* ========================================

     VARIÁVEIS E RESET BÁSICO

     ======================================== */

:root {

  --main-line-color: hsl(234, 62%, 86%);

  --side-line-color: hsl(350, 100%, 91%);

  --paper-color: #ffffff;

  --ink-color: hsl(0, 0%, 12%);

  --primary-color: #051d3b;

}



#crp-student-area * {

  box-sizing: border-box;

}



/* ========================================

     EDITOR QUILl (PAPEL PAUTADO)

     ======================================== */

#editor-container,

#motivador-editor-container {

  height: 600px;

  background: #f0f0f0;

  border-radius: 0.75rem;

  overflow: hidden; /* Importante para conter o scroll interno */

  display: flex;

  flex-direction: column;

  border: 1px solid #e2e8f0;

}



.ql-toolbar.ql-snow {

  background: #fff;

  border: none !important;

  border-bottom: 1px solid #ddd !important;

  z-index: 10;

}



.ql-editor {

  background-color: var(--paper-color);

  margin: 2rem auto 4rem auto;

  width: 90%;

  max-width: 800px;

  min-height: 1000px;

  padding: 3lh 3rem 1rem 5.5rem !important;

  font-family: "Georgia", serif;

  font-size: 1.2rem;

  line-height: 1.42em;

  color: var(--ink-color);



  /* Gradientes da folha pautada */

  background-image:

    linear-gradient(

      90deg,

      transparent,

      transparent 4.5rem,

      var(--side-line-color) 4.5rem,

      var(--side-line-color) 4.65rem,

      transparent 4.65rem

    ),

    linear-gradient(

      var(--paper-color),

      var(--paper-color) 3lh,

      transparent 3lh

    ),

    repeating-linear-gradient(

      to bottom,

      transparent,

      transparent calc(1.42em - 1px),

      var(--main-line-color) calc(1.42em - 1px),

      var(--main-line-color) 1.42em

    );



  box-shadow: 0 4px 15px rgb(0 0 0 / 0.1);

  overflow-y: visible;

}



.ql-container.ql-snow {

  border: none !important;

  overflow-y: auto;

  flex: 1;

}



.ql-editor p {

  margin-bottom: 0;

  min-height: 1.42em;

}



/* ========================================

     DATA TABLES MODERNIZADO & RESPONSIVO

     ======================================== */



/* Container geral do wrapper */

.dataTables_wrapper {

  font-family: inherit;

}



/* Barra de Ferramentas (Filtro + Paginação Topo) */

.dataTables_wrapper .flex.mb-4 {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem !important;

}



/* Input de Busca Estilizado */

.dataTables_filter {

  flex: 1;

  min-width: 200px;

}



.dataTables_filter label {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: bold;

  color: #64748b;

  font-size: 0.875rem;

}



.dataTables_filter input {

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 0.5rem;

  padding: 0.5rem 1rem;

  font-size: 0.875rem;

  width: 100%;

  max-width: 300px;

  transition: all 0.2s;

  outline: none;

}



.dataTables_filter input:focus {

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(5, 29, 59, 0.1);

}



/* Select de "Exibir X registros" */

.dataTables_length {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.875rem;

  color: #64748b;

}



.dataTables_length select {

  border: 1px solid #e2e8f0;

  border-radius: 0.5rem;

  padding: 0.4rem 2rem 0.4rem 0.8rem;

  background-color: #fff;

  cursor: pointer;

  outline: none;

}



/* Rodapé (Info + Paginação) */

.dataTables_wrapper .flex.mt-4 {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  align-items: center;

  justify-content: space-between;

  margin-top: 1.5rem !important;

  border-top: 1px solid #f1f5f9;

  padding-top: 1rem;

}



.dataTables_info {

  font-size: 0.875rem;

  color: #64748b;

}



.dataTables_paginate {

  display: flex;

  gap: 0.5rem;

}



.paginate_button {

  padding: 0.5rem 1rem;

  border: 1px solid #e2e8f0;

  background: #fff;

  color: #64748b;

  border-radius: 0.5rem;

  cursor: pointer;

  font-size: 0.875rem;

  transition: all 0.2s;

}



.paginate_button:hover {

  background: #f8fafc;

  border-color: #cbd5e1;

}



.paginate_button.current {

  background: var(--primary-color);

  color: #fff;

  border-color: var(--primary-color);

}



.paginate_button.disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



/* ========================================

     MOBILE CARDS (Transformação da Tabela)

     ======================================== */

@media (max-width: 768px) {

  /* Esconde o cabeçalho original */

  #tabelaHistorico thead {

    display: none;

  }



  /* Transforma a tabela em blocos */

  #tabelaHistorico,

  #tabelaHistorico tbody,

  #tabelaHistorico tr,

  #tabelaHistorico td {

    display: block;

    width: 100%;

  }



  /* Estilo do Card (Linha da Tabela) */

  #tabelaHistorico tr {

    background: #fff;

    margin-bottom: 1rem;

    border-radius: 1rem;

    padding: 1rem;

    box-shadow:

      0 4px 6px -1px rgba(0, 0, 0, 0.1),

      0 2px 4px -1px rgba(0, 0, 0, 0.06);

    border: 1px solid #f1f5f9;

    position: relative;

  }



  /* Estilo das Células dentro do Card */

  #tabelaHistorico td {

    padding: 0.5rem 0;

    text-align: left !important;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px dashed #e2e8f0;

  }



  #tabelaHistorico td:last-child {

    border-bottom: none;

    padding-top: 1rem;

    justify-content: flex-end; /* Botão de ação alinhado à direita */

  }



  /* Pseudo-elemento para mostrar o Título da Coluna */

  #tabelaHistorico td::before {

    content: attr(data-label);

    font-size: 0.75rem;

    font-weight: 700;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-right: 1rem;

    flex-shrink: 0; /* Impede que o título encolha */

  }



  /* Ajuste fino para o conteúdo da célula */

  #tabelaHistorico td > div,

  #tabelaHistorico td > span,

  #tabelaHistorico td > a {

    text-align: right;

    word-break: break-word;

  }

}



/* Tooltip e Upload Styles (Mantidos) */

#btn-text-tooltip {

  pointer-events: none;

  will-change: opacity, transform, visibility;

}

#btn-text-wrapper.has-tooltip-active:hover #btn-text-tooltip,

#btn-text-tooltip[style*="opacity: 1"] {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateX(-50%) translateY(0) !important;

}