/* ==================================================== */
/* CORREÇÃO DEFINITIVA DAS TELAS PRETAS E MODAIS        */
/* ==================================================== */

/* Força a caixa do modal a ficar sempre na frente de tudo */
.modal {
  z-index: 1060 !important;
}

/* Força o fundo escuro transparente a ficar atrás da caixa */
.modal-backdrop {
  z-index: 1050 !important;
}

/* Se o celular falhar na animação, força a caixa a aparecer */
.modal.show {
  display: block !important;
  opacity: 1 !important;
}

/* Coloca a sua tela de "Viatura Trancada" na camada certa */
#bloqueio-identidade {
  z-index: 1045 !important;
}

body {
  background-color: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
}
.hidden {
  display: none !important;
}
.module-card {
  cursor: pointer;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.module-card:hover {
  transform: translateY(-5px);
}

/* Estilos de Tela e Animação */
.step-content {
  display: none;
}
.step-content.active {
  display: block;
  animation: fadeIn 0.3s;
}
.bg-vtr {
  background-color: #e3f2fd;
  border-left: 5px solid #0d6efd;
}
.bg-gtam {
  background-color: #fff3cd;
  border-left: 5px solid #ffc107;
}

/* Modo Leitura */
.readonly-mode input,
.readonly-mode select,
.readonly-mode textarea {
  background-color: #f8f9fa !important;
  pointer-events: none !important;
  border: 1px solid #dee2e6 !important;
}
.readonly-mode .btn-add,
.readonly-mode .btn-remove {
  display: none !important;
}

/* ESTILOS ESCALA v24 */
.table-escala {
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
}
.table-escala th,
.table-escala td {
  padding: 4px;
  vertical-align: middle;
  border: 1px solid #dee2e6;
  height: 50px;
}
.table-escala thead th {
  background-color: #343a40;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cell-dia {
  cursor: pointer;
  min-width: 45px;
  position: relative;
}
.cell-dia:hover {
  filter: brightness(0.9);
  border: 2px solid #666;
}
.cell-horario {
  display: block;
  font-size: 0.6rem;
  color: #555;
  margin-top: 2px;
}

/* Cores de Status */
.status-TURNO {
  background-color: #cfe2ff;
  color: #084298;
}
.status-FOLGA {
  background-color: #d1e7dd;
  color: #0f5132;
}
.status-P-TURNO {
  background-color: #6610f2;
  color: #ffffff;
}
.status-P-FOLGA {
  background-color: #e0cffc;
  color: #3d0a91;
}
.status-FERIAS {
  background-color: #ffe5d0;
  color: #fd7e14;
}
.status-ATESTADO {
  background-color: #f8d7da;
  color: #842029;
}
.status-L-PREMIO {
  background-color: #fff3cd;
  color: #664d03;
}

.st-feriado {
  background-color: #ffc107 !important; /* Amarelo vibrante */
  color: #212529 !important; /* Texto escuro para contraste */
  font-weight: bold;
}

.st-licenca {
  background-color: #e2e3e5 !important;
  color: #383d41 !important;
  font-weight: bold;
}

/* Estilo para a legenda também */
.badge-legenda.st-feriado {
  background-color: #ffc107;
  color: #212529;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- IMPRESSÃO --- */
#area-impressao {
  display: none;
}
@media print {
  body > *:not(#area-impressao) {
    display: none !important;
  }
  #area-impressao {
    display: block !important;
    width: 100%;
    font-family: Arial;
  }
  @page {
    size: landscape;
    margin: 0.5cm;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
  }
  th,
  td {
    border: 1px solid #000;
    padding: 2px;
    text-align: center;
  }
  .bg-dark {
    background-color: #ccc !important;
    color: #000 !important;
  }
}
/* =========================================================
   MÓDULO DE ESCALA (MATRIZ E CORES)
   ========================================================= */

/* Tabela Matriz da Escala */
.table-matriz th {
  font-size: 0.75rem;
  text-align: center;
  vertical-align: middle;
  background-color: #343a40;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-matriz td {
  text-align: center;
  vertical-align: middle;
  padding: 2px;
  font-size: 0.65rem;
  border: 1px solid #dee2e6;
  cursor: pointer;
  height: 38px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  font-weight: 700;
  line-height: 1.1;
}

