/* Background aplicado APENAS ao conteúdo (main), não afeta navbar/header nem footer */
.app-background{

  position: relative;
  min-height: calc(100vh - 140px); /* margem aproximada p/ header+footer */
  background-image:
    linear-gradient(rgba(10,15,25,.72), rgba(10,15,25,.72)),
    url("../img/bg-sistema.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  /* FIX: isto anulava seu background-image acima */
  /* background: transparent !important; */
}

/* garante que cards/tabelas continuem legíveis sobre o background */
.app-background .card-ui{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}



/* ============================= */
/* VISUAL MAIS PROFISSIONAL      */
/* ============================= */
:root{
  --ui-radius: 16px;
  --ui-border: rgba(255,255,255,.12);
  --ui-shadow: 0 10px 28px rgba(0,0,0,.25);
  --ui-text: rgba(255,255,255,.92);
  --ui-muted: rgba(255,255,255,.70);
}

body{
  color: var(--ui-text);
}

.muted{ color: var(--ui-muted) !important; }

.card-ui{
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.table{
  color: var(--ui-text);
}
.table thead th{
  color: rgba(255,255,255,.85);
  border-bottom-color: rgba(255,255,255,.12);
}
.table td, .table th{
  border-top-color: rgba(255,255,255,.10);
}

.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ui-text);
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

.btn{
  border-radius: 12px;
}
.btn-soft{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ui-text);
  transition: all .22s ease;
}
.btn-soft:hover{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(30,64,175,.95));
  border-color: rgba(59,130,246,.85);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}

/* Ativo (página atual) */
.btn-soft.active,
.btn-soft.is-active,
.btn-soft[aria-current="page"]{
  background: linear-gradient(135deg, rgba(22,163,74,.95), rgba(21,128,61,.95));
  border-color: rgba(34,197,94,.85);
  box-shadow: 0 10px 22px rgba(34,197,94,.22);
}

/* Botão outline do Bootstrap com visual consistente */
.btn-outline-light{
  border-color: rgba(255,255,255,.18) !important;
  color: var(--ui-text) !important;
  transition: all .22s ease;
}
.btn-outline-light:hover{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(30,64,175,.95)) !important;
  border-color: rgba(59,130,246,.85) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
  color: #fff !important;
}
.btn-outline-light.active,
.btn-outline-light.is-active,
.btn-outline-light[aria-current="page"]{
  background: linear-gradient(135deg, rgba(22,163,74,.95), rgba(21,128,61,.95)) !important;
  border-color: rgba(34,197,94,.85) !important;
  box-shadow: 0 10px 22px rgba(34,197,94,.22);
  color: #fff !important;
}

/* Acessibilidade */
.btn:focus-visible{
  outline: 2px solid rgba(59,130,246,.8);
  outline-offset: 2px;
}

/* ============================================
   🔥 VISIBILIDADE GLOBAL — CAIXASYS
============================================ */

/* Overlay mais escuro para fundos com imagem */
.app-background,
.page-bg,
.main-bg,
body.has-bg::before {
  background: linear-gradient(
      rgba(8, 15, 28, 0.85),
      rgba(8, 15, 28, 0.85)
    ),
    var(--bg-image, none) center / cover no-repeat !important;
}

