/* ================================================================
   Arquivo: my_style.css
   Autor: Thiago Mateus
   Última Atualização: [Data]
   Descrição: Estilos gerais e específicos para o sistema SIGPM VALE.
              Inclui temas personalizados, estilos para o painel 
              principal e página inicial, e componentes específicos.
================================================================ */

/* ==================== Configurações de Cores e Fontes ==================== */
:root {
  --whiteColorC: #ffffff; /* Branco */
}

/* ==================== Estilos para Medalhas ==================== */
.w-250 {
  width: 200px;
  display: inline-block;
}

/* Corpo da Medalha de Conquistas */
.status-card .card-body-conquistas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px;
  position: relative;
  background-color: var(--darkGrayC);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out; /* Suaviza a transição do box-shadow */
}

/* Efeito de hover na medalha */
.status-card .card-body-conquistas::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  box-shadow:
    inset 0 0 10px #c8aa01,
    inset 0 0 20px #bba55d,
    0 0 5px darkgrey;
  border: 2px solid var(--goldColorC);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  transition:
    box-shadow 0.3s ease-in-out,
    border-color 0.3s ease-in-out; /* Suaviza a transição do box-shadow e border-color */
}

/* Efeito de hover na medalha */
.status-card:hover .card-body-conquistas::before {
  box-shadow:
    inset 0 0 15px #ffff00,
    inset 0 0 30px #ffc700,
    0 0 10px #ffff00; /* Intensifica o box-shadow para um brilho mais forte */
  border-color: #ffff00; /* Muda a cor da borda para um dourado mais brilhante */
}

/* Estilos para o ícone da conquista */
.icon_conquistas img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Configurações da div que contém a imagem */
.status-card .icon_conquistas {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--goldColorC);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilos para o hover sobre o ícone da conquista */
.status-card:hover .icon_conquistas {
  transform: translateY(-5px);
  box-shadow: var(--darkGrayC);
}

/* Estilizando o Mês com efeito 3D */
.military-title {
  color: var(--whiteColorC);
  font-family: "Trajan Pro", serif;
  padding-top: 10px;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    1px 1px 2px var(--darkGrayC),
    2px 2px 4px var(--lightGrayC);
}

/* Estilos para o nome do militar */
.military-name {
  color: var(--whiteColorC);
  font-family: "Trajan Pro", serif;
  font-size: 20px; /* Aumentar o tamanho da fonte */
  color: var(--goldColorC); /* Mudar a cor para dourado, se desejado */
  text-align: center; /* Garantir que o texto esteja centralizado */
  margin-top: 5px; /* Adicionar espaço acima do nome para separá-lo da imagem */
  padding-bottom: 10px; /* Adicionar espaço abaixo do nome para separá-lo do texto abaixo */
  text-shadow: 1px 1px 2px var(--darkGrayC); /* Adicionar sombra para melhor legibilidade */
}

/* Ajuste de tamanhos para dispositivos menores */
@media only screen and (min-width: 576px) {
  .status-card .icon_conquistas {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
}

/* ==================== Estilos para o Campo de Substituto Militar ==================== */
#militar-suggestions {
  max-height: none; /* Remove a limitação de altura */
  overflow: hidden; /* Remove rolagem desnecessária */
  background-color: transparent; /* Fundo transparente */
  border: none; /* Remove a borda */
  box-shadow: none; /* Remove a sombra */
  padding-top: 0.5rem; /* Pequeno espaçamento no topo */
  z-index: 1000;
  color: transparent; /* Esconde o texto por padrão */
  transition: color 0.3s ease; /* Transição suave para o texto */
}

/* Texto de confirmação verde */
#militar-suggestions.success {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.975em;
  color: var(--successColor) !important;
}

/* Texto de erro vermelho */
#militar-suggestions.error {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.975em;
  color: var(--dangerColor) !important;
}

/* Estilo padrão do campo */
#militarSubstituto {
  transition: box-shadow 0.3s ease;
}