/* Efeito Hover (Zoom) na célula */
.table-matriz td:hover {
  filter: brightness(0.95);
  transform: scale(1.15);
  z-index: 100;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border: 1px solid #000;
  position: relative;
}

/* Badges da Legenda */
.badge-legenda {
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 5px;
}

/* =========================================================
 CORES DOS STATUS DA ESCALA E GRADE
 ========================================================= */
/* APLICA A BORDA BRANCA FINA APENAS NA GRADE (Salva as outras bordas) */
.table-matriz td[class*='st-'] {
  border: 1px solid #ffffff !important;
}

.st-turno,
.st-eqp {
  background-color: #cfe2ff !important;
  color: #084298;
}
.st-turno-permuta {
  background-color: #6610f2 !important;
  color: white;
  border: 2px solid #0d6efd !important;
}
.st-folga {
  background-color: #d1e7dd !important;
  color: #0f5132;
}
.st-folga-perm {
  background-color: #e0cffc !important;
  color: #3d0a91;
}
.st-abonada {
  background-color: #fff3cd !important;
  color: #664d03;
}
.st-ferias {
  background-color: #ffe5d0 !important;
  color: #cf5900;
}
.st-curso {
  background-color: #cff4fc !important;
  color: #055160;
}
.st-atestado {
  background-color: #f8d7da !important;
  color: #842029;
}
.st-outros {
  background-color: #e2e3e5 !important;
  color: #41464b;
}

/* Cores para Abonada Natalícia e Ponto Facultativo */
.st-abonada-nat {
  background-color: #ecce69 !important; /* Fundo lilás claro (igual ao PDF) */
  color: #5f5125;
}

.st-facultativo {
  background-color: #b2ebb2 !important;
  color: #0b4127;
}
/* ==================================================== */
/* AJUSTE FINO PARA MOBILE (Títulos e Cards)            */
/* ==================================================== */

@media (max-width: 768px) {
  /* Reduz o título que estava travado em 1.25rem */
  #dashboard-screen h5,
  .card h5 {
    font-size: 1rem !important; /* Diminui para um tamanho padrão de texto forte */
    line-height: 1.2 !important;
  }

  /* Reduz o tamanho dos ícones para não empurrar o texto */
  #dashboard-screen i {
    font-size: 1.3rem !important;
  }

  /* Encolhe os cards para caberem melhor lado a lado */
  #dashboard-screen .card {
    margin-bottom: 10px !important;
  }

  /* Tira o excesso de espaço interno dos cards */
  #dashboard-screen .card-body {
    padding: 10px !important;
  }

  /* Ajusta legendas ou textos menores */
  #dashboard-screen small,
  #dashboard-screen .text-muted {
    font-size: 0.75rem !important;
  }
}

/* ==================================================== */
/* ENCOLHENDO AS CAIXAS DOS BOTÕES INICIAIS NO CELULAR  */
/* ==================================================== */

@media (max-width: 768px) {
  /* 1. Tira a "gordura" grossa da caixa (anula o p-4) */
  #dashboard-screen .card.p-4 {
    padding: 15px 10px !important; /* Reduz bastante as bordas internas */
    min-height: 110px !important; /* Deixa a altura mais compacta */
  }

  /* 2. Encolhe os ícones gigantes (que estão com 3rem no HTML) */
  #dashboard-screen .card > .mb-2 {
    font-size: 1.8rem !important; /* Diminui o ícone pela metade */
    margin-bottom: 5px !important; /* Aproxima do título */
  }

  /* 3. Aproxima a etiqueta (ex: "8 ferramentas") do título (anula o mt-3) */
  #dashboard-screen .card .mt-3 {
    margin-top: 8px !important;
  }
}

/* ==================================================== */
/* AJUSTE DAS LISTAS DE RELATÓRIOS NO CELULAR           */
/* ==================================================== */

