/********************************************************************
 * TOKENS DE TEMA (não invasivo)
 ********************************************************************/
:root{
  --navbar-bg:            var(--color-primary, #005EB8);
  --navbar-bg-hover:      #004494;
  --navbar-link-color:    var(--color-on-primary, #FFFFFF);
  --navbar-height:        56px;
  --navbar-height-sm:     48px;

  --form-border:          var(--color-border, #adb5bd);
  --focus-border:         var(--color-focus, #86b7fe);
  --focus-ring:           var(--ring-focus, 0 0 0 0.25rem rgba(13,110,253,0.25));

  --table-border:         var(--color-border, #CCCCCC);

  --primary:              var(--color-primary, #2563EB);
  --on-primary:           var(--color-on-primary, #ffffff);
  --text-2:               var(--color-text-2, #334155);

  --line-soft:            #93C5FD;
}

/********************************************************************/
/* RESETS BÁSICOS                                                   */
/********************************************************************/
html, body { margin: 0 !important; }

/********************************************************************/
/* NAVBAR CUSTOMIZADA                                               */
/********************************************************************/
.navbar-custom{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030; /* padrão do Bootstrap para fixed */
  background-color: var(--navbar-bg) !important;
  height: var(--navbar-height);
  padding: 0 .75rem;
  display: flex;
  align-items: center;
}
.navbar-custom .navbar-brand img { height: 36px; width: auto; }
.navbar-custom .nav-link {
  color: var(--navbar-link-color) !important;
  font-weight: bold;
  font-size: 1rem !important;
  line-height: 1;
}
/* Remover anel no clique (mouse), manter para teclado */
.navbar-custom .nav-link:focus:not(:focus-visible),
.navbar-custom .dropdown-toggle:focus:not(:focus-visible),
.navbar-custom .dropdown-menu .dropdown-item:focus:not(:focus-visible),
.navbar-custom .nav-link.show,
.navbar-custom .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown (desktop) – acima do conteúdo, abaixo de modal/backdrop */
.navbar-custom .dropdown-menu {
  background: var(--navbar-bg) !important;
  border: none;
  position: absolute;
  z-index: 1049 !important; /* > 1030 (fixed) e > 1000 (dropdown default) */
  margin-top: .25rem;
}
.navbar-custom .dropdown-menu .dropdown-item {
  color: var(--navbar-link-color) !important;
  font-weight: bold;
  font-size: 1rem;
  padding: .5rem 1rem;
}
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus {
  background: var(--navbar-bg-hover) !important;
}

/********************************************************************/
/* COMPENSAÇÃO GLOBAL ABAIXO DA NAVBAR                              */
/********************************************************************/
body { padding-top: calc(var(--navbar-height) + .5rem) !important; }
@media (max-width: 768px) {
  .navbar-custom { height: var(--navbar-height-sm); }
  .navbar-custom .navbar-brand img { height: 32px; }
  body { padding-top: calc(var(--navbar-height-sm) + .5rem) !important; }
  .navbar-custom .nav-link { font-size: .875rem !important; }
  .navbar-custom .dropdown-menu .dropdown-item { font-size: .875rem; }
}
@media (max-width: 576px) {
  .navbar-custom .nav-link { display: block; padding: .5rem 1rem !important; }
  .navbar-custom .navbar-collapse { position: static !important; background: var(--navbar-bg); padding-bottom: 1rem; height: auto !important; }
  .navbar-nav .collapse.list-unstyled { list-style: none; margin: 0; padding: 0; background: var(--navbar-bg); }
  .navbar-nav .collapse.list-unstyled .nav-link { padding: .5rem 1.5rem !important; color: var(--navbar-link-color) !important; font-size: .9rem; font-weight: normal !important; }
  .navbar-nav .collapse.list-unstyled .nav-link:hover,
  .navbar-nav .collapse.list-unstyled .nav-link:focus { background: var(--navbar-bg-hover) !important; }
  .navbar-custom .navbar-toggler { border-color: var(--navbar-link-color); }
}

/********************************************************************/
/* BANNER E IMAGENS FLUIDAS                                         */
/********************************************************************/
.banner-container { margin-top: 0; text-align: center; }
/* Evita captura de clique pelo banner e neutraliza stacking */
.banner-container, .banner-container * { pointer-events: none !important; }
.banner-container .banner-logo { max-height: 400px; max-width: 100%; }

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

/********************************************************************/
/* UTILITÁRIAS RESPONSIVAS                                          */
/********************************************************************/
/* >>> Alinhar utilitários ao navbar-expand-lg (desktop ≥ 992px) */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
@media (max-width: 991.98px) {
  .mobile-only  { display: block !important; }
  .desktop-only { display: none  !important; }
}

/********************************************************************/
/* FORMULÁRIOS — variantes compactas (opt-in)                       */
/********************************************************************/
.card-compact .card-body { padding: 1rem !important; }
.card-compact .card-title, .card-compact .h5 { margin-bottom: .5rem !important; }
.form-compact .form-label { margin-bottom: .25rem !important; color: var(--text-2); }
.form-compact .row { --bs-gutter-y: .5rem; --bs-gutter-x: .75rem; }
.form-compact .form-control, .form-compact .form-select {
  padding: .375rem .5rem;
  height: calc(1.2em + .75rem + 2px);
  font-size: .95rem;
}
.form-compact .btn { padding: .45rem .9rem; }
.page-title { margin: .75rem 0 1rem !important; }

/* ===== INPUT-GROUP — alinhamento lupa (desktop & mobile) ===== */
.form-compact { --control-h: calc(1.2em + .75rem + 2px); }
@media (max-width: 576px) { .form-compact { --control-h: calc(1.2em + .7rem + 2px); } }
.form-compact .input-group > .form-control { height: var(--control-h); border-right: 0; }
.form-compact .input-group > .btn,
.form-compact .input-group > .input-group-text {
  height: var(--control-h);
  padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  border-left: 0;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* Cores e foco integrados ao tema */
.input-group .form-control,
.input-group .input-group-text,
.input-group .btn { border-color: var(--line-soft) !important; }
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text,
.input-group:focus-within .btn { border-color: var(--primary) !important; }

/* Botão da lupa em outline secundário seguindo as cores do tema */
.form-compact .input-group > .btn.btn-outline-secondary {
  color: var(--text-2);
  background: transparent;
}

/********************************************************************/
/* DIVISORES E LINHAS EM AZUL (cards e seções)                      */
/********************************************************************/
.card { border-color: var(--line-soft) !important; }
.card hr, .card .hr { border-top: 2px solid var(--primary) !important; opacity: 1 !important; }
.card .border-top { border-top-color: var(--primary) !important; }
.card .border-bottom { border-bottom-color: var(--primary) !important; }
.card .card-header { border-bottom-color: var(--primary) !important; }
.card .card-title { color: var(--primary); }

@supports selector(:has(*)) {
  .card:has(.datatable), .card:has(.dataTables_wrapper),
  .border:has(.datatable), .border:has(.dataTables_wrapper) {
    border-top-color: var(--primary) !important;
  }
}
.dt-card { border-top-color: var(--primary) !important; }

/********************************************************************/
/* FORMULÁRIOS – linhas realçadas                                   */
/********************************************************************/
.form-control:not(.is-valid):not(.is-invalid),
.form-select:not(.is-valid):not(.is-invalid) { border-color: var(--line-soft) !important; }
.form-control:hover:not(.is-valid):not(.is-invalid),
.form-select:hover:not(.is-valid):not(.is-invalid) { border-color: var(--primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: var(--focus-ring); outline: 0; }

/********************************************************************/
/* TABELAS                                                           */
/********************************************************************/
.table td, .table th { border-color: var(--table-border) !important; }

/********************************************************************/
/* ESCOPOS ESPECÍFICOS                                               */
/********************************************************************/
#tabela-enderecos th:nth-child(3), #tabela-enderecos td:nth-child(3) { display: none; }

/********************************************************************/
/* OFFCANVAS                                                         */
/********************************************************************/
.offcanvas .nav-link { pointer-events: auto; cursor: pointer; color: var(--navbar-link-color) !important; }

/********************************************************************/
/* MOBILE: esconder DataTables pesados                               */
/********************************************************************/
@media (max-width: 768px) {
  #tabelaAcertos_wrapper,
  #tabelaAcertos,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_length { display: none !important; }
}

/********************************************************************/
/* AJUSTES FINOS PARA MOBILE (≤576px)                                */
/********************************************************************/
@media (max-width: 576px) {
  main.container-lg { margin-top: .5rem !important; margin-bottom: .5rem !important; }
  .page-title { font-size: 1.35rem; margin: .25rem 0 .5rem !important; }
  .acerto-compact.card-compact .card-body { padding: .65rem .75rem !important; }
  .acerto-compact.card { border-color: #e5e7eb !important; }
  .acerto-compact .row { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .acerto-compact .form-label { display: none !important; }
  .acerto-compact .card-title, .acerto-compact .card-body > hr { display: none !important; }
  .form-compact { --control-h: 38px; }
  .form-compact .input-group > .form-control { height: var(--control-h); }
  .form-compact .input-group > .btn,
  .form-compact .input-group > .input-group-text { height: var(--control-h); padding-top: 0; padding-bottom: 0; }
  .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.25) !important; }
  .acerto-compact .btn[type="submit"] { width: 70%; display: block; margin: .25rem auto 0 auto; }
}

/* Segurança: evita scroll lateral em qualquer tela */
html, body { overflow-x: hidden; }

/* Remover o "quadrado" no menu mobile (touch) */
@media (hover: none) and (pointer: coarse) {
  .offcanvas .nav-link:focus,
  .offcanvas .nav-link:focus-visible,
  .offcanvas .nav-link:active,
  .offcanvas .offcanvas-link:focus,
  .offcanvas .offcanvas-link:focus-visible,
  .offcanvas .offcanvas-link:active,
  .offcanvas .offcanvas-toggle:focus,
  .offcanvas .offcanvas-toggle:focus-visible,
  .offcanvas .offcanvas-toggle:active,
  .offcanvas [data-bs-toggle="collapse"]:focus,
  .offcanvas [data-bs-toggle="collapse"]:active {
    outline: none !important;
    box-shadow: none !important;
  }
  .offcanvas a, .offcanvas button { -webkit-tap-highlight-color: transparent; }
}

/* === Containers Bootstrap ocupando a largura total === */
.container, .container-sm, .container-md,
.container-lg, .container-xl, .container-xxl { max-width: 100% !important; }

/* Tabelas e DataTables sempre 100% */
.table, table.dataTable, .dataTables_wrapper, .datatable { width: 100% !important; }

/* Gutter lateral quando o main é fluido */
main.container-fluid > * { padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 576px) {
  main.container-fluid { margin-top: .5rem !important; margin-bottom: .5rem !important; }
}

/* >>> Garante que o header tenha stacking context próprio */
header { isolation: isolate; }