/* Estilo quando o nome está selecionado e o campo está readonly */
#militarSubstituto.selected-item {
  box-shadow: 0 0 5px var(--successColor); /* Realce verde ao redor */
  background-color: var(--darkBodyBgColor) !important; /* Cor de fundo */
}

/* Estilo do botão "x" para limpar a seleção */
.clear-button {
  cursor: pointer;
  margin-left: 8px; /* Espaçamento entre o campo e o botão "x" */
  color: var(--dangerColor) !important; /* Cor vermelha para o botão */
  font-size: 1.25rem; /* Tamanho do "x" */
  vertical-align: middle; /* Alinha verticalmente com o input */
  transition: color 0.3s ease; /* Transição suave na cor ao passar o mouse */
}

/* Estilo para quando o usuário passa o mouse sobre o "x" */
.clear-button:hover {
  color: var(--dangerColor02) !important; /* Escurece a cor ao passar o mouse */
}

/* ==================== Estilos para o Emblema ==================== */
.emblema {
  width: 120px;
  height: 120px;
  background: url("/static/images/2CIPM_G.png") no-repeat center center;
  background-size: contain;
  animation: pulsate 2s infinite;
  filter: grayscale(100%); /* Aplica o efeito de tons de cinza */
  opacity: 0.3; /* Reduz a opacidade */
}

@keyframes pulsate {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.char-count {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
  text-align: right; /* Para alinhar o contador à direita */
}

/* ==================== Estilos para o Checklist ==================== */

/* Estilos Gerais */
.checklist-content {
  font-family: Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

@page {
  size: A4;
  margin-top: 3cm; /* Margem superior conforme ABNT */
  margin-left: 3cm; /* Margem esquerda conforme ABNT */
  margin-right: 2cm; /* Margem direita conforme ABNT */
  margin-bottom: 2cm; /* Margem inferior conforme ABNT */
  @bottom-right {
    content: "Página " counter(page) " de " counter(pages);
    font-size: 10px;
    color: #555;
  }
}

/* Cabeçalho do Checklist */
.checklist-header {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.checklist-title {
  color: #2f4f4f;
  margin: 0;
  padding-bottom: 5px;
  font-size: 18px;
}

.checklist-opm {
  color: #696969;
  font-size: 14px;
}

/* Dados do Checklist */
.checklist-data {
  margin-bottom: 20px;
  font-size: 12px;
  color: #333;
}

.checklist-data p {
  margin: 3px 0;
}

/* Divisores */
.checklist-divider {
  border-bottom: 1px solid #ddd;
  margin: 20px 0;
}

/* Título das Seções */
.checklist-section-title {
  color: #2f4f4f;
  margin-bottom: 8px;
  font-size: 14px;
}

/* Tabela de Alterações */
.checklist-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 12px;
}

.checklist-table,
.checklist-table th,
.checklist-table td {
  border: 1px solid #ccc;
}

.checklist-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 3px 4px;
}

.checklist-table th,
.checklist-table td {
  text-align: center;
  padding: 2px 4px;
}

.checklist-table td {
  padding-left: 8px;
  text-align: left;
}

/* Símbolos de Sucesso e Erro */
.symbol-success {
  color: #28a745;
  font-size: 14px;
  font-weight: bold;
}

.symbol-danger {
  color: #dc3545;
  font-size: 14px;
  font-weight: bold;
}

/* Rodapé */
.checklist-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 10px;
  color: #555;
}

/* QR Code */
.checklist-qr-code {
  margin-top: 5px;
  text-align: center;
}

.checklist-qr-code img {
  width: 80px;
  height: 80px;
}

/* Autenticação */
.checklist-authentication {
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #333;
}

.fit-rectangle {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Garante que a imagem inteira seja exibida */
  object-position: center; /* Centraliza a imagem no contêiner */
  background-color: #f8f9fa; /* Fundo para imagens com bordas transparentes */
}

.avatar-preview:hover {
  transform: scale(1.1); /* Zoom no contêiner */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra */
}