@media (max-width: 768px) {
  /* 1. Muda a orientação de "lado a lado" para "empilhado" */
  #lista-meus-enviados .list-group-item,
  #lista-meus-relatorios .list-group-item,
  #lista-aprovacao .list-group-item {
    flex-direction: column !important;
    align-items: flex-start !important; /* Alinha o texto na esquerda */
    gap: 10px !important; /* Espaço entre o texto e o botão */
    padding: 12px 15px !important;
  }

  /* 2. Reduz a fonte do Título (Ex: RO #1020/26) */
  #lista-meus-enviados .list-group-item strong,
  #lista-meus-relatorios .list-group-item strong,
  #lista-aprovacao .list-group-item strong {
    font-size: 0.95rem !important;
    display: block; /* Garante que a data caia pra linha de baixo se precisar */
  }

  /* 3. Reduz a fonte dos detalhes miúdos */
  #lista-meus-enviados .list-group-item small,
  #lista-meus-relatorios .list-group-item small,
  #lista-aprovacao .list-group-item small {
    font-size: 0.8rem !important;
  }

  /* 4. Transforma o selo (badge) em um botão largo de ponta a ponta */
  #lista-meus-enviados .list-group-item .badge,
  #lista-meus-relatorios .list-group-item .badge,
  #lista-aprovacao .list-group-item .badge {
    width: 100% !important; /* Ocupa a largura toda */
    text-align: center !important;
    padding: 10px !important; /* Dá uma altura boa pro dedo tocar */
    font-size: 0.75rem !important; /* Reduz a letra do botão */
    white-space: normal !important; /* Se o texto for muito longo, ele quebra linha sem vazar da tela */
    border-radius: 6px !important;
  }
}

/* ==================================================== */
/* 1. O CABEÇALHO (Título "GCM")                        */
/* Escuro, Texto Branco e Fixo no Topo e na Esquerda    */
/* ==================================================== */
#tabela-escala thead th.col-nome {
  position: sticky !important;
  top: 0 !important; /* Trava no topo ao descer a página */
  left: 0 !important; /* Trava na esquerda ao correr para o lado */
  z-index: 12 !important; /* Fica acima dos nomes e da grade */
  background-color: #212529 !important; /* Fundo Preto/Grafite */
  color: #ffffff !important; /* Letra Branca */
  text-align: center !important;
  border-right: 2px solid #adb5bd !important;
  border-bottom: 2px solid #000000 !important;
  min-width: 190px;
  max-width: 230px;
}

/* ==================================================== */
/* 2. O CORPO DA TABELA (Nomes dos Guardas)             */
/* Claro, Texto Escuro e Fixo APENAS na Esquerda        */
/* ==================================================== */
#tabela-escala tbody td.col-nome {
  position: sticky !important;
  left: 0 !important; /* Trava na esquerda ao correr para o lado */
  z-index: 5 !important; /* Fica abaixo do título ao subir a página */
  background-color: #f8f9fa !important; /* Fundo Cinza Gelo */
  color: #212529 !important; /* Letra Grafite Escura */
  font-weight: bold !important;
  border-right: 2px solid #adb5bd !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* Garante que os links/textos dentro dos nomes não fiquem brancos */
#tabela-escala tbody td.col-nome span:not(.badge),
#tabela-escala tbody td.col-nome div {
  color: #212529 !important;
}

/* ==================================================== */
/* 3. AJUSTES PARA MOBILE (Telas Pequenas)              */
/* ==================================================== */
@media (max-width: 768px) {
  #tabela-escala thead th.col-nome,
  #tabela-escala tbody td.col-nome {
    max-width: 120px !important;
    min-width: 120px !important;
    font-size: 0.8rem !important;
  }
}

/* ==================================================== */
/* CLASSES RECUPERADAS (TÍTULOS, HORAS E BADGES)        */
/* ==================================================== */

/* Linhas de Separação de Equipes (Azul Marinho) */
.row-equipe {
  background-color: #002244 !important;
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 0 !important;
  text-align: center;
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
}

/* Horário pequeno dentro da célula de Turno */
.cell-time {
  display: block;
  font-size: 0.85em;
  font-weight: 900;
  color: #212529;
  margin-top: 2px;
  text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
}