/* Cards sempre legíveis */
.card-ui,
.card,
.glass-card,
.panel {
  background: rgba(18, 25, 40, 0.92) !important;
  backdrop-filter: blur(6px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Textos */
.card-ui,
.card-ui *,
.card *,
.panel * {
  color: #f2f5fa !important;
}

/* Labels */
.form-label {
  color: #cfd6e6 !important;
  font-weight: 500;
}

/* Inputs / selects */
.form-control,
.form-select {
  background: #0f1628 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25);
}

.form-control::placeholder {
  color: rgba(255,255,255,.55);
}

/* SELECT aberto */
.form-select option {
  background: #fff;
  color: #000;
}

/* Tabelas */
.table,
.table thead,
.table tbody tr {
  background: rgba(15,20,30,.95) !important;
}

.table td,
.table th {
  color: #e9edf5 !important;
}

/* Cabeçalhos */
h1, h2, h3, h4, h5 {
  color: #fff;
}

/* Barra superior */
.navbar,
.topbar {
  background: rgba(10,15,25,.96) !important;
}

/* Dropdowns navbar */
.dropdown-menu {
  background: #0f1628;
}

.dropdown-menu a {
  color: #fff !important;
}

/* Badge */
.badge-soft {
  background: rgba(0, 140, 255, .25);
  color: #7ecbff;
}

/* Botões outline */
.btn-outline-light {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255,255,255,.12);
}

/* =========================================================
   ✅ PAINEL DE LEITURA (resolve texto invisível em TODAS telas)
   Aplica um "conteúdo opaco" dentro do app-background
========================================================= */
.app-background > .container,
.app-background > .container-fluid,
.app-background .container.py-4,
.app-background .container-fluid.py-4,
.app-background main .container,
.app-background main .container-fluid{
  background: rgba(15, 20, 30, .88) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 24px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* Garante texto visível em qualquer elemento dentro do painel */
.app-background,
.app-background *{
  color: rgba(255,255,255,.92);
}

/* Muted visível */
.app-background .muted{
  color: rgba(255,255,255,.72) !important;
}
/* Inputs/selects sempre legíveis */
.app-background .form-control,
.app-background .form-select{
  background: rgba(10, 14, 22, .92) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

.app-background .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Opções do select (lista aberta) */
.app-background .form-select option{
  background: #fff !important;
  color: #000 !important;
}

/* Tabelas legíveis */
.app-background .table{
  color: rgba(255,255,255,.92) !important;
}

.app-background .table thead th{
  color: rgba(255,255,255,.92) !important;
}

.app-background .table td,
.app-background .table th{
  border-color: rgba(255,255,255,.12) !important;
}

/* ========================================= */
/* REMOVE FAIXA BRANCA ACIMA DAS ABAS        */
/* ========================================= */

/* navbar não empurra as abas */
.navbar{
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* wrapper das abas */
.top-tabs-wrap{
  background: transparent !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}

/* remove pseudo-elementos invisíveis */
.top-tabs-wrap::before,
.top-tabs-wrap::after{
  content: none !important;
  display: none !important;
}

/* container das abas */
.top-tabs{
  background: transparent !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* garante que main não crie faixa clara */
main,
.app-shell main{
  background: transparent !important;
}

/* ========================================================= */
/* FIX: DESATIVAR BLOCOS ANTIGOS (evita conflito)             */
/* (não apague, só comenta)                                  */
/* ========================================================= */

/*
  BLOCO ANTIGO 1 (contraste/tamanho padrão)
  - estava duplicando .top-tabs e .tab-link
*/
/*
.top-tabs .tab-link{
  color: rgba(255,255,255,.65) !important;
  background: rgba(0,0,0,.90);
  border-radius: 12px;
}
.top-tabs .tab-link.active{
  color: #fff !important;
  background: linear-gradient(135deg,#1f4fd8,#4aa3ff);
  box-shadow: 0 6px 16px rgba(0,0,0,.99);
}
.top-tabs .tab-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.15);
}
.top-tabs{
  gap: 12px;
}
.top-tabs .tab-link{
  color: rgba(255,255,255,.65) !important;
  background: rgba(0,0,0,.99);
  padding: 14px 26px;
  min-height: 52px;
  min-width: 140px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
*/

/* ============================= */
/* CONTAINER DAS ABAS (ÚNICO)    */
/* ============================= */

.top-tabs{
  display: flex;
  gap: 0;                 /* SEM espaço */
  align-items: flex-end;
  padding-left: 6px;
}

/* ============================= */
/* ABA PADRÃO (ÚNICO)            */
/* ============================= */

.top-tabs .tab-link{
  font-size: 12px !important;
  font-weight: 700;

  padding: 10px 18px;
  min-height: 40px;
  min-width: 110px;

  border-radius: 12px 12px 0 0;

  margin-left: -6px;  /* faz uma “entrar” sob a outra */

  color: #f8fbff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);

  border: 1px solid rgba(255,255,255,.18);
  border-bottom: none;

  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: all .2s ease;
}

/* ============================= */
/* CORES MAIS CLARAS (FIX)       */
/* ============================= */

.top-tabs .tab-link:nth-child(1){ background:#3f5f96; } /* azul */
.top-tabs .tab-link:nth-child(2){ background:#6b5fb3; } /* roxo */
.top-tabs .tab-link:nth-child(3){ background:#4f8b63; } /* verde */
.top-tabs .tab-link:nth-child(4){ background:#b07a42; } /* dourado */
.top-tabs .tab-link:nth-child(5){ background:#9b4f6c; } /* vinho */
.top-tabs .tab-link:nth-child(6){ background:#528f99; }/*Ciano escuro moderado*/
.top-tabs .tab-link:nth-child(7){ background:#e60000; } /* petróleo */
.top-tabs .tab-link:nth-child(8){ background:#569835; } /* verde musgo */


/* ============================= */
/* ABA ATIVA (ÚNICO)             */
/* ============================= */

.top-tabs .tab-link.active{
  background: linear-gradient(135deg,#1f4fd8,#4aa3ff) !important;
  color: #fff !important;

  z-index: 10;

  padding-top: 14px;
  min-height: 46px;

  box-shadow: 0 -4px 14px rgba(0,0,0,.6);
}

/* ============================= */
/* HOVER                         */
/* ============================= */

.top-tabs .tab-link:hover{
  filter: brightness(1.12);
}

/* ============================= */
/* RESPONSIVO                    */
/* ============================= */

@media(max-width:900px){
  .top-tabs{
    flex-wrap: wrap;
    gap: 6px;
  }

  .top-tabs .tab-link{
    margin-left: 0;
    border-radius: 10px;
  }
}
/* =========================================================
   ✅ AUTO-CONTRASTE (mínimo necessário, sem apagar seu CSS)
   Onde o fundo for claro/branco -> texto preto
   Onde o fundo for escuro -> texto branco (padrão atual)
   COLE NO FINAL do app.css
========================================================= */

/* ---- PADRÃO: tudo escuro continua branco (não altera seu visual) ---- */
body,
.app-background{
  color: rgba(255,255,255,.92);
}

/* ---- FUNDO CLARO => TEXTO PRETO (EXCEÇÕES) ---- */
/* (Bootstrap/Componentes comuns que ficam brancos) */
.bg-white,
.bg-light,
.table-light,
.alert-light,
.modal-content,
.offcanvas,
.dropdown-menu.bg-white,
.dropdown-menu.bg-light,
.card.bg-white,
.card.bg-light,
.list-group-item.bg-white,
.list-group-item.bg-light{
  color: #111 !important;
}

/* tudo dentro do bloco claro também preto */
.bg-white *,
.bg-light *,
.table-light *,
.alert-light *,
.modal-content *,
.offcanvas *,
.dropdown-menu.bg-white *,
.dropdown-menu.bg-light *,
.card.bg-white *,
.card.bg-light *,
.list-group-item.bg-white *,
.list-group-item.bg-light *{
  color: #111 !important;
}

/* ---- TABELAS claras ---- */
.table.table-light th,
.table.table-light td,
.table.table-light thead th{
  color: #111 !important;
}

/* ---- INPUTS / SELECTS em fundos claros ---- */
.bg-white .form-control,
.bg-light .form-control,
.bg-white .form-select,
.bg-light .form-select,
.modal-content .form-control,
.modal-content .form-select{
  background: #fff !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
}

.bg-white .form-control::placeholder,
.bg-light .form-control::placeholder,
.modal-content .form-control::placeholder{
  color: rgba(0,0,0,.45) !important;
}

/* opções do select já estão OK (branco/preto), reforço */
.bg-white .form-select option,
.bg-light .form-select option,
.modal-content .form-select option{
  background: #fff !important;
  color: #000 !important;
}

/* ---- Links em fundo claro ---- */
.bg-white a,
.bg-light a,
.modal-content a,
.dropdown-menu.bg-white a,
.dropdown-menu.bg-light a{
  color: #0b5ed7 !important;
}

/* ---- Dropdown branco (se algum estiver branco por padrão do bootstrap) ---- */
.dropdown-menu{
  color: #fff; /* mantém seu padrão escuro */
}
.dropdown-menu.bg-white,
.dropdown-menu.bg-light{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
} 
/* TH preto só em tabelas claras */
.table.table-light thead th,
.bg-white .table thead th,
.bg-light .table thead th{
  color: #000 !important;
}
/* =========================================================
   ✅ ABAS DEFINITIVAS (sem conflito, estilo arquivo)
   Cole NO FINAL do app.css
========================================================= */

/* remove qualquer resíduo visual do wrapper */
.top-tabs-wrap{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* container: abas coladas e alinhadas */
.top-tabs{
  display: flex !important;
  gap: 0 !important;
  align-items: flex-end !important;
  padding-left: 6px !important;
  margin-top: 0 !important;
}

/* abas: tamanho fixo, fonte 12, texto sempre legível */
.top-tabs .tab-link{
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  padding: 12px 18px !important;
  min-height: 44px !important;
  min-width: 120px !important;

  border-radius: 12px 12px 0 0 !important;
  margin-left: -6px !important;

  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;

  border: 1px solid rgba(255,255,255,.18) !important;
  border-bottom: none !important;

  background: #3f5f96; /* fallback */
  position: relative !important;
  z-index: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap !important;  /* não quebra o texto */
  overflow: hidden !important;     /* evita estourar */
  text-overflow: ellipsis !important;

  transition: filter .2s ease, transform .2s ease !important;
}

/* cores por aba (até 8 como você já tem) */
.top-tabs .tab-link:nth-child(1){ background:#3f5f96 !important; } /* azul */
.top-tabs .tab-link:nth-child(2){ background:#6b5fb3 !important; } /* roxo */
.top-tabs .tab-link:nth-child(3){ background:#4f8b63 !important; } /* verde */
.top-tabs .tab-link:nth-child(4){ background:#b07a42 !important; } /* dourado */
.top-tabs .tab-link:nth-child(5){ background:#9b4f6c !important; } /* vinho */
.top-tabs .tab-link:nth-child(6){ background:#528f99 !important; } /* ciano */
.top-tabs .tab-link:nth-child(7){ background:#e60000 !important; } /* vermelho */
.top-tabs .tab-link:nth-child(8){ background:#569835 !important; } /* verde musgo */

/* aba ativa: sobe um pouco e fica “na frente” */
.top-tabs .tab-link.active{
  background: linear-gradient(135deg,#1f4fd8,#4aa3ff) !important;
  color: #fff !important;

  z-index: 10 !important;

  min-height: 50px !important;
  padding-top: 16px !important;

  box-shadow: 0 -4px 14px rgba(0,0,0,.6) !important;
}

/* hover: leve destaque */
.top-tabs .tab-link:hover{
  filter: brightness(1.10) !important;
  transform: translateY(-1px) !important;
}

/* responsivo: quebra linha sem sobreposição */
@media (max-width:900px){
  .top-tabs{
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-left: 0 !important;
  }
  .top-tabs .tab-link{
    margin-left: 0 !important;
    border-radius: 10px !important;
    min-width: 140px !important;
  }
}