.modal-body img {
  max-width: 100%;
  height: auto;
}

.carousel-item img {
  max-height: 80vh; /* Limita a altura para evitar que a imagem ultrapasse a tela */
  object-fit: contain; /* Mantém as proporções da imagem */
}

/* ==================== Estilos para a Página Inicial ==================== */

/* ==================== Botão Base ==================== */
/* Definindo um namespace exclusivo para a página inicial */
.page-inicial .single-top-categories-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  background-color: var(
    --mainColor01
  ); /* Fundo padrão com leve transparência */
  border: 1px solid var(--formBorderColor09); /* Borda leve e elegante */
  color: var(--bodyBgColor); /* Cor do texto */
  cursor: pointer;
  padding: 1rem;
  border-radius: 0.75rem;
  height: 200px; /* Altura fixa para uniformidade */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==================== Hover no Desktop ==================== */
.page-inicial .single-top-categories-card:hover {
  transform: translateY(-3px) scale(1.02); /* Levanta o cartão */
  box-shadow: var(--boxShadow); /* Sombra suave */
  background: var(--mainColor); /* Fundo principal no hover */
}

/* ==================== Feedback de Clique ==================== */
.page-inicial .single-top-categories-card:active,
.page-inicial .single-top-categories-card:focus {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background-color: var(--successColor); /* Fundo de sucesso no clique */
  color: var(--whiteColor); /* Texto branco no clique */
}

/* ==================== Ajuste para o Ícone ==================== */
.page-inicial .card-body i,
.page-inicial .card-body svg.feather {
  transition:
    transform 0.2s ease,
    color 0.2s ease;
  width: 2.5rem; /* Largura do ícone */
  height: 2.5rem; /* Altura do ícone */
  color: var(--headingColor); /* Cor padrão do ícone */
}

/* ==================== Efeito ao Passar o Mouse ==================== */
.page-inicial .single-top-categories-card:hover i,
.page-inicial .single-top-categories-card:hover svg.feather {
  transform: scale(1.2);
  color: var(--whiteColor); /* Ícone claro no hover */
}

/* ==================== Texto do Botão ==================== */
.page-inicial .single-top-categories-card .text-body,
.page-inicial .single-top-categories-card h4 {
  transition: color 0.2s ease;
  color: var(--whiteColor); /* Cor padrão do texto */
  margin-top: 10px;
}

/* ==================== Estado Ativo ==================== */
.page-inicial .single-top-categories-card:active .text-body,
.page-inicial .single-top-categories-card:active h4 {
  color: var(--whiteColor); /* Texto claro no clique */
}

/* ==== Largura fixa para ícones de dropdown para manter alinhamento do texto ==== */
.icon-fixed-width {
  width: 18px;
  display: inline-block;
  text-align: center;
}

/* ==================== Estilos para o Menu Lateral ==================== */
.eventos-submenu {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.eventos-submenu > li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.eventos-submenu,
.eventos-submenu > li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}

.eventos-submenu a::before {
  display: none !important;
  content: none !important;
}

.eventos-submenu svg.feather {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5;
}

/* ===  Ajuste para feather icons da lucide === */
.eventos-submenu svg[data-lucide] {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5;
}

/* ==================== Estilos para DataTables ==================== */

/* Espaçamento inferior para o DataTable */
#basic_config {
  margin-bottom: 6px !important;
}

/* Drag scroll (wrapper da tabela) */
.dt-drag-scroll {
  cursor: grab;
}
.dt-drag-scroll.dt-dragging {
  cursor: grabbing;
}

/* Paginação: cursor */
.dataTables_wrapper .dataTables_paginate .page-link {
  cursor: pointer !important;
  border-radius: 6px;
  min-width: 34px;
  text-align: center;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  cursor: default !important;
}

/* ===== PAGINAÇÃO - CONTROLE TOTAL (tema dark) ===== */
.dataTables_wrapper .dataTables_paginate .page-link {
  color: var(--darkBodyColor) !important;
  background: var(--darkCardBgColor) !important;
  border: 1px solid var(--darkBorderColor) !important;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--mainColor) !important;
  border-color: var(--mainColor) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover {
  filter: brightness(1.05);
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: 0.45;
}