/* ENCOLHE AS BADGES (Selos) na coluna de nomes */
#tabela-escala tbody td.col-nome .badge {
  font-size: 0.55rem !important;
  padding: 3px 5px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  letter-spacing: 0.5px;
}

/* ==================================================== */
/* COMPACTAÇÃO DO NOME E HORÁRIO (VERSÃO FINAL)         */
/* ==================================================== */

/* 1. Destrava a coluna e alinha tudo pelo topo */
#tabela-escala tbody td.col-nome {
  white-space: normal !important;
  vertical-align: top !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2. Organiza a Div que segura o Nome e a Badge */
#tabela-escala tbody td.col-nome div {
  display: flex !important;
  flex-direction: column !important; /* No celular, o selo vai para baixo do nome */
  align-items: flex-start !important; /* Tudo colado na esquerda */
  justify-content: flex-start !important;
  line-height: 1.1 !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

/* 3. Se a tela for grande (Computador), coloca Nome e Badge lado a lado */
@media (min-width: 769px) {
  #tabela-escala tbody td.col-nome div {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
}

/* 4. Mata a "teimosia" da Badge (Selo) para ela ficar comportada */
#tabela-escala tbody td.col-nome .badge {
  float: none !important;
  font-size: 0.6rem !important; /* Tamanho reduzido e elegante */
  padding: 3px 5px !important;
  margin: 0 !important;
}

/* 5. Prende o Horário na esquerda para não ficar voando no meio da tela */
#tabela-escala tbody td.col-nome small.text-muted {
  display: block !important;
  text-align: left !important; /* Força o alinhamento para a esquerda */
  font-size: 0.7rem !important;
  line-height: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 6. Aumenta a coluna no Celular para parar de esmagar o texto */
@media (max-width: 768px) {
  #tabela-escala thead th.col-nome,
  #tabela-escala tbody td.col-nome {
    min-width: 145px !important; /* Aumentado para dar espaço na tela */
    max-width: 160px !important;
  }
}

/* ==================================================== */
/* REFORÇO DA LINHA DIVISÓRIA DOS NOMES (MOBILE)        */
/* ==================================================== */
#tabela-escala tbody td.col-nome {
  border-bottom: 1px solid #6c757d !important; /* Um cinza bem mais forte e definido */
}

/* ==================================================== */
/* COMPACTAÇÃO DA LEGENDA DA ESCALA                     */
/* ==================================================== */

/* Encolhe os botõezinhos coloridos da legenda */
.badge-legenda {
  font-size: 0.6rem !important; /* Fonte bem menor */
  padding: 3px 6px !important; /* Tira o excesso de 'gordura' */
  margin-right: 2px !important; /* Aproxima um do outro */
  border-radius: 3px !important;
}

/* Encolhe a palavra "Legenda:" para acompanhar o tamanho */
#escala-screen .bg-light.p-2 small.text-muted {
  font-size: 0.7rem !important;
  margin-right: 4px !important;
}

/* Afina a caixa cinza que segura a legenda */
#escala-screen .bg-light.p-2.rounded {
  padding: 6px 8px !important;
}

/* ==================================================== */
/* ALINHAMENTO DO TÍTULO DA EQUIPE NO MOBILE            */
/* ==================================================== */
@media (max-width: 768px) {
  .row-equipe {
    text-align: left !important;
    padding-left: 10px !important; /* Dá um recuo para não colar na borda */
    position: sticky !important; /* Tenta manter o texto visível ao rolar */
    left: 0 !important;
  }
}

/* ==================================================== */
/* COR PARA A FOLGA EXTRA DA ESCALA                     */
/* ==================================================== */
.st-folga-extra {
  background-color: #a3cfbb !important; /* Verde mais forte para destacar */
  color: #0a3622;
  border: 2px solid #198754 !important;
}

/* Cor vermelha padrão para a aba inativa */
.nav-pills .nav-link.nav-pill-danger {
  color: #dc3545;
  font-weight: 600; /* Dá um leve destaque na espessura */
}

/* Fundo vermelho e texto branco quando a aba estiver ativa */
.nav-pills .nav-link.nav-pill-danger.active {
  background-color: #dc3545;
  color: #ffffff !important;
}