.dataTables_wrapper .dataTables_info {
  color: rgba(222, 226, 230, 0.85) !important;
}

.dataTables_wrapper .dataTables_info {
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 0.9;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ==================== Estilos para o Formulário ==================== */
/* Estilo para o campo de entrada */
.input-group .form-control {
  height: 3.5rem; /* Igual ao form-floating */
}

/* ==================== Responsividade para Dispositivos Móveis ==================== */
@media (hover: none) and (pointer: coarse) {
  .page-inicial .single-top-categories-card {
    background-color: var(--mainColor01);
  }
  .page-inicial .single-top-categories-card:active {
    background-color: var(--successColor);
    color: var(--whiteColor);
  }
}

/* ==================== Ajustes para o Select2 ==================== */

/* === Container geral: largura total === */
.select2-container {
  width: 100% !important;
}

/* === Seleção single e múltipla: fundo escuro, borda interna sutil === */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--darkBodyBgColor) !important;
  color: var(--whiteColorC) !important;
  border: 1px solid rgba(8, 60, 130, 0.09) !important; /* borda sutil */
  border-radius: 8px !important;
  min-height: 50px !important; /* base: 50 px; aumenta se precisar */
  padding: 0 0.75rem;
  display: flex;
  align-items: center; /* centraliza verticalmente */
  flex-wrap: wrap; /* permite quebra de linha no múltiplo */
  transition: all 0.5s ease;
  width: 100% !important;
}

/* === Seleção SINGLE – texto com reticências se ultrapassar === */
.select2-selection--single .select2-selection__rendered {
  display: block; /* precisa ser bloco p/ overflow funcionar */
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* exibe “…” no fim */
  color: var(--whiteColorC) !important;
}

/* Tooltip opcional para ver o texto completo */
.select2-selection--single .select2-selection__rendered[title] {
  cursor: help; /* mostra que há tooltip */
}

/* === Chips do MULTIPLE – mantêm-se dentro e quebram de linha === */
.select2-selection--multiple .select2-selection__choice {
  background-color: var(--mainColor) !important;
  border: none;
  color: #fff;
  padding: 2px 8px;
  margin-top: 6px;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  max-width: 100%; /* cada chip respeita a largura do campo */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Campo de busca (inline) no múltiplo — ocupa linha igual às tags */
.select2-selection--multiple .select2-search--inline .select2-search__field {
  line-height: 32px;
  color: var(--whiteColorC);
  min-width: 120px; /* evita ficar minúsculo */
}

/* === Resultados no dropdown === */
.select2-dropdown,
.select2-results__option {
  background-color: var(--darkBodyBgColor) !important;
  color: var(--whiteColorC) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--mainColor) !important;
  color: #fff !important;
}

/* === Borda de foco (leve) === */
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  box-shadow: inset 0 0 0 1px var(--mainColor);
}

/* ==================== Estilos para Botões Outline ==================== */
.btn-sigpm-outline {
  color: var(--mainColor);
  border-color: var(--mainColor);
}
.btn-sigpm-outline:hover {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: #fff;
}

.btn-remove-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px; /* quadrado, fica proporcional */
  height: 58px; /* igual ao input do tema */
  padding: 0;

  border-radius: 8px;
  background-color: rgba(238, 54, 140, 0.08);
  border: 1px solid var(--dangerColor01);
  color: var(--dangerColor);

  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.btn-remove-date i {
  font-size: 18px;
  line-height: 1;
}

.btn-remove-date:hover {
  background-color: var(--dangerColor);
  color: #fff;
  border-color: var(--dangerColor);
}

.alert-info {
  background-color: rgba(13, 202, 240, 0.08);
  border: 1px solid rgba(13, 202, 240, 0.25);
  color: var(--darkBodyColor);
}

.alert-info i {
  color: var(--mainColor);
}